@apia/charts 0.1.0

package/dist/index.js

@@ -0,0 +1,2475 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { createContext, useContext, useState, useMemo, useLayoutEffect, useEffect, useRef } from 'react';
+import { Box, Select } from 'theme-ui';
+import { ThemeProviderContext, spacing, makeStyledComponent, getVariant } from '@apia/theme';
+import { uniqueId } from 'lodash';
+import { makeImperativeComponent, arrayOrArray, useImperativeComponentEvents, getValueByPath, usePanAndZoom, usePrevious, getIndex } from '@apia/util';
+import { scaleBand, scaleLog, scaleLinear, scaleOrdinal } from '@visx/scale';
+import { Grid } from '@visx/visx';
+import { Group } from '@visx/group';
+import { BarGroupHorizontal, BarGroup, LinePath, Line } from '@visx/shape';
+import { AxisLeft, AxisBottom } from '@visx/axis';
+import { usePanelParametersSelector } from '@apia/dashboard';
+import tinycolor from 'tinycolor2';
+import { localPoint } from '@visx/event';
+import { SimpleButton, useTooltip } from '@apia/components';
+import { icons } from '@apia/icons';
+import Pie from '@visx/shape/lib/shapes/Pie';
+import { min, max, extent } from 'd3-array';
+import * as allCurves from '@visx/curve';
+import { Fragment as Fragment$1 } from 'theme-ui/jsx-runtime';
+import { GridRows } from '@visx/grid';
+import { useGauge } from 'use-gauge';
+
+function parseMargin(margin = {
+  left: 100,
+  right: 50,
+  top: 50,
+  bottom: 70
+}) {
+  return typeof margin === "number" ? { left: margin, right: margin, top: margin, bottom: margin } : margin;
+}
+
+const ChartContext = createContext({});
+
+const LegendItem = ({
+  groupId,
+  title,
+  color,
+  className,
+  isHighlighted,
+  isAnyHighlighted,
+  avoidEvent
+}) => {
+  const { chartId } = useContext(ChartContext);
+  return /* @__PURE__ */ jsx(
+    SimpleButton,
+    {
+      variant: "icon-outline",
+      className: `${className != null ? className : ""} ${isHighlighted ? "highlight" : ""}`,
+      iconColor: color || "black",
+      icon: color === "transparent" ? void 0 : icons.SquareFilled,
+      sx: {
+        opacity: isAnyHighlighted && !isHighlighted ? "0.15" : "1"
+      },
+      onMouseEnter: () => {
+        if (avoidEvent) {
+          return;
+        }
+        chartMethods(chartId, "highlight", groupId);
+      },
+      onMouseLeave: () => {
+        if (avoidEvent) {
+          return;
+        }
+        chartMethods(chartId, "highlight", "");
+      },
+      children: title
+    }
+  );
+};
+
+const [legendContainerMethods, , LegendContainer] = makeImperativeComponent()({
+  initialState: {
+    highlightedBarGroup: ""
+  },
+  methods: {
+    highlight(setState, highlightedBarGroup) {
+      setState({ highlightedBarGroup });
+    }
+  },
+  Component: ({
+    references,
+    containerClassName,
+    highlightedBarGroup,
+    avoidEvent
+  }) => {
+    return /* @__PURE__ */ jsx(Box, { className: containerClassName, children: references.map((data) => {
+      return /* @__PURE__ */ jsx(
+        LegendItem,
+        {
+          isHighlighted: data.title === highlightedBarGroup,
+          isAnyHighlighted: highlightedBarGroup !== "",
+          groupId: data.title,
+          color: data.color,
+          title: data.title,
+          avoidEvent: avoidEvent != null ? avoidEvent : false
+        },
+        data.title
+      );
+    }) });
+  }
+});
+
+const Bar$1 = ({
+  bar,
+  barGroup,
+  chart,
+  parsedData,
+  isSingle,
+  effectiveMargin,
+  setsWithColor
+}) => {
+  var _a;
+  const column = arrayOrArray(chart.dataSets.data)[bar.index];
+  const set = arrayOrArray(column == null ? void 0 : column.sets)[barGroup.index];
+  const currentBarColor = (_a = setsWithColor.find(
+    (innerSet) => innerSet.columnName === column.name && innerSet.key === set.key
+  )) == null ? void 0 : _a.color;
+  const [isHighlighted, setIsHighlighted] = useState(false);
+  const [isAnyHighlighted, setIsAnyHighlighted] = useState(false);
+  const { open } = useTooltip({
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            color: currentBarColor
+          },
+          children: /* @__PURE__ */ jsx("strong", { children: parsedData[barGroup.index].columnName })
+        }
+      ),
+      chart.showValues && /* @__PURE__ */ jsx("div", { children: bar.value }),
+      /* @__PURE__ */ jsx("div", { children: bar.key })
+    ] })
+  });
+  useImperativeComponentEvents({
+    highlight(barName) {
+      if (barName.split(" - ").length === 1) {
+        setIsHighlighted(barName === bar.key);
+        setIsAnyHighlighted(barName !== bar.key && barName !== "");
+      } else if (barName.split(" - ").length === 2) {
+        setIsHighlighted(
+          barName.split(" - ")[0] === bar.key && barName.split(" - ")[1] === set.key
+        );
+        setIsAnyHighlighted(
+          barName.split(" - ")[0] !== bar.key && barName.split(" - ")[0] !== ""
+        );
+      }
+    }
+  });
+  const { chartId } = useContext(ChartContext);
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsxs(
+      "text",
+      {
+        x: bar.x + 5,
+        y: bar.y - 5,
+        width: bar.width,
+        height: bar.height,
+        textAnchor: "start",
+        style: {
+          display: isHighlighted ? "block" : "none",
+          opacity: isHighlighted ? 1 : 0,
+          transition: "opacity 500ms"
+        },
+        children: [
+          bar.value,
+          " - ",
+          parsedData[barGroup.index].columnName
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "rect",
+        className: "chart__barRect",
+        sx: useMemo(
+          () => ({
+            fill: isAnyHighlighted ? `#${tinycolor(currentBarColor).desaturate(70).toHex()}` : currentBarColor,
+            "&:hover": {
+              fill: `#${tinycolor(currentBarColor).saturate(25).toHex()}`
+            },
+            transition: "fill 500ms, opacity 500ms",
+            x: bar.x,
+            y: bar.y,
+            width: bar.width - effectiveMargin.left,
+            opacity: isAnyHighlighted && !isHighlighted ? 0.15 : 1,
+            height: bar.height > 0 ? bar.height : 0
+          }),
+          [
+            bar.height,
+            bar.width,
+            bar.x,
+            bar.y,
+            currentBarColor,
+            effectiveMargin.left,
+            isAnyHighlighted,
+            isHighlighted
+          ]
+        ),
+        onMouseEnter: (ev) => {
+          var _a2, _b, _c;
+          if (!isSingle) {
+            legendContainerMethods.highlight(chartId, bar.key);
+          }
+          (_a2 = ev.target.classList) == null ? void 0 : _a2.add("over");
+          const point = {
+            x: (_b = localPoint(ev)) == null ? void 0 : _b.x,
+            y: (_c = localPoint(ev)) == null ? void 0 : _c.y
+          };
+          if (!point)
+            return;
+          open({
+            attachToElement: () => ev.target,
+            attachToElementAnchorPoint: "center"
+          });
+        },
+        onMouseLeave: (ev) => {
+          var _a2;
+          if (!isSingle) {
+            legendContainerMethods.highlight(chartId, "");
+          }
+          (_a2 = ev.target.classList) == null ? void 0 : _a2.remove("over");
+        },
+        children: /* @__PURE__ */ jsx(
+          "animate",
+          {
+            attributeName: "width",
+            from: 0,
+            to: bar.width,
+            dur: "0.5s",
+            calcMode: "paced",
+            keySplines: "0.5 0 0.5 1;",
+            keyTimes: "0; 1"
+          }
+        )
+      }
+    )
+  ] });
+};
+
+function getBarColor(colors, index, alwaysDiffer = false) {
+  const module = colors.length;
+  let count = 0;
+  let barColor = "";
+  if (!alwaysDiffer) {
+    if (colors[index]) {
+      barColor = colors[index];
+    } else {
+      let innerIndex = index;
+      while (innerIndex >= module) {
+        innerIndex = index / module;
+        count++;
+      }
+      barColor = tinycolor(colors[index % module]).desaturate(count * 5).toHex();
+    }
+  } else {
+    if (colors[index]) {
+      barColor = colors[index];
+    } else {
+      barColor = tinycolor(colors[index % module]).toHex();
+    }
+  }
+  return barColor;
+}
+
+var __defProp$7 = Object.defineProperty;
+var __getOwnPropSymbols$7 = Object.getOwnPropertySymbols;
+var __hasOwnProp$7 = Object.prototype.hasOwnProperty;
+var __propIsEnum$7 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$7 = (obj, key, value) => key in obj ? __defProp$7(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$7 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$7.call(b, prop))
+      __defNormalProp$7(a, prop, b[prop]);
+  if (__getOwnPropSymbols$7)
+    for (var prop of __getOwnPropSymbols$7(b)) {
+      if (__propIsEnum$7.call(b, prop))
+        __defNormalProp$7(a, prop, b[prop]);
+    }
+  return a;
+};
+function useChartStyles(schemeName) {
+  var _a, _b, _c;
+  const theme = useContext(ThemeProviderContext);
+  if (!theme.layout)
+    console.error("The layout property is missing in the current theme");
+  const charts = (_b = (_a = theme.layout) == null ? void 0 : _a.charts) != null ? _b : {};
+  const defaultStyles = charts.common;
+  const currentStylescheme = {
+    schema: getValueByPath(
+      theme.colors,
+      // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+      (_c = charts[schemeName || "blue"]) == null ? void 0 : _c.schema
+    )
+  };
+  return __spreadValues$7(__spreadValues$7({}, defaultStyles), currentStylescheme);
+}
+
+var __defProp$6 = Object.defineProperty;
+var __defProps$6 = Object.defineProperties;
+var __getOwnPropDescs$6 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$6 = Object.getOwnPropertySymbols;
+var __hasOwnProp$6 = Object.prototype.hasOwnProperty;
+var __propIsEnum$6 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$6 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$6.call(b, prop))
+      __defNormalProp$6(a, prop, b[prop]);
+  if (__getOwnPropSymbols$6)
+    for (var prop of __getOwnPropSymbols$6(b)) {
+      if (__propIsEnum$6.call(b, prop))
+        __defNormalProp$6(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$6 = (a, b) => __defProps$6(a, __getOwnPropDescs$6(b));
+function adjustDimensions$4({
+  width,
+  height,
+  maxWidth
+}) {
+  if (width <= maxWidth) {
+    return { width, height };
+  }
+  const ratio = width / height;
+  const newWidth = maxWidth;
+  const newHeight = Math.floor(newWidth / ratio);
+  return { width: newWidth, height: newHeight };
+}
+const getYValue = (d) => d.columnName;
+const HorizontalBars = ({
+  margin = { top: 20, left: 50, bottom: 150, right: 20 },
+  chart,
+  className,
+  chartId,
+  outerClassName,
+  allowZoom
+}) => {
+  var _a;
+  const effectiveMargin = parseMargin(margin);
+  let innerWidth = chart.ratio.width + (-effectiveMargin.left - effectiveMargin.right) / 2;
+  let innerHeight = chart.ratio.height + (-effectiveMargin.top - effectiveMargin.bottom) / 2;
+  if (innerWidth > chart.ratio.maxWidth) {
+    const newValues = adjustDimensions$4({
+      height: innerHeight,
+      width: innerWidth,
+      maxWidth: chart.ratio.maxWidth
+    });
+    innerWidth = newValues.width;
+    innerHeight = newValues.height;
+  }
+  const columnas = arrayOrArray((_a = chart.dataSets) == null ? void 0 : _a.data).filter((column) => !!column.sets).map((column) => {
+    return __spreadProps$6(__spreadValues$6({}, column), {
+      sets: column.sets
+    });
+  });
+  const xValues = arrayOrArray(columnas[0].sets).map(
+    (innerCoord) => innerCoord.key
+  );
+  const columnNames = columnas.map((col) => {
+    return col.name;
+  });
+  const parsedData = xValues.map((x) => {
+    const obj = columnas.reduce(
+      (acc, column) => {
+        return __spreadProps$6(__spreadValues$6({}, acc), {
+          [column.name]: arrayOrArray(column.sets).filter((coord) => {
+            return coord.key === x;
+          })[0].value
+        });
+      },
+      { columnName: x }
+    );
+    return obj;
+  });
+  const yScale = scaleBand({
+    range: [
+      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top,
+      innerHeight
+    ],
+    domain: parsedData.map(getYValue),
+    padding: 0.2
+  });
+  const columnGroupScale = scaleBand({
+    domain: columnNames,
+    range: [0, yScale.bandwidth()]
+  });
+  const xScaleLog = scaleLog({
+    range: [
+      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.left,
+      innerWidth
+    ],
+    domain: [
+      1,
+      Math.max(
+        ...parsedData.map(
+          (d) => Math.max(...columnNames.map((key) => Number(d[key])))
+        )
+      )
+    ],
+    base: 10
+  });
+  const xScaleLine = scaleLinear({
+    range: [
+      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.left,
+      innerWidth
+    ],
+    domain: [
+      0,
+      Math.max(
+        ...parsedData.map(
+          (d) => Math.max(...columnNames.map((key) => Number(d[key])))
+        )
+      )
+    ]
+  });
+  const color = scaleOrdinal({
+    domain: columnNames,
+    range: columnas.map((col) => col.color)
+  });
+  const parameters = usePanelParametersSelector((global) => {
+    return global;
+  });
+  const scale = parameters.PRMT_CHART_SCALE;
+  const isLogScale = scale === "0";
+  const xScale = useMemo(() => {
+    if (!isLogScale) {
+      return xScaleLine;
+    }
+    return xScaleLog;
+  }, [isLogScale, xScaleLine, xScaleLog]);
+  const id = useMemo(() => `VerticalBars${uniqueId()}`, []);
+  useLayoutEffect(() => {
+    document.querySelectorAll(
+      `#${id} .__${chartId != null ? chartId : outerClassName}`
+    ).forEach((current) => {
+      const width = current.getBoundingClientRect().width;
+      current.style.transformOrigin = current.getAttribute("x") + "px 14px";
+      current.style.transform = `rotate(15deg) translateX(${width / 2}px)`;
+    });
+  });
+  const styles = useChartStyles(chart.colorSchema);
+  const { boxRef, elementRef } = usePanAndZoom(
+    void 0,
+    !allowZoom
+  );
+  const setsWithColor = arrayOrArray(chart.dataSets.data).map((data, index) => {
+    const isSingle = arrayOrArray(chart.dataSets.data).length === 1;
+    const dataColor = data.color !== "" && data.color !== void 0 ? data.color : arrayOrArray(styles.schema).length > 0 ? getBarColor(arrayOrArray(styles.schema), index, isSingle) : "";
+    const returnColumnsArray = [];
+    arrayOrArray(data.sets).forEach((set) => {
+      if (set.color !== "" && set.color !== void 0) {
+        returnColumnsArray.push(__spreadProps$6(__spreadValues$6({}, set), { columnName: data.name }));
+      } else {
+        returnColumnsArray.push(__spreadProps$6(__spreadValues$6({}, set), {
+          color: dataColor,
+          columnName: data.name
+        }));
+      }
+    });
+    return returnColumnsArray;
+  });
+  const colorReference = setsWithColor.map((column) => {
+    var _a2;
+    return {
+      color: (_a2 = column[0].color) != null ? _a2 : "",
+      title: column[0].columnName
+    };
+  });
+  arrayOrArray(chart.dataSets.data).map((data) => {
+    const returnArray = [];
+    arrayOrArray(data.sets).forEach((set) => {
+      if (set.color !== "" && set.color !== void 0) {
+        returnArray.push({
+          color: set.color,
+          title: data.name + " - " + set.key
+        });
+      }
+    });
+    return returnArray;
+  }).flat().forEach((addRef) => colorReference.push(addRef));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref: boxRef,
+        id,
+        className: `${outerClassName != null ? outerClassName : ""} ${chartId} ${chart.title}`,
+        sx: React.useMemo(() => {
+          return {
+            [`.__${chartId != null ? chartId : outerClassName}`]: {
+              transform: "rotate(45deg)",
+              transformOrigin: "attr(x) 18px"
+            },
+            overflow: "auto",
+            position: "relative",
+            height: `${chart.ratio.height}px`,
+            width: `${chart.ratio.width}px`
+          };
+        }, [chart.ratio.height, chart.ratio.width, chartId, outerClassName]),
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            ref: elementRef,
+            className: `_${chartId} ${className ? className : ""} chart__svg`,
+            height: chart.ratio.height,
+            width: chart.ratio.width,
+            style: {
+              position: "absolute"
+            },
+            children: [
+              chart.showGrid && /* @__PURE__ */ jsx(
+                Grid.Grid,
+                {
+                  xScale,
+                  yScale,
+                  left: 0,
+                  width: innerWidth,
+                  height: innerHeight,
+                  numTicksRows: 10,
+                  numTicksColumns: 10,
+                  top: (typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top) - 20
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Group,
+                {
+                  top: (typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top) - 20,
+                  left: effectiveMargin.left,
+                  children: /* @__PURE__ */ jsx(
+                    BarGroupHorizontal,
+                    {
+                      data: parsedData,
+                      keys: columnNames,
+                      width: innerWidth,
+                      y0: getYValue,
+                      y0Scale: yScale,
+                      y1Scale: columnGroupScale,
+                      xScale,
+                      color,
+                      children: (barGroups) => barGroups.map((barGroup) => {
+                        return /* @__PURE__ */ jsx(
+                          Group,
+                          {
+                            top: barGroup.y0,
+                            children: barGroup.bars.map((bar) => {
+                              const key = `${barGroup.index}-${bar.index}-${bar.key}`;
+                              return /* @__PURE__ */ jsx(
+                                Bar$1,
+                                {
+                                  isSingle: barGroup.bars.length === 1,
+                                  bar,
+                                  barGroup,
+                                  chart,
+                                  parsedData,
+                                  effectiveMargin,
+                                  setsWithColor: setsWithColor.flat()
+                                },
+                                key
+                              );
+                            })
+                          },
+                          `bar-group-${barGroup.index}-${barGroup.y0}`
+                        );
+                      })
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AxisLeft,
+                {
+                  scale: yScale,
+                  left: effectiveMargin.left,
+                  label: chart.chartType !== "pie2D" && chart.showAxisYTitle ? chart.axisYTitle : "",
+                  tickLabelProps: () => ({
+                    display: "none"
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AxisBottom,
+                {
+                  top: innerHeight,
+                  scale: xScale,
+                  label: chart.chartType !== "pie2D" && chart.showAxisXTitle ? chart.axisXTitle : "",
+                  tickLabelProps: {
+                    className: "tickLabel"
+                  },
+                  labelOffset: 50
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    colorReference.length > 1 && /* @__PURE__ */ jsx(
+      LegendContainer,
+      {
+        id: chartId,
+        containerClassName: "legendContainer",
+        references: colorReference
+      }
+    )
+  ] });
+};
+
+const Slice = ({
+  arc,
+  arcPath,
+  chart,
+  actualColor
+}) => {
+  const [isHighlighted, setIsHighlighted] = useState(false);
+  const [isAnyHighlighted, setIsAnyHighlighted] = useState(false);
+  const { open } = useTooltip({
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            color: `#${tinycolor(actualColor).toHex()}`
+          },
+          children: /* @__PURE__ */ jsx("strong", { children: arc.data.key })
+        }
+      ),
+      chart.showValues && /* @__PURE__ */ jsx("div", { children: `${arc.value} ${arc.data.percentage ? "- " + arc.data.percentage : ""}${arc.data.percentage ? "%" : ""}` })
+    ] })
+  });
+  useImperativeComponentEvents({
+    highlight(barName) {
+      setIsHighlighted(barName === arc.data.key);
+      setIsAnyHighlighted(barName !== arc.data.key && barName !== "");
+    }
+  });
+  const { chartId } = useContext(ChartContext);
+  const name = arc.data;
+  return /* @__PURE__ */ jsx(
+    "path",
+    {
+      style: useMemo(
+        () => ({
+          "&:hover": {
+            fill: `#${tinycolor(actualColor).saturate(25).toHex()}`
+          },
+          transition: "fill 500ms, opacity 500ms"
+        }),
+        [actualColor]
+      ),
+      fill: isAnyHighlighted ? `#${tinycolor(actualColor).desaturate(70).toHex()}` : actualColor,
+      opacity: isAnyHighlighted && !isHighlighted ? 0.15 : 1,
+      d: arcPath != null ? arcPath : "",
+      onMouseEnter: (ev) => {
+        var _a, _b, _c;
+        legendContainerMethods.highlight(chartId, arc.data.key);
+        (_a = ev.target.classList) == null ? void 0 : _a.add("over");
+        const point = {
+          x: (_b = localPoint(ev)) == null ? void 0 : _b.x,
+          y: (_c = localPoint(ev)) == null ? void 0 : _c.y
+        };
+        if (!point)
+          return;
+        open({
+          attachToElement: () => ev.target,
+          attachToElementAnchorPoint: "center"
+        });
+      },
+      onMouseLeave: (ev) => {
+        var _a;
+        legendContainerMethods.highlight(chartId, "");
+        (_a = ev.target.classList) == null ? void 0 : _a.remove("over");
+      }
+    },
+    `arc-${name.key}-${name.value}`
+  );
+};
+
+function ChartSelector({
+  chartId,
+  pieces,
+  className,
+  current,
+  setCurrent
+}) {
+  return /* @__PURE__ */ jsxs(
+    Select,
+    {
+      sx: { width: "auto" },
+      name: `chartSelector_${chartId}`,
+      className: `chartSelector_${chartId} ${className != null ? className : ""}`,
+      value: current != null ? current : "0",
+      onChange: (ev) => {
+        ev.preventDefault();
+        setCurrent(ev.target.value);
+      },
+      children: [
+        pieces.map((piece, i) => {
+          return {
+            label: piece,
+            value: `${i}`
+          };
+        }).map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value)),
+        " "
+      ]
+    }
+  );
+}
+
+const TextSlice = ({
+  arc,
+  x,
+  y,
+  dy
+}) => {
+  const [isHighlighted, setIsHighlighted] = useState(false);
+  useImperativeComponentEvents({
+    highlight(barName) {
+      setIsHighlighted(barName === arc.data.key);
+    }
+  });
+  return /* @__PURE__ */ jsx(
+    "text",
+    {
+      textAnchor: "middle",
+      style: {
+        opacity: isHighlighted ? 1 : 0,
+        display: isHighlighted ? "block" : "none",
+        transition: "opacity 500ms"
+      },
+      x,
+      y,
+      dy,
+      children: arc.value
+    }
+  );
+};
+
+var __defProp$5 = Object.defineProperty;
+var __defProps$5 = Object.defineProperties;
+var __getOwnPropDescs$5 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$5 = Object.getOwnPropertySymbols;
+var __hasOwnProp$5 = Object.prototype.hasOwnProperty;
+var __propIsEnum$5 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$5 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$5.call(b, prop))
+      __defNormalProp$5(a, prop, b[prop]);
+  if (__getOwnPropSymbols$5)
+    for (var prop of __getOwnPropSymbols$5(b)) {
+      if (__propIsEnum$5.call(b, prop))
+        __defNormalProp$5(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
+function adjustDimensions$3({
+  width,
+  height,
+  maxWidth
+}) {
+  if (width <= maxWidth) {
+    return { width, height };
+  }
+  const ratio = width / height;
+  const newWidth = maxWidth;
+  const newHeight = Math.floor(newWidth / ratio);
+  return { width: newWidth, height: newHeight };
+}
+const PieChart = ({
+  // margin = { top: 20, left: 100, bottom: 150, right: 20 },
+  chart,
+  className,
+  chartId,
+  allowZoom
+}) => {
+  var _a;
+  const [chartData, setChartData] = useState(
+    {}
+  );
+  let innerWidth = chart.ratio.width > chart.ratio.height ? chart.ratio.width : chart.ratio.height;
+  let innerHeight = chart.ratio.width > chart.ratio.height ? chart.ratio.width : chart.ratio.height;
+  if (innerWidth > chart.ratio.maxWidth) {
+    const newValues = adjustDimensions$3({
+      height: innerHeight,
+      width: innerWidth,
+      maxWidth: chart.ratio.maxWidth
+    });
+    innerWidth = newValues.width;
+    innerHeight = newValues.height;
+  }
+  const piezas = arrayOrArray((_a = chart.dataSets) == null ? void 0 : _a.data).filter((piece) => !!piece.sets).map((piece) => {
+    return __spreadProps$5(__spreadValues$5({}, piece), {
+      coordinate: piece.sets
+    });
+  });
+  const [currentPie, setCurrentPie] = useState("0");
+  useEffect(() => {
+    setChartData(piezas[currentPie != null ? currentPie : 0]);
+  }, [currentPie]);
+  const centerY = useMemo(() => {
+    return innerHeight / 2.5;
+  }, [innerHeight]);
+  const centerX = useMemo(() => {
+    return innerWidth / 2.5;
+  }, [innerWidth]);
+  const top = centerY;
+  const left = centerX;
+  const getValue = (d) => Number(d.value) === 0 && piezas.length === 1 && arrayOrArray(piezas.map((p) => p.coordinate)[0]).length === 1 ? 100 : Number(d.value);
+  const radius = Math.min(innerHeight, innerWidth) / 2.5;
+  const piecesNames = piezas.map((piece) => {
+    return piece.name;
+  });
+  const styles = useChartStyles(chart.colorSchema);
+  const colorsArray = styles.schema;
+  const names = arrayOrArray(arrayOrArray(chart.dataSets.data)[0].sets).map(
+    (coord) => {
+      return coord.key;
+    }
+  );
+  const colorReference = names.map((name, index) => {
+    return {
+      title: name,
+      color: getBarColor(arrayOrArray(colorsArray), index)
+    };
+  });
+  const { boxRef, elementRef } = usePanAndZoom(
+    void 0,
+    !allowZoom
+  );
+  const previousPaths = useRef([]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    piezas.length > 1 && /* @__PURE__ */ jsx(Box, { className: "chart__combo__wrapper", children: /* @__PURE__ */ jsx(
+      ChartSelector,
+      {
+        chartId,
+        pieces: piecesNames,
+        className: "chartSelectorCombo",
+        current: currentPie,
+        setCurrent: setCurrentPie
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref: boxRef,
+        className: `${className ? className : ""} ${chartId}`,
+        sx: { textAlign: "center", pb: spacing(5) },
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            ref: elementRef,
+            height: radius * 2,
+            width: radius * 2,
+            className: `_${chartId} chart__svg`,
+            children: /* @__PURE__ */ jsxs(Group, { top: top != null ? top : 0, left: left != null ? left : 0, children: [
+              /* @__PURE__ */ jsx(
+                Pie,
+                {
+                  data: arrayOrArray(chartData.coordinate),
+                  pieValue: getValue,
+                  pieSort: null,
+                  outerRadius: radius,
+                  children: (pie) => {
+                    const paths = arrayOrArray(pie.arcs).map((arc) => {
+                      return pie.path(arc);
+                    });
+                    const result = pie.arcs.map((arc) => {
+                      var _a2, _b;
+                      const name = arc.data;
+                      const arcPath = pie.path(arc);
+                      return /* @__PURE__ */ jsx(
+                        Slice,
+                        {
+                          arc,
+                          arcPath,
+                          chart,
+                          actualColor: (_b = (_a2 = colorReference.find((color) => {
+                            return color.title === name.key;
+                          })) == null ? void 0 : _a2.color) != null ? _b : ""
+                        },
+                        `${name.key}_${name.value}`
+                      );
+                    });
+                    previousPaths.current = paths;
+                    return result;
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Pie,
+                {
+                  data: arrayOrArray(chartData.coordinate),
+                  pieValue: getValue,
+                  pieSort: null,
+                  outerRadius: radius,
+                  children: (pie) => {
+                    return pie.arcs.map((arc) => {
+                      const name = arc.data;
+                      const angle = (arc.startAngle - Math.PI + arc.endAngle) / 2;
+                      const x = Math.cos(angle) * (radius * 0.75);
+                      const y = Math.sin(angle) * (radius * 0.75);
+                      return /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+                        TextSlice,
+                        {
+                          arc,
+                          chart,
+                          dy: "0.33em",
+                          x,
+                          y
+                        }
+                      ) }, `arc-${name.key}-${name.value}`);
+                    });
+                  }
+                }
+              )
+            ] })
+          }
+        )
+      },
+      chartData.name
+    ),
+    colorReference.length > 1 && /* @__PURE__ */ jsx(
+      LegendContainer,
+      {
+        id: chartId,
+        containerClassName: "legendContainer",
+        references: colorReference
+      }
+    )
+  ] });
+};
+
+const Bar = ({
+  bar,
+  barGroup,
+  chart,
+  parsedData,
+  isSingle,
+  setsWithColor
+}) => {
+  var _a;
+  const column = arrayOrArray(chart.dataSets.data)[bar.index];
+  const set = arrayOrArray(column == null ? void 0 : column.sets)[barGroup.index];
+  const currentBarColor = (_a = setsWithColor.find(
+    (innerSet) => innerSet.columnName === column.name && innerSet.key === set.key
+  )) == null ? void 0 : _a.color;
+  const [isHighlighted, setIsHighlighted] = useState(false);
+  const [isAnyHighlighted, setIsAnyHighlighted] = useState(false);
+  const { open } = useTooltip({
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            color: currentBarColor
+          },
+          children: /* @__PURE__ */ jsx("strong", { children: parsedData[barGroup.index].columnName })
+        }
+      ),
+      chart.showValues && /* @__PURE__ */ jsx("div", { children: bar.value }),
+      /* @__PURE__ */ jsx("div", { children: bar.key })
+    ] })
+  });
+  useImperativeComponentEvents({
+    highlight(barName) {
+      if (barName.split(" - ").length === 1) {
+        setIsHighlighted(barName === bar.key);
+        setIsAnyHighlighted(barName !== bar.key && barName !== "");
+      } else if (barName.split(" - ").length === 2) {
+        setIsHighlighted(
+          barName.split(" - ")[0] === bar.key && barName.split(" - ")[1] === set.key
+        );
+        setIsAnyHighlighted(
+          barName.split(" - ")[0] !== bar.key && barName.split(" - ")[0] !== ""
+        );
+      }
+    }
+  });
+  const { chartId } = useContext(ChartContext);
+  return /* @__PURE__ */ jsxs("g", { children: [
+    /* @__PURE__ */ jsx(
+      "text",
+      {
+        x: bar.x + bar.width / 2,
+        y: bar.y - 5,
+        width: bar.width,
+        height: bar.height,
+        textAnchor: "middle",
+        style: {
+          display: isHighlighted ? "block" : "none",
+          opacity: isHighlighted ? 1 : 0,
+          transition: "opacity 500ms"
+        },
+        children: bar.value
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Box,
+      {
+        as: "rect",
+        className: "chart__barRect",
+        sx: useMemo(
+          () => ({
+            fill: isAnyHighlighted ? `#${tinycolor(currentBarColor).desaturate(70).toHex()}` : currentBarColor,
+            "&:hover": {
+              fill: `#${tinycolor(currentBarColor).saturate(25).toHex()}`
+            },
+            transition: "fill 500ms, opacity 500ms",
+            x: bar.x,
+            y: bar.y,
+            width: bar.width,
+            opacity: isAnyHighlighted && !isHighlighted ? 0.15 : 1,
+            height: bar.height > 0 ? bar.height : 0
+          }),
+          [
+            bar.height,
+            bar.width,
+            bar.x,
+            bar.y,
+            currentBarColor,
+            isAnyHighlighted,
+            isHighlighted
+          ]
+        ),
+        onMouseEnter: (ev) => {
+          var _a2, _b, _c;
+          if (!isSingle) {
+            legendContainerMethods.highlight(chartId, bar.key);
+          }
+          (_a2 = ev.target.classList) == null ? void 0 : _a2.add("over");
+          const point = {
+            x: (_b = localPoint(ev)) == null ? void 0 : _b.x,
+            y: (_c = localPoint(ev)) == null ? void 0 : _c.y
+          };
+          if (!point)
+            return;
+          open({
+            attachToElement: () => ev.target,
+            attachToElementAnchorPoint: "center"
+          });
+        },
+        onMouseLeave: (ev) => {
+          var _a2;
+          if (!isSingle) {
+            legendContainerMethods.highlight(chartId, "");
+          }
+          (_a2 = ev.target.classList) == null ? void 0 : _a2.remove("over");
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "animate",
+            {
+              attributeName: "height",
+              from: 0,
+              to: bar.height,
+              dur: "0.5s",
+              calcMode: "paced",
+              keySplines: "0.5 0 0.5 1;",
+              keyTimes: "0; 1"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "animate",
+            {
+              attributeName: "y",
+              from: bar.y + bar.height,
+              to: bar.y,
+              dur: "0.5s",
+              calcMode: "paced",
+              keySplines: "0.5 0 0.5 1;",
+              keyTimes: "0; 1"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+
+var __defProp$4 = Object.defineProperty;
+var __defProps$4 = Object.defineProperties;
+var __getOwnPropDescs$4 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$4 = Object.getOwnPropertySymbols;
+var __hasOwnProp$4 = Object.prototype.hasOwnProperty;
+var __propIsEnum$4 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$4 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$4.call(b, prop))
+      __defNormalProp$4(a, prop, b[prop]);
+  if (__getOwnPropSymbols$4)
+    for (var prop of __getOwnPropSymbols$4(b)) {
+      if (__propIsEnum$4.call(b, prop))
+        __defNormalProp$4(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
+function adjustDimensions$2({
+  width,
+  height,
+  maxWidth
+}) {
+  if (width <= maxWidth) {
+    return { width, height };
+  }
+  const ratio = width / height;
+  const newWidth = maxWidth;
+  const newHeight = Math.floor(newWidth / ratio);
+  return { width: newWidth, height: newHeight };
+}
+const getXValue = (d) => d.columnName;
+const VerticalBars = ({
+  margin = { top: 20, left: 100, bottom: 150, right: 20 },
+  chart,
+  className,
+  chartId,
+  allowZoom
+}) => {
+  var _a;
+  const effectiveMargin = parseMargin(margin);
+  if (!chart.showAxisYTitle) {
+    effectiveMargin.left = 50;
+  }
+  let innerWidth = chart.ratio.width + (-effectiveMargin.left - effectiveMargin.right) / 2;
+  let innerHeight = chart.ratio.height + (-effectiveMargin.top - effectiveMargin.bottom) / 2;
+  if (innerWidth > chart.ratio.maxWidth) {
+    const newValues = adjustDimensions$2({
+      height: innerHeight,
+      width: innerWidth,
+      maxWidth: chart.ratio.maxWidth
+    });
+    innerWidth = newValues.width;
+    innerHeight = newValues.height;
+  }
+  const styles = useChartStyles(chart.colorSchema);
+  const columnas = arrayOrArray((_a = chart.dataSets) == null ? void 0 : _a.data).filter((column) => !!column.sets).map((column) => {
+    return __spreadProps$4(__spreadValues$4({}, column), {
+      sets: column.sets
+    });
+  });
+  const xValues = arrayOrArray(columnas[0].sets).map(
+    (innerCoord) => innerCoord.key
+  );
+  const columnNames = columnas.map((col) => {
+    return col.name;
+  });
+  const parsedData = xValues.map((x) => {
+    const obj = columnas.reduce(
+      (acc, column) => {
+        return __spreadProps$4(__spreadValues$4({}, acc), {
+          [column.name]: arrayOrArray(column.sets).filter((coord) => {
+            return coord.key === x;
+          })[0].value
+        });
+      },
+      { columnName: x }
+    );
+    return obj;
+  });
+  const xScale = scaleBand({
+    range: [
+      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.left,
+      innerWidth
+    ],
+    domain: parsedData.map(getXValue),
+    padding: 0.2
+  });
+  const columnGroupScale = scaleBand({
+    domain: columnNames,
+    range: [0, xScale.bandwidth()]
+  });
+  const yScaleLog = scaleLog({
+    range: [
+      innerHeight,
+      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top
+    ],
+    domain: [
+      1,
+      Math.max(
+        ...parsedData.map(
+          (d) => Math.max(...columnNames.map((key) => Number(d[key])))
+        )
+      )
+    ],
+    base: 10
+  });
+  const yScaleLine = scaleLinear({
+    range: [
+      innerHeight,
+      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top
+    ],
+    domain: [
+      0,
+      Math.max(
+        ...parsedData.map(
+          (d) => Math.max(...columnNames.map((key) => Number(d[key])))
+        )
+      )
+    ]
+  });
+  const color = scaleOrdinal({
+    domain: columnNames,
+    range: columnas.map((col) => col.color)
+  });
+  const parameters = usePanelParametersSelector((global) => {
+    return global;
+  });
+  const scale = parameters.PRMT_CHART_SCALE;
+  const isLogScale = scale === "0";
+  const yScale = useMemo(() => {
+    if (!isLogScale) {
+      return yScaleLine;
+    }
+    return yScaleLog;
+  }, [isLogScale, yScaleLine, yScaleLog]);
+  const id = useMemo(() => `VerticalBars${uniqueId()}`, []);
+  useLayoutEffect(() => {
+    document.querySelectorAll(`#${id} .tickLabel`).forEach((current) => {
+      const width = current.getBoundingClientRect().width;
+      current.style.transformOrigin = current.getAttribute("x") + "px 14px";
+      current.style.transform = `rotate(25deg) translateX(${width / 2}px)`;
+    });
+  });
+  const { boxRef, elementRef } = usePanAndZoom(
+    void 0,
+    !allowZoom
+  );
+  const setsWithColor = arrayOrArray(chart.dataSets.data).map((data, index) => {
+    const isSingle = arrayOrArray(chart.dataSets.data).length === 1;
+    const dataColor = data.color !== "" && data.color !== void 0 ? data.color : arrayOrArray(styles.schema).length > 0 ? getBarColor(arrayOrArray(styles.schema), index, isSingle) : "";
+    const returnColumnsArray = [];
+    arrayOrArray(data.sets).forEach((set) => {
+      if (set.color !== "" && set.color !== void 0) {
+        returnColumnsArray.push(__spreadProps$4(__spreadValues$4({}, set), { columnName: data.name }));
+      } else {
+        returnColumnsArray.push(__spreadProps$4(__spreadValues$4({}, set), {
+          color: dataColor,
+          columnName: data.name
+        }));
+      }
+    });
+    return returnColumnsArray;
+  });
+  const colorReference = arrayOrArray(chart.dataSets.data).map(
+    (data, index) => {
+      const isSingle = arrayOrArray(chart.dataSets.data).length === 1;
+      const dataColor = data.color !== "" && data.color !== void 0 ? data.color : arrayOrArray(styles.schema).length > 0 ? getBarColor(arrayOrArray(styles.schema), index, isSingle) : "";
+      return {
+        color: dataColor,
+        title: data.name
+      };
+    }
+  );
+  arrayOrArray(chart.dataSets.data).map((data) => {
+    const returnArray = [];
+    arrayOrArray(data.sets).forEach((set) => {
+      if (set.color !== "" && set.color !== void 0) {
+        returnArray.push({
+          color: set.color,
+          title: data.name + " - " + set.key
+        });
+      }
+    });
+    return returnArray;
+  }).flat().forEach((addRef) => colorReference.push(addRef));
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref: boxRef,
+        id,
+        className: `${className != null ? className : ""} ${chart.title}`,
+        sx: {
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            ref: elementRef,
+            className: `_${chartId} chart__svg`,
+            height: chart.ratio.height,
+            width: chart.ratio.width,
+            children: [
+              chart.showGrid && /* @__PURE__ */ jsx(
+                Grid.Grid,
+                {
+                  xScale,
+                  yScale,
+                  left: 0,
+                  width: innerWidth,
+                  height: innerHeight,
+                  numTicksRows: 10,
+                  numTicksColumns: 10,
+                  top: (typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top) - 20
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Group,
+                {
+                  top: (typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top) - 20,
+                  children: /* @__PURE__ */ jsx(
+                    BarGroup,
+                    {
+                      data: parsedData,
+                      keys: columnNames,
+                      height: innerHeight,
+                      x0: getXValue,
+                      x0Scale: xScale,
+                      x1Scale: columnGroupScale,
+                      yScale,
+                      color,
+                      children: (barGroups) => barGroups.map((barGroup) => {
+                        return /* @__PURE__ */ jsx(
+                          Group,
+                          {
+                            left: barGroup.x0,
+                            children: barGroup.bars.map((bar) => {
+                              const key = `${barGroup.index}-${bar.index}-${bar.key}`;
+                              return /* @__PURE__ */ jsx(
+                                Bar,
+                                {
+                                  isSingle: barGroup.bars.length === 1,
+                                  bar,
+                                  barGroup,
+                                  chart,
+                                  parsedData,
+                                  setsWithColor: setsWithColor.flat()
+                                },
+                                key
+                              );
+                            })
+                          },
+                          `bar-group-${barGroup.index}-${barGroup.x0}`
+                        );
+                      })
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AxisLeft,
+                {
+                  scale: yScale,
+                  left: effectiveMargin.left,
+                  label: chart.chartType !== "pie2D" && chart.showAxisYTitle ? chart.axisYTitle : ""
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                AxisBottom,
+                {
+                  top: innerHeight,
+                  scale: xScale,
+                  label: chart.chartType !== "pie2D" && chart.showAxisXTitle ? chart.axisXTitle : "",
+                  tickLabelProps: {
+                    className: "tickLabel"
+                  },
+                  labelOffset: 50
+                }
+              )
+            ]
+          }
+        )
+      }
+    ),
+    colorReference.length > 1 && /* @__PURE__ */ jsx(
+      LegendContainer,
+      {
+        id: chartId,
+        containerClassName: "legendContainer",
+        references: (
+          // hideLegendsColors
+          //   ? colorReference.map((ref) => {
+          //       return { ...ref, color: 'transparent' };
+          //     })
+          colorReference
+        )
+      }
+    )
+  ] });
+};
+
+const Node = ({
+  currentCircle,
+  innerKey,
+  cx,
+  cy,
+  // coordinate,
+  color,
+  setCurrentCircle
+}) => {
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    currentCircle.includes(innerKey) && /* @__PURE__ */ jsx(
+      "circle",
+      {
+        r: 6,
+        cx,
+        cy,
+        stroke: `#${tinycolor(color).saturate(25).toHex()}`,
+        fill: `#${tinycolor(color).saturate(25).toHex()}`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        r: 3,
+        cx,
+        cy,
+        stroke: `#${tinycolor(color).darken(15).toHex()}`,
+        fill: `#${tinycolor(color).darken(15).toHex()}`
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "circle",
+      {
+        r: 10,
+        cx,
+        cy,
+        stroke: "transparent",
+        fill: "transparent",
+        onMouseEnter: () => {
+          setCurrentCircle([innerKey]);
+        },
+        onMouseLeave: () => {
+          setCurrentCircle([]);
+        },
+        style: { cursor: "pointer" }
+      }
+    )
+  ] }, innerKey);
+};
+
+var __defProp$3 = Object.defineProperty;
+var __defProps$3 = Object.defineProperties;
+var __getOwnPropDescs$3 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$3 = Object.getOwnPropertySymbols;
+var __hasOwnProp$3 = Object.prototype.hasOwnProperty;
+var __propIsEnum$3 = Object.prototype.propertyIsEnumerable;
+var __pow = Math.pow;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$3 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$3.call(b, prop))
+      __defNormalProp$3(a, prop, b[prop]);
+  if (__getOwnPropSymbols$3)
+    for (var prop of __getOwnPropSymbols$3(b)) {
+      if (__propIsEnum$3.call(b, prop))
+        __defNormalProp$3(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
+function adjustDimensions$1({
+  width,
+  height,
+  maxWidth
+}) {
+  if (width <= maxWidth) {
+    return { width, height };
+  }
+  const ratio = width / height;
+  const newWidth = maxWidth;
+  const newHeight = Math.floor(newWidth / ratio);
+  return { width: newWidth, height: newHeight };
+}
+function getX(coordinate) {
+  return coordinate.key;
+}
+function getY(coordinate) {
+  return Number(coordinate.value);
+}
+function parseData(chart) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const columns = arrayOrArray((_a = chart.dataSets) == null ? void 0 : _a.data);
+  const data = columns.map((column) => column.sets);
+  const allData = data.reduce(
+    (rec, d) => arrayOrArray(rec).concat(d),
+    []
+  );
+  return {
+    columns,
+    xScale: scaleOrdinal({
+      domain: arrayOrArray(columns[0].sets).map(getX)
+    }),
+    yScale: scaleLinear({
+      domain: [
+        ((_b = min(allData, getY)) != null ? _b : 0 < 0) ? (_c = min(allData, getY)) != null ? _c : 0 : 0,
+        (_d = max(allData, getY)) != null ? _d : 1
+      ]
+    }),
+    yScaleLog: scaleLog({
+      domain: [
+        ((_e = min(allData, getY)) != null ? _e : 1 > 0) ? (_f = min(allData, getY)) != null ? _f : 1 : 1,
+        (_g = max(allData, getY)) != null ? _g : 10
+      ]
+    })
+  };
+}
+const LineChart = ({
+  chart,
+  margin = { top: 20, left: 100, bottom: 150, right: 70 },
+  chartId,
+  allowZoom
+}) => {
+  const effectiveMargin = parseMargin(margin);
+  if (!chart.showAxisYTitle) {
+    effectiveMargin.left = 50;
+  }
+  let innerWidth = chart.ratio.width;
+  let innerHeight = chart.ratio.height - (effectiveMargin.top + effectiveMargin.bottom) / 2;
+  if (innerWidth > chart.ratio.maxWidth) {
+    const newValues = adjustDimensions$1({
+      height: innerHeight,
+      width: innerWidth,
+      maxWidth: chart.ratio.maxWidth
+    });
+    innerWidth = newValues.width;
+    innerHeight = newValues.height;
+  }
+  const { columns, xScale, yScale, yScaleLog } = parseData(chart);
+  const styles = useChartStyles(chart.colorSchema);
+  const coordinates = arrayOrArray(columns[0].sets);
+  const coordinatesArray = columns.map((col) => {
+    return col.sets;
+  });
+  const step = innerWidth / coordinates.length;
+  xScale.range(
+    coordinates.map((_, i) => {
+      if (i === 0) {
+        return effectiveMargin.left;
+      }
+      return i * step + effectiveMargin.left;
+    })
+  );
+  yScale.range([
+    innerHeight - (effectiveMargin.top + effectiveMargin.bottom) / 2,
+    typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top
+  ]);
+  yScaleLog.range([
+    innerHeight,
+    typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top
+  ]);
+  const [currentCircle, setCurrentCircle] = useState([]);
+  const actualYScale = useMemo(() => {
+    return yScale;
+  }, [yScale]);
+  const id = useMemo(() => `VerticalBars${uniqueId()}`, []);
+  useLayoutEffect(() => {
+    document.querySelectorAll(`#${id} .tickLabel`).forEach((current) => {
+      const width = current.getBoundingClientRect().width;
+      current.style.transformOrigin = current.getAttribute("x") + "px 14px";
+      current.style.transform = `rotate(25deg) translateX(${width / 2}px)`;
+    });
+  });
+  function addNameToProps(names, objects, fixedValue) {
+    return objects.map((object, index) => {
+      const nameIndex = Math.floor(index / fixedValue);
+      const name = names[nameIndex];
+      return __spreadProps$3(__spreadValues$3({}, object), { columnName: name });
+    });
+  }
+  const [nodes, setNodes] = useState([]);
+  useEffect(() => {
+    const coords = coordinatesArray.flat().map((coord) => {
+      return {
+        xValue: coord.key,
+        yValue: coord.value,
+        x: xScale(getX(coord)),
+        y: actualYScale(getY(coord))
+      };
+    });
+    const columnNames = columns.map((column) => {
+      return column.name;
+    });
+    const nodesData = addNameToProps(columnNames, coords, coordinates.length);
+    setNodes(nodesData);
+  }, []);
+  const [nearNodesArray, setNearNodesArray] = useState([]);
+  const previousNearNodesArray = usePrevious(nearNodesArray);
+  const setsWithColor = arrayOrArray(chart.dataSets.data).map((data, index) => {
+    const isSingle = arrayOrArray(chart.dataSets.data).length === 1;
+    const dataColor = data.color !== "" && data.color !== void 0 ? data.color : arrayOrArray(styles.schema).length > 0 ? getBarColor(arrayOrArray(styles.schema), index, isSingle) : "";
+    const returnColumnsArray = [];
+    arrayOrArray(data.sets).forEach((set) => {
+      if (set.color !== "" && set.color !== void 0) {
+        returnColumnsArray.push(__spreadProps$3(__spreadValues$3({}, set), { columnName: data.name }));
+      } else {
+        returnColumnsArray.push(__spreadProps$3(__spreadValues$3({}, set), {
+          color: dataColor,
+          columnName: data.name
+        }));
+      }
+    });
+    return { returnColumnsArray, columnColor: dataColor };
+  });
+  const colorReference = setsWithColor.map((column) => {
+    var _a;
+    return {
+      color: (_a = column.columnColor) != null ? _a : "",
+      title: column.returnColumnsArray[0].columnName
+    };
+  });
+  arrayOrArray(chart.dataSets.data).map((data) => {
+    const returnArray = [];
+    arrayOrArray(data.sets).forEach((set) => {
+      if (set.color !== "" && set.color !== void 0) {
+        returnArray.push({
+          color: set.color,
+          title: data.name + " - " + set.key
+        });
+      }
+    });
+    return returnArray;
+  }).flat().forEach((addRef) => colorReference.push(addRef));
+  const { open } = useTooltip({
+    children: nearNodesArray.sort((a, b) => Number(b.yValue) - Number(a.yValue)).map((node, i) => {
+      const useSpecific = colorReference.some(
+        (ref) => ref.title === node.columnName + " - " + node.xValue
+      );
+      return /* @__PURE__ */ jsxs(Box, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              color: colorReference[colorReference.findIndex((ref) => {
+                return ref.title === (useSpecific ? node.columnName + " - " + node.xValue : node.columnName);
+              })].color
+            },
+            children: /* @__PURE__ */ jsx("strong", { children: node.columnName })
+          }
+        ),
+        chart.showValues && /* @__PURE__ */ jsx("div", { children: node.yValue }),
+        /* @__PURE__ */ jsx("div", { children: node.xValue }),
+        nearNodesArray[i + 1] && /* @__PURE__ */ jsx("hr", {})
+      ] }, `${node.columnName}_${node.xValue}_${node.yValue}`);
+    })
+  });
+  const [highlightedBar, setHighlightedBar] = useState("");
+  useImperativeComponentEvents({
+    highlight(barName) {
+      if (barName.split(" - ").length === 1) {
+        setHighlightedBar(barName);
+      } else if (barName.split(" - ").length === 2) {
+        setHighlightedBar(barName.split(" - ")[0]);
+      }
+    }
+  });
+  const { boxRef, elementRef } = usePanAndZoom(
+    void 0,
+    !allowZoom
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Box, { id, ref: boxRef, children: /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref: elementRef,
+        width: innerWidth,
+        height: innerHeight,
+        id: "LinesChart",
+        className: `_${chartId} chart__svg`,
+        onMouseMove: (ev) => {
+          var _a;
+          const rect = (_a = elementRef.current) == null ? void 0 : _a.getBoundingClientRect();
+          let clientX = ev.clientX;
+          let clientY = ev.clientY - (effectiveMargin.top + effectiveMargin.bottom) / 2;
+          if (rect) {
+            clientX = ev.clientX - rect.left;
+            clientY = ev.clientY - rect.top;
+          }
+          const nearNodes = nodes.filter((node) => {
+            return Math.sqrt(__pow(node.x - clientX, 2) + __pow(node.y - clientY, 2)) < 20;
+          });
+          if (previousNearNodesArray.current && nearNodes.length > 0) {
+            const currentColumns = columns.map((col) => {
+              let colNames = "";
+              nearNodes.forEach((node) => {
+                if (col.name === node.columnName) {
+                  colNames = node.columnName;
+                }
+              });
+              return colNames;
+            }).filter((name) => name !== "");
+            const currentIndex = coordinates.findIndex((coord) => {
+              return coord.key === nearNodes[0].xValue;
+            });
+            if (currentColumns && currentIndex !== void 0) {
+              const newCircleValues = currentColumns.map((col) => {
+                return `${col}${currentIndex}`;
+              });
+              setCurrentCircle([...newCircleValues]);
+            }
+            setNearNodesArray(nearNodes);
+            open({
+              attachToElement: () => ev.target,
+              attachToElementAnchorPoint: "center"
+            });
+          } else if (nearNodes.length === 0) {
+            setCurrentCircle([]);
+          }
+        },
+        children: [
+          chart.showGrid && /* @__PURE__ */ jsx(
+            Grid.Grid,
+            {
+              top: (typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top) - 20,
+              left: 0,
+              xScale,
+              yScale: actualYScale,
+              width: innerWidth,
+              height: innerHeight,
+              stroke: styles.grid.stroke,
+              strokeOpacity: styles.grid.opacity
+            }
+          ),
+          columns.map((column, i) => {
+            var _a;
+            const currentCoordinates = arrayOrArray(column.sets);
+            const newColor = (_a = setsWithColor.find(
+              (data) => data.returnColumnsArray[0].columnName === column.name
+            )) == null ? void 0 : _a.columnColor;
+            return /* @__PURE__ */ jsxs(
+              Group,
+              {
+                top: (typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top) - 20,
+                style: {
+                  opacity: highlightedBar !== "" && highlightedBar !== column.name ? 0.15 : 1,
+                  transition: "opacity 500ms"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    LinePath,
+                    {
+                      curve: allCurves.curveMonotoneX,
+                      data: currentCoordinates,
+                      x: (coordinate) => {
+                        var _a2;
+                        return (_a2 = xScale(getX(coordinate))) != null ? _a2 : 0;
+                      },
+                      y: (coordinate) => {
+                        var _a2;
+                        return (_a2 = actualYScale(getY(coordinate))) != null ? _a2 : 0;
+                      },
+                      stroke: newColor != null ? newColor : "black",
+                      strokeWidth: 2,
+                      strokeOpacity: 1,
+                      shapeRendering: "geometricPrecision"
+                    }
+                  ),
+                  currentCoordinates.map((coordinate, j) => {
+                    var _a2;
+                    const key = column.name + j.toString();
+                    const realColor = (_a2 = setsWithColor.map((sets) => sets.returnColumnsArray).flat().find(
+                      (set) => set.columnName === column.name && set.key === coordinate.key
+                    )) == null ? void 0 : _a2.color;
+                    return /* @__PURE__ */ jsxs("g", { children: [
+                      /* @__PURE__ */ jsx(
+                        "text",
+                        {
+                          x: xScale(getX(coordinate)) + 10,
+                          y: actualYScale(getY(coordinate)) - 5,
+                          textAnchor: "middle",
+                          style: {
+                            display: highlightedBar === column.name ? "block" : "none",
+                            opacity: highlightedBar === column.name ? 1 : 0,
+                            transition: "opacity 500ms"
+                          },
+                          children: coordinate.value
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        Node,
+                        {
+                          color: realColor != null ? realColor : "black",
+                          coordinate,
+                          currentCircle,
+                          cx: xScale(getX(coordinate)),
+                          cy: actualYScale(getY(coordinate)),
+                          setCurrentCircle,
+                          innerKey: key,
+                          column
+                        }
+                      )
+                    ] }, key);
+                  })
+                ]
+              },
+              `lines-${column.name + i.toString()}`
+            );
+          }),
+          /* @__PURE__ */ jsx(
+            AxisLeft,
+            {
+              scale: actualYScale,
+              left: effectiveMargin.left,
+              label: chart.chartType !== "pie2D" && chart.showAxisYTitle ? chart.axisYTitle : ""
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AxisBottom,
+            {
+              top: innerHeight - (effectiveMargin.top + effectiveMargin.bottom) / 2,
+              scale: xScale,
+              label: chart.chartType !== "pie2D" && chart.showAxisXTitle ? chart.axisXTitle : "",
+              tickLabelProps: {
+                className: "tickLabel"
+              },
+              labelOffset: 50
+            }
+          )
+        ]
+      }
+    ) }),
+    colorReference.length > 1 && /* @__PURE__ */ jsx(
+      LegendContainer,
+      {
+        id: chartId,
+        containerClassName: "legendContainer",
+        references: colorReference
+      }
+    )
+  ] });
+};
+
+const WaterfallBar = ({
+  width,
+  height,
+  x,
+  y,
+  fill,
+  x1,
+  lineY,
+  x2,
+  stroke,
+  strokeDashArray,
+  textX,
+  textY,
+  textContent,
+  isLast,
+  step,
+  columnName,
+  chart
+}) => {
+  const { open } = useTooltip({
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            color: step.color
+          },
+          children: /* @__PURE__ */ jsx("strong", { children: columnName })
+        }
+      ),
+      chart.showValues && /* @__PURE__ */ jsx("div", { children: step.y }),
+      /* @__PURE__ */ jsx("div", { children: step.x })
+    ] })
+  });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Box,
+      {
+        as: "rect",
+        sx: useMemo(() => {
+          return {
+            width: `${width}px`,
+            height: `${height}px`,
+            x: `${x}px`,
+            y: `${y}px`,
+            fill: `${fill}`,
+            "&:hover": {
+              fill: `#${tinycolor(fill).saturate(25).toHex()}`
+            },
+            transition: "fill 500ms"
+          };
+        }, [fill, height, width, x, y]),
+        onMouseEnter: (ev) => {
+          open({
+            attachToElement: () => ev.target,
+            attachToElementAnchorPoint: "center"
+          });
+        },
+        onMouseLeave: () => {
+        }
+      }
+    ),
+    !isLast && /* @__PURE__ */ jsx(
+      Line,
+      {
+        x1,
+        x2,
+        y1: lineY,
+        y2: lineY,
+        stroke,
+        strokeDasharray: strokeDashArray
+      }
+    ),
+    /* @__PURE__ */ jsx("text", { textAnchor: "middle", x: textX, y: textY, children: textContent })
+  ] });
+};
+
+var __defProp$2 = Object.defineProperty;
+var __defProps$2 = Object.defineProperties;
+var __getOwnPropDescs$2 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$2 = Object.getOwnPropertySymbols;
+var __hasOwnProp$2 = Object.prototype.hasOwnProperty;
+var __propIsEnum$2 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$2 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$2.call(b, prop))
+      __defNormalProp$2(a, prop, b[prop]);
+  if (__getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(b)) {
+      if (__propIsEnum$2.call(b, prop))
+        __defNormalProp$2(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp$2.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols$2)
+    for (var prop of __getOwnPropSymbols$2(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum$2.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const calculateWaterfallSteps = ({
+  data,
+  xAccessor,
+  yAccessor,
+  showFinal,
+  colors
+}) => {
+  let cumulativeTotal = 0;
+  const steps = data.map((datum) => {
+    const xValue = xAccessor(datum);
+    const yValue = yAccessor(datum);
+    const prevTotal = cumulativeTotal;
+    cumulativeTotal += Number(yValue);
+    return {
+      x: xValue,
+      y: yValue,
+      start: prevTotal,
+      end: cumulativeTotal,
+      color: Number(yValue) > 0 ? colors.positive : colors.negative
+    };
+  });
+  if (showFinal) {
+    steps.push({
+      x: "Total",
+      y: cumulativeTotal,
+      start: 0,
+      end: cumulativeTotal,
+      color: colors.total
+    });
+  }
+  return steps;
+};
+function adjustDimensions({
+  width,
+  height,
+  maxWidth
+}) {
+  if (width <= maxWidth) {
+    return { width, height };
+  }
+  const ratio = width / height;
+  const newWidth = maxWidth;
+  const newHeight = Math.floor(newWidth / ratio);
+  return { width: newWidth, height: newHeight };
+}
+const WaterfallBars = (_a) => {
+  var _b = _a, {
+    margin = { top: 20, left: 100, bottom: 150, right: 70 },
+    chart: _c
+  } = _b, _d = _c, {
+    waterfallColors = {
+      positive: "#49b86f",
+      negative: "#c92e5b",
+      total: "#434857",
+      stepConnector: "#888d94"
+    }
+  } = _d, chart = __objRest(_d, [
+    "waterfallColors"
+  ]), {
+    className,
+    chartId,
+    allowZoom
+  } = _b;
+  var _a2;
+  const effectiveMargin = parseMargin(margin);
+  if (!chart.showAxisYTitle) {
+    effectiveMargin.left = 50;
+  }
+  let innerWidth = chart.ratio.width + (-effectiveMargin.left - effectiveMargin.right) / 2;
+  let innerHeight = chart.ratio.height + (-effectiveMargin.top - effectiveMargin.bottom) / 2;
+  if (innerWidth > chart.ratio.maxWidth) {
+    const newValues = adjustDimensions({
+      height: innerHeight,
+      width: innerWidth,
+      maxWidth: chart.ratio.maxWidth
+    });
+    innerWidth = newValues.width;
+    innerHeight = newValues.height;
+  }
+  const getXValue = (d) => d.key;
+  const getYValue = (d) => d.value;
+  const charts = arrayOrArray((_a2 = chart.dataSets) == null ? void 0 : _a2.data).filter((piece) => !!piece.sets).map((piece) => {
+    return __spreadProps$2(__spreadValues$2({}, piece), {
+      coordinate: piece.sets
+    });
+  });
+  const [currentPie, setCurrentPie] = useState("0");
+  const chartNames = charts.map((piece) => {
+    return piece.name;
+  });
+  const steps = useMemo(
+    () => {
+      var _a3;
+      return calculateWaterfallSteps({
+        data: arrayOrArray(chart.dataSets.data)[currentPie].sets,
+        xAccessor: getXValue,
+        yAccessor: getYValue,
+        showFinal: (_a3 = chart.showTotal) != null ? _a3 : true,
+        colors: waterfallColors
+      });
+    },
+    [chart.dataSets.data, chart.showTotal, currentPie, waterfallColors]
+  );
+  const padding = 0.2;
+  const xScale = scaleBand({
+    domain: steps.map((step) => step.x),
+    padding,
+    range: [0, innerWidth]
+  });
+  const yDomain = useMemo(() => {
+    const values = steps.flatMap((step) => [step.start, step.end]);
+    const [min, max] = extent(values);
+    return min != null && max != null ? [min - 5, max + 5] : void 0;
+  }, [steps]);
+  const yScale = scaleLinear({
+    domain: yDomain,
+    nice: true,
+    range: [innerHeight, 0]
+  });
+  const id = useMemo(() => `VerticalBars${uniqueId()}`, []);
+  useLayoutEffect(() => {
+    document.querySelectorAll(`#${id} .tickLabel`).forEach((current) => {
+      const width = current.getBoundingClientRect().width;
+      current.style.transformOrigin = current.getAttribute("x") + "px 14px";
+      current.style.transform = `rotate(25deg) translateX(${width / 2}px)`;
+    });
+  });
+  const { boxRef, elementRef } = usePanAndZoom(
+    void 0,
+    !allowZoom
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    charts.length > 1 && /* @__PURE__ */ jsx(Box, { className: "chart__combo__wrapper", children: /* @__PURE__ */ jsx(
+      ChartSelector,
+      {
+        chartId,
+        pieces: chartNames,
+        className: "chartSelectorCombo",
+        current: currentPie,
+        setCurrent: setCurrentPie
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Box, { id, className, ref: boxRef, children: /* @__PURE__ */ jsx(
+      "svg",
+      {
+        height: chart.ratio.height,
+        width: chart.ratio.width,
+        ref: elementRef,
+        children: /* @__PURE__ */ jsxs(Group, { left: effectiveMargin.left, top: effectiveMargin.top, children: [
+          /* @__PURE__ */ jsx(GridRows, { scale: yScale, width: innerWidth, strokeDasharray: "5" }),
+          steps.map((step, index) => {
+            var _a3;
+            const x = xScale(step.x);
+            const y = yScale(Math.max(step.start, step.end));
+            if (x == null || y == null) {
+              return null;
+            }
+            const barHeight = Math.abs(yScale(step.start) - yScale(step.end));
+            const isLast = index === steps.length - 1;
+            const linePadding = 2;
+            const x1 = x + xScale.bandwidth() + linePadding;
+            const x2 = x + xScale.bandwidth() / (1 - padding) - linePadding;
+            const lineY = step.end < step.start ? y + barHeight : y;
+            const labelOffset = 10;
+            const labelY = yScale(step.end) + (step.y < 0 ? labelOffset : -labelOffset);
+            let currentYValue = 0;
+            steps.filter((_, i) => {
+              var _a4;
+              if (((_a4 = chart.showTotal) != null ? _a4 : true) && !steps[i + 1]) {
+                return false;
+              }
+              return i <= index;
+            }).forEach((step2) => {
+              currentYValue += Number(step2.y);
+            });
+            return /* @__PURE__ */ jsx(
+              WaterfallBar,
+              {
+                chart,
+                columnName: chartNames[currentPie],
+                fill: step.color,
+                height: barHeight,
+                isLast,
+                lineY,
+                step,
+                stroke: waterfallColors.stepConnector,
+                strokeDashArray: 2,
+                textContent: ((_a3 = chart.showTotal) != null ? _a3 : true) ? step.y : currentYValue,
+                textX: x + xScale.bandwidth() / 2,
+                textY: labelY + 5,
+                width: xScale.bandwidth(),
+                x,
+                y,
+                x1,
+                x2
+              },
+              index
+            );
+          }),
+          /* @__PURE__ */ jsx(
+            AxisLeft,
+            {
+              label: "",
+              scale: yScale,
+              hideAxisLine: true,
+              hideTicks: true,
+              tickLabelProps: () => ({
+                textAnchor: "end",
+                verticalAnchor: "middle"
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            AxisBottom,
+            {
+              scale: xScale,
+              top: innerHeight,
+              tickLabelProps: () => ({
+                textAnchor: "middle",
+                verticalAnchor: "middle",
+                className: "tickLabel"
+              })
+            }
+          )
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      LegendContainer,
+      {
+        id: chartId,
+        avoidEvent: true,
+        references: [
+          {
+            title: arrayOrArray(chart.dataSets.data)[currentPie].name,
+            color: "transparent"
+          }
+        ]
+      }
+    )
+  ] });
+};
+
+var __defProp$1 = Object.defineProperty;
+var __defProps$1 = Object.defineProperties;
+var __getOwnPropDescs$1 = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$1 = Object.getOwnPropertySymbols;
+var __hasOwnProp$1 = Object.prototype.hasOwnProperty;
+var __propIsEnum$1 = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$1 = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$1.call(b, prop))
+      __defNormalProp$1(a, prop, b[prop]);
+  if (__getOwnPropSymbols$1)
+    for (var prop of __getOwnPropSymbols$1(b)) {
+      if (__propIsEnum$1.call(b, prop))
+        __defNormalProp$1(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
+const frontColor = "hsl(196, 37%, 13%)";
+function useMultipleRefs(...refs) {
+  return React.useCallback(
+    function setRef(element) {
+      refs.forEach((current) => {
+        if (current)
+          current.current = element;
+      });
+    },
+    [refs]
+  );
+}
+const [, chartMethods, ChartRenderer] = makeImperativeComponent()({
+  Component: makeStyledComponent(
+    "ChartRenderer",
+    "layout.charts",
+    {
+      red: {
+        schema: "schemas.red"
+      },
+      orange: {
+        schema: "schemas.orange"
+      },
+      green: {
+        schema: "schemas.green"
+      },
+      blue: {
+        schema: "schemas.blue"
+      },
+      violet: {
+        schema: "schemas.violet"
+      },
+      turquoise: {
+        schema: "schemas.turquoise"
+      },
+      yellow: {
+        schema: "schemas.yellow"
+      },
+      grey: {
+        schema: "schemas.grey"
+      },
+      ocean: {
+        schema: "schemas.ocean"
+      },
+      sunset: {
+        schema: "schemas.sunset"
+      },
+      common: {
+        axis: {
+          stroke: frontColor,
+          title: frontColor
+        },
+        schema: frontColor,
+        background: "hsl(200deg 20% 98%)",
+        grid: {
+          stroke: frontColor,
+          opacity: "0.1"
+        },
+        toolTip: {
+          backgroundColor: "rgb(232, 241, 255)",
+          border: "1px solid #07c",
+          color: frontColor,
+          padding: ".3rem .5rem",
+          borderRadius: "3px",
+          fontSize: "18px",
+          boxShadow: "0 1px 2px rgba(33,33,33,0.2)",
+          lineHeight: "1em"
+        }
+      },
+      ".legendContainer": {
+        display: "flex",
+        flexDirection: "row",
+        gap: spacing(3),
+        flexWrap: "wrap"
+      },
+      ".chart__combo__wrapper": {
+        position: "absolute"
+      }
+    },
+    // eslint-disable-next-line react/display-name
+    React.forwardRef(
+      ({
+        currentChart,
+        chartId,
+        allowZoom
+      }, ref) => {
+        const innerRef = React.useRef(null);
+        const setRefs = useMultipleRefs(
+          ref,
+          innerRef
+        );
+        const contextValue = useMemo(() => ({ chartId }), [chartId]);
+        const CurrentChart = getIndex(
+          [PieChart, HorizontalBars, VerticalBars, LineChart, WaterfallBars],
+          [
+            currentChart.chartType === "pie2D",
+            currentChart.chartType === "barH2D",
+            currentChart.chartType === "barV2D",
+            currentChart.chartType === "linear",
+            currentChart.chartType === "waterfall"
+          ],
+          0
+        );
+        return /* @__PURE__ */ jsx(ChartContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+          Box,
+          __spreadProps$1(__spreadValues$1({
+            ref: setRefs,
+            className: "chart__chartRenderer"
+          }, getVariant("layout.charts")), {
+            children: /* @__PURE__ */ jsx(
+              CurrentChart,
+              {
+                chart: currentChart,
+                chartId,
+                parentRef: innerRef,
+                allowZoom
+              }
+            )
+          })
+        ) });
+      }
+    ),
+    true
+  )
+});
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const START_ANGLE = 0;
+const END_ANGLE = 360;
+const TLight = ({
+  addBorder = false,
+  colorRanges,
+  maxValue,
+  minValue,
+  currentValue,
+  height,
+  valueRanges,
+  width,
+  currentValueColor,
+  currentValueFontSize
+}) => {
+  const value = currentValue;
+  const diameter = Math.min(height, width);
+  const domainMax = maxValue != null ? maxValue : valueRanges[valueRanges.length - 1];
+  const domainMin = minValue != null ? minValue : valueRanges[0];
+  const gauge = useGauge({
+    domain: [domainMin, domainMax],
+    startAngle: START_ANGLE,
+    endAngle: END_ANGLE,
+    numTicks: 0,
+    diameter
+  });
+  function getColor(value2) {
+    var _a;
+    const index = valueRanges.findIndex((range) => value2 < range);
+    if (index === -1) {
+      return colorRanges[0];
+    }
+    return (_a = colorRanges[index - 1]) != null ? _a : colorRanges[index];
+  }
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsxs("svg", __spreadProps(__spreadValues({}, gauge.getSVGProps()), { viewBox: "-325 -325 600 600", children: [
+    /* @__PURE__ */ jsx("g", { id: "arcs", children: /* @__PURE__ */ jsx(
+      "path",
+      __spreadProps(__spreadValues({}, gauge.getArcProps({
+        offset: 20,
+        startAngle: START_ANGLE,
+        endAngle: END_ANGLE
+      })), {
+        stroke: addBorder ? "black" : "transparent",
+        fill: getColor(value),
+        strokeLinecap: "round",
+        strokeWidth: 5
+      })
+    ) }),
+    /* @__PURE__ */ jsx("g", { children: /* @__PURE__ */ jsx(
+      "text",
+      {
+        textAnchor: "middle",
+        style: { fontSize: `${currentValueFontSize != null ? currentValueFontSize : 100}px` },
+        alignmentBaseline: "central",
+        fill: currentValueColor,
+        children: value
+      }
+    ) })
+  ] })) });
+};
+
+const WidgetContainer = () => {
+  const mockData = {
+    addBorder: true,
+    backgColor: "white",
+    currentValue: 1010,
+    height: 400,
+    width: 400,
+    maxValue: 1050,
+    minValue: 1e3,
+    noValueColor: "",
+    pointerColor: "blue",
+    ringAnchor: 5,
+    scaleFontSize: 20,
+    valueColor: "darkblue",
+    valueDecimals: 1,
+    valueFontSize: 50,
+    valueType: "",
+    widKpiType: 0,
+    zones: [
+      {
+        color: "blue",
+        maximum: 1020,
+        minimum: 1e3,
+        transparency: 20
+      },
+      {
+        color: "purple",
+        maximum: 1040,
+        minimum: 1020,
+        transparency: 50
+      },
+      {
+        color: "red",
+        maximum: 1050,
+        minimum: 1040,
+        transparency: 0
+      }
+    ]
+  };
+  const valueRanges = Array.from(
+    new Set(
+      arrayOrArray(mockData.zones).map((zone) => {
+        return [zone.minimum, zone.maximum];
+      }).flat().sort((a, b) => a - b)
+    )
+  );
+  const colorRanges = arrayOrArray(mockData.zones).map((zone) => {
+    return tinycolor(zone.color).setAlpha(1 - zone.transparency / 100).toPercentageRgbString();
+  }).flat();
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+    TLight,
+    {
+      addBorder: mockData.addBorder,
+      backgroundColor: mockData.backgColor,
+      colorRanges,
+      currentValue: mockData.currentValue,
+      decimals: mockData.valueDecimals,
+      currentValueColor: mockData.valueColor,
+      currentValueFontSize: mockData.valueFontSize,
+      height: mockData.height,
+      maxValue: mockData.maxValue,
+      minValue: mockData.minValue,
+      pointerColor: mockData.pointerColor,
+      scaleValuesSize: mockData.scaleFontSize,
+      valueRanges,
+      width: mockData.width
+    }
+  ) });
+};
+
+export { ChartRenderer, WidgetContainer };
+//# sourceMappingURL=index.js.map