@mlw-packages/react-components 1.9.4 → 1.9.6

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;
@@ -14303,42 +14303,6 @@ var computeYAxisTickWidth = (chartMarginLeft, yAxisLabel, axisLabelMargin, yTick
   const estimated = Math.max(48, Math.min(220, maxLen * 8 + 24));
   return estimated;
 };
-var CustomYAxisTick = (props) => {
-  const { x = 0, y = 0, payload } = props;
-  const text = String(payload?.value || "");
-  const maxCharsPerLine = 20;
-  const words = text.split(" ");
-  const lines = [];
-  let currentLine = "";
-  words.forEach((word) => {
-    const testLine = currentLine ? `${currentLine} ${word}` : word;
-    if (testLine.length > maxCharsPerLine && currentLine) {
-      lines.push(currentLine);
-      currentLine = word;
-    } else {
-      currentLine = testLine;
-    }
-  });
-  if (currentLine) {
-    lines.push(currentLine);
-  }
-  const lineHeight = 12;
-  const totalHeight = lines.length * lineHeight;
-  const startY = y - totalHeight / 2 + lineHeight / 2;
-  return /* @__PURE__ */ jsx("g", { children: lines.map((line, index) => /* @__PURE__ */ jsx(
-    "text",
-    {
-      x,
-      y: startY + index * lineHeight,
-      textAnchor: "end",
-      fill: "hsl(var(--muted-foreground))",
-      fontSize: 11,
-      children: line
-    },
-    index
-  )) });
-};
-var CustomYAxisTick_default = CustomYAxisTick;
 var menuVariants = {
   hidden: { opacity: 0, y: -6, scale: 0.98 },
   visible: { opacity: 1, y: 0, scale: 1 },
@@ -16163,7 +16127,7 @@ 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 justify-center gap-2 sm:gap-3 md:gap-4 overflow-x-auto", children: [
+  return /* @__PURE__ */ jsx("div", { className: cn(className), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-left 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 flex-shrink-0", children: [
@@ -17140,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 });
@@ -17178,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,
@@ -17193,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(
@@ -17305,10 +17248,6 @@ var Chart = ({
   const finalChartRightMargin = chartMargin?.right ?? (rightKeys.length > 0 ? AXIS_LABEL_MARGIN : 30);
   const finalChartLeftMargin = chartMargin?.left ?? (yAxisLabel ? AXIS_LABEL_MARGIN : 0);
   const yAxisTickWidth = useMemo(() => {
-    if (horizontal) {
-      if (typeof chartMargin?.left === "number") return chartMargin.left;
-      return 130;
-    }
     return computeYAxisTickWidth(
       chartMargin?.left,
       yAxisLabel,
@@ -17318,7 +17257,6 @@ var Chart = ({
       niceMaxLeft
     );
   }, [
-    horizontal,
     chartMargin?.left,
     yAxisLabel,
     yTickFormatter,
@@ -17404,7 +17342,7 @@ var Chart = ({
       ] }) })
     ] });
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: wrapperRef,
@@ -17412,513 +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: 11,
-                            tickLine: false,
-                            axisLine: false,
-                            tick: /* @__PURE__ */ jsx(CustomYAxisTick_default, { width: yAxisTickWidth - 10 }),
-                            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,
-                              angle: -90,
-                              position: "insideTop",
-                              dx: leftYAxisLabelDx,
-                              style: {
-                                fontSize: 12,
-                                fill: "hsl(var(--muted-foreground))",
-                                fontWeight: 500,
-                                textAnchor: "middle"
-                              }
-                            } : void 0
+                            offset: 0
                           }
-                        )
-                      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                        /* @__PURE__ */ jsx(
-                          XAxis,
+                        ) : 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: 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 ?? "");
-                            },
-                            label: xAxisLabel ? {
-                              value: xAxisLabel,
-                              position: "insideBottomRight",
-                              offset: -5,
-                              style: {
-                                fontSize: 12,
-                                fill: "hsl(var(--muted-foreground))",
-                                fontWeight: 500
-                              }
-                            } : void 0
+                            dataKey: key,
+                            position: "top",
+                            content: pillLabelRenderer_default(
+                              color,
+                              "filled",
+                              lineFormatter
+                            ),
+                            offset: 14
                           }
