@apia/charts 0.3.3 → 0.3.4

package/dist/index.js

@@ -1,18 +1,18 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { createContext, useContext, useCallback, useState, useMemo, useLayoutEffect, useRef, useEffect, createElement } from 'react';
-import { Box, useThemeUI, spacing, Select, makeStyledComponent, getVariant } from '@apia/theme';
+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 { makeImperativeComponent, arrayOrArray, useImperativeComponentEvents, getValueByPath, usePanAndZoom, animate, addBoundary, usePrevious, getIndex, noNaN } from '@apia/util';
+import { useImperativeComponentContext, makeImperativeComponent, arrayOrArray, useImperativeComponentEvents, getValueByPath, usePanAndZoom, 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 { usePanelParametersSelector, usePanelIdentity } from '@apia/dashboard';
 import tinycolor from 'tinycolor2';
 import { localPoint } from '@visx/event';
 import { SimpleButton, useTooltip } from '@apia/components';
 import { icons } from '@apia/icons';
+import { ApiaUtil } from '@apia/objects';
 import Pie from '@visx/shape/lib/shapes/Pie';
 import { min, max, extent } from 'd3-array';
 import * as allCurves from '@visx/curve';
@@ -29,8 +29,6 @@ function parseMargin(margin = {
   return typeof margin === "number" ? { left: margin, right: margin, top: margin, bottom: margin } : margin;
 }
 
-const ChartContext = createContext({});
-
 const ColoredLegendItem = ({
   groupId,
   title,
@@ -40,7 +38,7 @@ const ColoredLegendItem = ({
   isAnyHighlighted,
   avoidEvent
 }) => {
-  const { chartId } = useContext(ChartContext);
+  const { id: chartId } = useImperativeComponentContext();
   const handleMouseEnter = useCallback(() => {
     if (avoidEvent) {
       return;
@@ -51,6 +49,7 @@ const ColoredLegendItem = ({
     if (avoidEvent) {
       return;
     }
+    new ApiaUtil().tooltips.close();
     chartMethods(chartId, "highlight", "");
   }, [avoidEvent, chartId]);
   return /* @__PURE__ */ jsx(
@@ -76,7 +75,7 @@ const NumberedLegendItem = ({
   isAnyHighlighted,
   avoidEvent
 }) => {
-  const { chartId } = useContext(ChartContext);
+  const { id: chartId } = useImperativeComponentContext();
   const handleMouseEnter = useCallback(() => {
     if (avoidEvent) {
       return;
@@ -87,6 +86,7 @@ const NumberedLegendItem = ({
     if (avoidEvent) {
       return;
     }
+    new ApiaUtil().tooltips.close();
     chartMethods(chartId, "highlight", "");
   }, [avoidEvent, chartId]);
   return /* @__PURE__ */ jsx(
@@ -150,6 +150,8 @@ const [legendContainerMethods, , LegendContainer] = makeImperativeComponent()({
   }
 });
 
+const ChartContext = createContext({});
+
 const Bar$1 = ({
   bar,
   barGroup,
@@ -167,32 +169,66 @@ const Bar$1 = ({
   )) == 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 })
-    ] })
-  });
+  const ref = useRef(null);
   useImperativeComponentEvents({
-    highlight(barName) {
+    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 !== "");
+          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.split(" - ").length === 2) {
         setIsHighlighted(
@@ -201,12 +237,31 @@ const Bar$1 = ({
         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__ */ jsxs("g", { children: [
-    /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(
       "text",
       {
         x: bar.x + 5,
@@ -219,11 +274,7 @@ const Bar$1 = ({
           opacity: isHighlighted ? 1 : 0,
           transition: "opacity 500ms"
         },
-        children: [
-          bar.value,
-          " - ",
-          parsedData[barGroup.index].columnName
-        ]
+        children: bar.value
       }
     ),
     /* @__PURE__ */ jsx(
@@ -231,6 +282,7 @@ const Bar$1 = ({
       {
         as: "rect",
         className: "chart__barRect",
+        ref,
         sx: useMemo(
           () => ({
             fill: isAnyHighlighted ? `#${tinycolor(currentBarColor).desaturate(70).toHex()}` : currentBarColor,
@@ -260,23 +312,25 @@ const Bar$1 = ({
           if (!isSingle) {
             legendContainerMethods.highlight(chartId, bar.key);
           }
+          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)
+          if (!point || !chart.showValues)
             return;
-          open({
-            attachToElement: () => ev.target,
-            attachToElementAnchorPoint: "center"
-          });
         },
         onMouseLeave: (ev) => {
           var _a2;
           if (!isSingle) {
             legendContainerMethods.highlight(chartId, "");
           }
+          chartMethods(chartId, "highlight", "");
           (_a2 = ev.target.classList) == null ? void 0 : _a2.remove("over");
         },
         children: /* @__PURE__ */ jsx(
@@ -351,7 +405,7 @@ function useChartStyles(schemeName) {
     schema: getValueByPath(
       theme.colors,
       // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-      (_c = charts[schemeName || "blue"]) == null ? void 0 : _c.schema
+      (_c = charts[schemeName && schemeName !== "0" ? schemeName : "blue"]) == null ? void 0 : _c.schema
     )
   };
   if (typeof currentStylescheme.schema === "object" && currentStylescheme.schema) {
@@ -494,16 +548,11 @@ const HorizontalBars = ({
     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 isLogScale = false;
   const xScale = useMemo(() => {
-    if (!isLogScale) {
+    {
       return xScaleLine;
     }
-    return xScaleLog;
   }, [isLogScale, xScaleLine, xScaleLog]);
   const id = useMemo(() => `HorizontalBars${uniqueId()}`, []);
   useLayoutEffect(() => {
@@ -619,7 +668,7 @@ const HorizontalBars = ({
       {
         ref: boxRef,
         id,
-        className: `${outerClassName != null ? outerClassName : ""} ${chartId} ${chart.title} chartBox`,
+        className: `${outerClassName != null ? outerClassName : ""} ${chartId} ${chart.title} chartBox chartContainer`,
         sx: React.useMemo(() => {
           return {
             [`.__${chartId != null ? chartId : outerClassName}`]: {
@@ -707,6 +756,7 @@ const HorizontalBars = ({
                   scale: yScale,
                   left: effectiveMargin.left,
                   label: chart.chartType !== "pie2D" && chart.showAxisYTitle ? chart.axisYTitle : "",
+                  labelOffset: 10,
                   tickLabelProps: () => ({
                     display: "none"
                   })
@@ -721,7 +771,7 @@ const HorizontalBars = ({
                   tickLabelProps: {
                     className: "tickLabel"
                   },
-                  labelOffset: 50
+                  labelOffset: 30
                 }
               )
             ]
@@ -729,20 +779,23 @@ const HorizontalBars = ({
         )
       }
     ),
-    colorReference.length !== 0 && /* @__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
-      }
-    )
+    /* @__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: "Legend" }),
+      /* @__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
+        }
+      )
+    ] }) })
   ] });
 };
 
@@ -750,36 +803,53 @@ const Slice = ({
   arc,
   arcPath,
   chart,
-  actualColor
+  actualColor,
+  chartId: outerChartId
 }) => {
   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 !== void 0 ? "- " + arc.data.percentage : ""}${arc.data.percentage !== "" && arc.data.percentage !== void 0 ? "%" : ""}` })
-    ] })
-  });
+  const ref = useRef(null);
+  const name = arc.data;
+  const { id: chartId } = useImperativeComponentContext();
   useImperativeComponentEvents({
-    highlight(barName) {
+    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
+        });
+      }
     }
   });
-  const { chartId } = useContext(ChartContext);
-  const name = arc.data;
   return /* @__PURE__ */ jsx(
     "path",
     {
-      id: `arc-${name.key}-${name.value}`,
+      id: `arc-${name.key}-${name.value}-${outerChartId}`,
+      ref,
       style: useMemo(
         () => ({
           "&:hover": {
@@ -789,12 +859,14 @@ const Slice = ({
         }),
         [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,
@@ -802,47 +874,15 @@ const Slice = ({
         };
         if (!point)
           return;
-        open({
-          attachToElement: () => ev.target,
-          attachToElementAnchorPoint: "center"
-        });
       },
       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}`
-  );
-};
-
-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
-    }
+    `arc-${name.key}-${name.value}-${outerChartId}`
   );
 };
 
@@ -950,7 +990,18 @@ const usePieAnimation = ({
             coordinate: step.sets,
             name: step.name
           };
-          setDataset([step]);
+          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), {
@@ -970,6 +1021,37 @@ const usePieAnimation = ({
   }
 };
 
+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;
@@ -1008,19 +1090,20 @@ const PieChart = ({
   chartId,
   allowZoom
 }) => {
-  var _a, _b;
+  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
       });
-    })[0];
-  }, [dataset]);
+    })[dataset[parseInt(currentPie)] ? parseInt(currentPie) : 0];
+  }, [currentPie, dataset]);
   usePieAnimation({
-    incomingColumn: arrayOrArray((_b = chart.dataSets) == null ? void 0 : _b.data)[0],
+    incomingColumn: arrayOrArray((_b = chart.dataSets) == null ? void 0 : _b.data)[dataset[parseInt(currentPie)] ? parseInt(currentPie) : 0],
     piezas,
     setDataset
   });
@@ -1047,7 +1130,9 @@ const PieChart = ({
   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(dataset[0].sets).map((coord) => {
+  const names = arrayOrArray(
+    ((_c = dataset[parseInt(currentPie)]) != null ? _c : dataset[0]).sets
+  ).map((coord) => {
     return coord.key;
   });
   const colorReference = names.map((name, index) => {
@@ -1061,6 +1146,15 @@ const PieChart = ({
     !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;
   }
@@ -1069,7 +1163,8 @@ const PieChart = ({
       Box,
       {
         ref: boxRef,
-        className: `${className ? className : ""} ${chartId} chartBox`,
+        id,
+        className: `${className ? className : ""} ${chartId} chartBox chartContainer`,
         sx: { textAlign: "center", pb: spacing(5) },
         children: /* @__PURE__ */ jsx(
           "svg",
@@ -1078,74 +1173,64 @@ const PieChart = ({
             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(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;
-                      const name = arc.data;
-                      const arcPath = pie.path(arc);
-                      return /* @__PURE__ */ jsx(
-                        Slice,
-                        {
-                          arc,
-                          arcPath,
-                          chart,
-                          actualColor: (_b2 = (_a2 = colorReference.find((color) => {
-                            return color.title === name.key;
-                          })) == null ? void 0 : _a2.color) != null ? _b2 : ""
-                        },
-                        `${name.key}_${name.value}`
-                      );
-                    });
-                    previousPaths.current = paths;
-                    return result;
-                  }
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                Pie,
-                {
-                  data: arrayOrArray(piezas.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}`);
-                    });
-                  }
+            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;
+                    const name = arc.data;
+                    const arcPath = pie.path(arc);
+                    return /* @__PURE__ */ jsx(
+                      Slice,
+                      {
+                        arc,
+                        chartId: id,
+                        arcPath,
+                        chart,
+                        actualColor: (_b2 = (_a2 = colorReference.find((color) => {
+                          return color.title === name.key;
+                        })) == null ? void 0 : _a2.color) != null ? _b2 : ""
+                      },
+                      `${name.key}_${name.value}`
+                    );
+                  });
+                  previousPaths.current = paths;
+                  return result;
                 }
-              )
-            ] })
+              }
+            ) })
           }
         )
       },
       piezas.name
     ),
-    chart.showLegend && colorReference.length > 1 && /* @__PURE__ */ jsx(LegendContainer, { id: chartId, references: colorReference })
+    /* @__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: "Chart Selector" }),
+        /* @__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: "Legend" }),
+        /* @__PURE__ */ jsx(LegendContainer, { id: chartId, references: colorReference })
+      ] })
+    ] })
   ] });
 };
 
@@ -1165,32 +1250,66 @@ const Bar = ({
   )) == 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 })
-    ] })
-  });
+  const ref = useRef(null);
   useImperativeComponentEvents({
-    highlight(barName) {
+    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 !== "");
+          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.split(" - ").length === 2) {
         setIsHighlighted(
@@ -1199,6 +1318,25 @@ const Bar = ({
         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"
+          });
+        }
       }
     }
   });
@@ -1225,6 +1363,7 @@ const Bar = ({
       {
         as: "rect",
         className: "chart__barRect",
+        ref,
         sx: useMemo(
           () => ({
             fill: isAnyHighlighted ? `#${tinycolor(currentBarColor).desaturate(70).toHex()}` : currentBarColor,
@@ -1253,23 +1392,25 @@ const Bar = ({
           if (!isSingle) {
             legendContainerMethods.highlight(chartId, bar.key);
           }
+          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)
+          if (!point || !chart.showValues)
             return;
-          open({
-            attachToElement: () => ev.target,
-            attachToElementAnchorPoint: "center"
-          });
         },
         onMouseLeave: (ev) => {
           var _a2;
           if (!isSingle) {
             legendContainerMethods.highlight(chartId, "");
           }
+          chartMethods(chartId, "highlight", "");
           (_a2 = ev.target.classList) == null ? void 0 : _a2.remove("over");
         },
         children: [
@@ -1349,7 +1490,7 @@ const VerticalBars = ({
     effectiveMargin.left = 50;
   }
   let innerWidth = chart.ratio.width + (-effectiveMargin.left - effectiveMargin.right) / 2;
-  let innerHeight = chart.ratio.height + (-effectiveMargin.top - effectiveMargin.bottom) / 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,
@@ -1437,16 +1578,11 @@ const VerticalBars = ({
     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 isLogScale = false;
   const yScale = useMemo(() => {
-    if (!isLogScale) {
+    {
       return yScaleLine;
     }
-    return yScaleLog;
   }, [isLogScale, yScaleLine, yScaleLog]);
   const id = useMemo(() => `VerticalBars${uniqueId()}`, []);
   useLayoutEffect(() => {
@@ -1565,7 +1701,7 @@ const VerticalBars = ({
       {
         ref: boxRef,
         id,
-        className: `${className != null ? className : ""} ${chart.title} chartBox`,
+        className: `${className != null ? className : ""} ${chart.title} chartBox chartContainer`,
         sx: {
           overflow: "hidden"
         },
@@ -1678,17 +1814,9 @@ const VerticalBars = ({
                   top: innerHeight,
                   scale: colorReference.length === 1 && numberReference.length > 0 ? numericXScale : xScale,
                   label: chart.chartType !== "pie2D" && chart.showAxisXTitle ? chart.axisXTitle : "",
-                  tickLabelProps: (
-                    // colorReference.length === 1 && numberReference.length > 0
-                    //   ? {}
-                    //   : {
-                    //       className: 'tickLabel',
-                    //       textAnchor: 'start',
-                    //     }
-                    { display: "none" }
-                  ),
+                  tickLabelProps: { display: "none" },
                   tickLineProps: { display: "none" },
-                  labelOffset: 50
+                  labelOffset: 0
                 }
               )
             ]
@@ -1696,20 +1824,17 @@ const VerticalBars = ({
         )
       }
     ),
-    colorReference.length !== 0 && /* @__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
-      }
-    )
+    /* @__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: "Legend" }),
+      /* @__PURE__ */ jsx(
+        LegendContainer,
+        {
+          id: chartId,
+          references: colorReference.length === 1 && numberReference.length > 0 ? numberReference : colorReference,
+          useNumbered: colorReference.length === 1
+        }
+      )
+    ] }) })
   ] });
 };
 
@@ -1746,7 +1871,7 @@ const Node = ({
     /* @__PURE__ */ jsx(
       "circle",
       {
-        r: 10,
+        r: 6,
         cx,
         cy,
         stroke: "transparent",
@@ -1803,28 +1928,43 @@ 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(
+  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 {
-    columns,
+    lines,
+    longestLine,
+    longestLineIndex,
+    tallestLine: [...new Set(nodesData.map((value) => value.value))],
     xScale: scaleOrdinal({
-      domain: arrayOrArray(columns[0].sets).map(getX)
+      domain: longestLine.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
+        ((_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: [
-        ((_e = min(allData, getY)) != null ? _e : 1 > 0) ? (_f = min(allData, getY)) != null ? _f : 1 : 1,
-        (_g = max(allData, getY)) != null ? _g : 10
+        ((_f = min(nodesData, getY)) != null ? _f : 1) > 0 ? (_g = min(nodesData, getY)) != null ? _g : 1 : 1,
+        (_h = max(nodesData, getY)) != null ? _h : 10
       ]
     })
   };
@@ -1850,25 +1990,39 @@ const LineChart = ({
     innerWidth = newValues.width;
     innerHeight = newValues.height;
   }
-  const { columns, xScale, yScale, yScaleLog } = parseData(chart);
+  const { lines, xScale, yScale, yScaleLog, longestLine } = parseData(chart);
   const styles = useChartStyles(chart.colorSchema);
-  const coordinates = arrayOrArray(columns[0].sets);
-  const coordinatesArray = columns.map((col) => {
+  const coordinates = arrayOrArray(lines[0].sets);
+  const coordinatesArray = lines.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
-  ]);
+  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 - effectiveMargin.left
+    ];
+    return divideRangeBetweenStrings(rangeArr[0], rangeArr[1], longestLine);
+  }, [effectiveMargin, innerWidth, longestLine]);
+  xScale.range(xScaleRange);
+  const yScaleRange = useMemo(() => {
+    const rangeArr = [
+      innerHeight - (effectiveMargin.top + effectiveMargin.bottom) / 2,
+      typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top
+    ];
+    return rangeArr;
+  }, [effectiveMargin, innerHeight]);
+  yScale.range(yScaleRange);
   yScaleLog.range([
     innerHeight,
     typeof effectiveMargin === "number" ? effectiveMargin : effectiveMargin.top
@@ -1877,7 +2031,7 @@ const LineChart = ({
   const actualYScale = useMemo(() => {
     return yScale;
   }, [yScale]);
-  const id = useMemo(() => `VerticalBars${uniqueId()}`, []);
+  const id = useMemo(() => `Linear${uniqueId()}`, []);
   useLayoutEffect(() => {
     document.querySelectorAll(`#${id} .tickLabel`).forEach((current) => {
       const width = current.getBoundingClientRect().width;
@@ -1892,24 +2046,6 @@ const LineChart = ({
       return __spreadProps$8(__spreadValues$a({}, 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(
@@ -1948,13 +2084,38 @@ const LineChart = ({
     });
     return { returnColumnsArray, columnColor: dataColor };
   });
-  const colorReference = setsWithColor.map((column) => {
-    var _a;
-    return {
-      color: (_a = column.columnColor) != null ? _a : "",
-      title: column.returnColumnsArray[0].columnName
-    };
-  });
+  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) => {
@@ -1967,29 +2128,6 @@ const LineChart = ({
     });
     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) {
@@ -2004,8 +2142,22 @@ const LineChart = ({
     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", children: /* @__PURE__ */ jsxs(
+    /* @__PURE__ */ jsx(Box, { id, ref: boxRef, className: "chartBox chartContainer", children: /* @__PURE__ */ jsxs(
       "svg",
       {
         ref: elementRef,
@@ -2016,7 +2168,7 @@ const LineChart = ({
         onMouseMove: (ev) => {
           var _a;
           const rect = (_a = elementRef.current) == null ? void 0 : _a.getBoundingClientRect();
-          let clientX = ev.clientX;
+          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;
@@ -2026,7 +2178,7 @@ const LineChart = ({
             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) => {
+            const currentColumns = lines.map((col) => {
               let colNames = "";
               nearNodes.forEach((node) => {
                 if (col.name === node.columnName) {
@@ -2045,10 +2197,45 @@ const LineChart = ({
               setCurrentCircle([...newCircleValues]);
             }
             setNearNodesArray(nearNodes);
-            open({
-              attachToElement: () => ev.target,
-              attachToElementAnchorPoint: "center"
-            });
+            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.close();
+            }
           } else if (nearNodes.length === 0) {
             setCurrentCircle([]);
           }
@@ -2067,7 +2254,7 @@ const LineChart = ({
               strokeOpacity: styles == null ? void 0 : styles.grid.opacity
             }
           ),
-          columns.map((column, i) => {
+          lines.map((column, i) => {
             var _a;
             const currentCoordinates = arrayOrArray(column.sets);
             const newColor = (_a = setsWithColor.find(
@@ -2098,7 +2285,8 @@ const LineChart = ({
                       stroke: newColor != null ? newColor : "black",
                       strokeWidth: 2,
                       strokeOpacity: 1,
-                      shapeRendering: "geometricPrecision"
+                      shapeRendering: "geometricPrecision",
+                      color: "transparent"
                     }
                   ),
                   currentCoordinates.map((coordinate, j) => {
@@ -2165,41 +2353,13 @@ const LineChart = ({
         ]
       }
     ) }),
-    colorReference.length > 1 && /* @__PURE__ */ jsx(LegendContainer, { id: chartId, references: colorReference })
+    /* @__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: "Legend" }),
+      /* @__PURE__ */ jsx(LegendContainer, { id: chartId, references: colorReference })
+    ] }) })
   ] });
 };
 
-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 WaterfallBar = ({
   width,
   height,
@@ -2427,7 +2587,7 @@ const WaterfallBars = (_a) => {
     nice: true,
     range: [innerHeight, 0]
   });
-  const id = useMemo(() => `VerticalBars${uniqueId()}`, []);
+  const id = useMemo(() => `WaterfallBars${uniqueId()}`, []);
   useLayoutEffect(() => {
     document.querySelectorAll(`#${id} .tickLabel`).forEach((current) => {
       const width = current.getBoundingClientRect().width;
@@ -2440,21 +2600,11 @@ const WaterfallBars = (_a) => {
     !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: `${className ? className : ""} chartBox`,
+        className: `${className ? className : ""} chartBox chartContainer`,
         ref: boxRef,
         children: /* @__PURE__ */ jsx(
           "svg",
@@ -2543,19 +2693,19 @@ const WaterfallBars = (_a) => {
         )
       }
     ),
-    /* @__PURE__ */ jsx(
-      LegendContainer,
-      {
-        id: chartId,
-        avoidEvent: true,
-        references: [
-          {
-            title: arrayOrArray(chart.dataSets.data)[currentPie].name,
-            color: "transparent"
-          }
-        ]
-      }
-    )
+    /* @__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: "Chart Selector" }),
+      /* @__PURE__ */ jsx(
+        ChartSelector,
+        {
+          chartId,
+          pieces: chartNames,
+          className: "chartSelectorCombo",
+          current: currentPie,
+          setCurrent: setCurrentPie
+        }
+      )
+    ] }) })
   ] });
 };
 
@@ -2647,11 +2797,13 @@ const [, chartMethods, ChartRenderer] = makeImperativeComponent()({
           lineHeight: "1em"
         }
       },
-      ".chartBox": {
-        position: "sticky",
-        top: "0",
-        background: "white",
-        zIndex: "1"
+      ".chartBox": () => {
+        return {
+          position: responsive({ 0: "static", 3: "sticky" }),
+          top: "0",
+          background: "white",
+          zIndex: "1"
+        };
       },
       ".legendContainer": {
         display: "flex",
@@ -2669,9 +2821,6 @@ const [, chartMethods, ChartRenderer] = makeImperativeComponent()({
           }
         })
       },
-      ".chart__combo__wrapper": {
-        position: "absolute"
-      },
       ".legendItem": {
         transition: "opacity 200ms",
         "&.isBlurred": {
@@ -2692,14 +2841,19 @@ const [, chartMethods, ChartRenderer] = makeImperativeComponent()({
       ({
         currentChart,
         chartId,
-        allowZoom
+        allowZoom,
+        id
       }, ref) => {
         const innerRef = React.useRef(null);
         const setRefs = useMultipleRefs(
           ref,
           innerRef
         );
-        const contextValue = useMemo(() => ({ chartId }), [chartId]);
+        const { id: imperativeId } = useImperativeComponentContext();
+        const contextValue = useMemo(
+          () => ({ chartId: String(imperativeId) }),
+          [imperativeId]
+        );
         const CurrentChart = getIndex(
           [PieChart, HorizontalBars, VerticalBars, LineChart, WaterfallBars],
           [
@@ -2717,13 +2871,15 @@ const [, chartMethods, ChartRenderer] = makeImperativeComponent()({
             ref: setRefs,
             className: "chart__chartRenderer"
           }, getVariant("layout.charts")), {
+            id,
             children: /* @__PURE__ */ jsx(
               CurrentChart,
               {
                 chart: currentChart,
                 chartId,
                 parentRef: innerRef,
-                allowZoom
+                allowZoom,
+                margin: currentChart.margin
               }
             )
           })
@@ -4035,7 +4191,10 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-const WidgetContainer = ({ data }) => {
+const WidgetContainer = ({
+  data,
+  id
+}) => {
   const realData = __spreadValues({}, data);
   const valueRanges = Array.from(
     new Set(
@@ -4060,7 +4219,6 @@ const WidgetContainer = ({ data }) => {
     ],
     0
   );
-  const panelData = usePanelIdentity();
   return /* @__PURE__ */ jsx(
     CurrentWidget,
     {
@@ -4073,7 +4231,7 @@ const WidgetContainer = ({ data }) => {
       currentValueFontSize: realData.valueFontSize,
       forceProp: realData.forceProp,
       height: realData.height,
-      panelId: panelData.panelId,
+      panelId: id,
       maxValue: realData.maxValue,
       minValue: realData.minValue,
       pointerColor: realData.pointerColor,