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

package/lib/utils.js

@@ -0,0 +1,244 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tickCount = exports.point = exports.getTopPadding = exports.getTickValues = exports.getScale = exports.getRotateAngle = exports.getGridLinesAndAxisByChartType = exports.getDomainAndRangeByChartType = exports.getAdjustedX = exports.dataToXBand = exports.bounds = exports.bandKey = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _scale = require("@vx/scale");
+
+var _plot = require("@pie-lib/plot");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var tickCount = _plot.utils.tickCount;
+exports.tickCount = tickCount;
+var bounds = _plot.utils.bounds;
+exports.bounds = bounds;
+var point = _plot.utils.point;
+exports.point = point;
+
+var bandKey = function bandKey(d, index) {
+  return "".concat(index, "-").concat(d.label || '-');
+};
+
+exports.bandKey = bandKey;
+
+var dataToXBand = function dataToXBand(scaleX, data, width, type) {
+  switch (type) {
+    case 'bar':
+    case 'dotPlot':
+    case 'linePlot':
+      return (0, _scale.scaleBand)({
+        rangeRound: [0, width],
+        domain: data && data.map(bandKey),
+        padding: 0.2
+      });
+
+    case 'histogram':
+      return (0, _scale.scaleBand)({
+        rangeRound: [0, width],
+        domain: data && data.map(bandKey),
+        padding: 0
+      });
+
+    case 'lineCross':
+    case 'lineDot':
+      return (0, _scale.scalePoint)({
+        domain: data && data.map(bandKey),
+        rangeRound: [0, width]
+      });
+
+    default:
+      return (0, _scale.scaleBand)({
+        range: [0, width],
+        domain: data && data.map(bandKey),
+        padding: 0
+      });
+  }
+};
+
+exports.dataToXBand = dataToXBand;
+
+var getTickValues = function getTickValues() {
+  var prop = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var tickValues = [];
+  var tickVal = prop.min;
+
+  while (tickVal <= prop.max) {
+    tickValues.push(tickVal);
+    tickVal = Math.round((tickVal + prop.step) * 10000) / 10000;
+  }
+
+  return tickValues;
+};
+
+exports.getTickValues = getTickValues;
+
+var getDomainAndRangeByChartType = function getDomainAndRangeByChartType(domain, range, chartType) {
+  var _ref = range || {},
+      step = _ref.step,
+      labelStep = _ref.labelStep,
+      min = _ref.min,
+      max = _ref.max;
+
+  if (!min) {
+    min = 0;
+  }
+
+  if (!max || max < 0) {
+    max = range.min + 1;
+  }
+
+  if (!step) {
+    step = labelStep || 1;
+  }
+
+  if (!labelStep || isNaN(labelStep) && step) {
+    labelStep = step || 1;
+  }
+
+  range.max = max;
+
+  switch (chartType) {
+    // if chart is dot plot or line plot, we should ignore step and make sure that min & max are integer values
+    case 'dotPlot':
+    case 'linePlot':
+      {
+        var intMin = Math.round(min);
+        var intMax = Math.round(max);
+        return {
+          domain: _objectSpread(_objectSpread({}, domain), {}, {
+            step: 1,
+            labelStep: 1,
+            min: 0,
+            max: 1
+          }),
+          range: _objectSpread(_objectSpread({}, range), {}, {
+            min: intMin,
+            max: intMin === intMax ? intMin + 1 : intMax,
+            labelStep: labelStep,
+            step: 1
+          })
+        };
+      }
+
+    default:
+      return {
+        domain: _objectSpread(_objectSpread({}, domain), {}, {
+          step: 1,
+          labelStep: 1,
+          min: 0,
+          max: 1
+        }),
+        range: _objectSpread(_objectSpread({}, range), {}, {
+          labelStep: labelStep,
+          step: step
+        })
+      };
+  }
+};
+
+exports.getDomainAndRangeByChartType = getDomainAndRangeByChartType;
+
+var getGridLinesAndAxisByChartType = function getGridLinesAndAxisByChartType(range, chartType) {
+  switch (chartType) {
+    case 'lineDot':
+    case 'lineCross':
+      return {
+        verticalLines: undefined,
+        horizontalLines: getTickValues(range),
+        leftAxis: true
+      };
+
+    case 'dotPlot':
+    case 'linePlot':
+      return {
+        verticalLines: [],
+        horizontalLines: [],
+        leftAxis: false
+      };
+
+    default:
+      return {
+        verticalLines: [],
+        horizontalLines: getTickValues(range),
+        leftAxis: true
+      };
+  }
+};
+
+exports.getGridLinesAndAxisByChartType = getGridLinesAndAxisByChartType;
+
+var getRotateAngle = function getRotateAngle(fontSize, height) {
+  if (height >= fontSize * 2) {
+    return 25;
+  }
+
+  return 0;
+};
+
+exports.getRotateAngle = getRotateAngle;
+
+var getTopPadding = function getTopPadding(barWidth) {
+  if (barWidth < 30) {
+    return 50;
+  }
+
+  if (barWidth < 40) {
+    return 30;
+  }
+
+  if (barWidth < 60) {
+    return 15;
+  }
+
+  return 0;
+}; // This function calculates the transformation scale for SVG and the icon's vertical distance from its category
+
+
+exports.getTopPadding = getTopPadding;
+
+var getScale = function getScale(width) {
+  var scale, deltay;
+
+  if (width > 91) {
+    scale = 1.3;
+    deltay = -55;
+  } else if (width > 45) {
+    scale = 1.1;
+    deltay = -45;
+  } else if (width > 40) {
+    scale = 0.5 + (width - 34) * 0.02;
+    deltay = -25;
+  } else if (width > 30) {
+    scale = 0.5 + (width - 34) * 0.02;
+    deltay = -20;
+  } else {
+    scale = 0.5 * Math.pow(0.98, 34 - width); // 0.98 is the reduction factor. Adjust to control scaling.
+
+    deltay = -15;
+  }
+
+  return {
+    scale: scale,
+    deltay: deltay
+  };
+};
+
+exports.getScale = getScale;
+
+var getAdjustedX = function getAdjustedX(width, scaleValue) {
+  var innerWidthOriginal = 57;
+  var effectiveInnerWidth = innerWidthOriginal * scaleValue;
+  return (width - effectiveInnerWidth) / 2;
+};
+
+exports.getAdjustedX = getAdjustedX;
+//# sourceMappingURL=utils.js.map

