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

package/src/common/correctness-indicators.jsx

@@ -0,0 +1,55 @@
+import React from 'react';
+import classNames from 'classnames';
+import Check from '@material-ui/icons/Check';
+import Close from '@material-ui/icons/Close';
+
+export const CorrectnessIndicator = ({ scale, x, y, classes, r, correctness, interactive }) => {
+  if (!correctness || !interactive) return null;
+  const cx = scale ? scale.x(x) : x;
+  const cy = scale ? scale.y(y) : y;
+  const isCorrect = correctness.value === 'correct';
+  const iconClass = isCorrect ? classes.correctIcon : classes.incorrectIcon;
+
+  // the icon is 16px + 2px padding + 1px border, so total size is 22px
+  return (
+    <foreignObject x={cx - 11} y={cy - 11} width={22} height={22}>
+      {isCorrect ? (
+        <Check className={classNames(classes.correctnessIcon, iconClass)} title={correctness.label} />
+      ) : (
+        <Close className={classNames(classes.correctnessIcon, iconClass)} title={correctness.label} />
+      )}
+    </foreignObject>
+  );
+};
+
+export const SmallCorrectPointIndicator = ({ scale, x, r, correctness, classes, correctData, label }) => {
+  if (correctness && correctness.value === 'incorrect') {
+    const correctVal = parseFloat(correctData.find((d) => d.label === label)?.value);
+    if (isNaN(correctVal)) return null;
+    const correctPxY = scale.y(correctVal);
+    const yToRender = correctPxY - 7.5;
+    const xToRender = scale.x(x) - 7.5;
+
+    // small circle has 10px font + 2px padding + 1px border, so total size is 15px
+    return (
+      <foreignObject x={xToRender} y={yToRender} width={15} height={15}>
+        <Check
+          className={classNames(classes.correctnessIcon, classes.correctIcon, classes.smallIcon)}
+          title={correctness.label}
+        />
+      </foreignObject>
+    );
+  }
+
+  return null;
+};
+
+export const TickCorrectnessIndicator = ({ classes, correctness, interactive }) => {
+  if (!correctness || !interactive) return null;
+
+  return correctness.value === 'correct' ? (
+    <Check className={classNames(classes.correctnessIcon, classes.correctIcon)} title={correctness.label} />
+  ) : (
+    <Close className={classNames(classes.correctnessIcon, classes.incorrectIcon)} title={correctness.label} />
+  );
+};

package/src/common/drag-handle.jsx

@@ -2,8 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
+import Check from '@material-ui/icons/Check';
+import Close from '@material-ui/icons/Close';
+
 import { gridDraggable, utils, types } from '@pie-lib/plot';
-import { color } from '@pie-lib/render-ui';
+import { color as enumColor } from '@pie-lib/render-ui';
 import { correct, incorrect, disabled } from './styles';
 import { getScale } from '../utils';
 import DragIcon from './drag-icon';
