@oliasoft-open-source/charts-library 3.0.5-beta-1 → 3.1.0-beta-2

package/dist/index.js

@@ -7,7 +7,7 @@ var __publicField = (obj, key, value) => {
 var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import React, { forwardRef, useRef, useEffect, useMemo, useCallback, useState, useReducer } from "react";
-import { round as round$2, toNum, isCloseTo } from "@oliasoft-open-source/units";
+import { round as round$2, toNum, displayNumber, isCloseTo } from "@oliasoft-open-source/units";
 import cx from "classnames";
 import { produce } from "immer";
 import { Icon, Tooltip as Tooltip$2, Button, Flex, Text, Menu, Popover, Field, InputGroup, NumberInput, InputGroupAddon, Select, ButtonGroup, Spacer } from "@oliasoft-open-source/react-ui-library";
@@ -1284,7 +1284,7 @@ const formatters$1 = {
       if (maxTick < 1e-4 || maxTick > 1e15) {
         notation = "scientific";
       }
-      delta = calculateDelta$1(tickValue, ticks);
+      delta = calculateDelta$2(tickValue, ticks);
     }
     const logDelta = log10$1(Math.abs(delta));
     const numDecimal = Math.max(Math.min(-1 * Math.floor(logDelta), 20), 0);
@@ -1314,7 +1314,7 @@ const formatters$1 = {
     return "";
   }
 };
