@oliasoft-open-source/charts-library 4.6.2-beta-2 → 4.6.2

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
@@ -11,7 +11,7 @@ import React__default, { forwardRef, useRef, useEffect, createContext as createC
11
11
  import { produce } from "immer";
12
12
  import { round as round$2, displayNumber, isCloseTo, roundByMagnitude } from "@oliasoft-open-source/units";
13
13
  import cx from "classnames";
14
- import { Portal, Icon, Menu, Tooltip as Tooltip$2, Button, Popover, Field, InputGroup, NumberInput, InputGroupAddon, Select, ButtonGroup, Spacer, Flex, Text } from "@oliasoft-open-source/react-ui-library";
14
+ import { Portal, Icon, Tooltip as Tooltip$2, Button, Flex, Text, Menu, Popover, Field, InputGroup, NumberInput, InputGroupAddon, Select, ButtonGroup, Spacer } from "@oliasoft-open-source/react-ui-library";
15
15
  import { isEmpty, isArray as isArray$2, some, has, cloneDeep, defaultTo, findIndex, set as set$2, debounce as debounce$3, isNil, map as map$3, find, get as get$1, noop as noop$2 } from "lodash";
16
16
  /*!
17
17
  * @kurkle/color v0.3.2
@@ -22804,127 +22804,55 @@ const ControlsPortal = ({
22804
22804
  }
22805
22805
  return children;
22806
22806
  };
22807
- var noop = function() {
22808
- };
22809
- var isBrowser = typeof window !== "undefined";
22810
- var useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
22811
- const useIsomorphicLayoutEffect$1 = useIsomorphicLayoutEffect;
22812
- var defaultState = {
22813
- x: 0,
22814
- y: 0,
22815
- width: 0,
22816
- height: 0,
22817
- top: 0,
22818
- left: 0,
22819
- bottom: 0,
22820
- right: 0
22821
- };
22822
- function useMeasure() {
22823
- var _a2 = useState(null), element = _a2[0], ref = _a2[1];
22824
- var _b2 = useState(defaultState), rect = _b2[0], setRect = _b2[1];
22825
- var observer = useMemo(function() {
22826
- return new window.ResizeObserver(function(entries) {
22827
- if (entries[0]) {
22828
- var _a3 = entries[0].contentRect, x2 = _a3.x, y2 = _a3.y, width = _a3.width, height = _a3.height, top_1 = _a3.top, left2 = _a3.left, bottom2 = _a3.bottom, right2 = _a3.right;
22829
- setRect({ x: x2, y: y2, width, height, top: top_1, left: left2, bottom: bottom2, right: right2 });
22830
- }
22831
- });
22832
- }, []);
22833
- useIsomorphicLayoutEffect$1(function() {
22834
- if (!element)
22835
- return;
22836
- observer.observe(element);
22837
- return function() {
22838
- observer.disconnect();
22839
- };
22840
- }, [element]);
22841
- return [ref, rect];
22842
- }
22843
- const useMeasure$1 = isBrowser && typeof window.ResizeObserver !== "undefined" ? useMeasure : function() {
22844
- return [noop, defaultState];
22845
- };
22846
22807
  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" })));
22847
22808
  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 }));
22848
22809
  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" })));
22849
- function getLineOptions({
22810
+ const LineOptions = ({
22850
22811
  lineEnabled,
22851
22812
  onToggleLine,
22852
22813
  onTogglePoints,
22853
22814
  pointsEnabled,
22854
22815
  translations
22855
- }) {
22856
- return [
22816
+ }) => {
22817
+ const options = [
22857
22818
  {
22858
- type: "Option",
22859
22819
  label: translations.pointsLines,
22860
22820
  icon: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgLineAndPoint, {}) }),
22861
22821
  selected: pointsEnabled && lineEnabled,
22862
22822
  onClick: () => {
22863
- if (!pointsEnabled)
22864
- onTogglePoints();
22865
- if (!lineEnabled)
22866
- onToggleLine();
22823
+ onTogglePoints();
22867
22824
  }
22868
22825
  },
22869
22826
  {
22870
- type: "Option",
22871
22827
  label: translations.linesOnly,
22872
22828
  icon: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgLineOnly, {}) }),
22873
22829
  selected: !pointsEnabled && lineEnabled,
22874
22830
  onClick: () => {
22875
- if (pointsEnabled)
22876
- onTogglePoints();
22877
- if (!lineEnabled)
22878
- onToggleLine();
22831
+ onTogglePoints();
22832
+ onToggleLine();
22879
22833
  }
22880
22834
  },
22881
22835
  {
22882
- type: "Option",
22883
22836
  label: translations.pointsOnly,
22884
22837
  icon: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgPointOnly, {}) }),
22885
22838
  selected: pointsEnabled && !lineEnabled,
22886
22839
  onClick: () => {
22887
- if (!pointsEnabled)
22888
- onTogglePoints();
22889
- if (lineEnabled)
22890
- onToggleLine();
22840
+ onToggleLine();
22891
22841
  }
22892
22842
  }
22893
22843
  ];
22894
- }
22895
- const LineOptions = ({ options }) => {
22896
- const [menuOpen, setMenuOpen] = useState(false);
22897
22844
  const selectedOption = options.find((option) => option.selected);
22898
- return /* @__PURE__ */ jsx(
22899
- Menu,
22845
+ return /* @__PURE__ */ jsx(Tooltip$2, { text: selectedOption == null ? void 0 : selectedOption.label, placement: "bottom-start", children: /* @__PURE__ */ jsx(
22846
+ Button,
22900
22847
  {
22901
- open: menuOpen,
22902
- setOpen: setMenuOpen,
22903
- menu: {
22904
- sections: options,
22905
- trigger: "Component",
22906
- component: /* @__PURE__ */ jsx(
22907
- Tooltip$2,
22908
- {
22909
- display: "inline-flex",
22910
- text: selectedOption == null ? void 0 : selectedOption.label,
22911
- placement: "bottom-start",
22912
- enabled: !menuOpen,
22913
- children: /* @__PURE__ */ jsx(
22914
- Button,
22915
- {
22916
- colored: "muted",
22917
- basic: true,
22918
- small: true,
22919
- round: true,
22920
- icon: selectedOption == null ? void 0 : selectedOption.icon
22921
- }
22922
- )
22923
- }
22924
- )
22925
- }
22848
+ small: true,
22849
+ basic: true,
22850
+ colored: "muted",
22851
+ round: true,
22852
+ icon: selectedOption == null ? void 0 : selectedOption.icon,
22853
+ onClick: selectedOption == null ? void 0 : selectedOption.onClick
22926
22854
  }
22927
- );
22855
+ ) });
22928
22856
  };
