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

package/CHANGELOG.md

@@ -3,7 +3,159 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [5.16.1-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.16.1-beta.0) (2025-07-20)
+# [5.17.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.17.0) (2025-07-31)
+
+**Note:** Version bump only for package @pie-lib/charting
+
+
+
+
+
+# [5.18.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.18.0) (2025-07-31)
+
+**Note:** Version bump only for package @pie-lib/charting
+
+
+
+
+
+# [5.17.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.17.0) (2025-07-31)
+
+**Note:** Version bump only for package @pie-lib/charting
+
+
+
+
+
+# [5.16.0-beta.8](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.16.0-beta.8) (2025-07-25)
+
+**Note:** Version bump only for package @pie-lib/charting
+
+
+
+
+
+# [5.16.0-beta.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.16.0-beta.7) (2025-07-25)
+
+**Note:** Version bump only for package @pie-lib/charting
+
+
+
+
+
+# [5.16.0-beta.7](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.16.0-beta.7) (2025-07-25)
+
+**Note:** Version bump only for package @pie-lib/charting
+
+
+
+
+
+# [5.16.0-beta.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.16.0-beta.6) (2025-07-25)
+
+**Note:** Version bump only for package @pie-lib/charting
+
+
+
+
+
+# [5.16.0-beta.6](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.16.0-beta.6) (2025-07-25)
+
+**Note:** Version bump only for package @pie-lib/charting
+
+
+
+
+
+# [5.16.0-beta.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.16.0-beta.5) (2025-07-25)
+
+**Note:** Version bump only for package @pie-lib/charting
+
+
+
+
+
+# [5.16.0-beta.5](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.16.0-beta.5) (2025-07-25)
+
+**Note:** Version bump only for package @pie-lib/charting
+
+
+
+
+
+# [5.16.0-beta.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.16.0-beta.4) (2025-07-25)
+
+**Note:** Version bump only for package @pie-lib/charting
+
+
+
+
+
+# [5.16.0-beta.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.16.0-beta.3) (2025-07-25)
+
+**Note:** Version bump only for package @pie-lib/charting
+
+
+
+
+
+# [5.16.0-beta.4](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.16.0-beta.4) (2025-07-23)
+
+**Note:** Version bump only for package @pie-lib/charting
+
+
+
+
+
+# [5.16.0-beta.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.16.0-beta.3) (2025-07-23)
+
+**Note:** Version bump only for package @pie-lib/charting
+
+
+
+
+
+# [5.16.0-beta.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.16.0-beta.3) (2025-07-20)
+
+**Note:** Version bump only for package @pie-lib/charting
+
+
+
+
+
+# [5.16.0-beta.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.16.0-beta.2) (2025-07-20)
+
+**Note:** Version bump only for package @pie-lib/charting
+
+
+
+
+
+# [5.16.0-beta.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.16.0-beta.1) (2025-07-20)
+
+**Note:** Version bump only for package @pie-lib/charting
+
+
+
+
+
+# [5.16.0-beta.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.16.0-beta.2) (2025-07-20)
+
+**Note:** Version bump only for package @pie-lib/charting
+
+
+
+
+
+# [5.16.0-beta.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.16.0-beta.1) (2025-07-20)
+
+**Note:** Version bump only for package @pie-lib/charting
+
+
+
+
+
+# [5.16.0-beta.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/charting@5.15.6...@pie-lib/charting@5.16.0-beta.1) (2025-07-20)
 
 **Note:** Version bump only for package @pie-lib/charting
 

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "5.16.1-beta.0",
+  "version": "5.17.0",
   "description": "charting",
   "keywords": [
     "react",
@@ -19,20 +19,8 @@
   "dependencies": {
     "@mapbox/point-geometry": "^0.1.0",
     "@material-ui/core": "^3.8.3",
-    "@material-ui/icons": "^3.0.2",
-    "@pie-framework/mathml-to-latex": "1.4.4",
-    "@pie-framework/mathquill": "1.1.4",
-    "@pie-lib/config-ui": "beta",
-    "@pie-lib/drag": "beta",
-    "@pie-lib/editable-html": "beta",
-    "@pie-lib/icons": "beta",
-    "@pie-lib/math-input": "beta",
-    "@pie-lib/math-rendering": "beta",
-    "@pie-lib/math-toolbar": "beta",
-    "@pie-lib/plot": "^2.8.1-beta.0",
-    "@pie-lib/render-ui": "beta",
-    "@pie-lib/test-utils": "beta",
-    "@pie-lib/translator": "^2.4.1-beta.0",
+    "@pie-lib/plot": "^2.10.0",
+    "@pie-lib/translator": "^2.6.0",
     "@vx/axis": "^0.0.183",
     "@vx/event": "^0.0.182",
     "@vx/grid": "^0.0.183",
@@ -44,38 +32,17 @@
     "d3-scale": "^2.1.2",
     "d3-selection": "^1.3.2",
     "debug": "^4.1.1",
-    "immutable": "^4.0.0-rc.12",
     "invariant": "^2.2.4",
     "lodash": "^4.17.11",
-    "mathjax-full": "3.2.2",
-    "mathjs": "^7.0.1",
-    "prop-types": "^15.7.2",
     "react": "^16.8.1",
-    "react-attr-converter": "^0.3.1",
-    "react-dnd": "^14.0.5",
-    "react-dnd-html5-backend": "^14.0.2",
-    "react-dnd-multi-backend": "^6.0.2",
-    "react-dnd-touch-backend": "^12.0.0",
-    "react-dom": "^16.9.0",
     "react-draggable": "^3.1.1",
     "react-input-autosize": "^2.2.1",
-    "react-measure": "^2.2.2",
     "react-redux": "^6.0.0",
-    "react-transition-group": "^2.5.2",
     "redux": "^4.0.1",
-    "redux-undo": "beta",
-    "slate": "^0.36.2",
-    "slate-edit-list": "^0.12.1",
-    "slate-edit-table": "^0.17.0",
-    "slate-html-serializer": "^0.6.12",
-    "slate-plain-serializer": "^0.5.26",
-    "slate-prop-types": "^0.4.38",
-    "slate-react": "^0.14.3",
-    "slate-soft-break": "^0.8.1",
-    "to-style": "^1.3.3"
+    "redux-undo": "latest"
   },
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "e2aa3ddac60f49bcb8c2562370f496323642f453"
+  "gitHead": "889a13bfea2c768b8a3a6eabfc6fe7b7725aa832"
 }

