Set of improvements and refinements to visualizations after React migration

client/app/components/visualizations/editor/TabbedEditor.jsx

@@ -0,0 +1,37 @@
+import { isFunction, map, filter, merge } from 'lodash';
+import React from 'react';
+import PropTypes from 'prop-types';
+import Tabs from 'antd/lib/tabs';
+import { EditorPropTypes } from '@/visualizations';
+
+export default function TabbedEditor({ tabs, options, data, onOptionsChange, ...restProps }) {
+  const optionsChanged = (newOptions, updateFunction = merge) => {
+    onOptionsChange(updateFunction({}, options, newOptions));
+  };
+
+  tabs = filter(tabs, tab => (isFunction(tab.isAvailable) ? tab.isAvailable(options, data) : true));
+
+  return (
+    <Tabs animated={false} tabBarGutter={0}>
+      {map(tabs, ({ key, title, component: Component }) => (
+        <Tabs.TabPane key={key} tab={<span data-test={`VisualizationEditor.Tabs.${key}`}>{title}</span>}>
+          <Component options={options} data={data} onOptionsChange={optionsChanged} {...restProps} />
+        </Tabs.TabPane>
+      ))}
+    </Tabs>
+  );
+}
+
+TabbedEditor.propTypes = {
+  ...EditorPropTypes,
+  tabs: PropTypes.arrayOf(PropTypes.shape({
+    key: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    isAvailable: PropTypes.func, // (options) => boolean
+    component: PropTypes.func.isRequired,
+  })),
+};
+
+TabbedEditor.defaultProps = {
+  tabs: [],
+};

client/app/components/visualizations/editor/createTabbedEditor.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import TabbedEditor from './TabbedEditor';
+
+export default function createTabbedEditor(tabs) {
+  return function TabbedEditorWrapper(props) {
+    return (
+      <TabbedEditor {...props} tabs={tabs} />
+    );
+  };
+}

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

@@ -1,4 +1,4 @@
-import { isArray, map, mapValues, includes, some, each, difference } from 'lodash';
+import { isArray, map, mapValues, includes, some, each, difference, extend } from 'lodash';
 import React, { useMemo } from 'react';
 import Select from 'antd/lib/select';
 import Checkbox from 'antd/lib/checkbox';
@@ -95,7 +95,7 @@ export default function GeneralSettings({ options, data, onOptionsChange }) {
       ...mappedColumns,
       [type]: column,
     });
-    onOptionsChange({ columnMapping }, false);
+    onOptionsChange({ columnMapping }, extend);
   }
 
   return (

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

@@ -1,7 +1,6 @@
-import { merge, extend } from 'lodash';
+/* eslint-disable react/prop-types */
 import React from 'react';
-import Tabs from 'antd/lib/tabs';
-import { EditorPropTypes } from '@/visualizations';
+import createTabbedEditor from '@/components/visualizations/editor/createTabbedEditor';
 
 import GeneralSettings from './GeneralSettings';
 import XAxisSettings from './XAxisSettings';
@@ -13,53 +12,48 @@ import CustomChartSettings from './CustomChartSettings';
 
 import './editor.less';
 
-export default function Editor(props) {
-  const { options, onOptionsChange } = props;
+const isCustomChart = options => options.globalSeriesType === 'custom';
+const isPieChart = options => options.globalSeriesType === 'pie';
 
-  const optionsChanged = (newOptions, deepUpdate = true) => {
-    if (deepUpdate) {
-      onOptionsChange(merge({}, options, newOptions));
-    } else {
-      onOptionsChange(extend({}, options, newOptions));
-    }
-  };
-
-  const isCustomChart = options.globalSeriesType === 'custom';
-  const isPieChart = options.globalSeriesType === 'pie';
-
-  return (
-    <Tabs animated={false} tabBarGutter={0}>
-      <Tabs.TabPane key="general" tab={<span data-test="Chart.EditorTabs.General">General</span>}>
-        <GeneralSettings {...props} onOptionsChange={optionsChanged} />
-        {isCustomChart && <CustomChartSettings {...props} onOptionsChange={optionsChanged} />}
-      </Tabs.TabPane>
-      {!isCustomChart && !isPieChart && (
-        <Tabs.TabPane key="x-axis" tab={<span data-test="Chart.EditorTabs.XAxis">X Axis</span>}>
-          <XAxisSettings {...props} onOptionsChange={optionsChanged} />
-        </Tabs.TabPane>
-      )}
-      {!isCustomChart && !isPieChart && (
-        <Tabs.TabPane key="y-axis" tab={<span data-test="Chart.EditorTabs.YAxis">Y Axis</span>}>
-          <YAxisSettings {...props} onOptionsChange={optionsChanged} />
-        </Tabs.TabPane>
-      )}
-      {!isCustomChart && (
-        <Tabs.TabPane key="series" tab={<span data-test="Chart.EditorTabs.Series">Series</span>}>
-          <SeriesSettings {...props} onOptionsChange={optionsChanged} />
-        </Tabs.TabPane>
-      )}
-      {!isCustomChart && (
-        <Tabs.TabPane key="colors" tab={<span data-test="Chart.EditorTabs.Colors">Colors</span>}>
-          <ColorsSettings {...props} onOptionsChange={optionsChanged} />
-        </Tabs.TabPane>
-      )}
-      {!isCustomChart && (
-        <Tabs.TabPane key="data labels" tab={<span data-test="Chart.EditorTabs.DataLabels">Data Labels</span>}>
-          <DataLabelsSettings {...props} onOptionsChange={optionsChanged} />
-        </Tabs.TabPane>
-      )}
-    </Tabs>
-  );
-}
-
-Editor.propTypes = EditorPropTypes;
+export default createTabbedEditor([
+  {
+    key: 'General',
+    title: 'General',
+    component: props => (
+      <React.Fragment>
+        <GeneralSettings {...props} />
+        {isCustomChart(props.options) && <CustomChartSettings {...props} />}
+      </React.Fragment>
+    ),
+  },
+  {
+    key: 'XAxis',
+    title: 'X Axis',
+    component: XAxisSettings,
+    isAvailable: options => !isCustomChart(options) && !isPieChart(options),
+  },
+  {
+    key: 'YAxis',
+    title: 'Y Axis',
+    component: YAxisSettings,
+    isAvailable: options => !isCustomChart(options) && !isPieChart(options),
+  },
+  {
+    key: 'Series',
+    title: 'Series',
+    component: SeriesSettings,
+    isAvailable: options => !isCustomChart(options),
+  },
+  {
+    key: 'Colors',
+    title: 'Colors',
+    component: ColorsSettings,
+    isAvailable: options => !isCustomChart(options),
+  },
+  {
+    key: 'DataLabels',
+    title: 'Data Labels',
+    component: DataLabelsSettings,
+    isAvailable: options => !isCustomChart(options),
+  },
+]);

client/app/visualizations/choropleth/Editor/index.js

@@ -0,0 +1,15 @@
+import createTabbedEditor from '@/components/visualizations/editor/createTabbedEditor';
+
+import GeneralSettings from './GeneralSettings';
+import ColorsSettings from './ColorsSettings';
+import FormatSettings from './FormatSettings';
+import BoundsSettings from './BoundsSettings';
+
+import './editor.less';
+
+export default createTabbedEditor([
+  { key: 'General', title: 'General', component: GeneralSettings },
+  { key: 'Colors', title: 'Colors', component: ColorsSettings },
+  { key: 'Format', title: 'Format', component: FormatSettings },
+  { key: 'Bounds', title: 'Bounds', component: BoundsSettings },
+]);