22929
22857
  var DefaultContext = {
22930
22858
  color: void 0,
@@ -23026,7 +22954,7 @@ function TbX(props) {
23026
22954
  function TbZoomIn(props) {
23027
22955
  return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "strokeWidth": "2", "stroke": "currentColor", "fill": "none", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "stroke": "none", "d": "M0 0h24v24H0z", "fill": "none" } }, { "tag": "path", "attr": { "d": "M10 10m-7 0a7 7 0 1 0 14 0a7 7 0 1 0 -14 0" } }, { "tag": "path", "attr": { "d": "M7 10l6 0" } }, { "tag": "path", "attr": { "d": "M10 7l0 6" } }, { "tag": "path", "attr": { "d": "M21 21l-6 -6" } }] })(props);
23028
22956
  }
23029
- function getDragOptions({
22957
+ const DragOptions = ({
23030
22958
  onTogglePan,
23031
22959
  onToggleZoom,
23032
22960
  panEnabled,
@@ -23042,74 +22970,76 @@ function getDragOptions({
23042
22970
  dragToZoom,
23043
22971
  doubleClickToReset,
23044
22972
  dragToPan,
22973
+ orDoubleClickToCanvas,
23045
22974
  dragToMovePoints,
23046
22975
  dragDisabled,
23047
22976
  dragToMoveAnnotation
23048
22977
  }
23049
- }) {
23050
- return [
23051
- {
23052
- label: dragToZoom,
23053
- description: doubleClickToReset,
23054
- icon: /* @__PURE__ */ jsx(TbZoomIn, {}),
23055
- selected: zoomEnabled,
23056
- type: "Option",
23057
- onClick: () => {
23058
- if (!zoomEnabled)
23059
- onToggleZoom();
23060
- }
23061
- },
23062
- {
23063
- label: dragToPan,
23064
- description: doubleClickToReset,
23065
- icon: /* @__PURE__ */ jsx(TbArrowsMove, {}),
23066
- selected: panEnabled,
23067
- type: "Option",
23068
- onClick: () => {
23069
- if (!panEnabled)
23070
- onTogglePan();
23071
- }
23072
- },
23073
- ...isDragDataAllowed ? [
22978
+ }) => {
22979
+ const options = useMemo(
22980
+ () => [
23074
22981
  {
23075
- label: dragToMovePoints,
23076
- icon: /* @__PURE__ */ jsx(TbHandStop, {}),
23077
- selected: enableDragPoints,
23078
- type: "Option",
23079
- onClick: () => {
23080
- if (!enableDragPoints)
23081
- onToggleDragPoints();
23082
- }
23083
- }
23084
- ] : [],
23085
- ...isDragAnnotationAllowed ? [
22982
+ buttonLabel: dragToZoom,
22983
+ label: /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
22984
+ /* @__PURE__ */ jsx(Text, { children: "Drag to zoom" }),
22985
+ /* @__PURE__ */ jsx(Text, { small: true, muted: true, children: doubleClickToReset })
22986
+ ] }),
22987
+ icon: /* @__PURE__ */ jsx(TbZoomIn, {}),
22988
+ selected: zoomEnabled,
22989
+ onClick: onToggleZoom
22990
+ },
23086
22991
  {
23087
- label: dragToMoveAnnotation,
23088
- icon: /* @__PURE__ */ jsx(TbHandStop, {}),
23089
- selected: enableDragAnnotation,
23090
- type: "Option",
23091
- onClick: () => {
23092
- if (!enableDragAnnotation)
23093
- onToggleDragAnnotation();
22992
+ buttonLabel: dragToPan,
22993
+ label: /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
22994
+ /* @__PURE__ */ jsx(Text, { children: "Drag to pan" }),
22995
+ /* @__PURE__ */ jsx(Text, { small: true, muted: true, children: orDoubleClickToCanvas })
22996
+ ] }),
22997
+ icon: /* @__PURE__ */ jsx(TbArrowsMove, {}),
22998
+ selected: panEnabled,
22999
+ onClick: onTogglePan
23000
+ },
23001
+ ...isDragDataAllowed ? [
23002
+ {
23003
+ label: dragToMovePoints,
23004
+ icon: /* @__PURE__ */ jsx(TbHandStop, {}),
23005
+ selected: enableDragPoints,
23006
+ type: "Option",
23007
+ onClick: onToggleDragPoints
23094
23008
  }
23009
+ ] : [],
23010
+ ...isDragAnnotationAllowed ? [
23011
+ {
23012
+ label: dragToMoveAnnotation,
23013
+ icon: /* @__PURE__ */ jsx(TbHandStop, {}),
23014
+ selected: enableDragAnnotation,
23015
+ type: "Option",
23016
+ onClick: onToggleDragAnnotation
23017
+ }
23018
+ ] : [],
23019
+ {
23020
+ label: dragDisabled,
23021
+ icon: /* @__PURE__ */ jsx(TbBan, {}),
23022
+ selected: !zoomEnabled && !panEnabled && !enableDragPoints && !enableDragAnnotation,
23023
+ onClick: onDisableDragOptions
23095
23024
  }
23096
- ] : [],
23097
- {
23098
- label: dragDisabled,
23099
- icon: /* @__PURE__ */ jsx(TbBan, {}),
23100
- selected: !zoomEnabled && !panEnabled && !enableDragPoints && !enableDragAnnotation,
23101
- type: "Option",
23102
- onClick: onDisableDragOptions
23103
- }
23104
- ];
23105
- }
23106
- const DragOptions = ({ options }) => {
23025
+ ],
23026
+ [zoomEnabled, panEnabled, enableDragPoints, isDragDataAllowed]
23027
+ );
23107
23028
  const selectedOption = options.find((option) => option.selected);
23029
+ const optionsWithDragPoints = options.map(
23030
+ ({ icon, label, onClick, selected }) => ({
23031
+ icon,
23032
+ label,
23033
+ type: "Option",
23034
+ onClick,
23035
+ disabled: selected
23036
+ })
23037
+ );
23108
23038
  return /* @__PURE__ */ jsx(
23109
23039
  Menu,
23110
23040
  {
23111
23041
  menu: {
23112
- sections: options,
23042
+ sections: optionsWithDragPoints,
23113
23043
  trigger: "Component",
23114
23044
  component: /* @__PURE__ */ jsx(
23115
23045
  Button,
@@ -23117,7 +23047,7 @@ const DragOptions = ({ options }) => {
23117
23047
  colored: "muted",
23118
23048
  basic: true,
23119
23049
  small: true,
23120
- label: selectedOption == null ? void 0 : selectedOption.label,
23050
+ label: (selectedOption == null ? void 0 : selectedOption.buttonLabel) || (selectedOption == null ? void 0 : selectedOption.label),
23121
23051
  icon: selectedOption == null ? void 0 : selectedOption.icon
23122
23052
  }
23123
23053
  )
@@ -23125,8 +23055,8 @@ const DragOptions = ({ options }) => {
23125
23055
  }
23126
23056
  );
23127
23057
  };
23128
- const controls = "_controls_1961q_1";
23129
- const buttons = "_buttons_1961q_7";
23058
+ const controls = "_controls_gbo9q_1";
23059
+ const buttons = "_buttons_gbo9q_7";
23130
23060
  const styles$4 = {
23131
23061
  controls,
23132
23062
  buttons
@@ -24532,7 +24462,7 @@ const AxesOptions = (optionsPopover) => {
24532
24462
  {
24533
24463
  text: translations.axesOptions,
24534
24464
  placement: "bottom-start",
24535
- display: "inline-flex",
24465
+ display: "flex",
24536
24466
  children: /* @__PURE__ */ jsx(Button, { small: true, basic: true, colored: "muted", round: true, icon: /* @__PURE__ */ jsx(TbRuler, {}) })
24537
24467
  }
24538
24468
  )
@@ -24579,135 +24509,89 @@ const Controls = ({
24579
24509
  dispatch,
24580
24510
  generatedDatasets
24581
24511
  });
24582
- const [measureRef, { width }] = useMeasure$1();
24583
- const isNarrow = width < 200;
24584
- const lineOptions = useMemo(
24585
- () => getLineOptions({
24586
- lineEnabled,
24587
- onToggleLine,
24588
- onTogglePoints,
24589
- pointsEnabled,
24590
- translations
24591
- }),
24592
- [lineEnabled, pointsEnabled]
24593
- );
24594
- const dragOptions = useMemo(
24595
- () => getDragOptions({
24596
- onTogglePan,
24597
- onToggleZoom,
24598
- panEnabled,
24599
- zoomEnabled,
24600
- enableDragPoints,
24601
- enableDragAnnotation,
24602
- isDragDataAllowed: dragData == null ? void 0 : dragData.enableDragData,
24603
- isDragAnnotationAllowed: annotations == null ? void 0 : annotations.enableDragAnnotation,
24604
- onToggleDragAnnotation,
24605
- onToggleDragPoints,
24606
- onDisableDragOptions,
24607
- translations
24608
- }),
24609
- [
24610
- zoomEnabled,
24611
- panEnabled,
24612
- enableDragPoints,
24613
- dragData == null ? void 0 : dragData.enableDragData,
24614
- annotations == null ? void 0 : annotations.enableDragAnnotation
24615
- ]
24616
- );
24617
24512
  return /* @__PURE__ */ jsxs(Fragment, { children: [
24618
24513
  /* @__PURE__ */ jsxs("div", { className: styles$4.controls, children: [
24619
24514
  !!options.title && /* @__PURE__ */ jsx(Text, { bold: true, children: options.title }),
24620
24515
  headerComponent,
24621
- /* @__PURE__ */ jsx(ControlsPortal, { controlsPortalId: controlsPortalId ?? "", children: /* @__PURE__ */ jsxs(
24622
- "div",
24623
- {
24624
- className: styles$4.buttons,
24625
- ref: measureRef,
24626
- children: [
24627
- !showTable && /* @__PURE__ */ jsxs(Fragment, { children: [
24628
- /* @__PURE__ */ jsx(
24629
- AxesOptions,
24630
- {
24631
- initialAxesRanges,
24632
- axes: state.axes,
24633
- controlsAxesLabels,
24634
- onUpdateAxes,
24635
- onResetAxes,
24636
- depthType,
24637
- translations
24638
- }
24639
- ),
24640
- isNarrow ? /* @__PURE__ */ jsx(
24641
- Menu,
24516
+ /* @__PURE__ */ jsx(ControlsPortal, { controlsPortalId: controlsPortalId ?? "", children: /* @__PURE__ */ jsxs("div", { className: styles$4.buttons, children: [
24517
+ !showTable && /* @__PURE__ */ jsxs(Fragment, { children: [
24518
+ /* @__PURE__ */ jsx(
24519
+ AxesOptions,
24520
+ {
24521
+ initialAxesRanges,
24522
+ axes: state.axes,
24523
+ controlsAxesLabels,
24524
+ onUpdateAxes,
24525
+ onResetAxes,
24526
+ depthType,
24527
+ translations
24528
+ }
24529
+ ),
24530
+ /* @__PURE__ */ jsx(
24531
+ LineOptions,
24532
+ {
24533
+ lineEnabled,
24534
+ pointsEnabled,
24535
+ onToggleLine,
24536
+ onTogglePoints,
24537
+ translations
24538
+ }
24539
+ ),
24540
+ /* @__PURE__ */ jsx(
24541
+ Tooltip$2,
24542
+ {
24543
+ text: translations.downloadAsPNG,
24544
+ placement: "bottom-end",
24545
+ children: /* @__PURE__ */ jsx(
24546
+ Button,
24642
24547
  {
24643
- menu: {
24644
- placement: "bottom-end",
24645
- sections: [
24646
- ...lineOptions,
24647
- {
24648
- type: "Divider"
24649
- },
24650
- ...dragOptions,
24651
- {
24652
- type: "Divider"
24653
- },
24654
- {
24655
- icon: "download",
24656
- label: translations.downloadAsPNG,
24657
- type: "Option",
24658
- onClick: handleDownload
24659
- }
24660
- ],
24661
- trigger: "Component",
24662
- component: /* @__PURE__ */ jsx(Button, { colored: "muted", basic: true, small: true, round: true, icon: "menu" })
24663
- }
24548
+ small: true,
24549
+ basic: true,
24550
+ colored: "muted",
24551
+ round: true,
24552
+ icon: "download",
24553
+ onClick: handleDownload
24664
24554
  }
24665
- ) : /* @__PURE__ */ jsxs(Fragment, { children: [
24666
- /* @__PURE__ */ jsx(LineOptions, { options: lineOptions }),
24667
- /* @__PURE__ */ jsx(
24668
- Tooltip$2,
24669
- {
24670
- display: "inline-flex",
24671
- text: translations.downloadAsPNG,
24672
- placement: "bottom-end",
24673
- children: /* @__PURE__ */ jsx(
24674
- Button,
24675
- {
24676
- small: true,
24677
- basic: true,
24678
- colored: "muted",
24679
- round: true,
24680
- icon: "download",
24681
- onClick: handleDownload
24682
- }
24683
- )
24684
- }
24685
- ),
24686
- /* @__PURE__ */ jsx(DragOptions, { options: dragOptions })
24687
- ] })
24688
- ] }),
24689
- table2 ? /* @__PURE__ */ jsx(
24690
- Tooltip$2,
24555
+ )
24556
+ }
24557
+ ),
24558
+ /* @__PURE__ */ jsx(
24559
+ DragOptions,
24560
+ {
24561
+ panEnabled,
24562
+ zoomEnabled,
24563
+ onTogglePan,
24564
+ onToggleZoom,
24565
+ enableDragPoints,
24566
+ enableDragAnnotation,
24567
+ isDragDataAllowed: dragData == null ? void 0 : dragData.enableDragData,
24568
+ isDragAnnotationAllowed: annotations == null ? void 0 : annotations.enableDragAnnotation,
24569
+ onToggleDragAnnotation,
24570
+ onToggleDragPoints,
24571
+ onDisableDragOptions,
24572
+ translations
24573
+ }
24574
+ )
24575
+ ] }),
24576
+ table2 ? /* @__PURE__ */ jsx(
24577
+ Tooltip$2,
24578
+ {
24579
+ text: showTable ? translations.showChart : translations.showTable,
24580
+ placement: "bottom-end",
24581
+ children: /* @__PURE__ */ jsx(
24582
+ Button,
24691
24583
  {
24692
- display: "inline-flex",
24693
- text: showTable ? translations.showChart : translations.showTable,
24694
- placement: "bottom-end",
24695
- children: /* @__PURE__ */ jsx(
24696
- Button,
24697
- {
24698
- small: true,
24699
- basic: true,
24700
- colored: "muted",
24701
- round: true,
24702
- icon: showTable ? "chart" : "table",
24703
- onClick: onToggleTable
24704
- }
24705
- )
24584
+ small: true,
24585
+ basic: true,
24586
+ colored: "muted",
24587
+ round: true,
24588
+ icon: showTable ? "chart" : "table",
24589
+ onClick: onToggleTable
24706
24590
  }
24707
- ) : null
24708
- ]
24709
- }
24710
- ) })
24591
+ )
24592
+ }
24593
+ ) : null
24594
+ ] }) })
24711
24595
  ] }),
24712
24596
  subheaderComponent
24713
24597
  ] });
@@ -26509,6 +26393,45 @@ const getConfig = (key = "") => key ? config[key] : config;
26509
26393
  const setConfig = (key, newValue) => {
26510
26394
  config[key] = newValue;
26511
26395
  };
26396
+ var noop = function() {
26397
+ };
26398
+ var isBrowser = typeof window !== "undefined";
26399
+ var useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
26400
+ const useIsomorphicLayoutEffect$1 = useIsomorphicLayoutEffect;
26401
+ var defaultState = {
26402
+ x: 0,
26403
+ y: 0,
26404
+ width: 0,
26405
+ height: 0,
26406
+ top: 0,
26407
+ left: 0,
26408
+ bottom: 0,
26409
+ right: 0
26410
+ };
26411
+ function useMeasure() {
26412
+ var _a2 = useState(null), element = _a2[0], ref = _a2[1];
26413
+ var _b2 = useState(defaultState), rect = _b2[0], setRect = _b2[1];
26414
+ var observer = useMemo(function() {
26415
+ return new window.ResizeObserver(function(entries) {
26416
+ if (entries[0]) {
26417
+ var _a3 = entries[0].contentRect, x2 = _a3.x, y2 = _a3.y, width = _a3.width, height = _a3.height, top_1 = _a3.top, left2 = _a3.left, bottom2 = _a3.bottom, right2 = _a3.right;
26418
+ setRect({ x: x2, y: y2, width, height, top: top_1, left: left2, bottom: bottom2, right: right2 });
26419
+ }
26420
+ });
26421
+ }, []);
26422
+ useIsomorphicLayoutEffect$1(function() {
26423
+ if (!element)
26424
+ return;
26425
+ observer.observe(element);
26426
+ return function() {
26427
+ observer.disconnect();
26428
+ };
26429
+ }, [element]);
26430
+ return [ref, rect];
26431
+ }
26432
+ const useMeasure$1 = isBrowser && typeof window.ResizeObserver !== "undefined" ? useMeasure : function() {
26433
+ return [noop, defaultState];
26434
+ };
26512
26435
  const legend = "_legend_wpro0_1";
26513
26436
  const isDragging = "_isDragging_wpro0_8";
26514
26437
  const legendItems = "_legendItems_wpro0_11";
@@ -26886,11 +26809,13 @@ const LegendDropZones = (legendDropZonesProps) => {
26886
26809
  };
26887
26810
  const Legend2 = ({ chartRef, legendConfig }) => {
26888
26811
  const chart2 = chartRef == null ? void 0 : chartRef.current;
26889
- const { chartArea } = chart2 ?? {};
26812
+ const [chartArea, setChartArea] = useState(
26813
+ chart2 == null ? void 0 : chart2.chartArea
26814
+ );
26890
26815
  const {
26891
26816
  options: { legend: legend2 }
26892
26817
  } = legendConfig ?? {};
26893
- const [measureRef] = useMeasure$1();
26818
+ const [measureRef, measureRect2] = useMeasure$1();
26894
26819
  const resizeRef = measureRef;
26895
26820
  const panelRef = useRef(null);
26896
26821
  const [legendPosition, setLegendPosition] = useState(
@@ -26904,6 +26829,12 @@ const Legend2 = ({ chartRef, legendConfig }) => {
26904
26829
  isDragging: monitor.isDragging()
26905
26830
  })
26906
26831
  }));