package/src/__tests__/__snapshots__/axes.test.jsx.snap

@@ -536,6 +536,7 @@ exports[`TickComponent snapshot1 renders 1`] = `
         }
       }
       inputRef={[Function]}
+      limitCharacters={true}
       mark={
         Object {
           "label": "test",

package/src/__tests__/__snapshots__/chart.test.jsx.snap

@@ -4,12 +4,6 @@ exports[`ChartAxes snapshot renders 1`] = `
 <div
   className="className"
 >
-  <div>
-    <ToolMenu
-      addCategory={[Function]}
-      disabled={true}
-    />
-  </div>
   <WithStyles(Root)
     defineChart={false}
     disabledLabels={true}
@@ -205,12 +199,6 @@ exports[`ChartAxes snapshot renders if size is not defined 1`] = `
 <div
   className="className"
 >
-  <div>
-    <ToolMenu
-      addCategory={[Function]}
-      disabled={true}
-    />
-  </div>
   <WithStyles(Root)
     defineChart={false}
     disabledLabels={true}
@@ -410,12 +398,6 @@ exports[`ChartAxes snapshot renders without chartType property 1`] = `
 <div
   className="className"
 >
-  <div>
-    <ToolMenu
-      addCategory={[Function]}
-      disabled={true}
-    />
-  </div>
   <WithStyles(Root)
     defineChart={false}
     disabledLabels={true}

package/src/__tests__/__snapshots__/grid.test.jsx.snap

@@ -1,28 +1,72 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Grid snapshot renders 1`] = `
-<r
+<g
   className="className"
