@oliasoft-open-source/charts-library 4.3.4-beta-1 → 4.3.5

package/dist/index.js

@@ -6,7 +6,8 @@ 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 * as React from "react";
+import React__default, { forwardRef, useRef, useEffect, createContext as createContext$2, memo, useLayoutEffect, useState, useCallback, useMemo, isValidElement, cloneElement, useContext, useReducer } from "react";
 import { produce } from "immer";
 import { round as round$2, displayNumber, isCloseTo, roundByMagnitude } from "@oliasoft-open-source/units";
 import cx from "classnames";
@@ -13086,7 +13087,7 @@ function ChartComponent(props, ref) {
     renderChart();
     return () => destroyChart();
   }, []);
-  return /* @__PURE__ */ React.createElement("canvas", Object.assign({
+  return /* @__PURE__ */ React__default.createElement("canvas", Object.assign({
     ref: canvasRef,
     role: "img",
     height,
@@ -13096,7 +13097,7 @@ function ChartComponent(props, ref) {
 const Chart$1 = /* @__PURE__ */ forwardRef(ChartComponent);
 function createTypedChart(type, registerables) {
   Chart$2.register(registerables);
-  return /* @__PURE__ */ forwardRef((props, ref) => /* @__PURE__ */ React.createElement(Chart$1, Object.assign({}, props, {
+  return /* @__PURE__ */ forwardRef((props, ref) => /* @__PURE__ */ React__default.createElement(Chart$1, Object.assign({}, props, {
     ref,
     type
   })));
@@ -22783,9 +22784,9 @@ const initialState = ({ options, persistenceId }) => {
     initialAxesRanges: []
   };
 };
-const lineOnlyIcon = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJjdXJyZW50Q29sb3IiIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTIgMTIiIHdpZHRoPSIxZW0iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZD0ibTAgMGgxMnYxMmgtMTJ6Ii8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Im0uNSA2LjV2LTFoMTF2MWMtNC4xNjEwNCAwLTYuNjM1NDkgMC0xMSAweiIvPjwvZz48L3N2Zz4=";
-const pointOnlyIcon = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJjdXJyZW50Q29sb3IiIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTIgMTIiIHdpZHRoPSIxZW0iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iNiIgY3k9IjYiIHI9IjIiLz48L3N2Zz4=";
-const lineAndPointIcon = "data:image/svg+xml;base64,PHN2ZyBmaWxsPSJjdXJyZW50Q29sb3IiIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMTIgMTIiIHdpZHRoPSIxZW0iIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZD0ibTAgMGgxMnYxMmgtMTJ6Ii8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Im03LjkzNyA2LjVjLS4xMTEyMi40MjkxMi0uMzYxNzkuODA5MTYtLjcxMjM3IDEuMDgwNDctLjM1MDU4LjI3MTMtLjc4MTMzLjQxODUtMS4yMjQ2My40MTg1cy0uODc0MDUtLjE0NzItMS4yMjQ2My0uNDE4NWMtLjM1MDU4LS4yNzEzMS0uNjAxMTUtLjY1MTM1LS43MTIzNy0xLjA4MDQ3aC0zLjU2M3YtMWgzLjU2M2MuMTExMjItLjQyOTEyLjM2MTc5LS44MDkxNi43MTIzNy0xLjA4MDQ2cy43ODEzMy0uNDE4NTEgMS4yMjQ2My0uNDE4NTEuODc0MDUuMTQ3MjEgMS4yMjQ2My40MTg1MS42MDExNS42NTEzNC43MTIzNyAxLjA4MDQ2aDMuNTYzdjF6Ii8+PC9nPjwvc3ZnPg==";
+const SvgLineOnly = (props) => /* @__PURE__ */ React.createElement("svg", { fill: "currentColor", height: "1em", viewBox: "0 0 12 12", width: "1em", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", ...props }, /* @__PURE__ */ React.createElement("clipPath", { id: "a" }, /* @__PURE__ */ React.createElement("path", { d: "m0 0h12v12h-12z" })), /* @__PURE__ */ React.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "m.5 6.5v-1h11v1c-4.16104 0-6.63549 0-11 0z" })));
+const SvgPointOnly = (props) => /* @__PURE__ */ React.createElement("svg", { fill: "currentColor", height: "1em", viewBox: "0 0 12 12", width: "1em", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("circle", { cx: 6, cy: 6, r: 2 }));
+const SvgLineAndPoint = (props) => /* @__PURE__ */ React.createElement("svg", { fill: "currentColor", height: "1em", viewBox: "0 0 12 12", width: "1em", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", ...props }, /* @__PURE__ */ React.createElement("clipPath", { id: "a" }, /* @__PURE__ */ React.createElement("path", { d: "m0 0h12v12h-12z" })), /* @__PURE__ */ React.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "m7.937 6.5c-.11122.42912-.36179.80916-.71237 1.08047-.35058.2713-.78133.4185-1.22463.4185s-.87405-.1472-1.22463-.4185c-.35058-.27131-.60115-.65135-.71237-1.08047h-3.563v-1h3.563c.11122-.42912.36179-.80916.71237-1.08046s.78133-.41851 1.22463-.41851.87405.14721 1.22463.41851.60115.65134.71237 1.08046h3.563v1z" })));
 const LineOptions = ({
   lineEnabled,
   onToggleLine,
@@ -22796,7 +22797,7 @@ const LineOptions = ({
   const options = [
     {
       label: translations.pointsLines,
-      icon: /* @__PURE__ */ jsx(Icon, { icon: lineAndPointIcon }),
+      icon: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgLineAndPoint, {}) }),
       selected: pointsEnabled && lineEnabled,
       onClick: () => {
         onTogglePoints();
@@ -22804,7 +22805,7 @@ const LineOptions = ({
     },
     {
       label: translations.linesOnly,
-      icon: /* @__PURE__ */ jsx(Icon, { icon: lineOnlyIcon }),
+      icon: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgLineOnly, {}) }),
       selected: !pointsEnabled && lineEnabled,
       onClick: () => {
         onTogglePoints();
@@ -22813,7 +22814,7 @@ const LineOptions = ({
     },
     {
       label: translations.pointsOnly,
-      icon: /* @__PURE__ */ jsx(Icon, { icon: pointOnlyIcon }),
+      icon: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgPointOnly, {}) }),
       selected: pointsEnabled && !lineEnabled,
       onClick: () => {
         onToggleLine();
@@ -22840,7 +22841,7 @@ var DefaultContext = {
   style: void 0,
   attr: void 0
 };
-var IconContext = React.createContext && React.createContext(DefaultContext);
+var IconContext = React__default.createContext && React__default.createContext(DefaultContext);
 var __assign = globalThis && globalThis.__assign || function() {
   __assign = Object.assign || function(t) {
     for (var s2, i2 = 1, n2 = arguments.length; i2 < n2; i2++) {
@@ -22867,14 +22868,14 @@ var __rest = globalThis && globalThis.__rest || function(s2, e2) {
 };
 function Tree2Element(tree) {
   return tree && tree.map(function(node, i2) {
-    return React.createElement(node.tag, __assign({
+    return React__default.createElement(node.tag, __assign({
       key: i2
     }, node.attr), Tree2Element(node.child));
   });
 }
 function GenIcon(data) {
   return function(props) {
-    return React.createElement(IconBase, __assign({
+    return React__default.createElement(IconBase, __assign({
       attr: __assign({}, data.attr)
     }, props), Tree2Element(data.child));
   };
@@ -22888,7 +22889,7 @@ function IconBase(props) {
       className = conf.className;
     if (props.className)
       className = (className ? className + " " : "") + props.className;
-    return React.createElement("svg", __assign({
+    return React__default.createElement("svg", __assign({
       stroke: "currentColor",
       fill: "currentColor",
       strokeWidth: "0"
@@ -22900,9 +22901,9 @@ function IconBase(props) {
       height: computedSize,
       width: computedSize,
       xmlns: "http://www.w3.org/2000/svg"
-    }), title && React.createElement("title", null, title), props.children);
+    }), title && React__default.createElement("title", null, title), props.children);
   };
-  return IconContext !== void 0 ? React.createElement(IconContext.Consumer, null, function(conf) {
+  return IconContext !== void 0 ? React__default.createElement(IconContext.Consumer, null, function(conf) {
     return elem(conf);
   }) : elem(DefaultContext);
 }
@@ -23796,7 +23797,7 @@ async function toPng(node, options = {}) {
 var dist = { exports: {} };
 (function(module, exports) {
   !function(e2, t) {
-    module.exports = t(React);
+    module.exports = t(React__default);
   }(window, function(e2) {
     return function(e3) {
       var t = {};
@@ -25399,7 +25400,7 @@ const handlePointLeave = (element, chart2, annotation2) => {
 };
 const generateAnnotations = (annotationsData) => {
   return annotationsData == null ? void 0 : annotationsData.map((ann, idx) => {
-    var _a2, _b2, _c2, _d2, _e2;
+    var _a2, _b2, _c2, _d2, _e2, _f2;
     const scaleID = (ann == null ? void 0 : ann.annotationAxis) ?? void 0;
     const color2 = (ann == null ? void 0 : ann.color) ?? COLORS[idx];
     const type = (ann == null ? void 0 : ann.type) || AnnotationType.LINE;
@@ -25426,14 +25427,14 @@ const generateAnnotations = (annotationsData) => {
       [AnnotationType.POINT]: {
         backgroundColor: ((_a2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _a2.backgroundColor) ?? TRANSPARENT,
         content: ann == null ? void 0 : ann.label,
-        display: !!(ann == null ? void 0 : ann.label),
-        position: ((_b2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _b2.position) ?? Position.Bottom,
-        color: ((_c2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _c2.color) ?? DEFAULT_COLOR,
-        font: ((_d2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _d2.font) ?? `12px ${DEFAULT_FONT_FAMILY}`,
+        display: ((_b2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _b2.display) ?? !!(ann == null ? void 0 : ann.label),
+        position: ((_c2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _c2.position) ?? Position.Bottom,
+        color: ((_d2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _d2.color) ?? DEFAULT_COLOR,
+        font: ((_e2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _e2.font) ?? `12px ${DEFAULT_FONT_FAMILY}`,
         borderWidth: BORDER_WIDTH.INITIAL,
         padding: 5,
         borderRadius: 3,
-        borderColor: ((_e2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _e2.borderColor) ?? TRANSPARENT
+        borderColor: ((_f2 = ann == null ? void 0 : ann.labelConfig) == null ? void 0 : _f2.borderColor) ?? TRANSPARENT
       },
       [AnnotationType.BOX]: defLabel,
       [AnnotationType.ELLIPSE]: defLabel
@@ -25477,6 +25478,7 @@ const generateAnnotations = (annotationsData) => {
     const onDragEnd = () => (cord, annotation2) => (ann == null ? void 0 : ann.onDragEnd) ? ann == null ? void 0 : ann.onDragEnd(cord, annotation2) : void 0;
     return {
       ...ann,
+      drawTime: "afterDraw",
       display: ann == null ? void 0 : ann.display,
       annotationIndex: idx,
       id: `${ann == null ? void 0 : ann.label}-${ann == null ? void 0 : ann.value}-${idx}`,
@@ -26254,7 +26256,7 @@ const annotationDraggerPlugin = {
       };
     }
   },
-  afterDraw(chart2) {
+  afterUpdate(chart2) {
     var _a2, _b2, _c2, _d2;
     const { canvas: canvas2, scales, hoveredAnnotationId } = chart2;
     const pluginOptions = ((_b2 = (_a2 = chart2 == null ? void 0 : chart2.options) == null ? void 0 : _a2.plugins) == null ? void 0 : _b2.annotationDraggerPlugin) || {
@@ -26446,6 +26448,7 @@ const styles$3 = {
   isActive,
   resizeContainer
 };
+const SvgCircle = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("circle", { cx: 12, cy: 12, r: 12, fill: "currentColor" }));
 var ChartType = /* @__PURE__ */ ((ChartType2) => {
   ChartType2["LINE"] = "line";
   ChartType2["BAR"] = "bar";
@@ -26458,10 +26461,9 @@ var ChartDirection = /* @__PURE__ */ ((ChartDirection2) => {
   ChartDirection2["HORIZONTAL"] = "horizontal";
   return ChartDirection2;
 })(ChartDirection || {});
-const circleSvg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iMTIiIGZpbGw9ImN1cnJlbnRDb2xvciIgLz48L3N2Zz4=";
-const rectSvg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMiIgeT0iMiIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiBmaWxsPSJjdXJyZW50Q29sb3IiIC8+PC9zdmc+";
-const rectRotSvg = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHJlY3QgeD0iMyIgeT0iMyIgd2lkdGg9IjE4IiBoZWlnaHQ9IjE4IiBmaWxsPSJjdXJyZW50Q29sb3IiIHRyYW5zZm9ybT0ncm90YXRlKDQ1IDEyIDEyKScgLz48L3N2Zz4=";
-const triangleSvg = "data:image/svg+xml;base64,PHN2ZyAgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZD0ibTAgMGgyNHYyNGgtMjR6Ii8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Im0yMi43OTk4IDIyLjA2MjNoLTIxLjU5OTZjLS4yMTA2Ni4wMDAxLS40MTc2MTctLjA1NTQtLjYwMDA2Ny0uMTYwNy0uMTgyNDUxLS4xMDUzLS4zMzM5NjUtLjI1NjctLjQzOTMxMS0uNDM5Mi0uMTA1MzQ2NC0uMTgyNC0uMTYwODEyMjgtLjM4OTMtLjE2MDgyMi0uNnMuMDU1NDM3Mi0uNDE3Ni4xNjA3NjctLjZsMTAuNzk5ODMzLTE4LjcwNTE4Yy4xMTM5LS4xNzEzNy4yNjg0LS4zMTE5MS40NDk3LS40MDkxMy4xODE0LS4wOTcyMi4zODM5LS4xNDgwOS41ODk3LS4xNDgwOXMuNDA4My4wNTA4Ny41ODk3LjE0ODA5Yy4xODEzLjA5NzIyLjMzNTguMjM3NzYuNDQ5Ny40MDkxM2wxMC43OTk4IDE4LjcwNTE4Yy4xMDU0LjE4MjQuMTYwOC4zODkzLjE2MDguNnMtLjA1NTUuNDE3Ni0uMTYwOC42Yy0uMTA1NC4xODI1LS4yNTY5LjMzMzktLjQzOTMuNDM5Mi0uMTgyNS4xMDUzLS4zODk0LjE2MDgtLjYwMDEuMTYwN3oiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjwvZz48L3N2Zz4=";
+const SvgRect = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("rect", { x: 2, y: 2, width: 20, height: 20, fill: "currentColor" }));
+const SvgRectRot = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("rect", { x: 3, y: 3, width: 18, height: 18, fill: "currentColor", transform: "rotate(45 12 12)" }));
+const SvgTriangle = (props) => /* @__PURE__ */ React.createElement("svg", { height: 24, viewBox: "0 0 24 24", width: 24, xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", ...props }, /* @__PURE__ */ React.createElement("clipPath", { id: "a" }, /* @__PURE__ */ React.createElement("path", { d: "m0 0h24v24h-24z" })), /* @__PURE__ */ React.createElement("g", { clipPath: "url(#a)" }, /* @__PURE__ */ React.createElement("path", { d: "m22.7998 22.0623h-21.5996c-.21066.0001-.417617-.0554-.600067-.1607-.182451-.1053-.333965-.2567-.439311-.4392-.1053464-.1824-.16081228-.3893-.160822-.6s.0554372-.4176.160767-.6l10.799833-18.70518c.1139-.17137.2684-.31191.4497-.40913.1814-.09722.3839-.14809.5897-.14809s.4083.05087.5897.14809c.1813.09722.3358.23776.4497.40913l10.7998 18.70518c.1054.1824.1608.3893.1608.6s-.0555.4176-.1608.6c-.1054.1825-.2569.3339-.4393.4392-.1825.1053-.3894.1608-.6001.1607z", fill: "currentColor" })));
 const LEGEND_SYMBOL_SIZE$1 = 16;
 const LineItem = ({ dataset }) => {
   var _a2;
@@ -26495,15 +26497,15 @@ const PointItem = ({ dataset }) => {
     return null;
   const size = pointRadius * 2;
   const icons = {
-    circle: circleSvg,
-    triangle: triangleSvg,
-    rectRot: rectRotSvg,
-    rect: rectSvg
+    circle: /* @__PURE__ */ jsx(SvgCircle, {}),
+    triangle: /* @__PURE__ */ jsx(SvgTriangle, {}),
+    rectRot: /* @__PURE__ */ jsx(SvgRectRot, {}),
+    rect: /* @__PURE__ */ jsx(SvgRect, {})
   };
   return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(
     Icon,
     {
-      icon: icons[pointStyle] || circleSvg,
+      icon: icons[pointStyle] ?? /* @__PURE__ */ jsx(SvgCircle, {}),
       size,
       color: pointBackgroundColor
     }
@@ -26537,7 +26539,7 @@ const renderLegendItemSymbol = (dataset, chartType) => {
     case ChartType.BAR:
       return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemBox, children: /* @__PURE__ */ jsx(TbSquareFilled, { color: dataset.borderColor }) });
     case ChartType.PIE:
-      return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(Icon, { icon: circleSvg }) });
+      return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgCircle, {}) }) });
     case ChartType.SCATTER:
       return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(TbCircleFilled, { color: dataset.borderColor }) });
     default: