@oliasoft-open-source/charts-library 3.6.1 → 3.6.3

package/dist/declaration.d.ts

@@ -15,3 +15,11 @@ declare module '*.svg' {
 }
 
 declare module 'chartjs-plugin-dragdata';
+
+declare module 'react-base64-downloader' {
+  export function triggerBase64Download(base64: string, filename: string): void;
+}
+
+declare module '@oliasoft-open-source/react-ui-library';
+
+declare module 'html-to-image';

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, createContext as createContext$2, memo, useLayoutEffect, useState, useCallback, useMemo, isValidElement, cloneElement, useContext, useReducer } from "react";
-import { round as round$2, toNum, displayNumber, isCloseTo, roundByMagnitude } from "@oliasoft-open-source/units";
+import { round as round$2, displayNumber, isCloseTo, roundByMagnitude, toNum } 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, Portal } from "@oliasoft-open-source/react-ui-library";
@@ -13369,7 +13369,12 @@ const getAxisPosition = (axisType, i2) => {
   return i2 % 2 === 0 ? positionA : positionB;
 };
 const getClassName = (chartStyling, styles2) => {
-  const { width, height, staticChartHeight, squareAspectRatio: squareAspectRatio2 } = chartStyling;
+  const {
+    width,
+    height,
+    staticChartHeight = false,
+    squareAspectRatio: squareAspectRatio2 = 0
+  } = chartStyling;
   const squareAspectRatioStyle = squareAspectRatio2 ? styles2.squareAspectRatio : "";
   let heightStyles = "";
   if (width || height) {
@@ -22766,7 +22771,8 @@ const initialState = ({ options, persistenceId }) => {
     axes: stateAxes,
     showAnnotationLineIndex: setAnnotations(annotationsData),
     showTable: false,
-    enableDragPoints: dragData.enableDragData && enableDragPoints
+    enableDragPoints: (dragData == null ? void 0 : dragData.enableDragData) && enableDragPoints,
+    initialAxesRanges: []
   };
 };
 var DefaultContext = {
@@ -23996,10 +24002,16 @@ const useChartFunctions = ({
       const { datasetIndex } = legendItem2;
       const chartInstance = chartRef == null ? void 0 : chartRef.current;
       const { datasets } = (chartInstance == null ? void 0 : chartInstance.data) || {};
-      const dataset = datasets[datasetIndex];
-      const meta = chartInstance.getDatasetMeta(datasetIndex);
-      meta.hidden = meta.hidden === null ? !dataset.hidden : null;
-      if (annotations.controlAnnotation && dataset.isAnnotation) {
+      const dataset = datasets == null ? void 0 : datasets[datasetIndex];
+      const meta = chartInstance == null ? void 0 : chartInstance.getDatasetMeta(datasetIndex);
+      if (meta) {
+        if (meta.hidden === null) {
+          meta.hidden = !dataset.hidden;
+        } else {
+          meta.hidden = null;
+        }
+      }
+      if (annotations.controlAnnotation && (dataset == null ? void 0 : dataset.isAnnotation)) {
         const { annotationIndex } = dataset;
         dispatch({ type: "TOGGLE_ANNOTATION", payload: { annotationIndex } });
       }
@@ -24007,7 +24019,9 @@ const useChartFunctions = ({
         datasets == null ? void 0 : datasets.forEach((ds, ix) => {
           if (ds.displayGroup !== dataset.displayGroup)
             return;
-          chartInstance.getDatasetMeta(ix).hidden = meta.hidden;
+          if (chartInstance && meta) {
+            chartInstance.getDatasetMeta(ix).hidden = meta.hidden;
+          }
         });
       }
       if (onLegendClick) {
@@ -24230,10 +24244,11 @@ const reducer = (state, action) => {
       });
     case actionTypes.UnitUpdated:
       return produce(state, (draft) => {
+        var _a2;
         const { name, value, id } = action.payload;
-        const axis = draft.find((a2) => a2.id === id);
-        if (axis) {
-          axis.unit[name] = value;
+        const unit = (_a2 = draft.find((a2) => a2.id === id)) == null ? void 0 : _a2.unit;
+        if (unit && name) {
+          unit[name] = value;
         }
       });
     default:
@@ -24281,8 +24296,8 @@ const AxesOptionsPopover = (optionsPopover) => {
     if (valid) {
       const sanitizedFormState = formState.map((axis) => ({
         ...axis,
-        min: toNum(axis.min),
-        max: toNum(axis.max)
+        min: typeof axis.min === "string" ? Number(axis.min) : axis.min,
+        max: typeof axis.max === "string" ? Number(axis.max) : axis.max
       }));
       onUpdateAxes({
         axes: sanitizedFormState
@@ -24324,7 +24339,9 @@ const AxesOptionsPopover = (optionsPopover) => {
         (el) => el.id === axis.id
       );
       const axisLabel = axisControl == null ? void 0 : axisControl.label;
-      const axisState = formState.find((a2) => a2.id === axis.id);
+      const axisState = formState.find(
+        (a2) => a2.id === axis.id
+      );
       const axisErrors = errors == null ? void 0 : errors.find((a2) => a2.id === axis.id);
       const { min, max, unit } = axisState || {};
       const minErrorMsg = ((_a3 = axisErrors == null ? void 0 : axisErrors.min) == null ? void 0 : _a3[0]) ? translations[axisErrors.min[0]] : null;
@@ -24368,7 +24385,7 @@ const AxesOptionsPopover = (optionsPopover) => {
           {
             name: "selectedUnit",
             options: (_c2 = axis == null ? void 0 : axis.unit) == null ? void 0 : _c2.options,
-            value: unit == null ? void 0 : unit.selectedUnit,
+            value: typeof unit !== "string" ? unit == null ? void 0 : unit.selectedUnit : void 0,
             onChange: (e2) => {
               onEditUnit({
                 name: e2.target.name,
@@ -24570,7 +24587,7 @@ const Controls = ({
               onTogglePan,
               onToggleZoom,
               enableDragPoints,
-              isDragDataAllowed: dragData.enableDragData,
+              isDragDataAllowed: dragData == null ? void 0 : dragData.enableDragData,
               onToggleDragPoints,
               onDisableDragOptions,
               translations
@@ -24639,6 +24656,10 @@ function useMeasure() {
 const useMeasure$1 = isBrowser && typeof window.ResizeObserver !== "undefined" ? useMeasure : function() {
   return [noop, defaultState];
 };
+const getGeneratedLabels = (chart2) => {
+  var _a2, _b2, _c2, _d2, _e2;
+  return ((_e2 = (_d2 = (_c2 = (_b2 = (_a2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a2.plugins) == null ? void 0 : _b2.legend) == null ? void 0 : _c2.labels) == null ? void 0 : _d2.generateLabels) == null ? void 0 : _e2.call(_d2, chart2)) ?? [];
+};
 const legend = "_legend_wpro0_1";
 const isDragging = "_isDragging_wpro0_8";
 const legendItems = "_legendItems_wpro0_11";
@@ -24774,7 +24795,6 @@ const LegendItem = ({ hidden, dataset, handleClick }) => {
 };
 const LEGEND_MARGIN = 4;
 const LegendPanel = forwardRef((props, ref) => {
-  var _a2, _b2, _c2, _d2;
   const {
     legendPosition,
     chartRef,
@@ -24800,7 +24820,7 @@ const LegendPanel = forwardRef((props, ref) => {
   const { data, chartArea, height = 0, width = 0 } = chart2;
   const { datasets } = data;
   const { top: top2, left: left2, bottom: bottom2, right: right2 } = chartArea;
-  const items = ((_d2 = (_c2 = (_b2 = (_a2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a2.plugins) == null ? void 0 : _b2.legend) == null ? void 0 : _c2.labels) == null ? void 0 : _d2.generateLabels(chart2)) ?? [];
+  const items = getGeneratedLabels(chart2);
   const style = {
     left: legendPosition.includes("left") ? left2 : void 0,
     right: legendPosition.includes("right") ? width - right2 : void 0,
@@ -24974,9 +24994,20 @@ const TextLabelPosition = {
   BOTTOM_CENTER: "bottom-center",
   BOTTOM_RIGHT: "bottom-right"
 };
+const defaultAxis = (position) => ({
+  label: "",
+  position,
+  color: "",
+  unit: {
+    options: [],
+    selectedUnit: "",
+    setSelectedUnit: () => {
+    }
+  }
+});
 const defaultAxes$1 = (axes) => ({
-  x: (axes == null ? void 0 : axes.x) || [{}],
-  y: (axes == null ? void 0 : axes.y) || [{}]
+  x: (axes == null ? void 0 : axes.x) || [defaultAxis("bottom")],
+  y: (axes == null ? void 0 : axes.y) || [defaultAxis("left")]
 });
 const defaultAdditionalAxesOptions$1 = (options) => ({
   chartScaleType: (options == null ? void 0 : options.chartScaleType) || "linear",
@@ -25070,7 +25101,7 @@ const getDefaultProps$2 = (props) => {
   return {
     persistenceId: (chart2 == null ? void 0 : chart2.persistenceId) ?? "",
     controlsPortalId: (chart2 == null ? void 0 : chart2.controlsPortalId) ?? "",
-    testId: (chart2 == null ? void 0 : chart2.testId) ?? null,
+    testId: (chart2 == null ? void 0 : chart2.testId) ?? void 0,
     data: chart2 == null ? void 0 : chart2.data,
     options: {
       title: (options == null ? void 0 : options.title) ?? "",
@@ -25192,7 +25223,7 @@ const calculateDelta$1 = (tickValue, ticks) => {
   }
   return delta;
 };
-const formatAxisLabelNumbers = (tickValue, ticks, locale = "en-gb") => {
+const formatAxisLabelNumbers = (tickValue, ticks) => {
   if (tickValue === 0 || tickValue === null) {
     return "0";
   }
@@ -25471,23 +25502,29 @@ const getLineChartDataLabels = (options) => {
     formatter: (_value, context) => context.dataset.data[context.dataIndex].label || ""
   } : { display: false };
 };
-const annotationEnter = ({ element }, { chart: chart2 }) => {
+const annotationEnter = (element, chart2) => {
   var _a2;
   if ((_a2 = element.options.scaleID) == null ? void 0 : _a2.includes(AxisType.X)) {
     element.options.label.xAdjust = chart2.chartArea.left;
   }
   element.options.borderWidth = BORDER_WIDTH.HOVERED;
-  if (element.options.label)
+  if (element.options.label) {
+    element.label.options.display = true;
     element.options.label.enabled = true;
+  }
   chart2.draw();
   chart2.canvas.style.cursor = CursorStyle.Pointer;
+  return true;
 };
-const annotationLeave = ({ element }, { chart: chart2 }) => {
+const annotationLeave = (element, chart2) => {
   element.options.borderWidth = BORDER_WIDTH.INITIAL;
-  if (element.options.label)
+  if (element.options.label) {
+    element.label.options.display = false;
     element.options.label.enabled = false;
+  }
   chart2.draw();
   chart2.canvas.style.cursor = CursorStyle.Initial;
+  return true;
 };
 const generateAnnotations = (options, state) => {
   const { annotationsData } = (options == null ? void 0 : options.annotations) || {};
@@ -25506,22 +25543,22 @@ const generateAnnotations = (options, state) => {
     const label = type === "line" ? {
       backgroundColor: color2,
       content: curr == null ? void 0 : curr.label,
-      enabled: false,
+      display: false,
       position: Position.Top
     } : {
       content: curr == null ? void 0 : curr.label,
-      enabled: true,
+      display: true,
       font: { weight: "normal" }
     };
-    const enter = (context, event) => {
+    const enter = ({ element }, { chart: chart2 }) => {
       if (type !== "line")
         return;
-      annotationEnter(context, event);
+      annotationEnter(element, chart2);
     };
-    const leave = (context, event) => {
+    const leave = ({ element }, { chart: chart2 }) => {
       if (type !== "line")
         return;
-      annotationLeave(context, event);
+      annotationLeave(element, chart2);
     };
     const annotation2 = {
       ...curr,
@@ -25796,7 +25833,7 @@ const useChartPlugins = ({ options, resetZoom: resetZoom2 }) => {
     [resetZoom2]
   );
   const handleDoubleClick = useCallback(
-    (_chart, args) => {
+    (_2, args) => {
       const { event } = args;
       if (event.type === DOUBLE_CLICK) {
         debouncedResetZoom();
@@ -26152,6 +26189,7 @@ Chart$2.register(
   chartAreaTextPlugin
 );
 const LineChart = (props) => {
+  var _a2, _b2;
   setDefaultTheme();
   const chartRef = useRef(null);
   const { table: table2 } = props;
@@ -26165,7 +26203,7 @@ const LineChart = (props) => {
     controlsPortalId
   } = chart2;
   const { annotations, axes, chartStyling, graph } = options;
-  const showCustomLegend = !options.legend.customLegend.customLegendContainerID;
+  const showCustomLegend = !((_b2 = (_a2 = options == null ? void 0 : options.legend) == null ? void 0 : _a2.customLegend) == null ? void 0 : _b2.customLegendContainerID);
   const [state, dispatch] = useReducer(
     reducer$1,
     {
@@ -39465,9 +39503,6 @@ const BarChart = (props) => {
               mode: ChartHoverMode.Nearest,
               intersect: true
             },
-            // elements: {
-            //   bar: { pointStyle: PointStyle.Circle },
-            // },
             scales: getBarChartScales(chart2),
             plugins: {
               title: getTitle(options),