@pie-lib/graphing 2.14.22-next.0 → 2.15.1-beta.0

package/src/axis/__tests__/axes.test.jsx

@@ -0,0 +1,220 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { graphProps } from '../../__tests__/utils';
+
+import Axes, { RawXAxis, RawYAxis, firstNegativeValue, sharedValues } from '../axes';
+
+describe('RawXAxis', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: graphProps(),
+      includeArrows: {
+        left: true,
+        right: true,
+        up: true,
+        down: true,
+      },
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<RawXAxis {...props} />);
+  };
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+});
+
+describe('RawYAxis', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: graphProps(),
+      includeArrows: {
+        left: true,
+        right: true,
+        up: true,
+        down: true,
+      },
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<RawYAxis {...props} />);
+  };
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+});
+
+const customScaleMock = (distance) => {
+  const fn = jest.fn((n) => n * distance);
+  fn.invert = jest.fn((n) => n * distance);
+  return fn;
+};
+
+describe.only('Axes', () => {
+  let w;
+  let onChange = jest.fn();
+
+  const customGraphProps = {
+    ...graphProps(),
+    domain: {
+      min: -2,
+      max: 2,
+      labelStep: 1,
+      step: 1,
+    },
+    range: {
+      min: -2,
+      max: 2,
+      step: 1,
+      labelStep: 1,
+    },
+    scale: {
+      x: customScaleMock(200),
+      y: customScaleMock(150),
+    },
+  };
+
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: customGraphProps,
+    };
+
+    const props = { ...defaults, ...extras };
+    return shallow(<Axes {...props} />);
+  };
+  describe('xValues', () => {
+    it('renders', () => {
+      w = wrapper();
+      const result = w.instance().xValues();
+      expect(result).toEqual({
+        columnTicksValues: expect.arrayContaining([-2, -1, 0, 1, 2]),
+        distanceFromOriginToFirstNegativeX: 150,
+        firstNegativeX: -1,
+      });
+    });
+  });
+  describe('yValues', () => {
+    it('renders', () => {
+      w = wrapper();
+      const result = w.instance().yValues();
+      expect(result).toEqual({
+        rowTickValues: expect.arrayContaining([-2, -1, 0, 1, 2]),
+        distanceFromOriginToFirstNegativeY: 200,
+        firstNegativeY: -1,
+      });
+    });
+  });
+});
+
+describe('firstNegativeValue should return undefiend for undefined interval', () => {
+  const interval = undefined;
+  const result = firstNegativeValue(interval);
+  expect(result).toEqual(undefined);
+});
+
+describe('firstNegativeValue should return undefiend for empty interval', () => {
+  const interval = [];
+  const result = firstNegativeValue(interval);
+  expect(result).toEqual(undefined);
+});
+
+describe('firstNegativeValue should return undefined if there is no negative in interval array', () => {
+  const interval = [1, 5, 7, 4, 5];
+  const result = firstNegativeValue(interval);
+  expect(result).toEqual(undefined);
+});
+
+describe('firstNegativeValue should return first negative number from interval', () => {
+  const interval = [1, 5, 7, -2, 4, 5, -1];
+  const result = firstNegativeValue(interval);
+  expect(result).toEqual(-2);
+});
+
+describe('skipValue should be empty array if firstNegativeValue for one of the axes is undefined', () => {
+  // x
+  const intervalX = [1, 2, 3, 4, 5, 6];
+  const firstNegativeX = firstNegativeValue(intervalX);
+  const distanceFromOriginToFirstNegativeX = -22;
+
+  // y
+  const intervalY = [-1, -2, 1, 2, 3, 4, 5, 6];
+  const firstNegativeY = firstNegativeValue(intervalY);
+  const distanceFromOriginToFirstNegativeY = -22;
+
+  const deltaAllowance = 5;
+
+  const result = sharedValues(
+    firstNegativeX,
+    firstNegativeY,
+    distanceFromOriginToFirstNegativeX,
+    distanceFromOriginToFirstNegativeY,
+    deltaAllowance,
+  );
+
+  expect(result).toEqual([]);
+});
+
+describe('skipValue should be empty array if firstNegativeX and firstNegativeY are equal but they do not overlap', () => {
+  // x
+  const intervalX = [-1, -2, 1, 2, 3, 4, 5, 6];
+  const firstNegativeX = firstNegativeValue(intervalX);
+  const distanceFromOriginToFirstNegativeX = -7;
+
+  // y
+  const intervalY = [-1, -2, 1, 2, 3, 4, 5, 6];
+  const firstNegativeY = firstNegativeValue(intervalY);
+  const distanceFromOriginToFirstNegativeY = -22;
+
+  const deltaAllowance = 5;
+
+  const result = sharedValues(
+    firstNegativeX,
+    firstNegativeY,
+    distanceFromOriginToFirstNegativeX,
+    distanceFromOriginToFirstNegativeY,
+    deltaAllowance,
+  );
+
+  expect(result).toEqual([]);
+});
+
+describe('skipValue should be -1 if firstNegativeX and firstNegativeY are equal and they overlap', () => {
+  // x
+  const intervalX = [-1, -2, 1, 2, 3, 4, 5, 6];
+  const firstNegativeX = firstNegativeValue(intervalX);
+  const distanceFromOriginToFirstNegativeX = -20;
+
+  // y
+  const intervalY = [-1, -2, 1, 2, 3, 4, 5, 6];
+  const firstNegativeY = firstNegativeValue(intervalY);
+  const distanceFromOriginToFirstNegativeY = -22;
+
+  const deltaAllowance = 5;
+
+  const result = sharedValues(
+    firstNegativeX,
+    firstNegativeY,
+    distanceFromOriginToFirstNegativeX,
+    distanceFromOriginToFirstNegativeY,
+    deltaAllowance,
+  );
+
+  expect(result).toEqual([-1]);
+});