26832
+ useEffect(() => {
26833
+ const timeout = setTimeout(() => {
26834
+ setChartArea(chart2 == null ? void 0 : chart2.chartArea);
26835
+ }, 20);
26836
+ return () => clearTimeout(timeout);
26837
+ }, [measureRect2]);
26907
26838
  return /* @__PURE__ */ jsxs(Fragment, { children: [
26908
26839
  /* @__PURE__ */ jsx("div", { ref: resizeRef, className: styles$3.resizeContainer }),
26909
26840
  /* @__PURE__ */ jsx(
@@ -26926,7 +26857,8 @@ const Legend2 = ({ chartRef, legendConfig }) => {
26926
26857
  setLegendPosition: (position) => setLegendPosition(position),
26927
26858
  isDragging: isDragging2,
26928
26859
  placeholderSize: panelSize
26929
- }
26860
+ },
26861
+ measureRect2.width
26930
26862
  )
26931
26863
  ] });
26932
26864
  };
@@ -40723,7 +40655,7 @@ export {
40723
40655
  try {
40724
40656
  if (typeof document != "undefined") {
40725
40657
  var elementStyle = document.createElement("style");
40726
- elementStyle.appendChild(document.createTextNode("html[data-theme='dark'] ._chart_e3qdd_1 canvas {\n filter: invert(1) hue-rotate(180deg);\n}\n._chart_e3qdd_1 {\n border: 1px solid rgba(255, 255, 255, 0);\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n._chart_e3qdd_1 ._canvas_e3qdd_11 {\n flex-grow: 1;\n min-height: 0;\n position: relative;\n}\n._chart_e3qdd_1 ._canvas_e3qdd_11 canvas {\n width: 100% !important;\n height: 100% !important;\n}\n._chart_e3qdd_1._fixedHeight_e3qdd_20 {\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n height: auto;\n}\n._chart_e3qdd_1._stretchHeight_e3qdd_26 {\n display: flex;\n align-items: stretch;\n justify-content: stretch;\n height: 100%;\n}\n._chart_e3qdd_1._squareAspectRatio_e3qdd_32 {\n aspect-ratio: 1;\n min-height: 0;\n min-width: 0;\n}\n._chart_e3qdd_1:focus {\n outline: none;\n}\n._chart_e3qdd_1::-moz-focus-inner {\n border: 0;\n}\n._zoomForm_e3qdd_43 {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n top: 0;\n right: 0;\n}\n._zoomForm_e3qdd_43 ._zoomReset_e3qdd_51 {\n margin-left: 10px;\n}\n._zoomForm_e3qdd_43 ._help_e3qdd_54 {\n margin-left: 5px;\n line-height: 0;\n}\n._autoWeight_e3qdd_58 {\n width: auto;\n height: auto;\n}\n._table_e3qdd_62 {\n overflow: auto;\n}\n._controls_1961q_1 {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--padding-xs);\n}\n._buttons_1961q_7 {\n display: flex;\n flex-grow: 1;\n align-items: flex-start;\n justify-content: flex-end;\n margin-left: auto;\n gap: var(--padding-xxs);\n}\n._legend_wpro0_1 {\n position: absolute;\n opacity: 0.9;\n display: flex;\n flex-direction: column;\n z-index: 1;\n}\n._legend_wpro0_1._isDragging_wpro0_8 {\n opacity: 0;\n}\n._legendItems_wpro0_11 {\n background-color: var(--color-background-raised);\n border: 1px solid var(--color-border);\n padding: 4px 8px;\n border-radius: 2px;\n overflow-y: auto;\n max-height: 100%;\n overflow: overlay;\n --scrollbar-color: #00000040;\n}\n._legendItems_wpro0_11::-webkit-scrollbar {\n display: block;\n width: 16px;\n z-index: 2;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-button {\n display: none;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-track {\n background-color: #00000000;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-track-piece {\n background-color: #00000000;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-thumb {\n background-color: #00000000;\n border: 5px solid transparent;\n border-radius: 24px;\n box-shadow: 4px 0px 0px 4px var(--scrollbar-color) inset;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-corner {\n background: rgba(0, 0, 0, 0);\n}\n._legend_wpro0_1._isDragging_wpro0_8 ._legendItems_wpro0_11._legendItems_wpro0_11 {\n pointer-events: none;\n}\n._legend_wpro0_1._isHidden_wpro0_47 ._legendItems_wpro0_11._legendItems_wpro0_11 {\n display: none;\n}\n._legendToggle_wpro0_50 {\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n display: none;\n}\n._legend_wpro0_1._isHidden_wpro0_47 ._legendToggle_wpro0_50._legendToggle_wpro0_50,\n._legend_wpro0_1:hover ._legendToggle_wpro0_50._legendToggle_wpro0_50 {\n display: block;\n}\n._legend_wpro0_1:active ._legendToggle_wpro0_50._legendToggle_wpro0_50:not(:hover) {\n display: none;\n}\n._legend_wpro0_1._isHidden_wpro0_47 ._legendToggle_wpro0_50._legendToggle_wpro0_50 {\n position: static;\n transform: none;\n}\n._legend_wpro0_1._isDragging_wpro0_8 ._legendToggle_wpro0_50._legendToggle_wpro0_50 {\n display: none;\n}\n._legendItem_wpro0_11 {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n user-select: none;\n cursor: pointer;\n font-size: 12px;\n line-height: 16px;\n}\n._legendItemSymbol_wpro0_80 {\n display: flex;\n align-items: center;\n height: 16px;\n position: relative;\n flex-shrink: 0;\n}\nhtml[data-theme='dark'] ._legendItemSymbol_wpro0_80._legendItemSymbol_wpro0_80 {\n filter: invert(1) hue-rotate(180deg);\n}\n._legendItemBox_wpro0_90 {\n width: 100%;\n height: 12px;\n display: block;\n}\n._legendItemLine_wpro0_95 {\n position: absolute;\n display: flex;\n top: 50%;\n left: 0;\n width: 100%;\n transform: translateY(-50%);\n}\n._legendItemPoint_wpro0_103 {\n position: absolute;\n display: flex;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n._isHidden_wpro0_47 ._legendItemText_wpro0_110._legendItemText_wpro0_110 {\n text-decoration: line-through;\n}\n._scrollbars_wpro0_113 {\n overflow: overlay;\n --scrollbar-color: #00000040;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar {\n display: block;\n width: 16px;\n z-index: 2;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-button {\n display: none;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-track {\n background-color: #00000000;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-track-piece {\n background-color: #00000000;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-thumb {\n background-color: #00000000;\n border: 5px solid transparent;\n border-radius: 24px;\n box-shadow: 4px 0px 0px 4px var(--scrollbar-color) inset;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-corner {\n background: rgba(0, 0, 0, 0);\n}\n._dropzoneContainer_wpro0_140 {\n position: absolute;\n}\n._dropzone_wpro0_140 {\n position: absolute;\n width: 50%;\n height: 50%;\n display: flex;\n}\n._dropzone_wpro0_140._left_wpro0_149 {\n left: 0;\n justify-content: flex-start;\n}\n._dropzone_wpro0_140._right_wpro0_153 {\n right: 0;\n justify-content: flex-end;\n}\n._dropzone_wpro0_140._top_wpro0_157 {\n top: 0;\n align-items: flex-start;\n}\n._dropzone_wpro0_140._bottom_wpro0_161 {\n bottom: 0;\n align-items: flex-end;\n}\n._dropzonePlaceholder_wpro0_165 {\n position: absolute;\n background-color: rgba(0, 0, 0, 0.05);\n display: none;\n}\n[data-theme='dark'] ._dropzonePlaceholder_wpro0_165 {\n background-color: rgba(255, 255, 255, 0.05);\n}\n._isActive_wpro0_173 ._dropzonePlaceholder_wpro0_165._dropzonePlaceholder_wpro0_165 {\n display: block;\n}\n._resizeContainer_wpro0_176 {\n position: absolute;\n inset: 0;\n z-index: -1;\n}\nhtml[data-theme='dark'] ._chart_1jdnu_1 canvas {\n filter: invert(1) hue-rotate(180deg);\n}\n._chart_1jdnu_1 {\n border: 1px solid rgba(255, 255, 255, 0);\n padding-top: 10px;\n position: relative;\n}\n._chart_1jdnu_1 canvas {\n width: 100% !important;\n height: 100% !important;\n}\n._chart_1jdnu_1._fixedHeight_1jdnu_13 {\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n height: auto;\n}\n._chart_1jdnu_1._stretchHeight_1jdnu_19 {\n display: flex;\n align-items: stretch;\n justify-content: stretch;\n height: 100%;\n}\n._chart_1jdnu_1:focus {\n border: 1px solid #85b7d9;\n outline: none;\n}\n._chart_1jdnu_1::-moz-focus-inner {\n border: 0;\n}\n._zoomForm_1jdnu_32 {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n top: 0;\n right: 0;\n}\n._zoomForm_1jdnu_32 ._zoomReset_1jdnu_40 {\n margin-left: 10px;\n}\n._zoomForm_1jdnu_32 ._help_1jdnu_43 {\n margin-left: 5px;\n line-height: 0;\n}\n._autoWeight_1jdnu_47 {\n width: 'auto';\n height: 'auto';\n}\nhtml[data-theme='dark'] ._chart_x1sru_1 canvas {\n filter: invert(1) hue-rotate(180deg);\n}\n._chart_x1sru_1 {\n border: 1px solid rgba(255, 255, 255, 0);\n position: relative;\n display: flex;\n flex-direction: column;\n}\n._chart_x1sru_1 ._canvas_x1sru_10 {\n flex-grow: 1;\n min-height: 0;\n position: relative;\n}\n._chart_x1sru_1 ._canvas_x1sru_10 canvas {\n width: 100% !important;\n height: 100% !important;\n}\n._chart_x1sru_1._fixedHeight_x1sru_19 {\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n height: auto;\n}\n._chart_x1sru_1._stretchHeight_x1sru_25 {\n display: flex;\n align-items: stretch;\n justify-content: stretch;\n height: 100%;\n}\n._chart_x1sru_1:focus {\n border: 1px solid #85b7d9;\n outline: none;\n}\n._chart_x1sru_1::-moz-focus-inner {\n border: 0;\n}\n._zoomForm_x1sru_38 {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n top: 0;\n right: 0;\n}\n._zoomForm_x1sru_38 ._zoomReset_x1sru_46 {\n margin-left: 10px;\n}\n._zoomForm_x1sru_38 ._help_x1sru_49 {\n margin-left: 5px;\n line-height: 0;\n}\n._autoWeight_x1sru_53 {\n width: auto;\n height: auto;\n}\n._actions_x1sru_57 {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}\nhtml[data-theme='dark'] ._chart_1jdnu_1 canvas {\n filter: invert(1) hue-rotate(180deg);\n}\n._chart_1jdnu_1 {\n border: 1px solid rgba(255, 255, 255, 0);\n padding-top: 10px;\n position: relative;\n}\n._chart_1jdnu_1 canvas {\n width: 100% !important;\n height: 100% !important;\n}\n._chart_1jdnu_1._fixedHeight_1jdnu_13 {\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n height: auto;\n}\n._chart_1jdnu_1._stretchHeight_1jdnu_19 {\n display: flex;\n align-items: stretch;\n justify-content: stretch;\n height: 100%;\n}\n._chart_1jdnu_1:focus {\n border: 1px solid #85b7d9;\n outline: none;\n}\n._chart_1jdnu_1::-moz-focus-inner {\n border: 0;\n}\n._zoomForm_1jdnu_32 {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n top: 0;\n right: 0;\n}\n._zoomForm_1jdnu_32 ._zoomReset_1jdnu_40 {\n margin-left: 10px;\n}\n._zoomForm_1jdnu_32 ._help_1jdnu_43 {\n margin-left: 5px;\n line-height: 0;\n}\n._autoWeight_1jdnu_47 {\n width: 'auto';\n height: 'auto';\n}"));
40658
+ elementStyle.appendChild(document.createTextNode("html[data-theme='dark'] ._chart_e3qdd_1 canvas {\n filter: invert(1) hue-rotate(180deg);\n}\n._chart_e3qdd_1 {\n border: 1px solid rgba(255, 255, 255, 0);\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 8px;\n}\n._chart_e3qdd_1 ._canvas_e3qdd_11 {\n flex-grow: 1;\n min-height: 0;\n position: relative;\n}\n._chart_e3qdd_1 ._canvas_e3qdd_11 canvas {\n width: 100% !important;\n height: 100% !important;\n}\n._chart_e3qdd_1._fixedHeight_e3qdd_20 {\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n height: auto;\n}\n._chart_e3qdd_1._stretchHeight_e3qdd_26 {\n display: flex;\n align-items: stretch;\n justify-content: stretch;\n height: 100%;\n}\n._chart_e3qdd_1._squareAspectRatio_e3qdd_32 {\n aspect-ratio: 1;\n min-height: 0;\n min-width: 0;\n}\n._chart_e3qdd_1:focus {\n outline: none;\n}\n._chart_e3qdd_1::-moz-focus-inner {\n border: 0;\n}\n._zoomForm_e3qdd_43 {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n top: 0;\n right: 0;\n}\n._zoomForm_e3qdd_43 ._zoomReset_e3qdd_51 {\n margin-left: 10px;\n}\n._zoomForm_e3qdd_43 ._help_e3qdd_54 {\n margin-left: 5px;\n line-height: 0;\n}\n._autoWeight_e3qdd_58 {\n width: auto;\n height: auto;\n}\n._table_e3qdd_62 {\n overflow: auto;\n}\n._controls_gbo9q_1 {\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--padding-xs);\n}\n._buttons_gbo9q_7 {\n display: flex;\n align-items: flex-start;\n margin-left: auto;\n gap: var(--padding-xxs);\n}\n._legend_wpro0_1 {\n position: absolute;\n opacity: 0.9;\n display: flex;\n flex-direction: column;\n z-index: 1;\n}\n._legend_wpro0_1._isDragging_wpro0_8 {\n opacity: 0;\n}\n._legendItems_wpro0_11 {\n background-color: var(--color-background-raised);\n border: 1px solid var(--color-border);\n padding: 4px 8px;\n border-radius: 2px;\n overflow-y: auto;\n max-height: 100%;\n overflow: overlay;\n --scrollbar-color: #00000040;\n}\n._legendItems_wpro0_11::-webkit-scrollbar {\n display: block;\n width: 16px;\n z-index: 2;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-button {\n display: none;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-track {\n background-color: #00000000;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-track-piece {\n background-color: #00000000;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-thumb {\n background-color: #00000000;\n border: 5px solid transparent;\n border-radius: 24px;\n box-shadow: 4px 0px 0px 4px var(--scrollbar-color) inset;\n}\n._legendItems_wpro0_11::-webkit-scrollbar-corner {\n background: rgba(0, 0, 0, 0);\n}\n._legend_wpro0_1._isDragging_wpro0_8 ._legendItems_wpro0_11._legendItems_wpro0_11 {\n pointer-events: none;\n}\n._legend_wpro0_1._isHidden_wpro0_47 ._legendItems_wpro0_11._legendItems_wpro0_11 {\n display: none;\n}\n._legendToggle_wpro0_50 {\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(50%, -50%);\n display: none;\n}\n._legend_wpro0_1._isHidden_wpro0_47 ._legendToggle_wpro0_50._legendToggle_wpro0_50,\n._legend_wpro0_1:hover ._legendToggle_wpro0_50._legendToggle_wpro0_50 {\n display: block;\n}\n._legend_wpro0_1:active ._legendToggle_wpro0_50._legendToggle_wpro0_50:not(:hover) {\n display: none;\n}\n._legend_wpro0_1._isHidden_wpro0_47 ._legendToggle_wpro0_50._legendToggle_wpro0_50 {\n position: static;\n transform: none;\n}\n._legend_wpro0_1._isDragging_wpro0_8 ._legendToggle_wpro0_50._legendToggle_wpro0_50 {\n display: none;\n}\n._legendItem_wpro0_11 {\n display: flex;\n align-items: flex-start;\n gap: 8px;\n user-select: none;\n cursor: pointer;\n font-size: 12px;\n line-height: 16px;\n}\n._legendItemSymbol_wpro0_80 {\n display: flex;\n align-items: center;\n height: 16px;\n position: relative;\n flex-shrink: 0;\n}\nhtml[data-theme='dark'] ._legendItemSymbol_wpro0_80._legendItemSymbol_wpro0_80 {\n filter: invert(1) hue-rotate(180deg);\n}\n._legendItemBox_wpro0_90 {\n width: 100%;\n height: 12px;\n display: block;\n}\n._legendItemLine_wpro0_95 {\n position: absolute;\n display: flex;\n top: 50%;\n left: 0;\n width: 100%;\n transform: translateY(-50%);\n}\n._legendItemPoint_wpro0_103 {\n position: absolute;\n display: flex;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n}\n._isHidden_wpro0_47 ._legendItemText_wpro0_110._legendItemText_wpro0_110 {\n text-decoration: line-through;\n}\n._scrollbars_wpro0_113 {\n overflow: overlay;\n --scrollbar-color: #00000040;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar {\n display: block;\n width: 16px;\n z-index: 2;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-button {\n display: none;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-track {\n background-color: #00000000;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-track-piece {\n background-color: #00000000;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-thumb {\n background-color: #00000000;\n border: 5px solid transparent;\n border-radius: 24px;\n box-shadow: 4px 0px 0px 4px var(--scrollbar-color) inset;\n}\n._scrollbars_wpro0_113::-webkit-scrollbar-corner {\n background: rgba(0, 0, 0, 0);\n}\n._dropzoneContainer_wpro0_140 {\n position: absolute;\n}\n._dropzone_wpro0_140 {\n position: absolute;\n width: 50%;\n height: 50%;\n display: flex;\n}\n._dropzone_wpro0_140._left_wpro0_149 {\n left: 0;\n justify-content: flex-start;\n}\n._dropzone_wpro0_140._right_wpro0_153 {\n right: 0;\n justify-content: flex-end;\n}\n._dropzone_wpro0_140._top_wpro0_157 {\n top: 0;\n align-items: flex-start;\n}\n._dropzone_wpro0_140._bottom_wpro0_161 {\n bottom: 0;\n align-items: flex-end;\n}\n._dropzonePlaceholder_wpro0_165 {\n position: absolute;\n background-color: rgba(0, 0, 0, 0.05);\n display: none;\n}\n[data-theme='dark'] ._dropzonePlaceholder_wpro0_165 {\n background-color: rgba(255, 255, 255, 0.05);\n}\n._isActive_wpro0_173 ._dropzonePlaceholder_wpro0_165._dropzonePlaceholder_wpro0_165 {\n display: block;\n}\n._resizeContainer_wpro0_176 {\n position: absolute;\n inset: 0;\n z-index: -1;\n}\nhtml[data-theme='dark'] ._chart_1jdnu_1 canvas {\n filter: invert(1) hue-rotate(180deg);\n}\n._chart_1jdnu_1 {\n border: 1px solid rgba(255, 255, 255, 0);\n padding-top: 10px;\n position: relative;\n}\n._chart_1jdnu_1 canvas {\n width: 100% !important;\n height: 100% !important;\n}\n._chart_1jdnu_1._fixedHeight_1jdnu_13 {\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n height: auto;\n}\n._chart_1jdnu_1._stretchHeight_1jdnu_19 {\n display: flex;\n align-items: stretch;\n justify-content: stretch;\n height: 100%;\n}\n._chart_1jdnu_1:focus {\n border: 1px solid #85b7d9;\n outline: none;\n}\n._chart_1jdnu_1::-moz-focus-inner {\n border: 0;\n}\n._zoomForm_1jdnu_32 {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n top: 0;\n right: 0;\n}\n._zoomForm_1jdnu_32 ._zoomReset_1jdnu_40 {\n margin-left: 10px;\n}\n._zoomForm_1jdnu_32 ._help_1jdnu_43 {\n margin-left: 5px;\n line-height: 0;\n}\n._autoWeight_1jdnu_47 {\n width: 'auto';\n height: 'auto';\n}\nhtml[data-theme='dark'] ._chart_x1sru_1 canvas {\n filter: invert(1) hue-rotate(180deg);\n}\n._chart_x1sru_1 {\n border: 1px solid rgba(255, 255, 255, 0);\n position: relative;\n display: flex;\n flex-direction: column;\n}\n._chart_x1sru_1 ._canvas_x1sru_10 {\n flex-grow: 1;\n min-height: 0;\n position: relative;\n}\n._chart_x1sru_1 ._canvas_x1sru_10 canvas {\n width: 100% !important;\n height: 100% !important;\n}\n._chart_x1sru_1._fixedHeight_x1sru_19 {\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n height: auto;\n}\n._chart_x1sru_1._stretchHeight_x1sru_25 {\n display: flex;\n align-items: stretch;\n justify-content: stretch;\n height: 100%;\n}\n._chart_x1sru_1:focus {\n border: 1px solid #85b7d9;\n outline: none;\n}\n._chart_x1sru_1::-moz-focus-inner {\n border: 0;\n}\n._zoomForm_x1sru_38 {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n top: 0;\n right: 0;\n}\n._zoomForm_x1sru_38 ._zoomReset_x1sru_46 {\n margin-left: 10px;\n}\n._zoomForm_x1sru_38 ._help_x1sru_49 {\n margin-left: 5px;\n line-height: 0;\n}\n._autoWeight_x1sru_53 {\n width: auto;\n height: auto;\n}\n._actions_x1sru_57 {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n}\nhtml[data-theme='dark'] ._chart_1jdnu_1 canvas {\n filter: invert(1) hue-rotate(180deg);\n}\n._chart_1jdnu_1 {\n border: 1px solid rgba(255, 255, 255, 0);\n padding-top: 10px;\n position: relative;\n}\n._chart_1jdnu_1 canvas {\n width: 100% !important;\n height: 100% !important;\n}\n._chart_1jdnu_1._fixedHeight_1jdnu_13 {\n display: flex;\n align-items: flex-start;\n justify-content: flex-start;\n height: auto;\n}\n._chart_1jdnu_1._stretchHeight_1jdnu_19 {\n display: flex;\n align-items: stretch;\n justify-content: stretch;\n height: 100%;\n}\n._chart_1jdnu_1:focus {\n border: 1px solid #85b7d9;\n outline: none;\n}\n._chart_1jdnu_1::-moz-focus-inner {\n border: 0;\n}\n._zoomForm_1jdnu_32 {\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n top: 0;\n right: 0;\n}\n._zoomForm_1jdnu_32 ._zoomReset_1jdnu_40 {\n margin-left: 10px;\n}\n._zoomForm_1jdnu_32 ._help_1jdnu_43 {\n margin-left: 5px;\n line-height: 0;\n}\n._autoWeight_1jdnu_47 {\n width: 'auto';\n height: 'auto';\n}"));
40727
40659
  document.head.appendChild(elementStyle);
40728
40660
  }
40729
40661
  } catch (e) {