@pie-lib/charting 5.15.6 → 5.15.7-next.1618

package/src/axes.jsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
+import { AxisLeft, AxisBottom } from '@vx/axis';
+import Checkbox from '@material-ui/core/Checkbox';
+
 import { types } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
 import { AlertDialog } from '@pie-lib/config-ui';
-import { AxisLeft, AxisBottom } from '@vx/axis';
+import { TickCorrectnessIndicator } from './common/correctness-indicators';
 import { bandKey, getTickValues, getRotateAngle } from './utils';
 import MarkLabel from './mark-label';
-import Checkbox from '@material-ui/core/Checkbox';
 
 export class TickComponent extends React.Component {
   static propTypes = {
@@ -24,6 +26,12 @@ export class TickComponent extends React.Component {
     };
   }
 
+  componentDidUpdate(prevProps) {
+    if (this.props.autoFocus && !prevProps.autoFocus) {
+      this.props.onAutoFocusUsed();
+    }
+  }
+
   handleAlertDialog = (open, callback) =>
     this.setState(
       {
@@ -39,14 +47,6 @@ export class TickComponent extends React.Component {
     onChangeCategory(index, { ...category, label: newLabel });
   };
 
-  deleteCategory = (index) => {
-    const { categories, onChange } = this.props;
-
-    if (index >= 0 && categories[index]) {
-      onChange([...categories.slice(0, index), ...categories.slice(index + 1)]);
-    }
-  };
-
   changeInteractive = (index, value) => {
     const { categories, onChangeCategory } = this.props;
     const category = categories[index];
@@ -126,6 +126,9 @@ export class TickComponent extends React.Component {
       changeInteractiveEnabled,
       changeEditableEnabled,
       error,
+      autoFocus,
+      hiddenLabelRef,
+      showCorrectness,
     } = this.props;
 
     if (!formattedValue) {
@@ -136,7 +139,7 @@ export class TickComponent extends React.Component {
     const { changeEditable, changeInteractive } = chartingOptions || {};
     const index = parseInt(formattedValue.split('-')[0], 10);
     const category = categories[index];
-    const { deletable, editable, interactive, label, correctness, autoFocus, inDefineChart } = category || {};
+    const { editable, interactive, label, correctness } = category || {};
     const barX = xBand(bandKey({ label }, index));
     const longestCategory = (categories || []).reduce((a, b) => {
       const lengthA = a && a.label ? a.label.length : 0;
@@ -144,37 +147,30 @@ export class TickComponent extends React.Component {
 
       return lengthA > lengthB ? a : b;
     });
-
-    const longestLabel = (longestCategory && longestCategory.label) || '';
     const distinctMessages = error ? [...new Set(Object.values(error))].join(' ') : '';
 
     return (
       <g>
         <foreignObject
           x={bandWidth ? barX : x - barWidth / 2}
-          y={6}
+          y={18}
           width={barWidth}
           height={4}
           style={{ pointerEvents: 'none', overflow: 'visible' }}
         >
           {index === 0 && (
-            <div
-              id="hiddenLabel"
-              style={{
-                position: 'absolute',
-                visibility: 'hidden',
-                wordBreak: 'break-word',
-                overflow: 'visible',
-                maxWidth: barWidth,
-                display: 'block',
-              }}
-            >
-              {longestLabel}
-            </div>
+            <MarkLabel
+              isHiddenLabel={true}
+              inputRef={hiddenLabelRef}
+              disabled={true}
+              mark={longestCategory}
+              graphProps={graphProps}
+              barWidth={barWidth}
+            />
           )}
 
           <MarkLabel
-            autoFocus={inDefineChart ? defineChart && autoFocus : autoFocus}
+            autoFocus={defineChart && autoFocus}
             inputRef={(r) => (this.input = r)}
             disabled={!defineChart && !editable}
             mark={category}
@@ -184,6 +180,13 @@ export class TickComponent extends React.Component {
             rotate={rotate}
             correctness={correctness}
             error={error && error[index]}
+            limitCharacters
+            correctnessIndicator={
+              showCorrectness &&
+              correctness && (
+                <TickCorrectnessIndicator correctness={correctness} interactive={interactive} classes={classes} />
+              )
+            }
           />
         </foreignObject>
 
@@ -193,24 +196,6 @@ 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" />
-        )}
-
-        {deletable && !correctness && (
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            x={x - 8}
-            y={y + 60 + top}
-            width={16}
-            height={16}
-            viewBox="0 0 512 512"
-            onClick={() => this.deleteCategory(index)}
-          >
-            <path d="M128 405.429C128 428.846 147.198 448 170.667 448h170.667C364.802 448 384 428.846 384 405.429V160H128v245.429zM416 96h-80l-26.785-32H202.786L176 96H96v32h320V96z" />
-          </svg>
-        )}
-
         {defineChart && index === 0 && (
           <svg
             x={-55}
@@ -271,6 +256,7 @@ export class TickComponent extends React.Component {
             style={{ pointerEvents: 'visible', overflow: 'visible' }}
           >
             <Checkbox
+              className={classes.customColor}
               style={{ position: 'fixed' }}
               checked={interactive}
               onChange={(e) => this.changeInteractive(index, e.target.checked)}
@@ -287,6 +273,7 @@ export class TickComponent extends React.Component {
             style={{ pointerEvents: 'visible', overflow: 'visible' }}
           >
             <Checkbox
+              className={classes.customColor}
               style={{ position: 'fixed' }}
               checked={editable}
               onChange={(e) => this.changeEditable(index, e.target.checked)}
@@ -333,6 +320,9 @@ TickComponent.propTypes = {
   chartingOptions: PropTypes.object,
   changeInteractiveEnabled: PropTypes.bool,
   changeEditableEnabled: PropTypes.bool,
+  autoFocus: PropTypes.bool,
+  onAutoFocusUsed: PropTypes.func,
+  showCorrectness: PropTypes.bool,
 };
 
 export class RawChartAxes extends React.Component {
@@ -352,14 +342,31 @@ export class RawChartAxes extends React.Component {
     chartingOptions: PropTypes.object,
     changeInteractiveEnabled: PropTypes.bool,
     changeEditableEnabled: PropTypes.bool,
+    autoFocus: PropTypes.bool,
+    onAutoFocusUsed: PropTypes.func,
+    showCorrectness: PropTypes.bool,
   };
 
-  state = { height: 0 };
+  state = { height: 0, width: 0 };
 
   componentDidMount() {
-    const height = document.getElementById('hiddenLabel') ? document.getElementById('hiddenLabel').offsetHeight : 0;
+    if (this.hiddenLabelRef) {
+      const boundingClientRect = this.hiddenLabelRef.getBoundingClientRect();
+      this.setState({
+        height: Math.floor(boundingClientRect.height),
+        width: Math.floor(boundingClientRect.width),
+      });
+    }
+  }
 
-    this.setState({ height });
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    if (this.hiddenLabelRef) {
+      const width = Math.floor(this.hiddenLabelRef.getBoundingClientRect().width);
+
+      if (width !== this.state.width) {
+        this.setState({ width });
+      }
+    }
   }
 
   render() {
@@ -377,12 +384,15 @@ export class RawChartAxes extends React.Component {
       changeInteractiveEnabled,
       changeEditableEnabled,
       theme,
+      autoFocus,
+      onAutoFocusUsed,
       error,
+      showCorrectness,
     } = this.props;
 
     const { axis, axisLine, tick } = classes;
     const { scale = {}, range = {}, domain = {}, size = {} } = graphProps || {};
-    const { height } = this.state;
+    const { height, width } = this.state;
 
     const bottomScale = xBand && typeof xBand.rangeRound === 'function' && xBand.rangeRound([0, size.width]);
 
@@ -392,7 +402,10 @@ export class RawChartAxes extends React.Component {
 
     const rowTickValues = getTickValues({ ...range, step: range.labelStep });
     const fontSize = theme && theme.typography ? theme.typography.fontSize : 14;
-    const rotate = getRotateAngle(fontSize, height);
+    // this mostly applies for labels that are not editable
+    const rotateBecauseOfHeight = getRotateAngle(fontSize, height);
+    // this applies for labels that are editable
+    const rotateBecauseOfWidth = width > barWidth ? 25 : 0;
 
     const getTickLabelProps = (value) => ({
       dy: 4,
@@ -401,15 +414,20 @@ export class RawChartAxes extends React.Component {
 
     const getTickComponent = (props) => {
       const properties = {
+        hiddenLabelRef: (ref) => {
+          this.hiddenLabelRef = ref;
+        },
         classes,
         categories,
         xBand,
         bandWidth,
         barWidth,
-        rotate,
+        rotate: rotateBecauseOfHeight || rotateBecauseOfWidth,
         top,
         defineChart,
         chartingOptions,
+        autoFocus,
+        onAutoFocusUsed,
         error,
         onChangeCategory,
         changeInteractiveEnabled,
@@ -419,6 +437,7 @@ export class RawChartAxes extends React.Component {
         x: props.x,
         y: props.y,
         formattedValue: props.formattedValue,
+        showCorrectness,
       };
 
       return <TickComponent {...properties} />;
@@ -447,6 +466,8 @@ export class RawChartAxes extends React.Component {
           textLabelProps={() => ({ textAnchor: 'middle' })}
           tickFormat={(count) => count}
           tickComponent={getTickComponent}
+          autoFocus={autoFocus}
+          onAutoFocusUsed={onAutoFocusUsed}
         />
       </React.Fragment>
     );
@@ -460,7 +481,7 @@ const ChartAxes = withStyles(
       strokeWidth: 2,
     },
     axisLine: {
-      stroke: color.primaryDark(),
+      stroke: color.visualElementsColors.AXIS_LINE_COLOR,
       strokeWidth: 2,
     },
     tick: {
@@ -468,7 +489,6 @@ const ChartAxes = withStyles(
         stroke: color.primaryDark(),
         strokeWidth: 2,
       },
-      fill: color.primaryDark(),
       fontFamily: theme.typography.body1.fontFamily,
       fontSize: theme.typography.fontSize,
       textAnchor: 'middle',
@@ -481,6 +501,30 @@ const ChartAxes = withStyles(
       fontSize: theme.typography.fontSize - 2,
       fill: theme.palette.error.main,
     },
+    customColor: {
+      color: `${color.tertiary()} !important`,
+    },
+    correctnessIcon: {
+      borderRadius: theme.spacing.unit * 2,
+      color: color.defaults.WHITE,
+      fontSize: '16px',
+      width: '16px',
+      height: '16px',
+      padding: '2px',
+      border: `1px solid ${color.defaults.WHITE}`,
+      boxSizing: 'unset', // to override the default border-box in IBX
+    },
+    incorrectIcon: {
+      backgroundColor: color.incorrectWithIcon(),
+    },
+    correctIcon: {
+      backgroundColor: color.correct(),
+    },
+    tickContainer: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+    },
   }),
   { withTheme: true },
 )(RawChartAxes);

package/src/bars/__tests__/__snapshots__/bar.test.jsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BarChart snapshot renders 1`] = `
+<Bars
+  className="className"
+  classes={Object {}}
+  graphProps={
+    Object {
+      "domain": Object {
+        "max": 1,
+        "min": 0,
+        "step": 1,
+      },
+      "range": Object {
+        "max": 1,
+        "min": 0,
+        "step": 1,
+      },
+      "scale": Object {
+        "x": [MockFunction],
+        "y": [MockFunction],
+      },
+      "size": Object {
+        "height": 400,
+        "width": 400,
+      },
+      "snap": Object {
+        "x": [MockFunction],
+        "y": [MockFunction],
+      },
+    }
+  }
+  xBand={[Function]}
+/>
+`;
+
+exports[`BarChart snapshot renders without graphProps 1`] = `
+<Bars
+  className="className"
+  classes={Object {}}
+  xBand={[Function]}
+/>
+`;

package/src/bars/__tests__/__snapshots__/histogram.test.jsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HistogramChart snapshot renders 1`] = `
+<Bars
+  className="className"
+  classes={Object {}}
+  graphProps={
+    Object {
+      "domain": Object {
+        "max": 1,
+        "min": 0,
+        "step": 1,
+      },
+      "range": Object {
+        "max": 1,
+        "min": 0,
+        "step": 1,
+      },
+      "scale": Object {
+        "x": [MockFunction],
+        "y": [MockFunction],
+      },
+      "size": Object {
+        "height": 400,
+        "width": 400,
+      },
+      "snap": Object {
+        "x": [MockFunction],
+        "y": [MockFunction],
+      },
+    }
+  }
+  histogram={true}
+  xBand={[Function]}
+/>
+`;
+
+exports[`HistogramChart snapshot renders without graphProps 1`] = `
+<Bars
+  className="className"
+  classes={Object {}}
+  histogram={true}
+  xBand={[Function]}
+/>
+`;

package/src/bars/__tests__/bar.test.jsx

@@ -0,0 +1,37 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Bar, { Bar as BarChart } from '../bar';
+import { graphProps } from './utils';
+
+describe('BarChart', () => {
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+      xBand: () => {
+        return {
+          bandwidth: () => {},
+        };
+      },
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<BarChart {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => expect(wrapper()).toMatchSnapshot());
+
+    it('renders without graphProps', () => expect(wrapper({ graphProps: undefined })).toMatchSnapshot());
+  });
+
+  describe('component', () => {
+    const chart = Bar();
+
+    expect(chart).toEqual({
+      type: 'bar',
+      Component: BarChart,
+      name: 'Bar',
+    });
+  });
+});

package/src/bars/__tests__/histogram.test.jsx

@@ -0,0 +1,38 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Histogram, { Histogram as HistogramChart } from '../histogram';
+import { graphProps } from './utils';
+import { Bar as BarChart } from '../bar';
+
+describe('HistogramChart', () => {
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+      xBand: () => {
+        return {
+          bandwidth: () => {},
+        };
+      },
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<HistogramChart {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => expect(wrapper()).toMatchSnapshot());
+
+    it('renders without graphProps', () => expect(wrapper({ graphProps: undefined })).toMatchSnapshot());
+  });
+
+  describe('component', () => {
+    const chart = Histogram();
+
+    expect(chart).toEqual({
+      type: 'histogram',
+      Component: HistogramChart,
+      name: 'Histogram',
+    });
+  });
+});

package/src/bars/__tests__/utils.js

@@ -0,0 +1,30 @@
+export const scaleMock = () => {
+  const fn = jest.fn((n) => n);
+  fn.invert = jest.fn((n) => n);
+  return fn;
+};
+
+export const graphProps = (dmin = 0, dmax = 1, rmin = 0, rmax = 1) => ({
+  scale: {
+    x: scaleMock(),
+    y: scaleMock(),
+  },
+  snap: {
+    x: jest.fn((n) => n),
+    y: jest.fn((n) => n),
+  },
+  domain: {
+    min: dmin,
+    max: dmax,
+    step: 1,
+  },
+  range: {
+    min: rmin,
+    max: rmax,
+    step: 1,
+  },
+  size: {
+    width: 400,
+    height: 400,
+  },
+});

package/src/bars/common/__tests__/__snapshots__/bars.test.jsx.snap

@@ -0,0 +1,110 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Bars snapshot renders 1`] = `
+<t>
+  <WithStyles(RawBar)
+    graphProps={
+      Object {
+        "domain": Object {
+          "max": 1,
+          "min": 0,
+          "step": 1,
+        },
+        "range": Object {
+          "max": 1,
+          "min": 0,
+          "step": 1,
+        },
+        "scale": Object {
+          "x": [MockFunction],
+          "y": [MockFunction],
+        },
+        "size": Object {
+          "height": 400,
+          "width": 400,
+        },
+        "snap": Object {
+          "x": [MockFunction],
+          "y": [MockFunction],
+        },
+      }
+    }
+    index={0}
+    key="bar-0-0-0"
+    label="0"
+    onChangeCategory={[Function]}
+    value={0}
+    xBand={[Function]}
+  />
+</t>
+`;
+
+exports[`RawBar snapshot renders 1`] = `
+<g
+  onMouseEnter={[Function]}
+  onMouseLeave={[Function]}
+  onTouchEnd={[Function]}
+  onTouchStart={[Function]}
+>
+  <P
+    height={NaN}
+    style={
+      Object {
+        "fill": null,
+      }
+    }
+    y={NaN}
+  />
+  <WithStyles(RawDragHandle)
+    color={null}
+    graphProps={
+      Object {
+        "domain": Object {
+          "max": 1,
+          "min": 0,
+          "step": 1,
+        },
+        "range": Object {
+          "max": 1,
+          "min": 0,
+          "step": 1,
+        },
+        "scale": Object {
+          "x": [MockFunction],
+          "y": [MockFunction] {
+            "calls": Array [
+              Array [
+                NaN,
+              ],
+              Array [
+                NaN,
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": NaN,
+              },
+              Object {
+                "type": "return",
+                "value": NaN,
+              },
+            ],
+          },
+        },
+        "size": Object {
+          "height": 400,
+          "width": 400,
+        },
+        "snap": Object {
+          "x": [MockFunction],
+          "y": [MockFunction],
+        },
+      }
+    }
+    isHovered={false}
+    onDrag={[Function]}
+    onDragStop={[Function]}
+  />
+</g>
+`;

package/src/bars/common/__tests__/bars.test.jsx

@@ -0,0 +1,69 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Bars, { RawBar } from '../bars';
+import { graphProps } from './utils';
+
+describe('Bars', () => {
+  const xBand = () => {};
+  xBand.bandwidth = () => {};
+  const onChange = jest.fn();
+
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+      xBand,
+      onChange,
+      data: [{ value: 0, label: '0' }],
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<Bars {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => expect(wrapper()).toMatchSnapshot());
+  });
+});
+
+describe('RawBar', () => {
+  const xBand = () => {};
+  xBand.bandwidth = () => {};
+  const onChangeCategory = jest.fn();
+
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+      xBand,
+      onChangeCategory,
+      data: [],
+      label: 'label',
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<RawBar {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => expect(wrapper()).toMatchSnapshot());
+  });
+
+  describe('logic', () => {
+    const w = wrapper();
+
+    it('dragStop', () => {
+      w.instance().dragStop();
+
+      expect(onChangeCategory).not.toHaveBeenCalled();
+
+      w.instance().setState({
+        dragValue: 2,
+      });
+
+      w.instance().dragStop(0);
+
+      expect(onChangeCategory).toHaveBeenCalledWith({ label: 'label', value: 2 });
+    });
+  });
+});