@mlw-packages/react-components 1.9.3 → 1.9.5

package/dist/index.mjs

@@ -42,7 +42,7 @@ import ptBR3 from 'date-fns/locale/pt-BR';
 import { useSensors, useSensor, MouseSensor, TouchSensor, PointerSensor, DndContext, DragOverlay, useDroppable, useDraggable } from '@dnd-kit/core';
 import { CSS } from '@dnd-kit/utilities';
 import { RadioGroup, RadioGroupItem } from '@radix-ui/react-radio-group';
-import { ResponsiveContainer, ComposedChart, XAxis, YAxis, Bar, Line, Area, CartesianGrid, ReferenceLine, Tooltip, Legend, LabelList, Rectangle, PieChart, Pie, Cell } from 'recharts';
+import { ResponsiveContainer, ComposedChart, XAxis, YAxis, Bar, Line, Area, CartesianGrid, Tooltip, Legend, LabelList, Rectangle, PieChart, Pie, Cell } from 'recharts';
 
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -15588,12 +15588,14 @@ var SystemTooltip = ({
   data,
   position,
   title = "Conex\xF5es",
+  isLoading = false,
   onMouseDown,
   onClose,
   onPositionChange
 }) => {
   const [localPos, setLocalPos] = useState(position);
   const [dragging, setDragging] = useState(false);
+  const [expandedId, setExpandedId] = useState(null);
   const offsetRef = useRef({ x: 0, y: 0 });
   const lastMouse = useRef({ x: 0, y: 0 });
   useEffect(() => setLocalPos(position), [position]);
@@ -15715,54 +15717,157 @@ var SystemTooltip = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsxs("div", { className: "px-4 pt-4 pb-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "px-4 pt-4 pb-3", children: isLoading ? /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsx(SkeletonBase, { className: "h-6 w-3/4" }),
+          /* @__PURE__ */ jsx(SkeletonBase, { className: "h-4 w-1/2" })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx("h3", { className: "text-xl font-bold text-foreground tracking-tight truncate", children: data.name }),
-          /* @__PURE__ */ jsx("h3", { className: "text-sm font-bold text-muted-foreground tracking-tight truncate", children: data.description })
-        ] }),
+          data.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground tracking-tight truncate", children: data.description })
+        ] }) }),
         /* @__PURE__ */ jsxs("div", { className: "px-3 pb-4 space-y-4 max-h-[300px] overflow-y-auto [&::-webkit-scrollbar]:w- [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/40 transition-colors", children: [
           /* @__PURE__ */ jsx(SeparatorBase, { className: "w-full" }),
-          entries.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500" }),
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-muted-foreground uppercase", children: "Entradas" })
+          isLoading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1", children: [
+                /* @__PURE__ */ jsx(SkeletonBase, { className: "w-1.5 h-1.5 rounded-full" }),
+                /* @__PURE__ */ jsx(SkeletonBase, { className: "h-3 w-16" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-1", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(SkeletonBase, { className: "h-10 w-full rounded-lg" }, i)) })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "space-y-1", children: entries.map((conn) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "group flex items-center justify-between p-2 rounded-lg bg-emerald-500/5 border border-emerald-500/10 hover:border-emerald-500/30 transition-all",
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: conn.name }) }),
-                  " ",
-                  /* @__PURE__ */ jsx(
-                    ArrowRight,
-                    {
-                      size: 14,
-                      className: "text-emerald-500 shrink-0 rotate-180"
-                    }
-                  )
-                ]
-              },
-              conn.id
-            )) })
-          ] }),
-          exits.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1", children: [
-              /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-blue-500" }),
-              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-muted-foreground uppercase", children: "Sa\xEDdas" })
+            /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1", children: [
+                /* @__PURE__ */ jsx(SkeletonBase, { className: "w-1.5 h-1.5 rounded-full" }),
+                /* @__PURE__ */ jsx(SkeletonBase, { className: "h-3 w-16" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-1", children: [1, 2].map((i) => /* @__PURE__ */ jsx(SkeletonBase, { className: "h-10 w-full rounded-lg" }, i)) })
+            ] })
+          ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            entries.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-emerald-500" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-muted-foreground uppercase", children: "Entradas" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-1", children: entries.map((conn) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "group flex items-center justify-between p-2 rounded-lg bg-emerald-500/5 border border-emerald-500/10 hover:border-emerald-500/30 transition-all cursor-pointer",
+                    onClick: () => setExpandedId(expandedId === conn.id ? null : conn.id),
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: conn.name }) }),
+                      /* @__PURE__ */ jsx(
+                        ArrowRight,
+                        {
+                          size: 14,
+                          className: "text-emerald-500 shrink-0 rotate-180"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                expandedId === conn.id && conn.integration && /* @__PURE__ */ jsxs("div", { className: "ml-2 p-2 rounded-lg bg-muted/30 border border-border/20 text-xs space-y-1", children: [
+                  conn.integration.Nome && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Nome:" }),
+                    " ",
+                    conn.integration.Nome
+                  ] }),
+                  (conn.integration.tipo || conn.integration.Tipo) && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Tipo:" }),
+                    " ",
+                    conn.integration.tipo || conn.integration.Tipo
+                  ] }),
+                  conn.integration.Protocolos && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Protocolos:" }),
+                    " ",
+                    conn.integration.Protocolos
+                  ] }),
+                  conn.integration.Ambiente && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Ambiente:" }),
+                    " ",
+                    conn.integration.Ambiente
+                  ] }),
+                  conn.integration.Setor && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Setor:" }),
+                    " ",
+                    conn.integration.Setor
+                  ] }),
+                  conn.integration.Contato && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Contato:" }),
+                    " ",
+                    conn.integration.Contato
+                  ] }),
+                  conn.integration.Sustentacao && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Sustenta\xE7\xE3o:" }),
+                    " ",
+                    conn.integration.Sustentacao
+                  ] })
+                ] })
+              ] }, conn.id)) })
             ] }),