@@ -20,21 +23,28 @@ const RawDragHandle = ({
   isHovered,
   correctness,
   color,
+  isPlot,
   ...rest
 }) => {
   const { scale } = graphProps;
   const scaleValue = getScale(width)?.scale;
 
   return (
-    <svg x={x} y={scale.y(y) - 10} width={width} overflow="visible">
-      {isHovered && !correctness && interactive && <DragIcon width={width} scaleValue={scaleValue} color={color} />}
-      <circle
-        cx={width / 2}
-        cy={10}
-        r={width / 2}
-        className={classNames(classes.transparentHandle, className)}
-        {...rest}
-      />
+    <svg x={x} y={scale.y(y) - 10} width={width} overflow="visible" className={classes.svgOverflowVisible}>
+      {isHovered && !correctness && interactive && (
+        <DragIcon width={width} scaleValue={scaleValue} color={enumColor.defaults.BORDER_GRAY} classes={classes} />
+      )}
+      {interactive && !correctness && (
+        <ellipse
+          cx={width / 2}
+          cy={10}
+          rx={width / 2}
+          // the drag icon has a 22px fixed r value, so the ry value is 3 times that in order to cover all the area
+          ry={66}
+          className={classNames(classes.transparentHandle, className)}
+          {...rest}
+        />
+      )}
 
       <defs>
         <filter id="bottomShadow" x="0" y="0" width="140%" height="140%">
@@ -49,20 +59,14 @@ const RawDragHandle = ({
         </filter>
       </defs>
 
-      {correctness && (
-        <rect
-          y={10}
-          width={width}
-          filter="url(#bottomShadow)"
-          className={classNames(
-            classes.handle,
-            'handle',
-            className,
-            !interactive && 'non-interactive',
-            interactive && correctness && correctness.value,
+      {correctness && interactive && !isPlot && (
+        <foreignObject x={width / 2 - 14} y={0} width={40} height={40}>
+          {correctness.value === 'correct' ? (
+            <Check className={classNames(classes.correctnessIcon, classes.correctIcon)} title={correctness.label} />
+          ) : (
+            <Close className={classNames(classes.correctnessIcon, classes.incorrectIcon)} title={correctness.label} />
           )}
-          {...rest}
-        />
+        </foreignObject>
       )}
     </svg>
   );
@@ -84,7 +88,7 @@ RawDragHandle.propTypes = {
   color: PropTypes.string,
 };
 
-export const DragHandle = withStyles(() => ({
+export const DragHandle = withStyles((theme) => ({
   handle: {
     height: '10px',
     fill: 'transparent',
@@ -94,7 +98,6 @@ export const DragHandle = withStyles(() => ({
     '&.non-interactive': disabled('fill'),
   },
   transparentHandle: {
-    height: '20px',
     fill: 'transparent',
     clipPath: 'polygon(50% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 0%)',
   },
@@ -102,7 +105,7 @@ export const DragHandle = withStyles(() => ({
     height: 30,
     '&:hover': {
       '& .handle': {
-        fill: color.secondaryDark(),
+        fill: enumColor.secondaryDark(),
         height: '16px',
       },
     },
@@ -110,6 +113,25 @@ export const DragHandle = withStyles(() => ({
     '&.incorrect': incorrect('fill'),
     '&.correct': correct('fill'),
   },
+  svgOverflowVisible: {
+    overflow: 'visible !important',
+  },
+  correctIcon: {
+    backgroundColor: enumColor.correct(),
+  },
+  incorrectIcon: {
+    backgroundColor: enumColor.incorrectWithIcon(),
+  },
+  correctnessIcon: {
+    borderRadius: theme.spacing.unit * 2,
+    color: enumColor.defaults.WHITE,
+    fontSize: '16px',
+    padding: '2px',
+    border: `4px solid ${enumColor.defaults.WHITE}`,
+    width: '16px',
+    height: '16px',
+    boxSizing: 'unset', // to override the default border-box in IBX
+  },
 }))(RawDragHandle);
 
 export const D = gridDraggable({

package/src/common/drag-icon.jsx

@@ -1,33 +1,18 @@
 import React from 'react';
 import { getAdjustedX, getScale } from '../utils';
 
-const DragIcon = ({ width, scaleValue, color }) => (
+const DragIcon = ({ width, scaleValue, color, classes }) => (
   <svg
     x={getAdjustedX(width, scaleValue)}
     y={getScale(width)?.deltay}
     color={color}
+    width={width}
+    height={width}
     overflow="visible"
-    filter="url(#svgDropShadow)"
+    viewBox={`0 0 ${width} ${width}`}
+    className={classes.svgOverflowVisible}
   >
-    <defs>
-      <filter id="svgDropShadow" x="-20%" y="-20%" width="140%" height="140%">
-        <feGaussianBlur in="SourceAlpha" stdDeviation="3" />
-        <feOffset dx="0" dy="5" result="offsetblur" />
-        <feFlood floodColor="#00000033" />
-        <feComposite in2="offsetblur" operator="in" />
-        <feMerge>
-          <feMergeNode />
-          <feMergeNode in="SourceGraphic" />
-        </feMerge>
-      </filter>
-    </defs>
-    <g
-      xmlns="http://www.w3.org/2000/svg"
-      filter="url(#filter0_d_2312_1804)"
-      fill="currentColor"
-      stroke="currentColor"
-      transform={`scale(${scaleValue})`}
-    >
+    <g xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor" transform={`scale(${scaleValue})`}>
       <circle cx="28.5" cy="23.5" r="22" fill="white" stroke="currentColor" />
       <path
         d="M33.5 21.25H23.4609C22.7578 21.25 22.4062 20.4297 22.9141 19.9219L27.9141 14.9219C28.2266 14.6094 28.7344 14.6094 29.0469 14.9219L34.0469 19.9219C34.5547 20.4297 34.2031 21.25 33.5 21.25Z"

package/src/grid.jsx

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
+import { GridRows, GridColumns } from '@vx/grid';
 
-import { Grid as VxGrid } from '@vx/grid';
 import { types } from '@pie-lib/plot';
 import { color } from '@pie-lib/render-ui';
 
@@ -21,19 +21,44 @@ export class Grid extends React.Component {
 
   render() {
     const { classes, className, graphProps, xBand, rowTickValues, columnTickValues } = this.props;
-    const { scale = {}, size = {} } = graphProps || {};
+    const { scale = {}, size = {}, range = {} } = graphProps || {};
+    const { step = 0, labelStep = 0 } = range;
+    const highlightNonLabel = step && labelStep && step < labelStep;
+    // if highlightNonLabel is true, we need to separate the unlabled lines in order to render them in a different color
+    const { unlabeledLines, labeledLines } = (rowTickValues || []).reduce(
+      (acc, value) => {
+        if (highlightNonLabel && value % labelStep !== 0) {
+          acc.unlabeledLines.push(value);
+        } else {
+          acc.labeledLines.push(value);
+        }
+        return acc;
+      },
+      { unlabeledLines: [], labeledLines: [] },
+    );
 
     return (
-      <VxGrid
-        xScale={xBand}
-        yScale={scale.y}
-        className={classNames(classes.grid, className)}
-        width={size.width}
-        height={size.height}
-        xOffset={xBand.bandwidth() / 2}
-        rowTickValues={rowTickValues}
-        columnTickValues={columnTickValues}
-      />
+      <g className={classNames(classes.grid, className)}>
+        <GridRows
+          scale={scale.y}
+          width={size.width}
+          tickValues={unlabeledLines}
+          lineStyle={{
+            stroke: color.fadedPrimary(),
+            strokeWidth: 1,
+          }}
+        />
+        <GridRows
+          scale={scale.y}
+          width={size.width}
+          tickValues={labeledLines}
+          lineStyle={{
+            stroke: color.visualElementsColors.GRIDLINES_COLOR,
+            strokeWidth: 1,
+          }}
+        />
+        <GridColumns scale={xBand} height={size.height} offset={xBand.bandwidth() / 2} tickValues={columnTickValues} />
+      </g>
     );
   }
 }

package/src/index.js

@@ -2,5 +2,6 @@ import Chart from './chart';
 import chartTypes from './chart-types';
 import ConfigureChartPanel from './chart-setup';
 import ChartType from './chart-type';
+import KeyLegend from './key-legend';
 
-export { Chart, chartTypes, ChartType, ConfigureChartPanel };
+export { Chart, chartTypes, ChartType, ConfigureChartPanel, KeyLegend };

package/src/key-legend.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Check from '@material-ui/icons/Check';
+import Close from '@material-ui/icons/Close';
+import { color } from '@pie-lib/render-ui';
+import Translator from '@pie-lib/translator';
+
+const styles = (theme) => ({
+  container: {
+    backgroundColor: color.defaults.WHITE,
+    padding: theme.spacing.unit * 2,
+    width: '355px',
+    boxShadow: 'inset 0px 1px 5px 0px #9297A6',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px',
+  },
+  row: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+  },
+  title: {
+    fontSize: theme.typography.h6.fontSize,
+    fontWeight: '700',
+  },
+  smallText: {
+    marginLeft: '2px',
+  },
+  correctIcon: {
+    backgroundColor: color.correct(),
+    borderRadius: theme.spacing.unit * 2,
+    color: color.defaults.WHITE,
+  },
+  incorrectIcon: {
+    backgroundColor: color.incorrectWithIcon(),
+    borderRadius: theme.spacing.unit * 2,
+    color: color.defaults.WHITE,
+  },
+
+  lastRow: {
+    marginLeft: '3px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+  },
+});
+
+const { translator } = Translator;
+
+const KeyLegend = ({ classes, language }) => (
+  <div className={classes.container}>
+    <div className={classes.title}>Key</div>
+    <div className={classes.row}>
+      <Close className={classes.incorrectIcon} />
+      <div className={classes.text}>{translator.t('charting.keyLegend.incorrectAnswer', { lng: language })}</div>
+    </div>
+    <div className={classes.row}>
+      <Check className={classes.correctIcon} />
+      <div className={classes.text}>{translator.t('charting.keyLegend.correctAnswer', { lng: language })}</div>
+    </div>
+    <div className={classes.lastRow}>
+      <Check className={classes.correctIcon} fontSize={'small'} />
+      <div className={classes.smallText}>{translator.t('charting.keyLegend.correctKeyAnswer', { lng: language })}</div>
+    </div>
+  </div>
+);
+
+KeyLegend.propTypes = {
+  classes: PropTypes.object.isRequired,
+  language: PropTypes.string,
+};
+
+export default withStyles(styles)(KeyLegend);

package/src/line/__tests__/__snapshots__/line-cross.test.jsx.snap

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

package/src/line/__tests__/__snapshots__/line-dot.test.jsx.snap

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

package/src/line/__tests__/line-cross.test.jsx

@@ -0,0 +1,38 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Line, { LineCross as LineChart } from '../line-cross';
+import { graphProps } from './utils';
+import { Bar as BarChart } from '../../bars/bar';
+
+describe('LineChart', () => {
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+      xBand: () => {
+        return {
+          bandwidth: () => {},
+        };
+      },
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<LineChart {...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: 'lineCross',
+      Component: LineChart,
+      name: 'Line Cross',
+    });
+  });
+});

package/src/line/__tests__/line-dot.test.jsx

@@ -0,0 +1,38 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import Line, { LineDot as LineChart } from '../line-dot';
+import { graphProps } from './utils';
+import { Bar as BarChart } from '../../bars/bar';
+
+describe('LineChart', () => {
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: graphProps(),
+      xBand: () => {
+        return {
+          bandwidth: () => {},
+        };
+      },
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<LineChart {...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: 'lineDot',
+      Component: LineChart,
+      name: 'Line Dot',
+    });
+  });
+});

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

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BasePoint snapshot renders 1`] = `
+<RawDragHandle
+  className="className"
+  classes={
+    Object {
+      "correctIcon": "RawDragHandle-correctIcon-5",
+      "correctnessIcon": "RawDragHandle-correctnessIcon-7",
+      "disabledPoint": "RawDragHandle-disabledPoint-4",
+      "handle": "RawDragHandle-handle-1",
+      "incorrectIcon": "RawDragHandle-incorrectIcon-6",
+      "line": "RawDragHandle-line-3",
+      "smallIcon": "RawDragHandle-smallIcon-8",
+      "transparentHandle": "RawDragHandle-transparentHandle-2",
+    }
+  }
+  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],
+      },
+    }
+  }
+  onChange={[MockFunction]}
+  width={100}
+  x={0}
+  y={0}
+/>
+`;