package/lib/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils.js"],"names":["tickCount","utils","bounds","point","bandKey","d","index","label","dataToXBand","scaleX","data","width","type","rangeRound","domain","map","padding","range","getTickValues","prop","tickValues","tickVal","min","max","push","Math","round","step","getDomainAndRangeByChartType","chartType","labelStep","isNaN","intMin","intMax","getGridLinesAndAxisByChartType","verticalLines","undefined","horizontalLines","leftAxis","getRotateAngle","fontSize","height","getTopPadding","barWidth","getScale","scale","deltay","pow","getAdjustedX","scaleValue","innerWidthOriginal","effectiveInnerWidth"],"mappings":"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","sourcesContent":["import { scaleBand, scalePoint } from '@vx/scale';\nimport { utils } from '@pie-lib/plot';\n\nexport const tickCount = utils.tickCount;\nexport const bounds = utils.bounds;\nexport const point = utils.point;\n\nexport const bandKey = (d, index) => `${index}-${d.label || '-'}`;\n\nexport const dataToXBand = (scaleX, data, width, type) => {\n  switch (type) {\n    case 'bar':\n    case 'dotPlot':\n    case 'linePlot':\n      return scaleBand({\n        rangeRound: [0, width],\n        domain: data && data.map(bandKey),\n        padding: 0.2,\n      });\n\n    case 'histogram':\n      return scaleBand({\n        rangeRound: [0, width],\n        domain: data && data.map(bandKey),\n        padding: 0,\n      });\n\n    case 'lineCross':\n    case 'lineDot':\n      return scalePoint({\n        domain: data && data.map(bandKey),\n        rangeRound: [0, width],\n      });\n\n    default:\n      return scaleBand({\n        range: [0, width],\n        domain: data && data.map(bandKey),\n        padding: 0,\n      });\n  }\n};\n\nexport const getTickValues = (prop = {}) => {\n  const tickValues = [];\n  let tickVal = prop.min;\n\n  while (tickVal <= prop.max) {\n    tickValues.push(tickVal);\n    tickVal = Math.round((tickVal + prop.step) * 10000) / 10000;\n  }\n\n  return tickValues;\n};\n\nexport const getDomainAndRangeByChartType = (domain, range, chartType) => {\n  let { step, labelStep, min, max } = range || {};\n\n  if (!min) {\n    min = 0;\n  }\n\n  if (!max || max < 0) {\n    max = range.min + 1;\n  }\n\n  if (!step) {\n    step = labelStep || 1;\n  }\n  if (!labelStep || (isNaN(labelStep) && step)) {\n    labelStep = step || 1;\n  }\n\n  range.max = max;\n\n  switch (chartType) {\n    // if chart is dot plot or line plot, we should ignore step and make sure that min & max are integer values\n    case 'dotPlot':\n    case 'linePlot': {\n      const intMin = Math.round(min);\n      const intMax = Math.round(max);\n\n      return {\n        domain: {\n          ...domain,\n          step: 1,\n          labelStep: 1,\n          min: 0,\n          max: 1,\n        },\n        range: {\n          ...range,\n          min: intMin,\n          max: intMin === intMax ? intMin + 1 : intMax,\n          labelStep,\n          step: 1,\n        },\n      };\n    }\n\n    default:\n      return {\n        domain: {\n          ...domain,\n          step: 1,\n          labelStep: 1,\n          min: 0,\n          max: 1,\n        },\n        range: {\n          ...range,\n          labelStep,\n          step,\n        },\n      };\n  }\n};\n\nexport const getGridLinesAndAxisByChartType = (range, chartType) => {\n  switch (chartType) {\n    case 'lineDot':\n    case 'lineCross':\n      return {\n        verticalLines: undefined,\n        horizontalLines: getTickValues(range),\n        leftAxis: true,\n      };\n\n    case 'dotPlot':\n    case 'linePlot':\n      return {\n        verticalLines: [],\n        horizontalLines: [],\n        leftAxis: false,\n      };\n\n    default:\n      return {\n        verticalLines: [],\n        horizontalLines: getTickValues(range),\n        leftAxis: true,\n      };\n  }\n};\n\nexport const getRotateAngle = (fontSize, height) => {\n  if (height >= fontSize * 2) {\n    return 25;\n  }\n\n  return 0;\n};\n\nexport const getTopPadding = (barWidth) => {\n  if (barWidth < 30) {\n    return 50;\n  }\n\n  if (barWidth < 40) {\n    return 30;\n  }\n\n  if (barWidth < 60) {\n    return 15;\n  }\n\n  return 0;\n};\n\n// This function calculates the transformation scale for SVG and the icon's vertical distance from its category\nexport const getScale = (width) => {\n  let scale, deltay;\n\n  if (width > 91) {\n    scale = 1.3;\n    deltay = -55;\n  } else if (width > 45) {\n    scale = 1.1;\n    deltay = -45;\n  } else if (width > 40) {\n    scale = 0.5 + (width - 34) * 0.02;\n    deltay = -25;\n  } else if (width > 30) {\n    scale = 0.5 + (width - 34) * 0.02;\n    deltay = -20;\n  } else {\n    scale = 0.5 * Math.pow(0.98, 34 - width); // 0.98 is the reduction factor. Adjust to control scaling.\n    deltay = -15;\n  }\n\n  return { scale, deltay };\n};\n\nexport const getAdjustedX = (width, scaleValue) => {\n  const innerWidthOriginal = 57;\n  const effectiveInnerWidth = innerWidthOriginal * scaleValue;\n  return (width - effectiveInnerWidth) / 2;\n};\n"],"file":"utils.js"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "5.16.1-beta.0",
+  "version": "5.18.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": "beta",
+    "@pie-lib/translator": "beta",
     "@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": "ecb1ca31aa1c24d23af00d5ad04ce73ed8871057"
 }

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