@mlw-packages/react-components 1.9.6 → 1.9.7

package/dist/index.js

@@ -2558,8 +2558,8 @@ function MultiSelectTriggerBase({
         "aria-disabled": disabled || void 0,
         disabled,
         className: cn(
-          "flex h-auto max-h-9 min-h-9 w-full items-center justify-between gap-2 overflow-hidden rounded-md border border-input bg-background px-3 py-1.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground  dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
-          error ? "border-destructive focus:ring-1 focus:ring-destructive" : "border-input focus:ring-1 focus:ring-ring",
+          "flex h-auto max-h-9 min-h-9 w-full items-center justify-between gap-2 overflow-hidden rounded-md border border-input bg-background px-3 py-1.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[placeholder]:text-muted-foreground  dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground hover:text-primary",
+          error ? "border-destructive focus:ring-1 focus:ring-destructive dark:border-red-500" : "border-border focus:ring-1 focus:ring-ring",
           className
         ),
         children: [
@@ -7886,7 +7886,7 @@ function ScrollColumn({
               {
                 className: cn(
                   "snap-center flex items-center justify-center select-none font-bold tabular-nums transition-all duration-200",
-                  isCentered ? "text-2xl sm:text-xl text-foreground scale-110" : "text-base sm:text-sm text-muted-foreground/60"
+                  isCentered ? "text-foreground scale-110" : "text-base sm:text-sm text-muted-foreground/60"
                 ),
                 style: { height: `${itemHeight}px` },
                 children: item.toString().padStart(2, "0")
@@ -14017,8 +14017,7 @@ function MultiSelect({
           )
         ]
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage_default, { error })
+    )
   ] });
 }
 
@@ -15418,7 +15417,7 @@ var RechartTooltipWithTotal = ({
     {
       role: "dialog",
       "aria-label": `Tooltip ${label ?? ""}`,
-      className: "bg-card border border-border rounded-lg p-3 shadow-2xl max-w-xs",
+      className: "bg-card border border-border rounded-lg p-3 shadow-2xl max-w-xs z-9999",
       style: { minWidth: 220 },
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-2", children: [
@@ -15531,7 +15530,7 @@ var TooltipSimple = ({
     {
       role: "dialog",
       "aria-label": `Tooltip ${label ?? ""}`,
-      className: "bg-card border border-border rounded-lg p-3 shadow-2xl max-w-[280px]",
+      className: "bg-card border border-border rounded-lg p-3 shadow-2xl max-w-[280px] z-9999",
       style: { minWidth: 220 },
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between gap-3", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
@@ -16209,6 +16208,119 @@ var HorizontalLegend = ({
   ] }) });
 };
 var HorizontalLegend_default = HorizontalLegend;
+function ChartControls({
+  allKeys,
+  mapperConfig,
+  finalColors,
+  highlightedSeries,
+  toggleHighlight,
+  showOnlyHighlighted,
+  setShowOnlyHighlighted,
+  highlightedSeriesSize,
+  clearHighlights,
+  enableHighlights,
+  enableShowOnly,
+  enablePeriodsDropdown,
+  enableDraggableTooltips,
+  processedData,
+  onOpenPeriod,
+  rightOffset,
+  activePeriods,
+  containerClass,
+  containerWidth
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerClass, children: [
+    enableHighlights && /* @__PURE__ */ jsxRuntime.jsx(
+      Highlights_default,
+      {
+        allKeys,
+        mapperConfig,
+        finalColors,
+        highlightedSeries,
+        toggleHighlight,
+        containerWidth
+      }
+    ),
+    enableShowOnly && /* @__PURE__ */ jsxRuntime.jsx(
+      ShowOnly_default,
+      {
+        showOnlyHighlighted,
+        setShowOnlyHighlighted,
+        highlightedSeriesSize,
+        clearHighlights
+      }
+    ),
+    enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+      PeriodsDropdown_default,
+      {
+        processedData: processedData ?? [],
+        onOpenPeriod: onOpenPeriod ?? (() => {
+        }),
+        rightOffset,
+        activePeriods
+      }
+    ) })
+  ] });
+}
+function ChartHeader({
+  title,
+  titlePosition = "left",
+  HORIZONTAL_PADDING_CLASS = "px-24",
+  customLegend,
+  data,
+  allKeys,
+  processedData,
+  finalColors,
+  mapperConfig,
+  finalValueFormatter,
+  formatBR
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    title && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "text-[1.4rem] font-semibold text-foreground", children: title })
+      }
+    ),
+    customLegend && !!data.length && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-6 mb-2", HORIZONTAL_PADDING_CLASS), children: /* @__PURE__ */ jsxRuntime.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
+            }
+          };
+        })
+      }
+    ) })
+  ] });
+}
 var formatCompactNumber = (value) => {
   const isNegative = value < 0;
   const absValue = Math.abs(value);
@@ -16403,6 +16515,19 @@ var renderInsideBarLabel = (color, valueFormatter) => {
     );
   };
 };
