Y Axis settings; refine code; fix bug (sortY and reverseY used only f…

…or heatmap; right Y axis not used for heatmap)
getredash · Sep 13, 2019 · 6edd84c · 6edd84c
1 parent 5bf706b
commit 6edd84c
Show file tree

Hide file tree

Showing 3 changed files with 169 additions and 40 deletions.
diff --git a/client/app/visualizations/chart/Editor/AxisSettings.jsx b/client/app/visualizations/chart/Editor/AxisSettings.jsx
@@ -0,0 +1,104 @@
+import { isString, isObject, isFinite, isNumber, merge } from 'lodash';
+import React from 'react';
+import PropTypes from 'prop-types';
+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));
+  }
+
+  function handleNameChange(event) {
+    const text = event.target.value;
+    const title = isString(text) && (text !== '') ? { text } : null;
+    optionsChanged({ title });
+  }
+
+  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="-">Auto Detect</Select.Option>}
+          <Select.Option value="datetime">Datetime</Select.Option>
+          <Select.Option value="linear">Linear</Select.Option>
+          <Select.Option value="logarithmic">Logarithmic</Select.Option>
+          <Select.Option value="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={handleNameChange}
+        />
+      </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 => optionsChanged({ 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 => optionsChanged({ 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: () => {},
+};
diff --git a/client/app/visualizations/chart/Editor/XAxisSettings.jsx b/client/app/visualizations/chart/Editor/XAxisSettings.jsx
@@ -1,48 +1,18 @@
-import { isString, isObject } from 'lodash';
 import React from 'react';
 import Switch from 'antd/lib/switch';
-import Input from 'antd/lib/input';
-import Select from 'antd/lib/select';
 import { EditorPropTypes } from '@/visualizations';
 
-export default function XAxisSettings({ options, onOptionsChange }) {
-  function handleNameChange(event) {
-    const text = event.target.value;
-    if (isString(text) && (text !== '')) {
-      onOptionsChange({ xAxis: { title: { text } } });
-    } else {
-      onOptionsChange({ xAxis: { title: null } });
-    }
-  }
+import AxisSettings from './AxisSettings';
 
+export default function XAxisSettings({ options, onOptionsChange }) {
   return (
     <React.Fragment>
-      <div className="m-b-15">
-        <label htmlFor="chart-editor-x-axis-type">Scale</label>
-        <Select
-          id="chart-editor-x-axis-type"
-          className="w-100"
-          data-test="Chart.XAxis.Type"
-          defaultValue={options.xAxis.type}
-          onChange={type => onOptionsChange({ xAxis: { type } })}
-        >
-          <Select.Option value="-">Auto Detect</Select.Option>
-          <Select.Option value="datetime">Datetime</Select.Option>
-          <Select.Option value="linear">Linear</Select.Option>
-          <Select.Option value="logarithmic">Logarithmic</Select.Option>
-          <Select.Option value="category">Category</Select.Option>
-        </Select>
-      </div>
-
-      <div className="m-b-15">
-        <label htmlFor="chart-editor-x-axis-name">Name</label>
-        <Input
-          id="chart-editor-x-axis-name"
-          data-test="Chart.XAxis.Name"
-          defaultValue={isObject(options.xAxis.title) ? options.xAxis.title.text : null}
-          onChange={handleNameChange}
-        />
-      </div>
+      <AxisSettings
+        id="XAxis"
+        features={{ autoDetectType: true }}
+        options={options.xAxis}
+        onChange={xAxis => onOptionsChange({ xAxis })}
+      />
 
       <div className="m-b-15">
         <label className="d-flex align-items-center" htmlFor="chart-editor-x-axis-sort">

diff --git a/client/app/visualizations/chart/Editor/YAxisSettings.jsx b/client/app/visualizations/chart/Editor/YAxisSettings.jsx
@@ -1,9 +1,64 @@
 import React from 'react';
+import Switch from 'antd/lib/switch';
 import { EditorPropTypes } from '@/visualizations';
 
-export default function YAxisSettings() {
+import AxisSettings from './AxisSettings';
+
+export default function YAxisSettings({ options, onOptionsChange }) {
+  const [leftYAxis, rightYAxis] = options.yAxis;
+
   return (
-    <div>Y Axis Settings</div>
+    <React.Fragment>
+      <div className="m-b-15">
+        <h4>Left Y Axis</h4>
+        <AxisSettings
+          id="LeftYAxis"
+          features={{ range: true }}
+          options={leftYAxis}
+          onChange={axis => onOptionsChange({ yAxis: [axis, rightYAxis] })}
+        />
+      </div>
+
+      {(options.globalSeriesType !== 'heatmap') && (
+        <div className="m-b-15">
+          <h4>Right Y Axis</h4>
+          <AxisSettings
+            id="RightYAxis"
+            features={{ range: true }}
+            options={rightYAxis}
+            onChange={axis => onOptionsChange({ yAxis: [leftYAxis, axis] })}
+          />
+        </div>
+      )}
+
+      {(options.globalSeriesType === 'heatmap') && (
+        <React.Fragment>
+          <div className="m-b-15">
+            <label className="d-flex align-items-center" htmlFor="chart-editor-y-axis-sort">
+              <Switch
+                id="chart-editor-y-axis-sort"
+                data-test="Chart.YAxis.Sort"
+                defaultChecked={options.sortY}
+                onChange={sortY => onOptionsChange({ sortY })}
+              />
+              <span className="m-l-10">Sort Values</span>
+            </label>
+          </div>
+
+          <div className="m-b-15">
+            <label className="d-flex align-items-center" htmlFor="chart-editor-y-axis-reverse">
+              <Switch
+                id="chart-editor-y-axis-reverse"
+                data-test="Chart.YAxis.Reverse"
+                defaultChecked={options.reverseY}
+                onChange={reverseY => onOptionsChange({ reverseY })}
+              />
+              <span className="m-l-10">Reverse Order</span>
+            </label>
+          </div>
+        </React.Fragment>
+      )}
+    </React.Fragment>
   );
 }