@oliasoft-open-source/charts-library 4.6.0 → 4.7.0-beta-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, Tooltip as Tooltip$2, Button, Flex, Text, Menu, Popover, Field, InputGroup, NumberInput, InputGroupAddon, Select, ButtonGroup, Spacer } from "@oliasoft-open-source/react-ui-library";
14
+ import { Portal, Icon, Menu, Tooltip as Tooltip$2, Button, Flex, Text, 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 } from "lodash";
16
16
  /*!
17
17
  * @kurkle/color v0.3.2
@@ -22804,55 +22804,139 @@ 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
+ };
22807
22846
  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" })));
22808
22847
  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 }));
22809
22848
  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" })));
22810
- const LineOptions = ({
22849
+ function getLineOptions({
22811
22850
  lineEnabled,
22812
22851
  onToggleLine,
22813
22852
  onTogglePoints,
22814
22853
  pointsEnabled,
22815
22854
  translations
22816
- }) => {
22817
- const options = [
22855
+ }) {
22856
+ return [
22818
22857
  {
22858
+ type: "Option",
22819
22859
  label: translations.pointsLines,
22820
22860
  icon: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgLineAndPoint, {}) }),
22821
22861
  selected: pointsEnabled && lineEnabled,
22822
22862
  onClick: () => {
22823
- onTogglePoints();
22863
+ if (!pointsEnabled)
22864
+ onTogglePoints();
22865
+ if (!lineEnabled)
22866
+ onToggleLine();
22824
22867
  }
22825
22868
  },
22826
22869
  {
22870
+ type: "Option",
22827
22871
  label: translations.linesOnly,
22828
22872
  icon: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgLineOnly, {}) }),
22829
22873
  selected: !pointsEnabled && lineEnabled,
22830
22874
  onClick: () => {
22831
- onTogglePoints();
22832
- onToggleLine();
22875
+ if (pointsEnabled)
22876
+ onTogglePoints();
22877
+ if (!lineEnabled)
22878
+ onToggleLine();
22833
22879
  }
22834
22880
  },
22835
22881
  {
22882
+ type: "Option",
22836
22883
  label: translations.pointsOnly,
22837
22884
  icon: /* @__PURE__ */ jsx(Icon, { icon: /* @__PURE__ */ jsx(SvgPointOnly, {}) }),
22838
22885
  selected: pointsEnabled && !lineEnabled,
22839
22886
  onClick: () => {
22840
- onToggleLine();
22887
+ if (!pointsEnabled)
22888
+ onTogglePoints();
22889
+ if (lineEnabled)
22890
+ onToggleLine();
22841
22891
  }
22842
22892
  }
22843
22893
  ];
22894
+ }
22895
+ const LineOptions = ({
22896
+ lineEnabled,
22897
+ onToggleLine,
22898
+ onTogglePoints,
22899
+ pointsEnabled,
22900
+ translations
22901
+ }) => {
22902
+ const options = getLineOptions({
22903
+ lineEnabled,
22904
+ onToggleLine,
22905
+ onTogglePoints,
22906
+ pointsEnabled,
22907
+ translations
22908
+ });
22909
+ const [menuOpen, setMenuOpen] = useState(false);
22844
22910
  const selectedOption = options.find((option) => option.selected);
22845
- return /* @__PURE__ */ jsx(Tooltip$2, { text: selectedOption == null ? void 0 : selectedOption.label, placement: "bottom-start", children: /* @__PURE__ */ jsx(
22846
- Button,
22911
+ return /* @__PURE__ */ jsx(
22912
+ Menu,
22847
22913
  {
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
22914
+ open: menuOpen,
22915
+ setOpen: setMenuOpen,
22916
+ menu: {
22917
+ sections: options,
22918
+ trigger: "Component",
22919
+ component: /* @__PURE__ */ jsx(
22920
+ Tooltip$2,
22921
+ {
22922
+ text: selectedOption == null ? void 0 : selectedOption.label,
22923
+ placement: "bottom-start",
22924
+ enabled: !menuOpen,
22925
+ children: /* @__PURE__ */ jsx(
22926
+ Button,
22927
+ {
22928
+ colored: "muted",
22929
+ basic: true,
22930
+ small: true,
22931
+ round: true,
22932
+ icon: selectedOption == null ? void 0 : selectedOption.icon
22933
+ }
22934
+ )
22935
+ }
22936
+ )
22937
+ }
22854
22938
  }
22855
- ) });
22939
+ );
22856
22940
  };
