@apia/charts 0.1.0 → 0.1.1

package/dist/index.js

@@ -1,2475 +1,2 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { createContext, useContext, useState, useMemo, useLayoutEffect, useEffect, useRef } from 'react';
-import { Box, Select } from 'theme-ui';
-import { ThemeProviderContext, spacing, makeStyledComponent, getVariant } from '@apia/theme';
-import { uniqueId } from 'lodash';
-import { makeImperativeComponent, arrayOrArray, useImperativeComponentEvents, getValueByPath, usePanAndZoom, usePrevious, getIndex } from '@apia/util';
-import { scaleBand, scaleLog, scaleLinear, scaleOrdinal } from '@visx/scale';
-import { Grid } from '@visx/visx';
-import { Group } from '@visx/group';
-import { BarGroupHorizontal, BarGroup, LinePath, Line } from '@visx/shape';
-import { AxisLeft, AxisBottom } from '@visx/axis';
-import { usePanelParametersSelector } from '@apia/dashboard';
-import tinycolor from 'tinycolor2';
-import { localPoint } from '@visx/event';
-import { SimpleButton, useTooltip } from '@apia/components';
-import { icons } from '@apia/icons';
-import Pie from '@visx/shape/lib/shapes/Pie';
-import { min, max, extent } from 'd3-array';
-import * as allCurves from '@visx/curve';
-import { Fragment as Fragment$1 } from 'theme-ui/jsx-runtime';
-import { GridRows } from '@visx/grid';
-import { useGauge } from 'use-gauge';
-
-function parseMargin(margin = {
-  left: 100,
-  right: 50,
-  top: 50,
-  bottom: 70
-}) {
-  return typeof margin === "number" ? { left: margin, right: margin, top: margin, bottom: margin } : margin;
-}
-
-const ChartContext = createContext({});
-
-const LegendItem = ({
-  groupId,
-  title,
-  color,
-  className,
-  isHighlighted,
-  isAnyHighlighted,
-  avoidEvent
-}) => {
-  const { chartId } = useContext(ChartContext);
-  return /* @__PURE__ */ jsx(
-    SimpleButton,
-    {
-      variant: "icon-outline",
-      className: `${className != null ? className : ""} ${isHighlighted ? "highlight" : ""}`,
-      iconColor: color || "black",
-      icon: color === "transparent" ? void 0 : icons.SquareFilled,
-      sx: {
-        opacity: isAnyHighlighted && !isHighlighted ? "0.15" : "1"
-      },
-      onMouseEnter: () => {
-        if (avoidEvent) {
-          return;
-        }
-        chartMethods(chartId, "highlight", groupId);
-      },
-      onMouseLeave: () => {
-        if (avoidEvent) {
-          return;
-        }
-        chartMethods(chartId, "highlight", "");
-      },
-      children: title
-    }
-  );
-};
-
-const [legendContainerMethods, , LegendContainer] = makeImperativeComponent()({
-  initialState: {
-    highlightedBarGroup: ""
-  },
-  methods: {
-    highlight(setState, highlightedBarGroup) {
-      setState({ highlightedBarGroup });
-    }
-  },
-  Component: ({
-    references,
-    containerClassName,
-    highlightedBarGroup,
-    avoidEvent
-  }) => {
-    return /* @__PURE__ */ jsx(Box, { className: containerClassName, children: references.map((data) => {
-      return /* @__PURE__ */ jsx(
-        LegendItem,
-        {
-          isHighlighted: data.title === highlightedBarGroup,
-          isAnyHighlighted: highlightedBarGroup !== "",
-          groupId: data.title,
-          color: data.color,
-          title: data.title,
-          avoidEvent: avoidEvent != null ? avoidEvent : false
-        },
-        data.title
-      );
-    }) });
-  }
-});
-
-const Bar$1 = ({
-  bar,
-  barGroup,
-  chart,
-  parsedData,
-  isSingle,
-  effectiveMargin,
-  setsWithColor
-}) => {
-  var _a;
-  const column = arrayOrArray(chart.dataSets.data)[bar.index];
-  const set = arrayOrArray(column == null ? void 0 : column.sets)[barGroup.index];
-  const currentBarColor = (_a = setsWithColor.find(
-    (innerSet) => innerSet.columnName === column.name && innerSet.key === set.key
-  )) == null ? void 0 : _a.color;
-  const [isHighlighted, setIsHighlighted] = useState(false);
-  const [isAnyHighlighted, setIsAnyHighlighted] = useState(false);
-  const { open } = useTooltip({
-    children: /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            color: currentBarColor
-          },
-          children: /* @__PURE__ */ jsx("strong", { children: parsedData[barGroup.index].columnName })
-        }
-      ),
-      chart.showValues && /* @__PURE__ */ jsx("div", { children: bar.value }),
-      /* @__PURE__ */ jsx("div", { children: bar.key })
-    ] })
-  });
-  useImperativeComponentEvents({
-    highlight(barName) {
-      if (barName.split(" - ").length === 1) {
-        setIsHighlighted(barName === bar.key);
-        setIsAnyHighlighted(barName !== bar.key && barName !== "");
-      } else if (barName.split(" - ").length === 2) {
-        setIsHighlighted(
-          barName.split(" - ")[0] === bar.key && barName.split(" - ")[1] === set.key
-        );
-        setIsAnyHighlighted(
-          barName.split(" - ")[0] !== bar.key && barName.split(" - ")[0] !== ""
-        );
-      }
-    }
-  });
-  const { chartId } = useContext(ChartContext);
-  return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsxs(
-      "text",
-      {
-        x: bar.x + 5,
-        y: bar.y - 5,
-        width: bar.width,
-        height: bar.height,
-        textAnchor: "start",
-        style: {
-          display: isHighlighted ? "block" : "none",
-          opacity: isHighlighted ? 1 : 0,
-          transition: "opacity 500ms"
-        },
-        children: [
-          bar.value,
-          " - ",
-          parsedData[barGroup.index].columnName
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        as: "rect",
-        className: "chart__barRect",
-        sx: useMemo(
-          () => ({
-            fill: isAnyHighlighted ? `#${tinycolor(currentBarColor).desaturate(70).toHex()}` : currentBarColor,
-            "&:hover": {
-              fill: `#${tinycolor(currentBarColor).saturate(25).toHex()}`
-            },
-            transition: "fill 500ms, opacity 500ms",
-            x: bar.x,
-            y: bar.y,
-            width: bar.width - effectiveMargin.left,
-            opacity: isAnyHighlighted && !isHighlighted ? 0.15 : 1,
-            height: bar.height > 0 ? bar.height : 0
-          }),
-          [
-            bar.height,
-            bar.width,
-            bar.x,
-            bar.y,
-            currentBarColor,
-            effectiveMargin.left,
-            isAnyHighlighted,
-            isHighlighted
-          ]
-        ),
-        onMouseEnter: (ev) => {
-          var _a2, _b, _c;
-          if (!isSingle) {
-            legendContainerMethods.highlight(chartId, bar.key);
-          }
-          (_a2 = ev.target.classList) == null ? void 0 : _a2.add("over");
-          const point = {
-            x: (_b = localPoint(ev)) == null ? void 0 : _b.x,
-            y: (_c = localPoint(ev)) == null ? void 0 : _c.y
-          };
-          if (!point)
-            return;
-          open({
-            attachToElement: () => ev.target,
-            attachToElementAnchorPoint: "center"
-          });
-        },
-        onMouseLeave: (ev) => {
-          var _a2;
-          if (!isSingle) {
-            legendContainerMethods.highlight(chartId, "");
-          }
-          (_a2 = ev.target.classList) == null ? void 0 : _a2.remove("over");
-        },
-        children: /* @__PURE__ */ jsx(
-          "animate",
-          {
-            attributeName: "width",
-            from: 0,
-            to: bar.width,
-            dur: "0.5s",
-            calcMode: "paced",
-            keySplines: "0.5 0 0.5 1;",
-            keyTimes: "0; 1"
-          }
-        )
-      }
-    )
-  ] });
-};
-
-function getBarColor(colors, index, alwaysDiffer = false) {
-  const module = colors.length;
-  let count = 0;
-  let barColor = "";
-  if (!alwaysDiffer) {
-    if (colors[index]) {
-      barColor = colors[index];
-    } else {
-      let innerIndex = index;
-      while (innerIndex >= module) {
-        innerIndex = index / module;
-        count++;
-      }
-      barColor = tinycolor(colors[index % module]).desaturate(count * 5).toHex();
-    }
-  } else {
-    if (colors[index]) {
-      barColor = colors[index];
-    } else {
-      barColor = tinycolor(colors[index % module]).toHex();
-    }
-  }
-  return barColor;
-}
-
-var __defProp$7 = Object.defineProperty;
-var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
-var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
-var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$7 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$7.call(b, prop))
-      __defNormalProp$7(a, prop, b[prop]);
-  if (__getOwnPropSymbols$7)
-    for (var prop of __getOwnPropSymbols$7(b)) {
-      if (__propIsEnum$7.call(b, prop))
-        __defNormalProp$7(a, prop, b[prop]);
-    }
-  return a;
-};
-function useChartStyles(schemeName) {
-  var _a, _b, _c;
-  const theme = useContext(ThemeProviderContext);
-  if (!theme.layout)
-    console.error("The layout property is missing in the current theme");
-  const charts = (_b = (_a = theme.layout) == null ? void 0 : _a.charts) != null ? _b : {};
-  const defaultStyles = charts.common;
-  const currentStylescheme = {
-    schema: getValueByPath(
-      theme.colors,
-      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-      (_c = charts[schemeName || "blue"]) == null ? void 0 : _c.schema
-    )
-  };
-  return __spreadValues$7(__spreadValues$7({}, defaultStyles), currentStylescheme);
-}
-
-var __defProp$6 = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
-var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
-var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$6 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$6.call(b, prop))
-      __defNormalProp$6(a, prop, b[prop]);
-  if (__getOwnPropSymbols$6)
-    for (var prop of __getOwnPropSymbols$6(b)) {
-      if (__propIsEnum$6.call(b, prop))
-        __defNormalProp$6(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
-function adjustDimensions$4({
-  width,
-  height,
-  maxWidth
-}) {
-  if (width <= maxWidth) {
-    return { width, height };
-  }
-  const ratio = width / height;
-  const newWidth = maxWidth;
-  const newHeight = Math.floor(newWidth / ratio);
-  return { width: newWidth, height: newHeight };
-}
-const getYValue = (d) => d.columnName;
-const HorizontalBars = ({
-  margin = { top: 20, left: 50, bottom: 150, right: 20 },
-  chart,
-  className,
-  chartId,
-  outerClassName,
-  allowZoom
-}) => {
-  var _a;
-  const effectiveMargin = parseMargin(margin);
-  let innerWidth = chart.ratio.width + (-effectiveMargin.left - effectiveMargin.right) / 2;
-  let innerHeight = chart.ratio.height + (-effectiveMargin.top - effectiveMargin.bottom) / 2;
-  if (innerWidth > chart.ratio.maxWidth) {
-    const newValues = adjustDimensions$4({
-      height: innerHeight,
-      width: innerWidth,
-      maxWidth: chart.ratio.maxWidth
-    });
-    innerWidth = newValues.width;
-    innerHeight = newValues.height;
-  }
-  const columnas = arrayOrArray((_a = chart.dataSets) == null ? void 0 : _a.data).filter((column) => !!column.sets).map((column) => {
-    return __spreadProps$6(__spreadValues$6({}, column), {
-      sets: column.sets
-    });
-  });
-  const xValues = arrayOrArray(columnas[0].sets).map(
-    (innerCoord) => innerCoord.key
-  );
-  const columnNames = columnas.map((col) => {
-    return col.name;
-  });
-  const parsedData = xValues.map((x) => {
-    const obj = columnas.reduce(
-      (acc, column) => {
-        return __spreadProps$6(__spreadValues$6({}, acc), {
-          [column.name]: arrayOrArray(column.sets).filter((coord) => {
-            return coord.key === x;
-          })[0].value
-        });
-      },
-      { columnName: x }
-    );
-    return obj;
-  });
-  const yScale = scaleBand({
-    range: [
-      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top,
-      innerHeight
-    ],
-    domain: parsedData.map(getYValue),
-    padding: 0.2
-  });
-  const columnGroupScale = scaleBand({
-    domain: columnNames,
-    range: [0, yScale.bandwidth()]
-  });
-  const xScaleLog = scaleLog({
-    range: [
-      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.left,
-      innerWidth
-    ],
-    domain: [
-      1,
-      Math.max(
-        ...parsedData.map(
-          (d) => Math.max(...columnNames.map((key) => Number(d[key])))
-        )
-      )
-    ],
-    base: 10
-  });
-  const xScaleLine = scaleLinear({
-    range: [
-      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.left,
-      innerWidth
-    ],
-    domain: [
-      0,
-      Math.max(
-        ...parsedData.map(
-          (d) => Math.max(...columnNames.map((key) => Number(d[key])))
-        )
-      )
-    ]
-  });
-  const color = scaleOrdinal({
-    domain: columnNames,
-    range: columnas.map((col) => col.color)
-  });
-  const parameters = usePanelParametersSelector((global) => {
-    return global;
-  });
-  const scale = parameters.PRMT_CHART_SCALE;
-  const isLogScale = scale === "0";
-  const xScale = useMemo(() => {
-    if (!isLogScale) {
-      return xScaleLine;
-    }
-    return xScaleLog;
-  }, [isLogScale, xScaleLine, xScaleLog]);
-  const id = useMemo(() => `VerticalBars${uniqueId()}`, []);
-  useLayoutEffect(() => {
-    document.querySelectorAll(
-      `#${id} .__${chartId != null ? chartId : outerClassName}`
-    ).forEach((current) => {
-      const width = current.getBoundingClientRect().width;
-      current.style.transformOrigin = current.getAttribute("x") + "px 14px";
-      current.style.transform = `rotate(15deg) translateX(${width / 2}px)`;
-    });
-  });
-  const styles = useChartStyles(chart.colorSchema);
-  const { boxRef, elementRef } = usePanAndZoom(
-    void 0,
-    !allowZoom
-  );
-  const setsWithColor = arrayOrArray(chart.dataSets.data).map((data, index) => {
-    const isSingle = arrayOrArray(chart.dataSets.data).length === 1;
-    const dataColor = data.color !== "" && data.color !== void 0 ? data.color : arrayOrArray(styles.schema).length > 0 ? getBarColor(arrayOrArray(styles.schema), index, isSingle) : "";
-    const returnColumnsArray = [];
-    arrayOrArray(data.sets).forEach((set) => {
-      if (set.color !== "" && set.color !== void 0) {
-        returnColumnsArray.push(__spreadProps$6(__spreadValues$6({}, set), { columnName: data.name }));
-      } else {
-        returnColumnsArray.push(__spreadProps$6(__spreadValues$6({}, set), {
-          color: dataColor,
-          columnName: data.name
-        }));
-      }
-    });
-    return returnColumnsArray;
-  });
-  const colorReference = setsWithColor.map((column) => {
-    var _a2;
-    return {
-      color: (_a2 = column[0].color) != null ? _a2 : "",
-      title: column[0].columnName
-    };
-  });
-  arrayOrArray(chart.dataSets.data).map((data) => {
-    const returnArray = [];
-    arrayOrArray(data.sets).forEach((set) => {
-      if (set.color !== "" && set.color !== void 0) {
-        returnArray.push({
-          color: set.color,
-          title: data.name + " - " + set.key
-        });
-      }
-    });
-    return returnArray;
-  }).flat().forEach((addRef) => colorReference.push(addRef));
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        ref: boxRef,
-        id,
-        className: `${outerClassName != null ? outerClassName : ""} ${chartId} ${chart.title}`,
-        sx: React.useMemo(() => {
-          return {
-            [`.__${chartId != null ? chartId : outerClassName}`]: {
-              transform: "rotate(45deg)",
-              transformOrigin: "attr(x) 18px"
-            },
-            overflow: "auto",
-            position: "relative",
-            height: `${chart.ratio.height}px`,
-            width: `${chart.ratio.width}px`
-          };
-        }, [chart.ratio.height, chart.ratio.width, chartId, outerClassName]),
-        children: /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            ref: elementRef,
-            className: `_${chartId} ${className ? className : ""} chart__svg`,
-            height: chart.ratio.height,
-            width: chart.ratio.width,
-            style: {
-              position: "absolute"
-            },
-            children: [
-              chart.showGrid && /* @__PURE__ */ jsx(
-                Grid.Grid,
-                {
-                  xScale,
-                  yScale,
-                  left: 0,
-                  width: innerWidth,
-                  height: innerHeight,
-                  numTicksRows: 10,
-                  numTicksColumns: 10,
-                  top: (typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top) - 20
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Group,
-                {
-                  top: (typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top) - 20,
-                  left: effectiveMargin.left,
-                  children: /* @__PURE__ */ jsx(
-                    BarGroupHorizontal,
-                    {
-                      data: parsedData,
-                      keys: columnNames,
-                      width: innerWidth,
-                      y0: getYValue,
-                      y0Scale: yScale,
-                      y1Scale: columnGroupScale,
-                      xScale,
-                      color,
-                      children: (barGroups) => barGroups.map((barGroup) => {
-                        return /* @__PURE__ */ jsx(
-                          Group,
-                          {
-                            top: barGroup.y0,
-                            children: barGroup.bars.map((bar) => {
-                              const key = `${barGroup.index}-${bar.index}-${bar.key}`;
-                              return /* @__PURE__ */ jsx(
-                                Bar$1,
-                                {
-                                  isSingle: barGroup.bars.length === 1,
-                                  bar,
-                                  barGroup,
-                                  chart,
-                                  parsedData,
-                                  effectiveMargin,
-                                  setsWithColor: setsWithColor.flat()
-                                },
-                                key
-                              );
-                            })
-                          },
-                          `bar-group-${barGroup.index}-${barGroup.y0}`
-                        );
-                      })
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                AxisLeft,
-                {
-                  scale: yScale,
-                  left: effectiveMargin.left,
-                  label: chart.chartType !== "pie2D" && chart.showAxisYTitle ? chart.axisYTitle : "",
-                  tickLabelProps: () => ({
-                    display: "none"
-                  })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                AxisBottom,
-                {
-                  top: innerHeight,
-                  scale: xScale,
-                  label: chart.chartType !== "pie2D" && chart.showAxisXTitle ? chart.axisXTitle : "",
-                  tickLabelProps: {
-                    className: "tickLabel"
-                  },
-                  labelOffset: 50
-                }
-              )
-            ]
-          }
-        )
-      }
-    ),
-    colorReference.length > 1 && /* @__PURE__ */ jsx(
-      LegendContainer,
-      {
-        id: chartId,
-        containerClassName: "legendContainer",
-        references: colorReference
-      }
-    )
-  ] });
-};
-
-const Slice = ({
-  arc,
-  arcPath,
-  chart,
-  actualColor
-}) => {
-  const [isHighlighted, setIsHighlighted] = useState(false);
-  const [isAnyHighlighted, setIsAnyHighlighted] = useState(false);
-  const { open } = useTooltip({
-    children: /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            color: `#${tinycolor(actualColor).toHex()}`
-          },
-          children: /* @__PURE__ */ jsx("strong", { children: arc.data.key })
-        }
-      ),
-      chart.showValues && /* @__PURE__ */ jsx("div", { children: `${arc.value} ${arc.data.percentage ? "- " + arc.data.percentage : ""}${arc.data.percentage ? "%" : ""}` })
-    ] })
-  });
-  useImperativeComponentEvents({
-    highlight(barName) {
-      setIsHighlighted(barName === arc.data.key);
-      setIsAnyHighlighted(barName !== arc.data.key && barName !== "");
-    }
-  });
-  const { chartId } = useContext(ChartContext);
-  const name = arc.data;
-  return /* @__PURE__ */ jsx(
-    "path",
-    {
-      style: useMemo(
-        () => ({
-          "&:hover": {
-            fill: `#${tinycolor(actualColor).saturate(25).toHex()}`
-          },
-          transition: "fill 500ms, opacity 500ms"
-        }),
-        [actualColor]
-      ),
-      fill: isAnyHighlighted ? `#${tinycolor(actualColor).desaturate(70).toHex()}` : actualColor,
-      opacity: isAnyHighlighted && !isHighlighted ? 0.15 : 1,
-      d: arcPath != null ? arcPath : "",
-      onMouseEnter: (ev) => {
-        var _a, _b, _c;
-        legendContainerMethods.highlight(chartId, arc.data.key);
-        (_a = ev.target.classList) == null ? void 0 : _a.add("over");
-        const point = {
-          x: (_b = localPoint(ev)) == null ? void 0 : _b.x,
-          y: (_c = localPoint(ev)) == null ? void 0 : _c.y
-        };
-        if (!point)
-          return;
-        open({
-          attachToElement: () => ev.target,
-          attachToElementAnchorPoint: "center"
-        });
-      },
-      onMouseLeave: (ev) => {
-        var _a;
-        legendContainerMethods.highlight(chartId, "");
-        (_a = ev.target.classList) == null ? void 0 : _a.remove("over");
-      }
-    },
-    `arc-${name.key}-${name.value}`
-  );
-};
-
-function ChartSelector({
-  chartId,
-  pieces,
-  className,
-  current,
-  setCurrent
-}) {
-  return /* @__PURE__ */ jsxs(
-    Select,
-    {
-      sx: { width: "auto" },
-      name: `chartSelector_${chartId}`,
-      className: `chartSelector_${chartId} ${className != null ? className : ""}`,
-      value: current != null ? current : "0",
-      onChange: (ev) => {
-        ev.preventDefault();
-        setCurrent(ev.target.value);
-      },
-      children: [
-        pieces.map((piece, i) => {
-          return {
-            label: piece,
-            value: `${i}`
-          };
-        }).map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value)),
-        " "
-      ]
-    }
-  );
-}
-
-const TextSlice = ({
-  arc,
-  x,
-  y,
-  dy
-}) => {
-  const [isHighlighted, setIsHighlighted] = useState(false);
-  useImperativeComponentEvents({
-    highlight(barName) {
-      setIsHighlighted(barName === arc.data.key);
-    }
-  });
-  return /* @__PURE__ */ jsx(
-    "text",
-    {
-      textAnchor: "middle",
-      style: {
-        opacity: isHighlighted ? 1 : 0,
-        display: isHighlighted ? "block" : "none",
-        transition: "opacity 500ms"
-      },
-      x,
-      y,
-      dy,
-      children: arc.value
-    }
-  );
-};
-
-var __defProp$5 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
-var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
-var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$5 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$5.call(b, prop))
-      __defNormalProp$5(a, prop, b[prop]);
-  if (__getOwnPropSymbols$5)
-    for (var prop of __getOwnPropSymbols$5(b)) {
-      if (__propIsEnum$5.call(b, prop))
-        __defNormalProp$5(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-function adjustDimensions$3({
-  width,
-  height,
-  maxWidth
-}) {
-  if (width <= maxWidth) {
-    return { width, height };
-  }
-  const ratio = width / height;
-  const newWidth = maxWidth;
-  const newHeight = Math.floor(newWidth / ratio);
-  return { width: newWidth, height: newHeight };
-}
-const PieChart = ({
-  // margin = { top: 20, left: 100, bottom: 150, right: 20 },
-  chart,
-  className,
-  chartId,
-  allowZoom
-}) => {
-  var _a;
-  const [chartData, setChartData] = useState(
-    {}
-  );
-  let innerWidth = chart.ratio.width > chart.ratio.height ? chart.ratio.width : chart.ratio.height;
-  let innerHeight = chart.ratio.width > chart.ratio.height ? chart.ratio.width : chart.ratio.height;
-  if (innerWidth > chart.ratio.maxWidth) {
-    const newValues = adjustDimensions$3({
-      height: innerHeight,
-      width: innerWidth,
-      maxWidth: chart.ratio.maxWidth
-    });
-    innerWidth = newValues.width;
-    innerHeight = newValues.height;
-  }
-  const piezas = arrayOrArray((_a = chart.dataSets) == null ? void 0 : _a.data).filter((piece) => !!piece.sets).map((piece) => {
-    return __spreadProps$5(__spreadValues$5({}, piece), {
-      coordinate: piece.sets
-    });
-  });
-  const [currentPie, setCurrentPie] = useState("0");
-  useEffect(() => {
-    setChartData(piezas[currentPie != null ? currentPie : 0]);
-  }, [currentPie]);
-  const centerY = useMemo(() => {
-    return innerHeight / 2.5;
-  }, [innerHeight]);
-  const centerX = useMemo(() => {
-    return innerWidth / 2.5;
-  }, [innerWidth]);
-  const top = centerY;
-  const left = centerX;
-  const getValue = (d) => Number(d.value) === 0 && piezas.length === 1 && arrayOrArray(piezas.map((p) => p.coordinate)[0]).length === 1 ? 100 : Number(d.value);
-  const radius = Math.min(innerHeight, innerWidth) / 2.5;
-  const piecesNames = piezas.map((piece) => {
-    return piece.name;
-  });
-  const styles = useChartStyles(chart.colorSchema);
-  const colorsArray = styles.schema;
-  const names = arrayOrArray(arrayOrArray(chart.dataSets.data)[0].sets).map(
-    (coord) => {
-      return coord.key;
-    }
-  );
-  const colorReference = names.map((name, index) => {
-    return {
-      title: name,
-      color: getBarColor(arrayOrArray(colorsArray), index)
-    };
-  });
-  const { boxRef, elementRef } = usePanAndZoom(
-    void 0,
-    !allowZoom
-  );
-  const previousPaths = useRef([]);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    piezas.length > 1 && /* @__PURE__ */ jsx(Box, { className: "chart__combo__wrapper", children: /* @__PURE__ */ jsx(
-      ChartSelector,
-      {
-        chartId,
-        pieces: piecesNames,
-        className: "chartSelectorCombo",
-        current: currentPie,
-        setCurrent: setCurrentPie
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        ref: boxRef,
-        className: `${className ? className : ""} ${chartId}`,
-        sx: { textAlign: "center", pb: spacing(5) },
-        children: /* @__PURE__ */ jsx(
-          "svg",
-          {
-            ref: elementRef,
-            height: radius * 2,
-            width: radius * 2,
-            className: `_${chartId} chart__svg`,
-            children: /* @__PURE__ */ jsxs(Group, { top: top != null ? top : 0, left: left != null ? left : 0, children: [
-              /* @__PURE__ */ jsx(
-                Pie,
-                {
-                  data: arrayOrArray(chartData.coordinate),
-                  pieValue: getValue,
-                  pieSort: null,
-                  outerRadius: radius,
-                  children: (pie) => {
-                    const paths = arrayOrArray(pie.arcs).map((arc) => {
-                      return pie.path(arc);
-                    });
-                    const result = pie.arcs.map((arc) => {
-                      var _a2, _b;
-                      const name = arc.data;
-                      const arcPath = pie.path(arc);
-                      return /* @__PURE__ */ jsx(
-                        Slice,
-                        {
-                          arc,
-                          arcPath,
-                          chart,
-                          actualColor: (_b = (_a2 = colorReference.find((color) => {
-                            return color.title === name.key;
-                          })) == null ? void 0 : _a2.color) != null ? _b : ""
-                        },
-                        `${name.key}_${name.value}`
-                      );
-                    });
-                    previousPaths.current = paths;
-                    return result;
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Pie,
-                {
-                  data: arrayOrArray(chartData.coordinate),
-                  pieValue: getValue,
-                  pieSort: null,
-                  outerRadius: radius,
-                  children: (pie) => {
-                    return pie.arcs.map((arc) => {
-                      const name = arc.data;
-                      const angle = (arc.startAngle - Math.PI + arc.endAngle) / 2;
-                      const x = Math.cos(angle) * (radius * 0.75);
-                      const y = Math.sin(angle) * (radius * 0.75);
-                      return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
-                        TextSlice,
-                        {
-                          arc,
-                          chart,
-                          dy: "0.33em",
-                          x,
-                          y
-                        }
-                      ) }, `arc-${name.key}-${name.value}`);
-                    });
-                  }
-                }
-              )
-            ] })
-          }
-        )
-      },
-      chartData.name
-    ),
-    colorReference.length > 1 && /* @__PURE__ */ jsx(
-      LegendContainer,
-      {
-        id: chartId,
-        containerClassName: "legendContainer",
-        references: colorReference
-      }
-    )
-  ] });
-};
-
-const Bar = ({
-  bar,
-  barGroup,
-  chart,
-  parsedData,
-  isSingle,
-  setsWithColor
-}) => {
-  var _a;
-  const column = arrayOrArray(chart.dataSets.data)[bar.index];
-  const set = arrayOrArray(column == null ? void 0 : column.sets)[barGroup.index];
-  const currentBarColor = (_a = setsWithColor.find(
-    (innerSet) => innerSet.columnName === column.name && innerSet.key === set.key
-  )) == null ? void 0 : _a.color;
-  const [isHighlighted, setIsHighlighted] = useState(false);
-  const [isAnyHighlighted, setIsAnyHighlighted] = useState(false);
-  const { open } = useTooltip({
-    children: /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            color: currentBarColor
-          },
-          children: /* @__PURE__ */ jsx("strong", { children: parsedData[barGroup.index].columnName })
-        }
-      ),
-      chart.showValues && /* @__PURE__ */ jsx("div", { children: bar.value }),
-      /* @__PURE__ */ jsx("div", { children: bar.key })
-    ] })
-  });
-  useImperativeComponentEvents({
-    highlight(barName) {
-      if (barName.split(" - ").length === 1) {
-        setIsHighlighted(barName === bar.key);
-        setIsAnyHighlighted(barName !== bar.key && barName !== "");
-      } else if (barName.split(" - ").length === 2) {
-        setIsHighlighted(
-          barName.split(" - ")[0] === bar.key && barName.split(" - ")[1] === set.key
-        );
-        setIsAnyHighlighted(
-          barName.split(" - ")[0] !== bar.key && barName.split(" - ")[0] !== ""
-        );
-      }
-    }
-  });
-  const { chartId } = useContext(ChartContext);
-  return /* @__PURE__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsx(
-      "text",
-      {
-        x: bar.x + bar.width / 2,
-        y: bar.y - 5,
-        width: bar.width,
-        height: bar.height,
-        textAnchor: "middle",
-        style: {
-          display: isHighlighted ? "block" : "none",
-          opacity: isHighlighted ? 1 : 0,
-          transition: "opacity 500ms"
-        },
-        children: bar.value
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      Box,
-      {
-        as: "rect",
-        className: "chart__barRect",
-        sx: useMemo(
-          () => ({
-            fill: isAnyHighlighted ? `#${tinycolor(currentBarColor).desaturate(70).toHex()}` : currentBarColor,
-            "&:hover": {
-              fill: `#${tinycolor(currentBarColor).saturate(25).toHex()}`
-            },
-            transition: "fill 500ms, opacity 500ms",
-            x: bar.x,
-            y: bar.y,
-            width: bar.width,
-            opacity: isAnyHighlighted && !isHighlighted ? 0.15 : 1,
-            height: bar.height > 0 ? bar.height : 0
-          }),
-          [
-            bar.height,
-            bar.width,
-            bar.x,
-            bar.y,
-            currentBarColor,
-            isAnyHighlighted,
-            isHighlighted
-          ]
-        ),
-        onMouseEnter: (ev) => {
-          var _a2, _b, _c;
-          if (!isSingle) {
-            legendContainerMethods.highlight(chartId, bar.key);
-          }
-          (_a2 = ev.target.classList) == null ? void 0 : _a2.add("over");
-          const point = {
-            x: (_b = localPoint(ev)) == null ? void 0 : _b.x,
-            y: (_c = localPoint(ev)) == null ? void 0 : _c.y
-          };
-          if (!point)
-            return;
-          open({
-            attachToElement: () => ev.target,
-            attachToElementAnchorPoint: "center"
-          });
-        },
-        onMouseLeave: (ev) => {
-          var _a2;
-          if (!isSingle) {
-            legendContainerMethods.highlight(chartId, "");
-          }
-          (_a2 = ev.target.classList) == null ? void 0 : _a2.remove("over");
-        },
-        children: [
-          /* @__PURE__ */ jsx(
-            "animate",
-            {
-              attributeName: "height",
-              from: 0,
-              to: bar.height,
-              dur: "0.5s",
-              calcMode: "paced",
-              keySplines: "0.5 0 0.5 1;",
-              keyTimes: "0; 1"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "animate",
-            {
-              attributeName: "y",
-              from: bar.y + bar.height,
-              to: bar.y,
-              dur: "0.5s",
-              calcMode: "paced",
-              keySplines: "0.5 0 0.5 1;",
-              keyTimes: "0; 1"
-            }
-          )
-        ]
-      }
-    )
-  ] });
-};
-
-var __defProp$4 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
-var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
-var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$4 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$4.call(b, prop))
-      __defNormalProp$4(a, prop, b[prop]);
-  if (__getOwnPropSymbols$4)
-    for (var prop of __getOwnPropSymbols$4(b)) {
-      if (__propIsEnum$4.call(b, prop))
-        __defNormalProp$4(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-function adjustDimensions$2({
-  width,
-  height,
-  maxWidth
-}) {
-  if (width <= maxWidth) {
-    return { width, height };
-  }
-  const ratio = width / height;
-  const newWidth = maxWidth;
-  const newHeight = Math.floor(newWidth / ratio);
-  return { width: newWidth, height: newHeight };
-}
-const getXValue = (d) => d.columnName;
-const VerticalBars = ({
-  margin = { top: 20, left: 100, bottom: 150, right: 20 },
-  chart,
-  className,
-  chartId,
-  allowZoom
-}) => {
-  var _a;
-  const effectiveMargin = parseMargin(margin);
-  if (!chart.showAxisYTitle) {
-    effectiveMargin.left = 50;
-  }
-  let innerWidth = chart.ratio.width + (-effectiveMargin.left - effectiveMargin.right) / 2;
-  let innerHeight = chart.ratio.height + (-effectiveMargin.top - effectiveMargin.bottom) / 2;
-  if (innerWidth > chart.ratio.maxWidth) {
-    const newValues = adjustDimensions$2({
-      height: innerHeight,
-      width: innerWidth,
-      maxWidth: chart.ratio.maxWidth
-    });
-    innerWidth = newValues.width;
-    innerHeight = newValues.height;
-  }
-  const styles = useChartStyles(chart.colorSchema);
-  const columnas = arrayOrArray((_a = chart.dataSets) == null ? void 0 : _a.data).filter((column) => !!column.sets).map((column) => {
-    return __spreadProps$4(__spreadValues$4({}, column), {
-      sets: column.sets
-    });
-  });
-  const xValues = arrayOrArray(columnas[0].sets).map(
-    (innerCoord) => innerCoord.key
-  );
-  const columnNames = columnas.map((col) => {
-    return col.name;
-  });
-  const parsedData = xValues.map((x) => {
-    const obj = columnas.reduce(
-      (acc, column) => {
-        return __spreadProps$4(__spreadValues$4({}, acc), {
-          [column.name]: arrayOrArray(column.sets).filter((coord) => {
-            return coord.key === x;
-          })[0].value
-        });
-      },
-      { columnName: x }
-    );
-    return obj;
-  });
-  const xScale = scaleBand({
-    range: [
-      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.left,
-      innerWidth
-    ],
-    domain: parsedData.map(getXValue),
-    padding: 0.2
-  });
-  const columnGroupScale = scaleBand({
-    domain: columnNames,
-    range: [0, xScale.bandwidth()]
-  });
-  const yScaleLog = scaleLog({
-    range: [
-      innerHeight,
-      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top
-    ],
-    domain: [
-      1,
-      Math.max(
-        ...parsedData.map(
-          (d) => Math.max(...columnNames.map((key) => Number(d[key])))
-        )
-      )
-    ],
-    base: 10
-  });
-  const yScaleLine = scaleLinear({
-    range: [
-      innerHeight,
-      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top
-    ],
-    domain: [
-      0,
-      Math.max(
-        ...parsedData.map(
-          (d) => Math.max(...columnNames.map((key) => Number(d[key])))
-        )
-      )
-    ]
-  });
-  const color = scaleOrdinal({
-    domain: columnNames,
-    range: columnas.map((col) => col.color)
-  });
-  const parameters = usePanelParametersSelector((global) => {
-    return global;
-  });
-  const scale = parameters.PRMT_CHART_SCALE;
-  const isLogScale = scale === "0";
-  const yScale = useMemo(() => {
-    if (!isLogScale) {
-      return yScaleLine;
-    }
-    return yScaleLog;
-  }, [isLogScale, yScaleLine, yScaleLog]);
-  const id = useMemo(() => `VerticalBars${uniqueId()}`, []);
-  useLayoutEffect(() => {
-    document.querySelectorAll(`#${id} .tickLabel`).forEach((current) => {
-      const width = current.getBoundingClientRect().width;
-      current.style.transformOrigin = current.getAttribute("x") + "px 14px";
-      current.style.transform = `rotate(25deg) translateX(${width / 2}px)`;
-    });
-  });
-  const { boxRef, elementRef } = usePanAndZoom(
-    void 0,
-    !allowZoom
-  );
-  const setsWithColor = arrayOrArray(chart.dataSets.data).map((data, index) => {
-    const isSingle = arrayOrArray(chart.dataSets.data).length === 1;
-    const dataColor = data.color !== "" && data.color !== void 0 ? data.color : arrayOrArray(styles.schema).length > 0 ? getBarColor(arrayOrArray(styles.schema), index, isSingle) : "";
-    const returnColumnsArray = [];
-    arrayOrArray(data.sets).forEach((set) => {
-      if (set.color !== "" && set.color !== void 0) {
-        returnColumnsArray.push(__spreadProps$4(__spreadValues$4({}, set), { columnName: data.name }));
-      } else {
-        returnColumnsArray.push(__spreadProps$4(__spreadValues$4({}, set), {
-          color: dataColor,
-          columnName: data.name
-        }));
-      }
-    });
-    return returnColumnsArray;
-  });
-  const colorReference = arrayOrArray(chart.dataSets.data).map(
-    (data, index) => {
-      const isSingle = arrayOrArray(chart.dataSets.data).length === 1;
-      const dataColor = data.color !== "" && data.color !== void 0 ? data.color : arrayOrArray(styles.schema).length > 0 ? getBarColor(arrayOrArray(styles.schema), index, isSingle) : "";
-      return {
-        color: dataColor,
-        title: data.name
-      };
-    }
-  );
-  arrayOrArray(chart.dataSets.data).map((data) => {
-    const returnArray = [];
-    arrayOrArray(data.sets).forEach((set) => {
-      if (set.color !== "" && set.color !== void 0) {
-        returnArray.push({
-          color: set.color,
-          title: data.name + " - " + set.key
-        });
-      }
-    });
-    return returnArray;
-  }).flat().forEach((addRef) => colorReference.push(addRef));
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        ref: boxRef,
-        id,
-        className: `${className != null ? className : ""} ${chart.title}`,
-        sx: {
-          overflow: "hidden"
-        },
-        children: /* @__PURE__ */ jsxs(
-          "svg",
-          {
-            ref: elementRef,
-            className: `_${chartId} chart__svg`,
-            height: chart.ratio.height,
-            width: chart.ratio.width,
-            children: [
-              chart.showGrid && /* @__PURE__ */ jsx(
-                Grid.Grid,
-                {
-                  xScale,
-                  yScale,
-                  left: 0,
-                  width: innerWidth,
-                  height: innerHeight,
-                  numTicksRows: 10,
-                  numTicksColumns: 10,
-                  top: (typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top) - 20
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Group,
-                {
-                  top: (typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top) - 20,
-                  children: /* @__PURE__ */ jsx(
-                    BarGroup,
-                    {
-                      data: parsedData,
-                      keys: columnNames,
-                      height: innerHeight,
-                      x0: getXValue,
-                      x0Scale: xScale,
-                      x1Scale: columnGroupScale,
-                      yScale,
-                      color,
-                      children: (barGroups) => barGroups.map((barGroup) => {
-                        return /* @__PURE__ */ jsx(
-                          Group,
-                          {
-                            left: barGroup.x0,
-                            children: barGroup.bars.map((bar) => {
-                              const key = `${barGroup.index}-${bar.index}-${bar.key}`;
-                              return /* @__PURE__ */ jsx(
-                                Bar,
-                                {
-                                  isSingle: barGroup.bars.length === 1,
-                                  bar,
-                                  barGroup,
-                                  chart,
-                                  parsedData,
-                                  setsWithColor: setsWithColor.flat()
-                                },
-                                key
-                              );
-                            })
-                          },
-                          `bar-group-${barGroup.index}-${barGroup.x0}`
-                        );
-                      })
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                AxisLeft,
-                {
-                  scale: yScale,
-                  left: effectiveMargin.left,
-                  label: chart.chartType !== "pie2D" && chart.showAxisYTitle ? chart.axisYTitle : ""
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                AxisBottom,
-                {
-                  top: innerHeight,
-                  scale: xScale,
-                  label: chart.chartType !== "pie2D" && chart.showAxisXTitle ? chart.axisXTitle : "",
-                  tickLabelProps: {
-                    className: "tickLabel"
-                  },
-                  labelOffset: 50
-                }
-              )
-            ]
-          }
-        )
-      }
-    ),
-    colorReference.length > 1 && /* @__PURE__ */ jsx(
-      LegendContainer,
-      {
-        id: chartId,
-        containerClassName: "legendContainer",
-        references: (
-          // hideLegendsColors
-          //   ? colorReference.map((ref) => {
-          //       return { ...ref, color: 'transparent' };
-          //     })
-          colorReference
-        )
-      }
-    )
-  ] });
-};
-
-const Node = ({
-  currentCircle,
-  innerKey,
-  cx,
-  cy,
-  // coordinate,
-  color,
-  setCurrentCircle
-}) => {
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    currentCircle.includes(innerKey) && /* @__PURE__ */ jsx(
-      "circle",
-      {
-        r: 6,
-        cx,
-        cy,
-        stroke: `#${tinycolor(color).saturate(25).toHex()}`,
-        fill: `#${tinycolor(color).saturate(25).toHex()}`
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "circle",
-      {
-        r: 3,
-        cx,
-        cy,
-        stroke: `#${tinycolor(color).darken(15).toHex()}`,
-        fill: `#${tinycolor(color).darken(15).toHex()}`
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "circle",
-      {
-        r: 10,
-        cx,
-        cy,
-        stroke: "transparent",
-        fill: "transparent",
-        onMouseEnter: () => {
-          setCurrentCircle([innerKey]);
-        },
-        onMouseLeave: () => {
-          setCurrentCircle([]);
-        },
-        style: { cursor: "pointer" }
-      }
-    )
-  ] }, innerKey);
-};
-
-var __defProp$3 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-var __pow = Math.pow;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$3 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$3.call(b, prop))
-      __defNormalProp$3(a, prop, b[prop]);
-  if (__getOwnPropSymbols$3)
-    for (var prop of __getOwnPropSymbols$3(b)) {
-      if (__propIsEnum$3.call(b, prop))
-        __defNormalProp$3(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-function adjustDimensions$1({
-  width,
-  height,
-  maxWidth
-}) {
-  if (width <= maxWidth) {
-    return { width, height };
-  }
-  const ratio = width / height;
-  const newWidth = maxWidth;
-  const newHeight = Math.floor(newWidth / ratio);
-  return { width: newWidth, height: newHeight };
-}
-function getX(coordinate) {
-  return coordinate.key;
-}
-function getY(coordinate) {
-  return Number(coordinate.value);
-}
-function parseData(chart) {
-  var _a, _b, _c, _d, _e, _f, _g;
-  const columns = arrayOrArray((_a = chart.dataSets) == null ? void 0 : _a.data);
-  const data = columns.map((column) => column.sets);
-  const allData = data.reduce(
-    (rec, d) => arrayOrArray(rec).concat(d),
-    []
-  );
-  return {
-    columns,
-    xScale: scaleOrdinal({
-      domain: arrayOrArray(columns[0].sets).map(getX)
-    }),
-    yScale: scaleLinear({
-      domain: [
-        ((_b = min(allData, getY)) != null ? _b : 0 < 0) ? (_c = min(allData, getY)) != null ? _c : 0 : 0,
-        (_d = max(allData, getY)) != null ? _d : 1
-      ]
-    }),
-    yScaleLog: scaleLog({
-      domain: [
-        ((_e = min(allData, getY)) != null ? _e : 1 > 0) ? (_f = min(allData, getY)) != null ? _f : 1 : 1,
-        (_g = max(allData, getY)) != null ? _g : 10
-      ]
-    })
-  };
-}
-const LineChart = ({
-  chart,
-  margin = { top: 20, left: 100, bottom: 150, right: 70 },
-  chartId,
-  allowZoom
-}) => {
-  const effectiveMargin = parseMargin(margin);
-  if (!chart.showAxisYTitle) {
-    effectiveMargin.left = 50;
-  }
-  let innerWidth = chart.ratio.width;
-  let innerHeight = chart.ratio.height - (effectiveMargin.top + effectiveMargin.bottom) / 2;
-  if (innerWidth > chart.ratio.maxWidth) {
-    const newValues = adjustDimensions$1({
-      height: innerHeight,
-      width: innerWidth,
-      maxWidth: chart.ratio.maxWidth
-    });
-    innerWidth = newValues.width;
-    innerHeight = newValues.height;
-  }
-  const { columns, xScale, yScale, yScaleLog } = parseData(chart);
-  const styles = useChartStyles(chart.colorSchema);
-  const coordinates = arrayOrArray(columns[0].sets);
-  const coordinatesArray = columns.map((col) => {
-    return col.sets;
-  });
-  const step = innerWidth / coordinates.length;
-  xScale.range(
-    coordinates.map((_, i) => {
-      if (i === 0) {
-        return effectiveMargin.left;
-      }
-      return i * step + effectiveMargin.left;
-    })
-  );
-  yScale.range([
-    innerHeight - (effectiveMargin.top + effectiveMargin.bottom) / 2,
-    typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top
-  ]);
-  yScaleLog.range([
-    innerHeight,
-    typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top
-  ]);
-  const [currentCircle, setCurrentCircle] = useState([]);
-  const actualYScale = useMemo(() => {
-    return yScale;
-  }, [yScale]);
-  const id = useMemo(() => `VerticalBars${uniqueId()}`, []);
-  useLayoutEffect(() => {
-    document.querySelectorAll(`#${id} .tickLabel`).forEach((current) => {
-      const width = current.getBoundingClientRect().width;
-      current.style.transformOrigin = current.getAttribute("x") + "px 14px";
-      current.style.transform = `rotate(25deg) translateX(${width / 2}px)`;
-    });
-  });
-  function addNameToProps(names, objects, fixedValue) {
-    return objects.map((object, index) => {
-      const nameIndex = Math.floor(index / fixedValue);
-      const name = names[nameIndex];
-      return __spreadProps$3(__spreadValues$3({}, object), { columnName: name });
-    });
-  }
-  const [nodes, setNodes] = useState([]);
-  useEffect(() => {
-    const coords = coordinatesArray.flat().map((coord) => {
-      return {
-        xValue: coord.key,
-        yValue: coord.value,
-        x: xScale(getX(coord)),
-        y: actualYScale(getY(coord))
-      };
-    });
-    const columnNames = columns.map((column) => {
-      return column.name;
-    });
-    const nodesData = addNameToProps(columnNames, coords, coordinates.length);
-    setNodes(nodesData);
-  }, []);
-  const [nearNodesArray, setNearNodesArray] = useState([]);
-  const previousNearNodesArray = usePrevious(nearNodesArray);
-  const setsWithColor = arrayOrArray(chart.dataSets.data).map((data, index) => {
-    const isSingle = arrayOrArray(chart.dataSets.data).length === 1;
-    const dataColor = data.color !== "" && data.color !== void 0 ? data.color : arrayOrArray(styles.schema).length > 0 ? getBarColor(arrayOrArray(styles.schema), index, isSingle) : "";
-    const returnColumnsArray = [];
-    arrayOrArray(data.sets).forEach((set) => {
-      if (set.color !== "" && set.color !== void 0) {
-        returnColumnsArray.push(__spreadProps$3(__spreadValues$3({}, set), { columnName: data.name }));
-      } else {
-        returnColumnsArray.push(__spreadProps$3(__spreadValues$3({}, set), {
-          color: dataColor,
-          columnName: data.name
-        }));
-      }
-    });
-    return { returnColumnsArray, columnColor: dataColor };
-  });
-  const colorReference = setsWithColor.map((column) => {
-    var _a;
-    return {
-      color: (_a = column.columnColor) != null ? _a : "",
-      title: column.returnColumnsArray[0].columnName
-    };
-  });
-  arrayOrArray(chart.dataSets.data).map((data) => {
-    const returnArray = [];
-    arrayOrArray(data.sets).forEach((set) => {
-      if (set.color !== "" && set.color !== void 0) {
-        returnArray.push({
-          color: set.color,
-          title: data.name + " - " + set.key
-        });
-      }
-    });
-    return returnArray;
-  }).flat().forEach((addRef) => colorReference.push(addRef));
-  const { open } = useTooltip({
-    children: nearNodesArray.sort((a, b) => Number(b.yValue) - Number(a.yValue)).map((node, i) => {
-      const useSpecific = colorReference.some(
-        (ref) => ref.title === node.columnName + " - " + node.xValue
-      );
-      return /* @__PURE__ */ jsxs(Box, { children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              color: colorReference[colorReference.findIndex((ref) => {
-                return ref.title === (useSpecific ? node.columnName + " - " + node.xValue : node.columnName);
-              })].color
-            },
-            children: /* @__PURE__ */ jsx("strong", { children: node.columnName })
-          }
-        ),
-        chart.showValues && /* @__PURE__ */ jsx("div", { children: node.yValue }),
-        /* @__PURE__ */ jsx("div", { children: node.xValue }),
-        nearNodesArray[i + 1] && /* @__PURE__ */ jsx("hr", {})
-      ] }, `${node.columnName}_${node.xValue}_${node.yValue}`);
-    })
-  });
-  const [highlightedBar, setHighlightedBar] = useState("");
-  useImperativeComponentEvents({
-    highlight(barName) {
-      if (barName.split(" - ").length === 1) {
-        setHighlightedBar(barName);
-      } else if (barName.split(" - ").length === 2) {
-        setHighlightedBar(barName.split(" - ")[0]);
-      }
-    }
-  });
-  const { boxRef, elementRef } = usePanAndZoom(
-    void 0,
-    !allowZoom
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Box, { id, ref: boxRef, children: /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        ref: elementRef,
-        width: innerWidth,
-        height: innerHeight,
-        id: "LinesChart",
-        className: `_${chartId} chart__svg`,
-        onMouseMove: (ev) => {
-          var _a;
-          const rect = (_a = elementRef.current) == null ? void 0 : _a.getBoundingClientRect();
-          let clientX = ev.clientX;
-          let clientY = ev.clientY - (effectiveMargin.top + effectiveMargin.bottom) / 2;
-          if (rect) {
-            clientX = ev.clientX - rect.left;
-            clientY = ev.clientY - rect.top;
-          }
-          const nearNodes = nodes.filter((node) => {
-            return Math.sqrt(__pow(node.x - clientX, 2) + __pow(node.y - clientY, 2)) < 20;
-          });
-          if (previousNearNodesArray.current && nearNodes.length > 0) {
-            const currentColumns = columns.map((col) => {
-              let colNames = "";
-              nearNodes.forEach((node) => {
-                if (col.name === node.columnName) {
-                  colNames = node.columnName;
-                }
-              });
-              return colNames;
-            }).filter((name) => name !== "");
-            const currentIndex = coordinates.findIndex((coord) => {
-              return coord.key === nearNodes[0].xValue;
-            });
-            if (currentColumns && currentIndex !== void 0) {
-              const newCircleValues = currentColumns.map((col) => {
-                return `${col}${currentIndex}`;
-              });
-              setCurrentCircle([...newCircleValues]);
-            }
-            setNearNodesArray(nearNodes);
-            open({
-              attachToElement: () => ev.target,
-              attachToElementAnchorPoint: "center"
-            });
-          } else if (nearNodes.length === 0) {
-            setCurrentCircle([]);
-          }
-        },
-        children: [
-          chart.showGrid && /* @__PURE__ */ jsx(
-            Grid.Grid,
-            {
-              top: (typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top) - 20,
-              left: 0,
-              xScale,
-              yScale: actualYScale,
-              width: innerWidth,
-              height: innerHeight,
-              stroke: styles.grid.stroke,
-              strokeOpacity: styles.grid.opacity
-            }
-          ),
-          columns.map((column, i) => {
-            var _a;
-            const currentCoordinates = arrayOrArray(column.sets);
-            const newColor = (_a = setsWithColor.find(
-              (data) => data.returnColumnsArray[0].columnName === column.name
-            )) == null ? void 0 : _a.columnColor;
-            return /* @__PURE__ */ jsxs(
-              Group,
-              {
-                top: (typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top) - 20,
-                style: {
-                  opacity: highlightedBar !== "" && highlightedBar !== column.name ? 0.15 : 1,
-                  transition: "opacity 500ms"
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    LinePath,
-                    {
-                      curve: allCurves.curveMonotoneX,
-                      data: currentCoordinates,
-                      x: (coordinate) => {
-                        var _a2;
-                        return (_a2 = xScale(getX(coordinate))) != null ? _a2 : 0;
-                      },
-                      y: (coordinate) => {
-                        var _a2;
-                        return (_a2 = actualYScale(getY(coordinate))) != null ? _a2 : 0;
-                      },
-                      stroke: newColor != null ? newColor : "black",
-                      strokeWidth: 2,
-                      strokeOpacity: 1,
-                      shapeRendering: "geometricPrecision"
-                    }
-                  ),
-                  currentCoordinates.map((coordinate, j) => {
-                    var _a2;
-                    const key = column.name + j.toString();
-                    const realColor = (_a2 = setsWithColor.map((sets) => sets.returnColumnsArray).flat().find(
-                      (set) => set.columnName === column.name && set.key === coordinate.key
-                    )) == null ? void 0 : _a2.color;
-                    return /* @__PURE__ */ jsxs("g", { children: [
-                      /* @__PURE__ */ jsx(
-                        "text",
-                        {
-                          x: xScale(getX(coordinate)) + 10,
-                          y: actualYScale(getY(coordinate)) - 5,
-                          textAnchor: "middle",
-                          style: {
-                            display: highlightedBar === column.name ? "block" : "none",
-                            opacity: highlightedBar === column.name ? 1 : 0,
-                            transition: "opacity 500ms"
-                          },
-                          children: coordinate.value
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        Node,
-                        {
-                          color: realColor != null ? realColor : "black",
-                          coordinate,
-                          currentCircle,
-                          cx: xScale(getX(coordinate)),
-                          cy: actualYScale(getY(coordinate)),
-                          setCurrentCircle,
-                          innerKey: key,
-                          column
-                        }
-                      )
-                    ] }, key);
-                  })
-                ]
-              },
-              `lines-${column.name + i.toString()}`
-            );
-          }),
-          /* @__PURE__ */ jsx(
-            AxisLeft,
-            {
-              scale: actualYScale,
-              left: effectiveMargin.left,
-              label: chart.chartType !== "pie2D" && chart.showAxisYTitle ? chart.axisYTitle : ""
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            AxisBottom,
-            {
-              top: innerHeight - (effectiveMargin.top + effectiveMargin.bottom) / 2,
-              scale: xScale,
-              label: chart.chartType !== "pie2D" && chart.showAxisXTitle ? chart.axisXTitle : "",
-              tickLabelProps: {
-                className: "tickLabel"
-              },
-              labelOffset: 50
-            }
-          )
-        ]
-      }
-    ) }),
-    colorReference.length > 1 && /* @__PURE__ */ jsx(
-      LegendContainer,
-      {
-        id: chartId,
-        containerClassName: "legendContainer",
-        references: colorReference
-      }
-    )
-  ] });
-};
-
-const WaterfallBar = ({
-  width,
-  height,
-  x,
-  y,
-  fill,
-  x1,
-  lineY,
-  x2,
-  stroke,
-  strokeDashArray,
-  textX,
-  textY,
-  textContent,
-  isLast,
-  step,
-  columnName,
-  chart
-}) => {
-  const { open } = useTooltip({
-    children: /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          style: {
-            color: step.color
-          },
-          children: /* @__PURE__ */ jsx("strong", { children: columnName })
-        }
-      ),
-      chart.showValues && /* @__PURE__ */ jsx("div", { children: step.y }),
-      /* @__PURE__ */ jsx("div", { children: step.x })
-    ] })
-  });
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        as: "rect",
-        sx: useMemo(() => {
-          return {
-            width: `${width}px`,
-            height: `${height}px`,
-            x: `${x}px`,
-            y: `${y}px`,
-            fill: `${fill}`,
-            "&:hover": {
-              fill: `#${tinycolor(fill).saturate(25).toHex()}`
-            },
-            transition: "fill 500ms"
-          };
-        }, [fill, height, width, x, y]),
-        onMouseEnter: (ev) => {
-          open({
-            attachToElement: () => ev.target,
-            attachToElementAnchorPoint: "center"
-          });
-        },
-        onMouseLeave: () => {
-        }
-      }
-    ),
-    !isLast && /* @__PURE__ */ jsx(
-      Line,
-      {
-        x1,
-        x2,
-        y1: lineY,
-        y2: lineY,
-        stroke,
-        strokeDasharray: strokeDashArray
-      }
-    ),
-    /* @__PURE__ */ jsx("text", { textAnchor: "middle", x: textX, y: textY, children: textContent })
-  ] });
-};
-
-var __defProp$2 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
-var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
-var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$2 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$2.call(b, prop))
-      __defNormalProp$2(a, prop, b[prop]);
-  if (__getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(b)) {
-      if (__propIsEnum$2.call(b, prop))
-        __defNormalProp$2(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$2)
-    for (var prop of __getOwnPropSymbols$2(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
-        target[prop] = source[prop];
-    }
-  return target;
-};
-const calculateWaterfallSteps = ({
-  data,
-  xAccessor,
-  yAccessor,
-  showFinal,
-  colors
-}) => {
-  let cumulativeTotal = 0;
-  const steps = data.map((datum) => {
-    const xValue = xAccessor(datum);
-    const yValue = yAccessor(datum);
-    const prevTotal = cumulativeTotal;
-    cumulativeTotal += Number(yValue);
-    return {
-      x: xValue,
-      y: yValue,
-      start: prevTotal,
-      end: cumulativeTotal,
-      color: Number(yValue) > 0 ? colors.positive : colors.negative
-    };
-  });
-  if (showFinal) {
-    steps.push({
-      x: "Total",
-      y: cumulativeTotal,
-      start: 0,
-      end: cumulativeTotal,
-      color: colors.total
-    });
-  }
-  return steps;
-};
-function adjustDimensions({
-  width,
-  height,
-  maxWidth
-}) {
-  if (width <= maxWidth) {
-    return { width, height };
-  }
-  const ratio = width / height;
-  const newWidth = maxWidth;
-  const newHeight = Math.floor(newWidth / ratio);
-  return { width: newWidth, height: newHeight };
-}
-const WaterfallBars = (_a) => {
-  var _b = _a, {
-    margin = { top: 20, left: 100, bottom: 150, right: 70 },
-    chart: _c
-  } = _b, _d = _c, {
-    waterfallColors = {
-      positive: "#49b86f",
-      negative: "#c92e5b",
-      total: "#434857",
-      stepConnector: "#888d94"
-    }
-  } = _d, chart = __objRest(_d, [
-    "waterfallColors"
-  ]), {
-    className,
-    chartId,
-    allowZoom
-  } = _b;
-  var _a2;
-  const effectiveMargin = parseMargin(margin);
-  if (!chart.showAxisYTitle) {
-    effectiveMargin.left = 50;
-  }
-  let innerWidth = chart.ratio.width + (-effectiveMargin.left - effectiveMargin.right) / 2;
-  let innerHeight = chart.ratio.height + (-effectiveMargin.top - effectiveMargin.bottom) / 2;
-  if (innerWidth > chart.ratio.maxWidth) {
-    const newValues = adjustDimensions({
-      height: innerHeight,
-      width: innerWidth,
-      maxWidth: chart.ratio.maxWidth
-    });
-    innerWidth = newValues.width;
-    innerHeight = newValues.height;
-  }
-  const getXValue = (d) => d.key;
-  const getYValue = (d) => d.value;
-  const charts = arrayOrArray((_a2 = chart.dataSets) == null ? void 0 : _a2.data).filter((piece) => !!piece.sets).map((piece) => {
-    return __spreadProps$2(__spreadValues$2({}, piece), {
-      coordinate: piece.sets
-    });
-  });
-  const [currentPie, setCurrentPie] = useState("0");
-  const chartNames = charts.map((piece) => {
-    return piece.name;
-  });
-  const steps = useMemo(
-    () => {
-      var _a3;
-      return calculateWaterfallSteps({
-        data: arrayOrArray(chart.dataSets.data)[currentPie].sets,
-        xAccessor: getXValue,
-        yAccessor: getYValue,
-        showFinal: (_a3 = chart.showTotal) != null ? _a3 : true,
-        colors: waterfallColors
-      });
-    },
-    [chart.dataSets.data, chart.showTotal, currentPie, waterfallColors]
-  );
-  const padding = 0.2;
-  const xScale = scaleBand({
-    domain: steps.map((step) => step.x),
-    padding,
-    range: [0, innerWidth]
-  });
-  const yDomain = useMemo(() => {
-    const values = steps.flatMap((step) => [step.start, step.end]);
-    const [min, max] = extent(values);
-    return min != null && max != null ? [min - 5, max + 5] : void 0;
-  }, [steps]);
-  const yScale = scaleLinear({
-    domain: yDomain,
-    nice: true,
-    range: [innerHeight, 0]
-  });
-  const id = useMemo(() => `VerticalBars${uniqueId()}`, []);
-  useLayoutEffect(() => {
-    document.querySelectorAll(`#${id} .tickLabel`).forEach((current) => {
-      const width = current.getBoundingClientRect().width;
-      current.style.transformOrigin = current.getAttribute("x") + "px 14px";
-      current.style.transform = `rotate(25deg) translateX(${width / 2}px)`;
-    });
-  });
-  const { boxRef, elementRef } = usePanAndZoom(
-    void 0,
-    !allowZoom
-  );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    charts.length > 1 && /* @__PURE__ */ jsx(Box, { className: "chart__combo__wrapper", children: /* @__PURE__ */ jsx(
-      ChartSelector,
-      {
-        chartId,
-        pieces: chartNames,
-        className: "chartSelectorCombo",
-        current: currentPie,
-        setCurrent: setCurrentPie
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Box, { id, className, ref: boxRef, children: /* @__PURE__ */ jsx(
-      "svg",
-      {
-        height: chart.ratio.height,
-        width: chart.ratio.width,
-        ref: elementRef,
-        children: /* @__PURE__ */ jsxs(Group, { left: effectiveMargin.left, top: effectiveMargin.top, children: [
-          /* @__PURE__ */ jsx(GridRows, { scale: yScale, width: innerWidth, strokeDasharray: "5" }),
-          steps.map((step, index) => {
-            var _a3;
-            const x = xScale(step.x);
-            const y = yScale(Math.max(step.start, step.end));
-            if (x == null || y == null) {
-              return null;
-            }
-            const barHeight = Math.abs(yScale(step.start) - yScale(step.end));
-            const isLast = index === steps.length - 1;
-            const linePadding = 2;
-            const x1 = x + xScale.bandwidth() + linePadding;
-            const x2 = x + xScale.bandwidth() / (1 - padding) - linePadding;
-            const lineY = step.end < step.start ? y + barHeight : y;
-            const labelOffset = 10;
-            const labelY = yScale(step.end) + (step.y < 0 ? labelOffset : -labelOffset);
-            let currentYValue = 0;
-            steps.filter((_, i) => {
-              var _a4;
-              if (((_a4 = chart.showTotal) != null ? _a4 : true) && !steps[i + 1]) {
-                return false;
-              }
-              return i <= index;
-            }).forEach((step2) => {
-              currentYValue += Number(step2.y);
-            });
-            return /* @__PURE__ */ jsx(
-              WaterfallBar,
-              {
-                chart,
-                columnName: chartNames[currentPie],
-                fill: step.color,
-                height: barHeight,
-                isLast,
-                lineY,
-                step,
-                stroke: waterfallColors.stepConnector,
-                strokeDashArray: 2,
-                textContent: ((_a3 = chart.showTotal) != null ? _a3 : true) ? step.y : currentYValue,
-                textX: x + xScale.bandwidth() / 2,
-                textY: labelY + 5,
-                width: xScale.bandwidth(),
-                x,
-                y,
-                x1,
-                x2
-              },
-              index
-            );
-          }),
-          /* @__PURE__ */ jsx(
-            AxisLeft,
-            {
-              label: "",
-              scale: yScale,
-              hideAxisLine: true,
-              hideTicks: true,
-              tickLabelProps: () => ({
-                textAnchor: "end",
-                verticalAnchor: "middle"
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            AxisBottom,
-            {
-              scale: xScale,
-              top: innerHeight,
-              tickLabelProps: () => ({
-                textAnchor: "middle",
-                verticalAnchor: "middle",
-                className: "tickLabel"
-              })
-            }
-          )
-        ] })
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      LegendContainer,
-      {
-        id: chartId,
-        avoidEvent: true,
-        references: [
-          {
-            title: arrayOrArray(chart.dataSets.data)[currentPie].name,
-            color: "transparent"
-          }
-        ]
-      }
-    )
-  ] });
-};
-
-var __defProp$1 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
-var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
-var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$1 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$1.call(b, prop))
-      __defNormalProp$1(a, prop, b[prop]);
-  if (__getOwnPropSymbols$1)
-    for (var prop of __getOwnPropSymbols$1(b)) {
-      if (__propIsEnum$1.call(b, prop))
-        __defNormalProp$1(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-const frontColor = "hsl(196, 37%, 13%)";
-function useMultipleRefs(...refs) {
-  return React.useCallback(
-    function setRef(element) {
-      refs.forEach((current) => {
-        if (current)
-          current.current = element;
-      });
-    },
-    [refs]
-  );
-}
-const [, chartMethods, ChartRenderer] = makeImperativeComponent()({
-  Component: makeStyledComponent(
-    "ChartRenderer",
-    "layout.charts",
-    {
-      red: {
-        schema: "schemas.red"
-      },
-      orange: {
-        schema: "schemas.orange"
-      },
-      green: {
-        schema: "schemas.green"
-      },
-      blue: {
-        schema: "schemas.blue"
-      },
-      violet: {
-        schema: "schemas.violet"
-      },
-      turquoise: {
-        schema: "schemas.turquoise"
-      },
-      yellow: {
-        schema: "schemas.yellow"
-      },
-      grey: {
-        schema: "schemas.grey"
-      },
-      ocean: {
-        schema: "schemas.ocean"
-      },
-      sunset: {
-        schema: "schemas.sunset"
-      },
-      common: {
-        axis: {
-          stroke: frontColor,
-          title: frontColor
-        },
-        schema: frontColor,
-        background: "hsl(200deg 20% 98%)",
-        grid: {
-          stroke: frontColor,
-          opacity: "0.1"
-        },
-        toolTip: {
-          backgroundColor: "rgb(232, 241, 255)",
-          border: "1px solid #07c",
-          color: frontColor,
-          padding: ".3rem .5rem",
-          borderRadius: "3px",
-          fontSize: "18px",
-          boxShadow: "0 1px 2px rgba(33,33,33,0.2)",
-          lineHeight: "1em"
-        }
-      },
-      ".legendContainer": {
-        display: "flex",
-        flexDirection: "row",
-        gap: spacing(3),
-        flexWrap: "wrap"
-      },
-      ".chart__combo__wrapper": {
-        position: "absolute"
-      }
-    },
-    // eslint-disable-next-line react/display-name
-    React.forwardRef(
-      ({
-        currentChart,
-        chartId,
-        allowZoom
-      }, ref) => {
-        const innerRef = React.useRef(null);
-        const setRefs = useMultipleRefs(
-          ref,
-          innerRef
-        );
-        const contextValue = useMemo(() => ({ chartId }), [chartId]);
-        const CurrentChart = getIndex(
-          [PieChart, HorizontalBars, VerticalBars, LineChart, WaterfallBars],
-          [
-            currentChart.chartType === "pie2D",
-            currentChart.chartType === "barH2D",
-            currentChart.chartType === "barV2D",
-            currentChart.chartType === "linear",
-            currentChart.chartType === "waterfall"
-          ],
-          0
-        );
-        return /* @__PURE__ */ jsx(ChartContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-          Box,
-          __spreadProps$1(__spreadValues$1({
-            ref: setRefs,
-            className: "chart__chartRenderer"
-          }, getVariant("layout.charts")), {
-            children: /* @__PURE__ */ jsx(
-              CurrentChart,
-              {
-                chart: currentChart,
-                chartId,
-                parentRef: innerRef,
-                allowZoom
-              }
-            )
-          })
-        ) });
-      }
-    ),
-    true
-  )
-});
-
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const START_ANGLE = 0;
-const END_ANGLE = 360;
-const TLight = ({
-  addBorder = false,
-  colorRanges,
-  maxValue,
-  minValue,
-  currentValue,
-  height,
-  valueRanges,
-  width,
-  currentValueColor,
-  currentValueFontSize
-}) => {
-  const value = currentValue;
-  const diameter = Math.min(height, width);
-  const domainMax = maxValue != null ? maxValue : valueRanges[valueRanges.length - 1];
-  const domainMin = minValue != null ? minValue : valueRanges[0];
-  const gauge = useGauge({
-    domain: [domainMin, domainMax],
-    startAngle: START_ANGLE,
-    endAngle: END_ANGLE,
-    numTicks: 0,
-    diameter
-  });
-  function getColor(value2) {
-    var _a;
-    const index = valueRanges.findIndex((range) => value2 < range);
-    if (index === -1) {
-      return colorRanges[0];
-    }
-    return (_a = colorRanges[index - 1]) != null ? _a : colorRanges[index];
-  }
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs("svg", __spreadProps(__spreadValues({}, gauge.getSVGProps()), { viewBox: "-325 -325 600 600", children: [
-    /* @__PURE__ */ jsx("g", { id: "arcs", children: /* @__PURE__ */ jsx(
-      "path",
-      __spreadProps(__spreadValues({}, gauge.getArcProps({
-        offset: 20,
-        startAngle: START_ANGLE,
-        endAngle: END_ANGLE
-      })), {
-        stroke: addBorder ? "black" : "transparent",
-        fill: getColor(value),
-        strokeLinecap: "round",
-        strokeWidth: 5
-      })
-    ) }),
-    /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
-      "text",
-      {
-        textAnchor: "middle",
-        style: { fontSize: `${currentValueFontSize != null ? currentValueFontSize : 100}px` },
-        alignmentBaseline: "central",
-        fill: currentValueColor,
-        children: value
-      }
-    ) })
-  ] })) });
-};
-
-const WidgetContainer = () => {
-  const mockData = {
-    addBorder: true,
-    backgColor: "white",
-    currentValue: 1010,
-    height: 400,
-    width: 400,
-    maxValue: 1050,
-    minValue: 1e3,
-    noValueColor: "",
-    pointerColor: "blue",
-    ringAnchor: 5,
-    scaleFontSize: 20,
-    valueColor: "darkblue",
-    valueDecimals: 1,
-    valueFontSize: 50,
-    valueType: "",
-    widKpiType: 0,
-    zones: [
-      {
-        color: "blue",
-        maximum: 1020,
-        minimum: 1e3,
-        transparency: 20
-      },
-      {
-        color: "purple",
-        maximum: 1040,
-        minimum: 1020,
-        transparency: 50
-      },
-      {
-        color: "red",
-        maximum: 1050,
-        minimum: 1040,
-        transparency: 0
-      }
-    ]
-  };
-  const valueRanges = Array.from(
-    new Set(
-      arrayOrArray(mockData.zones).map((zone) => {
-        return [zone.minimum, zone.maximum];
-      }).flat().sort((a, b) => a - b)
-    )
-  );
-  const colorRanges = arrayOrArray(mockData.zones).map((zone) => {
-    return tinycolor(zone.color).setAlpha(1 - zone.transparency / 100).toPercentageRgbString();
-  }).flat();
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
-    TLight,
-    {
-      addBorder: mockData.addBorder,
-      backgroundColor: mockData.backgColor,
-      colorRanges,
-      currentValue: mockData.currentValue,
-      decimals: mockData.valueDecimals,
-      currentValueColor: mockData.valueColor,
-      currentValueFontSize: mockData.valueFontSize,
-      height: mockData.height,
-      maxValue: mockData.maxValue,
-      minValue: mockData.minValue,
-      pointerColor: mockData.pointerColor,
-      scaleValuesSize: mockData.scaleFontSize,
-      valueRanges,
-      width: mockData.width
-    }
-  ) });
-};
-
-export { ChartRenderer, WidgetContainer };
+import{jsx as l,jsxs as P,Fragment as q}from"react/jsx-runtime";import de,{createContext as dt,useContext as te,useState as H,useMemo as B,useLayoutEffect as me,useEffect as Ee,useRef as mt}from"react";import{Box as D,Select as ut}from"theme-ui";import{ThemeProviderContext as pt,spacing as je,makeStyledComponent as gt,getVariant as ft}from"@apia/theme";import{uniqueId as ue}from"lodash";import{makeImperativeComponent as _e,arrayOrArray as p,useImperativeComponentEvents as re,getValueByPath as yt,usePanAndZoom as ae,usePrevious as vt,getIndex as xt}from"@apia/util";import{scaleBand as oe,scaleLog as Ce,scaleLinear as pe,scaleOrdinal as Oe}from"@visx/scale";import{Grid as Ne}from"@visx/visx";import{Group as Q}from"@visx/group";import{BarGroupHorizontal as bt,BarGroup as wt,LinePath as $t,Line as kt}from"@visx/shape";import{AxisLeft as ge,AxisBottom as fe}from"@visx/axis";import{usePanelParametersSelector as Le}from"@apia/dashboard";import W from"tinycolor2";import{localPoint as U}from"@visx/event";import{SimpleButton as St,useTooltip as le}from"@apia/components";import{icons as Ct}from"@apia/icons";import Ve from"@visx/shape/lib/shapes/Pie";import{min as ye,max as Re,extent as Ot}from"d3-array";import*as Nt from"@visx/curve";import{Fragment as Pt}from"theme-ui/jsx-runtime";import{GridRows as At}from"@visx/grid";import{useGauge as Tt}from"use-gauge";function ve(e={left:100,right:50,top:50,bottom:70}){return typeof e=="number"?{left:e,right:e,top:e,bottom:e}:e}const ne=dt({}),Mt=({groupId:e,title:t,color:r,className:o,isHighlighted:a,isAnyHighlighted:s,avoidEvent:i})=>{const{chartId:d}=te(ne);return l(St,{variant:"icon-outline",className:`${o??""} ${a?"highlight":""}`,iconColor:r||"black",icon:r==="transparent"?void 0:Ct.SquareFilled,sx:{opacity:s&&!a?"0.15":"1"},onMouseEnter:()=>{i||ot(d,"highlight",e)},onMouseLeave:()=>{i||ot(d,"highlight","")},children:t})},[ee,,ie]=_e()({initialState:{highlightedBarGroup:""},methods:{highlight(e,t){e({highlightedBarGroup:t})}},Component:({references:e,containerClassName:t,highlightedBarGroup:r,avoidEvent:o})=>l(D,{className:t,children:e.map(a=>l(Mt,{isHighlighted:a.title===r,isAnyHighlighted:r!=="",groupId:a.title,color:a.color,title:a.title,avoidEvent:o??!1},a.title))})}),Et=({bar:e,barGroup:t,chart:r,parsedData:o,isSingle:a,effectiveMargin:s,setsWithColor:i})=>{var d;const g=p(r.dataSets.data)[e.index],f=p(g?.sets)[t.index],y=(d=i.find(u=>u.columnName===g.name&&u.key===f.key))==null?void 0:d.color,[v,b]=H(!1),[k,S]=H(!1),{open:V}=le({children:P(q,{children:[l("div",{style:{color:y},children:l("strong",{children:o[t.index].columnName})}),r.showValues&&l("div",{children:e.value}),l("div",{children:e.key})]})});re({highlight(u){u.split(" - ").length===1?(b(u===e.key),S(u!==e.key&&u!=="")):u.split(" - ").length===2&&(b(u.split(" - ")[0]===e.key&&u.split(" - ")[1]===f.key),S(u.split(" - ")[0]!==e.key&&u.split(" - ")[0]!==""))}});const{chartId:x}=te(ne);return P("g",{children:[P("text",{x:e.x+5,y:e.y-5,width:e.width,height:e.height,textAnchor:"start",style:{display:v?"block":"none",opacity:v?1:0,transition:"opacity 500ms"},children:[e.value," - ",o[t.index].columnName]}),l(D,{as:"rect",className:"chart__barRect",sx:B(()=>({fill:k?`#${W(y).desaturate(70).toHex()}`:y,"&:hover":{fill:`#${W(y).saturate(25).toHex()}`},transition:"fill 500ms, opacity 500ms",x:e.x,y:e.y,width:e.width-s.left,opacity:k&&!v?.15:1,height:e.height>0?e.height:0}),[e.height,e.width,e.x,e.y,y,s.left,k,v]),onMouseEnter:u=>{var N,L,A;a||ee.highlight(x,e.key),(N=u.target.classList)==null||N.add("over"),(L=U(u))==null||L.x,(A=U(u))==null||A.y,V({attachToElement:()=>u.target,attachToElementAnchorPoint:"center"})},onMouseLeave:u=>{var N;a||ee.highlight(x,""),(N=u.target.classList)==null||N.remove("over")},children:l("animate",{attributeName:"width",from:0,to:e.width,dur:"0.5s",calcMode:"paced",keySplines:"0.5 0 0.5 1;",keyTimes:"0; 1"})})]})};function ce(e,t,r=!1){const o=e.length;let a=0,s="";if(r)e[t]?s=e[t]:s=W(e[t%o]).toHex();else if(e[t])s=e[t];else{let i=t;for(;i>=o;)i=t/o,a++;s=W(e[t%o]).desaturate(a*5).toHex()}return s}var jt=Object.defineProperty,Ie=Object.getOwnPropertySymbols,_t=Object.prototype.hasOwnProperty,Lt=Object.prototype.propertyIsEnumerable,Be=(e,t,r)=>t in e?jt(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,De=(e,t)=>{for(var r in t||(t={}))_t.call(t,r)&&Be(e,r,t[r]);if(Ie)for(var r of Ie(t))Lt.call(t,r)&&Be(e,r,t[r]);return e};function xe(e){var t,r,o;const a=te(pt);a.layout||console.error("The layout property is missing in the current theme");const s=(r=(t=a.layout)==null?void 0:t.charts)!=null?r:{},i=s.common,d={schema:yt(a.colors,(o=s[e||"blue"])==null?void 0:o.schema)};return De(De({},i),d)}var Vt=Object.defineProperty,Rt=Object.defineProperties,It=Object.getOwnPropertyDescriptors,We=Object.getOwnPropertySymbols,Bt=Object.prototype.hasOwnProperty,Dt=Object.prototype.propertyIsEnumerable,He=(e,t,r)=>t in e?Vt(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,be=(e,t)=>{for(var r in t||(t={}))Bt.call(t,r)&&He(e,r,t[r]);if(We)for(var r of We(t))Dt.call(t,r)&&He(e,r,t[r]);return e},we=(e,t)=>Rt(e,It(t));function Wt({width:e,height:t,maxWidth:r}){if(e<=r)return{width:e,height:t};const o=e/t,a=r,s=Math.floor(a/o);return{width:a,height:s}}const Ge=e=>e.columnName,Ht=({margin:e={top:20,left:50,bottom:150,right:20},chart:t,className:r,chartId:o,outerClassName:a,allowZoom:s})=>{var i;const d=ve(e);let g=t.ratio.width+(-d.left-d.right)/2,f=t.ratio.height+(-d.top-d.bottom)/2;if(g>t.ratio.maxWidth){const c=Wt({height:f,width:g,maxWidth:t.ratio.maxWidth});g=c.width,f=c.height}const y=p((i=t.dataSets)==null?void 0:i.data).filter(c=>!!c.sets).map(c=>we(be({},c),{sets:c.sets})),v=p(y[0].sets).map(c=>c.key),b=y.map(c=>c.name),k=v.map(c=>y.reduce((n,$)=>we(be({},n),{[$.name]:p($.sets).filter(j=>j.key===c)[0].value}),{columnName:c})),S=oe({range:[typeof d=="number"?d:d.top,f],domain:k.map(Ge),padding:.2}),V=oe({domain:b,range:[0,S.bandwidth()]}),x=Ce({range:[typeof d=="number"?d:d.left,g],domain:[1,Math.max(...k.map(c=>Math.max(...b.map(n=>Number(c[n])))))],base:10}),u=pe({range:[typeof d=="number"?d:d.left,g],domain:[0,Math.max(...k.map(c=>Math.max(...b.map(n=>Number(c[n])))))]}),N=Oe({domain:b,range:y.map(c=>c.color)}),L=Le(c=>c).PRMT_CHART_SCALE==="0",A=B(()=>L?x:u,[L,u,x]),Y=B(()=>`VerticalBars${ue()}`,[]);me(()=>{document.querySelectorAll(`#${Y} .__${o??a}`).forEach(c=>{const n=c.getBoundingClientRect().width;c.style.transformOrigin=c.getAttribute("x")+"px 14px",c.style.transform=`rotate(15deg) translateX(${n/2}px)`})});const R=xe(t.colorSchema),{boxRef:K,elementRef:w}=ae(void 0,!s),T=p(t.dataSets.data).map((c,n)=>{const $=p(t.dataSets.data).length===1,j=c.color!==""&&c.color!==void 0?c.color:p(R.schema).length>0?ce(p(R.schema),n,$):"",E=[];return p(c.sets).forEach(h=>{h.color!==""&&h.color!==void 0?E.push(we(be({},h),{columnName:c.name})):E.push(we(be({},h),{color:j,columnName:c.name}))}),E}),m=T.map(c=>{var n;return{color:(n=c[0].color)!=null?n:"",title:c[0].columnName}});return p(t.dataSets.data).map(c=>{const n=[];return p(c.sets).forEach($=>{$.color!==""&&$.color!==void 0&&n.push({color:$.color,title:c.name+" - "+$.key})}),n}).flat().forEach(c=>m.push(c)),P(q,{children:[l(D,{ref:K,id:Y,className:`${a??""} ${o} ${t.title}`,sx:de.useMemo(()=>({[`.__${o??a}`]:{transform:"rotate(45deg)",transformOrigin:"attr(x) 18px"},overflow:"auto",position:"relative",height:`${t.ratio.height}px`,width:`${t.ratio.width}px`}),[t.ratio.height,t.ratio.width,o,a]),children:P("svg",{ref:w,className:`_${o} ${r||""} chart__svg`,height:t.ratio.height,width:t.ratio.width,style:{position:"absolute"},children:[t.showGrid&&l(Ne.Grid,{xScale:A,yScale:S,left:0,width:g,height:f,numTicksRows:10,numTicksColumns:10,top:(typeof d=="number"?d:d.top)-20}),l(Q,{top:(typeof d=="number"?d:d.top)-20,left:d.left,children:l(bt,{data:k,keys:b,width:g,y0:Ge,y0Scale:S,y1Scale:V,xScale:A,color:N,children:c=>c.map(n=>l(Q,{top:n.y0,children:n.bars.map($=>{const j=`${n.index}-${$.index}-${$.key}`;return l(Et,{isSingle:n.bars.length===1,bar:$,barGroup:n,chart:t,parsedData:k,effectiveMargin:d,setsWithColor:T.flat()},j)})},`bar-group-${n.index}-${n.y0}`))})}),l(ge,{scale:S,left:d.left,label:t.chartType!=="pie2D"&&t.showAxisYTitle?t.axisYTitle:"",tickLabelProps:()=>({display:"none"})}),l(fe,{top:f,scale:A,label:t.chartType!=="pie2D"&&t.showAxisXTitle?t.axisXTitle:"",tickLabelProps:{className:"tickLabel"},labelOffset:50})]})}),m.length>1&&l(ie,{id:o,containerClassName:"legendContainer",references:m})]})},Gt=({arc:e,arcPath:t,chart:r,actualColor:o})=>{const[a,s]=H(!1),[i,d]=H(!1),{open:g}=le({children:P(q,{children:[l("div",{style:{color:`#${W(o).toHex()}`},children:l("strong",{children:e.data.key})}),r.showValues&&l("div",{children:`${e.value} ${e.data.percentage?"- "+e.data.percentage:""}${e.data.percentage?"%":""}`})]})});re({highlight(v){s(v===e.data.key),d(v!==e.data.key&&v!=="")}});const{chartId:f}=te(ne),y=e.data;return l("path",{style:B(()=>({"&:hover":{fill:`#${W(o).saturate(25).toHex()}`},transition:"fill 500ms, opacity 500ms"}),[o]),fill:i?`#${W(o).desaturate(70).toHex()}`:o,opacity:i&&!a?.15:1,d:t??"",onMouseEnter:v=>{var b,k,S;ee.highlight(f,e.data.key),(b=v.target.classList)==null||b.add("over"),(k=U(v))==null||k.x,(S=U(v))==null||S.y,g({attachToElement:()=>v.target,attachToElementAnchorPoint:"center"})},onMouseLeave:v=>{var b;ee.highlight(f,""),(b=v.target.classList)==null||b.remove("over")}},`arc-${y.key}-${y.value}`)};function Ye({chartId:e,pieces:t,className:r,current:o,setCurrent:a}){return P(ut,{sx:{width:"auto"},name:`chartSelector_${e}`,className:`chartSelector_${e} ${r??""}`,value:o??"0",onChange:s=>{s.preventDefault(),a(s.target.value)},children:[t.map((s,i)=>({label:s,value:`${i}`})).map(s=>l("option",{value:s.value,children:s.label},s.value))," "]})}const Yt=({arc:e,x:t,y:r,dy:o})=>{const[a,s]=H(!1);return re({highlight(i){s(i===e.data.key)}}),l("text",{textAnchor:"middle",style:{opacity:a?1:0,display:a?"block":"none",transition:"opacity 500ms"},x:t,y:r,dy:o,children:e.value})};var Xt=Object.defineProperty,zt=Object.defineProperties,Ft=Object.getOwnPropertyDescriptors,Xe=Object.getOwnPropertySymbols,qt=Object.prototype.hasOwnProperty,Zt=Object.prototype.propertyIsEnumerable,ze=(e,t,r)=>t in e?Xt(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,Kt=(e,t)=>{for(var r in t||(t={}))qt.call(t,r)&&ze(e,r,t[r]);if(Xe)for(var r of Xe(t))Zt.call(t,r)&&ze(e,r,t[r]);return e},Jt=(e,t)=>zt(e,Ft(t));function Qt({width:e,height:t,maxWidth:r}){if(e<=r)return{width:e,height:t};const o=e/t,a=r,s=Math.floor(a/o);return{width:a,height:s}}const Ut=({chart:e,className:t,chartId:r,allowZoom:o})=>{var a;const[s,i]=H({});let d=e.ratio.width>e.ratio.height?e.ratio.width:e.ratio.height,g=e.ratio.width>e.ratio.height?e.ratio.width:e.ratio.height;if(d>e.ratio.maxWidth){const w=Qt({height:g,width:d,maxWidth:e.ratio.maxWidth});d=w.width,g=w.height}const f=p((a=e.dataSets)==null?void 0:a.data).filter(w=>!!w.sets).map(w=>Jt(Kt({},w),{coordinate:w.sets})),[y,v]=H("0");Ee(()=>{i(f[y??0])},[y]);const b=B(()=>g/2.5,[g]),k=B(()=>d/2.5,[d]),S=b,V=k,x=w=>Number(w.value)===0&&f.length===1&&p(f.map(T=>T.coordinate)[0]).length===1?100:Number(w.value),u=Math.min(g,d)/2.5,N=f.map(w=>w.name),L=xe(e.colorSchema).schema,A=p(p(e.dataSets.data)[0].sets).map(w=>w.key).map((w,T)=>({title:w,color:ce(p(L),T)})),{boxRef:Y,elementRef:R}=ae(void 0,!o),K=mt([]);return P(q,{children:[f.length>1&&l(D,{className:"chart__combo__wrapper",children:l(Ye,{chartId:r,pieces:N,className:"chartSelectorCombo",current:y,setCurrent:v})}),l(D,{ref:Y,className:`${t||""} ${r}`,sx:{textAlign:"center",pb:je(5)},children:l("svg",{ref:R,height:u*2,width:u*2,className:`_${r} chart__svg`,children:P(Q,{top:S??0,left:V??0,children:[l(Ve,{data:p(s.coordinate),pieValue:x,pieSort:null,outerRadius:u,children:w=>{const T=p(w.arcs).map(c=>w.path(c)),m=w.arcs.map(c=>{var n,$;const j=c.data,E=w.path(c);return l(Gt,{arc:c,arcPath:E,chart:e,actualColor:($=(n=A.find(h=>h.title===j.key))==null?void 0:n.color)!=null?$:""},`${j.key}_${j.value}`)});return K.current=T,m}}),l(Ve,{data:p(s.coordinate),pieValue:x,pieSort:null,outerRadius:u,children:w=>w.arcs.map(T=>{const m=T.data,c=(T.startAngle-Math.PI+T.endAngle)/2,n=Math.cos(c)*(u*.75),$=Math.sin(c)*(u*.75);return l("g",{children:l(Yt,{arc:T,chart:e,dy:"0.33em",x:n,y:$})},`arc-${m.key}-${m.value}`)})})]})})},s.name),A.length>1&&l(ie,{id:r,containerClassName:"legendContainer",references:A})]})},er=({bar:e,barGroup:t,chart:r,parsedData:o,isSingle:a,setsWithColor:s})=>{var i;const d=p(r.dataSets.data)[e.index],g=p(d?.sets)[t.index],f=(i=s.find(x=>x.columnName===d.name&&x.key===g.key))==null?void 0:i.color,[y,v]=H(!1),[b,k]=H(!1),{open:S}=le({children:P(q,{children:[l("div",{style:{color:f},children:l("strong",{children:o[t.index].columnName})}),r.showValues&&l("div",{children:e.value}),l("div",{children:e.key})]})});re({highlight(x){x.split(" - ").length===1?(v(x===e.key),k(x!==e.key&&x!=="")):x.split(" - ").length===2&&(v(x.split(" - ")[0]===e.key&&x.split(" - ")[1]===g.key),k(x.split(" - ")[0]!==e.key&&x.split(" - ")[0]!==""))}});const{chartId:V}=te(ne);return P("g",{children:[l("text",{x:e.x+e.width/2,y:e.y-5,width:e.width,height:e.height,textAnchor:"middle",style:{display:y?"block":"none",opacity:y?1:0,transition:"opacity 500ms"},children:e.value}),P(D,{as:"rect",className:"chart__barRect",sx:B(()=>({fill:b?`#${W(f).desaturate(70).toHex()}`:f,"&:hover":{fill:`#${W(f).saturate(25).toHex()}`},transition:"fill 500ms, opacity 500ms",x:e.x,y:e.y,width:e.width,opacity:b&&!y?.15:1,height:e.height>0?e.height:0}),[e.height,e.width,e.x,e.y,f,b,y]),onMouseEnter:x=>{var u,N,L;a||ee.highlight(V,e.key),(u=x.target.classList)==null||u.add("over"),(N=U(x))==null||N.x,(L=U(x))==null||L.y,S({attachToElement:()=>x.target,attachToElementAnchorPoint:"center"})},onMouseLeave:x=>{var u;a||ee.highlight(V,""),(u=x.target.classList)==null||u.remove("over")},children:[l("animate",{attributeName:"height",from:0,to:e.height,dur:"0.5s",calcMode:"paced",keySplines:"0.5 0 0.5 1;",keyTimes:"0; 1"}),l("animate",{attributeName:"y",from:e.y+e.height,to:e.y,dur:"0.5s",calcMode:"paced",keySplines:"0.5 0 0.5 1;",keyTimes:"0; 1"})]})]})};var tr=Object.defineProperty,rr=Object.defineProperties,ar=Object.getOwnPropertyDescriptors,Fe=Object.getOwnPropertySymbols,or=Object.prototype.hasOwnProperty,lr=Object.prototype.propertyIsEnumerable,qe=(e,t,r)=>t in e?tr(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,$e=(e,t)=>{for(var r in t||(t={}))or.call(t,r)&&qe(e,r,t[r]);if(Fe)for(var r of Fe(t))lr.call(t,r)&&qe(e,r,t[r]);return e},ke=(e,t)=>rr(e,ar(t));function nr({width:e,height:t,maxWidth:r}){if(e<=r)return{width:e,height:t};const o=e/t,a=r,s=Math.floor(a/o);return{width:a,height:s}}const Ze=e=>e.columnName,ir=({margin:e={top:20,left:100,bottom:150,right:20},chart:t,className:r,chartId:o,allowZoom:a})=>{var s;const i=ve(e);t.showAxisYTitle||(i.left=50);let d=t.ratio.width+(-i.left-i.right)/2,g=t.ratio.height+(-i.top-i.bottom)/2;if(d>t.ratio.maxWidth){const m=nr({height:g,width:d,maxWidth:t.ratio.maxWidth});d=m.width,g=m.height}const f=xe(t.colorSchema),y=p((s=t.dataSets)==null?void 0:s.data).filter(m=>!!m.sets).map(m=>ke($e({},m),{sets:m.sets})),v=p(y[0].sets).map(m=>m.key),b=y.map(m=>m.name),k=v.map(m=>y.reduce((c,n)=>ke($e({},c),{[n.name]:p(n.sets).filter($=>$.key===m)[0].value}),{columnName:m})),S=oe({range:[typeof i=="number"?i:i.left,d],domain:k.map(Ze),padding:.2}),V=oe({domain:b,range:[0,S.bandwidth()]}),x=Ce({range:[g,typeof i=="number"?i:i.top],domain:[1,Math.max(...k.map(m=>Math.max(...b.map(c=>Number(m[c])))))],base:10}),u=pe({range:[g,typeof i=="number"?i:i.top],domain:[0,Math.max(...k.map(m=>Math.max(...b.map(c=>Number(m[c])))))]}),N=Oe({domain:b,range:y.map(m=>m.color)}),L=Le(m=>m).PRMT_CHART_SCALE==="0",A=B(()=>L?x:u,[L,u,x]),Y=B(()=>`VerticalBars${ue()}`,[]);me(()=>{document.querySelectorAll(`#${Y} .tickLabel`).forEach(m=>{const c=m.getBoundingClientRect().width;m.style.transformOrigin=m.getAttribute("x")+"px 14px",m.style.transform=`rotate(25deg) translateX(${c/2}px)`})});const{boxRef:R,elementRef:K}=ae(void 0,!a),w=p(t.dataSets.data).map((m,c)=>{const n=p(t.dataSets.data).length===1,$=m.color!==""&&m.color!==void 0?m.color:p(f.schema).length>0?ce(p(f.schema),c,n):"",j=[];return p(m.sets).forEach(E=>{E.color!==""&&E.color!==void 0?j.push(ke($e({},E),{columnName:m.name})):j.push(ke($e({},E),{color:$,columnName:m.name}))}),j}),T=p(t.dataSets.data).map((m,c)=>{const n=p(t.dataSets.data).length===1;return{color:m.color!==""&&m.color!==void 0?m.color:p(f.schema).length>0?ce(p(f.schema),c,n):"",title:m.name}});return p(t.dataSets.data).map(m=>{const c=[];return p(m.sets).forEach(n=>{n.color!==""&&n.color!==void 0&&c.push({color:n.color,title:m.name+" - "+n.key})}),c}).flat().forEach(m=>T.push(m)),P(q,{children:[l(D,{ref:R,id:Y,className:`${r??""} ${t.title}`,sx:{overflow:"hidden"},children:P("svg",{ref:K,className:`_${o} chart__svg`,height:t.ratio.height,width:t.ratio.width,children:[t.showGrid&&l(Ne.Grid,{xScale:S,yScale:A,left:0,width:d,height:g,numTicksRows:10,numTicksColumns:10,top:(typeof i=="number"?i:i.top)-20}),l(Q,{top:(typeof i=="number"?i:i.top)-20,children:l(wt,{data:k,keys:b,height:g,x0:Ze,x0Scale:S,x1Scale:V,yScale:A,color:N,children:m=>m.map(c=>l(Q,{left:c.x0,children:c.bars.map(n=>{const $=`${c.index}-${n.index}-${n.key}`;return l(er,{isSingle:c.bars.length===1,bar:n,barGroup:c,chart:t,parsedData:k,setsWithColor:w.flat()},$)})},`bar-group-${c.index}-${c.x0}`))})}),l(ge,{scale:A,left:i.left,label:t.chartType!=="pie2D"&&t.showAxisYTitle?t.axisYTitle:""}),l(fe,{top:g,scale:S,label:t.chartType!=="pie2D"&&t.showAxisXTitle?t.axisXTitle:"",tickLabelProps:{className:"tickLabel"},labelOffset:50})]})}),T.length>1&&l(ie,{id:o,containerClassName:"legendContainer",references:T})]})},cr=({currentCircle:e,innerKey:t,cx:r,cy:o,color:a,setCurrentCircle:s})=>P(Pt,{children:[e.includes(t)&&l("circle",{r:6,cx:r,cy:o,stroke:`#${W(a).saturate(25).toHex()}`,fill:`#${W(a).saturate(25).toHex()}`}),l("circle",{r:3,cx:r,cy:o,stroke:`#${W(a).darken(15).toHex()}`,fill:`#${W(a).darken(15).toHex()}`}),l("circle",{r:10,cx:r,cy:o,stroke:"transparent",fill:"transparent",onMouseEnter:()=>{s([t])},onMouseLeave:()=>{s([])},style:{cursor:"pointer"}})]},t);var sr=Object.defineProperty,hr=Object.defineProperties,dr=Object.getOwnPropertyDescriptors,Ke=Object.getOwnPropertySymbols,mr=Object.prototype.hasOwnProperty,ur=Object.prototype.propertyIsEnumerable,Je=Math.pow,Qe=(e,t,r)=>t in e?sr(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,Pe=(e,t)=>{for(var r in t||(t={}))mr.call(t,r)&&Qe(e,r,t[r]);if(Ke)for(var r of Ke(t))ur.call(t,r)&&Qe(e,r,t[r]);return e},Ae=(e,t)=>hr(e,dr(t));function pr({width:e,height:t,maxWidth:r}){if(e<=r)return{width:e,height:t};const o=e/t,a=r,s=Math.floor(a/o);return{width:a,height:s}}function se(e){return e.key}function Z(e){return Number(e.value)}function gr(e){var t,r,o,a,s,i,d;const g=p((t=e.dataSets)==null?void 0:t.data),f=g.map(y=>y.sets).reduce((y,v)=>p(y).concat(v),[]);return{columns:g,xScale:Oe({domain:p(g[0].sets).map(se)}),yScale:pe({domain:[((r=ye(f,Z))!=null?r:0<0)&&(o=ye(f,Z))!=null?o:0,(a=Re(f,Z))!=null?a:1]}),yScaleLog:Ce({domain:[((s=ye(f,Z))!=null?s:1>0)&&(i=ye(f,Z))!=null?i:1,(d=Re(f,Z))!=null?d:10]})}}const fr=({chart:e,margin:t={top:20,left:100,bottom:150,right:70},chartId:r,allowZoom:o})=>{const a=ve(t);e.showAxisYTitle||(a.left=50);let s=e.ratio.width,i=e.ratio.height-(a.top+a.bottom)/2;if(s>e.ratio.maxWidth){const h=pr({height:i,width:s,maxWidth:e.ratio.maxWidth});s=h.width,i=h.height}const{columns:d,xScale:g,yScale:f,yScaleLog:y}=gr(e),v=xe(e.colorSchema),b=p(d[0].sets),k=d.map(h=>h.sets),S=s/b.length;g.range(b.map((h,C)=>C===0?a.left:C*S+a.left)),f.range([i-(a.top+a.bottom)/2,typeof a=="number"?a:a.top]),y.range([i,typeof a=="number"?a:a.top]);const[V,x]=H([]),u=B(()=>f,[f]),N=B(()=>`VerticalBars${ue()}`,[]);me(()=>{document.querySelectorAll(`#${N} .tickLabel`).forEach(h=>{const C=h.getBoundingClientRect().width;h.style.transformOrigin=h.getAttribute("x")+"px 14px",h.style.transform=`rotate(25deg) translateX(${C/2}px)`})});function L(h,C,_){return C.map((M,G)=>{const O=Math.floor(G/_),I=h[O];return Ae(Pe({},M),{columnName:I})})}const[A,Y]=H([]);Ee(()=>{const h=k.flat().map(M=>({xValue:M.key,yValue:M.value,x:g(se(M)),y:u(Z(M))})),C=d.map(M=>M.name),_=L(C,h,b.length);Y(_)},[]);const[R,K]=H([]),w=vt(R),T=p(e.dataSets.data).map((h,C)=>{const _=p(e.dataSets.data).length===1,M=h.color!==""&&h.color!==void 0?h.color:p(v.schema).length>0?ce(p(v.schema),C,_):"",G=[];return p(h.sets).forEach(O=>{O.color!==""&&O.color!==void 0?G.push(Ae(Pe({},O),{columnName:h.name})):G.push(Ae(Pe({},O),{color:M,columnName:h.name}))}),{returnColumnsArray:G,columnColor:M}}),m=T.map(h=>{var C;return{color:(C=h.columnColor)!=null?C:"",title:h.returnColumnsArray[0].columnName}});p(e.dataSets.data).map(h=>{const C=[];return p(h.sets).forEach(_=>{_.color!==""&&_.color!==void 0&&C.push({color:_.color,title:h.name+" - "+_.key})}),C}).flat().forEach(h=>m.push(h));const{open:c}=le({children:R.sort((h,C)=>Number(C.yValue)-Number(h.yValue)).map((h,C)=>{const _=m.some(M=>M.title===h.columnName+" - "+h.xValue);return P(D,{children:[l("div",{style:{color:m[m.findIndex(M=>M.title===(_?h.columnName+" - "+h.xValue:h.columnName))].color},children:l("strong",{children:h.columnName})}),e.showValues&&l("div",{children:h.yValue}),l("div",{children:h.xValue}),R[C+1]&&l("hr",{})]},`${h.columnName}_${h.xValue}_${h.yValue}`)})}),[n,$]=H("");re({highlight(h){h.split(" - ").length===1?$(h):h.split(" - ").length===2&&$(h.split(" - ")[0])}});const{boxRef:j,elementRef:E}=ae(void 0,!o);return P(q,{children:[l(D,{id:N,ref:j,children:P("svg",{ref:E,width:s,height:i,id:"LinesChart",className:`_${r} chart__svg`,onMouseMove:h=>{var C;const _=(C=E.current)==null?void 0:C.getBoundingClientRect();let M=h.clientX,G=h.clientY-(a.top+a.bottom)/2;_&&(M=h.clientX-_.left,G=h.clientY-_.top);const O=A.filter(I=>Math.sqrt(Je(I.x-M,2)+Je(I.y-G,2))<20);if(w.current&&O.length>0){const I=d.map(X=>{let z="";return O.forEach(F=>{X.name===F.columnName&&(z=F.columnName)}),z}).filter(X=>X!==""),J=b.findIndex(X=>X.key===O[0].xValue);if(I&&J!==void 0){const X=I.map(z=>`${z}${J}`);x([...X])}K(O),c({attachToElement:()=>h.target,attachToElementAnchorPoint:"center"})}else O.length===0&&x([])},children:[e.showGrid&&l(Ne.Grid,{top:(typeof a=="number"?a:a.top)-20,left:0,xScale:g,yScale:u,width:s,height:i,stroke:v.grid.stroke,strokeOpacity:v.grid.opacity}),d.map((h,C)=>{var _;const M=p(h.sets),G=(_=T.find(O=>O.returnColumnsArray[0].columnName===h.name))==null?void 0:_.columnColor;return P(Q,{top:(typeof a=="number"?a:a.top)-20,style:{opacity:n!==""&&n!==h.name?.15:1,transition:"opacity 500ms"},children:[l($t,{curve:Nt.curveMonotoneX,data:M,x:O=>{var I;return(I=g(se(O)))!=null?I:0},y:O=>{var I;return(I=u(Z(O)))!=null?I:0},stroke:G??"black",strokeWidth:2,strokeOpacity:1,shapeRendering:"geometricPrecision"}),M.map((O,I)=>{var J;const X=h.name+I.toString(),z=(J=T.map(F=>F.returnColumnsArray).flat().find(F=>F.columnName===h.name&&F.key===O.key))==null?void 0:J.color;return P("g",{children:[l("text",{x:g(se(O))+10,y:u(Z(O))-5,textAnchor:"middle",style:{display:n===h.name?"block":"none",opacity:n===h.name?1:0,transition:"opacity 500ms"},children:O.value}),l(cr,{color:z??"black",coordinate:O,currentCircle:V,cx:g(se(O)),cy:u(Z(O)),setCurrentCircle:x,innerKey:X,column:h})]},X)})]},`lines-${h.name+C.toString()}`)}),l(ge,{scale:u,left:a.left,label:e.chartType!=="pie2D"&&e.showAxisYTitle?e.axisYTitle:""}),l(fe,{top:i-(a.top+a.bottom)/2,scale:g,label:e.chartType!=="pie2D"&&e.showAxisXTitle?e.axisXTitle:"",tickLabelProps:{className:"tickLabel"},labelOffset:50})]})}),m.length>1&&l(ie,{id:r,containerClassName:"legendContainer",references:m})]})},yr=({width:e,height:t,x:r,y:o,fill:a,x1:s,lineY:i,x2:d,stroke:g,strokeDashArray:f,textX:y,textY:v,textContent:b,isLast:k,step:S,columnName:V,chart:x})=>{const{open:u}=le({children:P(q,{children:[l("div",{style:{color:S.color},children:l("strong",{children:V})}),x.showValues&&l("div",{children:S.y}),l("div",{children:S.x})]})});return P(q,{children:[l(D,{as:"rect",sx:B(()=>({width:`${e}px`,height:`${t}px`,x:`${r}px`,y:`${o}px`,fill:`${a}`,"&:hover":{fill:`#${W(a).saturate(25).toHex()}`},transition:"fill 500ms"}),[a,t,e,r,o]),onMouseEnter:N=>{u({attachToElement:()=>N.target,attachToElementAnchorPoint:"center"})},onMouseLeave:()=>{}}),!k&&l(kt,{x1:s,x2:d,y1:i,y2:i,stroke:g,strokeDasharray:f}),l("text",{textAnchor:"middle",x:y,y:v,children:b})]})};var vr=Object.defineProperty,xr=Object.defineProperties,br=Object.getOwnPropertyDescriptors,Se=Object.getOwnPropertySymbols,Ue=Object.prototype.hasOwnProperty,et=Object.prototype.propertyIsEnumerable,tt=(e,t,r)=>t in e?vr(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,wr=(e,t)=>{for(var r in t||(t={}))Ue.call(t,r)&&tt(e,r,t[r]);if(Se)for(var r of Se(t))et.call(t,r)&&tt(e,r,t[r]);return e},$r=(e,t)=>xr(e,br(t)),kr=(e,t)=>{var r={};for(var o in e)Ue.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(e!=null&&Se)for(var o of Se(e))t.indexOf(o)<0&&et.call(e,o)&&(r[o]=e[o]);return r};const Sr=({data:e,xAccessor:t,yAccessor:r,showFinal:o,colors:a})=>{let s=0;const i=e.map(d=>{const g=t(d),f=r(d),y=s;return s+=Number(f),{x:g,y:f,start:y,end:s,color:Number(f)>0?a.positive:a.negative}});return o&&i.push({x:"Total",y:s,start:0,end:s,color:a.total}),i};function Cr({width:e,height:t,maxWidth:r}){if(e<=r)return{width:e,height:t};const o=e/t,a=r,s=Math.floor(a/o);return{width:a,height:s}}const Or=e=>{var t=e,{margin:r={top:20,left:100,bottom:150,right:70},chart:o}=t,a=o,{waterfallColors:s={positive:"#49b86f",negative:"#c92e5b",total:"#434857",stepConnector:"#888d94"}}=a,i=kr(a,["waterfallColors"]),{className:d,chartId:g,allowZoom:f}=t,y;const v=ve(r);i.showAxisYTitle||(v.left=50);let b=i.ratio.width+(-v.left-v.right)/2,k=i.ratio.height+(-v.top-v.bottom)/2;if(b>i.ratio.maxWidth){const n=Cr({height:k,width:b,maxWidth:i.ratio.maxWidth});b=n.width,k=n.height}const S=n=>n.key,V=n=>n.value,x=p((y=i.dataSets)==null?void 0:y.data).filter(n=>!!n.sets).map(n=>$r(wr({},n),{coordinate:n.sets})),[u,N]=H("0"),L=x.map(n=>n.name),A=B(()=>{var n;return Sr({data:p(i.dataSets.data)[u].sets,xAccessor:S,yAccessor:V,showFinal:(n=i.showTotal)!=null?n:!0,colors:s})},[i.dataSets.data,i.showTotal,u,s]),Y=.2,R=oe({domain:A.map(n=>n.x),padding:Y,range:[0,b]}),K=B(()=>{const n=A.flatMap(E=>[E.start,E.end]),[$,j]=Ot(n);return $!=null&&j!=null?[$-5,j+5]:void 0},[A]),w=pe({domain:K,nice:!0,range:[k,0]}),T=B(()=>`VerticalBars${ue()}`,[]);me(()=>{document.querySelectorAll(`#${T} .tickLabel`).forEach(n=>{const $=n.getBoundingClientRect().width;n.style.transformOrigin=n.getAttribute("x")+"px 14px",n.style.transform=`rotate(25deg) translateX(${$/2}px)`})});const{boxRef:m,elementRef:c}=ae(void 0,!f);return P(q,{children:[x.length>1&&l(D,{className:"chart__combo__wrapper",children:l(Ye,{chartId:g,pieces:L,className:"chartSelectorCombo",current:u,setCurrent:N})}),l(D,{id:T,className:d,ref:m,children:l("svg",{height:i.ratio.height,width:i.ratio.width,ref:c,children:P(Q,{left:v.left,top:v.top,children:[l(At,{scale:w,width:b,strokeDasharray:"5"}),A.map((n,$)=>{var j;const E=R(n.x),h=w(Math.max(n.start,n.end));if(E==null||h==null)return null;const C=Math.abs(w(n.start)-w(n.end)),_=$===A.length-1,M=2,G=E+R.bandwidth()+M,O=E+R.bandwidth()/(1-Y)-M,I=n.end<n.start?h+C:h,J=10,X=w(n.end)+(n.y<0?J:-J);let z=0;return A.filter((F,Te)=>{var Me;return((Me=i.showTotal)==null||Me)&&!A[Te+1]?!1:Te<=$}).forEach(F=>{z+=Number(F.y)}),l(yr,{chart:i,columnName:L[u],fill:n.color,height:C,isLast:_,lineY:I,step:n,stroke:s.stepConnector,strokeDashArray:2,textContent:(j=i.showTotal)==null||j?n.y:z,textX:E+R.bandwidth()/2,textY:X+5,width:R.bandwidth(),x:E,y:h,x1:G,x2:O},$)}),l(ge,{label:"",scale:w,hideAxisLine:!0,hideTicks:!0,tickLabelProps:()=>({textAnchor:"end",verticalAnchor:"middle"})}),l(fe,{scale:R,top:k,tickLabelProps:()=>({textAnchor:"middle",verticalAnchor:"middle",className:"tickLabel"})})]})})}),l(ie,{id:g,avoidEvent:!0,references:[{title:p(i.dataSets.data)[u].name,color:"transparent"}]})]})};var Nr=Object.defineProperty,Pr=Object.defineProperties,Ar=Object.getOwnPropertyDescriptors,rt=Object.getOwnPropertySymbols,Tr=Object.prototype.hasOwnProperty,Mr=Object.prototype.propertyIsEnumerable,at=(e,t,r)=>t in e?Nr(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,Er=(e,t)=>{for(var r in t||(t={}))Tr.call(t,r)&&at(e,r,t[r]);if(rt)for(var r of rt(t))Mr.call(t,r)&&at(e,r,t[r]);return e},jr=(e,t)=>Pr(e,Ar(t));const he="hsl(196, 37%, 13%)";function _r(...e){return de.useCallback(function(t){e.forEach(r=>{r&&(r.current=t)})},[e])}const[,ot,Lr]=_e()({Component:gt("ChartRenderer","layout.charts",{red:{schema:"schemas.red"},orange:{schema:"schemas.orange"},green:{schema:"schemas.green"},blue:{schema:"schemas.blue"},violet:{schema:"schemas.violet"},turquoise:{schema:"schemas.turquoise"},yellow:{schema:"schemas.yellow"},grey:{schema:"schemas.grey"},ocean:{schema:"schemas.ocean"},sunset:{schema:"schemas.sunset"},common:{axis:{stroke:he,title:he},schema:he,background:"hsl(200deg 20% 98%)",grid:{stroke:he,opacity:"0.1"},toolTip:{backgroundColor:"rgb(232, 241, 255)",border:"1px solid #07c",color:he,padding:".3rem .5rem",borderRadius:"3px",fontSize:"18px",boxShadow:"0 1px 2px rgba(33,33,33,0.2)",lineHeight:"1em"}},".legendContainer":{display:"flex",flexDirection:"row",gap:je(3),flexWrap:"wrap"},".chart__combo__wrapper":{position:"absolute"}},de.forwardRef(({currentChart:e,chartId:t,allowZoom:r},o)=>{const a=de.useRef(null),s=_r(o,a),i=B(()=>({chartId:t}),[t]),d=xt([Ut,Ht,ir,fr,Or],[e.chartType==="pie2D",e.chartType==="barH2D",e.chartType==="barV2D",e.chartType==="linear",e.chartType==="waterfall"],0);return l(ne.Provider,{value:i,children:l(D,jr(Er({ref:s,className:"chart__chartRenderer"},ft("layout.charts")),{children:l(d,{chart:e,chartId:t,parentRef:a,allowZoom:r})}))})}),!0)});var Vr=Object.defineProperty,Rr=Object.defineProperties,Ir=Object.getOwnPropertyDescriptors,lt=Object.getOwnPropertySymbols,Br=Object.prototype.hasOwnProperty,Dr=Object.prototype.propertyIsEnumerable,nt=(e,t,r)=>t in e?Vr(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,it=(e,t)=>{for(var r in t||(t={}))Br.call(t,r)&&nt(e,r,t[r]);if(lt)for(var r of lt(t))Dr.call(t,r)&&nt(e,r,t[r]);return e},ct=(e,t)=>Rr(e,Ir(t));const st=0,ht=360,Wr=({addBorder:e=!1,colorRanges:t,maxValue:r,minValue:o,currentValue:a,height:s,valueRanges:i,width:d,currentValueColor:g,currentValueFontSize:f})=>{const y=a,v=Math.min(s,d),b=r??i[i.length-1],k=o??i[0],S=Tt({domain:[k,b],startAngle:st,endAngle:ht,numTicks:0,diameter:v});function V(x){var u;const N=i.findIndex(L=>x<L);return N===-1?t[0]:(u=t[N-1])!=null?u:t[N]}return l(D,{children:P("svg",ct(it({},S.getSVGProps()),{viewBox:"-325 -325 600 600",children:[l("g",{id:"arcs",children:l("path",ct(it({},S.getArcProps({offset:20,startAngle:st,endAngle:ht})),{stroke:e?"black":"transparent",fill:V(y),strokeLinecap:"round",strokeWidth:5}))}),l("g",{children:l("text",{textAnchor:"middle",style:{fontSize:`${f??100}px`},alignmentBaseline:"central",fill:g,children:y})})]}))})},Hr=()=>{const e={addBorder:!0,backgColor:"white",currentValue:1010,height:400,width:400,maxValue:1050,minValue:1e3,noValueColor:"",pointerColor:"blue",ringAnchor:5,scaleFontSize:20,valueColor:"darkblue",valueDecimals:1,valueFontSize:50,valueType:"",widKpiType:0,zones:[{color:"blue",maximum:1020,minimum:1e3,transparency:20},{color:"purple",maximum:1040,minimum:1020,transparency:50},{color:"red",maximum:1050,minimum:1040,transparency:0}]},t=Array.from(new Set(p(e.zones).map(o=>[o.minimum,o.maximum]).flat().sort((o,a)=>o-a))),r=p(e.zones).map(o=>W(o.color).setAlpha(1-o.transparency/100).toPercentageRgbString()).flat();return l(D,{children:l(Wr,{addBorder:e.addBorder,backgroundColor:e.backgColor,colorRanges:r,currentValue:e.currentValue,decimals:e.valueDecimals,currentValueColor:e.valueColor,currentValueFontSize:e.valueFontSize,height:e.height,maxValue:e.maxValue,minValue:e.minValue,pointerColor:e.pointerColor,scaleValuesSize:e.scaleFontSize,valueRanges:t,width:e.width})})};export{Lr as ChartRenderer,Hr as WidgetContainer};
 //# sourceMappingURL=index.js.map