@pie-lib/charting 5.17.0-beta.0 → 5.17.0

package/src/axes.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import { types } from '@pie-lib/plot';
-import { color } from '@pie-lib/render-ui';
+import { color } from '../../render-ui/src/index';
 import { AlertDialog } from '@pie-lib/config-ui';
 import { AxisLeft, AxisBottom } from '@vx/axis';
 import { bandKey, getTickValues, getRotateAngle } from './utils';
@@ -45,14 +45,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];
@@ -144,7 +136,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 } = 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;
@@ -185,6 +177,7 @@ export class TickComponent extends React.Component {
             rotate={rotate}
             correctness={correctness}
             error={error && error[index]}
+            limitCharacters
           />
         </foreignObject>
 
@@ -194,24 +187,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}
@@ -493,7 +468,7 @@ const ChartAxes = withStyles(
       strokeWidth: 2,
     },
     axisLine: {
-      stroke: color.primaryDark(),
+      stroke: color.visualElementsColors.AXIS_LINE_COLOR,
       strokeWidth: 2,
     },
     tick: {
@@ -501,7 +476,6 @@ const ChartAxes = withStyles(
         stroke: color.primaryDark(),
         strokeWidth: 2,
       },
-      fill: color.primaryDark(),
       fontFamily: theme.typography.body1.fontFamily,
       fontSize: theme.typography.fontSize,
       textAnchor: 'middle',
@@ -515,7 +489,7 @@ const ChartAxes = withStyles(
       fill: theme.palette.error.main,
     },
     customColor: {
-      color: `${color.tertiary()} !important`
+      color: `${color.tertiary()} !important`,
     },
   }),
   { withTheme: true },

package/src/bars/common/bars.jsx

@@ -2,7 +2,7 @@ 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 { color } from '../../../render-ui/src/index';
 import { Bar as VxBar } from '@vx/shape';
 import { withStyles } from '@material-ui/core/styles/index';
 import debug from 'debug';
@@ -39,12 +39,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;
 };
@@ -148,7 +148,8 @@ export class RawBar extends React.Component {
     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);
@@ -195,10 +196,7 @@ export class RawBar extends React.Component {
 
 const Bar = withStyles(() => ({
   bar: {
-    fill: color.primaryLight(),
-    '&:hover': {
-      fill: color.primaryDark(),
-    },
+    fill: color.defaults.TERTIARY,
   },
 }))(RawBar);
 

package/src/chart-setup.jsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { color } from '@pie-lib/render-ui';
+import { color } from '../../render-ui/src/index';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import ChartType from './chart-type';

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();
   }
@@ -174,6 +175,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;
 