22857
22941
  var DefaultContext = {
22858
22942
  color: void 0,
@@ -22954,7 +23038,7 @@ function TbX(props) {
22954
23038
  function TbZoomIn(props) {
22955
23039
  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);
22956
23040
  }
22957
- const DragOptions = ({
23041
+ function getDragOptions({
22958
23042
  onTogglePan,
22959
23043
  onToggleZoom,
22960
23044
  panEnabled,
@@ -22975,56 +23059,98 @@ const DragOptions = ({
22975
23059
  dragDisabled,
22976
23060
  dragToMoveAnnotation
22977
23061
  }
22978
- }) => {
22979
- const options = useMemo(
22980
- () => [
22981
- {
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
- },
23062
+ }) {
23063
+ return [
23064
+ {
23065
+ buttonLabel: dragToZoom,
23066
+ label: /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
23067
+ /* @__PURE__ */ jsx(Text, { children: "Drag to zoom" }),
23068
+ /* @__PURE__ */ jsx(Text, { small: true, muted: true, children: doubleClickToReset })
23069
+ ] }),
23070
+ icon: /* @__PURE__ */ jsx(TbZoomIn, {}),
23071
+ selected: zoomEnabled,
23072
+ onClick: onToggleZoom
23073
+ },
23074
+ {
23075
+ buttonLabel: dragToPan,
23076
+ label: /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
23077
+ /* @__PURE__ */ jsx(Text, { children: "Drag to pan" }),
23078
+ /* @__PURE__ */ jsx(Text, { small: true, muted: true, children: orDoubleClickToCanvas })
23079
+ ] }),
23080
+ icon: /* @__PURE__ */ jsx(TbArrowsMove, {}),
23081
+ selected: panEnabled,
23082
+ onClick: onTogglePan
23083
+ },
23084
+ ...isDragDataAllowed ? [
22991
23085
  {
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
23008
- }
23009
- ] : [],
23010
- ...isDragAnnotationAllowed ? [
23011
- {
23012
- label: dragToMoveAnnotation,
23013
- icon: /* @__PURE__ */ jsx(TbHandStop, {}),
23014
- selected: enableDragAnnotation,
23015
- type: "Option",
23016
- onClick: onToggleDragAnnotation
23017
- }
23018
- ] : [],
23086
+ label: dragToMovePoints,
23087
+ icon: /* @__PURE__ */ jsx(TbHandStop, {}),
23088
+ selected: enableDragPoints,
23089
+ type: "Option",
23090
+ onClick: onToggleDragPoints
23091
+ }
23092
+ ] : [],
23093
+ ...isDragAnnotationAllowed ? [
23019
23094
  {
23020
- label: dragDisabled,
23021
- icon: /* @__PURE__ */ jsx(TbBan, {}),
23022
- selected: !zoomEnabled && !panEnabled && !enableDragPoints && !enableDragAnnotation,
23023
- onClick: onDisableDragOptions
23095
+ label: dragToMoveAnnotation,
23096
+ icon: /* @__PURE__ */ jsx(TbHandStop, {}),
23097
+ selected: enableDragAnnotation,
23098
+ type: "Option",
23099
+ onClick: onToggleDragAnnotation
23024
23100
  }
23025
- ],
23026
- [zoomEnabled, panEnabled, enableDragPoints, isDragDataAllowed]
23027
- );
23101
+ ] : [],
23102
+ {
23103
+ label: dragDisabled,
23104
+ icon: /* @__PURE__ */ jsx(TbBan, {}),
23105
+ selected: !zoomEnabled && !panEnabled && !enableDragPoints && !enableDragAnnotation,
23106
+ onClick: onDisableDragOptions
23107
+ }
23108
+ ];
23109
+ }
23110
+ const DragOptions = ({
23111
+ onTogglePan,
23112
+ onToggleZoom,
23113
+ panEnabled,
23114
+ zoomEnabled,
23115
+ enableDragPoints,
23116
+ enableDragAnnotation,
23117
+ isDragDataAllowed,
23118
+ isDragAnnotationAllowed,
23119
+ onToggleDragAnnotation,
23120
+ onToggleDragPoints,
23121
+ onDisableDragOptions,
23122
+ translations: {
23123
+ dragToZoom,
23124
+ doubleClickToReset,
23125
+ dragToPan,
23126
+ orDoubleClickToCanvas,
23127
+ dragToMovePoints,
23128
+ dragDisabled,
23129
+ dragToMoveAnnotation
23130
+ }
23131
+ }) => {
23132
+ const options = getDragOptions({
23133
+ onTogglePan,
23134
+ onToggleZoom,
23135
+ panEnabled,
23136
+ zoomEnabled,
23137
+ enableDragPoints,
23138
+ enableDragAnnotation,
23139
+ isDragDataAllowed,
23140
+ isDragAnnotationAllowed,
23141
+ onToggleDragAnnotation,
23142
+ onToggleDragPoints,
23143
+ onDisableDragOptions,
23144
+ translations: {
23145
+ dragToZoom,
23146
+ doubleClickToReset,
23147
+ dragToPan,
23148
+ orDoubleClickToCanvas,
23149
+ dragToMovePoints,
23150
+ dragDisabled,
23151
+ dragToMoveAnnotation
23152
+ }
23153
+ });
23028
23154
  const selectedOption = options.find((option) => option.selected);
23029
23155
  const optionsWithDragPoints = options.map(
23030
23156
  ({ icon, label, onClick, selected }) => ({
@@ -23055,8 +23181,8 @@ const DragOptions = ({
23055
23181
  }
23056
23182
  );
23057
23183
  };
23058
- const controls = "_controls_gbo9q_1";
23059
- const buttons = "_buttons_gbo9q_7";
23184
+ const controls = "_controls_1961q_1";
23185
+ const buttons = "_buttons_1961q_7";
23060
23186
  const styles$4 = {
23061
23187
  controls,
23062
23188
  buttons
@@ -24509,89 +24635,150 @@ const Controls = ({
24509
24635
  dispatch,
24510
24636
  generatedDatasets
24511
24637
  });
24638
+ const [measureRef, { width }] = useMeasure$1();
24639
+ const isNarrow = width < 200;
24512
24640
  return /* @__PURE__ */ jsxs(Fragment, { children: [
24513
24641
  /* @__PURE__ */ jsxs("div", { className: styles$4.controls, children: [
24514
24642
  !!options.title && /* @__PURE__ */ jsx(Text, { bold: true, children: options.title }),
24515
24643
  headerComponent,
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,
24644
+ /* @__PURE__ */ jsx(ControlsPortal, { controlsPortalId: controlsPortalId ?? "", children: /* @__PURE__ */ jsxs(
24645
+ "div",
24646
+ {
24647
+ className: styles$4.buttons,
24648
+ ref: measureRef,
24649
+ children: [
24650
+ !showTable && /* @__PURE__ */ jsxs(Fragment, { children: [
24651
+ /* @__PURE__ */ jsx(
24652
+ AxesOptions,
24547
24653
  {
24548
- small: true,
24549
- basic: true,
24550
- colored: "muted",
24551
- round: true,
24552
- icon: "download",
24553
- onClick: handleDownload
24654
+ initialAxesRanges,
24655
+ axes: state.axes,
24656
+ controlsAxesLabels,
24657
+ onUpdateAxes,
24658
+ onResetAxes,
24659
+ depthType,
24660
+ translations
24554
24661
  }
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,
24662
+ ),
24663
+ isNarrow ? /* @__PURE__ */ jsx(
24664
+ Menu,
24665
+ {
24666
+ menu: {
24667
+ placement: "bottom-end",
24668
+ sections: [
24669
+ ...getLineOptions({
24670
+ lineEnabled,
24671
+ onToggleLine,
24672
+ onTogglePoints,
24673
+ pointsEnabled,
24674
+ translations
24675
+ }).map((option) => ({
24676
+ ...option,
24677
+ type: "Option"
24678
+ })),
24679
+ {
24680
+ type: "Divider"
24681
+ },
24682
+ ...getDragOptions({
24683
+ onTogglePan,
24684
+ onToggleZoom,
24685
+ panEnabled,
24686
+ zoomEnabled,
24687
+ enableDragPoints,
24688
+ enableDragAnnotation,
24689
+ isDragDataAllowed: dragData == null ? void 0 : dragData.enableDragData,
24690
+ isDragAnnotationAllowed: annotations == null ? void 0 : annotations.enableDragAnnotation,
24691
+ onToggleDragAnnotation,
24692
+ onToggleDragPoints,
24693
+ onDisableDragOptions,
24694
+ translations
24695
+ }).map((option) => ({
24696
+ ...option,
24697
+ type: "Option"
24698
+ })),
24699
+ {
24700
+ type: "Divider"
24701
+ },
24702
+ {
24703
+ icon: "download",
24704
+ label: translations.downloadAsPNG,
24705
+ type: "Option",
24706
+ onClick: handleDownload
24707
+ }
24708
+ ],
24709
+ trigger: "Component",
24710
+ component: /* @__PURE__ */ jsx(Button, { colored: "muted", basic: true, small: true, round: true, icon: "menu" })
24711
+ }
24712
+ }
24713
+ ) : /* @__PURE__ */ jsxs(Fragment, { children: [
24714
+ /* @__PURE__ */ jsx(
24715
+ LineOptions,
24716
+ {
24717
+ lineEnabled,
24718
+ pointsEnabled,
24719
+ onToggleLine,
24720
+ onTogglePoints,
24721
+ translations
24722
+ }
24723
+ ),
24724
+ /* @__PURE__ */ jsx(
24725
+ Tooltip$2,
24726
+ {
24727
+ text: translations.downloadAsPNG,
24728
+ placement: "bottom-end",
24729
+ children: /* @__PURE__ */ jsx(
24730
+ Button,
24731
+ {
24732
+ small: true,
24733
+ basic: true,
24734
+ colored: "muted",
24735
+ round: true,
24736
+ icon: "download",
24737
+ onClick: handleDownload
24738
+ }
24739
+ )
24740
+ }
24741
+ ),
24742
+ /* @__PURE__ */ jsx(
24743
+ DragOptions,
24744
+ {
24745
+ panEnabled,
24746
+ zoomEnabled,
24747
+ onTogglePan,
24748
+ onToggleZoom,
24749
+ enableDragPoints,
24750
+ enableDragAnnotation,
24751
+ isDragDataAllowed: dragData == null ? void 0 : dragData.enableDragData,
24752
+ isDragAnnotationAllowed: annotations == null ? void 0 : annotations.enableDragAnnotation,
24753
+ onToggleDragAnnotation,
24754
+ onToggleDragPoints,
24755
+ onDisableDragOptions,
24756
+ translations
24757
+ }
24758
+ )
24759
+ ] })
24760
+ ] }),
24761
+ table2 ? /* @__PURE__ */ jsx(
24762
+ Tooltip$2,
24583
24763
  {
24584
- small: true,
24585
- basic: true,
24586
- colored: "muted",
24587
- round: true,
24588
- icon: showTable ? "chart" : "table",
24589
- onClick: onToggleTable
24764
+ text: showTable ? translations.showChart : translations.showTable,
24765
+ placement: "bottom-end",
24766
+ children: /* @__PURE__ */ jsx(
24767
+ Button,
24768
+ {
24769
+ small: true,
24770
+ basic: true,
24771
+ colored: "muted",
24772
+ round: true,
24773
+ icon: showTable ? "chart" : "table",
24774
+ onClick: onToggleTable
24775
+ }
24776
+ )
24590
24777
  }
24591
- )
24592
- }
24593
- ) : null
24594
- ] }) })
24778
+ ) : null
24779
+ ]
24780
+ }
24781
+ ) })
24595
24782
  ] }),
24596
24783
  subheaderComponent
24597
24784
  ] });
@@ -26393,45 +26580,6 @@ const getConfig = (key = "") => key ? config[key] : config;
26393
26580
  const setConfig = (key, newValue) => {
26394
26581
  config[key] = newValue;
26395
26582
  };
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
- };
26435
26583
  const legend = "_legend_wpro0_1";
26436
26584
  const isDragging = "_isDragging_wpro0_8";
26437
26585
  const legendItems = "_legendItems_wpro0_11";
@@ -40640,7 +40788,7 @@ export {
40640
40788
  try {
40641
40789
  if (typeof document != "undefined") {
40642
40790
  var elementStyle = document.createElement("style");
40643
- 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}"));
40791
+ 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}"));
40644
40792
  document.head.appendChild(elementStyle);
40645
40793
  }
40646
40794
  } catch (e) {