@oliasoft-open-source/charts-library 4.3.4 → 4.3.6-beta-1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js
CHANGED
|
@@ -6,7 +6,8 @@ var __publicField = (obj, key, value) => {
|
|
|
6
6
|
};
|
|
7
7
|
var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
|
|
8
8
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
9
|
-
import
|
|
9
|
+
import * as React from "react";
|
|
10
|
+
import React__default, { forwardRef, useRef, useEffect, createContext as createContext$2, memo, useLayoutEffect, useState, useCallback, useMemo, isValidElement, cloneElement, useContext, useReducer } from "react";
|
|
10
11
|
import { produce } from "immer";
|
|
11
12
|
import { round as round$2, displayNumber, isCloseTo, roundByMagnitude } from "@oliasoft-open-source/units";
|
|
12
13
|
import cx from "classnames";
|
|
@@ -13086,7 +13087,7 @@ function ChartComponent(props, ref) {
|
|
|
13086
13087
|
renderChart();
|
|
13087
13088
|
return () => destroyChart();
|
|
13088
13089
|
}, []);
|
|
13089
|
-
return /* @__PURE__ */
|
|
13090
|
+
return /* @__PURE__ */ React__default.createElement("canvas", Object.assign({
|
|
13090
13091
|
ref: canvasRef,
|
|
13091
13092
|
role: "img",
|
|
13092
13093
|
height,
|
|
@@ -13096,7 +13097,7 @@ function ChartComponent(props, ref) {
|
|
|
13096
13097
|
const Chart$1 = /* @__PURE__ */ forwardRef(ChartComponent);
|
|
13097
13098
|
function createTypedChart(type, registerables) {
|
|
13098
13099
|
Chart$2.register(registerables);
|
|
13099
|
-
return /* @__PURE__ */ forwardRef((props, ref) => /* @__PURE__ */
|
|
13100
|
+
return /* @__PURE__ */ forwardRef((props, ref) => /* @__PURE__ */ React__default.createElement(Chart$1, Object.assign({}, props, {
|
|
13100
13101
|
ref,
|
|
13101
13102
|
type
|
|
13102
13103
|
})));
|
|
@@ -22783,9 +22784,9 @@ const initialState = ({ options, persistenceId }) => {
|
|
|
22783
22784
|
initialAxesRanges: []
|
|
22784
22785
|
};
|
|
22785
22786
|
};
|
|
22786
|
-
const
|
|
22787
|
-
const
|
|
22788
|
-
const
|
|
22787
|
+
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" })));
|
|
22788
|
+
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 }));
|
|
22789
|
+
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" })));
|
|
22789
22790
|
const LineOptions = ({
|
|
22790
22791
|
lineEnabled,
|
|
22791
22792
|
onToggleLine,
|
|
@@ -22796,7 +22797,7 @@ const LineOptions = ({
|
|
|
22796
22797
|
const options = [
|
|
22797
22798
|
{
|
|
22798
22799
|
label: translations.pointsLines,
|
|
22799
|
-
icon: /* @__PURE__ */ jsx(Icon, { icon:
|
|
22800
|
+
icon: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgLineAndPoint, {}) }),
|
|
22800
22801
|
selected: pointsEnabled && lineEnabled,
|
|
22801
22802
|
onClick: () => {
|
|
22802
22803
|
onTogglePoints();
|
|
@@ -22804,7 +22805,7 @@ const LineOptions = ({
|
|
|
22804
22805
|
},
|
|
22805
22806
|
{
|
|
22806
22807
|
label: translations.linesOnly,
|
|
22807
|
-
icon: /* @__PURE__ */ jsx(Icon, { icon:
|
|
22808
|
+
icon: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgLineOnly, {}) }),
|
|
22808
22809
|
selected: !pointsEnabled && lineEnabled,
|
|
22809
22810
|
onClick: () => {
|
|
22810
22811
|
onTogglePoints();
|
|
@@ -22813,7 +22814,7 @@ const LineOptions = ({
|
|
|
22813
22814
|
},
|
|
22814
22815
|
{
|
|
22815
22816
|
label: translations.pointsOnly,
|
|
22816
|
-
icon: /* @__PURE__ */ jsx(Icon, { icon:
|
|
22817
|
+
icon: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgPointOnly, {}) }),
|
|
22817
22818
|
selected: pointsEnabled && !lineEnabled,
|
|
22818
22819
|
onClick: () => {
|
|
22819
22820
|
onToggleLine();
|
|
@@ -22840,7 +22841,7 @@ var DefaultContext = {
|
|
|
22840
22841
|
style: void 0,
|
|
22841
22842
|
attr: void 0
|
|
22842
22843
|
};
|
|
22843
|
-
var IconContext =
|
|
22844
|
+
var IconContext = React__default.createContext && React__default.createContext(DefaultContext);
|
|
22844
22845
|
var __assign = globalThis && globalThis.__assign || function() {
|
|
22845
22846
|
__assign = Object.assign || function(t) {
|
|
22846
22847
|
for (var s2, i2 = 1, n2 = arguments.length; i2 < n2; i2++) {
|
|
@@ -22867,14 +22868,14 @@ var __rest = globalThis && globalThis.__rest || function(s2, e2) {
|
|
|
22867
22868
|
};
|
|
22868
22869
|
function Tree2Element(tree) {
|
|
22869
22870
|
return tree && tree.map(function(node, i2) {
|
|
22870
|
-
return
|
|
22871
|
+
return React__default.createElement(node.tag, __assign({
|
|
22871
22872
|
key: i2
|
|
22872
22873
|
}, node.attr), Tree2Element(node.child));
|
|
22873
22874
|
});
|
|
22874
22875
|
}
|
|
22875
22876
|
function GenIcon(data) {
|
|
22876
22877
|
return function(props) {
|
|
22877
|
-
return
|
|
22878
|
+
return React__default.createElement(IconBase, __assign({
|
|
22878
22879
|
attr: __assign({}, data.attr)
|
|
22879
22880
|
}, props), Tree2Element(data.child));
|
|
22880
22881
|
};
|
|
@@ -22888,7 +22889,7 @@ function IconBase(props) {
|
|
|
22888
22889
|
className = conf.className;
|
|
22889
22890
|
if (props.className)
|
|
22890
22891
|
className = (className ? className + " " : "") + props.className;
|
|
22891
|
-
return
|
|
22892
|
+
return React__default.createElement("svg", __assign({
|
|
22892
22893
|
stroke: "currentColor",
|
|
22893
22894
|
fill: "currentColor",
|
|
22894
22895
|
strokeWidth: "0"
|
|
@@ -22900,9 +22901,9 @@ function IconBase(props) {
|
|
|
22900
22901
|
height: computedSize,
|
|
22901
22902
|
width: computedSize,
|
|
22902
22903
|
xmlns: "http://www.w3.org/2000/svg"
|
|
22903
|
-
}), title &&
|
|
22904
|
+
}), title && React__default.createElement("title", null, title), props.children);
|
|
22904
22905
|
};
|
|
22905
|
-
return IconContext !== void 0 ?
|
|
22906
|
+
return IconContext !== void 0 ? React__default.createElement(IconContext.Consumer, null, function(conf) {
|
|
22906
22907
|
return elem(conf);
|
|
22907
22908
|
}) : elem(DefaultContext);
|
|
22908
22909
|
}
|
|
@@ -23796,7 +23797,7 @@ async function toPng(node, options = {}) {
|
|
|
23796
23797
|
var dist = { exports: {} };
|
|
23797
23798
|
(function(module, exports) {
|
|
23798
23799
|
!function(e2, t) {
|
|
23799
|
-
module.exports = t(
|
|
23800
|
+
module.exports = t(React__default);
|
|
23800
23801
|
}(window, function(e2) {
|
|
23801
23802
|
return function(e3) {
|
|
23802
23803
|
var t = {};
|
|
@@ -26447,6 +26448,7 @@ const styles$3 = {
|
|
|
26447
26448
|
isActive,
|
|
26448
26449
|
resizeContainer
|
|
26449
26450
|
};
|
|
26451
|
+
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" }));
|
|
26450
26452
|
var ChartType = /* @__PURE__ */ ((ChartType2) => {
|
|
26451
26453
|
ChartType2["LINE"] = "line";
|
|
26452
26454
|
ChartType2["BAR"] = "bar";
|
|
@@ -26459,10 +26461,9 @@ var ChartDirection = /* @__PURE__ */ ((ChartDirection2) => {
|
|
|
26459
26461
|
ChartDirection2["HORIZONTAL"] = "horizontal";
|
|
26460
26462
|
return ChartDirection2;
|
|
26461
26463
|
})(ChartDirection || {});
|
|
26462
|
-
const
|
|
26463
|
-
const
|
|
26464
|
-
const
|
|
26465
|
-
const triangleSvg = "data:image/svg+xml;base64,PHN2ZyAgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxjbGlwUGF0aCBpZD0iYSI+PHBhdGggZD0ibTAgMGgyNHYyNGgtMjR6Ii8+PC9jbGlwUGF0aD48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Im0yMi43OTk4IDIyLjA2MjNoLTIxLjU5OTZjLS4yMTA2Ni4wMDAxLS40MTc2MTctLjA1NTQtLjYwMDA2Ny0uMTYwNy0uMTgyNDUxLS4xMDUzLS4zMzM5NjUtLjI1NjctLjQzOTMxMS0uNDM5Mi0uMTA1MzQ2NC0uMTgyNC0uMTYwODEyMjgtLjM4OTMtLjE2MDgyMi0uNnMuMDU1NDM3Mi0uNDE3Ni4xNjA3NjctLjZsMTAuNzk5ODMzLTE4LjcwNTE4Yy4xMTM5LS4xNzEzNy4yNjg0LS4zMTE5MS40NDk3LS40MDkxMy4xODE0LS4wOTcyMi4zODM5LS4xNDgwOS41ODk3LS4xNDgwOXMuNDA4My4wNTA4Ny41ODk3LjE0ODA5Yy4xODEzLjA5NzIyLjMzNTguMjM3NzYuNDQ5Ny40MDkxM2wxMC43OTk4IDE4LjcwNTE4Yy4xMDU0LjE4MjQuMTYwOC4zODkzLjE2MDguNnMtLjA1NTUuNDE3Ni0uMTYwOC42Yy0uMTA1NC4xODI1LS4yNTY5LjMzMzktLjQzOTMuNDM5Mi0uMTgyNS4xMDUzLS4zODk0LjE2MDgtLjYwMDEuMTYwN3oiIGZpbGw9ImN1cnJlbnRDb2xvciIvPjwvZz48L3N2Zz4=";
|
|
26464
|
+
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" }));
|
|
26465
|
+
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)" }));
|
|
26466
|
+
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" })));
|
|
26466
26467
|
const LEGEND_SYMBOL_SIZE$1 = 16;
|
|
26467
26468
|
const LineItem = ({ dataset }) => {
|
|
26468
26469
|
var _a2;
|
|
@@ -26496,15 +26497,15 @@ const PointItem = ({ dataset }) => {
|
|
|
26496
26497
|
return null;
|
|
26497
26498
|
const size = pointRadius * 2;
|
|
26498
26499
|
const icons = {
|
|
26499
|
-
circle:
|
|
26500
|
-
triangle:
|
|
26501
|
-
rectRot:
|
|
26502
|
-
rect:
|
|
26500
|
+
circle: /* @__PURE__ */ jsx(SvgCircle, {}),
|
|
26501
|
+
triangle: /* @__PURE__ */ jsx(SvgTriangle, {}),
|
|
26502
|
+
rectRot: /* @__PURE__ */ jsx(SvgRectRot, {}),
|
|
26503
|
+
rect: /* @__PURE__ */ jsx(SvgRect, {})
|
|
26503
26504
|
};
|
|
26504
26505
|
return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(
|
|
26505
26506
|
Icon,
|
|
26506
26507
|
{
|
|
26507
|
-
icon: icons[pointStyle]
|
|
26508
|
+
icon: icons[pointStyle] ?? /* @__PURE__ */ jsx(SvgCircle, {}),
|
|
26508
26509
|
size,
|
|
26509
26510
|
color: pointBackgroundColor
|
|
26510
26511
|
}
|
|
@@ -26538,7 +26539,7 @@ const renderLegendItemSymbol = (dataset, chartType) => {
|
|
|
26538
26539
|
case ChartType.BAR:
|
|
26539
26540
|
return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemBox, children: /* @__PURE__ */ jsx(TbSquareFilled, { color: dataset.borderColor }) });
|
|
26540
26541
|
case ChartType.PIE:
|
|
26541
|
-
return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(Icon, { icon:
|
|
26542
|
+
return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgCircle, {}) }) });
|
|
26542
26543
|
case ChartType.SCATTER:
|
|
26543
26544
|
return /* @__PURE__ */ jsx("span", { className: styles$3.legendItemPoint, children: /* @__PURE__ */ jsx(TbCircleFilled, { color: dataset.borderColor }) });
|
|
26544
26545
|
default:
|
|
@@ -40298,7 +40299,7 @@ const useScatterChartConfig = (chart2, chartRef) => {
|
|
|
40298
40299
|
const scatterOptions = {
|
|
40299
40300
|
onClick,
|
|
40300
40301
|
onHover,
|
|
40301
|
-
chartStyling,
|
|
40302
|
+
...chartStyling,
|
|
40302
40303
|
interactions: {
|
|
40303
40304
|
onLegendClick: legendClick,
|
|
40304
40305
|
onHover
|