+
+// src/utils/calcDivision.ts
+var calcDivision = (dividend, divisor) => {
+  return dividend / divisor;
+};
+
+// src/components/ui/charts/utils/formatters.ts
+function formatLinePercentage(value) {
+  const numValue = typeof value === "number" ? value : typeof value === "string" ? parseFloat(value) : 0;
+  const percentage = calcDivision(numValue, 100);
+  const formattedPercentage = typeof percentage === "number" ? percentage.toFixed(1).replace(".", ",") : String(percentage).replace(".", ",");
+  return `${formattedPercentage}%`;
+}
 var ChartBar = ({ x, y, w, h, i, loading }) => {
   const baseY = y - h;
   const d = i * 0.08;
@@ -16984,6 +17109,94 @@ var useChartMinMax = ({
     };
   }, [processedData, orderBy, xAxisDataKey, categoryFormatter]);
 };
+function useProcessedData({
+  data,
+  xAxisKey,
+  timeSeriesConfig,
+  startIndex,
+  endIndex
+}) {
+  return React33.useMemo(() => {
+    const mapped = data.map((item) => ({
+      ...item,
+      name: String(item[xAxisKey] || "N/A")
+    }));
+    if (timeSeriesConfig) {
+      return mapped.slice(startIndex, endIndex + 1);
+    }
+    return mapped;
+  }, [data, xAxisKey, timeSeriesConfig, startIndex, endIndex]);
+}
+function useBiaxial(biaxial, yAxisLabel) {
+  return React33.useMemo(() => {
+    if (!biaxial) return null;
+    if (typeof biaxial === "string") return { key: [biaxial] };
+    if (Array.isArray(biaxial)) return { key: biaxial };
+    const normalized = biaxial;
+    const leftLabelMissing = !yAxisLabel || String(yAxisLabel).trim() === "";
+    const rightLabelMissing = !normalized.label || String(normalized.label).trim() === "";
+    if (leftLabelMissing || rightLabelMissing) {
+      throw new Error(
+        "When using `biaxial`, you must provide both `yAxisLabel` (left axis) and `biaxial.label` (right axis)."
+      );
+    }
+    return normalized;
+  }, [biaxial, yAxisLabel]);
+}
+function useChartLayout({
+  chartMargin,
+  yAxisLabel,
+  AXIS_LABEL_MARGIN,
+  yTickFormatter,
+  minLeftDataValue,
+  niceMaxLeft,
+  rightKeysLength,
+  measuredWidth,
+  width,
+  computedWidth
+}) {
+  const finalChartRightMargin = chartMargin?.right ?? (rightKeysLength > 0 ? AXIS_LABEL_MARGIN : 30);
+  const finalChartLeftMargin = chartMargin?.left ?? (yAxisLabel ? AXIS_LABEL_MARGIN : 0);
+  const yAxisTickWidth = React33.useMemo(() => {
+    const yAxisLabelStr = yAxisLabel === null || yAxisLabel === void 0 ? void 0 : String(yAxisLabel);
+    return computeYAxisTickWidth(
+      chartMargin?.left,
+      yAxisLabelStr,
+      AXIS_LABEL_MARGIN,
+      yTickFormatter,
+      minLeftDataValue,
+      niceMaxLeft
+    );
+  }, [
+    chartMargin?.left,
+    yAxisLabel,
+    AXIS_LABEL_MARGIN,
+    yTickFormatter,
+    minLeftDataValue,
+    niceMaxLeft
+  ]);
+  const effectiveChartWidth = typeof width === "number" ? width : measuredWidth ? Math.max(0, measuredWidth - 32) : computedWidth;
+  const chartInnerWidth = effectiveChartWidth - finalChartLeftMargin - finalChartRightMargin;
+  const leftYAxisLabelDx = -Math.max(12, Math.round(yAxisTickWidth / 2));
+  const rightYAxisLabelDx = Math.max(12, Math.round(finalChartRightMargin / 2));
+  return {
+    finalChartRightMargin,
+    finalChartLeftMargin,
+    yAxisTickWidth,
+    effectiveChartWidth,
+    chartInnerWidth,
+    leftYAxisLabelDx,
+    rightYAxisLabelDx
+  };
+}
+function useSeriesOpacity(highlightedSeries) {
+  return React33.useCallback(
+    (key) => {
+      return highlightedSeries.size > 0 ? highlightedSeries.has(key) ? 1 : 0.25 : 1;
+    },
+    [highlightedSeries]
+  );
+}
 var filtersOrder = (mapperConfig, series) => {
   const seriesOrder = [];
   if (series) {
@@ -17107,10 +17320,37 @@ var fnContentLabelList = (p) => {
   return needsOutside ? null : true;
 };
 
-// src/utils/calcDivision.ts
-var calcDivision = (dividend, divisor) => {
-  return dividend / divisor;
-};
+// src/components/ui/charts/hooks/useOpenTooltipForPeriod.ts
+function useOpenTooltipForPeriod({
+  enableDraggableTooltips,
+  processedData,
+  activeTooltips,
+  setActiveTooltips,
+  maxTooltips,
+  effectiveChartWidth
+}) {
+  return React33.useCallback(
+    (periodName) => {
+      fnOpenTooltipForPeriod(
+        enableDraggableTooltips,
+        processedData,
+        periodName,
+        activeTooltips,
+        setActiveTooltips,
+        maxTooltips,
+        effectiveChartWidth
+      );
+    },
+    [
+      enableDraggableTooltips,
+      processedData,
+      activeTooltips,
+      effectiveChartWidth,
+      maxTooltips,
+      setActiveTooltips
+    ]
+  );
+}
 var DEFAULT_COLORS2 = ["#55af7d", "#8e68ff", "#2273e1"];
 var Chart = ({
   data,
@@ -17185,39 +17425,20 @@ var Chart = ({
     defaultEndIndex: timeSeriesConfig?.end,
     onRangeChange: timeSeriesConfig?.onRangeChange
   });
-  const processedData = React33.useMemo(() => {
-    const mapped = data.map((item) => ({
-      ...item,
-      name: String(item[xAxisConfig.dataKey] || "N/A")
-    }));
-    let result = mapped;
-    if (timeSeriesConfig) {
-      result = mapped.slice(startIndex, endIndex + 1);
-    }
-    return result;
-  }, [data, xAxisConfig.dataKey, timeSeriesConfig, startIndex, endIndex]);
+  const processedData = useProcessedData({
+    data,
+    xAxisKey: xAxisConfig.dataKey,
+    timeSeriesConfig,
+    startIndex,
+    endIndex
+  });
   const seriesOrder = filtersOrder(mapperConfig, series);
   const allKeys = seriesOrder.map((s) => s.key).filter(Boolean);
   const finalColors = React33.useMemo(
     () => generateColorMap(allKeys, colors2, mapperConfig),
     [allKeys, colors2, mapperConfig]
   );
-  const biaxialConfigNormalized = React33.useMemo(() => {
-    if (!biaxial) return null;
-    if (typeof biaxial === "string") return { key: [biaxial] };
-    if (Array.isArray(biaxial)) return { key: biaxial };
-    return biaxial;
-  }, [biaxial]);
-  React33.useMemo(() => {
-    if (!biaxialConfigNormalized) return;
-    const leftLabelMissing = !yAxisLabel || String(yAxisLabel).trim() === "";
-    const rightLabelMissing = !biaxialConfigNormalized.label || String(biaxialConfigNormalized.label).trim() === "";
-    if (leftLabelMissing || rightLabelMissing) {
-      throw new Error(
-        "When using `biaxial`, you must provide both `yAxisLabel` (left axis) and `biaxial.label` (right axis)."
-      );
-    }
-  }, [biaxialConfigNormalized, yAxisLabel]);
+  const biaxialConfigNormalized = useBiaxial(biaxial, yAxisLabel);
   const rightKeys = React33.useMemo(
     () => biaxialConfigNormalized?.key ?? [],
     [biaxialConfigNormalized]
@@ -17272,12 +17493,7 @@ var Chart = ({
       setActiveTooltips
     }
   );
-  const getSeriesOpacity = React33.useCallback(
-    (key) => {
-      return highlightedSeries.size > 0 ? highlightedSeries.has(key) ? 1 : 0.25 : 1;
-    },
-    [highlightedSeries]
-  );
+  const getSeriesOpacity = useSeriesOpacity(highlightedSeries);
   const finalValueFormatter = React33.useMemo(
     () => createValueFormatter(valueFormatter, formatBR),
     [valueFormatter, formatBR]
@@ -17288,51 +17504,36 @@ var Chart = ({
   );
   const AXIS_LABEL_MARGIN = 56;
   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 = React33.useMemo(() => {
-    return computeYAxisTickWidth(
-      chartMargin?.left,
-      yAxisLabel,
-      AXIS_LABEL_MARGIN,
-      yTickFormatter,
-      minLeftDataValue,
-      niceMaxLeft
-    );
-  }, [
-    chartMargin?.left,
+  const HORIZONTAL_PADDING_CLASS = "px-24";
+  const teste = "pl-24 pr-4";
+  const {
+    finalChartRightMargin,
+    finalChartLeftMargin,
+    yAxisTickWidth,
+    effectiveChartWidth,
+    chartInnerWidth,
+    leftYAxisLabelDx,
+    rightYAxisLabelDx
+  } = useChartLayout({
+    chartMargin,
     yAxisLabel,
+    AXIS_LABEL_MARGIN,
     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;
-  const chartInnerWidth = effectiveChartWidth - finalChartLeftMargin - finalChartRightMargin;
-  const leftYAxisLabelDx = -Math.max(12, Math.round(yAxisTickWidth / 2));
-  const rightYAxisLabelDx = Math.max(12, Math.round(finalChartRightMargin / 2));
-  const openTooltipForPeriod = React33.useCallback(
-    (periodName) => {
-      fnOpenTooltipForPeriod(
-        enableDraggableTooltips,
-        processedData,
-        periodName,
-        activeTooltips,
-        setActiveTooltips,
-        maxTooltips,
-        effectiveChartWidth
-      );
-    },
-    [
-      enableDraggableTooltips,
-      processedData,
-      activeTooltips,
-      effectiveChartWidth,
-      maxTooltips,
-      setActiveTooltips
-    ]
-  );
+    niceMaxLeft,
+    rightKeysLength: rightKeys.length,
+    measuredWidth,
+    width,
+    computedWidth
+  });
+  const openTooltipForPeriod = useOpenTooltipForPeriod({
+    enableDraggableTooltips,
+    processedData,
+    activeTooltips,
+    setActiveTooltips,
+    maxTooltips,
+    effectiveChartWidth
+  });
   if (!data && !isLoading) return null;
   if (isLoading) {
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -17347,128 +17548,65 @@ var Chart = ({
     );
   }
   if (Array.isArray(data) && data.length === 0) {
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        NoData_default,
-        {
-          title,
-          paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
-          height
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: 0 }, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: effectiveChartWidth, height, children: [
-        xAxisLabel && /* @__PURE__ */ jsxRuntime.jsx(
-          "text",
-          {
-            x: effectiveChartWidth - 40,
-            y: height - 10,
-            fontSize: 12,
-            fill: "hsl(var(--muted-foreground))",
-            fontWeight: 500,
-            textAnchor: "end",
-            children: xAxisLabel
-          }
-        ),
-        yAxisLabel && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+      NoData_default,
+      {
+        title,
+        paddingLeft: CONTAINER_PADDING_LEFT + finalChartLeftMargin,
+        height
+      }
+    );
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       ref: wrapperRef,
       className: cn(
-        "w-full overflow-hidden min-w-0 rounded-lg border-border",
+        "w-full overflow-hidden min-w-0 rounded-lg border-border h-full",
         className
       ),
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg bg-card relative w-full max-w-full min-w-0 py-1", children: [
-          title && /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ChartHeader,
             {
-              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__ */ jsxRuntime.jsx("div", { className: "text-[1.4rem] font-semibold text-foreground", children: title })
+              title,
+              titlePosition,
+              HORIZONTAL_PADDING_CLASS,
+              customLegend,
+              data,
+              allKeys,
+              processedData,
+              finalColors,
+              mapperConfig,
+              finalValueFormatter,
+              formatBR
             }
           ),
-          customLegend && !!data.length && /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-6 mb-2", HORIZONTAL_PADDING_CLASS), children: /* @__PURE__ */ jsxRuntime.jsx(
-            ChartTotalLegend_default,
+          allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsxRuntime.jsx(
+            ChartControls,
             {
-              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,
+              mapperConfig,
+              finalColors,
+              highlightedSeries,
+              toggleHighlight,
+              showOnlyHighlighted,
+              setShowOnlyHighlighted,
+              highlightedSeriesSize: highlightedSeries.size,
+              clearHighlights,
+              enableHighlights,
+              enableShowOnly,
+              enablePeriodsDropdown,
+              enableDraggableTooltips,
+              processedData,
+              onOpenPeriod: openTooltipForPeriod,
+              rightOffset: finalChartRightMargin,
+              activePeriods,
+              containerClass: cn("flex items-center gap-2", teste),
+              containerWidth: chartInnerWidth
             }
-          ) }),
-          allKeys.length > 0 && (enableHighlights || enableShowOnly) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center gap-2", teste), children: [
-            enableHighlights && /* @__PURE__ */ jsxRuntime.jsx(
-              Highlights_default,
-              {
-                allKeys,
-                mapperConfig,
-                finalColors,
-                highlightedSeries,
-                toggleHighlight,
-                containerWidth: chartInnerWidth
-              }
-            ),
-            enableShowOnly && /* @__PURE__ */ jsxRuntime.jsx(
-              ShowOnly_default,
-              {
-                showOnlyHighlighted,
-                setShowOnlyHighlighted,
-                highlightedSeriesSize: highlightedSeries.size,
-                clearHighlights
-              }
-            ),
-            enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-auto flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-              PeriodsDropdown_default,
-              {
-                processedData,
-                onOpenPeriod: openTooltipForPeriod,
-                rightOffset: finalChartRightMargin,
-                activePeriods
-              }
-            ) })
-          ] }),
+          ),
           !(allKeys.length > 0 && (enableHighlights || enableShowOnly)) && enablePeriodsDropdown && enableDraggableTooltips && /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
@@ -17490,7 +17628,7 @@ var Chart = ({
               )
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height, className: "h-full", children: /* @__PURE__ */ jsxRuntime.jsxs(
             recharts.ComposedChart,
             {
               data: processedData,
@@ -17707,12 +17845,6 @@ var Chart = ({
                     );
                   }
                   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__ */ jsxRuntime.jsx(
                       recharts.Line,
                       {
@@ -17734,7 +17866,7 @@ var Chart = ({
                             content: pillLabelRenderer_default(
                               color,
                               "filled",
-                              lineFormatter
+                              (props) => formatLinePercentage(props.value)
                             ),
                             offset: 14
                           }
@@ -18149,7 +18281,7 @@ var HorizontalChart = ({
                       margin: {
                         top: 10,
                         right: finalChartRightMargin,
-                        left: finalChartLeftMargin,
+                        left: 55 + finalChartLeftMargin,
                         bottom: 10
                       },
                       onClick: handleChartClick,
@@ -18192,9 +18324,9 @@ var HorizontalChart = ({
                             dataKey: xAxisConfig.dataKey,
                             stroke: "hsl(var(--muted-foreground))",
                             fontSize: 12,
-                            tickLine: false,
-                            axisLine: false,
-                            width: 125,
+                            tickLine: true,
+                            minTickGap: 24,
+                            axisLine: true,
                             tickFormatter: (value) => {
                               if (categoryFormatter)
                                 return categoryFormatter(value);
@@ -18336,109 +18468,6 @@ var HorizontalChart = ({
   );
 };
 var HorizontalChart_default = HorizontalChart;
-var defaultData = [
-  { name: "Vendas", value: 4e3 },
-  { name: "Marketing", value: 3e3 },
-  { name: "Desenvolvimento", value: 2e3 },
-  { name: "Suporte", value: 1e3 },
-  { name: "Outros", value: 800 }
-];
-var DEFAULT_COLORS4 = [
-  "#55af7d",
-  // verde do projeto
-  "#8e68ff",
-  // roxo do projeto
-  "#2273e1",
-  // azul do projeto
-  "#f59e0b",
-  // amarelo complementar
-  "#ef4444",
-  // vermelho complementar
-  "#8b5cf6",
-  // roxo claro
-  "#06b6d4",
-  // ciano
-  "#84cc16"
-  // verde lima
-];
-var RADIAN = Math.PI / 180;
-var renderCustomizedLabel = ({
-  cx = 0,
-  cy = 0,
-  midAngle = 0,
-  innerRadius = 0,
-  outerRadius = 0,
-  percent = 0
-}) => {
-  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
-  const x = cx + radius * Math.cos(-midAngle * RADIAN);
-  const y = cy + radius * Math.sin(-midAngle * RADIAN);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "text",
-    {
-      x,
-      y,
-      fill: "white",
-      textAnchor: x > cx ? "start" : "end",
-      dominantBaseline: "central",
-      fontSize: 12,
-      fontWeight: "600",
-      children: `${(percent * 100).toFixed(0)}%`
-    }
-  );
-};
-var CustomPieChart = ({
-  data = defaultData,
-  className,
-  height = 400,
-  width = "100%",
-  colors: colors2,
-  showTooltip = true,
-  showLegend = true,
-  showLabels = true,
-  innerRadius = 0,
-  outerRadius = 120,
-  centerX = "50%",
-  centerY = "50%"
-}) => {
-  const finalColors = colors2 || DEFAULT_COLORS4;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full rounded-lg bg-card p-4", className), children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width, height, children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.PieChart, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      recharts.Pie,
-      {
-        data,
-        cx: centerX,
-        cy: centerY,
-        labelLine: false,
-        label: showLabels ? renderCustomizedLabel : false,
-        outerRadius,
-        innerRadius,
-        fill: "#8884d8",
-        dataKey: "value",
-        children: data.map((entry, index) => /* @__PURE__ */ jsxRuntime.jsx(
-          recharts.Cell,
-          {
-            fill: finalColors[index % finalColors.length]
-          },
-          `cell-${entry.name}-${index}`
-        ))
-      }
-    ),
-    showTooltip && /* @__PURE__ */ jsxRuntime.jsx(
-      recharts.Tooltip,
-      {
-        contentStyle: {
-          backgroundColor: "hsl(var(--popover))",
-          border: "1px solid hsl(var(--border))",
-          borderRadius: "6px",
-          color: "hsl(var(--popover-foreground))"
-        }
-      }
-    ),
-    showLegend && /* @__PURE__ */ jsxRuntime.jsx(recharts.Legend, {})
-  ] }) }) });
-};
-var PieChart_default = CustomPieChart;
 var TimeSeries = ({
   data,
   xAxis,
@@ -18747,6 +18776,8 @@ exports.CarouselNextBase = CarouselNextBase;
 exports.CarouselPreviousBase = CarouselPreviousBase;
 exports.ChangeButton = ChangeButton;
 exports.Chart = Chart_default;
+exports.ChartControls = ChartControls;
+exports.ChartHeader = ChartHeader;
 exports.ChartTotalLegend = ChartTotalLegend_default;
 exports.CheckButton = CheckButton;
 exports.CheckboxBase = CheckboxBase;
@@ -18902,7 +18933,6 @@ exports.NoData = NoData_default;
 exports.NotificationButton = NotificationButton;
 exports.NumericInput = NumericInput;
 exports.PeriodsDropdown = PeriodsDropdown_default;
-exports.PieChart = PieChart_default;
 exports.PopoverAnchorBase = PopoverAnchorBase;
 exports.PopoverBase = PopoverBase;
 exports.PopoverContentBase = PopoverContentBase;
@@ -19025,6 +19055,7 @@ exports.detectDataFields = detectDataFields;
 exports.detectXAxis = detectXAxis;
 exports.display12HourValue = display12HourValue;
 exports.formatFieldName = formatFieldName;
+exports.formatLinePercentage = formatLinePercentage;
 exports.generateAdditionalColors = generateAdditionalColors;
 exports.generateColorMap = generateColorMap;
 exports.getAgendaEventsForDay = getAgendaEventsForDay;
@@ -19073,11 +19104,13 @@ exports.setSeconds = setSeconds;
 exports.sortEvents = sortEvents;
 exports.sortEventsAgenda = sortEventsAgenda;
 exports.toast = toast;
+exports.useBiaxial = useBiaxial;
 exports.useCalendarDnd = useCalendarDnd;
 exports.useCalendarDndAgenda = useCalendarDndAgenda;
 exports.useChartClick = useChartClick;
 exports.useChartDimensions = useChartDimensions;
 exports.useChartHighlights = useChartHighlights;
+exports.useChartLayout = useChartLayout;
 exports.useChartMinMax = useChartMinMax;
 exports.useChartTooltips = useChartTooltips;
 exports.useCurrentTimeIndicator = useCurrentTimeIndicator;
@@ -19086,6 +19119,9 @@ exports.useDrag = useDrag;
 exports.useEventVisibility = useEventVisibility;
 exports.useEventVisibilityAgenda = useEventVisibilityAgenda;
 exports.useIsMobile = useIsMobile;
+exports.useOpenTooltipForPeriod = useOpenTooltipForPeriod;
+exports.useProcessedData = useProcessedData;
+exports.useSeriesOpacity = useSeriesOpacity;
 exports.useTheme = useTheme;
 exports.useTimeSeriesRange = useTimeSeriesRange;
 exports.visualForItem = visualForItem;