-            /* @__PURE__ */ jsx("div", { className: "space-y-1", children: exits.map((conn) => /* @__PURE__ */ jsxs(
-              "div",
-              {
-                className: "group flex items-center justify-between p-2 rounded-lg bg-blue-500/5 border border-blue-500/10 hover:border-blue-500/30 transition-all",
-                children: [
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: conn.name }) }),
-                  /* @__PURE__ */ jsx(ArrowRight, { size: 14, className: "text-blue-500 shrink-0" })
-                ]
-              },
-              conn.id
-            )) })
-          ] }),
-          data.connections.length === 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Nenhuma conex\xE3o encontrada" }) })
+            exits.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 px-1", children: [
+                /* @__PURE__ */ jsx("div", { className: "w-1.5 h-1.5 rounded-full bg-blue-500" }),
+                /* @__PURE__ */ jsx("span", { className: "text-[10px] font-bold text-muted-foreground uppercase", children: "Sa\xEDdas" })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "space-y-1", children: exits.map((conn) => /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "group flex items-center justify-between p-2 rounded-lg bg-blue-500/5 border border-blue-500/10 hover:border-blue-500/30 transition-all cursor-pointer",
+                    onClick: () => setExpandedId(expandedId === conn.id ? null : conn.id),
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsx("span", { className: "text-sm font-medium truncate", children: conn.name }) }),
+                      /* @__PURE__ */ jsx(
+                        ArrowRight,
+                        {
+                          size: 14,
+                          className: "text-blue-500 shrink-0"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                expandedId === conn.id && conn.integration && /* @__PURE__ */ jsxs("div", { className: "ml-2 p-2 rounded-lg bg-muted/30 border border-border/20 text-xs space-y-1", children: [
+                  conn.integration.Nome && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Nome:" }),
+                    " ",
+                    conn.integration.Nome
+                  ] }),
+                  (conn.integration.tipo || conn.integration.Tipo) && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Tipo:" }),
+                    " ",
+                    conn.integration.tipo || conn.integration.Tipo
+                  ] }),
+                  conn.integration.Protocolos && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Protocolos:" }),
+                    " ",
+                    conn.integration.Protocolos
+                  ] }),
+                  conn.integration.Ambiente && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Ambiente:" }),
+                    " ",
+                    conn.integration.Ambiente
+                  ] }),
+                  conn.integration.Setor && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Setor:" }),
+                    " ",
+                    conn.integration.Setor
+                  ] }),
+                  conn.integration.Contato && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Contato:" }),
+                    " ",
+                    conn.integration.Contato
+                  ] }),
+                  conn.integration.Sustentacao && /* @__PURE__ */ jsxs("div", { children: [
+                    /* @__PURE__ */ jsx("span", { className: "font-semibold", children: "Sustenta\xE7\xE3o:" }),
+                    " ",
+                    conn.integration.Sustentacao
+                  ] })
+                ] })
+              ] }, conn.id)) })
+            ] }),
+            data.connections.length === 0 && !isLoading && /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center p-6 text-center", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: "Nenhuma conex\xE3o encontrada" }) })
+          ] })
         ] })
       ]
     },