package/src/axis/axes.jsx

@@ -23,16 +23,16 @@ const AxisDefaultProps = {
 
 const axisStyles = (theme) => ({
   line: {
-    stroke: color.primary(),
-    strokeWidth: 5,
+    stroke: color.defaults.PRIMARY,
+    strokeWidth: 3,
   },
   arrow: {
-    fill: color.primary(),
+    fill: color.defaults.PRIMARY,
   },
   tick: {
-    fill: color.primary(),
+    fill: color.defaults.PRIMARY,
     '& > line': {
-      stroke: color.primary(),
+      stroke: color.defaults.PRIMARY,
     },
   },
   labelFontSize: {

package/src/container/index.jsx

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
 import { ActionCreators } from 'redux-undo';
 import GraphWithControls from '../graph-with-controls';
-import { lastActionMiddleware, getLastAction } from './middleware';
+import { lastActionMiddleware } from './middleware';
 
 const mapStateToProps = (s) => ({
   marks: s.marks.present,
@@ -58,11 +58,9 @@ class Root extends React.Component {
   onStoreChange = () => {
     const { marks, onChangeMarks } = this.props;
     const storeState = this.store.getState();
-    const lastAction = getLastAction();
-    const isUndoOperation = lastAction.type.includes('UNDO') || lastAction.type.includes('REDO');
 
     if (!isEqual(storeState.marks.present, marks)) {
-      onChangeMarks(storeState.marks.present, isUndoOperation);
+      onChangeMarks(storeState.marks.present);
     }
   };
 

package/src/coordinates-label.jsx

@@ -12,7 +12,7 @@ const styles = (theme) => ({
     fontSize: theme.typography.fontSize,
     borderRadius: '8px',
     background: theme.palette.common.white,
-    color: color.primaryDark(),
+    color: color.defaults.PRIMARY_DARK,
   },
   inputLabel: {
     padding: 0,
@@ -20,8 +20,9 @@ const styles = (theme) => ({
 });
 
 export const getLabelPosition = (graphProps, x, y, labelLength) => {
-  const { scale, domain } = graphProps;
-  const topShift = 8;
+  const { scale, domain, range } = graphProps;
+  // treat corner cases for maximum and minimum
+  const topShift = y === range.min ? 16 : y === range.max ? 0 : 8;
   const leftShift = 10;
   const rightEdge = scale.x(x) + labelLength + leftShift;
 

package/src/graph-with-controls.jsx

@@ -89,9 +89,8 @@ export class GraphWithControls extends React.Component {
     }
   }
 
-  changeCurrentTool = (tool, tools) => this.setState({ currentTool: tools.find((t) => t.type === tool) });
-
-  toggleLabelMode = () => this.setState((state) => ({ labelModeEnabled: !state.labelModeEnabled }));
+  changeCurrentTool = (tool, tools) =>
+    this.setState({ currentTool: tools.find((t) => t.type === tool), labelModeEnabled: tool === 'label' });
 
   render() {
     let { currentTool, labelModeEnabled } = this.state;
@@ -123,7 +122,9 @@ export class GraphWithControls extends React.Component {
       showTitle,
       title,
       titlePlaceholder,
-      language
+      language,
+      removeIncompleteTool,
+      limitLabeling,
     } = this.props;
     let { backgroundMarks, marks, toolbarTools } = this.props;
 
@@ -151,13 +152,12 @@ export class GraphWithControls extends React.Component {
           draggableTools={draggableTools}
           labelModeEnabled={labelModeEnabled}
           onChange={(tool) => this.changeCurrentTool(tool, tools)}
-          onToggleLabelMode={this.toggleLabelMode}
           toolbarTools={toolbarTools}
           onChangeTools={onChangeTools}
           language={language}
         />
 
-        {!disabled && <UndoRedo onUndo={onUndo} onRedo={onRedo} onReset={onReset} language={language}/>}
+        {!disabled && <UndoRedo onUndo={onUndo} onRedo={onRedo} onReset={onReset} language={language} />}
       </React.Fragment>
     );
 
@@ -198,6 +198,8 @@ export class GraphWithControls extends React.Component {
           title={title}
           titlePlaceholder={titlePlaceholder}
           tools={tools}
+          removeIncompleteTool={removeIncompleteTool}
+          limitLabeling={limitLabeling}
         />
       </div>
     );
@@ -216,10 +218,6 @@ const styles = (theme) => ({
     padding: theme.spacing.unit,
     color: color.text(),
     backgroundColor: color.primaryLight(),
-    borderTop: `solid 1px ${color.primaryDark()}`,
-    borderBottom: `solid 0px ${color.primaryDark()}`,
-    borderLeft: `solid 1px ${color.primaryDark()}`,
-    borderRight: `solid 1px ${color.primaryDark()}`,
     '& button': {
       fontSize: theme.typography.fontSize,
     },

package/src/graph.jsx

@@ -39,6 +39,7 @@ export const graphPropTypes = {
   showTitle: PropTypes.bool,
   title: PropTypes.string,
   tools: PropTypes.array,
+  limitLabeling: PropTypes.bool,
 };
 
 const getMaskSize = (size) => ({
@@ -48,7 +49,7 @@ const getMaskSize = (size) => ({
   height: size.height + 46,
 });
 
-export const removeBuildingToolIfCurrentToolDiffers = ({ marks, currentTool }) => {
+export const removeBuildingToolIfCurrentToolDiffers = ({ marks, currentTool, onChangeMarks, removeIncompleteTool }) => {
   const buildingMark = marks.filter((m) => m.building)[0];
   let newMarks = cloneDeep(marks);
 
@@ -59,7 +60,9 @@ export const removeBuildingToolIfCurrentToolDiffers = ({ marks, currentTool }) =
       newMarks.splice(index, 1);
     }
   }
-
+  if (removeIncompleteTool && !isEqual(newMarks, marks)) {
+    onChangeMarks(newMarks);
+  }
   return newMarks;
 };
 
@@ -116,7 +119,7 @@ export class Graph extends React.Component {
     const { onChangeMarks, marks } = this.props;
     let newMarks = cloneDeep(marks);
 
-    if (!update.building && isDuplicatedMark(update, marks)) {
+    if (!update || (!update.building && isDuplicatedMark(update, marks))) {
       return;
     }
 
@@ -140,15 +143,15 @@ export class Graph extends React.Component {
   };
 
   onBgClick = (point) => {
-    const { x, y } = point;
+    const { x, y } = point || {};
     const { labelModeEnabled, currentTool, marks } = this.props;
 
-    log('[onBgClick] x,y: ', x, y);
-
-    if (labelModeEnabled || !currentTool) {
+    if (labelModeEnabled || !currentTool || [null, undefined].includes(x) || [null, undefined].includes(y)) {
       return;
     }
 
+    log('[onBgClick] x,y: ', x, y);
+
     const buildingMark = marks.filter((m) => m.building)[0];
     let updatedMark;
 
@@ -177,6 +180,7 @@ export class Graph extends React.Component {
       labels,
       labelModeEnabled,
       labelsPlaceholders,
+      limitLabeling,
       showLabels,
       showPixelGuides,
       showTitle,
@@ -184,15 +188,22 @@ export class Graph extends React.Component {
       onChangeLabels,
       onChangeTitle,
       mathMlOptions = {},
+      onChangeMarks,
+      removeIncompleteTool,
     } = this.props;
     let { marks } = this.props;
 
     const graphProps = createGraphProps(domain, range, size, () => this.rootNode);
 
     const maskSize = getMaskSize(size);
-    const common = { graphProps, labelModeEnabled };
+    const common = { graphProps, labelModeEnabled, limitLabeling };
 
-    marks = removeBuildingToolIfCurrentToolDiffers({ marks: marks || [], currentTool });
+    marks = removeBuildingToolIfCurrentToolDiffers({
+      marks: marks || [],
+      currentTool,
+      onChangeMarks,
+      removeIncompleteTool,
+    });
 
     return (
       <Root
@@ -233,6 +244,7 @@ export class Graph extends React.Component {
                   key={`${markType}-${index}-bg`}
                   mark={{ ...m, disabled: true, isBackground: true }}
                   labelNode={this.state.labelNode}
+                  onClick={this.onBgClick}
                   {...common}
                 />
               );
@@ -263,7 +275,7 @@ export class Graph extends React.Component {
               x="0"
               y="0"
               {...size}
-              style={{ pointerEvents: 'none' }}
+              style={{ pointerEvents: 'none', fontSize: '14px' }}
             />
           </g>
         </g>

package/src/grid.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as vx from '@vx/grid';
 import { types } from '@pie-lib/plot';
-import { color } from '@pie-lib/render-ui';
 import { withStyles } from '@material-ui/core/styles';
 import { getTickValues } from './utils';
 
@@ -78,7 +77,7 @@ export class Grid extends React.Component {
   };
 
   render() {
-    const { classes, graphProps } = this.props;
+    const { graphProps } = this.props;
     const {
       scale,
       size: { height, width },
@@ -95,6 +94,9 @@ export class Grid extends React.Component {
       displayAdditionalGrid,
     } = this.getAdditionalGridProps(rowTickValues, columnTickValues);
 
+    const additionalGridStroke =
+      domain.labelStep * 2 === domain.step || range.labelStep * 2 === range.step ? '#9FA8DA' : '#7985CB';
+
     return (
       <>
         <vx.Grid
@@ -103,7 +105,7 @@ export class Grid extends React.Component {
           yScale={scale.y}
           width={width}
           height={height}
-          className={classes.grid}
+          stroke="#E1E6EC"
           rowTickValues={rowTickValues}
           columnTickValues={columnTickValues}
         />
@@ -113,14 +115,14 @@ export class Grid extends React.Component {
               scale={scale.y}
               width={width}
               tickValues={rowTickLabelValues}
-              stroke={color.primary()}
+              stroke={additionalGridStroke}
               strokeDasharray={rowStrokeDasharray}
             />
             <vx.GridColumns
               scale={scale.x}
               height={height}
               tickValues={columnTickLabelValues}
-              stroke={color.primary()}
+              stroke={additionalGridStroke}
               strokeDasharray={columnStrokeDasharray}
             />
           </>
@@ -130,8 +132,4 @@ export class Grid extends React.Component {
   }
 }
 
-export default withStyles(() => ({
-  grid: {
-    stroke: 'purple', // TODO hardcoded color
-  },
-}))(Grid);
+export default withStyles(() => ({}))(Grid);

package/src/index.js

@@ -3,5 +3,5 @@ import GraphContainer from './container';
 import GridSetup from './grid-setup';
 import * as tools from './tools';
 import ToolMenu from './tool-menu';
-
-export { Graph, GraphContainer, GridSetup, ToolMenu, tools };
+import KeyLegend from './key-legend';
+export { Graph, GraphContainer, GridSetup, ToolMenu, tools, KeyLegend };