@pie-lib/charting 5.1.0 → 5.1.1

package/src/chart-setup.jsx

@@ -11,9 +11,8 @@ const ConfigureChartPanel = props => {
   const { range } = model;
   const size = model.graph;
 
-  const rangeProps = chartType => {
-    return chartType.includes('Plot') ? { min: 3, max: 10 } : { min: 0.05, max: 10000 };
-  };
+  const rangeProps = chartType =>
+    chartType.includes('Plot') ? { min: 3, max: 10 } : { min: 0.05, max: 10000 };
 
   const onSizeChanged = (key, value) => {
     const graph = { ...size, [key]: value };
@@ -29,7 +28,24 @@ const ConfigureChartPanel = props => {
     onChange({ ...model, range });
   };
 
-  const onChartTypeChange = chartType => onChange({ ...model, chartType });
+  const onChartTypeChange = chartType => {
+    if (chartType.includes('Plot')) {
+      rangeProps.min = 3;
+      rangeProps.max = 10;
+
+      if (range.max > 10 || range.max < 3) {
+        range.max = 10;
+      }
+
+      range.step = 1;
+      range.labelStep = 1;
+      onChange({ ...model, range, chartType });
+
+      return;
+    }
+
+    onChange({ ...model, chartType });
+  };
 
   return (
     <div className={classes.wrapper}>
@@ -47,26 +63,7 @@ const ConfigureChartPanel = props => {
             onChange={(e, v) => onRangeChanged('max', v)}
           />
         </div>
-        <div className={classes.rowView}>
-          <NumberTextFieldCustom
-            className={classes.mediumTextField}
-            label="Grid Interval"
-            value={range.step}
-            min={0}
-            max={10000}
-            variant="outlined"
-            onChange={(e, v) => onRangeChanged('step', v)}
-          />
-          <NumberTextFieldCustom
-            className={classes.mediumTextField}
-            label={'Label Interval'}
-            value={range.labelStep}
-            min={0}
-            max={10000}
-            variant={'outlined'}
-            onChange={(e, v) => onRangeChanged('labelStep', v)}
-          />
-        </div>
+        {!model.chartType.includes('Plot') && stepConfig}
         <div className={classes.dimensions}>
           <div>
             <Typography>Dimensions(px)</Typography>

package/src/chart-type.js

@@ -13,29 +13,27 @@ const ChartType = withStyles(theme => ({
   chartTypeLabel: {
     backgroundColor: 'transparent'
   }
-}))(({ onChange, value, classes }) => {
-  return (
-    <div className={classes.chartType}>
-      <FormControl variant={'outlined'} className={classes.chartType}>
-        <InputLabel htmlFor="type-helper" className={classes.chartTypeLabel}>
-          ChartType
-        </InputLabel>
+}))(({ onChange, value, classes }) => (
+  <div className={classes.chartType}>
+    <FormControl variant={'outlined'} className={classes.chartType}>
+      <InputLabel htmlFor="type-helper" className={classes.chartTypeLabel}>
+        ChartType
+      </InputLabel>
 
-        <Select
-          value={value}
-          onChange={onChange}
-          input={<OutlinedInput name="type" id="type-helper" />}
-        >
-          <MenuItem value={'histogram'}>Histogram</MenuItem>
-          <MenuItem value={'bar'}>Bar</MenuItem>
-          <MenuItem value={'lineDot'}>Line Dot</MenuItem>
-          <MenuItem value={'lineCross'}>Line Cross</MenuItem>
-          <MenuItem value={'dotPlot'}>Dot Plot</MenuItem>
-          <MenuItem value={'linePlot'}>Line Plot</MenuItem>
-        </Select>
-      </FormControl>
-    </div>
-  );
-});
+      <Select
+        value={value}
+        onChange={onChange}
+        input={<OutlinedInput name="type" id="type-helper" />}
+      >
+        <MenuItem value={'histogram'}>Histogram</MenuItem>
+        <MenuItem value={'bar'}>Bar</MenuItem>
+        <MenuItem value={'lineDot'}>Line Dot</MenuItem>
+        <MenuItem value={'lineCross'}>Line Cross</MenuItem>
+        <MenuItem value={'dotPlot'}>Dot Plot</MenuItem>
+        <MenuItem value={'linePlot'}>Line Plot</MenuItem>
+      </Select>
+    </FormControl>
+  </div>
+));
 
 export default ChartType;

package/src/line/common/line.jsx

@@ -94,7 +94,7 @@ export class RawLine extends React.Component {
         {lineToUse &&
           lineToUse.map((point, i) => {
             const r = 6;
-            const enableDraggable = defineChart ? true : point.interactive;
+            const enableDraggable = defineChart || point.interactive;
             const Component = enableDraggable ? DraggableHandle : DragHandle;
 
             return (

package/src/plot/common/plot.jsx

@@ -151,7 +151,7 @@ export class Plot extends React.Component {
           <Bar
             value={d.value}
             label={d.label}
-            interactive={defineChart ? true : d.interactive}
+            interactive={defineChart || d.interactive}
             xBand={xBand}
             index={index}
             key={`bar-${d.label}-${d.value}-${index}`}