Migrate Chart visualization to React Part 2: Editor

client/app/components/sortable/index.jsx

@@ -14,7 +14,7 @@ export const SortableContainerWrapper = sortableContainer(({ children }) => chil
 
 export const SortableElement = sortableElement(({ children }) => children);
 
-export function SortableContainer({ disabled, containerProps, children, ...wrapperProps }) {
+export function SortableContainer({ disabled, containerComponent, containerProps, children, ...wrapperProps }) {
   const containerRef = useRef();
   const [isDragging, setIsDragging] = useState(false);
 
@@ -59,22 +59,24 @@ export function SortableContainer({ disabled, containerProps, children, ...wrapp
     containerProps.ref = containerRef;
   }
 
-  // order of props matters - we override some of them
+  const ContainerComponent = containerComponent;
   return (
     <SortableContainerWrapper {...wrapperProps}>
-      <div {...containerProps}>{children}</div>
+      <ContainerComponent {...containerProps}>{children}</ContainerComponent>
     </SortableContainerWrapper>
   );
 }
 
 SortableContainer.propTypes = {
   disabled: PropTypes.bool,
+  containerComponent: PropTypes.elementType,
   containerProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
   children: PropTypes.node,
 };
 
 SortableContainer.defaultProps = {
   disabled: false,
+  containerComponent: 'div',
   containerProps: {},
   children: null,
 };

client/app/visualizations/chart/Editor/AxisSettings.jsx

@@ -0,0 +1,106 @@
+import { isString, isObject, isFinite, isNumber, merge } from 'lodash';
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useDebouncedCallback } from 'use-debounce';
+import Select from 'antd/lib/select';
+import Input from 'antd/lib/input';
+import InputNumber from 'antd/lib/input-number';
+import * as Grid from 'antd/lib/grid';
+
+function toNumber(value) {
+  value = isNumber(value) ? value : parseFloat(value);
+  return isFinite(value) ? value : null;
+}
+
+export default function AxisSettings({ id, options, features, onChange }) {
+  function optionsChanged(newOptions) {
+    onChange(merge({}, options, newOptions));
+  }
+
+  const [handleNameChange] = useDebouncedCallback((text) => {
+    const title = isString(text) && (text !== '') ? { text } : null;
+    optionsChanged({ title });
+  }, 200);
+
+  const [handleMinMaxChange] = useDebouncedCallback(opts => optionsChanged(opts), 200);
+
+  return (
+    <React.Fragment>
+      <div className="m-b-15">
+        <label htmlFor={`chart-editor-${id}-type`}>Scale</label>
+        <Select
+          id={`chart-editor-${id}-type`}
+          className="w-100"
+          data-test={`Chart.${id}.Type`}
+          defaultValue={options.type}
+          onChange={type => optionsChanged({ type })}
+        >
+          {features.autoDetectType && <Select.Option value="-" data-test={`Chart.${id}.Type.Auto`}>Auto Detect</Select.Option>}
+          <Select.Option value="datetime" data-test={`Chart.${id}.Type.DateTime`}>Datetime</Select.Option>
+          <Select.Option value="linear" data-test={`Chart.${id}.Type.Linear`}>Linear</Select.Option>
+          <Select.Option value="logarithmic" data-test={`Chart.${id}.Type.Logarithmic`}>Logarithmic</Select.Option>
+          <Select.Option value="category" data-test={`Chart.${id}.Type.Category`}>Category</Select.Option>
+        </Select>
+      </div>
+
+      <div className="m-b-15">
+        <label htmlFor={`chart-editor-${id}-name`}>Name</label>
+        <Input
+          id={`chart-editor-${id}-name`}
+          data-test={`Chart.${id}.Name`}
+          defaultValue={isObject(options.title) ? options.title.text : null}
+          onChange={event => handleNameChange(event.target.value)}
+        />
+      </div>
+
+      {features.range && (
+        <Grid.Row gutter={15} type="flex" align="middle" className="m-b-15">
+          <Grid.Col span={12}>
+            <label htmlFor={`chart-editor-${id}-range-min`}>Min Value</label>
+            <InputNumber
+              id={`chart-editor-${id}-range-min`}
+              className="w-100"
+              placeholder="Auto"
+              data-test={`Chart.${id}.RangeMin`}
+              defaultValue={toNumber(options.rangeMin)}
+              onChange={value => handleMinMaxChange({ rangeMin: toNumber(value) })}
+            />
+          </Grid.Col>
+          <Grid.Col span={12}>
+            <label htmlFor={`chart-editor-${id}-range-max`}>Max Value</label>
+            <InputNumber
+              id={`chart-editor-${id}-range-max`}
+              className="w-100"
+              placeholder="Auto"
+              data-test={`Chart.${id}.RangeMax`}
+              defaultValue={toNumber(options.rangeMax)}
+              onChange={value => handleMinMaxChange({ rangeMax: toNumber(value) })}
+            />
+          </Grid.Col>
+        </Grid.Row>
+      )}
+    </React.Fragment>
+  );
+}
+
+AxisSettings.propTypes = {
+  id: PropTypes.string.isRequired,
+  options: PropTypes.shape({
+    type: PropTypes.string.isRequired,
+    title: PropTypes.shape({
+      text: PropTypes.string,
+    }),
+    rangeMin: PropTypes.number,
+    rangeMax: PropTypes.number,
+  }).isRequired,
+  features: PropTypes.shape({
+    autoDetectType: PropTypes.bool,
+    range: PropTypes.bool,
+  }),
+  onChange: PropTypes.func,
+};
+
+AxisSettings.defaultProps = {
+  features: {},
+  onChange: () => {},
+};

client/app/visualizations/chart/Editor/ChartTypeSelect.jsx

@@ -0,0 +1,36 @@
+import { map } from 'lodash';
+import React, { useMemo } from 'react';
+import Select from 'antd/lib/select';
+import { clientConfig } from '@/services/auth';
+
+export default function ChartTypeSelect(props) {
+  const chartTypes = useMemo(() => {
+    const result = [
+      { type: 'line', name: 'Line', icon: 'line-chart' },
+      { type: 'column', name: 'Bar', icon: 'bar-chart' },
+      { type: 'area', name: 'Area', icon: 'area-chart' },
+      { type: 'pie', name: 'Pie', icon: 'pie-chart' },
+      { type: 'scatter', name: 'Scatter', icon: 'circle-o' },
+      { type: 'bubble', name: 'Bubble', icon: 'circle-o' },
+      { type: 'heatmap', name: 'Heatmap', icon: 'th' },
+      { type: 'box', name: 'Box', icon: 'square-o' },
+    ];
+
+    if (clientConfig.allowCustomJSVisualizations) {
+      result.push({ type: 'custom', name: 'Custom', icon: 'code' });
+    }
+
+    return result;
+  }, []);
+
+  return (
+    <Select {...props}>
+      {map(chartTypes, ({ type, name, icon }) => (
+        <Select.Option key={type} value={type} data-test={`Chart.ChartType.${type}`}>
+          <i className={`m-r-5 fa fa-${icon}`} />
+          {name}
+        </Select.Option>
+      ))}
+    </Select>
+  );
+}

client/app/visualizations/chart/Editor/ColorsSettings.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { EditorPropTypes } from '@/visualizations';
+
+import PieColorsSettings from './PieColorsSettings';
+import HeatmapColorsSettings from './HeatmapColorsSettings';
+import DefaultColorsSettings from './DefaultColorsSettings';
+
+const components = {
+  pie: PieColorsSettings,
+  heatmap: HeatmapColorsSettings,
+};
+
+export default function ColorsSettings({ options, ...props }) {
+  const Component = components[options.globalSeriesType] || DefaultColorsSettings;
+  return <Component options={options} {...props} />;
+}
+
+ColorsSettings.propTypes = EditorPropTypes;

client/app/visualizations/chart/Editor/ColorsSettings.test.js

@@ -0,0 +1,84 @@
+import { after } from 'lodash';
+import React from 'react';
+import enzyme from 'enzyme';
+
+import getOptions from '../getOptions';
+import ColorsSettings from './ColorsSettings';
+
+function findByTestID(wrapper, testId) {
+  return wrapper.find(`[data-test="${testId}"]`);
+}
+
+function mount(options, done) {
+  options = getOptions(options);
+  return enzyme.mount((
+    <ColorsSettings
+      visualizationName="Test"
+      data={{
+        columns: [{ name: 'a', type: 'string' }, { name: 'b', type: 'number' }],
+        rows: [{ a: 'v', b: 3.14 }],
+      }}
+      options={options}
+      onOptionsChange={(changedOptions) => {
+        expect(changedOptions).toMatchSnapshot();
+        done();
+      }}
+    />
+  ));
+}
+
+describe('Visualizations -> Chart -> Editor -> Colors Settings', () => {
+  describe('for pie', () => {
+    test('Changes series color', (done) => {
+      const el = mount({
+        globalSeriesType: 'pie',
+        columnMapping: { a: 'x', b: 'y' },
+      }, done);
+
+      findByTestID(el, 'Chart.Series.v.Color').first().simulate('click');
+      findByTestID(el, 'ColorPicker').first().find('input')
+        .simulate('change', { target: { value: 'red' } });
+    });
+  });
+
+  describe('for heatmap', () => {
+    test('Changes color scheme', (done) => {
+      const el = mount({
+        globalSeriesType: 'heatmap',
+        columnMapping: { a: 'x', b: 'y' },
+      }, done);
+
+      findByTestID(el, 'Chart.Colors.Heatmap.ColorScheme').first().simulate('click');
+      findByTestID(el, 'Chart.Colors.Heatmap.ColorScheme.RdBu').first().simulate('click');
+    });
+
+    test('Sets custom color scheme', async (done) => {
+      const el = mount({
+        globalSeriesType: 'heatmap',
+        columnMapping: { a: 'x', b: 'y' },
+        colorScheme: 'Custom...',
+      }, after(2, done)); // we will perform 2 actions, so call `done` after all of them completed
+
+      findByTestID(el, 'Chart.Colors.Heatmap.MinColor').first().simulate('click');
+      findByTestID(el, 'ColorPicker').first().find('input')
+        .simulate('change', { target: { value: 'yellow' } });
+
+      findByTestID(el, 'Chart.Colors.Heatmap.MaxColor').first().simulate('click');
+      findByTestID(el, 'ColorPicker').first().find('input')
+        .simulate('change', { target: { value: 'red' } });
+    });
+  });
+
+  describe('for all except of pie and heatmap', () => {
+    test('Changes series color', (done) => {
+      const el = mount({
+        globalSeriesType: 'column',
+        columnMapping: { a: 'x', b: 'y' },
+      }, done);
+
+      findByTestID(el, 'Chart.Series.b.Color').first().simulate('click');
+      findByTestID(el, 'ColorPicker').first().find('input')
+        .simulate('change', { target: { value: 'red' } });
+    });
+  });
+});

client/app/visualizations/chart/Editor/ColumnMappingSelect.jsx

@@ -0,0 +1,60 @@
+import { isString, map, uniq, flatten, filter, sortBy, keys } from 'lodash';
+import React from 'react';
+import PropTypes from 'prop-types';
+import Select from 'antd/lib/select';
+
+const MappingTypes = {
+  x: { label: 'X Column' },
+  y: { label: 'Y Columns', multiple: true },
+  series: { label: 'Group by' },
+  yError: { label: 'Errors column' },
+  size: { label: 'Bubble size column' },
+  zVal: { label: 'Color Column' },
+};
+
+export default function ColumnMappingSelect({ value, availableColumns, type, onChange }) {
+  const options = sortBy(filter(
+    uniq(flatten([availableColumns, value])),
+    v => isString(v) && (v !== ''),
+  ));
+  const { label, multiple } = MappingTypes[type];
+
+  return (
+    <div className="m-b-15">
+      <label htmlFor={`chart-editor-column-mapping-${type}`}>{label}</label>
+      <Select
+        id={`chart-editor-column-mapping-${type}`}
+        className="w-100"
+        data-test={`Chart.ColumnMapping.${type}`}
+        mode={multiple ? 'multiple' : 'default'}
+        allowClear
+        placeholder={multiple ? 'Choose columns...' : 'Choose column...'}
+        value={value || undefined}
+        onChange={column => onChange(column || null, type)}
+      >
+        {map(options, c => (
+          <Select.Option key={c} value={c} data-test={`Chart.ColumnMapping.${type}.${c}`}>{c}</Select.Option>
+        ))}
+      </Select>
+    </div>
+  );
+}
+
+ColumnMappingSelect.propTypes = {
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.arrayOf(PropTypes.string),
+  ]),
+  availableColumns: PropTypes.arrayOf(PropTypes.string),
+  type: PropTypes.oneOf(keys(MappingTypes)),
+  onChange: PropTypes.func,
+};
+
+ColumnMappingSelect.defaultProps = {
+  value: null,
+  availableColumns: [],
+  type: null,
+  onChange: () => {},
+};
+
+ColumnMappingSelect.MappingTypes = MappingTypes;