Field config API: add slider editor (grafana#28007)

* Field config: implementation slider editor (grafana#27592) * PR-28007 feedback fixed * Field config: implementation slider editor (grafana#27592) * PR-28007 feedback fixed * processed review PR-28007 * Field config: implementation slider editor (grafana#27592) * PR-28007 feedback fixed * Field config: implementation slider editor (grafana#27592) * processed review PR-28007 * fixing leftover number[] bugs * RichHistoryQueriesTab.test fix + slider vertical feat fixed * fixed Slider.test.tsx expectation * Added @docs to prevent build-frontend-docs from failing Co-authored-by: Isa Ozler <[email protected]>
ekmixon · Oct 28, 2020 · 85a0479 · 85a0479
1 parent 1bff2fd
commit 85a0479
Show file tree

Hide file tree

Showing 19 changed files with 423 additions and 181 deletions.
diff --git a/packages/grafana-data/src/field/overrides/processors.ts b/packages/grafana-data/src/field/overrides/processors.ts
@@ -24,6 +24,12 @@ export const numberOverrideProcessor = (
   return parseFloat(value);
 };
 
+export interface SliderFieldConfigSettings {
+  min: number;
+  max: number;
+  step?: number;
+}
+
 export interface DataLinksFieldConfigSettings {}
 
 export const dataLinksOverrideProcessor = (

diff --git a/packages/grafana-data/src/types/OptionsUIRegistryBuilder.ts b/packages/grafana-data/src/types/OptionsUIRegistryBuilder.ts
@@ -1,6 +1,11 @@
 import { ComponentType } from 'react';
 import { RegistryItem, Registry } from '../utils/Registry';
-import { NumberFieldConfigSettings, SelectFieldConfigSettings, StringFieldConfigSettings } from '../field';
+import {
+  NumberFieldConfigSettings,
+  SliderFieldConfigSettings,
+  SelectFieldConfigSettings,
+  StringFieldConfigSettings,
+} from '../field';
 
 /**
  * Option editor registry item
@@ -71,6 +76,10 @@ export interface OptionsUIRegistryBuilderAPI<
     config: OptionEditorConfig<TOptions, TSettings, number>
   ): this;
 
+  addSliderInput?<TSettings extends SliderFieldConfigSettings = SliderFieldConfigSettings>(
+    config: OptionEditorConfig<TOptions, TSettings, number>
+  ): this;
+
   addTextInput?<TSettings extends StringFieldConfigSettings = StringFieldConfigSettings>(
     config: OptionEditorConfig<TOptions, TSettings, string>
   ): this;

diff --git a/packages/grafana-data/src/utils/OptionsUIBuilders.ts b/packages/grafana-data/src/utils/OptionsUIBuilders.ts
@@ -12,6 +12,7 @@ import {
   StandardEditorProps,
   StringFieldConfigSettings,
   NumberFieldConfigSettings,
+  SliderFieldConfigSettings,
   ColorFieldConfigSettings,
   identityOverrideProcessor,
   UnitFieldConfigSettings,
@@ -39,6 +40,18 @@ export class FieldConfigEditorBuilder<TOptions> extends OptionsUIRegistryBuilder
     });
   }
 
+  addSliderInput<TSettings>(config: FieldConfigEditorConfig<TOptions, TSettings & SliderFieldConfigSettings, number>) {
+    return this.addCustomEditor({
+      ...config,
+      id: config.path,
+      override: standardEditorsRegistry.get('slider').editor as any,
+      editor: standardEditorsRegistry.get('slider').editor as any,
+      process: numberOverrideProcessor,
+      shouldApply: config.shouldApply ? config.shouldApply : field => field.type === FieldType.number,
+      settings: config.settings || {},
+    });
+  }
+
   addTextInput<TSettings>(config: FieldConfigEditorConfig<TOptions, TSettings & StringFieldConfigSettings, string>) {
     return this.addCustomEditor({
       ...config,
@@ -136,6 +149,14 @@ export class PanelOptionsEditorBuilder<TOptions> extends OptionsUIRegistryBuilde
     });
   }
 
+  addSliderInput<TSettings>(config: PanelOptionsEditorConfig<TOptions, TSettings & SliderFieldConfigSettings, number>) {
+    return this.addCustomEditor({
+      ...config,
+      id: config.path,
+      editor: standardEditorsRegistry.get('slider').editor as any,
+    });
+  }
+
   addTextInput<TSettings>(config: PanelOptionsEditorConfig<TOptions, TSettings & StringFieldConfigSettings, string>) {
     return this.addCustomEditor({
       ...config,

diff --git a/packages/grafana-ui/src/components/OptionsUI/slider.tsx b/packages/grafana-ui/src/components/OptionsUI/slider.tsx
@@ -0,0 +1,27 @@
+import React, { useCallback } from 'react';
+import { FieldConfigEditorProps, SliderFieldConfigSettings } from '@grafana/data';
+import { Slider } from '../Slider/Slider';
+
+export const SliderValueEditor: React.FC<FieldConfigEditorProps<number, SliderFieldConfigSettings>> = ({
+  value,
+  onChange,
+  item,
+}) => {
+  const { settings } = item;
+  const onValueAfterChange = useCallback(
+    (value?: number) => {
+      onChange(value);
+    },
+    [onChange]
+  );
+  const initialValue = typeof value === 'number' ? value : typeof value === 'string' ? +value : 0;
+  return (
+    <Slider
+      value={initialValue}
+      min={settings?.min || 0}
+      max={settings?.max || 100}
+      step={settings?.step}
+      onAfterChange={onValueAfterChange}
+    />
+  );
+};
diff --git a/packages/grafana-ui/src/components/Slider/RangeSlider.mdx b/packages/grafana-ui/src/components/Slider/RangeSlider.mdx
@@ -0,0 +1,12 @@
+import { Meta, Props } from '@storybook/addon-docs/blocks';
+import { RangeSliderProps } from './types';
+
+<Meta title="MDX|RangeSlider" />
+
+# Range-slider
+
+The `Range-slider` component is an input element where users can manipulate two values on a one-dimensional axis.
+
+`Range-slider` can be implemented in horizontal or vertical orientation. You can set the default starting values for the slider with the `value` prop.
+
+<Props of={RangeSliderProps} />
diff --git a/packages/grafana-ui/src/components/Slider/RangeSlider.story.tsx b/packages/grafana-ui/src/components/Slider/RangeSlider.story.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { RangeSlider } from '@grafana/ui';
+import { select, number, boolean } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Forms/Slider/Range',
+  component: RangeSlider,
+};
+
+const getKnobs = () => {
+  return {
+    min: number('min', 0),
+    max: number('max', 100),
+    step: boolean('enable step', false),
+    orientation: select('orientation', ['horizontal', 'vertical'], 'horizontal'),
+    reverse: boolean('reverse', false),
+  };
+};
+
+const SliderWrapper = () => {
+  const { min, max, orientation, reverse, step } = getKnobs();
+  const stepValue = step ? 10 : undefined;
+  return (
+    <div style={{ width: '200px', height: '200px' }}>
+      <RangeSlider min={min} max={max} step={stepValue} orientation={orientation} value={[10, 20]} reverse={reverse} />
+    </div>
+  );
+};
+
+export const basic = () => <SliderWrapper />;
diff --git a/packages/grafana-ui/src/components/Slider/RangeSlider.test.tsx b/packages/grafana-ui/src/components/Slider/RangeSlider.test.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { RangeSlider } from './RangeSlider';
+import { RangeSliderProps } from './types';
+import { render } from '@testing-library/react';
+
+const sliderProps: RangeSliderProps = {
+  min: 10,
+  max: 20,
+};
+
+describe('RangeSlider', () => {
+  it('renders without error', () => {
+    expect(() => {
+      render(<RangeSlider {...sliderProps} />);
+    });
+  });
+});
diff --git a/packages/grafana-ui/src/components/Slider/RangeSlider.tsx b/packages/grafana-ui/src/components/Slider/RangeSlider.tsx
@@ -0,0 +1,53 @@
+import React, { FunctionComponent } from 'react';
+import { Range as RangeComponent, createSliderWithTooltip } from 'rc-slider';
+import { cx } from 'emotion';
+import { Global } from '@emotion/core';
+import { useTheme } from '../../themes/ThemeContext';
+import { getStyles } from './styles';
+import { RangeSliderProps } from './types';
+
+/**
+ * @public
+ *
+ * RichHistoryQueriesTab uses this Range Component
+ */
+export const RangeSlider: FunctionComponent<RangeSliderProps> = ({
+  min,
+  max,
+  onChange,
+  onAfterChange,
+  orientation = 'horizontal',
+  reverse,
+  step,
+  formatTooltipResult,
+  value,
+  tooltipAlwaysVisible = true,
+}) => {
+  const isHorizontal = orientation === 'horizontal';
+  const theme = useTheme();
+  const styles = getStyles(theme, isHorizontal);
+  const RangeWithTooltip = createSliderWithTooltip(RangeComponent);
+  return (
+    <div className={cx(styles.container, styles.slider)}>
+      {/** Slider tooltip's parent component is body and therefore we need Global component to do css overrides for it. */}
+      <Global styles={styles.tooltip} />
+      <RangeWithTooltip
+        tipProps={{
+          visible: tooltipAlwaysVisible,
+          placement: isHorizontal ? 'top' : 'right',
+        }}
+        min={min}
+        max={max}
+        step={step}
+        defaultValue={value}
+        tipFormatter={(value: number) => (formatTooltipResult ? formatTooltipResult(value) : value)}
+        onChange={onChange}
+        onAfterChange={onAfterChange}
+        vertical={!isHorizontal}
+        reverse={reverse}
+      />
+    </div>
+  );
+};
+
+RangeSlider.displayName = 'Range';
diff --git a/packages/grafana-ui/src/components/Slider/Slider.mdx b/packages/grafana-ui/src/components/Slider/Slider.mdx
@@ -1,12 +1,12 @@
 import { Meta, Props } from '@storybook/addon-docs/blocks';
-import { Slider } from './Slider';
+import { SliderProps } from './types';
 
 <Meta title="MDX|Slider" />
 
 # Slider
 
-The `Slider` component is an input element where users can manipulate one or two values on a one-dimensional axis. 
+The `Slider` component is an input element where users can manipulate one value on a one-dimensional axis.
 
-`Slider` can be implemented in horizontal or vertical orientation. You can set the default starting value(s) for the slider with the `value` prop. 
+`Slider` can be implemented in horizontal or vertical orientation. You can set the default starting value(s) for the slider with the `value` prop.
 
-<Props of={Slider} />
+<Props of={SliderProps} />
diff --git a/packages/grafana-ui/src/components/Slider/Slider.story.tsx b/packages/grafana-ui/src/components/Slider/Slider.story.tsx
@@ -13,24 +13,16 @@ const getKnobs = () => {
     max: number('max', 100),
     step: boolean('enable step', false),
     orientation: select('orientation', ['horizontal', 'vertical'], 'horizontal'),
-    reverse: boolean('reverse', true),
-    singleValue: boolean('single value', false),
+    reverse: boolean('reverse', false),
   };
 };
 
 const SliderWrapper = () => {
-  const { min, max, orientation, reverse, singleValue, step } = getKnobs();
+  const { min, max, orientation, reverse, step } = getKnobs();
   const stepValue = step ? 10 : undefined;
   return (
     <div style={{ width: '200px', height: '200px' }}>
-      <Slider
-        min={min}
-        max={max}
-        step={stepValue}
-        orientation={orientation}
-        value={singleValue ? [10] : undefined}
-        reverse={reverse}
-      />
+      <Slider min={min} max={max} step={stepValue} orientation={orientation} value={10} reverse={reverse} />
     </div>
   );
 };

diff --git a/packages/grafana-ui/src/components/Slider/Slider.test.tsx b/packages/grafana-ui/src/components/Slider/Slider.test.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import { Slider, Props } from './Slider';
+import { Slider } from './Slider';
+import { SliderProps } from './types';
 import { mount } from 'enzyme';
 
-const sliderProps: Props = {
+const sliderProps: SliderProps = {
   min: 10,
   max: 20,
 };
@@ -17,11 +18,10 @@ describe('Slider', () => {
     expect(wrapper.html()).toContain('aria-valuemin="10"');
     expect(wrapper.html()).toContain('aria-valuemax="20"');
     expect(wrapper.html()).toContain('aria-valuenow="10"');
-    expect(wrapper.html()).toContain('aria-valuenow="20"');
   });
 
   it('renders correct contents with a value', () => {
-    const wrapper = mount(<Slider {...sliderProps} value={[15]} />);
+    const wrapper = mount(<Slider {...sliderProps} value={15} />);
     expect(wrapper.html()).toContain('aria-valuenow="15"');
     expect(wrapper.html()).not.toContain('aria-valuenow="20"');
     expect(wrapper.html()).not.toContain('aria-valuenow="10"');