@@ -16022,10 +16127,10 @@ var HorizontalLegend = ({
     const label = mapperConfig[key]?.label ?? labelMap?.[key] ?? formatFieldName2(key);
     return legendUppercase ? label.toUpperCase() : label;
   };
-  return /* @__PURE__ */ jsx("div", { className: cn(className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-4 flex-wrap", children: [
+  return /* @__PURE__ */ jsx("div", { className: cn(className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-2 sm:gap-3 md:gap-4 overflow-x-auto", children: [
     allKeys.map((key) => {
       const displayLabel = formatLegendLabel(key);
-      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2", children: [
+      return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 flex-shrink-0", children: [
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -16033,10 +16138,10 @@ var HorizontalLegend = ({
             style: { backgroundColor: finalColors[key] }
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm tracking-[0] break-words", children: displayLabel })
+        /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm tracking-[0] whitespace-nowrap", children: displayLabel })
       ] }, key);
     }),
-    orderBy && maxPeriodLabel && minPeriodLabel && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-4 w-full sm:w-auto justify-center mt-2 sm:mt-0 sm:ml-3 sm:pl-3 md:ml-4 md:pl-4 sm:border-l border-border", children: [
+    orderBy && maxPeriodLabel && minPeriodLabel && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-4 ml-3 pl-3 md:ml-4 md:pl-4 border-l border-border flex-shrink-0", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-1.5", children: [
         /* @__PURE__ */ jsx(
           FunnelSimpleIcon,
@@ -16045,7 +16150,7 @@ var HorizontalLegend = ({
             weight: "bold"
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm tracking-[0] font-medium truncate max-w-[120px] sm:max-w-none", children: maxPeriodLabel })
+        /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm tracking-[0] font-medium whitespace-nowrap", children: maxPeriodLabel })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1 sm:gap-1.5", children: [
         /* @__PURE__ */ jsx(
@@ -16055,7 +16160,7 @@ var HorizontalLegend = ({
             weight: "bold"
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm tracking-[0] font-medium truncate max-w-[120px] sm:max-w-none", children: minPeriodLabel })
+        /* @__PURE__ */ jsx("span", { className: "text-xs sm:text-sm tracking-[0] font-medium whitespace-nowrap", children: minPeriodLabel })
       ] })
     ] })
   ] }) });
@@ -16999,9 +17104,9 @@ var Chart = ({
   isLoading = false,
   timeSeries,
   timeSeriesLegend,
-  customLegend,
-  horizontal = false,
-  orderBy
+  customLegend
+  // horizontal removido
+  // orderBy removido
 }) => {
   const { xAxisConfig, mapperConfig } = useMemo(() => {
     return fnSmartConfig({ xAxis, data, labelMap });
@@ -17037,12 +17142,6 @@ var Chart = ({
     defaultEndIndex: timeSeriesConfig?.end,
     onRangeChange: timeSeriesConfig?.onRangeChange
   });
-  const { maxPeriodLabel, minPeriodLabel } = useChartMinMax({
-    processedData: data,
-    orderBy,
-    xAxisDataKey: xAxisConfig.dataKey,
-    categoryFormatter
-  });
   const processedData = useMemo(() => {
     const mapped = data.map((item) => ({
       ...item,
@@ -17052,23 +17151,8 @@ var Chart = ({
     if (timeSeriesConfig) {
       result = mapped.slice(startIndex, endIndex + 1);
     }
-    if (orderBy && horizontal) {
-      result = [...result].sort((a, b) => {
-        const valueA = Number(a[orderBy]) || 0;
-        const valueB = Number(b[orderBy]) || 0;
-        return valueB - valueA;
-      });
-    }
     return result;
-  }, [
-    data,
-    xAxisConfig.dataKey,
-    timeSeriesConfig,
-    startIndex,
-    endIndex,
-    orderBy,
-    horizontal
-  ]);
+  }, [data, xAxisConfig.dataKey, timeSeriesConfig, startIndex, endIndex]);
   const seriesOrder = filtersOrder(mapperConfig, series);
   const allKeys = seriesOrder.map((s) => s.key).filter(Boolean);
   const finalColors = useMemo(
@@ -17163,23 +17247,22 @@ var Chart = ({
   const CONTAINER_PADDING_LEFT = -6;
   const finalChartRightMargin = chartMargin?.right ?? (rightKeys.length > 0 ? AXIS_LABEL_MARGIN : 30);
   const finalChartLeftMargin = chartMargin?.left ?? (yAxisLabel ? AXIS_LABEL_MARGIN : 0);
-  const yAxisTickWidth = useMemo(
-    () => computeYAxisTickWidth(
+  const yAxisTickWidth = useMemo(() => {
+    return computeYAxisTickWidth(
       chartMargin?.left,
       yAxisLabel,
       AXIS_LABEL_MARGIN,
       yTickFormatter,
       minLeftDataValue,
       niceMaxLeft
-    ),
-    [
-      chartMargin?.left,
-      yAxisLabel,
-      yTickFormatter,
-      minLeftDataValue,
-      niceMaxLeft
-    ]
-  );
+    );
+  }, [
+    chartMargin?.left,
+    yAxisLabel,
+    yTickFormatter,
+    minLeftDataValue,
+    niceMaxLeft
+  ]);
   const HORIZONTAL_PADDING_CLASS = "px-24";
   const teste = "pl-24 pr-4";
   const effectiveChartWidth = typeof width === "number" ? width : measuredWidth ? Math.max(0, measuredWidth - 32) : computedWidth;
@@ -17221,16 +17304,45 @@ var Chart = ({
     );
   }
   if (Array.isArray(data) && data.length === 0) {
-    return /* @__PURE__ */ jsx(
-      NoData_default,
-      {
-        title,
-        paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
-        height
-      }
-    );
+    return /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx(
+        NoData_default,
+        {
+          title,
+          paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
+          height
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { style: { height: 0 }, children: /* @__PURE__ */ jsxs("svg", { width: effectiveChartWidth, height, children: [
+        xAxisLabel && /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: effectiveChartWidth - 40,
+            y: height - 10,
+            fontSize: 12,
+            fill: "hsl(var(--muted-foreground))",
+            fontWeight: 500,
+            textAnchor: "end",
+            children: xAxisLabel
+          }
+        ),
+        yAxisLabel && /* @__PURE__ */ jsx(
+          "text",
+          {
+            x: 20,
+            y: 40,
+            fontSize: 12,
+            fill: "hsl(var(--muted-foreground))",
+            fontWeight: 500,
+            textAnchor: "start",
+            transform: `rotate(-90 20 40)`,
+            children: yAxisLabel
+          }
+        )
+      ] }) })
+    ] });
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: wrapperRef,
@@ -17238,512 +17350,400 @@ var Chart = ({
         "w-full overflow-hidden min-w-0 rounded-lg border-border",
         className
       ),
-      children: /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-card relative w-full max-w-full min-w-0 py-1", children: [
-        title && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "w-full flex items-center mt-3 mb-2",
-              HORIZONTAL_PADDING_CLASS,
-              titlePosition === "center" && "justify-center",
-              titlePosition === "right" && "justify-end",
-              titlePosition === "left" && "justify-start"
-            ),
-            children: /* @__PURE__ */ jsx("div", { className: "text-[1.4rem] font-semibold text-foreground", children: title })
-          }
-        ),
-        customLegend && !!data.length && /* @__PURE__ */ jsx("div", { className: cn("px-6 mb-2", HORIZONTAL_PADDING_CLASS), children: /* @__PURE__ */ jsx(
-          ChartTotalLegend_default,
-          {
-            items: allKeys.map((key) => {
-              const values = processedData.map(
-                (d) => Number(d[key] || 0)
-              );
-              const total = values.reduce((a, b) => a + b, 0);
-              const first = values[0] || 0;
-              const last = values[values.length - 1] || 0;
-              const trendValue = first !== 0 ? Math.round((last - first) / first * 100) : 0;
-              const formattedTotal = finalValueFormatter ? finalValueFormatter({
-                value: total,
-                formattedValue: String(total)
-              }) : new Intl.NumberFormat(formatBR ? "pt-BR" : "en-US").format(
-                total
-              );
-              return {
-                label: mapperConfig[key]?.label || key,
-                value: formattedTotal,
-                color: finalColors[key],
-                trend: {
-                  value: Math.abs(trendValue),
-                  positive: trendValue >= 0,
-                  neutral: trendValue === 0
-                }
-              };
-            })
-          }
-        ) }),
-        allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", teste), children: [
-          enableHighlights && /* @__PURE__ */ jsx(
-            Highlights_default,
-            {
-              allKeys,
-              mapperConfig,
-              finalColors,
-              highlightedSeries,
-              toggleHighlight,
-              containerWidth: chartInnerWidth
-            }
-          ),
-          enableShowOnly && /* @__PURE__ */ jsx(
-            ShowOnly_default,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "rounded-lg bg-card relative w-full max-w-full min-w-0 py-1", children: [
+          title && /* @__PURE__ */ jsx(
+            "div",
             {
-              showOnlyHighlighted,
-              setShowOnlyHighlighted,
-              highlightedSeriesSize: highlightedSeries.size,
-              clearHighlights
+              className: cn(
+                "w-full flex items-center mt-3 mb-2",
+                HORIZONTAL_PADDING_CLASS,
+                titlePosition === "center" && "justify-center",
+                titlePosition === "right" && "justify-end",
+                titlePosition === "left" && "justify-start"
+              ),
+              children: /* @__PURE__ */ jsx("div", { className: "text-[1.4rem] font-semibold text-foreground", children: title })
             }
           ),
-          enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx(
-            PeriodsDropdown_default,
+          customLegend && !!data.length && /* @__PURE__ */ jsx("div", { className: cn("px-6 mb-2", HORIZONTAL_PADDING_CLASS), children: /* @__PURE__ */ jsx(
+            ChartTotalLegend_default,
             {
-              processedData,
-              onOpenPeriod: openTooltipForPeriod,
-              rightOffset: finalChartRightMargin,
-              activePeriods
+              items: allKeys.map((key) => {
+                const values = processedData.map(
+                  (d) => Number(d[key] || 0)
+                );
+                const total = values.reduce((a, b) => a + b, 0);
+                const first = values[0] || 0;
+                const last = values[values.length - 1] || 0;
+                const trendValue = first !== 0 ? Math.round((last - first) / first * 100) : 0;
+                const formattedTotal = finalValueFormatter ? finalValueFormatter({
+                  value: total,
+                  formattedValue: String(total)
+                }) : new Intl.NumberFormat(formatBR ? "pt-BR" : "en-US").format(
+                  total
+                );
+                return {
+                  label: mapperConfig[key]?.label || key,
+                  value: formattedTotal,
+                  color: finalColors[key],
+                  trend: {
+                    value: Math.abs(trendValue),
+                    positive: trendValue >= 0,
+                    neutral: trendValue === 0
+                  }
+                };
+              })
             }
-          ) })
-        ] }),
-        !(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              "w-full flex justify-end mb-2",
-              HORIZONTAL_PADDING_CLASS
+          ) }),
+          allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", teste), children: [
+            enableHighlights && /* @__PURE__ */ jsx(
+              Highlights_default,
+              {
+                allKeys,
+                mapperConfig,
+                finalColors,
+                highlightedSeries,
+                toggleHighlight,
+                containerWidth: chartInnerWidth
+              }
             ),
-            style: {
-              paddingRight: `${finalChartRightMargin}px`,
-              maxWidth: `${chartInnerWidth}px`
-            },
-            children: /* @__PURE__ */ jsx(
+            enableShowOnly && /* @__PURE__ */ jsx(
+              ShowOnly_default,
+              {
+                showOnlyHighlighted,
+                setShowOnlyHighlighted,
+                highlightedSeriesSize: highlightedSeries.size,
+                clearHighlights
+              }
+            ),
+            enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsx("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsx(
               PeriodsDropdown_default,
               {
                 processedData,
                 onOpenPeriod: openTooltipForPeriod,
-                rightOffset: finalChartRightMargin
+                rightOffset: finalChartRightMargin,
+                activePeriods
               }
-            )
-          }
-        ),
-        showLegend && horizontal && /* @__PURE__ */ jsx(
-          HorizontalLegend_default,
-          {
-            allKeys,
-            mapperConfig,
-            finalColors,
-            labelMap,
-            legendUppercase,
-            orderBy,
-            maxPeriodLabel,
-            minPeriodLabel,
-            className: cn(HORIZONTAL_PADDING_CLASS)
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: cn(
-              horizontal && "overflow-y-auto overflow-x-hidden px-6",
-              horizontal && "scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent"
-            ),
-            style: {
-              maxHeight: horizontal ? height : void 0
-            },
-            children: /* @__PURE__ */ jsx(
-              ResponsiveContainer,
-              {
-                width: "100%",
-                height: horizontal ? Math.max(height, processedData.length * 50) : height,
-                children: /* @__PURE__ */ jsxs(
-                  ComposedChart,
+            ) })
+          ] }),
+          !(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "w-full flex justify-end mb-2",
+                HORIZONTAL_PADDING_CLASS
+              ),
+              style: {
+                paddingRight: `${finalChartRightMargin}px`,
+                maxWidth: `${chartInnerWidth}px`
+              },
+              children: /* @__PURE__ */ jsx(
+                PeriodsDropdown_default,
+                {
+                  processedData,
+                  onOpenPeriod: openTooltipForPeriod,
+                  rightOffset: finalChartRightMargin
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxs(
+            ComposedChart,
+            {
+              data: processedData,
+              height,
+              margin: {
+                top: 10,
+                right: finalChartRightMargin,
+                left: finalChartLeftMargin,
+                bottom: 10
+              },
+              onClick: handleChartClick,
+              children: [
+                /* @__PURE__ */ jsx("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
+                  const key = s.key;
+                  const color = finalColors[key];
+                  return /* @__PURE__ */ jsxs(
+                    "linearGradient",
+                    {
+                      id: `gradient-${key}`,
+                      x1: "0",
+                      y1: "0",
+                      x2: "0",
+                      y2: "0.8",
+                      children: [
+                        /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.8 }),
+                        /* @__PURE__ */ jsx("stop", { offset: "90%", stopColor: color, stopOpacity: 0.1 })
+                      ]
+                    },
+                    `gradient-${key}`
+                  );
+                }) }),
+                showGrid && /* @__PURE__ */ jsx(
+                  CartesianGrid,
+                  {
+                    strokeDasharray: "3 3",
+                    stroke: gridColor || "hsl(var(--muted-foreground))",
+                    opacity: 0.5
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  XAxis,
                   {
-                    data: processedData,
-                    height: horizontal ? Math.max(height, processedData.length * 50) : height,
-                    layout: horizontal ? "vertical" : "horizontal",
-                    margin: {
-                      top: 10,
-                      right: finalChartRightMargin,
-                      left: finalChartLeftMargin,
-                      bottom: 10
+                    dataKey: xAxisConfig.dataKey,
+                    stroke: "hsl(var(--muted-foreground))",
+                    fontSize: 12,
+                    tickLine: false,
+                    axisLine: false,
+                    tickFormatter: (value) => {
+                      if (categoryFormatter)
+                        return categoryFormatter(value);
+                      if (xAxisConfig.valueFormatter)
+                        return xAxisConfig.valueFormatter(value);
+                      return String(value ?? "");
                     },
-                    onClick: handleChartClick,
-                    children: [
-                      /* @__PURE__ */ jsx("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
-                        const key = s.key;
-                        const color = finalColors[key];
-                        return /* @__PURE__ */ jsxs(
-                          "linearGradient",
-                          {
-                            id: `gradient-${key}`,
-                            x1: "0",
-                            y1: "0",
-                            x2: "0",
-                            y2: "0.8",
-                            children: [
-                              /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.8 }),
-                              /* @__PURE__ */ jsx(
-                                "stop",
-                                {
-                                  offset: "90%",
-                                  stopColor: color,
-                                  stopOpacity: 0.1
-                                }
-                              )
-                            ]
-                          },
-                          `gradient-${key}`
-                        );
-                      }) }),
-                      showGrid && /* @__PURE__ */ jsx(
-                        CartesianGrid,
-                        {
-                          strokeDasharray: "3 3",
-                          stroke: gridColor || "hsl(var(--muted-foreground))",
-                          opacity: 0.5
+                    label: xAxisLabel ? {
+                      value: xAxisLabel,
+                      position: "insideBottomRight",
+                      offset: -5,
+                      style: {
+                        fontSize: 12,
+                        fill: "hsl(var(--muted-foreground))",
+                        fontWeight: 500
+                      }
+                    } : void 0
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  YAxis,
+                  {
+                    yAxisId: "left",
+                    width: yAxisTickWidth,
+                    stroke: "hsl(var(--muted-foreground))",
+                    fontSize: 12,
+                    tickLine: false,
+                    axisLine: false,
+                    tickFormatter: yTickFormatter,
+                    domain: [Math.min(minLeftDataValue, 0), niceMaxLeft],
+                    tickCount: 6,
+                    label: yAxisLabel ? {
+                      value: yAxisLabel,
+                      angle: -90,
+                      position: "left",
+                      dx: leftYAxisLabelDx,
+                      style: {
+                        fontSize: 12,
+                        fill: "hsl(var(--muted-foreground))",
+                        fontWeight: 500,
+                        textAnchor: "middle"
+                      }
+                    } : void 0
+                  }
+                ),
+                rightKeys.length > 0 && (() => {
+                  const { rightAxisColor, rightTickFormatter } = fnConfigRightKeys(
+                    biaxialConfigNormalized,
+                    yTickFormatter,
+                    finalColors
+                  );
+                  return /* @__PURE__ */ jsx(
+                    YAxis,
+                    {
+                      yAxisId: "right",
+                      width: finalChartRightMargin,
+                      orientation: "right",
+                      stroke: "hsl(var(--muted-foreground))",
+                      fontSize: 12,
+                      tickLine: false,
+                      axisLine: false,
+                      tick: { fill: rightAxisColor },
+                      tickFormatter: rightTickFormatter,
+                      domain: [Math.min(minRightDataValue, 0), niceMaxRight],
+                      tickCount: 6,
+                      label: biaxialConfigNormalized?.label ? {
+                        value: biaxialConfigNormalized.label,
+                        angle: -90,
+                        position: "right",
+                        dx: rightYAxisLabelDx,
+                        style: {
+                          fontSize: 12,
+                          fill: "hsl(var(--muted-foreground))",
+                          fontWeight: 500,
+                          textAnchor: "middle"
                         }
-                      ),
-                      horizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx(
-                          XAxis,
+                      } : void 0
+                    }
+                  );
+                })(),
+                showTooltip && /* @__PURE__ */ jsx(
+                  Tooltip,
+                  {
+                    content: showTooltipTotal ? /* @__PURE__ */ jsx(
+                      TooltipWithTotal_default,
+                      {
+                        finalColors,
+                        valueFormatter: finalValueFormatter,
+                        categoryFormatter,
+                        periodLabel
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      TooltipSimple_default,
+                      {
+                        finalColors,
+                        valueFormatter: finalValueFormatter,
+                        categoryFormatter,
+                        periodLabel
+                      }
+                    ),
+                    cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
+                  }
+                ),
+                showLegend && /* @__PURE__ */ jsx(
+                  Legend,
+                  {
+                    iconSize: 12,
+                    formatter: (value) => {
+                      return /* @__PURE__ */ jsx("span", { className: "tracking-[0] rounded-sm", children: fnFormatterValueLegend(
+                        value,
+                        mapperConfig,
+                        labelMap,
+                        legendUppercase
+                      ) });
+                    }
+                  }
+                ),
+                seriesOrder.map((s) => {
+                  if (showOnlyHighlighted && !highlightedSeries.has(s.key))
+                    return null;
+                  const { label, color, key } = fnBuildConfigData(
+                    s,
+                    mapperConfig,
+                    labelMap,
+                    finalColors,
+                    rightKeys,
+                    biaxialConfigNormalized
+                  );
+                  if (s.type === "bar") {
+                    return /* @__PURE__ */ jsx(
+                      Bar,
+                      {
+                        dataKey: key,
+                        yAxisId: rightKeys.includes(key) ? "right" : "left",
+                        name: label,
+                        fill: color,
+                        radius: [4, 4, 0, 0],
+                        onClick: handleBarClick,
+                        className: "cursor-pointer",
+                        style: { opacity: getSeriesOpacity(key) },
+                        activeBar: /* @__PURE__ */ jsx(
+                          Rectangle,
                           {
-                            type: "number",
-                            orientation: "top",
-                            stroke: "hsl(var(--muted-foreground))",
-                            fontSize: 12,
-                            tickLine: false,
-                            axisLine: false,
-                            tickFormatter: yTickFormatter,
-                            domain: [Math.min(minLeftDataValue, 0), niceMaxLeft],
-                            tickCount: 6,
-                            label: yAxisLabel ? {
-                              value: yAxisLabel,
-                              position: "insideTopRight",
-                              offset: -5,
-                              style: {
-                                fontSize: 12,
-                                fill: "hsl(var(--muted-foreground))",
-                                fontWeight: 500
-                              }
-                            } : void 0
+                            fill: color,
+                            stroke: color,
+                            strokeWidth: 2,
+                            opacity: 0.8
                           }
                         ),
-                        /* @__PURE__ */ jsx(
-                          YAxis,
+                        children: showLabels && labelsVisibility.bar !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx(
+                          LabelList,
                           {
-                            type: "category",
-                            dataKey: xAxisConfig.dataKey,
-                            yAxisId: "left",
-                            width: yAxisTickWidth,
-                            stroke: "hsl(var(--muted-foreground))",
-                            fontSize: 12,
-                            tickLine: false,
-                            axisLine: false,
-                            tickFormatter: (value) => {
-                              if (categoryFormatter)
-                                return categoryFormatter(value);
-                              if (xAxisConfig.valueFormatter)
-                                return xAxisConfig.valueFormatter(
-                                  value
-                                );
-                              return String(value ?? "");
-                            },
-                            label: xAxisLabel ? {
-                              value: xAxisLabel,
-                              angle: -90,
-                              position: "insideTop",
-                              dx: leftYAxisLabelDx,
-                              style: {
-                                fontSize: 12,
-                                fill: "hsl(var(--muted-foreground))",
-                                fontWeight: 500,
-                                textAnchor: "middle"
-                              }
-                            } : void 0
-                          }
-                        )
-                      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx(
-                          XAxis,
-                          {
-                            dataKey: xAxisConfig.dataKey,
-                            stroke: "hsl(var(--muted-foreground))",
-                            fontSize: 12,
-                            tickLine: false,
-                            axisLine: false,
-                            tickFormatter: (value) => {
-                              if (categoryFormatter)
-                                return categoryFormatter(value);
-                              if (xAxisConfig.valueFormatter)
-                                return xAxisConfig.valueFormatter(
-                                  value
-                                );
-                              return String(value ?? "");
+                            dataKey: key,
+                            content: (props) => {
+                              if (!fnContentLabelList(props)) return null;
+                              const inside = renderInsideBarLabel(
+                                color,
+                                finalValueFormatter
+                              );
+                              return inside(props);
                             },
-                            label: xAxisLabel ? {
-                              value: xAxisLabel,
-                              position: "insideBottomRight",
-                              offset: -5,
-                              style: {
-                                fontSize: 12,
-                                fill: "hsl(var(--muted-foreground))",
-                                fontWeight: 500
-                              }
-                            } : void 0
+                            offset: 0
                           }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          YAxis,
+                        ) : null
+                      },
+                      `bar-${key}`
+                    );
+                  }
+                  if (s.type === "line") {
+                    const lineFormatter = (props) => {
+                      const numValue = typeof props.value === "number" ? props.value : typeof props.value === "string" ? parseFloat(props.value) : 0;
+                      const percentage = calcDivision(numValue, 100);
+                      const formattedPercentage = typeof percentage === "number" ? percentage.toFixed(1).replace(".", ",") : String(percentage).replace(".", ",");
+                      return `${formattedPercentage}%`;
+                    };
+                    return /* @__PURE__ */ jsx(
+                      Line,
+                      {
+                        dataKey: key,
+                        yAxisId: rightKeys.includes(key) ? "right" : "left",
+                        name: label,
+                        stroke: color,
+                        strokeWidth: 2,
+                        dot: { r: 3 },
+                        activeDot: { r: 6 },
+                        onClick: handleSeriesClick,
+                        className: "cursor-pointer pointer-events-auto",
+                        style: { opacity: getSeriesOpacity(key) },
+                        children: showLabels && labelsVisibility.line !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx(
+                          LabelList,
                           {
-                            yAxisId: "left",
-                            width: yAxisTickWidth,
-                            stroke: "hsl(var(--muted-foreground))",
-                            fontSize: 12,
-                            tickLine: false,
-                            axisLine: false,
-                            tickFormatter: yTickFormatter,
-                            domain: [Math.min(minLeftDataValue, 0), niceMaxLeft],
-                            tickCount: 6,
-                            label: yAxisLabel ? {
-                              value: yAxisLabel,
-                              angle: -90,
-                              position: "left",
-                              dx: leftYAxisLabelDx,
-                              style: {
-                                fontSize: 12,
-                                fill: "hsl(var(--muted-foreground))",
-                                fontWeight: 500,
-                                textAnchor: "middle"
-                              }
-                            } : void 0
+                            dataKey: key,
+                            position: "top",
+                            content: pillLabelRenderer_default(
+                              color,
+                              "filled",
+                              lineFormatter
+                            ),
+                            offset: 14
                           }
-                        )
-                      ] }),
-                      minLeftDataValue < 0 && /* @__PURE__ */ jsx(
-                        ReferenceLine,
-                        {
-                          y: 0,
-                          yAxisId: "left",
-                          stroke: "hsl(var(--muted-foreground))",
-                          strokeWidth: 1,
-                          strokeDasharray: "4 4"
-                        }
-                      ),
-                      rightKeys.length > 0 && (() => {
-                        const { rightAxisColor, rightTickFormatter } = fnConfigRightKeys(
-                          biaxialConfigNormalized,
-                          yTickFormatter,
-                          finalColors
-                        );
-                        return /* @__PURE__ */ jsx(
-                          YAxis,
+                        ) : null
+                      },
+                      `line-${key}`
+                    );
+                  }
+                  if (s.type === "area") {
+                    return /* @__PURE__ */ jsx(
+                      Area,
+                      {
+                        type: "monotone",
+                        dataKey: key,
+                        yAxisId: rightKeys.includes(key) ? "right" : "left",
+                        name: label,
+                        stroke: color,
+                        fill: `url(#gradient-${key})`,
+                        fillOpacity: 1,
+                        strokeWidth: 2,
+                        onClick: handleSeriesClick,
+                        className: "cursor-pointer pointer-events-auto",
+                        style: { opacity: getSeriesOpacity(key) },
+                        activeDot: {
+                          r: 6,
+                          fill: color,
+                          stroke: "hsl(var(--background))",
+                          strokeWidth: 2
+                        },
+                        children: showLabels && labelsVisibility.area !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx(
+                          LabelList,
                           {
-                            yAxisId: "right",
-                            width: finalChartRightMargin,
-                            orientation: "right",
-                            stroke: "hsl(var(--muted-foreground))",
-                            fontSize: 12,
-                            tickLine: false,
-                            axisLine: false,
-                            tick: { fill: rightAxisColor },
-                            tickFormatter: rightTickFormatter,
-                            domain: [Math.min(minRightDataValue, 0), niceMaxRight],
-                            tickCount: 6,
-                            label: biaxialConfigNormalized?.label ? {
-                              value: biaxialConfigNormalized.label,
-                              angle: -90,
-                              position: "right",
-                              dx: rightYAxisLabelDx,
-                              style: {
-                                fontSize: 12,
-                                fill: "hsl(var(--muted-foreground))",
-                                fontWeight: 500,
-                                textAnchor: "middle"
-                              }
-                            } : void 0
-                          }
-                        );
-                      })(),
-                      showTooltip && /* @__PURE__ */ jsx(
-                        Tooltip,
-                        {
-                          content: showTooltipTotal ? /* @__PURE__ */ jsx(
-                            TooltipWithTotal_default,
-                            {
-                              finalColors,
-                              valueFormatter: finalValueFormatter,
-                              categoryFormatter,
-                              periodLabel
-                            }
-                          ) : /* @__PURE__ */ jsx(
-                            TooltipSimple_default,
-                            {
-                              finalColors,
-                              valueFormatter: finalValueFormatter,
-                              categoryFormatter,
-                              periodLabel
-                            }
-                          ),
-                          cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
-                        }
-                      ),
-                      showLegend && !horizontal && /* @__PURE__ */ jsx(
-                        Legend,
-                        {
-                          iconSize: 12,
-                          formatter: (value) => {
-                            return /* @__PURE__ */ jsx("span", { className: "tracking-[0] rounded-sm", children: fnFormatterValueLegend(
-                              value,
-                              mapperConfig,
-                              labelMap,
-                              legendUppercase
-                            ) });
+                            dataKey: key,
+                            position: "top",
+                            content: pillLabelRenderer_default(
+                              color,
+                              "soft",
+                              finalValueFormatter
+                            ),
+                            offset: 12
                           }
-                        }
-                      ),
-                      seriesOrder.map((s) => {
-                        if (showOnlyHighlighted && !highlightedSeries.has(s.key))
-                          return null;
-                        const { label, color, key } = fnBuildConfigData(
-                          s,
-                          mapperConfig,
-                          labelMap,
-                          finalColors,
-                          rightKeys,
-                          biaxialConfigNormalized
-                        );
-                        if (s.type === "bar") {
-                          return /* @__PURE__ */ jsx(
-                            Bar,
-                            {
-                              dataKey: key,
-                              yAxisId: rightKeys.includes(key) ? "right" : "left",
-                              name: label,
-                              fill: color,
-                              radius: horizontal ? [0, 4, 4, 0] : [4, 4, 0, 0],
-                              onClick: handleBarClick,
-                              className: "cursor-pointer",
-                              style: { opacity: getSeriesOpacity(key) },
-                              activeBar: /* @__PURE__ */ jsx(
-                                Rectangle,
-                                {
-                                  fill: color,
-                                  stroke: color,
-                                  strokeWidth: 2,
-                                  opacity: 0.8
-                                }
-                              ),
-                              children: showLabels && labelsVisibility.bar !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx(
-                                LabelList,
-                                {
-                                  dataKey: key,
-                                  content: (props) => {
-                                    if (!fnContentLabelList(props)) return null;
-                                    const inside = renderInsideBarLabel(
-                                      color,
-                                      finalValueFormatter
-                                    );
-                                    return inside(props);
-                                  },
-                                  offset: 0
-                                }
-                              ) : null
-                            },
-                            `bar-${key}`
-                          );
-                        }
-                        if (s.type === "line") {
-                          const lineFormatter = (props) => {
-                            const numValue = typeof props.value === "number" ? props.value : typeof props.value === "string" ? parseFloat(props.value) : 0;
-                            const percentage = calcDivision(numValue, 100);
-                            const formattedPercentage = typeof percentage === "number" ? percentage.toFixed(1).replace(".", ",") : String(percentage).replace(".", ",");
-                            return `${formattedPercentage}%`;
-                          };
-                          return /* @__PURE__ */ jsx(
-                            Line,
-                            {
-                              dataKey: key,
-                              yAxisId: rightKeys.includes(key) ? "right" : "left",
-                              name: label,
-                              stroke: color,
-                              strokeWidth: 2,
-                              dot: { r: 3 },
-                              activeDot: { r: 6 },
-                              onClick: handleSeriesClick,
-                              className: "cursor-pointer pointer-events-auto",
-                              style: { opacity: getSeriesOpacity(key) },
-                              children: showLabels && labelsVisibility.line !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx(
-                                LabelList,
-                                {
-                                  dataKey: key,
-                                  position: "top",
-                                  content: pillLabelRenderer_default(
-                                    color,
-                                    "filled",
-                                    lineFormatter
-                                  ),
-                                  offset: 14
-                                }
-                              ) : null
-                            },
-                            `line-${key}`
-                          );
-                        }
-                        if (s.type === "area") {
-                          return /* @__PURE__ */ jsx(
-                            Area,
-                            {
-                              type: "monotone",
-                              dataKey: key,
-                              yAxisId: rightKeys.includes(key) ? "right" : "left",
-                              name: label,
-                              stroke: color,
-                              fill: `url(#gradient-${key})`,
-                              fillOpacity: 1,
-                              strokeWidth: 2,
-                              onClick: handleSeriesClick,
-                              className: "cursor-pointer pointer-events-auto",
-                              style: { opacity: getSeriesOpacity(key) },
-                              activeDot: {
-                                r: 6,
-                                fill: color,
-                                stroke: "hsl(var(--background))",
-                                strokeWidth: 2
-                              },
-                              children: showLabels && labelsVisibility.area !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsx(
-                                LabelList,
-                                {
-                                  dataKey: key,
-                                  position: "top",
-                                  content: pillLabelRenderer_default(
-                                    color,
-                                    "soft",
-                                    finalValueFormatter
-                                  ),
-                                  offset: 12
-                                }
-                              ) : null
-                            },
-                            `area-${key}`
-                          );
-                        }
-                        return null;
-                      })
-                    ]
+                        ) : null
+                      },
+                      `area-${key}`
+                    );
                   }
-                )
-              }
-            )
-          }
-        ),
+                  return null;
+                })
+              ]
+            }
+          ) })
+        ] }),
         enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ jsx(
           DraggableTooltip_default,
           {
@@ -17801,7 +17801,7 @@ var Chart = ({
             }
           }
         )
-      ] })
+      ]
     }
   );
 };