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

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

package/src/bars/common/bars.jsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { types } from '@pie-lib/plot';
 import { Group } from '@vx/group';
-import { color } from '@pie-lib/render-ui';
 import { Bar as VxBar } from '@vx/shape';
 import { withStyles } from '@material-ui/core/styles/index';
 import debug from 'debug';
+
+import { color } from '@pie-lib/render-ui';
+import { types } from '@pie-lib/plot';
 import { bandKey } from '../../utils';
 import DraggableHandle, { DragHandle } from '../../common/drag-handle';
+import { CorrectCheckIcon } from './correct-check-icon';
 
 const log = debug('pie-lib:chart:bars');
 const histogramColors = [
@@ -39,12 +41,12 @@ const hoverHistogramColors = [
   '#894A65',
 ];
 
-const calculateFillColor = (isHovered, barColor, index, hoverHistogramColors) => {
-  if (isHovered && barColor) {
+const calculateFillColor = (isHovered, barColor, index, hoverHistogramColors, allowRolloverEvent) => {
+  if (isHovered && barColor && allowRolloverEvent) {
     return hoverHistogramColors[index % hoverHistogramColors.length];
   }
-  if (isHovered) {
-    return color.primaryDark();
+  if (isHovered && allowRolloverEvent) {
+    return color.visualElementsColors.ROLLOVER_FILL_BAR_COLOR;
   }
   return barColor || null;
 };
@@ -64,6 +66,7 @@ export class RawBar extends React.Component {
       value: PropTypes.string,
       label: PropTypes.string,
     }),
+    correctData: PropTypes.array,
   };
 
   constructor(props) {
@@ -72,8 +75,38 @@ export class RawBar extends React.Component {
       dragValue: undefined,
       isHovered: false,
     };
+    this.mouseX = 0;
+    this.mouseY = 0;
+  }
+
+  componentDidMount() {
+    window.addEventListener('mousemove', this.handleMouseMove);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('mousemove', this.handleMouseMove);
   }
 
+  handleMouseMove = (e) => {
+    // Update mouse position
+    this.mouseX = e.clientX;
+    this.mouseY = e.clientY;
+    // Check if the mouse is inside the <g> element
+    const isMouseInside = this.isMouseInsideSvgElement();
+    this.setState({ isHovered: isMouseInside });
+  };
+
+  isMouseInsideSvgElement = () => {
+    const gBoundingBox = this.gRef.getBoundingClientRect();
+    // Check if the mouse position is within the bounding box
+    return (
+      this.mouseX >= gBoundingBox.left &&
+      this.mouseX <= gBoundingBox.right &&
+      this.mouseY >= gBoundingBox.top &&
+      this.mouseY <= gBoundingBox.bottom
+    );
+  };
+
   handleMouseEnter = () => {
     this.setState({ isHovered: true });
   };
@@ -114,23 +147,33 @@ export class RawBar extends React.Component {
       correctness,
       barColor,
       defineChart,
+      correctData,
     } = this.props;
     const { scale, range } = graphProps;
     const { dragValue, isHovered } = this.state;
 
-    const fillColor = calculateFillColor(isHovered, barColor, index, hoverHistogramColors);
+    const allowRolloverEvent = interactive && !correctness;
+    const fillColor = calculateFillColor(isHovered, barColor, index, hoverHistogramColors, allowRolloverEvent);
     const v = Number.isFinite(dragValue) ? dragValue : value;
     const barWidth = xBand.bandwidth();
     const barHeight = scale.y(range.max - v);
     const barX = xBand(bandKey({ label }, index));
     const rawY = range.max - v;
     const yy = range.max - rawY;
+    const correctValue = correctData ? correctData.find((d) => d.label === label) : null;
     log('label:', label, 'barX:', barX, 'v: ', v, 'barHeight:', barHeight, 'barWidth: ', barWidth);
 
     const Component = interactive ? DraggableHandle : DragHandle;
+    const isHistogram = !!barColor;
 
     return (
-      <g onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+      <g
+        ref={(ref) => (this.gRef = ref)}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
+        onTouchStart={this.handleMouseEnter}
+        onTouchEnd={this.handleMouseLeave}
+      >
         <VxBar
           x={barX}
           y={scale.y(yy)}
@@ -139,6 +182,40 @@ export class RawBar extends React.Component {
           className={classes.bar}
           style={{ fill: fillColor }}
         />
+        {correctness &&
+          correctness.value === 'incorrect' &&
+          (() => {
+            const correctVal = parseFloat(correctValue && correctValue.value);
+            if (isNaN(correctVal)) return null;
+            const correctPxHeight = scale.y(range.max - correctVal);
+            const actualPxHeight = barHeight;
+            const diffPx = Math.abs(correctPxHeight - actualPxHeight);
+            const yDiff = scale.y(correctVal);
+            const indicatorBarColor = correctPxHeight > actualPxHeight ? color.borderGray() : color.defaults.WHITE;
+            const yToRender = correctPxHeight > actualPxHeight ? yDiff : yDiff - diffPx;
+
+            return (
+              <>
+                <VxBar
+                  x={barX + 2} // add 2px for the stroke (the dashed border)
+                  y={yToRender}
+                  width={barWidth - 4} // substract 4px for the total stroke
+                  height={diffPx}
+                  className={classes.bar}
+                  style={{
+                    stroke: indicatorBarColor,
+                    strokeWidth: 2,
+                    strokeDasharray: '5,2',
+                    fill: 'none',
+                  }}
+                />
+                {/* adjust the position based on whether it's a histogram or not, because the histogram does not have space for the icon on the side */}
+                <foreignObject x={barX + barWidth - (isHistogram ? 24 : 14)} y={yDiff - 12} width={24} height={24}>
+                  <CorrectCheckIcon dashColor={indicatorBarColor} />
+                </foreignObject>
+              </>
+            );
+          })()}
         <Component
           x={barX}
           y={v}
@@ -157,18 +234,27 @@ export class RawBar extends React.Component {
   }
 }
 
-const Bar = withStyles(() => ({
+const Bar = withStyles((theme) => ({
   bar: {
-    fill: color.primaryLight(),
-    '&:hover': {
-      fill: color.primaryDark(),
-    },
+    fill: color.defaults.TERTIARY,
+  },
+  correctIcon: {
+    backgroundColor: color.correct(),
+    borderRadius: theme.spacing.unit * 2,
+    color: color.defaults.WHITE,
+    fontSize: '10px',
+    width: '10px',
+    height: '10px',
+    padding: '2px',
+    border: `1px solid ${color.defaults.WHITE}`,
+    boxSizing: 'unset', // to override the default border-box in IBX
   },
 }))(RawBar);
 
 export class Bars extends React.Component {
   static propTypes = {
     data: PropTypes.array,
+    correctData: PropTypes.array,
     onChangeCategory: PropTypes.func,
     defineChart: PropTypes.bool,
     xBand: PropTypes.func,
@@ -177,7 +263,7 @@ export class Bars extends React.Component {
   };
 
   render() {
-    const { data, graphProps, xBand, onChangeCategory, defineChart, histogram } = this.props;
+    const { data, graphProps, xBand, onChangeCategory, defineChart, histogram, correctData } = this.props;
 
     return (
       <Group>
@@ -193,6 +279,7 @@ export class Bars extends React.Component {
             onChangeCategory={(category) => onChangeCategory(index, category)}
             graphProps={graphProps}
             correctness={d.correctness}
+            correctData={correctData}
             barColor={
               histogram &&
               (histogramColors[index] ? histogramColors[index] : histogramColors[index % histogramColors.length])

package/src/bars/common/correct-check-icon.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export const CorrectCheckIcon = ({ dashColor }) => (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <circle cx="12" cy="12" r="11" fill="white" stroke={dashColor || '#7E8494'} strokeWidth="2" strokeDasharray="5 5" />
+    <mask id="path-2-outside-1_3089_3799" maskUnits="userSpaceOnUse" x="2" y="3" width="19" height="18" fill="black">
+      <rect fill="white" x="2" y="3" width="19" height="18" />
+      <path d="M12 20C9.125 20 6.5 18.5 5.0625 16C3.625 13.5312 3.625 10.5 5.0625 8C6.5 5.53125 9.125 4 12 4C14.8438 4 17.4688 5.53125 18.9062 8C20.3438 10.5 20.3438 13.5312 18.9062 16C17.4688 18.5 14.8438 20 12 20ZM15.5312 10.5312H15.5C15.8125 10.25 15.8125 9.78125 15.5 9.46875C15.2188 9.1875 14.75 9.1875 14.4688 9.46875L11 12.9688L9.53125 11.5C9.21875 11.1875 8.75 11.1875 8.46875 11.5C8.15625 11.7812 8.15625 12.25 8.46875 12.5312L10.4688 14.5312C10.75 14.8438 11.2188 14.8438 11.5312 14.5312L15.5312 10.5312Z" />
+    </mask>
+    <path
+      d="M12 20C9.125 20 6.5 18.5 5.0625 16C3.625 13.5312 3.625 10.5 5.0625 8C6.5 5.53125 9.125 4 12 4C14.8438 4 17.4688 5.53125 18.9062 8C20.3438 10.5 20.3438 13.5312 18.9062 16C17.4688 18.5 14.8438 20 12 20ZM15.5312 10.5312H15.5C15.8125 10.25 15.8125 9.78125 15.5 9.46875C15.2188 9.1875 14.75 9.1875 14.4688 9.46875L11 12.9688L9.53125 11.5C9.21875 11.1875 8.75 11.1875 8.46875 11.5C8.15625 11.7812 8.15625 12.25 8.46875 12.5312L10.4688 14.5312C10.75 14.8438 11.2188 14.8438 11.5312 14.5312L15.5312 10.5312Z"
+      fill="#0EA449"
+    />
+    <path
+      d="M5.0625 16L5.92942 15.5015L5.92668 15.4968L5.0625 16ZM5.0625 8L4.19831 7.4968L4.19559 7.50153L5.0625 8ZM18.9062 8L19.7732 7.50152L19.7704 7.49681L18.9062 8ZM18.9062 16L18.0421 15.4968L18.0393 15.5015L18.9062 16ZM15.5312 10.5312L16.2384 11.2384L17.9455 9.53125H15.5312V10.5312ZM15.5 10.5312L14.831 9.78796L12.894 11.5312H15.5V10.5312ZM14.4688 9.46875L13.7616 8.76164L13.7585 8.76482L14.4688 9.46875ZM11 12.9688L10.2929 13.6759L11.0032 14.3861L11.7103 13.6727L11 12.9688ZM8.46875 11.5L9.13771 12.2433L9.17684 12.2081L9.21204 12.169L8.46875 11.5ZM8.46875 12.5312L9.17586 11.8241L9.15726 11.8055L9.13771 11.788L8.46875 12.5312ZM10.4688 14.5312L11.212 13.8623L11.1945 13.8427L11.1759 13.8241L10.4688 14.5312ZM12 20V19C9.479 19 7.18657 17.6879 5.92941 15.5015L5.0625 16L4.19559 16.4985C5.81343 19.3121 8.771 21 12 21V20ZM5.0625 16L5.92668 15.4968C4.6714 13.341 4.66824 10.6918 5.92941 8.49847L5.0625 8L4.19559 7.50153C2.58176 10.3082 2.5786 13.7215 4.19832 16.5032L5.0625 16ZM5.0625 8L5.92668 8.50319C7.18712 6.33851 9.48502 5 12 5V4V3C8.76498 3 5.81288 4.72399 4.19832 7.49681L5.0625 8ZM12 4V5C14.4816 5 16.7805 6.33661 18.0421 8.50319L18.9062 8L19.7704 7.49681C18.157 4.72589 15.2059 3 12 3V4ZM18.9062 8L18.0393 8.49847C19.3005 10.6918 19.2973 13.341 18.0421 15.4968L18.9062 16L19.7704 16.5032C21.3902 13.7215 21.387 10.3082 19.7732 7.50153L18.9062 8ZM18.9062 16L18.0393 15.5015C16.7811 17.6898 14.4876 19 12 19V20V21C15.1999 21 18.1564 19.3102 19.7732 16.4985L18.9062 16ZM15.5312 10.5312V9.53125H15.5V10.5312V11.5312H15.5312V10.5312ZM15.5 10.5312L16.169 11.2745C16.9447 10.5764 16.8883 9.44281 16.2071 8.76164L15.5 9.46875L14.7929 10.1759C14.7696 10.1525 14.7344 10.0966 14.7344 10.0117C14.7344 9.92377 14.7735 9.83972 14.831 9.78796L15.5 10.5312ZM15.5 9.46875L16.2071 8.76164C15.5353 8.08987 14.4334 8.08987 13.7616 8.76164L14.4688 9.46875L15.1759 10.1759C15.1167 10.235 15.0442 10.2578 14.9844 10.2578C14.9245 10.2578 14.8521 10.235 14.7929 10.1759L15.5 9.46875ZM14.4688 9.46875L13.7585 8.76482L10.2897 12.2648L11 12.9688L11.7103 13.6727L15.179 10.1727L14.4688 9.46875ZM11 12.9688L11.7071 12.2616L10.2384 10.7929L9.53125 11.5L8.82414 12.2071L10.2929 13.6759L11 12.9688ZM9.53125 11.5L10.2384 10.7929C9.55719 10.1117 8.42362 10.0553 7.72546 10.831L8.46875 11.5L9.21204 12.169C9.16028 12.2265 9.07623 12.2656 8.98828 12.2656C8.90344 12.2656 8.84748 12.2304 8.82414 12.2071L9.53125 11.5ZM8.46875 11.5L7.79979 10.7567C7.04591 11.4352 7.04591 12.5961 7.79979 13.2745L8.46875 12.5312L9.13771 11.788C9.19301 11.8377 9.23438 11.9208 9.23438 12.0156C9.23438 12.1105 9.19301 12.1935 9.13771 12.2433L8.46875 11.5ZM8.46875 12.5312L7.76164 13.2384L9.76164 15.2384L10.4688 14.5312L11.1759 13.8241L9.17586 11.8241L8.46875 12.5312ZM10.4688 14.5312L9.72546 15.2002C10.4236 15.976 11.5572 15.9195 12.2384 15.2384L11.5312 14.5312L10.8241 13.8241C10.8475 13.8008 10.9034 13.7656 10.9883 13.7656C11.0762 13.7656 11.1603 13.8048 11.212 13.8623L10.4688 14.5312ZM11.5312 14.5312L12.2384 15.2384L16.2384 11.2384L15.5312 10.5312L14.8241 9.82414L10.8241 13.8241L11.5312 14.5312Z"
+      fill="white"
+      mask="url(#path-2-outside-1_3089_3799)"
+    />
+  </svg>
+);

package/src/chart-type.js

@@ -16,11 +16,15 @@ const ChartType = withStyles(() => ({
 }))(({ onChange, value, classes, availableChartTypes, chartTypeLabel }) => (
   <div className={classes.chartType}>
     <FormControl variant={'outlined'} className={classes.chartType}>
-      <InputLabel htmlFor="type-helper" className={classes.chartTypeLabel}>
+      <InputLabel id="type-helper-label" className={classes.chartTypeLabel}>
         {chartTypeLabel}
       </InputLabel>
-
-      <Select value={value} onChange={onChange} labelWidth={75} input={<OutlinedInput name="type" id="type-helper" />}>
+      <Select
+        labelId="type-helper-label"
+        value={value}
+        onChange={onChange}
+        input={<OutlinedInput labelWidth={75} name="type" />}
+      >
         {availableChartTypes?.histogram && <MenuItem value={'histogram'}>{availableChartTypes.histogram}</MenuItem>}
         {availableChartTypes?.bar && <MenuItem value={'bar'}>{availableChartTypes.bar}</MenuItem>}
         {availableChartTypes?.lineDot && <MenuItem value={'lineDot'}>{availableChartTypes.lineDot}</MenuItem>}

package/src/chart.jsx

@@ -2,16 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
-import { Root, createGraphProps } from '@pie-lib/plot';
+import debug from 'debug';
 import cloneDeep from 'lodash/cloneDeep';
+
+import { Root, createGraphProps } from '@pie-lib/plot';
+import { AlertDialog } from '@pie-lib/config-ui';
 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 ToolMenu from './tool-menu';
 import chartTypes from './chart-types';
-import { AlertDialog } from '@pie-lib/config-ui';
+import ActionsButton from './actions-button';
 import Translator from '@pie-lib/translator';
 
 const { translator } = Translator;
@@ -25,6 +25,7 @@ export class Chart extends React.Component {
       dialog: {
         open: false,
       },
+      actionsAnchorEl: null,
     };
     this.maskUid = this.generateMaskId();
   }
@@ -70,6 +71,14 @@ export class Chart extends React.Component {
     changeInteractiveEnabled: PropTypes.bool,
     changeEditableEnabled: PropTypes.bool,
     language: PropTypes.string,
+    mathMlOptions: PropTypes.object,
+    labelsCharactersLimit: PropTypes.number,
+    correctData: PropTypes.arrayOf(
+      PropTypes.shape({
+        label: PropTypes.string,
+        value: PropTypes.number,
+      }),
+    ),
   };
 
   static defaultProps = {
@@ -88,6 +97,7 @@ export class Chart extends React.Component {
       chartTypes.DotPlot(),
       chartTypes.LinePlot(),
     ],
+    autoFocus: false,
   };
 
   generateMaskId() {
@@ -156,11 +166,11 @@ export class Chart extends React.Component {
         },
       });
     } else {
+      this.setState({ autoFocus: true });
       onDataChange([
         ...data,
         {
           inDefineChart: defineChart,
-          autoFocus: true,
           label: categoryDefaultLabel || translator.t('charting.newLabel', { lng: language }),
           value: 0,
           deletable: true,
@@ -171,6 +181,18 @@ export class Chart extends React.Component {
     }
   };
 
+  deleteCategory = (index) => {
+    const { data, onDataChange } = this.props;
+
+    if (typeof index !== 'number' || index < 0) {
+      return;
+    }
+
+    if (data && data.length > 0) {
+      onDataChange(data.filter((_, i) => i !== index));
+    }
+  };
+
   getFilteredCategories = () => {
     const { data, defineChart } = this.props;
 
@@ -182,6 +204,10 @@ export class Chart extends React.Component {
       : [];
   };
 
+  resetAutoFocus = () => {
+    this.setState({ autoFocus: false });
+  };
+
   render() {
     const {
       classes,
@@ -202,6 +228,8 @@ export class Chart extends React.Component {
       error,
       mathMlOptions = {},
       language,
+      labelsCharactersLimit,
+      correctData,
     } = this.props;
     let { chartType } = this.props;
 
@@ -223,7 +251,7 @@ export class Chart extends React.Component {
 
     log('[render] common:', common);
 
-    const maskSize = { x: -10, y: -75, width: width + 20, height: height + 80 };
+    const maskSize = { x: -10, y: -75, width: width + 20, height: height + 130 };
     const { scale } = common.graphProps;
     const xBand = dataToXBand(scale.x, categories, width, chartType);
 
@@ -244,15 +272,6 @@ export class Chart extends React.Component {
 
     return (
       <div className={classNames(classes.chart, classes.chartBox, className)}>
-        <div className={classes.controls}>
-          <ToolMenu
-            className={classes.toolMenu}
-            disabled={!addCategoryEnabled}
-            addCategory={() => this.addCategory()}
-            language={language}
-          />
-        </div>
-
         <Root
           title={title}
           onChangeTitle={onChangeTitle}
@@ -269,10 +288,13 @@ export class Chart extends React.Component {
           showPixelGuides={showPixelGuides}
           rootRef={(r) => (this.rootNode = r)}
           mathMlOptions={mathMlOptions}
+          labelsCharactersLimit={labelsCharactersLimit}
           {...rootCommon}
         >
           <ChartGrid {...common} xBand={xBand} rowTickValues={horizontalLines} columnTickValues={verticalLines} />
           <ChartAxes
+            autoFocus={this.state.autoFocus}
+            onAutoFocusUsed={this.resetAutoFocus}
             {...common}
             defineChart={defineChart}
             categories={categories}
@@ -285,7 +307,20 @@ export class Chart extends React.Component {
             changeEditableEnabled={changeEditableEnabled}
             top={top}
             error={error}
+            showCorrectness={chartType === 'linePlot' || chartType === 'dotPlot'}
           />
+          {addCategoryEnabled ? (
+            <foreignObject x={width} y={height - 16} width={width} height={height}>
+              <div xmlns="http://www.w3.org/1999/xhtml" style={{ display: 'flex', justifyContent: 'flex-start' }}>
+                <ActionsButton
+                  categories={categories}
+                  addCategory={this.addCategory}
+                  deleteCategory={this.deleteCategory}
+                  language={language}
+                />
+              </div>
+            </foreignObject>
+          ) : null}
           <mask id={`${this.maskUid}`}>
             <rect {...maskSize} fill="white" />
           </mask>
@@ -297,6 +332,7 @@ export class Chart extends React.Component {
               defineChart={defineChart}
               onChange={this.changeData}
               onChangeCategory={this.changeCategory}
+              correctData={correctData}
             />
           </g>
         </Root>
@@ -316,22 +352,10 @@ const styles = (theme) => ({
   graphBox: {
     transform: 'translate(60px, 35px)',
   },
-  controls: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: theme.spacing.unit,
-    backgroundColor: color.primaryLight(),
-    borderTop: `solid 1px ${color.primaryDark()}`,
-    borderBottom: `solid 0px ${color.primaryDark()}`,
-    borderLeft: `solid 1px ${color.primaryDark()}`,
-    borderRight: `solid 1px ${color.primaryDark()}`,
-  },
   svg: {
     overflow: 'visible',
   },
-  toolMenu: {
-    minHeight: '36px',
-  },
+
   chartBox: {
     width: 'min-content',
   },

package/src/common/__tests__/__snapshots__/drag-handle.test.jsx.snap

@@ -0,0 +1,48 @@
+// 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",
+      "handle": "RawDragHandle-handle-1",
+      "handleContainer": "RawDragHandle-handleContainer-3",
+      "incorrectIcon": "RawDragHandle-incorrectIcon-6",
+      "svgOverflowVisible": "RawDragHandle-svgOverflowVisible-4",
+      "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}
+/>
+`;

package/src/common/__tests__/drag-handle.test.jsx

@@ -0,0 +1,88 @@
+import { shallow } from 'enzyme/build';
+import React from 'react';
+import DragHandle from '../drag-handle';
+import { gridDraggable } from '@pie-lib/plot';
+import { graphProps } from './utils';
+import { bounds } from '../../utils';
+
+jest.mock('../../utils', () => {
+  const { point } = jest.requireActual('../../utils');
+  return {
+    bounds: jest.fn(),
+    point,
+  };
+});
+
+jest.mock('@pie-lib/plot', () => {
+  const { types, utils } = jest.requireActual('@pie-lib/plot');
+  return {
+    gridDraggable: jest.fn((opts) => (Comp) => Comp),
+    types,
+    utils,
+  };
+});
+
+describe('BasePoint', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: graphProps(),
+      x: 0,
+      y: 0,
+      width: 100,
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<DragHandle {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+  describe('gridDraggable options', () => {
+    let opts;
+    let domain;
+    let range;
+    beforeEach(() => {
+      domain = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      range = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      const w = wrapper();
+      opts = gridDraggable.mock.calls[0][0];
+    });
+
+    describe('bounds', () => {
+      it('calls utils.bounds with area', () => {
+        const result = opts.bounds({ x: 0, y: 0 }, { domain, range });
+
+        expect(result).toEqual({ left: 0, top: 1, bottom: 0, right: 1 });
+      });
+    });
+    describe('anchorPoint', () => {
+      it('returns x/y', () => {
+        const result = opts.anchorPoint({ x: 0, y: 0 });
+        expect(result).toEqual({ x: 0, y: 0 });
+      });
+    });
+
+    describe('fromDelta', () => {
+      it('returns y coordinate of a new point from the x/y + delta', () => {
+        const result = opts.fromDelta({ x: -1, y: 0 }, { x: 1, y: 3 });
+        expect(result).toEqual(3);
+      });
+    });
+  });
+});

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