@pie-lib/charting 5.4.0 → 5.4.1

package/src/axes.jsx

@@ -14,17 +14,17 @@ export class TickComponent extends React.Component {
     super(props);
     this.state = {
       dialog: {
-        open: false
-      }
+        open: false,
+      },
     };
   }
 
   handleAlertDialog = (open, callback) =>
     this.setState(
       {
-        dialog: { open }
+        dialog: { open },
       },
-      callback
+      callback,
     );
 
   changeCategory = (index, newLabel) => {
@@ -34,7 +34,7 @@ export class TickComponent extends React.Component {
     onChangeCategory(index, { ...category, label: newLabel });
   };
 
-  deleteCategory = index => {
+  deleteCategory = (index) => {
     const { categories, onChange } = this.props;
 
     if (index >= 0 && categories[index]) {
@@ -51,15 +51,11 @@ export class TickComponent extends React.Component {
         dialog: {
           open: true,
           title: 'Warning',
-          text:
-            'This will remove the correct answer value that has been defined for this category.',
+          text: 'This will remove the correct answer value that has been defined for this category.',
           onConfirm: () =>
-            this.handleAlertDialog(
-              false,
-              onChangeCategory(index, { ...category, interactive: !category.interactive })
-            ),
-          onClose: () => this.handleAlertDialog(false)
-        }
+            this.handleAlertDialog(false, onChangeCategory(index, { ...category, interactive: !category.interactive })),
+          onClose: () => this.handleAlertDialog(false),
+        },
       });
     } else {
       onChangeCategory(index, { ...category, interactive: !category.interactive });
@@ -75,15 +71,14 @@ export class TickComponent extends React.Component {
         dialog: {
           open: true,
           title: 'Warning',
-          text:
-            'This will remove the correct answer category name that has been defined for this category.',
+          text: 'This will remove the correct answer category name that has been defined for this category.',
           onConfirm: () =>
             this.handleAlertDialog(
               false,
-              onChangeCategory(index, { ...category, editable: !category.editable || false })
+              onChangeCategory(index, { ...category, editable: !category.editable || false }),
             ),
-          onClose: () => this.handleAlertDialog(false)
-        }
+          onClose: () => this.handleAlertDialog(false),
+        },
       });
     } else {
       onChangeCategory(index, { ...category, editable: !category.editable || false });
@@ -104,7 +99,7 @@ export class TickComponent extends React.Component {
       x,
       y,
       formattedValue,
-      error
+      error,
     } = this.props;
 
     if (!formattedValue) {
@@ -114,8 +109,7 @@ export class TickComponent extends React.Component {
     const { dialog } = this.state;
     const index = parseInt(formattedValue.split('-')[0], 10);
     const category = categories[index];
-    const { deletable, editable, interactive, label, correctness, autoFocus, inDefineChart } =
-      category || {};
+    const { deletable, editable, interactive, label, correctness, autoFocus, inDefineChart } = category || {};
     const barX = xBand(bandKey({ label }, index));
     const longestCategory = (categories || []).reduce((a, b) => {
       const lengthA = a && a.label ? a.label.length : 0;
@@ -144,7 +138,7 @@ export class TickComponent extends React.Component {
                 wordBreak: 'break-word',
                 overflow: 'visible',
                 maxWidth: barWidth,
-                display: 'block'
+                display: 'block',
               }}
             >
               {longestLabel}
@@ -152,11 +146,11 @@ export class TickComponent extends React.Component {
           )}
           <MarkLabel
             autoFocus={inDefineChart ? defineChart && autoFocus : autoFocus}
-            inputRef={r => (this.input = r)}
+            inputRef={(r) => (this.input = r)}
             disabled={!defineChart && !editable}
             mark={category}
             graphProps={graphProps}
-            onChange={newLabel => this.changeCategory(index, newLabel)}
+            onChange={(newLabel) => this.changeCategory(index, newLabel)}
             barWidth={barWidth}
             rotate={rotate}
             correctness={correctness}
@@ -169,14 +163,7 @@ export class TickComponent extends React.Component {
           </text>
         )}
         {deletable && !correctness && (
-          <line
-            x1={x}
-            y1={0}
-            x2={x}
-            y2={y + 4 + top}
-            className={classes.dottedLine}
-            strokeDasharray="4 2"
-          />
+          <line x1={x} y1={0} x2={x} y2={y + 4 + top} className={classes.dottedLine} strokeDasharray="4 2" />
         )}
         {deletable && !correctness && (
           <svg
@@ -195,7 +182,7 @@ export class TickComponent extends React.Component {
           <svg
             x={-55}
             style={{
-              overflow: 'visible'
+              overflow: 'visible',
             }}
           >
             <text
@@ -207,7 +194,7 @@ export class TickComponent extends React.Component {
                 pointerEvents: 'none',
                 wordBreak: 'break-word',
                 maxWidth: barWidth,
-                display: 'inline-block'
+                display: 'inline-block',
               }}
             >
               <tspan x="0" dy=".6em">
@@ -228,7 +215,7 @@ export class TickComponent extends React.Component {
                 pointerEvents: 'none',
                 wordBreak: 'break-word',
                 maxWidth: barWidth,
-                display: 'inline-block'
+                display: 'inline-block',
               }}
             >
               <tspan x="0" dy=".6em">
@@ -253,7 +240,7 @@ export class TickComponent extends React.Component {
             <Checkbox
               style={{ position: 'fixed' }}
               checked={interactive}
-              onChange={e => this.changeInteractive(index, e.target.checked)}
+              onChange={(e) => this.changeInteractive(index, e.target.checked)}
             />
           </foreignObject>
         )}
@@ -268,7 +255,7 @@ export class TickComponent extends React.Component {
             <Checkbox
               style={{ position: 'fixed' }}
               checked={editable}
-              onChange={e => this.changeEditable(index, e.target.checked)}
+              onChange={(e) => this.changeEditable(index, e.target.checked)}
             />
           </foreignObject>
         )}
@@ -305,7 +292,7 @@ TickComponent.propTypes = {
   formattedValue: PropTypes.string,
   onChangeCategory: PropTypes.func,
   onChange: PropTypes.func,
-  classes: PropTypes.object
+  classes: PropTypes.object,
 };
 
 export class RawChartAxes extends React.Component {
@@ -319,15 +306,13 @@ export class RawChartAxes extends React.Component {
     onChange: PropTypes.func,
     onChangeCategory: PropTypes.func,
     top: PropTypes.number,
-    theme: PropTypes.object
+    theme: PropTypes.object,
   };
 
   state = { height: 0 };
 
   componentDidMount() {
-    const height = document.getElementById('hiddenLabel')
-      ? document.getElementById('hiddenLabel').offsetHeight
-      : 0;
+    const height = document.getElementById('hiddenLabel') ? document.getElementById('hiddenLabel').offsetHeight : 0;
 
     this.setState({ height });
   }
@@ -344,15 +329,14 @@ export class RawChartAxes extends React.Component {
       top,
       defineChart,
       theme,
-      error
+      error,
     } = this.props;
 
     const { axis, axisLine, tick } = classes;
     const { scale = {}, range = {}, domain = {}, size = {} } = graphProps || {};
     const { height } = this.state;
 
-    const bottomScale =
-      xBand && typeof xBand.rangeRound === 'function' && xBand.rangeRound([0, size.width]);
+    const bottomScale = xBand && typeof xBand.rangeRound === 'function' && xBand.rangeRound([0, size.width]);
 
     const bandWidth = xBand && typeof xBand.bandwidth === 'function' && xBand.bandwidth();
     // for chartType "line", bandWidth will be 0, so we have to calculate it
@@ -362,12 +346,12 @@ export class RawChartAxes extends React.Component {
     const fontSize = theme && theme.typography ? theme.typography.fontSize : 14;
     const rotate = getRotateAngle(fontSize, height);
 
-    const getTickLabelProps = value => ({
+    const getTickLabelProps = (value) => ({
       dy: 4,
-      dx: -10 - (value.toLocaleString().length || 1) * 5
+      dx: -10 - (value.toLocaleString().length || 1) * 5,
     });
 
-    const getTickComponent = props => {
+    const getTickComponent = (props) => {
       const properties = {
         classes,
         categories,
@@ -383,7 +367,7 @@ export class RawChartAxes extends React.Component {
         graphProps,
         x: props.x,
         y: props.y,
-        formattedValue: props.formattedValue
+        formattedValue: props.formattedValue,
       };
 
       return <TickComponent {...properties} />;
@@ -398,7 +382,7 @@ export class RawChartAxes extends React.Component {
             axisLineClassName={axisLine}
             tickLength={10}
             tickClassName={tick}
-            tickFormat={value => value}
+            tickFormat={(value) => value}
             tickValues={rowTickValues}
             tickLabelProps={getTickLabelProps}
           />
@@ -410,7 +394,7 @@ export class RawChartAxes extends React.Component {
           labelProps={{ y: 60 + top }}
           top={scale.y && scale.y(range.min)}
           textLabelProps={() => ({ textAnchor: 'middle' })}
-          tickFormat={count => count}
+          tickFormat={(count) => count}
           tickComponent={getTickComponent}
         />
       </React.Fragment>
@@ -419,35 +403,35 @@ export class RawChartAxes extends React.Component {
 }
 
 const ChartAxes = withStyles(
-  theme => ({
+  (theme) => ({
     axis: {
       stroke: color.primaryDark(),
-      strokeWidth: 2
+      strokeWidth: 2,
     },
     axisLine: {
       stroke: color.primaryDark(),
-      strokeWidth: 2
+      strokeWidth: 2,
     },
     tick: {
       '& > line': {
         stroke: color.primaryDark(),
-        strokeWidth: 2
+        strokeWidth: 2,
       },
       fill: color.primaryDark(),
       fontFamily: theme.typography.body1.fontFamily,
       fontSize: theme.typography.fontSize,
-      textAnchor: 'middle'
+      textAnchor: 'middle',
     },
     dottedLine: {
       stroke: color.primaryLight(),
-      opacity: 0.2
+      opacity: 0.2,
     },
     error: {
       fontSize: '12px',
-      fill: 'red'
-    }
+      fill: 'red',
+    },
   }),
-  { withTheme: true }
+  { withTheme: true },
 )(RawChartAxes);
 
 export default ChartAxes;

package/src/bars/bar.js

@@ -8,7 +8,7 @@ export class Bar extends React.Component {
   static propTypes = {
     data: PropTypes.array,
     onChange: PropTypes.func,
-    graphProps: types.GraphPropsType.isRequired
+    graphProps: types.GraphPropsType.isRequired,
   };
 
   render() {
@@ -24,5 +24,5 @@ export class Bar extends React.Component {
 export default () => ({
   type: 'bar',
   Component: Bar,
-  name: 'Bar'
+  name: 'Bar',
 });

package/src/bars/common/bars.jsx

@@ -23,18 +23,18 @@ export class RawBar extends React.Component {
     interactive: PropTypes.bool,
     correctness: PropTypes.shape({
       value: PropTypes.string,
-      label: PropTypes.string
-    })
+      label: PropTypes.string,
+    }),
   };
 
   constructor(props) {
     super(props);
     this.state = {
-      dragValue: undefined
+      dragValue: undefined,
     };
   }
 
-  setDragValue = dragValue => this.setState({ dragValue });
+  setDragValue = (dragValue) => this.setState({ dragValue });
 
   dragStop = () => {
     const { label, onChangeCategory } = this.props;
@@ -55,16 +55,7 @@ export class RawBar extends React.Component {
   };
 
   render() {
-    const {
-      graphProps,
-      value,
-      label,
-      classes,
-      xBand,
-      index,
-      interactive,
-      correctness
-    } = this.props;
+    const { graphProps, value, label, classes, xBand, index, interactive, correctness } = this.props;
 
     const { scale, range } = graphProps;
     const { dragValue } = this.state;
@@ -81,19 +72,13 @@ export class RawBar extends React.Component {
 
     return (
       <React.Fragment>
-        <VxBar
-          x={barX}
-          y={scale.y(yy)}
-          width={barWidth}
-          height={barHeight}
-          className={classes.bar}
-        />
+        <VxBar x={barX} y={scale.y(yy)} width={barWidth} height={barHeight} className={classes.bar} />
         <Component
           x={barX}
           y={v}
           interactive={interactive}
           width={barWidth}
-          onDrag={v => this.dragValue(value, v)}
+          onDrag={(v) => this.dragValue(value, v)}
           onDragStop={this.dragStop}
           graphProps={graphProps}
           correctness={correctness}
@@ -105,8 +90,8 @@ export class RawBar extends React.Component {
 
 const Bar = withStyles(() => ({
   bar: {
-    fill: color.primaryLight()
-  }
+    fill: color.primaryLight(),
+  },
 }))(RawBar);
 
 export class Bars extends React.Component {
@@ -115,7 +100,7 @@ export class Bars extends React.Component {
     onChangeCategory: PropTypes.func,
     defineChart: PropTypes.bool,
     xBand: PropTypes.func,
-    graphProps: types.GraphPropsType.isRequired
+    graphProps: types.GraphPropsType.isRequired,
   };
 
   render() {
@@ -131,7 +116,7 @@ export class Bars extends React.Component {
             xBand={xBand}
             index={index}
             key={`bar-${d.label}-${d.value}-${index}`}
-            onChangeCategory={category => onChangeCategory(index, category)}
+            onChangeCategory={(category) => onChangeCategory(index, category)}
             graphProps={graphProps}
             correctness={d.correctness}
           />

package/src/bars/histogram.js

@@ -8,7 +8,7 @@ export class Histogram extends React.Component {
   static propTypes = {
     data: PropTypes.array,
     onChange: PropTypes.func,
-    graphProps: types.GraphPropsType.isRequired
+    graphProps: types.GraphPropsType.isRequired,
   };
 
   render() {
@@ -24,5 +24,5 @@ export class Histogram extends React.Component {
 export default () => ({
   type: 'histogram',
   Component: Histogram,
-  name: 'Histogram'
+  name: 'Histogram',
 });

package/src/chart-setup.jsx

@@ -7,7 +7,7 @@ import ChartType from './chart-type';
 import { NumberTextFieldCustom } from '@pie-lib/config-ui';
 import { AlertDialog } from '@pie-lib/config-ui';
 
-const ConfigureChartPanel = props => {
+const ConfigureChartPanel = (props) => {
   const { classes, model, onChange, chartDimensions, gridValues = {}, labelValues = {} } = props;
   const [alertDialog, setAlertDialog] = useState(false);
   const [open, setOpen] = useState(false);
@@ -22,18 +22,16 @@ const ConfigureChartPanel = props => {
   const widthConstraints = {
     min: width?.min ? Math.max(50, width.min) : 50,
     max: width?.max ? Math.min(700, width.max) : 700,
-    step: width?.step >= 1 ? Math.min(200, width.step) : 20
+    step: width?.step >= 1 ? Math.min(200, width.step) : 20,
   };
   const heightConstraints = {
     min: height?.min ? Math.max(400, height.min) : 400,
     max: height?.max ? Math.min(700, height.max) : 700,
-    step: height?.step >= 1 ? Math.min(200, height.step) : 20
+    step: height?.step >= 1 ? Math.min(200, height.step) : 20,
   };
 
-  const gridOptions =
-    gridValues && gridValues.range ? { customValues: gridValues.range } : { min: 0, max: 10000 };
-  const labelOptions =
-    labelValues && labelValues.range ? { customValues: labelValues.range } : { min: 0, max: 10000 };
+  const gridOptions = gridValues && gridValues.range ? { customValues: gridValues.range } : { min: 0, max: 10000 };
+  const labelOptions = labelValues && labelValues.range ? { customValues: labelValues.range } : { min: 0, max: 10000 };
 
   const stepConfig = (
     <div className={classes.rowView}>
@@ -59,15 +57,15 @@ const ConfigureChartPanel = props => {
   const handleAlertDialog = (open, callback) => {
     setAlertDialog(
       {
-        alertDialog: open
+        alertDialog: open,
       },
-      callback
+      callback,
     );
     setOpen(open);
   };
 
-  const resetValues = data =>
-    data.forEach(d => {
+  const resetValues = (data) =>
+    data.forEach((d) => {
       const remainder = d.value - range.step * Math.floor(d.value / range.step);
 
       if (d.value > range.max || remainder !== 0) {
@@ -82,7 +80,7 @@ const ConfigureChartPanel = props => {
     resetValues(correctAnswer.data);
   };
 
-  const rangeProps = chartType => {
+  const rangeProps = (chartType) => {
     return chartType.includes('Plot') ? { min: 3, max: 10 } : { min: 0.05, max: 10000 };
   };
 
@@ -102,11 +100,9 @@ const ConfigureChartPanel = props => {
     if (key === 'max' || key === 'step') {
       // check if current chart values are invalid for given range step/max
       const outOfRange =
-        model.data.find(
-          d => d.value > range.max || d.value - range.step * Math.floor(d.value / range.step) !== 0
-        ) ||
+        model.data.find((d) => d.value > range.max || d.value - range.step * Math.floor(d.value / range.step) !== 0) ||
         model.correctAnswer.data.find(
-          d => d.value > range.max || d.value - range.step * Math.floor(d.value / range.step) !== 0
+          (d) => d.value > range.max || d.value - range.step * Math.floor(d.value / range.step) !== 0,
         );
 
       if (outOfRange) {
@@ -132,13 +128,12 @@ const ConfigureChartPanel = props => {
         onClose: () => {
           range[rangeKey] = resetValue;
           handleAlertDialog(false);
-        }
+        },
       });
     }
   }, [open]);
 
-  const isValidPlot =
-    range.step === 1 && range.labelStep === 1 && 3 <= range.max && range.max <= 10;
+  const isValidPlot = range.step === 1 && range.labelStep === 1 && 3 <= range.max && range.max <= 10;
 
   const getPlotConfiguration = () => {
     rangeProps.min = 3;
@@ -151,15 +146,14 @@ const ConfigureChartPanel = props => {
     onChange({ ...model, range });
   };
 
-  const onChartTypeChange = chartType => {
+  const onChartTypeChange = (chartType) => {
     if (chartType.includes('Plot')) {
       // The selected chart type does not support the current chart configuration
       if (!isValidPlot) {
         setAlertDialog({
           open: true,
           title: 'Warning',
-          text:
-            'The selected chart type does not support the current chart configuration. Reset chart configuration?',
+          text: 'The selected chart type does not support the current chart configuration. Reset chart configuration?',
           onConfirm: () => {
             getPlotConfiguration();
             removeOutOfRangeValues();
@@ -167,7 +161,7 @@ const ConfigureChartPanel = props => {
           },
           onClose: () => {
             handleAlertDialog(false);
-          }
+          },
         });
 
         return;
@@ -189,7 +183,7 @@ const ConfigureChartPanel = props => {
       <Typography variant={'subtitle1'}>Configure Chart</Typography>
       <div className={classes.content}>
         <div className={classes.rowView}>
-          <ChartType value={model.chartType} onChange={e => onChartTypeChange(e.target.value)} />
+          <ChartType value={model.chartType} onChange={(e) => onChartTypeChange(e.target.value)} />
           <NumberTextFieldCustom
             className={classes.mediumTextField}
             label="Max Value"
@@ -252,54 +246,54 @@ ConfigureChartPanel.propTypes = {
   onChange: PropTypes.func,
   range: PropTypes.object,
   chartDimension: PropTypes.object,
-  size: PropTypes.object
+  size: PropTypes.object,
 };
 
-const styles = theme => ({
+const styles = (theme) => ({
   wrapper: {
-    width: '450px'
+    width: '450px',
   },
   content: {
     display: 'flex',
     flexDirection: 'column',
     width: '100%',
-    marginTop: '24px'
+    marginTop: '24px',
   },
   columnView: {
     display: 'flex',
     flexDirection: 'column',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   rowView: {
     display: 'flex',
     justifyContent: 'space-around',
-    alignItems: 'center'
+    alignItems: 'center',
   },
   textField: {
     width: '130px',
-    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`
+    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
   },
   mediumTextField: {
     width: '160px',
-    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`
+    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
   },
   largeTextField: {
     width: '230px',
-    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`
+    margin: `${theme.spacing.unit}px ${theme.spacing.unit / 2}px`,
   },
   text: {
     fontStyle: 'italic',
-    margin: `${theme.spacing.unit}px 0`
+    margin: `${theme.spacing.unit}px 0`,
   },
   dimensions: {
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    margin: '24px 0px'
+    margin: '24px 0px',
   },
   disabled: {
-    color: color.disabled()
-  }
+    color: color.disabled(),
+  },
 });
 
 export default withStyles(styles)(ConfigureChartPanel);

package/src/chart-type.js

@@ -6,13 +6,13 @@ import InputLabel from '@material-ui/core/InputLabel';
 import Select from '@material-ui/core/Select';
 import OutlinedInput from '@material-ui/core/OutlinedInput';
 
-const ChartType = withStyles(theme => ({
+const ChartType = withStyles((theme) => ({
   chartType: {
-    width: '160px'
+    width: '160px',
   },
   chartTypeLabel: {
-    backgroundColor: 'transparent'
-  }
+    backgroundColor: 'transparent',
+  },
 }))(({ onChange, value, classes }) => (
   <div className={classes.chartType}>
     <FormControl variant={'outlined'} className={classes.chartType}>
@@ -20,12 +20,7 @@ const ChartType = withStyles(theme => ({
         ChartType
       </InputLabel>
 
-      <Select
-        value={value}
-        onChange={onChange}
-        labelWidth={0}
-        input={<OutlinedInput name="type" id="type-helper" />}
-      >
+      <Select value={value} onChange={onChange} labelWidth={0} input={<OutlinedInput name="type" id="type-helper" />}>
         <MenuItem value={'histogram'}>Histogram</MenuItem>
         <MenuItem value={'bar'}>Bar Chart</MenuItem>
         <MenuItem value={'lineDot'}>Line Chart &#9679;</MenuItem>