-  height={400}
-  width={400}
-  xOffset={NaN}
-  xScale={
-    Object {
-      "bandwidth": [Function],
+>
+  <q
+    lineStyle={
+      Object {
+        "stroke": "var(--pie-faded-primary, #DCDAFB)",
+        "strokeWidth": 1,
+      }
     }
-  }
-  yScale={[MockFunction]}
-/>
+    scale={[MockFunction]}
+    tickValues={Array []}
+    width={400}
+  />
+  <q
+    lineStyle={
+      Object {
+        "stroke": "#8E88EA",
+        "strokeWidth": 1,
+      }
+    }
+    scale={[MockFunction]}
+    tickValues={Array []}
+    width={400}
+  />
+  <V
+    height={400}
+    offset={NaN}
+    scale={
+      Object {
+        "bandwidth": [Function],
+      }
+    }
+  />
+</g>
 `;
 
 exports[`Grid snapshot renders if graphProps is not defined 1`] = `
-<r
+<g
   className="className"
-  xOffset={NaN}
-  xScale={
-    Object {
-      "bandwidth": [Function],
+>
+  <q
+    lineStyle={
+      Object {
+        "stroke": "var(--pie-faded-primary, #DCDAFB)",
+        "strokeWidth": 1,
+      }
+    }
+    tickValues={Array []}
+  />
+  <q
+    lineStyle={
+      Object {
+        "stroke": "#8E88EA",
+        "strokeWidth": 1,
+      }
+    }
+    tickValues={Array []}
+  />
+  <V
+    offset={NaN}
+    scale={
+      Object {
+        "bandwidth": [Function],
+      }
     }
-  }
-/>
+  />
+</g>
 `;

package/src/__tests__/axes.test.jsx

@@ -137,10 +137,5 @@ describe('TickComponent', () => {
       w.instance().changeCategory(0, 'new label');
       expect(onChangeCategory).toHaveBeenCalledWith(0, { value: 1, label: 'new label' });
     });
-
-    it('calls onChange', () => {
-      w.instance().deleteCategory(0);
-      expect(onChange).toHaveBeenCalledWith([]);
-    });
   });
 });

package/src/__tests__/chart.test.jsx

@@ -83,5 +83,13 @@ describe('ChartAxes', () => {
 
       expect(chart.type).toEqual('bar');
     });
+
+    it('deleteCategory', () => {
+      const w = wrapper();
+
+      w.instance().deleteCategory(0);
+
+      expect(onDataChange).toHaveBeenCalled();
+    });
   });
 });

package/src/actions-button.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Popover from '@material-ui/core/Popover';
+import Paper from '@material-ui/core/Paper';
+
+import { color } from '../../render-ui/src/index';
+import Translator from '@pie-lib/translator';
+
+const { translator } = Translator;
+
+export class ActionsButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      actionsAnchorEl: null,
+    };
+  }
+
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    categories: PropTypes.array,
+    addCategory: PropTypes.func.isRequired,
+    deleteCategory: PropTypes.func.isRequired,
+    language: PropTypes.string.isRequired,
+  };
+
+  handleActionsClick = (event) => {
+    this.setState({ actionsAnchorEl: event.currentTarget });
+  };
+
+  handleActionsClose = () => {
+    this.setState({ actionsAnchorEl: null });
+  };
+
+  handleAddCategory = () => {
+    const { addCategory } = this.props;
+    addCategory();
+    this.handleActionsClose();
+  };
+
+  handleDeleteCategory = (index) => {
+    const { deleteCategory } = this.props;
+    deleteCategory(index);
+    this.handleActionsClose();
+  };
+
+  render() {
+    const { classes, categories, language } = this.props;
+
+    return (
+      <div className={classes.actions}>
+        <div role="button" tabIndex={0} className={classes.trigger} onClick={this.handleActionsClick}>
+          Actions
+        </div>
+        <Popover
+          open={Boolean(this.state.actionsAnchorEl)}
+          anchorEl={this.state.actionsAnchorEl}
+          onClose={this.handleActionsClose}
+          anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+          transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+        >
+          <Paper className={classes.actionsPaper}>
+            <Button onClick={() => this.handleAddCategory()}>
+              + {translator.t('charting.add', { lng: language })}
+            </Button>
+            {categories.length > 0 &&
+              categories.map(
+                (category, index) =>
+                  category.deletable &&
+                  !category.correctness && (
+                    <Button key={index} onClick={() => this.handleDeleteCategory(index)}>
+                      {`${translator.t('charting.delete', { lng: language })} <${category.label ||
+                      translator.t('charting.newLabel', { lng: language })}>`}
+                    </Button>
+                  ),
+              )}
+          </Paper>
+        </Popover>
+      </div>
+    );
+  }
+}
+
+const styles = (theme) => ({
+  actions: {
+    alignSelf: 'flex-end',
+  },
+  trigger: {
+    cursor: 'pointer',
+    fontSize: theme.typography.fontSize,
+    color: color.tertiary(),
+  },
+  actionsPaper: {
+    padding: theme.spacing.unit,
+    display: 'flex',
+    flexDirection: 'column',
+    gap: theme.spacing.unit,
+    '& button': {
+      textTransform: 'none',
+      fontSize: theme.typography.fontSize,
+      color: color.text(),
+      justifyContent: 'flex-start',
+    },
+  },
+});
+
+export default withStyles(styles)(ActionsButton);

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',

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';