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

package/src/mark-label.jsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 import AutosizeInput from 'react-input-autosize';
 import PropTypes from 'prop-types';
+
 import { types } from '@pie-lib/plot';
 import { correct, incorrect, disabled } from './common/styles';
 import { color } from '@pie-lib/render-ui';
@@ -14,11 +15,9 @@ const styles = (theme) => ({
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.fontSize,
     border: 'none',
-    color: color.primaryDark(),
     '&.correct': correct('color'),
     '&.incorrect': incorrect('color'),
     '&.disabled': {
-      ...disabled('color'),
       backgroundColor: 'transparent !important',
     },
     '&.error': { border: `2px solid ${theme.palette.error.main}` },
@@ -26,9 +25,10 @@ const styles = (theme) => ({
   mathInput: {
     pointerEvents: 'auto',
     textAlign: 'center',
-    fontSize: theme.typography.fontSize,
+    fontSize: theme.typography.fontSize + 2,
     fontFamily: theme.typography.fontFamily,
     color: color.primaryDark(),
+    paddingTop: theme.typography.fontSize / 2,
   },
   disabled: {
     ...disabled('color'),
@@ -43,6 +43,11 @@ const styles = (theme) => ({
   incorrect: {
     ...incorrect('color'),
   },
+  flexContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+  },
 });
 
 function isFractionFormat(label) {
@@ -88,6 +93,9 @@ export const MarkLabel = (props) => {
     correctness,
     autoFocus,
     error,
+    isHiddenLabel,
+    limitCharacters,
+    correctnessIndicator,
   } = props;
 
   const [label, setLabel] = useState(mark.label);
@@ -96,6 +104,10 @@ export const MarkLabel = (props) => {
   let root = useRef(null);
 
   const onChange = (e) => {
+    if (limitCharacters && e.target.value && e.target.value.length > 20) {
+      return;
+    }
+
     setLabel(e.target.value);
   };
 
@@ -126,55 +138,72 @@ export const MarkLabel = (props) => {
     renderMath(root);
   }, []);
 
-  return isMathRendering() ? (
-    <div
-      ref={(r) => (root = r)}
-      dangerouslySetInnerHTML={{ __html: getLabelMathFormat(label) }}
-      className={classNames(classes.mathInput, {
-        [classes.disabled]: disabled,
-        [classes.error]: error,
-        [classes.correct]: correctness && correctness.label === 'correct',
-        [classes.incorrect]: correctness && correctness.label === 'incorrect',
-      })}
-      onClick={() => setIsEditing(true)}
-      style={{ minWidth: barWidth }}
-    ></div>
-  ) : (
-    <AutosizeInput
-      inputRef={(r) => {
-        _ref(r);
-        externalInputRef(r);
-      }}
-      autoFocus={isEditing || autoFocus}
-      disabled={disabled}
-      inputClassName={classNames(
-        classes.input,
-        correctness && correctness.label,
-        disabled && 'disabled',
-        error && 'error',
+  return (
+    <div className={classes.flexContainer}>
+      {correctnessIndicator}
+      {isMathRendering() ? (
+        <div
+          ref={(r) => {
+            root = r;
+            externalInputRef(r);
+          }}
+          dangerouslySetInnerHTML={{ __html: getLabelMathFormat(label) }}
+          className={classNames(classes.mathInput, {
+            [classes.disabled]: disabled,
+            [classes.error]: error,
+            [classes.correct]: mark.editable && correctness?.label === 'correct',
+            [classes.incorrect]: mark.editable && correctness?.label === 'incorrect',
+          })}
+          onClick={() => setIsEditing(true)}
+          style={{
+            minWidth: barWidth,
+            position: 'fixed',
+            transformOrigin: 'left',
+            transform: `rotate(${rotate}deg)`,
+            visibility: isHiddenLabel ? 'hidden' : 'unset',
+            marginTop: correctnessIndicator ? '24px' : '0',
+          }}
+        ></div>
+      ) : (
+        <AutosizeInput
+          inputRef={(r) => {
+            _ref(r);
+            externalInputRef(r);
+          }}
+          autoFocus={isEditing || autoFocus}
+          disabled={disabled}
+          inputClassName={classNames(
+            classes.input,
+            correctness && mark.editable ? correctness.label : null,
+            disabled && 'disabled',
+            error && 'error',
+          )}
+          inputStyle={{
+            minWidth: barWidth,
+            textAlign: 'center',
+            background: 'transparent',
+            boxSizing: 'border-box',
+            paddingLeft: 0,
+            paddingRight: 0,
+            ...extraStyle,
+          }}
+          value={label}
+          style={{
+            position: 'fixed',
+            pointerEvents: 'auto',
+            top: 0,
+            left: 0,
+            minWidth: barWidth,
+            transformOrigin: 'left',
+            transform: `rotate(${rotate}deg)`,
+            visibility: isHiddenLabel ? 'hidden' : 'unset',
+            marginTop: correctnessIndicator ? '24px' : '0',
+          }}
+          onChange={onChange}
+          onBlur={onChangeProp}
+        />
       )}
-      inputStyle={{
-        minWidth: barWidth,
-        textAlign: 'center',
-        background: 'transparent',
-        boxSizing: 'border-box',
-        paddingLeft: 0,
-        paddingRight: 0,
-        ...extraStyle,
-      }}
-      value={label}
-      style={{
-        position: 'fixed',
-        pointerEvents: 'auto',
-        top: 0,
-        left: 0,
-        minWidth: barWidth,
-        transformOrigin: 'left',
-        transform: `rotate(${rotate}deg)`,
-      }}
-      onChange={onChange}
-      onBlur={onChangeProp}
-    />
+    </div>
   );
 };
 
@@ -193,6 +222,9 @@ MarkLabel.propTypes = {
     value: PropTypes.string,
     label: PropTypes.string,
   }),
+  isHiddenLabel: PropTypes.bool,
+  limitCharacters: PropTypes.bool,
+  correctnessIndicator: PropTypes.node,
 };
 
 export default withStyles(styles)(MarkLabel);

package/src/plot/__tests__/__snapshots__/dot.test.jsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DotPlot snapshot renders 1`] = `
+<Plot
+  CustomBarElement={[Function]}
+  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[`DotPlot snapshot renders without graphProps 1`] = `
+<Plot
+  CustomBarElement={[Function]}
+  className="className"
+  classes={Object {}}
+  xBand={[Function]}
+/>
+`;

package/src/plot/__tests__/__snapshots__/line.test.jsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LinePlot snapshot renders 1`] = `
+<Plot
+  CustomBarElement={[Function]}
+  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[`LinePlot snapshot renders without graphProps 1`] = `
+<Plot
+  CustomBarElement={[Function]}
+  className="className"
+  classes={Object {}}
+  xBand={[Function]}
+/>
+`;

package/src/plot/__tests__/dot.test.jsx

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

package/src/plot/__tests__/line.test.jsx

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

package/src/plot/__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/plot/common/__tests__/__snapshots__/plot.test.jsx.snap

@@ -0,0 +1,97 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Plot snapshot renders 1`] = `
+<t>
+  <WithStyles(RawPlot)
+    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[`RawPlot snapshot renders 1`] = `
+<Fragment>
+  <g
+    onMouseEnter={[Function]}
+    onMouseLeave={[Function]}
+    onTouchEnd={[Function]}
+    onTouchStart={[Function]}
+  >
+    <WithStyles(RawDragHandle)
+      color="var(--pie-primary-dark, #283593)"
+      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,
+                ],
+              ],
+              "results": Array [
+                Object {
+                  "type": "return",
+                  "value": NaN,
+                },
+              ],
+            },
+          },
+          "size": Object {
+            "height": 400,
+            "width": 400,
+          },
+          "snap": Object {
+            "x": [MockFunction],
+            "y": [MockFunction],
+          },
+        }
+      }
+      isHovered={false}
+      isPlot={true}
+      onDrag={[Function]}
+      onDragStop={[Function]}
+    />
+  </g>
+</Fragment>
+`;

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

@@ -0,0 +1,70 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Plot, { RawPlot } from '../plot';
+import { graphProps } from './utils';
+
+describe('Plot', () => {
+  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(<Plot {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => expect(wrapper()).toMatchSnapshot());
+  });
+});
+
+describe('RawPlot', () => {
+  const xBand = () => {};
+  xBand.bandwidth = () => {};
+  const onChangeCategory = jest.fn();
+
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+      xBand,
+      onChangeCategory,
+      data: [],
+      label: 'label',
+      CustomBarElement: () => <div />,
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<RawPlot {...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();
+
+      expect(onChangeCategory).toHaveBeenCalledWith({ label: 'label', value: 2 });
+    });
+  });
+});

package/src/plot/common/__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,
+  },
+});