-                        ),
-                        /* @__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: "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,
+                              "soft",
+                              finalValueFormatter
+                            ),
+                            offset: 12
                           }
-                        )
-                      ] }),
-                      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,
-                          {
-                            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
-                            ) });
-                          }
-                        }
-                      ),
-                      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,
           {
@@ -17976,11 +17801,498 @@ var Chart = ({
             }
           }
         )
-      ] })
+      ]
     }
   );
 };
 var Chart_default = Chart;
+var DEFAULT_COLORS3 = ["#0d1136", "#666655", "#1a1a1a"];
+var HorizontalChart = ({
+  data,
+  series,
+  className,
+  height = 500,
+  width = "100%",
+  colors: colors2 = DEFAULT_COLORS3,
+  gridColor,
+  showGrid = true,
+  showTooltip = true,
+  showLegend = true,
+  title,
+  titlePosition = "left",
+  showLabels = false,
+  labelsVisibility = { bar: true },
+  xAxis,
+  xAxisLabel,
+  yAxisLabel,
+  labelMap,
+  valueFormatter,
+  categoryFormatter,
+  enableHighlights = false,
+  enableShowOnly = false,
+  enablePeriodsDropdown = false,
+  enableDraggableTooltips = false,
+  showTooltipTotal = false,
+  periodLabel = "Per\xEDodo",
+  maxTooltips = 5,
+  formatBR = false,
+  legendUppercase = false,
+  chartMargin,
+  isLoading = false,
+  customLegend,
+  orderBy
+}) => {
+  const { xAxisConfig, mapperConfig } = useMemo(() => {
+    return fnSmartConfig({ xAxis, data, labelMap });
+  }, [data, xAxis, labelMap]);
+  const {
+    highlightedSeries,
+    showOnlyHighlighted,
+    toggleHighlight,
+    setShowOnlyHighlighted,
+    clearHighlights
+  } = useChartHighlights();
+  const { wrapperRef, measuredWidth } = useChartDimensions();
+  const {
+    activeTooltips,
+    toggleTooltip,
+    onTooltipPositionChange,
+    setActiveTooltips
+  } = useChartTooltips(maxTooltips);
+  useEffect(() => {
+    if (highlightedSeries.size === 0 && showOnlyHighlighted) {
+      setShowOnlyHighlighted(false);
+    }
+  }, [highlightedSeries, showOnlyHighlighted, setShowOnlyHighlighted]);
+  const processedData = useMemo(() => {
+    const mapped = data.map((item) => ({
+      ...item,
+      name: String(item[xAxisConfig.dataKey] || "N/A")
+    }));
+    if (orderBy && mapped.length > 0) {
+      return [...mapped].sort((a, b) => {
+        const valueA = Number(a[orderBy]) || 0;
+        const valueB = Number(b[orderBy]) || 0;
+        return valueB - valueA;
+      });
+    }
+    return mapped;
+  }, [data, xAxisConfig.dataKey, orderBy]);
+  const seriesOrder = filtersOrder(mapperConfig, series);
+  const allKeys = seriesOrder.map((s) => s.key).filter(Boolean);
+  const finalColors = useMemo(
+    () => generateColorMap(allKeys, colors2, mapperConfig),
+    [allKeys, colors2, mapperConfig]
+  );
+  const activePeriods = useMemo(
+    () => activeTooltips.map((t) => adaptDataForTooltip(t.data, xAxisConfig.dataKey).name),
+    [activeTooltips, xAxisConfig.dataKey]
+  );
+  const maxDataValue = useMemo(() => {
+    return getMaxDataValue(processedData, allKeys);
+  }, [processedData, allKeys]);
+  const minDataValue = useMemo(() => {
+    return getMinDataValue(processedData, allKeys);
+  }, [processedData, allKeys]);
+  const niceMax = useMemo(() => computeNiceMax(maxDataValue), [maxDataValue]);
+  const { handleChartClick, handleBarClick } = useChartClick({
+    enableDraggableTooltips,
+    xAxisDataKey: xAxisConfig.dataKey,
+    toggleTooltip,
+    setActiveTooltips
+  });
+  const getSeriesOpacity = useCallback(
+    (key) => {
+      return highlightedSeries.size > 0 ? highlightedSeries.has(key) ? 1 : 0.25 : 1;
+    },
+    [highlightedSeries]
+  );
+  const finalValueFormatter = useMemo(
+    () => createValueFormatter(valueFormatter, formatBR),
+    [valueFormatter, formatBR]
+  );
+  const yTickFormatter = useMemo(
+    () => createYTickFormatter(finalValueFormatter),
+    [finalValueFormatter]
+  );
+  const CONTAINER_PADDING_LEFT = -6;
+  const finalChartRightMargin = chartMargin?.right ?? 0;
+  const finalChartLeftMargin = chartMargin?.left ?? 0;
+  const HORIZONTAL_PADDING_CLASS = "px-6";
+  const effectiveChartWidth = typeof width === "number" ? width : measuredWidth ? Math.max(0, measuredWidth - 32) : 800;
+  const chartInnerWidth = effectiveChartWidth - finalChartLeftMargin - finalChartRightMargin;
+  const openTooltipForPeriod = useCallback(
+    (periodName) => {
+      fnOpenTooltipForPeriod(
+        enableDraggableTooltips,
+        processedData,
+        periodName,
+        activeTooltips,
+        setActiveTooltips,
+        maxTooltips,
+        effectiveChartWidth
+      );
+    },
+    [
+      enableDraggableTooltips,
+      processedData,
+      activeTooltips,
+      effectiveChartWidth,
+      maxTooltips,
+      setActiveTooltips
+    ]
+  );
+  if (!data && !isLoading) return null;
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(
+      NoData_default,
+      {
+        title,
+        isLoading: true,
+        loadingMessage: typeof title === "string" ? `${title} \u2014 Carregando` : "Carregando",
+        paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
+        height
+      }
+    );
+  }
+  if (Array.isArray(data) && data.length === 0) {
+    return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+      NoData_default,
+      {
+        title,
+        paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
+        height
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: cn(
+        "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", HORIZONTAL_PADDING_CLASS),
+              children: [
+                enableHighlights && /* @__PURE__ */ jsx(
+                  Highlights_default,
+                  {
+                    allKeys,
+                    mapperConfig,
+                    finalColors,
+                    highlightedSeries,
+                    toggleHighlight,
+                    containerWidth: chartInnerWidth
+                  }
+                ),
+                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,
+                    activePeriods
+                  }
+                ) })
+              ]
+            }
+          ),
+          !(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "w-full flex justify-end mb-2",
+                HORIZONTAL_PADDING_CLASS
+              ),
+              children: /* @__PURE__ */ jsx(
+                PeriodsDropdown_default,
+                {
+                  processedData,
+                  onOpenPeriod: openTooltipForPeriod,
+                  rightOffset: finalChartRightMargin
+                }
+              )
+            }
+          ),
+          showLegend && /* @__PURE__ */ jsx("div", { className: cn("mb-3", HORIZONTAL_PADDING_CLASS), children: /* @__PURE__ */ jsx(
+            HorizontalLegend_default,
+            {
+              allKeys,
+              mapperConfig,
+              finalColors,
+              labelMap,
+              legendUppercase
+            }
+          ) }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "overflow-y-auto overflow-x-hidden px-6",
+                "scrollbar-thin scrollbar-thumb-muted scrollbar-track-transparent mb-2"
+              ),
+              style: {
+                maxHeight: height
+              },
+              children: /* @__PURE__ */ jsx(
+                ResponsiveContainer,
+                {
+                  width: "100%",
+                  height: Math.max(height, processedData.length * 50),
+                  children: /* @__PURE__ */ jsxs(
+                    ComposedChart,
+                    {
+                      layout: "vertical",
+                      data: processedData,
+                      height: Math.max(height, processedData.length * 50),
+                      margin: {
+                        top: 10,
+                        right: finalChartRightMargin,
+                        left: finalChartLeftMargin,
+                        bottom: 10
+                      },
+                      onClick: handleChartClick,
+                      children: [
+                        showGrid && /* @__PURE__ */ jsx(
+                          CartesianGrid,
+                          {
+                            strokeDasharray: "3 3",
+                            stroke: gridColor || "hsl(var(--muted-foreground))",
+                            opacity: 0.5
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          XAxis,
+                          {
+                            type: "number",
+                            stroke: "hsl(var(--muted-foreground))",
+                            fontSize: 12,
+                            tickLine: false,
+                            orientation: "top",
+                            axisLine: false,
+                            tickFormatter: yTickFormatter,
+                            domain: [Math.min(minDataValue, 0), niceMax],
+                            label: yAxisLabel ? {
+                              value: yAxisLabel,
+                              position: "insideTopRight",
+                              offset: -1,
+                              style: {
+                                fontSize: 12,
+                                fill: "hsl(var(--muted-foreground))",
+                                fontWeight: 500
+                              }
+                            } : void 0
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          YAxis,
+                          {
+                            type: "category",
+                            dataKey: xAxisConfig.dataKey,
+                            stroke: "hsl(var(--muted-foreground))",
+                            fontSize: 12,
+                            tickLine: false,
+                            axisLine: false,
+                            width: 125,
+                            tickFormatter: (value) => {
+                              if (categoryFormatter)
+                                return categoryFormatter(value);
+                              if (xAxisConfig.valueFormatter)
+                                return xAxisConfig.valueFormatter(value);
+                              return String(value ?? "");
+                            },
+                            label: xAxisLabel ? {
+                              value: xAxisLabel,
+                              angle: -90,
+                              position: "insideTopLeft",
+                              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 }
+                          }
+                        ),
+                        seriesOrder.map((s) => {
+                          if (showOnlyHighlighted && !highlightedSeries.has(s.key))
+                            return null;
+                          const { label, color, key } = fnBuildConfigData(
+                            s,
+                            mapperConfig,
+                            labelMap,
+                            finalColors,
+                            [],
+                            null
+                          );
+                          if (s.type === "bar") {
+                            return /* @__PURE__ */ jsx(
+                              Bar,
+                              {
+                                dataKey: key,
+                                name: label,
+                                fill: color,
+                                radius: [0, 4, 4, 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) => {
+                                      const inside = renderInsideBarLabel(
+                                        color,
+                                        finalValueFormatter
+                                      );
+                                      return inside(props);
+                                    },
+                                    offset: 0
+                                  }
+                                ) : null
+                              },
+                              `bar-${key}`
+                            );
+                          }
+                          return null;
+                        })
+                      ]
+                    }
+                  )
+                }
+              )
+            }
+          )
+        ] }),
+        enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ jsx(
+          DraggableTooltip_default,
+          {
+            id: tooltip.id,
+            data: adaptDataForTooltip(tooltip.data, xAxisConfig.dataKey),
+            position: tooltip.position,
+            title,
+            dataKeys: allKeys,
+            finalColors,
+            highlightedSeries,
+            toggleHighlight,
+            showOnlyHighlighted,
+            onClose: (id) => setActiveTooltips((prev) => prev.filter((t) => t.id !== id)),
+            onPositionChange: onTooltipPositionChange,
+            periodLabel,
+            dataLabel: "Dados do Per\xEDodo",
+            valueFormatter: finalValueFormatter,
+            categoryFormatter,
+            globalTooltipCount: activeTooltips.length,
+            onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
+            closeAllButtonPosition: "top-center",
+            closeAllButtonVariant: "floating"
+          },
+          tooltip.id
+        )),
+        enableDraggableTooltips && activeTooltips.length > 1 && /* @__PURE__ */ jsx(
+          CloseAllButton_default,
+          {
+            count: activeTooltips.length,
+            onCloseAll: () => window.dispatchEvent(new Event("closeAllTooltips")),
+            position: "top-center",
+            variant: "floating"
+          }
+        )
+      ]
+    }
+  );
+};
+var HorizontalChart_default = HorizontalChart;
 var defaultData = [
   { name: "Vendas", value: 4e3 },
   { name: "Marketing", value: 3e3 },
@@ -17988,7 +18300,7 @@ var defaultData = [
   { name: "Suporte", value: 1e3 },
   { name: "Outros", value: 800 }
 ];
-var DEFAULT_COLORS3 = [
+var DEFAULT_COLORS4 = [
   "#55af7d",
   // verde do projeto
   "#8e68ff",
@@ -18046,7 +18358,7 @@ var CustomPieChart = ({
   centerX = "50%",
   centerY = "50%"
 }) => {
-  const finalColors = colors2 || DEFAULT_COLORS3;
+  const finalColors = colors2 || DEFAULT_COLORS4;
   return /* @__PURE__ */ jsx("div", { className: cn("w-full rounded-lg bg-card p-4", className), children: /* @__PURE__ */ jsx(ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxs(PieChart, { children: [
     /* @__PURE__ */ jsx(
       Pie,
@@ -18343,4 +18655,4 @@ function Leaderboard({
   );
 }
 
-export { AddButton, Agenda, AgendaDaysToShow, AgendaDaysToShowAgenda, AgendaView, AlertDialogActionBase, AlertDialogBase, AlertDialogCancelBase, AlertDialogContentBase, AlertDialogDescriptionBase, AlertDialogFooterBase, AlertDialogHeaderBase, AlertDialogOverlayBase, AlertDialogPortalBase, AlertDialogTitleBase, AlertDialogTriggerBase, AvatarBase, AvatarCombobox, AvatarFallbackBase, AvatarImageBase, BackButton, Badge, BreadcrumbBase, BreadcrumbEllipsisBase, BreadcrumbItemBase, BreadcrumbLinkBase, BreadcrumbListBase, BreadcrumbPageBase, BreadcrumbSeparatorBase, Brush_default as Brush, ButtonBase, ButtonGroupBase, CENTER_INDEX, CalendarBase, CalendarDndProvider, CalendarDndProviderAgenda, CardBase, CardContentBase, CardDescriptionBase, CardFooterBase, CardHeaderBase, CardTitleBase, CarouselBase, CarouselContentBase, CarouselItemBase, CarouselNextBase, CarouselPreviousBase, ChangeButton, Chart_default as Chart, ChartTotalLegend_default as ChartTotalLegend, CheckButton, CheckboxBase, CheckboxTree, CloseAllButton_default as CloseAllButton, CloseButton, CodeBlock, CollapsibleBase, CollapsibleContentBase, CollapsibleTriggerBase, Combobox, CommandBase, CommandDialogBase, CommandEmptyBase, CommandGroupBase, CommandInputBase, CommandItemBase, CommandListBase, CommandSeparatorBase, CommandShortcutBase, ContextMenuBase, ContextMenuCheckboxItemBase, ContextMenuContentBase, ContextMenuGroupBase, ContextMenuItemBase, ContextMenuLabelBase, ContextMenuPortalBase, ContextMenuRadioGroupBase, ContextMenuRadioItemBase, ContextMenuSeparatorBase, ContextMenuShortcutBase, ContextMenuSubBase, ContextMenuSubContentBase, ContextMenuSubTriggerBase, ContextMenuTriggerBase, CopyButton, DateTimePicker, DayView, DayViewAgenda, DebouncedInput, DefaultEndHour, DefaultEndHourAgenda, DefaultStartHour, DefaultStartHourAgenda, DestructiveDialog, DialogBase, DialogCloseBase, DialogContentBase, DialogDescriptionBase, DialogFooterBase, DialogHeaderBase, DialogOverlayBase, DialogPortalBase, DialogTitleBase, DialogTriggerBase, DownloadButton, DraggableEvent2 as DraggableEvent, DraggableTooltip_default as DraggableTooltip, DrawerBase, DrawerCloseBase, DrawerContentBase, DrawerDescriptionBase, DrawerFooterBase, DrawerHeaderBase, DrawerOverlayBase, DrawerPortalBase, DrawerTitleBase, DrawerTriggerBase, DropDownMenuBase, DropDownMenuCheckboxItemBase, DropDownMenuContentBase, DropDownMenuGroupBase, DropDownMenuItemBase, DropDownMenuLabelBase, DropDownMenuPortalBase, DropDownMenuRadioGroupBase, DropDownMenuRadioItemBase, DropDownMenuSeparatorBase, DropDownMenuShortcutBase, DropDownMenuSubBase, DropDownMenuSubContentBase, DropDownMenuSubTriggerBase, DropDownMenuTriggerBase, DroppableCell, DroppableCellAgenda, EditButton, EndHour, EndHourAgenda, ErrorMessage_default as ErrorMessage, EventAgenda, EventCalendar, EventDialog, EventGap, EventGapAgenda, EventHeight, EventHeightAgenda, EventItem, EventItemAgenda, EventsPopup, FavoriteButton, FileUploader, FilterButton, HideButton, Highlights_default as Highlights, HorizontalLegend_default as HorizontalLegend, HoverCardBase, HoverCardContentBase, HoverCardTriggerBase, ITEM_HEIGHT, InputBase, InputOTPBase, InputOTPGroupBase, InputOTPSeparatorBase, InputOTPSlotBase, LabelBase_default as LabelBase, Leaderboard, LikeButton, LoadingBase, LockButton, ModalBase, ModalCloseBase, ModalContentBase, ModalDescriptionBase, ModalFooterBase, ModalHeaderBase, ModalOverlayBase, ModalPortalBase, ModalTitleBase, ModalTriggerBase, ModeToggleBase, MonthView, MonthViewAgenda, MoreButton, MultiCombobox, MultiSelect, MultiSelectBase, MultiSelectContentBase, MultiSelectGroupBase, MultiSelectItemBase, MultiSelectSeparatorBase, MultiSelectTriggerBase, MultiSelectValueBase, NavigationMenuBase, NavigationMenuContentBase, NavigationMenuIndicatorBase, NavigationMenuItemBase, NavigationMenuLinkBase, NavigationMenuListBase, NavigationMenuTriggerBase, NavigationMenuViewportBase, NoData_default as NoData, NotificationButton, NumericInput, PeriodsDropdown_default as PeriodsDropdown, PieChart_default as PieChart, PopoverAnchorBase, PopoverBase, PopoverContentBase, PopoverTriggerBase, ProgressBase, ProgressCirclesBase, ProgressPanelsBase, ProgressSegmentsBase, RangePicker, RefreshButton, SaveButton, ScrollAreaBase, ScrollBarBase, SearchButton, Select, SelectBase, SelectContentBase, SelectEmpty, SelectGroupBase, SelectItemBase, SelectLabelBase, SelectScrollDownButtonBase, SelectScrollUpButtonBase, SelectSeparatorBase, SelectTriggerBase, SelectValueBase, SeparatorBase, SettingsButton, SheetBase, SheetCloseBase, SheetContentBase, SheetDescriptionBase, SheetFooterBase, SheetHeaderBase, SheetOverlayBase, SheetPortalBase, SheetTitleBase, SheetTriggerBase, ShowOnly_default as ShowOnly, SidebarBase, SidebarContentBase, SidebarFooterBase, SidebarGroupActionBase, SidebarGroupBase, SidebarGroupContentBase, SidebarGroupLabelBase, SidebarHeaderBase, SidebarInputBase, SidebarInsetBase, SidebarMenuActionBase, SidebarMenuBadgeBase, SidebarMenuBase, SidebarMenuButtonBase, SidebarMenuItemBase, SidebarMenuSkeletonBase, SidebarMenuSubBase, SidebarMenuSubButtonBase, SidebarMenuSubItemBase, SidebarProviderBase, SidebarRailBase, SidebarSeparatorBase, SidebarTriggerBase, SkeletonBase, SlideBase, StartHour, StartHourAgenda, StatusIndicator, SwitchBase, SystemTooltip_default as SystemTooltip, TableBase, TableBodyBase, TableCaptionBase, TableCellBase, TableFooterBase, TableHeadBase, TableHeaderBase, TableRowBase, TabsBase, TabsContentBase, TabsListBase, TabsTriggerBase, TextAreaBase, ThemeProviderBase, TimePicker, TimePickerInput, TimeSeries_default as TimeSeries, Toaster, TooltipBase, TooltipContentBase, TooltipProviderBase, TooltipSimple_default as TooltipSimple, TooltipTriggerBase, TooltipWithTotal_default as TooltipWithTotal, UndatedEvents, UniversalTooltipRenderer, UnlockButton, UploadButton, UseSideBarBase, VISIBLE_ITEMS, ViewButton, VisibilityButton, WeekCellsHeight, WeekCellsHeightAgenda, WeekView, WeekViewAgenda, adaptDataForTooltip, addHoursToDate, addHoursToDateAgenda, addMinutesToDateAgenda, badgeVariants, buttonVariantsBase, compactTick, computeChartWidth, computeNiceMax, computeYAxisTickWidth, convert12HourTo24Hour, createValueFormatter, createYTickFormatter, detectDataFields, detectXAxis, display12HourValue, formatFieldName, generateAdditionalColors, generateColorMap, getAgendaEventsForDay, getAgendaEventsForDayAgenda, getAllEventsForDay, getAllEventsForDayAgenda, getArrowByType, getBorderRadiusClasses, getBorderRadiusClassesAgenda, getDateByType, getEventColorClasses, getEventColorClassesAgenda, getEventEndDate, getEventStartDate, getEventsForDay, getEventsForDayAgenda, getItems, getMaxDataValue, getMinDataValue, getSpanningEventsForDay, getSpanningEventsForDayAgenda, getValid12Hour, getValidArrow12Hour, getValidArrowHour, getValidArrowMinuteOrSecond, getValidArrowNumber, getValidHour, getValidMinuteOrSecond, getValidNumber, isMultiDayEvent, isMultiDayEventAgenda, isValid12Hour, isValidHour, isValidMinuteOrSecond, niceCeil, normalizeAttendDate, renderInsideBarLabel, pillLabelRenderer_default as renderPillLabel, resolveChartMargins, resolveContainerPaddingLeft, set12Hours, setDateByType, setHours, setMinutes, setSeconds, sortEvents, sortEventsAgenda, toast, useCalendarDnd, useCalendarDndAgenda, useChartClick, useChartDimensions, useChartHighlights, useChartMinMax, useChartTooltips, useCurrentTimeIndicator, useCurrentTimeIndicatorAgenda, useDrag, useEventVisibility, useEventVisibilityAgenda, useIsMobile, useTheme, useTimeSeriesRange, visualForItem };
+export { AddButton, Agenda, AgendaDaysToShow, AgendaDaysToShowAgenda, AgendaView, AlertDialogActionBase, AlertDialogBase, AlertDialogCancelBase, AlertDialogContentBase, AlertDialogDescriptionBase, AlertDialogFooterBase, AlertDialogHeaderBase, AlertDialogOverlayBase, AlertDialogPortalBase, AlertDialogTitleBase, AlertDialogTriggerBase, AvatarBase, AvatarCombobox, AvatarFallbackBase, AvatarImageBase, BackButton, Badge, BreadcrumbBase, BreadcrumbEllipsisBase, BreadcrumbItemBase, BreadcrumbLinkBase, BreadcrumbListBase, BreadcrumbPageBase, BreadcrumbSeparatorBase, Brush_default as Brush, ButtonBase, ButtonGroupBase, CENTER_INDEX, CalendarBase, CalendarDndProvider, CalendarDndProviderAgenda, CardBase, CardContentBase, CardDescriptionBase, CardFooterBase, CardHeaderBase, CardTitleBase, CarouselBase, CarouselContentBase, CarouselItemBase, CarouselNextBase, CarouselPreviousBase, ChangeButton, Chart_default as Chart, ChartTotalLegend_default as ChartTotalLegend, CheckButton, CheckboxBase, CheckboxTree, CloseAllButton_default as CloseAllButton, CloseButton, CodeBlock, CollapsibleBase, CollapsibleContentBase, CollapsibleTriggerBase, Combobox, CommandBase, CommandDialogBase, CommandEmptyBase, CommandGroupBase, CommandInputBase, CommandItemBase, CommandListBase, CommandSeparatorBase, CommandShortcutBase, ContextMenuBase, ContextMenuCheckboxItemBase, ContextMenuContentBase, ContextMenuGroupBase, ContextMenuItemBase, ContextMenuLabelBase, ContextMenuPortalBase, ContextMenuRadioGroupBase, ContextMenuRadioItemBase, ContextMenuSeparatorBase, ContextMenuShortcutBase, ContextMenuSubBase, ContextMenuSubContentBase, ContextMenuSubTriggerBase, ContextMenuTriggerBase, CopyButton, DateTimePicker, DayView, DayViewAgenda, DebouncedInput, DefaultEndHour, DefaultEndHourAgenda, DefaultStartHour, DefaultStartHourAgenda, DestructiveDialog, DialogBase, DialogCloseBase, DialogContentBase, DialogDescriptionBase, DialogFooterBase, DialogHeaderBase, DialogOverlayBase, DialogPortalBase, DialogTitleBase, DialogTriggerBase, DownloadButton, DraggableEvent2 as DraggableEvent, DraggableTooltip_default as DraggableTooltip, DrawerBase, DrawerCloseBase, DrawerContentBase, DrawerDescriptionBase, DrawerFooterBase, DrawerHeaderBase, DrawerOverlayBase, DrawerPortalBase, DrawerTitleBase, DrawerTriggerBase, DropDownMenuBase, DropDownMenuCheckboxItemBase, DropDownMenuContentBase, DropDownMenuGroupBase, DropDownMenuItemBase, DropDownMenuLabelBase, DropDownMenuPortalBase, DropDownMenuRadioGroupBase, DropDownMenuRadioItemBase, DropDownMenuSeparatorBase, DropDownMenuShortcutBase, DropDownMenuSubBase, DropDownMenuSubContentBase, DropDownMenuSubTriggerBase, DropDownMenuTriggerBase, DroppableCell, DroppableCellAgenda, EditButton, EndHour, EndHourAgenda, ErrorMessage_default as ErrorMessage, EventAgenda, EventCalendar, EventDialog, EventGap, EventGapAgenda, EventHeight, EventHeightAgenda, EventItem, EventItemAgenda, EventsPopup, FavoriteButton, FileUploader, FilterButton, HideButton, Highlights_default as Highlights, HorizontalChart_default as HorizontalChart, HorizontalLegend_default as HorizontalLegend, HoverCardBase, HoverCardContentBase, HoverCardTriggerBase, ITEM_HEIGHT, InputBase, InputOTPBase, InputOTPGroupBase, InputOTPSeparatorBase, InputOTPSlotBase, LabelBase_default as LabelBase, Leaderboard, LikeButton, LoadingBase, LockButton, ModalBase, ModalCloseBase, ModalContentBase, ModalDescriptionBase, ModalFooterBase, ModalHeaderBase, ModalOverlayBase, ModalPortalBase, ModalTitleBase, ModalTriggerBase, ModeToggleBase, MonthView, MonthViewAgenda, MoreButton, MultiCombobox, MultiSelect, MultiSelectBase, MultiSelectContentBase, MultiSelectGroupBase, MultiSelectItemBase, MultiSelectSeparatorBase, MultiSelectTriggerBase, MultiSelectValueBase, NavigationMenuBase, NavigationMenuContentBase, NavigationMenuIndicatorBase, NavigationMenuItemBase, NavigationMenuLinkBase, NavigationMenuListBase, NavigationMenuTriggerBase, NavigationMenuViewportBase, NoData_default as NoData, NotificationButton, NumericInput, PeriodsDropdown_default as PeriodsDropdown, PieChart_default as PieChart, PopoverAnchorBase, PopoverBase, PopoverContentBase, PopoverTriggerBase, ProgressBase, ProgressCirclesBase, ProgressPanelsBase, ProgressSegmentsBase, RangePicker, RefreshButton, SaveButton, ScrollAreaBase, ScrollBarBase, SearchButton, Select, SelectBase, SelectContentBase, SelectEmpty, SelectGroupBase, SelectItemBase, SelectLabelBase, SelectScrollDownButtonBase, SelectScrollUpButtonBase, SelectSeparatorBase, SelectTriggerBase, SelectValueBase, SeparatorBase, SettingsButton, SheetBase, SheetCloseBase, SheetContentBase, SheetDescriptionBase, SheetFooterBase, SheetHeaderBase, SheetOverlayBase, SheetPortalBase, SheetTitleBase, SheetTriggerBase, ShowOnly_default as ShowOnly, SidebarBase, SidebarContentBase, SidebarFooterBase, SidebarGroupActionBase, SidebarGroupBase, SidebarGroupContentBase, SidebarGroupLabelBase, SidebarHeaderBase, SidebarInputBase, SidebarInsetBase, SidebarMenuActionBase, SidebarMenuBadgeBase, SidebarMenuBase, SidebarMenuButtonBase, SidebarMenuItemBase, SidebarMenuSkeletonBase, SidebarMenuSubBase, SidebarMenuSubButtonBase, SidebarMenuSubItemBase, SidebarProviderBase, SidebarRailBase, SidebarSeparatorBase, SidebarTriggerBase, SkeletonBase, SlideBase, StartHour, StartHourAgenda, StatusIndicator, SwitchBase, SystemTooltip_default as SystemTooltip, TableBase, TableBodyBase, TableCaptionBase, TableCellBase, TableFooterBase, TableHeadBase, TableHeaderBase, TableRowBase, TabsBase, TabsContentBase, TabsListBase, TabsTriggerBase, TextAreaBase, ThemeProviderBase, TimePicker, TimePickerInput, TimeSeries_default as TimeSeries, Toaster, TooltipBase, TooltipContentBase, TooltipProviderBase, TooltipSimple_default as TooltipSimple, TooltipTriggerBase, TooltipWithTotal_default as TooltipWithTotal, UndatedEvents, UniversalTooltipRenderer, UnlockButton, UploadButton, UseSideBarBase, VISIBLE_ITEMS, ViewButton, VisibilityButton, WeekCellsHeight, WeekCellsHeightAgenda, WeekView, WeekViewAgenda, adaptDataForTooltip, addHoursToDate, addHoursToDateAgenda, addMinutesToDateAgenda, badgeVariants, buttonVariantsBase, compactTick, computeChartWidth, computeNiceMax, computeYAxisTickWidth, convert12HourTo24Hour, createValueFormatter, createYTickFormatter, detectDataFields, detectXAxis, display12HourValue, formatFieldName, generateAdditionalColors, generateColorMap, getAgendaEventsForDay, getAgendaEventsForDayAgenda, getAllEventsForDay, getAllEventsForDayAgenda, getArrowByType, getBorderRadiusClasses, getBorderRadiusClassesAgenda, getDateByType, getEventColorClasses, getEventColorClassesAgenda, getEventEndDate, getEventStartDate, getEventsForDay, getEventsForDayAgenda, getItems, getMaxDataValue, getMinDataValue, getSpanningEventsForDay, getSpanningEventsForDayAgenda, getValid12Hour, getValidArrow12Hour, getValidArrowHour, getValidArrowMinuteOrSecond, getValidArrowNumber, getValidHour, getValidMinuteOrSecond, getValidNumber, isMultiDayEvent, isMultiDayEventAgenda, isValid12Hour, isValidHour, isValidMinuteOrSecond, niceCeil, normalizeAttendDate, renderInsideBarLabel, pillLabelRenderer_default as renderPillLabel, resolveChartMargins, resolveContainerPaddingLeft, set12Hours, setDateByType, setHours, setMinutes, setSeconds, sortEvents, sortEventsAgenda, toast, useCalendarDnd, useCalendarDndAgenda, useChartClick, useChartDimensions, useChartHighlights, useChartMinMax, useChartTooltips, useCurrentTimeIndicator, useCurrentTimeIndicatorAgenda, useDrag, useEventVisibility, useEventVisibilityAgenda, useIsMobile, useTheme, useTimeSeriesRange, visualForItem };