@apia/charts 1.0.2 → 2.0.0

package/dist/index.js

@@ -1,4263 +1,4 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useCallback, createContext, useState, useRef, useContext, useMemo, useLayoutEffect, createElement, useEffect } from 'react';
-import { Box, useThemeUI, Heading, Select, spacing, makeStyledComponent, responsive, getVariant } from '@apia/theme';
-import { uniqueId } from 'lodash';
-import { useImperativeComponentContext, makeImperativeComponent, arrayOrArray, useImperativeComponentEvents, getValueByPath, usePanAndZoom, getLabel, animate, addBoundary, usePrevious, getIndex, noNaN } 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 tinycolor from 'tinycolor2';
-import { localPoint } from '@visx/event';
-import { ApiaUtil, SimpleButton } 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 ColoredLegendItem = ({
-  groupId,
-  title,
-  color,
-  className,
-  isHighlighted,
-  isAnyHighlighted,
-  avoidEvent
-}) => {
-  const { id: chartId } = useImperativeComponentContext();
-  const handleMouseEnter = useCallback(() => {
-    if (avoidEvent) {
-      return;
-    }
-    chartMethods(chartId, "highlight", groupId);
-  }, [avoidEvent, chartId, groupId]);
-  const handleMouseLeave = useCallback(() => {
-    if (avoidEvent) {
-      return;
-    }
-    new ApiaUtil().tooltips.closeAll();
-    chartMethods(chartId, "highlight", "");
-  }, [avoidEvent, chartId]);
-  return /* @__PURE__ */ jsx(
-    SimpleButton,
-    {
-      variant: "link",
-      className: `${className != null ? className : ""} ${isHighlighted ? "highlight" : ""} ${isAnyHighlighted && !isHighlighted ? "isBlurred" : ""} legendItem`,
-      iconColor: color || "black",
-      icon: color === "transparent" ? void 0 : icons.SquareFilled,
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      children: title
-    }
-  );
-};
-
-const NumberedLegendItem = ({
-  groupId,
-  title,
-  className,
-  isHighlighted,
-  isAnyHighlighted,
-  avoidEvent
-}) => {
-  const { id: chartId } = useImperativeComponentContext();
-  const handleMouseEnter = useCallback(() => {
-    if (avoidEvent) {
-      return;
-    }
-    chartMethods(chartId, "highlight", groupId);
-  }, [avoidEvent, chartId, groupId]);
-  const handleMouseLeave = useCallback(() => {
-    if (avoidEvent) {
-      return;
-    }
-    new ApiaUtil().tooltips.closeAll();
-    chartMethods(chartId, "highlight", "");
-  }, [avoidEvent, chartId]);
-  return /* @__PURE__ */ jsx(
-    SimpleButton,
-    {
-      variant: "link",
-      className: `${className != null ? className : ""} ${isHighlighted ? "highlight" : ""} ${isAnyHighlighted && !isHighlighted ? "isBlurred" : ""} legendItem`,
-      sx: {
-        opacity: isAnyHighlighted && !isHighlighted ? "0.15" : "1"
-      },
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      children: title
-    }
-  );
-};
-
-const [legendContainerMethods, , LegendContainer] = makeImperativeComponent()({
-  initialState: {
-    highlightedBarGroup: ""
-  },
-  methods: {
-    highlight(setState, highlightedBarGroup) {
-      console.log(highlightedBarGroup);
-      setState({ highlightedBarGroup });
-    }
-  },
-  Component: ({
-    references,
-    highlightedBarGroup,
-    avoidEvent,
-    useNumbered
-  }) => {
-    return /* @__PURE__ */ jsx(Box, { className: `legendContainer`, children: !useNumbered ? references.map((data) => {
-      return /* @__PURE__ */ jsx(
-        ColoredLegendItem,
-        {
-          isHighlighted: data.title === highlightedBarGroup,
-          isAnyHighlighted: highlightedBarGroup !== "",
-          groupId: data.title,
-          color: data.color,
-          title: data.title,
-          avoidEvent: avoidEvent != null ? avoidEvent : false
-        },
-        data.title
-      );
-    }) : references.map((data, i) => {
-      return /* @__PURE__ */ jsx(
-        NumberedLegendItem,
-        {
-          isHighlighted: data.title === highlightedBarGroup,
-          isAnyHighlighted: highlightedBarGroup !== "",
-          groupId: data.title,
-          position: `${i + 1}`,
-          title: data.title,
-          avoidEvent: avoidEvent != null ? avoidEvent : false
-        },
-        data.title
-      );
-    }) });
-  }
-});
-
-const ChartContext = createContext({});
-
-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 ref = useRef(null);
-  useImperativeComponentEvents({
-    highlight(barNameColumn) {
-      let barName = barNameColumn;
-      let columnName = "";
-      if (barNameColumn.includes("_$_")) {
-        barName = barNameColumn.split("_$_")[0];
-        columnName = barNameColumn.split("_$_")[1];
-        if (isSingle && barNameColumn !== "" && barNameColumn !== void 0) {
-          barName = barNameColumn.split("_$_")[1];
-          columnName = barNameColumn.split("_$_")[1];
-        }
-      }
-      if (barName.split(" - ").length === 1) {
-        if (arrayOrArray(chart.dataSets.data).length === 1) {
-          setIsHighlighted(barName === parsedData[barGroup.index].columnName);
-          setIsAnyHighlighted(
-            barName !== parsedData[barGroup.index].columnName && barName !== ""
-          );
-          if (barName === parsedData[barGroup.index].columnName && columnName === parsedData[barGroup.index].columnName) {
-            new ApiaUtil().tooltips.open({
-              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 })
-              ] }),
-              attachToElement: () => ref.current,
-              attachToElementAnchorPoint: "center"
-            });
-          }
-        } else {
-          setIsHighlighted(barName === bar.key);
-          setIsAnyHighlighted(barName !== bar.key && barName !== "");
-          const currentBar = document.querySelector(
-            `.${parsedData[barGroup.index].columnName}__${bar.key}`
-          );
-          if (barName === bar.key && columnName === parsedData[barGroup.index].columnName) {
-            new ApiaUtil().tooltips.open({
-              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 })
-              ] }),
-              attachToElement: () => ref.current,
-              attachToElementAnchorPoint: "center"
-            });
-          } else if (barName === bar.key && currentBar && columnName === "") {
-            new ApiaUtil().tooltips.open({
-              children: parsedData.map((dat, i) => {
-                return /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        color: currentBarColor
-                      },
-                      children: /* @__PURE__ */ jsx("strong", { children: dat.columnName })
-                    }
-                  ),
-                  chart.showValues && /* @__PURE__ */ jsx("div", { children: dat[barName] }),
-                  /* @__PURE__ */ jsx("div", { children: Object.keys(dat).find(
-                    (key) => dat[key] === dat[barName]
-                  ) }),
-                  parsedData[i + 1] && /* @__PURE__ */ jsx("hr", {})
-                ] }, `${dat.columnName}_${dat[barName]}`);
-              }),
-              attachToMousePosition: true
-            });
-          }
-        }
-      } 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] !== ""
-        );
-        if (barName.split(" - ")[0] === bar.key && barName.split(" - ")[1] === set.key && columnName === parsedData[barGroup.index].columnName) {
-          new ApiaUtil().tooltips.open({
-            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 })
-            ] }),
-            attachToElement: () => ref.current,
-            attachToElementAnchorPoint: "center"
-          });
-        }
-      }
-    }
-  });
-  const { chartId } = useContext(ChartContext);
-  return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
-    Box,
-    {
-      as: "rect",
-      className: `chart__barRect ${parsedData[barGroup.index].columnName}__${bar.key}`,
-      ref,
-      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);
-        } else {
-          legendContainerMethods.highlight(
-            chartId,
-            parsedData[barGroup.index].columnName
-          );
-        }
-        chartMethods(
-          chartId,
-          "highlight",
-          `${bar.key}_$_${parsedData[barGroup.index].columnName}`
-        );
-        (_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 || !chart.showValues)
-          return;
-      },
-      onMouseLeave: (ev) => {
-        var _a2;
-        legendContainerMethods.highlight(chartId, "");
-        chartMethods(chartId, "highlight", "");
-        (_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().startsWith("#") ? tinycolor(colors[index % module]).desaturate(count * 5).toHex() : `#${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$f = Object.defineProperty;
-var __defProps$d = Object.defineProperties;
-var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$f = Object.getOwnPropertySymbols;
-var __hasOwnProp$f = Object.prototype.hasOwnProperty;
-var __propIsEnum$f = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$f = (obj, key, value) => key in obj ? __defProp$f(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$f = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$f.call(b, prop))
-      __defNormalProp$f(a, prop, b[prop]);
-  if (__getOwnPropSymbols$f)
-    for (var prop of __getOwnPropSymbols$f(b)) {
-      if (__propIsEnum$f.call(b, prop))
-        __defNormalProp$f(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$d = (a, b) => __defProps$d(a, __getOwnPropDescs$d(b));
-function useChartStyles(schemeName) {
-  var _a, _b, _c;
-  const { theme } = useThemeUI();
-  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 && schemeName !== "0" ? schemeName : "blue"]) == null ? void 0 : _c.schema
-    )
-  };
-  if (typeof currentStylescheme.schema === "object" && currentStylescheme.schema) {
-    const returnStyles = Object.entries(
-      currentStylescheme.schema
-    ).map((e) => {
-      const element = document.querySelector("*");
-      if (element) {
-        if (e[1].startsWith("var(")) {
-          return window.getComputedStyle(element).getPropertyValue(e[1].slice(4, -1));
-        }
-        return window.getComputedStyle(element).getPropertyValue(e[1]);
-      }
-      return window.getComputedStyle(document.querySelector("*")).getPropertyValue(e[1]);
-    });
-    return __spreadProps$d(__spreadValues$f({}, defaultStyles), { schema: returnStyles });
-  }
-}
-
-var __defProp$e = Object.defineProperty;
-var __defProps$c = Object.defineProperties;
-var __getOwnPropDescs$c = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$e = Object.getOwnPropertySymbols;
-var __hasOwnProp$e = Object.prototype.hasOwnProperty;
-var __propIsEnum$e = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$e = (obj, key, value) => key in obj ? __defProp$e(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$e = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$e.call(b, prop))
-      __defNormalProp$e(a, prop, b[prop]);
-  if (__getOwnPropSymbols$e)
-    for (var prop of __getOwnPropSymbols$e(b)) {
-      if (__propIsEnum$e.call(b, prop))
-        __defNormalProp$e(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$c = (a, b) => __defProps$c(a, __getOwnPropDescs$c(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$c(__spreadValues$e({}, 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$c(__spreadValues$e({}, 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 isLogScale = false;
-  const xScale = useMemo(() => {
-    {
-      return xScaleLine;
-    }
-  }, [isLogScale, xScaleLine, xScaleLog]);
-  const id = useMemo(() => `HorizontalBars${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 ? styles.schema : [
-        "#7ad6f4",
-        "#45bdee",
-        "#28a7ea",
-        "#006cbb",
-        "#034698",
-        "#032f64"
-      ]
-    ).length > 0 ? getBarColor(
-      arrayOrArray(
-        styles ? styles.schema : [
-          "#7ad6f4",
-          "#45bdee",
-          "#28a7ea",
-          "#006cbb",
-          "#034698",
-          "#032f64"
-        ]
-      ),
-      index,
-      isSingle
-    ) : "";
-    const returnColumnsArray = [];
-    arrayOrArray(data.sets).forEach((set) => {
-      if (set.color !== "" && set.color !== void 0) {
-        returnColumnsArray.push(__spreadProps$c(__spreadValues$e({}, set), { columnName: data.name }));
-      } else {
-        returnColumnsArray.push(__spreadProps$c(__spreadValues$e({}, 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 ? styles.schema : [
-          "#7ad6f4",
-          "#45bdee",
-          "#28a7ea",
-          "#006cbb",
-          "#034698",
-          "#032f64"
-        ]
-      ).length > 0 ? getBarColor(
-        arrayOrArray(
-          styles ? styles.schema : [
-            "#7ad6f4",
-            "#45bdee",
-            "#28a7ea",
-            "#006cbb",
-            "#034698",
-            "#032f64"
-          ]
-        ),
-        index,
-        isSingle
-      ) : "";
-      return {
-        color: dataColor,
-        title: data.name
-      };
-    }
-  );
-  let numberReference = [];
-  if (colorReference.length === 1) {
-    numberReference = arrayOrArray(
-      arrayOrArray(chart.dataSets.data)[0].sets
-    ).map((data, index) => {
-      return {
-        color: `${index + 1}`,
-        title: data.key
-      };
-    });
-  }
-  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} chartBox chartContainer`,
-        sx: React.useMemo(() => {
-          return {
-            [`.__${chartId != null ? chartId : outerClassName}`]: {
-              transform: "rotate(45deg)",
-              transformOrigin: "attr(x) 18px"
-            },
-            overflow: "hidden",
-            position: "relative",
-            height: `${chart.ratio.height}px`
-            // width: `${chart.ratio.width}px`,
-          };
-        }, [chart.ratio.height, 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 : "",
-                  labelOffset: 10,
-                  tickLabelProps: () => ({
-                    display: "none"
-                  })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                AxisBottom,
-                {
-                  top: innerHeight,
-                  scale: xScale,
-                  label: chart.chartType !== "pie2D" && chart.showAxisXTitle ? chart.axisXTitle : "",
-                  tickLabelProps: { display: "none" },
-                  tickLineProps: { display: "none" },
-                  labelOffset: 30
-                }
-              )
-            ]
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(Box, { className: "chartLegend__Wrapper", children: chart.showLegend && colorReference.length !== 0 && /* @__PURE__ */ jsxs(Box, { className: "chart__legend__wrapper", children: [
-      /* @__PURE__ */ jsx(Heading, { as: "h6", children: getLabel("mnuLeyends").text }),
-      /* @__PURE__ */ jsx(
-        LegendContainer,
-        {
-          id: chartId,
-          references: (
-            // hideLegendsColors
-            //   ? colorReference.map((ref) => {
-            //       return { ...ref, color: 'transparent' };
-            //     })
-            colorReference.length === 1 && numberReference.length > 0 ? numberReference : colorReference
-          ),
-          useNumbered: colorReference.length === 1
-        }
-      )
-    ] }) })
-  ] });
-};
-
-const Slice = ({
-  arc,
-  arcPath,
-  chart,
-  actualColor,
-  chartId: outerChartId
-}) => {
-  const [isHighlighted, setIsHighlighted] = useState(false);
-  const [isAnyHighlighted, setIsAnyHighlighted] = useState(false);
-  const ref = useRef(null);
-  const name = arc.data;
-  const { id: chartId } = useImperativeComponentContext();
-  useImperativeComponentEvents({
-    highlight(barNameId) {
-      const barName = barNameId.split("_$_")[0];
-      setIsHighlighted(barName === arc.data.key);
-      setIsAnyHighlighted(barName !== arc.data.key && barName !== "");
-      if (barName === arc.data.key) {
-        new ApiaUtil().tooltips.open({
-          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 !== void 0 ? "- " + arc.data.percentage : ""}${arc.data.percentage !== "" && arc.data.percentage !== void 0 ? "%" : ""}` })
-          ] }),
-          attachToElement: () => {
-            return ref.current;
-          },
-          attachToElementAnchorPoint: "center",
-          closeOnClickOut: () => {
-            return window.innerWidth > 700;
-          },
-          closeOnMouseLeaveAttachedElement: (ev) => {
-            return !ev.relatedTarget.closest(".legendItem");
-          },
-          className: arc.data.key
-        });
-      }
-    }
-  });
-  return /* @__PURE__ */ jsx(
-    "path",
-    {
-      id: `arc-${name.key}-${name.value}-${outerChartId}`,
-      ref,
-      style: useMemo(
-        () => ({
-          "&:hover": {
-            fill: `#${tinycolor(actualColor).saturate(25).toHex()}`
-          },
-          transition: "fill 500ms, opacity 500ms"
-        }),
-        [actualColor]
-      ),
-      color: isAnyHighlighted ? `#${tinycolor(actualColor).desaturate(70).toHex()}` : 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);
-        chartMethods(chartId, "highlight", `${name.key}_$_${outerChartId}`);
-        (_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;
-      },
-      onMouseLeave: (ev) => {
-        var _a;
-        legendContainerMethods.highlight(chartId, "");
-        chartMethods(chartId, "highlight", "");
-        (_a = ev.target.classList) == null ? void 0 : _a.remove("over");
-      }
-    },
-    `arc-${name.key}-${name.value}-${outerChartId}`
-  );
-};
-
-var __defProp$d = Object.defineProperty;
-var __defProps$b = Object.defineProperties;
-var __getOwnPropDescs$b = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$d = Object.getOwnPropertySymbols;
-var __hasOwnProp$d = Object.prototype.hasOwnProperty;
-var __propIsEnum$d = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$d = (obj, key, value) => key in obj ? __defProp$d(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$d = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$d.call(b, prop))
-      __defNormalProp$d(a, prop, b[prop]);
-  if (__getOwnPropSymbols$d)
-    for (var prop of __getOwnPropSymbols$d(b)) {
-      if (__propIsEnum$d.call(b, prop))
-        __defNormalProp$d(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
-const usePieAnimation = ({
-  incomingColumn,
-  piezas,
-  setDataset
-}) => {
-  const previousObjectRef = useRef(void 0);
-  const actualObjectRef = useRef(void 0);
-  const isAnimating = useRef(false);
-  if (previousObjectRef.current && piezas) {
-    const previousCoordinates = isAnimating.current && actualObjectRef.current ? arrayOrArray(actualObjectRef.current.coordinate) : arrayOrArray(previousObjectRef.current.coordinate);
-    const currentCoordinates = arrayOrArray(incomingColumn.sets);
-    const hasValueChanged = previousCoordinates.some((prevCoord, index) => {
-      const currentCoord = currentCoordinates[index];
-      return prevCoord.value !== currentCoord.value;
-    });
-    if (hasValueChanged) {
-      isAnimating.current = true;
-      const difference = [];
-      for (let i = 0; i < Math.max(previousCoordinates.length, currentCoordinates.length); i++) {
-        const coord1 = previousCoordinates[i];
-        const coord2 = currentCoordinates[i];
-        if (coord1 && coord2) {
-          const newValue = Math.abs(
-            parseInt(coord1.value) - parseInt(coord2.value)
-          ).toString();
-          const newCoordinate = {
-            key: coord2.key,
-            color: coord2.color,
-            // Assuming color is the same for both coordinates
-            value: newValue,
-            percentage: coord2.percentage !== "" && coord2.percentage !== void 0 ? coord2.percentage : void 0
-          };
-          difference.push(newCoordinate);
-        } else if (!coord1 && coord2 && previousCoordinates.length > 0) {
-          const newValue = Math.abs(0 - parseInt(coord2.value)).toString();
-          const newCoordinate = {
-            key: coord2.key,
-            color: coord2.color,
-            // Assuming color is the same for both coordinates
-            value: newValue,
-            percentage: coord2.percentage !== "" && coord2.percentage !== void 0 ? coord2.percentage : void 0
-          };
-          difference.push(newCoordinate);
-        }
-      }
-      return animate(
-        500,
-        (progress) => {
-          const step = {
-            color: piezas.color,
-            name: incomingColumn.name,
-            sets: difference.map((coord, i) => {
-              return {
-                key: coord.key,
-                color: coord.color,
-                percentage: coord.percentage,
-                value: addBoundary(
-                  Number(currentCoordinates[i].value) > Number(
-                    previousCoordinates[i] ? previousCoordinates[i].value : 0
-                  ) ? Number(coord.value) * progress + Number(
-                    previousCoordinates[i] ? previousCoordinates[i].value : 0
-                  ) : Number(
-                    previousCoordinates[i] ? previousCoordinates[i].value : 0
-                  ) - Number(coord.value) * progress,
-                  Math.min(
-                    Number(
-                      previousCoordinates[i] ? previousCoordinates[i].value : 0
-                    ),
-                    Number(currentCoordinates[i].value)
-                  ),
-                  Math.max(
-                    Number(
-                      previousCoordinates[i] ? previousCoordinates[i].value : 0
-                    ),
-                    Number(currentCoordinates[i].value)
-                  )
-                ).toString()
-              };
-            })
-          };
-          actualObjectRef.current = {
-            color: step.color,
-            coordinate: step.sets,
-            name: step.name
-          };
-          setDataset((prev) => {
-            const newIndex = prev.findIndex((col) => {
-              return col.name === step.name;
-            });
-            const returnObj = [...prev];
-            if (newIndex >= 0) {
-              returnObj[newIndex] = step;
-              return returnObj;
-            } else {
-              return [step];
-            }
-          });
-        },
-        () => {
-          const newPrev = __spreadProps$b(__spreadValues$d({}, incomingColumn), {
-            coordinate: incomingColumn.sets
-          });
-          previousObjectRef.current = newPrev;
-          isAnimating.current = false;
-        }
-      );
-    }
-  } else if (!previousObjectRef.current) {
-    const newPrev = __spreadProps$b(__spreadValues$d({}, incomingColumn), {
-      coordinate: incomingColumn.sets
-    });
-    previousObjectRef.current = newPrev;
-    isAnimating.current = false;
-  }
-};
-
-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)),
-        " "
-      ]
-    }
-  );
-}
-
-var __defProp$c = Object.defineProperty;
-var __defProps$a = Object.defineProperties;
-var __getOwnPropDescs$a = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$c = Object.getOwnPropertySymbols;
-var __hasOwnProp$c = Object.prototype.hasOwnProperty;
-var __propIsEnum$c = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$c = (obj, key, value) => key in obj ? __defProp$c(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$c = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$c.call(b, prop))
-      __defNormalProp$c(a, prop, b[prop]);
-  if (__getOwnPropSymbols$c)
-    for (var prop of __getOwnPropSymbols$c(b)) {
-      if (__propIsEnum$c.call(b, prop))
-        __defNormalProp$c(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$a = (a, b) => __defProps$a(a, __getOwnPropDescs$a(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 = ({
-  chart,
-  className,
-  chartId,
-  allowZoom
-}) => {
-  var _a, _b, _c, _d;
-  const [dataset, setDataset] = useState(
-    arrayOrArray((_a = chart.dataSets) == null ? void 0 : _a.data)
-  );
-  const [currentPie, setCurrentPie] = useState("0");
-  const piezas = useMemo(() => {
-    return dataset.filter((piece) => !!piece.sets).map((piece) => {
-      return __spreadProps$a(__spreadValues$c({}, piece), {
-        coordinate: piece.sets
-      });
-    })[dataset[parseInt(currentPie)] ? parseInt(currentPie) : 0];
-  }, [currentPie, dataset]);
-  usePieAnimation({
-    incomingColumn: arrayOrArray((_b = chart.dataSets) == null ? void 0 : _b.data)[dataset[parseInt(currentPie)] ? parseInt(currentPie) : 0],
-    piezas,
-    setDataset
-  });
-  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 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 && arrayOrArray(piezas.coordinate).length === 1 ? 100 : Number(d.value);
-  const radius = Math.min(innerHeight, innerWidth) / 2.5;
-  const styles = useChartStyles(chart.colorSchema);
-  const colorsArray = styles ? styles.schema : ["#7ad6f4", "#45bdee", "#28a7ea", "#006cbb", "#034698", "#032f64"];
-  const names = arrayOrArray(
-    ((_c = dataset[parseInt(currentPie)]) != null ? _c : dataset[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([]);
-  const id = useMemo(() => `Pie${uniqueId()}`, []);
-  const charts = arrayOrArray((_d = chart.dataSets) == null ? void 0 : _d.data).filter((piece) => !!piece.sets).map((piece) => {
-    return __spreadProps$a(__spreadValues$c({}, piece), {
-      coordinate: piece.sets
-    });
-  });
-  const chartNames = charts.map((piece) => {
-    return piece.name;
-  });
-  if (!piezas) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        ref: boxRef,
-        id,
-        className: `${className ? className : ""} ${chartId} chartBox chartContainer`,
-        sx: { textAlign: "center", pb: spacing(5) },
-        children: /* @__PURE__ */ jsx(
-          "svg",
-          {
-            ref: elementRef,
-            height: radius * 2,
-            width: radius * 2,
-            className: `_${chartId} chart__svg`,
-            children: /* @__PURE__ */ jsx(Group, { top: top != null ? top : 0, left: left != null ? left : 0, children: /* @__PURE__ */ jsx(
-              Pie,
-              {
-                data: arrayOrArray(piezas.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, _b2, _c2, _d2, _e;
-                    const name = arc.data;
-                    const arcPath = pie.path(arc);
-                    return /* @__PURE__ */ jsx(
-                      Slice,
-                      {
-                        arc,
-                        chartId: id,
-                        arcPath,
-                        chart,
-                        actualColor: ((_a2 = colorReference.find((color) => {
-                          return color.title === name.key;
-                        })) == null ? void 0 : _a2.color.startsWith("#")) ? (_c2 = (_b2 = colorReference.find((color) => {
-                          return color.title === name.key;
-                        })) == null ? void 0 : _b2.color) != null ? _c2 : "" : `#${(_e = (_d2 = colorReference.find((color) => {
-                          return color.title === name.key;
-                        })) == null ? void 0 : _d2.color) != null ? _e : ""}`
-                      },
-                      `${name.key}_${name.value}`
-                    );
-                  });
-                  previousPaths.current = paths;
-                  return result;
-                }
-              }
-            ) })
-          }
-        )
-      },
-      piezas.name
-    ),
-    /* @__PURE__ */ jsxs(Box, { className: "chartLegend__Wrapper", children: [
-      !chart.hideSelector && charts.length > 1 && /* @__PURE__ */ jsxs(Box, { className: "chart__combo__wrapper", children: [
-        /* @__PURE__ */ jsx(Heading, { as: "h6", children: getLabel("lblChartSel").text }),
-        /* @__PURE__ */ jsx(
-          ChartSelector,
-          {
-            chartId,
-            pieces: chartNames,
-            className: "chartSelectorCombo",
-            current: currentPie,
-            setCurrent: setCurrentPie
-          }
-        )
-      ] }),
-      chart.showLegend && colorReference.length > 1 && /* @__PURE__ */ jsxs(Box, { className: "chart__legend__wrapper", children: [
-        /* @__PURE__ */ jsx(Heading, { as: "h6", children: getLabel("mnuLeyends").text }),
-        /* @__PURE__ */ jsx(LegendContainer, { id: chartId, 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 ref = useRef(null);
-  useImperativeComponentEvents({
-    highlight(barNameColumn) {
-      let barName = barNameColumn;
-      let columnName = "";
-      if (barNameColumn.includes("_$_")) {
-        barName = barNameColumn.split("_$_")[0];
-        columnName = barNameColumn.split("_$_")[1];
-        if (isSingle && barNameColumn !== "" && barNameColumn !== void 0) {
-          barName = barNameColumn.split("_$_")[1];
-          columnName = barNameColumn.split("_$_")[1];
-        }
-      }
-      if (barName.split(" - ").length === 1) {
-        if (arrayOrArray(chart.dataSets.data).length === 1) {
-          setIsHighlighted(barName === parsedData[barGroup.index].columnName);
-          setIsAnyHighlighted(
-            barName !== parsedData[barGroup.index].columnName && barName !== ""
-          );
-          if (barName === parsedData[barGroup.index].columnName || columnName === parsedData[barGroup.index].columnName) {
-            new ApiaUtil().tooltips.open({
-              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 })
-              ] }),
-              attachToElement: () => ref.current,
-              attachToElementAnchorPoint: "center"
-            });
-          }
-        } else {
-          setIsHighlighted(barName === bar.key);
-          setIsAnyHighlighted(barName !== bar.key && barName !== "");
-          const currentBar = document.querySelector(
-            `.${parsedData[barGroup.index].columnName}__${bar.key}`
-          );
-          if (barName === bar.key && columnName === parsedData[barGroup.index].columnName) {
-            new ApiaUtil().tooltips.open({
-              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 })
-              ] }),
-              attachToElement: () => ref.current,
-              attachToElementAnchorPoint: "center"
-            });
-          } else if (barName === bar.key && currentBar && columnName === "") {
-            new ApiaUtil().tooltips.open({
-              children: parsedData.map((dat, i) => {
-                return /* @__PURE__ */ jsxs("div", { children: [
-                  /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      style: {
-                        color: currentBarColor
-                      },
-                      children: /* @__PURE__ */ jsx("strong", { children: dat.columnName })
-                    }
-                  ),
-                  chart.showValues && /* @__PURE__ */ jsx("div", { children: dat[barName] }),
-                  /* @__PURE__ */ jsx("div", { children: Object.keys(dat).find(
-                    (key) => dat[key] === dat[barName]
-                  ) }),
-                  parsedData[i + 1] && /* @__PURE__ */ jsx("hr", {})
-                ] }, `${dat.columnName}_${dat[barName]}`);
-              }),
-              attachToMousePosition: true
-            });
-          }
-        }
-      } 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] !== ""
-        );
-        if (barName.split(" - ")[0] === bar.key && barName.split(" - ")[1] === set.key && columnName === parsedData[barGroup.index].columnName) {
-          new ApiaUtil().tooltips.open({
-            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 })
-            ] }),
-            attachToElement: () => ref.current,
-            attachToElementAnchorPoint: "center"
-          });
-        }
-      }
-    }
-  });
-  const { chartId } = useContext(ChartContext);
-  return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsxs(
-    Box,
-    {
-      as: "rect",
-      className: `chart__barRect ${parsedData[barGroup.index].columnName}__${bar.key}`,
-      ref,
-      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;
-        console.log(bar.key, parsedData[barGroup.index].columnName);
-        if (!isSingle) {
-          legendContainerMethods.highlight(chartId, bar.key);
-        } else {
-          legendContainerMethods.highlight(
-            chartId,
-            parsedData[barGroup.index].columnName
-          );
-        }
-        chartMethods(
-          chartId,
-          "highlight",
-          `${bar.key}_$_${parsedData[barGroup.index].columnName}`
-        );
-        (_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 || !chart.showValues)
-          return;
-      },
-      onMouseLeave: (ev) => {
-        var _a2;
-        legendContainerMethods.highlight(chartId, "");
-        chartMethods(chartId, "highlight", "");
-        (_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$b = Object.defineProperty;
-var __defProps$9 = Object.defineProperties;
-var __getOwnPropDescs$9 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$b = Object.getOwnPropertySymbols;
-var __hasOwnProp$b = Object.prototype.hasOwnProperty;
-var __propIsEnum$b = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$b = (obj, key, value) => key in obj ? __defProp$b(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$b = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$b.call(b, prop))
-      __defNormalProp$b(a, prop, b[prop]);
-  if (__getOwnPropSymbols$b)
-    for (var prop of __getOwnPropSymbols$b(b)) {
-      if (__propIsEnum$b.call(b, prop))
-        __defNormalProp$b(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$9 = (a, b) => __defProps$9(a, __getOwnPropDescs$9(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: 24, right: 0 },
-  chart,
-  className,
-  chartId,
-  allowZoom
-}) => {
-  var _a;
-  const effectiveMargin = parseMargin(margin);
-  if (!chart.showAxisYTitle && effectiveMargin.left > 50) {
-    effectiveMargin.left = 50;
-  }
-  let innerWidth = chart.ratio.width + (-effectiveMargin.left - effectiveMargin.right) / 2;
-  let innerHeight = chart.ratio.height + (chart.showAxisXTitle ? -effectiveMargin.top - effectiveMargin.bottom : (-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$9(__spreadValues$b({}, 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$9(__spreadValues$b({}, 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,
-      chart.ratio.width
-    ],
-    domain: parsedData.map(getXValue),
-    padding: 0.2
-  });
-  const numericXScale = scaleBand({
-    range: [
-      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.left,
-      chart.ratio.width
-    ],
-    domain: parsedData.map((_, i) => `${i + 1}`),
-    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 isLogScale = false;
-  const yScale = useMemo(() => {
-    {
-      return yScaleLine;
-    }
-  }, [isLogScale, yScaleLine, yScaleLog]);
-  const id = useMemo(() => `VerticalBars${uniqueId()}`, []);
-  useLayoutEffect(() => {
-    document.querySelectorAll(`#${id} .tickLabel`).forEach((current) => {
-      const box = current.getBoundingClientRect();
-      if (box.width > 125) {
-        current.style.width = "125px";
-        current.style.overflow = "hidden";
-        current.style.textOverflow = "ellipsis";
-        current.style.whiteSpace = "nowrap";
-      }
-      current.style.transformOrigin = current.getAttribute("x") + "px 14px";
-      current.style.transform = `rotate(25deg)`;
-    });
-  });
-  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 ? styles.schema : [
-        "#7ad6f4",
-        "#45bdee",
-        "#28a7ea",
-        "#006cbb",
-        "#034698",
-        "#032f64"
-      ]
-    ).length > 0 ? getBarColor(
-      arrayOrArray(
-        styles ? styles.schema : [
-          "#7ad6f4",
-          "#45bdee",
-          "#28a7ea",
-          "#006cbb",
-          "#034698",
-          "#032f64"
-        ]
-      ),
-      index,
-      isSingle
-    ) : "";
-    const returnColumnsArray = [];
-    arrayOrArray(data.sets).forEach((set) => {
-      if (set.color !== "" && set.color !== void 0) {
-        returnColumnsArray.push(__spreadProps$9(__spreadValues$b({}, set), { columnName: data.name }));
-      } else {
-        returnColumnsArray.push(__spreadProps$9(__spreadValues$b({}, 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 ? styles.schema : [
-          "#7ad6f4",
-          "#45bdee",
-          "#28a7ea",
-          "#006cbb",
-          "#034698",
-          "#032f64"
-        ]
-      ).length > 0 ? getBarColor(
-        arrayOrArray(
-          styles ? styles.schema : [
-            "#7ad6f4",
-            "#45bdee",
-            "#28a7ea",
-            "#006cbb",
-            "#034698",
-            "#032f64"
-          ]
-        ),
-        index,
-        isSingle
-      ) : "";
-      return {
-        color: dataColor,
-        title: data.name
-      };
-    }
-  );
-  let numberReference = [];
-  if (colorReference.length === 1) {
-    numberReference = arrayOrArray(
-      arrayOrArray(chart.dataSets.data)[0].sets
-    ).map((data, index) => {
-      return {
-        color: `${index + 1}`,
-        title: data.key
-      };
-    });
-  }
-  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} chartBox chartContainer`,
-        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: chart.ratio.width,
-                  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 : "",
-                  tickComponent: (props) => {
-                    var _a2;
-                    let value = Number((_a2 = props.formattedValue) == null ? void 0 : _a2.replace(",", ""));
-                    let counter = -1;
-                    const units = ["k", "M", "G", "T", "P", "E", "Z", "Y", "R", "Q"];
-                    while (value >= 1e3) {
-                      value = value / 1e3;
-                      counter++;
-                    }
-                    let stringValue = `${value}`;
-                    if (stringValue.length > 3) {
-                      stringValue = stringValue.slice(0, 3);
-                    }
-                    if (stringValue.endsWith(".")) {
-                      stringValue = stringValue.replace(".", "");
-                    }
-                    const newValue = `${stringValue}${counter >= 0 ? units[counter] : ""}`;
-                    return /* @__PURE__ */ jsx(Fragment, { children: chart.showAxisYTitle && /* @__PURE__ */ jsx(
-                      "text",
-                      {
-                        dx: props.dx,
-                        dy: props.dy,
-                        fill: props.fill,
-                        fontSize: props.fontSize,
-                        textAnchor: props.textAnchor,
-                        x: props.x,
-                        y: props.y,
-                        children: newValue
-                      }
-                    ) });
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                AxisBottom,
-                {
-                  top: innerHeight,
-                  scale: colorReference.length === 1 && numberReference.length > 0 ? numericXScale : xScale,
-                  label: chart.chartType !== "pie2D" && chart.showAxisXTitle ? chart.axisXTitle : "",
-                  tickLabelProps: { display: "none" },
-                  tickLineProps: { display: "none" },
-                  labelOffset: 0
-                }
-              )
-            ]
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(Box, { className: "chartLegend__Wrapper", children: chart.showLegend && colorReference.length !== 0 && /* @__PURE__ */ jsxs(Box, { className: "chart__legend__wrapper", children: [
-      /* @__PURE__ */ jsx(Heading, { as: "h6", children: getLabel("mnuLeyends").text }),
-      /* @__PURE__ */ jsx(
-        LegendContainer,
-        {
-          id: chartId,
-          references: colorReference.length === 1 && numberReference.length > 0 ? numberReference : colorReference,
-          useNumbered: colorReference.length === 1
-        }
-      )
-    ] }) })
-  ] });
-};
-
-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: 6,
-        cx,
-        cy,
-        stroke: "transparent",
-        fill: "transparent",
-        onMouseEnter: () => {
-          setCurrentCircle([innerKey]);
-        },
-        onMouseLeave: () => {
-          setCurrentCircle([]);
-        },
-        style: { cursor: "pointer" }
-      }
-    )
-  ] }, innerKey);
-};
-
-var __defProp$a = Object.defineProperty;
-var __defProps$8 = Object.defineProperties;
-var __getOwnPropDescs$8 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$a = Object.getOwnPropertySymbols;
-var __hasOwnProp$a = Object.prototype.hasOwnProperty;
-var __propIsEnum$a = Object.prototype.propertyIsEnumerable;
-var __pow = Math.pow;
-var __defNormalProp$a = (obj, key, value) => key in obj ? __defProp$a(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$a = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$a.call(b, prop))
-      __defNormalProp$a(a, prop, b[prop]);
-  if (__getOwnPropSymbols$a)
-    for (var prop of __getOwnPropSymbols$a(b)) {
-      if (__propIsEnum$a.call(b, prop))
-        __defNormalProp$a(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$8 = (a, b) => __defProps$8(a, __getOwnPropDescs$8(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, _h;
-  const setsArray = arrayOrArray((_a = chart.dataSets) == null ? void 0 : _a.data).map(
-    (col) => arrayOrArray(col.sets)
-  );
-  let longestLine = [];
-  let longestLineIndex = -1;
-  for (let i = 0; i < setsArray.length; i++) {
-    const array = setsArray[i];
-    if (!longestLine || array.length > longestLine.length) {
-      longestLine = array;
-      longestLineIndex = i;
-    }
-  }
-  const lines = arrayOrArray((_b = chart.dataSets) == null ? void 0 : _b.data);
-  const nodesDataArray = lines.map((line) => line.sets);
-  const nodesData = nodesDataArray.reduce(
-    (rec, d) => arrayOrArray(rec).concat(d),
-    []
-  );
-  return {
-    lines,
-    longestLine,
-    longestLineIndex,
-    tallestLine: [...new Set(nodesData.map((value) => value.value))],
-    xScale: scaleOrdinal({
-      domain: longestLine.map(getX)
-    }),
-    yScale: scaleLinear({
-      domain: [
-        ((_c = min(nodesData, getY)) != null ? _c : 0) < 0 ? (_d = min(nodesData, getY)) != null ? _d : 0 : 0,
-        (_e = max(nodesData, getY)) != null ? _e : 1
-      ]
-    }),
-    yScaleLog: scaleLog({
-      domain: [
-        ((_f = min(nodesData, getY)) != null ? _f : 1) > 0 ? (_g = min(nodesData, getY)) != null ? _g : 1 : 1,
-        (_h = max(nodesData, getY)) != null ? _h : 10
-      ]
-    })
-  };
-}
-const LineChart = ({
-  chart,
-  margin = { top: 20, left: 100, bottom: 24, right: 0 },
-  chartId,
-  allowZoom
-}) => {
-  const effectiveMargin = parseMargin(margin);
-  if (!chart.showAxisYTitle && effectiveMargin.left > 50) {
-    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$1({
-      height: innerHeight,
-      width: innerWidth,
-      maxWidth: chart.ratio.maxWidth
-    });
-    innerWidth = newValues.width;
-    innerHeight = newValues.height;
-  }
-  const { lines, xScale, yScale, yScaleLog, longestLine } = parseData(chart);
-  const styles = useChartStyles(chart.colorSchema);
-  const coordinates = arrayOrArray(lines[0].sets);
-  const coordinatesArray = lines.map((col) => {
-    return col.sets;
-  });
-  const divideRangeBetweenStrings = (min2, max2, strings) => {
-    const numStrings = strings.length;
-    const step = (max2 - min2) / (numStrings - 1);
-    const resultArray = [];
-    let currentValue = min2;
-    for (let i = 0; i < numStrings; i++) {
-      resultArray.push(currentValue);
-      currentValue += step;
-    }
-    return resultArray;
-  };
-  const xScaleRange = useMemo(() => {
-    const rangeArr = [
-      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.left,
-      innerWidth
-    ];
-    return divideRangeBetweenStrings(rangeArr[0], rangeArr[1], longestLine);
-  }, [effectiveMargin, innerWidth, longestLine]);
-  xScale.range(xScaleRange);
-  const yScaleRange = useMemo(() => {
-    const rangeArr = [
-      innerHeight - (effectiveMargin.top + effectiveMargin.bottom),
-      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top
-    ];
-    return rangeArr;
-  }, [effectiveMargin, innerHeight]);
-  yScale.range(yScaleRange);
-  yScaleLog.range([
-    innerHeight,
-    typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top
-  ]);
-  const [currentCircle, setCurrentCircle] = useState([]);
-  const actualYScale = useMemo(() => {
-    return yScale;
-  }, [yScale]);
-  const id = useMemo(() => `Linear${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$8(__spreadValues$a({}, object), { columnName: name });
-    });
-  }
-  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 ? styles.schema : [
-        "#7ad6f4",
-        "#45bdee",
-        "#28a7ea",
-        "#006cbb",
-        "#034698",
-        "#032f64"
-      ]
-    ).length > 0 ? getBarColor(
-      arrayOrArray(
-        styles ? styles.schema : [
-          "#7ad6f4",
-          "#45bdee",
-          "#28a7ea",
-          "#006cbb",
-          "#034698",
-          "#032f64"
-        ]
-      ),
-      index,
-      isSingle
-    ) : "";
-    const returnColumnsArray = [];
-    arrayOrArray(data.sets).forEach((set) => {
-      if (set.color !== "" && set.color !== void 0) {
-        returnColumnsArray.push(__spreadProps$8(__spreadValues$a({}, set), { columnName: data.name }));
-      } else {
-        returnColumnsArray.push(__spreadProps$8(__spreadValues$a({}, set), {
-          color: dataColor,
-          columnName: data.name
-        }));
-      }
-    });
-    return { returnColumnsArray, columnColor: dataColor };
-  });
-  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 ? styles.schema : [
-          "#7ad6f4",
-          "#45bdee",
-          "#28a7ea",
-          "#006cbb",
-          "#034698",
-          "#032f64"
-        ]
-      ).length > 0 ? getBarColor(
-        arrayOrArray(
-          styles ? styles.schema : [
-            "#7ad6f4",
-            "#45bdee",
-            "#28a7ea",
-            "#006cbb",
-            "#034698",
-            "#032f64"
-          ]
-        ),
-        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));
-  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
-  );
-  const coords = coordinatesArray.flat().map((coord) => {
-    return {
-      xValue: coord.key,
-      yValue: coord.value,
-      x: xScale(getX(coord)),
-      y: actualYScale(getY(coord))
-    };
-  });
-  const columnNames = lines.map((column) => {
-    return column.name;
-  });
-  const nodes = addNameToProps(columnNames, coords, coordinates.length);
-  const [nearNodesArray, setNearNodesArray] = useState([]);
-  const previousNearNodesArray = usePrevious(nearNodesArray);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Box, { id, ref: boxRef, className: "chartBox chartContainer", 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 - (effectiveMargin.left + effectiveMargin.right) / 2;
-          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 = lines.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);
-            const elementUnderCursor = document.elementFromPoint(
-              ev.clientX,
-              ev.clientY
-            );
-            if (elementUnderCursor && elementUnderCursor.tagName === "circle") {
-              new ApiaUtil().tooltips.open({
-                children: nearNodes.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}`
-                  );
-                }),
-                attachToElement: () => elementUnderCursor,
-                attachToElementAnchorPoint: "bottomRight"
-              });
-            } else {
-              new ApiaUtil().tooltips.closeAll();
-            }
-          } 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 == null ? void 0 : styles.grid.stroke,
-              strokeOpacity: styles == null ? void 0 : styles.grid.opacity
-            }
-          ),
-          lines.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",
-                      color: "transparent"
-                    }
-                  ),
-                  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: [
-                      chart.showValues && /* @__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 : "",
-              tickLabelProps: {
-                display: chart.showAxisYTitle ? "auto" : "none"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            AxisBottom,
-            {
-              top: innerHeight - (effectiveMargin.top + effectiveMargin.bottom),
-              scale: xScale,
-              label: chart.chartType !== "pie2D" && chart.showAxisXTitle ? chart.axisXTitle : "",
-              tickLabelProps: { display: "none" },
-              tickLineProps: { display: "none" },
-              labelOffset: 10
-            }
-          )
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsx(Box, { className: "chartLegend__Wrapper", children: chart.showLegend && colorReference.length !== 0 && /* @__PURE__ */ jsxs(Box, { className: "chart__legend__wrapper", children: [
-      /* @__PURE__ */ jsx(Heading, { as: "h6", children: getLabel("mnuLeyends").text }),
-      /* @__PURE__ */ jsx(LegendContainer, { id: chartId, references: colorReference })
-    ] }) })
-  ] });
-};
-
-const WaterfallBar = ({
-  width,
-  height,
-  x,
-  y,
-  fill,
-  x1,
-  lineY,
-  x2,
-  stroke,
-  strokeDashArray,
-  textX,
-  textY,
-  textContent,
-  isLast,
-  step,
-  columnName,
-  chart
-}) => {
-  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) => {
-          new ApiaUtil().tooltips.open({
-            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 })
-            ] }),
-            attachToElement: () => ev.target,
-            attachToElementAnchorPoint: "center"
-          });
-        }
-      }
-    ),
-    !isLast && /* @__PURE__ */ jsx(
-      Line,
-      {
-        x1,
-        x2,
-        y1: lineY,
-        y2: lineY,
-        stroke,
-        strokeDasharray: strokeDashArray
-      }
-    ),
-    chart.showValues && /* @__PURE__ */ jsx("text", { textAnchor: "middle", x: textX, y: textY, children: textContent })
-  ] });
-};
-
-var __defProp$9 = Object.defineProperty;
-var __defProps$7 = Object.defineProperties;
-var __getOwnPropDescs$7 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
-var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
-var __propIsEnum$9 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$9 = (obj, key, value) => key in obj ? __defProp$9(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$9 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$9.call(b, prop))
-      __defNormalProp$9(a, prop, b[prop]);
-  if (__getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(b)) {
-      if (__propIsEnum$9.call(b, prop))
-        __defNormalProp$9(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$7 = (a, b) => __defProps$7(a, __getOwnPropDescs$7(b));
-var __objRest = (source, exclude) => {
-  var target = {};
-  for (var prop in source)
-    if (__hasOwnProp$9.call(source, prop) && exclude.indexOf(prop) < 0)
-      target[prop] = source[prop];
-  if (source != null && __getOwnPropSymbols$9)
-    for (var prop of __getOwnPropSymbols$9(source)) {
-      if (exclude.indexOf(prop) < 0 && __propIsEnum$9.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;
-  console.log({ margin });
-  const effectiveMargin = parseMargin(margin);
-  if (!chart.showAxisYTitle && effectiveMargin.left > 50) {
-    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$7(__spreadValues$9({}, 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(() => `WaterfallBars${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: [
-    /* @__PURE__ */ jsx(
-      Box,
-      {
-        id,
-        className: `${className ? className : ""} chartBox chartContainer`,
-        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,
-                  hideTicks: true,
-                  tickLabelProps: () => ({
-                    textAnchor: "end",
-                    verticalAnchor: "middle",
-                    display: chart.showAxisYTitle ? "auto" : "none"
-                  })
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                AxisBottom,
-                {
-                  scale: xScale,
-                  top: innerHeight,
-                  tickLabelProps: { display: "none" },
-                  tickLineProps: { display: "none" }
-                }
-              )
-            ] })
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsx(Box, { className: "chartLegend__Wrapper", children: !chart.hideSelector && charts.length > 1 && /* @__PURE__ */ jsxs(Box, { className: "chart__combo__wrapper", children: [
-      /* @__PURE__ */ jsx(Heading, { as: "h6", children: getLabel("lblChartSel").text }),
-      /* @__PURE__ */ jsx(
-        ChartSelector,
-        {
-          chartId,
-          pieces: chartNames,
-          className: "chartSelectorCombo",
-          current: currentPie,
-          setCurrent: setCurrentPie
-        }
-      )
-    ] }) })
-  ] });
-};
-
-var __defProp$8 = Object.defineProperty;
-var __defProps$6 = Object.defineProperties;
-var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$8 = Object.getOwnPropertySymbols;
-var __hasOwnProp$8 = Object.prototype.hasOwnProperty;
-var __propIsEnum$8 = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$8 = (obj, key, value) => key in obj ? __defProp$8(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$8 = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$8.call(b, prop))
-      __defNormalProp$8(a, prop, b[prop]);
-  if (__getOwnPropSymbols$8)
-    for (var prop of __getOwnPropSymbols$8(b)) {
-      if (__propIsEnum$8.call(b, prop))
-        __defNormalProp$8(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(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"
-        }
-      },
-      ".chartBox": () => {
-        return {
-          position: responsive({ 0: "static", 3: "sticky" }),
-          top: "0",
-          background: "white",
-          zIndex: "1"
-        };
-      },
-      ".legendContainer": {
-        display: "flex",
-        flexDirection: "column",
-        gap: spacing(2),
-        overflow: "hidden",
-        alignItems: "start",
-        button: () => ({
-          justifyContent: "start",
-          textAlign: "start",
-          width: "100%",
-          textDecoration: "none",
-          svg: {
-            paddingLeft: spacing(1)
-          }
-        })
-      },
-      ".legendItem": {
-        transition: "opacity 200ms",
-        "&.isBlurred": {
-          opacity: "0.15"
-        },
-        ".button__content": {
-          overflow: "hidden",
-          textOverflow: "ellipsis",
-          wordWrap: "normal",
-          display: "block",
-          whiteSpace: "nowrap",
-          p: spacing(1)
-        }
-      }
-    },
-    // eslint-disable-next-line react/display-name
-    React.forwardRef(
-      ({
-        currentChart,
-        chartId,
-        allowZoom,
-        id
-      }, ref) => {
-        const innerRef = React.useRef(null);
-        const setRefs = useMultipleRefs(
-          ref,
-          innerRef
-        );
-        const { id: imperativeId } = useImperativeComponentContext();
-        const contextValue = useMemo(
-          () => ({ chartId: String(imperativeId) }),
-          [imperativeId]
-        );
-        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$6(__spreadValues$8({
-            ref: setRefs,
-            className: "chart__chartRenderer"
-          }, getVariant("layout.charts")), {
-            id,
-            children: /* @__PURE__ */ jsx(
-              CurrentChart,
-              {
-                chart: currentChart,
-                chartId,
-                parentRef: innerRef,
-                allowZoom,
-                margin: currentChart.margin
-              }
-            )
-          })
-        ) });
-      }
-    ),
-    true
-  )
-});
-
-const EmptyGrid = ({ width }) => {
-  const xScale = scaleBand({
-    range: [0, width != null ? width : 400],
-    domain: ["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"],
-    padding: 0.2
-  });
-  const yScale = scaleBand({
-    range: [0, 400],
-    domain: ["0", "10", "20", "30", "40", "50", "60", "70", "80", "90", "100"],
-    padding: 0.2
-  });
-  return /* @__PURE__ */ jsxs("svg", { height: 400, width: width != null ? width : 400, children: [
-    /* @__PURE__ */ jsx(
-      Grid.Grid,
-      {
-        height: 400,
-        width: width != null ? width : 400,
-        numTicksRows: 10,
-        numTicksColumns: 10,
-        xScale,
-        yScale
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      AxisLeft,
-      {
-        scale: yScale,
-        left: 20,
-        hideTicks: true,
-        tickLabelProps: { display: "none" }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      AxisBottom,
-      {
-        scale: xScale,
-        top: 380,
-        hideTicks: true,
-        tickLabelProps: { display: "none" }
-      }
-    )
-  ] });
-};
-
-var __defProp$7 = Object.defineProperty;
-var __defProps$5 = Object.defineProperties;
-var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
-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;
-};
-var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-const START_ANGLE$5 = 90;
-const END_ANGLE$5 = 270;
-const Scale = ({
-  currentValue,
-  currentValueFontSize,
-  height,
-  maxValue,
-  minValue,
-  pointerColor,
-  scaleValuesSize,
-  valueRanges,
-  width
-}) => {
-  var _a, _b;
-  const allTicks = false;
-  const value = currentValue;
-  const diameter = Math.min(height, width);
-  const domainMax = (_a = noNaN(maxValue)) != null ? _a : valueRanges[valueRanges.length - 1];
-  const domainMin = (_b = noNaN(minValue)) != null ? _b : valueRanges[0];
-  const offset = 20;
-  const gauge = useGauge({
-    domain: [domainMin, domainMax],
-    startAngle: START_ANGLE$5,
-    endAngle: END_ANGLE$5,
-    numTicks: 10 + 1,
-    diameter
-  });
-  useGauge({
-    domain: [valueRanges[0], valueRanges[valueRanges.length - 1]],
-    startAngle: START_ANGLE$5,
-    endAngle: END_ANGLE$5,
-    numTicks: valueRanges[valueRanges.length - 1] - valueRanges[0] + 1,
-    diameter
-  });
-  const needle = gauge.getNeedleProps({
-    value: 0,
-    baseRadius: 12,
-    tipRadius: 2
-  });
-  const angle = (END_ANGLE$5 - START_ANGLE$5) * value / (domainMax - domainMin);
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
-    "svg",
-    __spreadProps$5(__spreadValues$7({}, gauge.getSVGProps()), {
-      height: Math.max(width, height),
-      width: Math.max(width, height),
-      viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter / 2 + offset * 2}`,
-      children: [
-        /* @__PURE__ */ jsx("g", { id: "arcs", children: /* @__PURE__ */ jsx(
-          "path",
-          __spreadProps$5(__spreadValues$7({}, gauge.getArcProps({
-            offset: offset - 5,
-            startAngle: 90,
-            endAngle: 270
-          })), {
-            stroke: "gray",
-            opacity: "0.2",
-            fill: "none",
-            strokeLinecap: "round",
-            strokeWidth: 5
-          })
-        ) }),
-        /* @__PURE__ */ jsxs("g", { id: "ticks", children: [
-          gauge.ticks.map((angle2) => {
-            const angleToValue = (angle3) => {
-              const angleRange = END_ANGLE$5 - START_ANGLE$5;
-              const valueRange = domainMax - domainMin;
-              const value2 = domainMin + (angle3 - START_ANGLE$5) / angleRange * valueRange;
-              return Math.round(value2);
-            };
-            const asValue = angleToValue(angle2);
-            const showText = asValue % 10 === 0;
-            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                "line",
-                __spreadValues$7({
-                  stroke: "gray",
-                  strokeWidth: showText ? 4 : 2
-                }, gauge.getTickProps({ angle: angle2, length: showText ? 12 : 3 }))
-              ),
-              showText && /* @__PURE__ */ jsx(
-                "text",
-                __spreadProps$5(__spreadValues$7({
-                  fill: "black"
-                }, gauge.getLabelProps({ angle: angle2, offset: 20 })), {
-                  style: { fontSize: `${scaleValuesSize != null ? scaleValuesSize : 30}px` },
-                  children: asValue
-                })
-              )
-            ] }, `tick-group-${angle2}`);
-          }),
-          allTicks 
-        ] }),
-        /* @__PURE__ */ jsxs("g", { id: "needle", children: [
-          /* @__PURE__ */ jsx("circle", __spreadProps$5(__spreadValues$7({ fill: pointerColor }, needle.base), { r: 20 })),
-          /* @__PURE__ */ jsx("circle", __spreadValues$7({ fill: pointerColor }, needle.base)),
-          /* @__PURE__ */ jsx(
-            "circle",
-            __spreadProps$5(__spreadValues$7({
-              fill: pointerColor,
-              opacity: "0.5"
-            }, needle.tip), {
-              style: {
-                transform: `rotate(${angle}deg)`,
-                transition: "transform 500ms"
-              }
-            })
-          ),
-          /* @__PURE__ */ jsx(
-            "polyline",
-            {
-              style: {
-                transform: `rotate(${angle}deg)`,
-                transition: "transform 500ms"
-              },
-              fill: pointerColor,
-              opacity: "0.5",
-              points: needle.points
-            }
-          ),
-          /* @__PURE__ */ jsx("circle", __spreadProps$5(__spreadValues$7({ fill: "white" }, needle.base), { r: 4 }))
-        ] }),
-        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
-          "text",
-          {
-            textAnchor: "middle",
-            style: { fontSize: `${currentValueFontSize != null ? currentValueFontSize : 30}px` },
-            y: -diameter / 4 + 20,
-            children: value
-          }
-        ) })
-      ]
-    })
-  ) });
-};
-
-var __defProp$6 = Object.defineProperty;
-var __defProps$4 = Object.defineProperties;
-var __getOwnPropDescs$4 = 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$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
-const START_ANGLE$4 = 30;
-const END_ANGLE$4 = 330;
-const SpeedMeter = ({
-  backgroundColor,
-  colorRanges,
-  currentValue,
-  currentValueColor,
-  currentValueFontSize,
-  height,
-  maxValue,
-  minValue,
-  pointerColor,
-  scaleValuesSize,
-  valueRanges,
-  width
-}) => {
-  var _a, _b;
-  const value = currentValue;
-  const diameter = Math.min(height, width);
-  const domainMax = (_a = noNaN(maxValue)) != null ? _a : valueRanges[valueRanges.length - 1];
-  const domainMin = (_b = noNaN(minValue)) != null ? _b : valueRanges[0];
-  const offset = 20;
-  const gauge = useGauge({
-    domain: [domainMin, domainMax],
-    startAngle: START_ANGLE$4,
-    endAngle: END_ANGLE$4,
-    numTicks: valueRanges[valueRanges.length - 1] / 10 + 1,
-    diameter
-  });
-  const needle = gauge.getNeedleProps({
-    value: 0,
-    baseRadius: 12,
-    tipRadius: 2
-  });
-  function getColor(value2) {
-    const index = valueRanges.findIndex((range) => value2 <= range);
-    if (index === -1) {
-      return colorRanges[0];
-    }
-    return colorRanges[index];
-  }
-  const angle = (END_ANGLE$4 - START_ANGLE$4) * value / (domainMax - domainMin);
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
-    "svg",
-    __spreadProps$4(__spreadValues$6({}, gauge.getSVGProps()), {
-      height: Math.max(width, height),
-      width: Math.max(width, height),
-      viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter + offset * 2}`,
-      children: [
-        /* @__PURE__ */ jsxs("g", { id: "arcs", children: [
-          /* @__PURE__ */ jsx(
-            "path",
-            __spreadProps$4(__spreadValues$6({}, gauge.getArcProps({
-              offset: offset - 5,
-              startAngle: 0,
-              endAngle: 360
-            })), {
-              stroke: "gray",
-              fill: backgroundColor != null ? backgroundColor : "none",
-              strokeLinecap: "round",
-              strokeWidth: 5
-            })
-          ),
-          valueRanges.map((innerValue, i) => {
-            const valueToAngle = (value2) => {
-              const angleRange = END_ANGLE$4 - START_ANGLE$4;
-              const valueRange = domainMax - domainMin;
-              const angle2 = START_ANGLE$4 + (value2 - domainMin) / valueRange * angleRange;
-              return Math.round(angle2);
-            };
-            return /* @__PURE__ */ jsxs("g", { children: [
-              /* @__PURE__ */ jsx(
-                "path",
-                __spreadProps$4(__spreadValues$6({}, gauge.getArcProps({
-                  offset: -50,
-                  startAngle: i === 0 ? START_ANGLE$4 : valueToAngle(innerValue),
-                  endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE$4 : valueToAngle(valueRanges[i + 1])
-                })), {
-                  stroke: getColor(innerValue),
-                  opacity: "0.8",
-                  fill: "none",
-                  strokeLinecap: "round",
-                  strokeWidth: 2
-                })
-              ),
-              /* @__PURE__ */ createElement(
-                "path",
-                __spreadProps$4(__spreadValues$6({}, gauge.getArcProps({
-                  offset: -55,
-                  startAngle: i === 0 ? START_ANGLE$4 : valueToAngle(innerValue),
-                  endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE$4 : valueToAngle(valueRanges[i + 1])
-                })), {
-                  key: `${innerValue}_${i}`,
-                  stroke: getColor(innerValue),
-                  opacity: "0.8",
-                  fill: "none",
-                  strokeLinecap: "round",
-                  strokeWidth: 2
-                })
-              )
-            ] }, `${innerValue}_${i}`);
-          })
-        ] }),
-        /* @__PURE__ */ jsx("g", { id: "ticks", children: gauge.ticks.map((angle2) => {
-          const angleToValue = (angle3) => {
-            const angleRange = END_ANGLE$4 - START_ANGLE$4;
-            const valueRange = domainMax - domainMin;
-            const value2 = domainMin + (angle3 - START_ANGLE$4) / angleRange * valueRange;
-            return Math.round(value2);
-          };
-          const asValue = angleToValue(angle2);
-          const showText = asValue % 10 === 0;
-          return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-            /* @__PURE__ */ jsx(
-              "line",
-              __spreadValues$6({
-                stroke: "gray",
-                strokeWidth: showText ? 4 : 2
-              }, gauge.getTickProps({ angle: angle2, length: showText ? 12 : 3 }))
-            ),
-            showText && /* @__PURE__ */ jsx(
-              "text",
-              __spreadProps$4(__spreadValues$6({
-                fill: "black"
-              }, gauge.getLabelProps({ angle: angle2, offset: 20 })), {
-                style: { fontSize: `${scaleValuesSize != null ? scaleValuesSize : 30}px` },
-                children: asValue
-              })
-            )
-          ] }, `tick-group-${angle2}`);
-        }) }),
-        /* @__PURE__ */ jsxs("g", { id: "needle", children: [
-          /* @__PURE__ */ jsx("circle", __spreadProps$4(__spreadValues$6({ fill: pointerColor }, needle.base), { r: 20 })),
-          /* @__PURE__ */ jsx("circle", __spreadValues$6({ fill: pointerColor }, needle.base)),
-          /* @__PURE__ */ jsx(
-            "circle",
-            __spreadProps$4(__spreadValues$6({
-              fill: pointerColor,
-              opacity: "0.5"
-            }, needle.tip), {
-              style: {
-                transform: `rotate(${angle}deg)`,
-                transition: "transform 500ms"
-              }
-            })
-          ),
-          /* @__PURE__ */ jsx(
-            "polyline",
-            {
-              style: {
-                transform: `rotate(${angle}deg)`,
-                transition: "transform 500ms"
-              },
-              fill: pointerColor,
-              opacity: "0.5",
-              points: needle.points
-            }
-          ),
-          /* @__PURE__ */ jsx("circle", __spreadProps$4(__spreadValues$6({ fill: "white" }, needle.base), { r: 4 }))
-        ] }),
-        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
-          "text",
-          {
-            textAnchor: "middle",
-            y: diameter / 2,
-            fill: currentValueColor,
-            style: { fontSize: `${currentValueFontSize != null ? currentValueFontSize : 30}px` },
-            children: value
-          }
-        ) })
-      ]
-    })
-  ) });
-};
-
-var __defProp$5 = Object.defineProperty;
-var __defProps$3 = Object.defineProperties;
-var __getOwnPropDescs$3 = 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$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
-const START_ANGLE$3 = 0;
-const END_ANGLE$3 = 360;
-const TLight = ({
-  addBorder = false,
-  colorRanges,
-  maxValue,
-  minValue,
-  currentValue,
-  height,
-  valueRanges,
-  width,
-  currentValueColor,
-  currentValueFontSize
-}) => {
-  var _a, _b;
-  const [value, setValue] = useState(currentValue);
-  const diameter = Math.min(height, width);
-  const domainMax = (_a = noNaN(maxValue)) != null ? _a : valueRanges[valueRanges.length - 1];
-  const domainMin = (_b = noNaN(minValue)) != null ? _b : valueRanges[0];
-  const gauge = useGauge({
-    domain: [domainMin, domainMax],
-    startAngle: START_ANGLE$3,
-    endAngle: END_ANGLE$3,
-    numTicks: 0,
-    diameter
-  });
-  function getColor(value2) {
-    var _a2;
-    const index = valueRanges.findIndex((range) => value2 < range);
-    if (index === -1) {
-      return colorRanges[0];
-    }
-    return (_a2 = colorRanges[index - 1]) != null ? _a2 : colorRanges[index];
-  }
-  const hasRendered = useRef(false);
-  const onRenderSvg = useCallback(
-    (el) => {
-      if (!el || hasRendered.current)
-        return;
-      hasRendered.current = true;
-      const svgElement = el;
-      const pathElement = el.querySelector("#TLight_arcs");
-      if (!(svgElement && pathElement)) {
-        return;
-      }
-      const pathBox = pathElement.getBoundingClientRect();
-      const svgBox = svgElement.getBoundingClientRect();
-      const pathX = pathBox.x - svgBox.x;
-      const pathY = pathBox.y - svgBox.y;
-      const viewBox = `${pathX - diameter / 2} ${pathY - diameter / 2} ${diameter} ${diameter}`;
-      svgElement.setAttribute("viewBox", viewBox);
-      svgElement.style.visibility = "visible";
-    },
-    [diameter]
-  );
-  const lastCurrentValue = useRef(0);
-  useEffect(() => {
-    const difference = currentValue - lastCurrentValue.current;
-    return animate(
-      500,
-      (progress) => {
-        const step = addBoundary(
-          difference * progress + lastCurrentValue.current,
-          domainMin,
-          domainMax
-        );
-        setValue(Math.round(step));
-      },
-      () => {
-        lastCurrentValue.current = currentValue;
-      }
-    );
-  }, [currentValue]);
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
-    "svg",
-    __spreadProps$3(__spreadValues$5({}, gauge.getSVGProps()), {
-      style: { visibility: "hidden" },
-      height: Math.max(width, height),
-      width: Math.max(width, height),
-      id: "TLight_svg",
-      ref: onRenderSvg,
-      viewBox: `-${diameter / 2} -${diameter / 2} ${diameter} ${diameter}`,
-      children: [
-        /* @__PURE__ */ jsxs("g", { id: "TLight_arcs", children: [
-          /* @__PURE__ */ jsx(
-            "path",
-            __spreadProps$3(__spreadValues$5({}, gauge.getArcProps({
-              startAngle: START_ANGLE$3,
-              endAngle: END_ANGLE$3
-            })), {
-              fill: getColor(value),
-              id: "TLight_path",
-              style: { transition: "fill 0.3s" }
-            })
-          ),
-          addBorder && /* @__PURE__ */ jsx(
-            "path",
-            __spreadProps$3(__spreadValues$5({}, gauge.getArcProps({
-              offset: -2.5,
-              startAngle: START_ANGLE$3,
-              endAngle: END_ANGLE$3
-            })), {
-              stroke: "black",
-              fill: "transparent",
-              strokeLinecap: "round",
-              strokeWidth: 5,
-              id: "TLight_path"
-            })
-          )
-        ] }),
-        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
-          "text",
-          {
-            textAnchor: "middle",
-            style: { fontSize: `${currentValueFontSize != null ? currentValueFontSize : 100}pt` },
-            alignmentBaseline: "central",
-            fill: currentValueColor,
-            children: value
-          }
-        ) })
-      ]
-    })
-  ) });
-};
-
-var __defProp$4 = Object.defineProperty;
-var __defProps$2 = Object.defineProperties;
-var __getOwnPropDescs$2 = 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$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
-const START_ANGLE$2 = 45;
-const END_ANGLE$2 = 315;
-const Oxford = ({
-  backgroundColor,
-  colorRanges,
-  currentValue,
-  currentValueColor,
-  currentValueFontSize,
-  height,
-  maxValue,
-  minValue,
-  pointerColor,
-  scaleValuesSize,
-  valueRanges,
-  width
-}) => {
-  var _a, _b;
-  const value = currentValue;
-  const diameter = Math.min(height, width);
-  const domainMax = (_a = noNaN(maxValue)) != null ? _a : valueRanges[valueRanges.length - 1];
-  const domainMin = (_b = noNaN(minValue)) != null ? _b : valueRanges[0];
-  const offset = 20;
-  const gauge = useGauge({
-    domain: [domainMin, domainMax],
-    startAngle: START_ANGLE$2,
-    endAngle: END_ANGLE$2,
-    numTicks: 10 + 1,
-    diameter
-  });
-  const gauge2 = useGauge({
-    domain: [valueRanges[0], valueRanges[valueRanges.length - 1]],
-    startAngle: START_ANGLE$2,
-    endAngle: END_ANGLE$2,
-    numTicks: valueRanges[valueRanges.length - 1] - valueRanges[0] + 1,
-    diameter
-  });
-  const needle = gauge.getNeedleProps({
-    value: 0,
-    baseRadius: 12,
-    tipRadius: 2
-  });
-  const angle = (END_ANGLE$2 - START_ANGLE$2) * value / (domainMax - domainMin);
-  function getColor(value2) {
-    const index = valueRanges.findIndex((range) => value2 <= range);
-    if (index === -1) {
-      return colorRanges[0];
-    }
-    return colorRanges[index];
-  }
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
-    "svg",
-    __spreadProps$2(__spreadValues$4({}, gauge.getSVGProps()), {
-      height: Math.max(width, height),
-      width: Math.max(width, height),
-      viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter + offset * 2}`,
-      children: [
-        /* @__PURE__ */ jsxs("g", { id: "arcs", children: [
-          /* @__PURE__ */ jsx(
-            "path",
-            __spreadProps$2(__spreadValues$4({}, gauge.getArcProps({
-              offset: offset - 5,
-              startAngle: 0,
-              endAngle: 360
-            })), {
-              stroke: "black",
-              opacity: "1",
-              fill: backgroundColor !== "" && backgroundColor !== void 0 ? tinycolor(backgroundColor).setAlpha(0.5).toPercentageRgbString() : "none",
-              strokeLinecap: "round",
-              strokeWidth: 5,
-              vectorEffect: "non-scaling-stroke"
-            })
-          ),
-          valueRanges.map((innerValue, i) => {
-            if (!valueRanges[i + 1]) {
-              return null;
-            }
-            const valueToAngle = (value2) => {
-              const angleRange = END_ANGLE$2 - START_ANGLE$2;
-              const valueRange = domainMax - domainMin;
-              const angle2 = START_ANGLE$2 + (value2 - domainMin) / valueRange * angleRange;
-              return Math.round(angle2);
-            };
-            return /* @__PURE__ */ jsxs("g", { children: [
-              /* @__PURE__ */ jsx(
-                "path",
-                __spreadProps$2(__spreadValues$4({}, gauge.getArcProps({
-                  offset: offset - 5,
-                  startAngle: i === 0 ? START_ANGLE$2 : valueToAngle(innerValue),
-                  endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE$2 : valueToAngle(valueRanges[i + 1])
-                })), {
-                  stroke: "black",
-                  opacity: "0.8",
-                  fill: "none",
-                  strokeLinecap: "square",
-                  strokeWidth: 5,
-                  vectorEffect: "non-scaling-stroke"
-                })
-              ),
-              /* @__PURE__ */ jsx(
-                "path",
-                __spreadProps$2(__spreadValues$4({}, gauge.getArcProps({
-                  offset: -20,
-                  startAngle: i === 0 ? START_ANGLE$2 : valueToAngle(innerValue),
-                  endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE$2 : valueToAngle(valueRanges[i + 1])
-                })), {
-                  stroke: getColor(innerValue),
-                  opacity: "0.1",
-                  fill: "none",
-                  strokeLinecap: "butt",
-                  strokeWidth: 75,
-                  vectorEffect: "non-scaling-stroke"
-                })
-              ),
-              /* @__PURE__ */ createElement(
-                "path",
-                __spreadProps$2(__spreadValues$4({}, gauge.getArcProps({
-                  offset: -55,
-                  startAngle: i === 0 ? START_ANGLE$2 : valueToAngle(innerValue),
-                  endAngle: i === 0 ? valueToAngle(valueRanges[1]) : i === valueRanges.length - 1 ? END_ANGLE$2 : valueToAngle(valueRanges[i + 1])
-                })), {
-                  key: `${innerValue}_${i}`,
-                  stroke: getColor(innerValue) || "#999",
-                  opacity: "0.8",
-                  fill: "none",
-                  strokeLinecap: "butt",
-                  strokeWidth: 10,
-                  vectorEffect: "non-scaling-stroke"
-                })
-              )
-            ] }, `${innerValue}_${i}`);
-          })
-        ] }),
-        /* @__PURE__ */ jsxs("g", { id: "ticks", children: [
-          gauge.ticks.map((angle2, i) => {
-            const angleToValue = (angle3) => {
-              const angleRange = END_ANGLE$2 - START_ANGLE$2;
-              const valueRange = domainMax - domainMin;
-              const value2 = domainMin + (angle3 - START_ANGLE$2) / angleRange * valueRange;
-              return Math.round(value2);
-            };
-            const asValue = angleToValue(angle2);
-            const showText = asValue % 10 === 0;
-            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                "line",
-                __spreadProps$2(__spreadValues$4({
-                  stroke: "gray",
-                  strokeWidth: showText ? 4 : 2
-                }, gauge.getTickProps({ angle: angle2, length: showText ? 12 : 3 })), {
-                  vectorEffect: "non-scaling-stroke"
-                })
-              ),
-              showText && /* @__PURE__ */ jsx(
-                "text",
-                __spreadProps$2(__spreadValues$4({
-                  fill: "black"
-                }, gauge.getLabelProps({
-                  angle: angle2,
-                  offset: 20
-                })), {
-                  style: {
-                    fontSize: `${scaleValuesSize != null ? scaleValuesSize : 30}px`
-                  },
-                  children: asValue
-                })
-              )
-            ] }, `tick-group-${angle2}_ ${i}`);
-          }),
-          gauge2.ticks.map((angle2, i) => {
-            return /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsx(
-              "line",
-              __spreadProps$2(__spreadValues$4({
-                stroke: "gray",
-                strokeWidth: 2
-              }, gauge.getTickProps({
-                angle: angle2,
-                length: 3
-              })), {
-                vectorEffect: "non-scaling-stroke"
-              })
-            ) }, `tick-group-${angle2}_ ${i}_2`);
-          })
-        ] }),
-        /* @__PURE__ */ jsxs("g", { id: "needle", children: [
-          /* @__PURE__ */ jsx("circle", __spreadProps$2(__spreadValues$4({ fill: pointerColor }, needle.base), { r: 20 })),
-          /* @__PURE__ */ jsx("circle", __spreadValues$4({ fill: pointerColor }, needle.base)),
-          /* @__PURE__ */ jsx(
-            "circle",
-            __spreadProps$2(__spreadValues$4({
-              fill: pointerColor,
-              opacity: "0.5"
-            }, needle.tip), {
-              style: {
-                transform: `rotate(${angle}deg)`,
-                transition: "transform 500ms"
-              }
-            })
-          ),
-          /* @__PURE__ */ jsx(
-            "polyline",
-            {
-              style: {
-                transform: `rotate(${angle}deg)`,
-                transition: "transform 500ms"
-              },
-              fill: pointerColor,
-              opacity: "0.5",
-              points: needle.points
-            }
-          ),
-          /* @__PURE__ */ jsx("circle", __spreadProps$2(__spreadValues$4({ fill: "white" }, needle.base), { r: 4 }))
-        ] }),
-        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
-          "text",
-          {
-            textAnchor: "middle",
-            alignmentBaseline: "text-before-edge",
-            y: diameter / 5,
-            style: { fontSize: `${currentValueFontSize != null ? currentValueFontSize : 30}px` },
-            fill: currentValueColor,
-            children: value
-          }
-        ) })
-      ]
-    })
-  ) });
-};
-
-var __defProp$3 = Object.defineProperty;
-var __defProps$1 = Object.defineProperties;
-var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
-var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
-var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
-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$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
-const START_ANGLE$1 = 0;
-const END_ANGLE$1 = 360;
-const Counter = ({
-  addBorder = false,
-  colorRanges,
-  currentValue,
-  valueRanges,
-  maxValue,
-  minValue,
-  currentValueFontSize,
-  panelId
-}) => {
-  var _a, _b;
-  const [value, setValue] = useState(currentValue != null ? currentValue : 0);
-  const actualWidth = (currentValueFontSize != null ? currentValueFontSize : 80) * 3 * 0.8;
-  const diameter = actualWidth;
-  const domainMax = (_a = noNaN(maxValue)) != null ? _a : valueRanges[valueRanges.length - 1];
-  const domainMin = (_b = noNaN(minValue)) != null ? _b : valueRanges[0];
-  const gauge = useGauge({
-    domain: [domainMin, domainMax],
-    startAngle: START_ANGLE$1,
-    endAngle: END_ANGLE$1,
-    numTicks: 0,
-    diameter
-  });
-  function getColor(value2) {
-    var _a2;
-    const index = valueRanges.findIndex((range) => value2 <= range);
-    if (index === -1) {
-      return colorRanges[0];
-    }
-    return (_a2 = colorRanges[index - 1]) != null ? _a2 : colorRanges[index];
-  }
-  const lastCurrentValue = useRef(0);
-  useEffect(() => {
-    const difference = currentValue - lastCurrentValue.current;
-    return animate(
-      500,
-      (progress) => {
-        const step = addBoundary(
-          difference * progress + lastCurrentValue.current,
-          domainMin,
-          domainMax
-        );
-        setValue(Math.round(step));
-      },
-      () => {
-        lastCurrentValue.current = currentValue;
-      }
-    );
-  }, [currentValue]);
-  return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, className: "widgetContainer__Counter", children: [
-    /* @__PURE__ */ jsx(
-      "svg",
-      __spreadProps$1(__spreadValues$3({}, gauge.getSVGProps()), {
-        height: actualWidth,
-        width: actualWidth,
-        viewBox: void 0,
-        children: /* @__PURE__ */ jsx("g", { id: "arcs", children: addBorder && `${value}`.length < 4 && /* @__PURE__ */ jsx(
-          "ellipse",
-          {
-            cx: actualWidth / 2,
-            cy: actualWidth / 2,
-            rx: actualWidth / 2 - 5,
-            ry: actualWidth / 2 - 5,
-            stroke: "gray",
-            opacity: "0.2",
-            fill: "none",
-            strokeLinecap: "round",
-            strokeWidth: 2
-          }
-        ) })
-      })
-    ),
-    /* @__PURE__ */ jsx(
-      "svg",
-      {
-        height: actualWidth,
-        width: actualWidth,
-        style: { position: "absolute", left: 0, top: 0 },
-        children: /* @__PURE__ */ jsx(
-          "text",
-          {
-            x: actualWidth / 2,
-            y: actualWidth / 2 - 5,
-            textAnchor: "middle",
-            style: {
-              fontSize: `${currentValueFontSize != null ? currentValueFontSize : 80}px`,
-              transition: "fill 0.5s"
-            },
-            alignmentBaseline: "central",
-            fill: getColor(value),
-            id: `text_${panelId}`,
-            children: value
-          }
-        )
-      }
-    )
-  ] });
-};
-
-var __defProp$2 = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = 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 = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const START_ANGLE = 0;
-const END_ANGLE = 360;
-const Ring = ({
-  colorRanges,
-  maxValue,
-  minValue,
-  currentValue,
-  height,
-  valueRanges,
-  ringEmptyColor,
-  ringWidth,
-  width,
-  currentValueColor,
-  currentValueFontSize
-}) => {
-  var _a, _b, _c, _d, _e, _f;
-  const [value, setValue] = useState(currentValue);
-  const diameter = Math.min(height, width);
-  const offset = 20;
-  const domainMax = (_a = noNaN(maxValue)) != null ? _a : valueRanges[valueRanges.length - 1];
-  const domainMin = (_b = noNaN(minValue)) != null ? _b : valueRanges[0];
-  const gauge = useGauge({
-    domain: [domainMin, domainMax],
-    startAngle: START_ANGLE,
-    endAngle: END_ANGLE,
-    numTicks: 0,
-    diameter
-  });
-  const lastCurrentValue = useRef(0);
-  useEffect(() => {
-    const difference = currentValue - lastCurrentValue.current;
-    return animate(
-      500,
-      (progress) => {
-        const step = addBoundary(
-          difference * progress + lastCurrentValue.current,
-          domainMin,
-          domainMax
-        );
-        setValue(Math.round(step));
-      },
-      () => {
-        lastCurrentValue.current = currentValue;
-      }
-    );
-  }, [currentValue]);
-  function getColor(value2) {
-    var _a2;
-    const index = valueRanges.findIndex((range) => value2 <= range);
-    if (index === -1) {
-      return colorRanges[0];
-    }
-    return (_a2 = colorRanges[index - 1]) != null ? _a2 : colorRanges[index];
-  }
-  const valueToAngle = (value2) => {
-    const angleRange = 360;
-    const valueRange = domainMax - domainMin;
-    const angle = (value2 - domainMin) / valueRange * angleRange;
-    return Math.round(angle);
-  };
-  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs(
-    "svg",
-    __spreadProps(__spreadValues$2({}, gauge.getSVGProps()), {
-      height: Math.max(width, height),
-      width: Math.max(width, height),
-      viewBox: `-${diameter / 2 + offset} -${diameter / 2 + offset} ${diameter + offset * 2} ${diameter + offset * 2}`,
-      children: [
-        /* @__PURE__ */ jsxs("g", { id: "arcs", children: [
-          /* @__PURE__ */ jsx(
-            "path",
-            __spreadProps(__spreadValues$2({}, gauge.getArcProps({
-              offset: offset - ((_c = noNaN(ringWidth)) != null ? _c : 0) * 100,
-              startAngle: START_ANGLE,
-              endAngle: END_ANGLE
-            })), {
-              stroke: ringEmptyColor != null ? ringEmptyColor : "transparent",
-              fill: "none",
-              strokeLinecap: "round",
-              strokeWidth: ((_d = noNaN(ringWidth)) != null ? _d : 0) * 100
-            })
-          ),
-          /* @__PURE__ */ jsx(
-            "path",
-            __spreadProps(__spreadValues$2({}, gauge.getArcProps({
-              offset: offset - ((_e = noNaN(ringWidth)) != null ? _e : 0) * 100,
-              startAngle: 180,
-              endAngle: valueToAngle(value) === 360 ? 179 + valueToAngle(value) : 180 + valueToAngle(value)
-            })), {
-              stroke: getColor(value),
-              opacity: "0.8",
-              fill: "none",
-              strokeLinecap: "square",
-              strokeWidth: ((_f = noNaN(ringWidth)) != null ? _f : 0) * 100,
-              style: {
-                transition: "stroke 0.5s"
-              }
-            })
-          )
-        ] }),
-        /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
-          "text",
-          {
-            textAnchor: "middle",
-            style: { fontSize: `${currentValueFontSize != null ? currentValueFontSize : 30}px` },
-            alignmentBaseline: "central",
-            color: currentValueColor,
-            children: value
-          }
-        ) })
-      ]
-    })
-  ) });
-};
-
-const colorGetter = (valueRanges, colorRanges, innerValue) => {
-  let color = "";
-  valueRanges.forEach((value, index) => {
-    if (value >= innerValue && valueRanges[index - 1] <= innerValue) {
-      color = colorRanges[index - 1];
-    }
-  });
-  return color;
-};
-function getColor(valueRanges, colorRanges, value) {
-  const index = valueRanges.findIndex((range) => value <= range);
-  if (index === -1) {
-    return colorRanges[0];
-  }
-  return colorRanges[index];
-}
-function getInnerColor(valueRanges, colorRanges, value) {
-  var _a;
-  const index = valueRanges.findIndex((range) => value < range);
-  if (index === -1) {
-    return colorRanges[0];
-  }
-  return (_a = colorRanges[index - 1]) != null ? _a : colorRanges[index];
-}
-const valueToTickPercent = (domainMax, baseValue, value) => {
-  const range = domainMax - (baseValue != null ? baseValue : 0);
-  const percentage = 100 - (value - (baseValue != null ? baseValue : 0)) / range * 100;
-  return Math.round(percentage);
-};
-
-const valueToPercent = (domainMax, baseValue, value) => {
-  const range = domainMax - (baseValue != null ? baseValue : 0);
-  const percentage = 100 - (value - (baseValue != null ? baseValue : 0)) / range * 100;
-  const test = percentage * 69 / 100;
-  return Math.round(test);
-};
-
-const useCustomWidget = ({
-  maxValue,
-  minValue,
-  currentValue,
-  panelId
-}) => {
-  const baseValue = minValue;
-  const domainMax = maxValue;
-  const [yDifference, setYDifference] = useState(0);
-  const svgRect = useRef({});
-  const pathRect = useRef({});
-  const onRenderRect = useCallback(
-    (el) => {
-      if (!el)
-        return;
-      const svgElement = el.closest("svg");
-      const pathElement = svgElement == null ? void 0 : svgElement.querySelector(`#path_${panelId}`);
-      if (!svgElement)
-        throw new Error("No svg");
-      if (!pathElement)
-        throw new Error("No path");
-      const svgBox = svgElement.getBoundingClientRect();
-      const pathBox = pathElement.getBoundingClientRect();
-      const pathY2 = pathBox.y - svgBox.y;
-      svgRect.current = svgBox;
-      pathRect.current = pathBox;
-      setYDifference(pathY2);
-    },
-    [panelId]
-  );
-  const pathX = noNaN(pathRect.current.x - svgRect.current.x);
-  const pathY = noNaN(pathRect.current.y - svgRect.current.y);
-  const pathWidth = noNaN(pathRect.current.width);
-  const pathHeight = noNaN(pathRect.current.height);
-  const viewBox = `${pathX} ${pathY} ${pathWidth} ${pathHeight}`;
-  const rectProps = {
-    y: noNaN(
-      valueToPercent(domainMax, baseValue, currentValue) * pathHeight / 100 + yDifference
-    ),
-    x: pathX,
-    width: pathWidth,
-    height: pathHeight,
-    style: {
-      visibility: "visible",
-      transition: "y 0.5s, fill 0.5s"
-    }
-  };
-  return {
-    rectRef: onRenderRect,
-    svgViewBox: viewBox,
-    rectProps,
-    pathX,
-    pathY,
-    pathRect,
-    svgRect
-  };
-};
-
-var __defProp$1 = Object.defineProperty;
-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;
-};
-const Thermometer = ({
-  colorRanges,
-  maxValue,
-  minValue,
-  currentValue,
-  height,
-  valueRanges,
-  width,
-  panelId,
-  currentValueFontSize
-}) => {
-  var _a, _b, _c;
-  const value = currentValue;
-  const baseValue = (_a = noNaN(minValue)) != null ? _a : valueRanges[0];
-  const domainMax = (_b = noNaN(maxValue)) != null ? _b : valueRanges[valueRanges.length - 1];
-  const pathDValue = `m 179.6875,717.73633 c -0.45013,0 -0.8125,0.36237 -0.8125,0.8125 l 0,8.46289 a 2.3125,2.3125 0 0 0 -1.5,2.16211 2.3125,2.3125 0 0 0 2.3125,2.3125 2.3125,2.3125 0 0 0 2.3125,-2.3125 2.3125,2.3125 0 0 0 -1.5,-2.16211 l 0,-8.46289 c 0,-0.45013 -0.36237,-0.8125 -0.8125,-0.8125 z`;
-  const { rectProps, rectRef, svgViewBox, pathX, pathY } = useCustomWidget({
-    currentValue: value,
-    maxValue: domainMax,
-    minValue: baseValue,
-    panelId
-  });
-  const boxValues = {
-    height: noNaN(Math.max(width, height) - Math.max(width, height) * 0.31),
-    width: noNaN(Math.max(width, height)),
-    x: pathX,
-    y: pathY
-  };
-  const tickArray = valueRanges.map((val, i) => {
-    return {
-      height: boxValues.height * (valueToTickPercent(domainMax, baseValue, val) / 100),
-      color: !valueRanges[i + 1] ? "black" : colorGetter(valueRanges, colorRanges, val),
-      value: val
-    };
-  });
-  return /* @__PURE__ */ jsxs(Box, { sx: { position: "relative" }, children: [
-    /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        height: Math.max(width, height),
-        width: Math.max(width, height),
-        id: `svg_${panelId}`,
-        viewBox: svgViewBox,
-        style: { position: "relative", top: "10px" },
-        children: [
-          /* @__PURE__ */ jsx("clipPath", { id: "clipPath", children: /* @__PURE__ */ jsx("path", { d: pathDValue }) }),
-          /* @__PURE__ */ jsx("mask", { id: "myMask", children: /* @__PURE__ */ jsx("path", { d: pathDValue, id: "maskPath", fill: "white" }) }),
-          /* @__PURE__ */ jsx("path", { d: pathDValue, id: `path_${panelId}`, fill: "white" }),
-          /* @__PURE__ */ jsx(
-            "rect",
-            __spreadValues$1({
-              fill: getInnerColor(valueRanges, colorRanges, value),
-              id: `rect_${panelId}`,
-              mask: "url(#myMask)",
-              ref: rectRef
-            }, rectProps)
-          ),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              d: pathDValue,
-              id: "path",
-              fill: "none",
-              stroke: "white",
-              strokeWidth: 10,
-              clipPath: "url(#clipPath)",
-              vectorEffect: "non-scaling-stroke"
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "path",
-            {
-              clipPath: "url(#clipPath)",
-              d: pathDValue,
-              id: "path",
-              fill: "none",
-              stroke: "black",
-              strokeWidth: 5,
-              vectorEffect: "non-scaling-stroke"
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "svg",
-      {
-        height: Math.max(width, height) + 10,
-        width: Math.max(width, height),
-        style: { position: "absolute", left: 0, top: 0 },
-        children: [
-          boxValues.x && /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
-            "text",
-            {
-              x: Math.max(width, height) / 2,
-              y: Math.max(width, height) - Math.max(width, height) / 6 + 10,
-              style: {
-                fontSize: `${(_c = noNaN(currentValueFontSize)) != null ? _c : 50}px`
-              },
-              textAnchor: "middle",
-              alignmentBaseline: "central",
-              vectorEffect: "non-scaling-stroke",
-              children: value
-            }
-          ) }),
-          tickArray.map((tick, i) => {
-            return /* @__PURE__ */ jsxs("g", { children: [
-              /* @__PURE__ */ jsx(
-                "rect",
-                {
-                  x: i === 0 ? Math.max(width, height) / 2 + 30 : Math.max(width, height) / 2 + 20,
-                  y: tick.height + 10,
-                  width: "15px",
-                  height: "3px",
-                  vectorEffect: "non-scaling-stroke",
-                  fill: getColor(valueRanges, colorRanges, tick.value)
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "text",
-                {
-                  x: i === 0 ? Math.max(width, height) - Math.max(width, height) / 3 + 10 : Math.max(width, height) - Math.max(width, height) / 3,
-                  y: tickArray[i + 1] ? tick.height + 16 : tick.height + 1.5,
-                  textAnchor: "middle",
-                  alignmentBaseline: tickArray[i + 1] ? "auto" : "text-before-edge",
-                  children: tick.value
-                }
-              )
-            ] }, i);
-          })
-        ]
-      }
-    )
-  ] });
-};
-
-var __defProp = Object.defineProperty;
-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;
-};
-const WidgetContainer = ({
-  data,
-  id
-}) => {
-  const realData = __spreadValues({}, data);
-  const valueRanges = Array.from(
-    new Set(
-      arrayOrArray(realData.zones.Zone).map((zone) => {
-        return [Number(zone.minimum), Number(zone.maximum)];
-      }).flat().sort((a, b) => a - b)
-    )
-  );
-  const colorRanges = arrayOrArray(realData.zones.Zone).map((zone) => {
-    return tinycolor(zone.color).setAlpha(1 - (255 - zone.transparency) / 255).toPercentageRgbString();
-  }).flat();
-  const CurrentWidget = getIndex(
-    [SpeedMeter, Oxford, Counter, TLight, Thermometer, Scale, Ring],
-    [
-      realData.widKpiType === "1",
-      realData.widKpiType === "2",
-      realData.widKpiType === "3",
-      realData.widKpiType === "4",
-      realData.widKpiType === "5",
-      realData.widKpiType === "6",
-      realData.widKpiType === "7"
-    ],
-    0
-  );
-  return /* @__PURE__ */ jsx(
-    CurrentWidget,
-    {
-      addBorder: realData.border,
-      backgroundColor: realData.backgroundColor,
-      colorRanges,
-      currentValue: Number(realData.currentValue),
-      decimals: realData.valueDecimals,
-      currentValueColor: realData.valueColor,
-      currentValueFontSize: realData.valueFontSize,
-      forceProp: realData.forceProp,
-      height: realData.height,
-      panelId: id,
-      maxValue: realData.maxValue,
-      minValue: realData.minValue,
-      pointerColor: realData.pointerColor,
-      ringEmptyColor: realData.noValueColor,
-      ringWidth: realData.ringAnchor,
-      scaleValuesSize: realData.scaleFontSize,
-      valueRanges,
-      width: realData.width
-    }
-  );
-};
-
-export { ChartRenderer, EmptyGrid, WidgetContainer };
+export { ChartRenderer } from './charts/ChartRenderer.js';
+export { EmptyGrid } from './charts/util/EmptyGrid.js';
+export { WidgetContainer } from './widgets/WidgetContainer.js';
+//# sourceMappingURL=index.js.map