@pie-lib/charting 5.4.0 → 5.4.1

package/src/chart.jsx

@@ -8,12 +8,7 @@ import ChartGrid from './grid';
 import ChartAxes from './axes';
 import debug from 'debug';
 import { color } from '@pie-lib/render-ui';
-import {
-  dataToXBand,
-  getDomainAndRangeByChartType,
-  getGridLinesAndAxisByChartType,
-  getTopPadding
-} from './utils';
+import { dataToXBand, getDomainAndRangeByChartType, getGridLinesAndAxisByChartType, getTopPadding } from './utils';
 import ToolMenu from './tool-menu';
 import chartTypes from './chart-types';
 import { AlertDialog } from '@pie-lib/config-ui';
@@ -25,8 +20,8 @@ export class Chart extends React.Component {
     super(props);
     this.state = {
       dialog: {
-        open: false
-      }
+        open: false,
+      },
     };
   }
 
@@ -36,13 +31,13 @@ export class Chart extends React.Component {
     chartType: PropTypes.string.isRequired,
     size: PropTypes.shape({
       width: PropTypes.number,
-      height: PropTypes.number
+      height: PropTypes.number,
     }),
     domain: PropTypes.shape({
       label: PropTypes.string,
       min: PropTypes.number,
       max: PropTypes.number,
-      axisLabel: PropTypes.string
+      axisLabel: PropTypes.string,
     }),
     data: PropTypes.arrayOf(PropTypes.shape({ label: PropTypes.string, value: PropTypes.number })),
     range: PropTypes.shape({
@@ -51,7 +46,7 @@ export class Chart extends React.Component {
       max: PropTypes.number,
       step: PropTypes.number,
       labelStep: PropTypes.number,
-      axisLabel: PropTypes.string
+      axisLabel: PropTypes.string,
     }),
     charts: PropTypes.array,
     title: PropTypes.string,
@@ -60,14 +55,14 @@ export class Chart extends React.Component {
     showPixelGuides: PropTypes.bool,
     categoryDefaultLabel: PropTypes.string,
     defineChart: PropTypes.bool,
-    theme: PropTypes.object
+    theme: PropTypes.object,
   };
 
   static defaultProps = {
     size: {
       width: 480,
-      height: 480
-    }
+      height: 480,
+    },
   };
 
   state = {
@@ -77,16 +72,16 @@ export class Chart extends React.Component {
       chartTypes.LineDot(),
       chartTypes.LineCross(),
       chartTypes.DotPlot(),
-      chartTypes.LinePlot()
-    ]
+      chartTypes.LinePlot(),
+    ],
   };
 
   handleAlertDialog = (open, callback) =>
     this.setState(
       {
-        dialog: { open }
+        dialog: { open },
       },
-      callback
+      callback,
     );
 
   getChart = () => {
@@ -96,7 +91,7 @@ export class Chart extends React.Component {
     let chart = null;
 
     if (chartType) {
-      chart = charts && charts.find(chart => chart.type === chartType);
+      chart = charts && charts.find((chart) => chart.type === chartType);
       ChartComponent = chart && chart.Component;
     } else {
       chart = charts && charts[0];
@@ -106,11 +101,11 @@ export class Chart extends React.Component {
 
     return {
       type: chartType,
-      ChartComponent
+      ChartComponent,
     };
   };
 
-  changeData = data => {
+  changeData = (data) => {
     const { onDataChange } = this.props;
 
     onDataChange(data);
@@ -123,14 +118,14 @@ export class Chart extends React.Component {
       const { data, onDataChange } = this.props;
       data[integerIndex] = {
         ...data[integerIndex],
-        ...newCategory
+        ...newCategory,
       };
 
       onDataChange(data);
     }
   };
 
-  addCategory = range => {
+  addCategory = (range) => {
     const { onDataChange, data, categoryDefaultLabel, defineChart } = this.props;
 
     if (!defineChart && data.length > 19) {
@@ -139,8 +134,8 @@ export class Chart extends React.Component {
           open: true,
           title: 'Warning',
           text: "There can't be more than 20 categories.",
-          onConfirm: () => this.handleAlertDialog(false)
-        }
+          onConfirm: () => this.handleAlertDialog(false),
+        },
       });
     } else {
       onDataChange([
@@ -152,8 +147,8 @@ export class Chart extends React.Component {
           value: range.step,
           deletable: true,
           editable: true,
-          interactive: true
-        }
+          interactive: true,
+        },
       ]);
     }
   };
@@ -162,9 +157,9 @@ export class Chart extends React.Component {
     const { data, defineChart } = this.props;
 
     return data
-      ? data.map(d => ({
+      ? data.map((d) => ({
           ...d,
-          deletable: defineChart || d.deletable
+          deletable: defineChart || d.deletable,
         }))
       : [];
   };
@@ -183,7 +178,7 @@ export class Chart extends React.Component {
       titlePlaceholder,
       addCategoryEnabled,
       showPixelGuides,
-      error
+      error,
     } = this.props;
     let { chartType } = this.props;
 
@@ -197,17 +192,9 @@ export class Chart extends React.Component {
 
     const correctValues = getDomainAndRangeByChartType(domain, range, chartType);
 
-    const { verticalLines, horizontalLines, leftAxis } = getGridLinesAndAxisByChartType(
-      correctValues.range,
-      chartType
-    );
+    const { verticalLines, horizontalLines, leftAxis } = getGridLinesAndAxisByChartType(correctValues.range, chartType);
     const common = {
-      graphProps: createGraphProps(
-        correctValues.domain,
-        correctValues.range,
-        size,
-        () => this.rootNode
-      )
+      graphProps: createGraphProps(correctValues.domain, correctValues.range, size, () => this.rootNode),
     };
 
     log('[render] common:', common);
@@ -256,15 +243,10 @@ export class Chart extends React.Component {
           isChart={true}
           showPixelGuides={showPixelGuides}
           classes={classes}
-          rootRef={r => (this.rootNode = r)}
+          rootRef={(r) => (this.rootNode = r)}
           {...rootCommon}
         >
-          <ChartGrid
-            {...common}
-            xBand={xBand}
-            rowTickValues={horizontalLines}
-            columnTickValues={verticalLines}
-          />
+          <ChartGrid {...common} xBand={xBand} rowTickValues={horizontalLines} columnTickValues={verticalLines} />
           <ChartAxes
             {...common}
             defineChart={defineChart}
@@ -301,9 +283,9 @@ export class Chart extends React.Component {
   }
 }
 
-const styles = theme => ({
+const styles = (theme) => ({
   graphBox: {
-    transform: 'translate(60px, 35px)'
+    transform: 'translate(60px, 35px)',
   },
   controls: {
     width: 'inherit',
@@ -314,14 +296,14 @@ const styles = theme => ({
     borderTop: `solid 1px ${color.primaryDark()}`,
     borderBottom: `solid 0px ${color.primaryDark()}`,
     borderLeft: `solid 1px ${color.primaryDark()}`,
-    borderRight: `solid 1px ${color.primaryDark()}`
+    borderRight: `solid 1px ${color.primaryDark()}`,
   },
   svg: {
-    overflow: 'visible'
+    overflow: 'visible',
   },
   toolMenu: {
-    minHeight: '36px'
-  }
+    minHeight: '36px',
+  },
 });
 
 export default withStyles(styles, { withTheme: true })(Chart);

package/src/common/drag-handle.jsx

@@ -17,21 +17,11 @@ export class RawDragHandle extends React.Component {
     interactive: PropTypes.bool,
     correctness: PropTypes.shape({
       value: PropTypes.string,
-      label: PropTypes.string
-    })
+      label: PropTypes.string,
+    }),
   };
   render() {
-    const {
-      x,
-      y,
-      width,
-      graphProps,
-      classes,
-      className,
-      interactive,
-      correctness,
-      ...rest
-    } = this.props;
+    const { x, y, width, graphProps, classes, className, interactive, correctness, ...rest } = this.props;
     const { scale } = graphProps;
 
     return (
@@ -44,15 +34,10 @@ export class RawDragHandle extends React.Component {
           classes.handleContainer,
           className,
           !interactive && 'non-interactive',
-          interactive && correctness && correctness.value
+          interactive && correctness && correctness.value,
         )}
       >
-        <rect
-          y={-10}
-          width={width}
-          className={classNames(classes.transparentHandle, className)}
-          {...rest}
-        />
+        <rect y={-10} width={width} className={classNames(classes.transparentHandle, className)} {...rest} />
         <rect
           width={width}
           className={classNames(
@@ -60,46 +45,41 @@ export class RawDragHandle extends React.Component {
             'handle',
             className,
             !interactive && 'non-interactive',
-            interactive && correctness && correctness.value
+            interactive && correctness && correctness.value,
           )}
           {...rest}
         />
-        <rect
-          y={10}
-          width={width}
-          className={classNames(classes.transparentHandle, className)}
-          {...rest}
-        />
+        <rect y={10} width={width} className={classNames(classes.transparentHandle, className)} {...rest} />
       </svg>
     );
   }
 }
 
-export const DragHandle = withStyles(theme => ({
+export const DragHandle = withStyles((theme) => ({
   handle: {
     height: '10px',
     fill: color.secondary(),
     transition: 'fill 200ms linear, height 200ms linear',
     '&.correct': correct('fill'),
     '&.incorrect': incorrect('fill'),
-    '&.non-interactive': disabled('fill')
+    '&.non-interactive': disabled('fill'),
   },
   transparentHandle: {
     height: '20px',
-    fill: 'transparent'
+    fill: 'transparent',
   },
   handleContainer: {
     height: 30,
     '&:hover': {
       '& .handle': {
         fill: color.secondaryDark(),
-        height: '16px'
-      }
+        height: '16px',
+      },
     },
     '&.non-interactive': disabled('fill'),
     '&.incorrect': incorrect('fill'),
-    '&.correct': correct('fill')
-  }
+    '&.correct': correct('fill'),
+  },
 }))(RawDragHandle);
 
 export const D = gridDraggable({
@@ -115,9 +95,9 @@ export const D = gridDraggable({
     const area = { left: 0, top: props.y, bottom: props.y, right: 0 };
     return utils.bounds(area, domain, range);
   },
-  anchorPoint: props => {
+  anchorPoint: (props) => {
     return { x: props.x, y: props.y };
-  }
+  },
 })(DragHandle);
 
 export default D;

package/src/common/styles.js

@@ -2,14 +2,14 @@ import { color } from '@pie-lib/render-ui';
 
 export const disabled = (key = 'fill') => ({
   [key]: `var(--graph-disabled, ${color.disabled()})`,
-  pointerEvents: 'none'
+  pointerEvents: 'none',
 });
 
 export const correct = (key = 'fill') => ({
   [key]: color.correct(),
-  pointerEvents: 'none'
+  pointerEvents: 'none',
 });
 export const incorrect = (key = 'fill') => ({
   [key]: color.incorrect(),
-  pointerEvents: 'none'
+  pointerEvents: 'none',
 });

package/src/grid.jsx

@@ -14,7 +14,7 @@ export class Grid extends React.Component {
     graphProps: types.GraphPropsType.isRequired,
     xBand: PropTypes.func,
     columnTickValues: PropTypes.array,
-    rowTickValues: PropTypes.array
+    rowTickValues: PropTypes.array,
   };
 
   static defaultProps = {};
@@ -40,8 +40,8 @@ export class Grid extends React.Component {
 
 const styles = () => ({
   grid: {
-    stroke: color.primaryLight()
-  }
+    stroke: color.primaryLight(),
+  },
 });
 
 export default withStyles(styles)(Grid);

package/src/line/common/drag-handle.jsx

@@ -18,8 +18,8 @@ class RawDragHandle extends React.Component {
     CustomDraggableComponent: PropTypes.func,
     correctness: PropTypes.shape({
       value: PropTypes.string,
-      label: PropTypes.string
-    })
+      label: PropTypes.string,
+    }),
   };
 
   render() {
@@ -50,27 +50,27 @@ class RawDragHandle extends React.Component {
   }
 }
 
-export const DragHandle = withStyles(theme => ({
+export const DragHandle = withStyles((theme) => ({
   handle: {
     fill: color.secondary(),
     transition: 'fill 200ms linear, height 200ms linear',
     '&:hover': {
-      fill: color.secondaryDark()
+      fill: color.secondaryDark(),
     },
     '&.correct': correct('fill'),
     '&.incorrect': incorrect('fill'),
-    '&.non-interactive': disabled('fill')
+    '&.non-interactive': disabled('fill'),
   },
   line: {
     stroke: color.secondary(),
     transition: 'fill 200ms linear, height 200ms linear',
     '&:hover': {
-      stroke: color.secondaryDark()
+      stroke: color.secondaryDark(),
     },
     '&.non-interactive': disabled('stroke'),
     '&.correct': correct('stroke'),
-    '&.incorrect': incorrect('stroke')
-  }
+    '&.incorrect': incorrect('stroke'),
+  },
 }))(RawDragHandle);
 
 const DraggableHandle = gridDraggable({
@@ -85,9 +85,9 @@ const DraggableHandle = gridDraggable({
     const area = { left: 0, top: props.y, bottom: props.y, right: 0 };
     return utils.bounds(area, domain, range);
   },
-  anchorPoint: props => {
+  anchorPoint: (props) => {
     return { x: props.x, y: props.y };
-  }
+  },
 })(DragHandle);
 
 export default DraggableHandle;

package/src/line/common/line.jsx

@@ -19,7 +19,7 @@ const getData = (data, domain) => {
   return data.map((el, i) => ({
     ...el,
     x: length > 1 ? i * (max / (length - 1)) : 0.5,
-    y: el.value
+    y: el.value,
   }));
 };
 
@@ -36,35 +36,35 @@ export class RawLine extends React.Component {
     data: PropTypes.arrayOf(
       PropTypes.shape({
         label: PropTypes.string,
-        value: PropTypes.number
-      })
+        value: PropTypes.number,
+      }),
     ),
-    CustomDraggableComponent: PropTypes.func
+    CustomDraggableComponent: PropTypes.func,
   };
 
   static defaultProps = {
-    index: 0
+    index: 0,
   };
 
   constructor(props) {
     super(props);
     this.state = {
       dragValue: undefined,
-      line: getData(props.data, props.graphProps.domain)
+      line: getData(props.data, props.graphProps.domain),
     };
   }
 
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (!isEqual(this.props.data, nextProps.data)) {
       this.setState({
-        line: getData(nextProps.data, nextProps.graphProps.domain)
+        line: getData(nextProps.data, nextProps.graphProps.domain),
       });
     }
   }
 
-  setDragValue = line => this.setState({ line });
+  setDragValue = (line) => this.setState({ line });
 
-  dragStop = index => {
+  dragStop = (index) => {
     const { onChange } = this.props;
     this.setState({ dragging: false }, () => {
       onChange(index, this.state.line[index]);
@@ -87,8 +87,8 @@ export class RawLine extends React.Component {
       <React.Fragment>
         <LinePath
           data={lineToUse}
-          x={d => scale.x(d.x)}
-          y={d => scale.y(d.dragValue !== undefined ? d.dragValue : d.y)}
+          x={(d) => scale.x(d.x)}
+          y={(d) => scale.y(d.dragValue !== undefined ? d.dragValue : d.y)}
           className={classes.line}
         />
         {lineToUse &&
@@ -105,9 +105,7 @@ export class RawLine extends React.Component {
                 interactive={enableDraggable}
                 r={r}
                 onDragStart={() => this.setState({ dragging: true })}
-                onDrag={v =>
-                  this.dragValue(i, point.dragValue !== undefined ? point.dragValue : point.y, v)
-                }
+                onDrag={(v) => this.dragValue(i, point.dragValue !== undefined ? point.dragValue : point.y, v)}
                 onDragStop={() => this.dragStop(i)}
                 graphProps={graphProps}
                 CustomDraggableComponent={CustomDraggableComponent}
@@ -120,7 +118,7 @@ export class RawLine extends React.Component {
   }
 }
 
-const StyledLine = withStyles(theme => ({
+const StyledLine = withStyles((theme) => ({
   line: {
     fill: 'transparent',
     stroke: color.primaryLight(),
@@ -128,9 +126,9 @@ const StyledLine = withStyles(theme => ({
     transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',
     '&:hover': {
       strokeWidth: 6,
-      stroke: color.primaryDark()
-    }
-  }
+      stroke: color.primaryDark(),
+    },
+  },
 }))(RawLine);
 
 export class Line extends React.Component {
@@ -138,7 +136,7 @@ export class Line extends React.Component {
     data: PropTypes.array,
     onChange: PropTypes.func,
     xBand: PropTypes.func,
-    graphProps: types.GraphPropsType.isRequired
+    graphProps: types.GraphPropsType.isRequired,
   };
 
   changeLine = (index, category) => {

package/src/line/line-cross.js

@@ -7,26 +7,29 @@ import classNames from 'classnames';
 import { dataToXBand } from '../utils';
 import RawLine from './common/line';
 
-const DraggableComponent = props => {
+const DraggableComponent = (props) => {
   const { classes = {}, className, scale, x, y, r, correctness, ...rest } = props;
 
   return (
-    <Group
-      {...rest}
-      className={classNames(className, classes.line, correctness && correctness.value)}
-    >
+    <Group {...rest} className={classNames(className, classes.line, correctness && correctness.value)}>
       <LinePath
-        data={[{ x: scale.x(x) - r, y: scale.y(y) + r }, { x: scale.x(x) + r, y: scale.y(y) - r }]}
+        data={[
+          { x: scale.x(x) - r, y: scale.y(y) + r },
+          { x: scale.x(x) + r, y: scale.y(y) - r },
+        ]}
         key={`point-${x}-${y}-1`}
-        x={d => d.x}
-        y={d => d.y}
+        x={(d) => d.x}
+        y={(d) => d.y}
         strokeWidth={5}
       />
       <LinePath
-        data={[{ x: scale.x(x) - r, y: scale.y(y) - r }, { x: scale.x(x) + r, y: scale.y(y) + r }]}
+        data={[
+          { x: scale.x(x) - r, y: scale.y(y) - r },
+          { x: scale.x(x) + r, y: scale.y(y) + r },
+        ]}
         key={`point-${x}-${y}-2`}
-        x={d => d.x}
-        y={d => d.y}
+        x={(d) => d.x}
+        y={(d) => d.y}
         strokeWidth={5}
       />
     </Group>
@@ -42,15 +45,15 @@ DraggableComponent.propTypes = {
   classes: PropTypes.object,
   correctness: PropTypes.shape({
     value: PropTypes.string,
-    label: PropTypes.string
-  })
+    label: PropTypes.string,
+  }),
 };
 
 export class LineCross extends React.Component {
   static propTypes = {
     data: PropTypes.array,
     onChange: PropTypes.func,
-    graphProps: types.GraphPropsType.isRequired
+    graphProps: types.GraphPropsType.isRequired,
   };
 
   render() {
@@ -66,5 +69,5 @@ export class LineCross extends React.Component {
 export default () => ({
   type: 'lineCross',
   Component: LineCross,
-  name: 'Line Cross'
+  name: 'Line Cross',
 });

package/src/line/line-dot.js

@@ -24,15 +24,15 @@ DraggableComponent.propTypes = {
   classes: PropTypes.object,
   correctness: PropTypes.shape({
     value: PropTypes.string,
-    label: PropTypes.string
-  })
+    label: PropTypes.string,
+  }),
 };
 
 export class LineDot extends React.Component {
   static propTypes = {
     data: PropTypes.array,
     onChange: PropTypes.func,
-    graphProps: types.GraphPropsType.isRequired
+    graphProps: types.GraphPropsType.isRequired,
   };
 
   render() {
@@ -48,5 +48,5 @@ export class LineDot extends React.Component {
 export default () => ({
   type: 'lineDot',
   Component: LineDot,
-  name: 'Line Dot'
+  name: 'Line Dot',
 });