@@ -252,15 +265,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}
@@ -297,6 +301,18 @@ export class Chart extends React.Component {
             top={top}
             error={error}
           />
+          {addCategoryEnabled ? (
+            <foreignObject x={width - 8} y={height - 8} width={100} height={40}>
+              <div xmlns="http://www.w3.org/1999/xhtml" style={{ display: 'flex', justifyContent: 'center' }}>
+                <ActionsButton
+                  categories={categories}
+                  addCategory={this.addCategory}
+                  deleteCategory={this.deleteCategory}
+                  language={language}
+                />
+              </div>
+            </foreignObject>
+          ) : null}
           <mask id={`${this.maskUid}`}>
             <rect {...maskSize} fill="white" />
           </mask>
@@ -327,21 +343,10 @@ const styles = (theme) => ({
   graphBox: {
     transform: 'translate(60px, 35px)',
   },
-  controls: {
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: theme.spacing.unit,
-    backgroundColor: color.primaryLight(),
-    '& button': {
-      fontSize: theme.typography.fontSize,
-    },
-  },
   svg: {
     overflow: 'visible',
   },
-  toolMenu: {
-    minHeight: '36px',
-  },
+
   chartBox: {
     width: 'min-content',
   },

package/src/common/drag-handle.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { withStyles } from '@material-ui/core/styles';
 import { gridDraggable, utils, types } from '@pie-lib/plot';
-import { color } from '@pie-lib/render-ui';
+import { color as enumColor } from '../../../render-ui/src/index';
 import { correct, incorrect, disabled } from './styles';
 import { getScale } from '../utils';
 import DragIcon from './drag-icon';
@@ -28,7 +28,7 @@ const RawDragHandle = ({
   return (
     <svg x={x} y={scale.y(y) - 10} width={width} overflow="visible" className={classes.svgOverflowVisible}>
       {isHovered && !correctness && interactive && (
-        <DragIcon width={width} scaleValue={scaleValue} color={color} classes={classes} />
+        <DragIcon width={width} scaleValue={scaleValue} color={enumColor.defaults.BORDER_GRAY} classes={classes} />
       )}
       {interactive && !correctness && (
         <ellipse
@@ -107,7 +107,7 @@ export const DragHandle = withStyles(() => ({
     height: 30,
     '&:hover': {
       '& .handle': {
-        fill: color.secondaryDark(),
+        fill: enumColor.secondaryDark(),
         height: '16px',
       },
     },

package/src/common/styles.js

@@ -1,4 +1,4 @@
-import { color } from '@pie-lib/render-ui';
+import { color } from '../../../render-ui/src/index';
 
 export const disabled = (key = 'fill') => ({
   [key]: `var(--graph-disabled, ${color.disabled()})`,

package/src/grid.jsx

@@ -2,10 +2,10 @@ 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';
+import { color } from '../../render-ui/src/index';
 
 export class Grid extends React.Component {
   static propTypes = {
@@ -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 '../../render-ui/src/index';
+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/common/drag-handle.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { gridDraggable, utils, types } from '@pie-lib/plot';
 import { withStyles } from '@material-ui/core/styles/index';
-import { color } from '@pie-lib/render-ui';
+import { color } from '../../../../render-ui/src/index';
 import PropTypes from 'prop-types';
 import { correct, incorrect, disabled } from '../../common/styles';
 
@@ -44,6 +44,7 @@ class RawDragHandle extends React.Component {
         classes={classes}
         className={classNames(className, !interactive && 'non-interactive')}
         correctness={correctness}
+        interactive={interactive}
         {...rest}
       />
     );
@@ -52,11 +53,7 @@ class RawDragHandle extends React.Component {
 
 export const DragHandle = withStyles(() => ({
   handle: {
-    fill: color.defaults.SECONDARY,
     transition: 'fill 200ms linear, height 200ms linear',
-    '&:hover': {
-      fill: color.defaults.SECONDARY_DARK,
-    },
     '&.correct': correct('fill'),
     '&.incorrect': incorrect('fill'),
     '&.non-interactive': disabled('fill'),
@@ -67,11 +64,8 @@ export const DragHandle = withStyles(() => ({
     stroke: 'transparent',
   },
   line: {
-    stroke: color.defaults.SECONDARY,
+    stroke: color.defaults.TEXT,
     transition: 'fill 200ms linear, height 200ms linear',
-    '&:hover': {
-      stroke: color.defaults.SECONDARY_DARK,
-    },
     '&.non-interactive': disabled('stroke'),
     '&.correct': correct('stroke'),
     '&.incorrect': incorrect('stroke'),

package/src/line/common/line.jsx

@@ -6,7 +6,7 @@ import { types } from '@pie-lib/plot';
 import DraggableHandle, { DragHandle } from './drag-handle';
 import { withStyles } from '@material-ui/core/styles/index';
 import isEqual from 'lodash/isEqual';
-import { color } from '@pie-lib/render-ui';
+import { color } from '../../../../render-ui/src/index';
 
 const getData = (data, domain) => {
   const { max } = domain || {};
@@ -121,13 +121,9 @@ export class RawLine extends React.Component {
 const StyledLine = withStyles(() => ({
   line: {
     fill: 'transparent',
-    stroke: color.primaryLight(),
+    stroke: color.defaults.TERTIARY,
     strokeWidth: 3,
     transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',
-    '&:hover': {
-      strokeWidth: 6,
-      stroke: color.primaryDark(),
-    },
   },
 }))(RawLine);
 

package/src/line/line-cross.js

@@ -1,14 +1,21 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { types } from '@pie-lib/plot';
 import { LinePath } from '@vx/shape';
 import { Group } from '@vx/group';
 import classNames from 'classnames';
+import { color } from '../../../render-ui/src/index';
 import { dataToXBand } from '../utils';
 import RawLine from './common/line';
 
 const DraggableComponent = (props) => {
   const { classes = {}, className, scale, x, y, r, correctness, ...rest } = props;
+  const [hover, setHover] = useState(false);
+
+  const squareSize = r * 4;
+  const squareHalf = squareSize / 2;
+  const cx = scale.x(x);
+  const cy = scale.y(y);
 
   return (
     <Group className={classNames(className, classes.line, correctness && correctness.value)}>
@@ -34,7 +41,27 @@ const DraggableComponent = (props) => {
         strokeWidth={5}
         style={{ pointerEvents: 'none' }}
       />
-      <circle cx={scale.x(x)} cy={scale.y(y)} r={r * 2} className={classNames(classes.transparentHandle)} {...rest} />
+      {hover && (
+        <rect
+          x={cx - squareHalf}
+          y={cy - squareHalf}
+          width={squareSize}
+          height={squareSize}
+          stroke={color.defaults.BORDER_GRAY}
+          fill="none"
+          strokeWidth={2}
+          pointerEvents="none"
+        />
+      )}
+      <circle
+        cx={cx}
+        cy={cy}
+        r={r * 2}
+        className={classNames(classes.transparentHandle)}
+        onMouseEnter={() => setHover(true)}
+        onMouseLeave={() => setHover(false)}
+        {...rest}
+      />
     </Group>
   );
 };

package/src/line/line-dot.js

@@ -1,29 +1,46 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { types } from '@pie-lib/plot';
+import { color } from '../../../render-ui/src/index';
 import { dataToXBand } from '../utils';
 import RawLine from './common/line';
 import classNames from 'classnames';
 
-const DraggableComponent = ({ scale, x, y, className, classes, r, correctness, ...rest }) => (
-  <g>
-    <circle
-      cx={scale.x(x)}
-      cy={scale.y(y)}
-      r={r * 3}
-      className={classNames(classes.transparentHandle, className)}
-      style={{ pointerEvents: 'none' }}
-      {...rest}
-    />
-    <circle
-      cx={scale.x(x)}
-      cy={scale.y(y)}
-      r={r}
-      className={classNames(className, classes.handle, correctness && correctness.value)}
-      {...rest}
-    />
-  </g>
-);
+const DraggableComponent = ({ scale, x, y, className, classes, r, correctness, interactive, ...rest }) => {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const allowRolloverEvent = !correctness && interactive;
+
+  return (
+    <g onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+      <circle
+        cx={scale.x(x)}
+        cy={scale.y(y)}
+        r={r * 3}
+        className={classNames(classes.transparentHandle, className)}
+        pointerEvents={correctness ? 'none' : ''}
+        {...rest}
+      />
+      <circle
+        cx={scale.x(x)}
+        cy={scale.y(y)}
+        r={r}
+        className={classNames(className, classes.handle, correctness && correctness.value)}
+        {...rest}
+      />
+      {isHovered && allowRolloverEvent && (
+        <rect
+          x={scale.x(x) - r * 2}
+          y={scale.y(y) - r * 2}
+          width={r * 4}
+          height={r * 4}
+          stroke={color.defaults.BORDER_GRAY}
+          strokeWidth="1"
+          fill="none"
+        />
+      )}
+    </g>
+  );
+};
 
 DraggableComponent.propTypes = {
   scale: PropTypes.object,

package/src/mark-label.jsx

@@ -5,7 +5,7 @@ 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';
+import { color } from '../../render-ui/src/index';
 import { renderMath } from '@pie-lib/math-rendering';
 
 const styles = (theme) => ({
@@ -14,7 +14,6 @@ const styles = (theme) => ({
     fontFamily: theme.typography.fontFamily,
     fontSize: theme.typography.fontSize,
     border: 'none',
-    color: color.primaryDark(),
     '&.correct': correct('color'),
     '&.incorrect': incorrect('color'),
     '&.disabled': {
@@ -89,6 +88,7 @@ export const MarkLabel = (props) => {
     autoFocus,
     error,
     isHiddenLabel,
+    limitCharacters,
   } = props;
 
   const [label, setLabel] = useState(mark.label);
@@ -97,6 +97,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);
   };
 
@@ -205,6 +209,7 @@ MarkLabel.propTypes = {
     label: PropTypes.string,
   }),
   isHiddenLabel: PropTypes.bool,
+  limitCharacters: PropTypes.bool,
 };
 
 export default withStyles(styles)(MarkLabel);