-function calculateDelta$1(tickValue, ticks) {
+function calculateDelta$2(tickValue, ticks) {
   let delta = ticks.length > 3 ? ticks[2].value - ticks[1].value : ticks[1].value - ticks[0].value;
   if (Math.abs(delta) >= 1 && tickValue !== Math.floor(tickValue)) {
     delta = tickValue - Math.floor(tickValue);
@@ -23677,7 +23677,7 @@ const formatters = {
       if (maxTick < 1e-4 || maxTick > 1e15) {
         notation = "scientific";
       }
-      delta = calculateDelta(tickValue, ticks);
+      delta = calculateDelta$1(tickValue, ticks);
     }
     const logDelta = log10(Math.abs(delta));
     const numDecimal = Math.max(Math.min(-1 * Math.floor(logDelta), 20), 0);
@@ -23696,7 +23696,7 @@ const formatters = {
     return "";
   }
 };
-function calculateDelta(tickValue, ticks) {
+function calculateDelta$1(tickValue, ticks) {
   let delta = ticks.length > 3 ? ticks[2].value - ticks[1].value : ticks[1].value - ticks[0].value;
   if (Math.abs(delta) >= 1 && tickValue !== Math.floor(tickValue)) {
     delta = tickValue - Math.floor(tickValue);
@@ -31207,14 +31207,8 @@ const isLessThanMax = (value, max) => {
 const isGreaterThanMin = (value, min) => {
   return value === void 0 || min === void 0 || Number(value) > Number(min);
 };
-const truncateDecimals = (number, digits) => {
-  const multiplier = 10 ** digits;
-  const adjustedNum = number * multiplier;
-  const truncatedNum = Math[adjustedNum < 0 ? "ceil" : "floor"](adjustedNum);
-  return truncatedNum / multiplier;
-};
 const generateAxisId = (axisType, index2 = 0, hasMultiAxes = false) => {
-  const i2 = hasMultiAxes && index2 !== 0 ? index2 + 1 : "";
+  const i2 = hasMultiAxes ? index2 + 1 : "";
   return `${axisType}${i2}`;
 };
 const getAxisTypeFromKey = (string) => {
@@ -32494,6 +32488,7 @@ const LineChartPropTypes = {
     testId: PropTypes.string,
     data: PropTypes.object.isRequired,
     options: PropTypes.shape({
+      scales: PropTypes.object,
       title: PropTypes.oneOfType([
         PropTypes.string,
         PropTypes.arrayOf(PropTypes.string)
@@ -32524,7 +32519,6 @@ const LineChartPropTypes = {
         reverse: PropTypes.bool,
         beginAtZero: PropTypes.bool,
         stepSize: PropTypes.number,
-        truncateAxisNumbersToDigitsCallback: PropTypes.number,
         suggestedMin: PropTypes.number,
         suggestedMax: PropTypes.number,
         range: PropTypes.shape({
@@ -32658,6 +32652,7 @@ const getDefaultProps$2 = (props) => {
     data: props.chart.data,
     options: {
       title: props.chart.options.title || "",
+      scales: props.chart.options.scales || {},
       axes: {
         x: props.chart.options.axes.x || [{}],
         y: props.chart.options.axes.y || [{}]
@@ -32667,7 +32662,6 @@ const getDefaultProps$2 = (props) => {
         reverse: props.chart.options.additionalAxesOptions.reverse || false,
         beginAtZero: props.chart.options.additionalAxesOptions.beginAtZero || false,
         stepSize: props.chart.options.additionalAxesOptions.stepSize,
-        truncateAxisNumbersToDigitsCallback: props.chart.options.additionalAxesOptions.truncateAxisNumbersToDigitsCallback,
         suggestedMin: props.chart.options.additionalAxesOptions.suggestedMin,
         suggestedMax: props.chart.options.additionalAxesOptions.suggestedMax,
         range: props.chart.options.additionalAxesOptions.range,
@@ -32832,33 +32826,60 @@ const generateLineChartDatasets = (datasets, state, options, { label }) => {
     };
   });
 };
+const calculateDelta = (tickValue, ticks) => {
+  let delta = ticks.length > 3 ? ticks[2].value - ticks[1].value : ticks[1].value - ticks[0].value;
+  if (Math.abs(delta) >= 1 && tickValue !== Math.floor(tickValue)) {
+    delta = tickValue - Math.floor(tickValue);
+  }
+  return delta;
+};
+const formatAxisLabelNumbers = (tickValue, ticks, locale = "en-gb") => {
+  if (tickValue === 0 || tickValue === null) {
+    return "0";
+  }
+  let notation;
+  let delta = tickValue;
+  if (ticks.length > 1) {
+    const maxTick = Math.max(
+      Math.abs(ticks[0].value),
+      Math.abs(ticks[ticks.length - 1].value)
+    );
+    if (maxTick < 1e-4 || maxTick > 1e15) {
+      notation = "scientific";
+    }
+    delta = calculateDelta(tickValue, ticks);
+  }
+  const logDelta = Math.log10(Math.abs(delta));
+  const numDecimal = isNaN(logDelta) ? 1 : Math.max(Math.min(-1 * Math.floor(logDelta), 20), 0);
+  return displayNumber(round$2(tickValue, numDecimal), {
+    scientific: notation === "scientific",
+    roundScientificCoefficientToNDecimals: numDecimal
+  });
+};
 const getLineChartAxis = (options, axisType, state, currentScales, i2 = 0) => {
-  var _a2, _b2, _c2, _d2, _e2;
+  var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
   const axisData = currentScales || options.axes[axisType][0];
   const stateAxis = state.axes.filter((axis) => axis.id.startsWith(axisType))[i2];
+  const ticksConfigFromProps = (_b2 = (_a2 = options == null ? void 0 : options.scales) == null ? void 0 : _a2[`${i2 === 0 ? axisType : axisType + i2}`]) == null ? void 0 : _b2.ticks;
   const { additionalAxesOptions } = options;
   const getTicks = () => {
-    const truncateAxisNumbersToDigitsCallback = Number.isInteger(
-      additionalAxesOptions.truncateAxisNumbersToDigitsCallback
-    ) ? {
-      callback: (tick) => truncateDecimals(
-        tick,
-        additionalAxesOptions.truncateAxisNumbersToDigitsCallback
-      )
-    } : {};
-    const ticks = additionalAxesOptions.chartScaleType === ScaleType.Logarithmic ? {
-      callback: (tick) => {
-        return LOGARITHMIC_STEPS.includes(tick) ? tick.toLocaleString() : "";
-      }
-    } : {
-      stepSize: axisData.stepSize || (axisType === AxisType.Y ? additionalAxesOptions.stepSize : null),
-      ...truncateAxisNumbersToDigitsCallback
+    const isLogarithmic = additionalAxesOptions.chartScaleType === ScaleType.Logarithmic;
+    const ticksFormattingCallback = (tick, _index, ticks2) => {
+      return isLogarithmic ? LOGARITHMIC_STEPS.includes(tick) ? formatAxisLabelNumbers(tick, ticks2) : "" : formatAxisLabelNumbers(tick, ticks2);
     };
-    return {
-      ...ticks,
-      includeBounds: false
+    const ticks = {
+      ...!isLogarithmic ? {
+        stepSize: axisData.stepSize ?? (axisType === AxisType.Y ? additionalAxesOptions.stepSize : null)
+      } : {},
+      callback: ticksFormattingCallback,
+      includeBounds: false,
       //OW-10088 disable irregular axis ticks
+      ...ticksConfigFromProps,
+      font: {
+        size: 14
+      }
     };
+    return ticks;
   };
   return {
     type: additionalAxesOptions.chartScaleType,
@@ -32867,10 +32888,10 @@ const getLineChartAxis = (options, axisType, state, currentScales, i2 = 0) => {
     reverse: axisType === AxisType.Y ? additionalAxesOptions.reverse : false,
     suggestedMax: additionalAxesOptions.suggestedMax,
     suggestedMin: additionalAxesOptions.suggestedMin,
-    min: (stateAxis == null ? void 0 : stateAxis.min) ?? ((_b2 = (_a2 = additionalAxesOptions == null ? void 0 : additionalAxesOptions.range) == null ? void 0 : _a2[axisType]) == null ? void 0 : _b2.min),
-    max: (stateAxis == null ? void 0 : stateAxis.max) ?? ((_d2 = (_c2 = additionalAxesOptions == null ? void 0 : additionalAxesOptions.range) == null ? void 0 : _c2[axisType]) == null ? void 0 : _d2.max),
+    min: (stateAxis == null ? void 0 : stateAxis.min) ?? ((_d2 = (_c2 = additionalAxesOptions == null ? void 0 : additionalAxesOptions.range) == null ? void 0 : _c2[axisType]) == null ? void 0 : _d2.min),
+    max: (stateAxis == null ? void 0 : stateAxis.max) ?? ((_f2 = (_e2 = additionalAxesOptions == null ? void 0 : additionalAxesOptions.range) == null ? void 0 : _e2[axisType]) == null ? void 0 : _f2.max),
     title: {
-      display: (_e2 = axisData.label) == null ? void 0 : _e2.length,
+      display: (_g2 = axisData.label) == null ? void 0 : _g2.length,
       text: axisData.label,
       padding: 0
     },
@@ -33145,7 +33166,11 @@ const generateAnnotations = (options, state) => {
     if (!((_a2 = state == null ? void 0 : state.showAnnotationLineIndex) == null ? void 0 : _a2.includes(i2))) {
       return { ...acc };
     }
-    const scaleID = curr == null ? void 0 : curr.annotationAxis;
+    const getScaleId = () => {
+      var _a3;
+      const axisType = curr.annotationAxis;
+      return ((_a3 = options.axes[axisType]) == null ? void 0 : _a3.length) > 1 ? `${axisType}1` : axisType;
+    };
     const color2 = (curr == null ? void 0 : curr.color) || COLORS[i2];
     const type = (curr == null ? void 0 : curr.type) || "line";
     const adjustScaleRange2 = curr == null ? void 0 : curr.adjustScaleRange;
@@ -33175,7 +33200,7 @@ const generateAnnotations = (options, state) => {
     const annotation2 = {
       ...curr,
       id: `${curr == null ? void 0 : curr.label}-${curr == null ? void 0 : curr.value}-${i2}`,
-      scaleID,
+      scaleID: getScaleId(),
       label,
       backgroundColor: color2,
       borderColor,
@@ -34516,7 +34541,7 @@ const getDefaultProps = (props) => {
   };
   return chart2;
 };
-const getBarChartAxis = (chart2, axisType, currentScales) => {
+const getBarChartAxis = (chart2, axisType, currentScales, i2) => {
   var _a2, _b2, _c2, _d2, _e2, _f2, _g2, _h2, _i2, _j2;
   const isDirectionVertical = isVertical(chart2.options.direction);
   const axisData = currentScales || chart2.options.axes[axisType][0];
@@ -34532,18 +34557,26 @@ const getBarChartAxis = (chart2, axisType, currentScales) => {
     return axisType === axisWithReverse ? chart2.options.additionalAxesOptions.reverse : false;
   };
   const getTicks = () => {
-    const areLogarithmicTicks = isDirectionCompatibleWithAxisType && chart2.options.additionalAxesOptions.chartScaleType === ScaleType.Logarithmic;
-    if (areLogarithmicTicks) {
-      return {
-        callback: (tick) => {
-          return LOGARITHMIC_STEPS.includes(tick) ? tick.toLocaleString() : "";
-        }
-      };
-    } else {
-      return {
-        stepSize: axisData.stepSize || chart2.options.additionalAxesOptions.stepSize
-      };
-    }
+    var _a3, _b3, _c3, _d3;
+    const additionalAxesOptions = (_a3 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a3.additionalAxesOptions;
+    const ticksConfigFromProps = (_d3 = (_c3 = (_b3 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _b3.scales) == null ? void 0 : _c3[`${i2 === 0 ? axisType : axisType + i2}`]) == null ? void 0 : _d3.ticks;
+    const isLogarithmic = isDirectionCompatibleWithAxisType && additionalAxesOptions.chartScaleType === ScaleType.Logarithmic;
+    const ticksFormattingCallback = (tick, _index, ticks2) => {
+      return isLogarithmic ? LOGARITHMIC_STEPS.includes(tick) ? formatAxisLabelNumbers(tick, ticks2) : "" : formatAxisLabelNumbers(tick, ticks2);
+    };
+    const ticks = {
+      ...!isLogarithmic ? {
+        stepSize: axisData.stepSize ?? (axisType === AxisType.Y ? additionalAxesOptions.stepSize : null)
+      } : {},
+      callback: ticksFormattingCallback,
+      includeBounds: false,
+      //OW-10088 disable irregular axis ticks
+      ...ticksConfigFromProps,
+      font: {
+        size: 14
+      }
+    };
+    return ticks;
   };
   return {
     type: getScaleType(),
@@ -34573,9 +34606,8 @@ const getBarChartAxes = (chart2, axisType) => {
     const color2 = curr.color || COLORS[i2] || generateRandomColor$1(COLORS);
     axisData.color = color2;
     axisData.position = curr.position || getAxisPosition(axisType, i2);
-    const axis = getBarChartAxis(chart2, axisType, axisData);
-    const axisId = i2 === 0 ? axisType : `${axisType}${i2 + 1}`;
-    return { ...acc, [axisId]: axis };
+    const axis = getBarChartAxis(chart2, axisType, axisData, i2);
+    return { ...acc, [axisType + (i2 + 1)]: axis };
   }, {});
   return axes;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oliasoft-open-source/charts-library",
-  "version": "3.0.5-beta-1",
+  "version": "3.1.0-beta-2",
   "description": "React Chart Library (based on Chart.js and react-chart-js-2)",
   "homepage": "https://gitlab.com/oliasoft-open-source/charts-library",
   "bugs": {
@@ -50,7 +50,7 @@
   },
   "devDependencies": {
     "@oliasoft-open-source/react-ui-library": "^3.6.5",
-    "@oliasoft-open-source/units": "^v3.0.0",
+    "@oliasoft-open-source/units": "^3.1.1",
     "@storybook/addon-actions": "^7.0.18",
     "@storybook/addon-docs": "^7.0.18",
     "@storybook/react": "^7.0.18",
@@ -93,7 +93,7 @@
   },
   "peerDependencies": {
     "@oliasoft-open-source/react-ui-library": "^3.6.5",
-    "@oliasoft-open-source/units": "^v3.0.0",
+    "@oliasoft-open-source/units": "^3.1.1",
     "classnames": "^2.3.2",
     "immer": "^10.0.2",
     "lodash": "^4.17.21",