@mlw-packages/react-components 1.9.1 → 1.9.3

package/dist/index.js

@@ -670,7 +670,7 @@ var DialogOverlayBase = React33__namespace.forwardRef(({ className, testid: data
   {
     ref,
     className: cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  border-border",
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 ",
       className
     ),
     "data-testid": dataTestId,
@@ -688,7 +688,7 @@ var DialogContentBase = React33__namespace.forwardRef(
         {
           ref,
           className: cn(
-            "fixed left-[50%] top-[50%] z-50 w-lg grid translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg max-h-[100dvh] overflow-auto rounded-md border-border",
+            "fixed left-[50%] top-[50%] z-50 w-[90%] sm:w-lg grid translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg max-h-[100dvh] overflow-y-auto overflow-x-hidden rounded-md border-border",
             className
           ),
           "data-testid": dataTestId,
@@ -1315,15 +1315,27 @@ var toast = {
 };
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React33__namespace.useState(void 0);
+  const [isMobile, setIsMobile] = React33__namespace.useState(
+    void 0
+  );
   React33__namespace.useEffect(() => {
+    const checkIsMobile = () => {
+      const isTouch = window.matchMedia("(pointer: coarse)").matches || navigator.maxTouchPoints > 0;
+      const isSmallScreen = window.innerWidth < MOBILE_BREAKPOINT;
+      return isTouch || isSmallScreen;
+    };
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const touchMql = window.matchMedia("(pointer: coarse)");
     const onChange = () => {
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+      setIsMobile(checkIsMobile());
     };
     mql.addEventListener("change", onChange);
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
-    return () => mql.removeEventListener("change", onChange);
+    touchMql.addEventListener("change", onChange);
+    setIsMobile(checkIsMobile());
+    return () => {
+      mql.removeEventListener("change", onChange);
+      touchMql.removeEventListener("change", onChange);
+    };
   }, []);
   return !!isMobile;
 }
@@ -1942,21 +1954,28 @@ var CommandDialogBase = ({ children, open, ...props }) => {
     "command-dialog"
   ) }) }) });
 };
-var CommandInputBase = React33__namespace.forwardRef(({ className, testid: dataTestId = "command-input", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b px-3  border-border", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ jsxRuntime.jsx(react.MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 text-primary" }),
-  /* @__PURE__ */ jsxRuntime.jsx(
-    cmdk.Command.Input,
-    {
-      ref,
-      className: cn(
-        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none text-primary placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      "data-testid": dataTestId,
-      ...props
-    }
-  )
-] }));
+var CommandInputBase = React33__namespace.forwardRef(({ className, testid: dataTestId = "command-input", ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    className: "flex items-center border-b px-3  border-border",
+    "cmdk-input-wrapper": "",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(react.MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 text-primary" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        cmdk.Command.Input,
+        {
+          ref,
+          className: cn(
+            "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none text-primary placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          ),
+          "data-testid": dataTestId,
+          ...props
+        }
+      )
+    ]
+  }
+));
 CommandInputBase.displayName = cmdk.Command.Input.displayName;
 var CommandListBase = React33__namespace.forwardRef(({ className, testid: dataTestId = "command-list", ...props }, ref) => {
   const listRef = React33__namespace.useRef(null);
@@ -1964,11 +1983,45 @@ var CommandListBase = React33__namespace.forwardRef(({ className, testid: dataTe
     const element = listRef.current;
     if (!element) return;
     const handleWheel = (e) => {
+      const target = e.currentTarget;
+      const { scrollTop, scrollHeight, clientHeight } = target;
+      const isScrollingDown = e.deltaY > 0;
+      const isScrollingUp = e.deltaY < 0;
+      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
+      const isAtTop = scrollTop <= 1;
+      if (isScrollingDown && !isAtBottom || isScrollingUp && !isAtTop) {
+        e.stopPropagation();
+      }
+    };
+    let touchStartY = 0;
+    const handleTouchStart = (e) => {
+      touchStartY = e.touches[0].clientY;
       e.stopPropagation();
     };
+    const handleTouchMove = (e) => {
+      const target = e.currentTarget;
+      const { scrollTop, scrollHeight, clientHeight } = target;
+      const touchCurrentY = e.touches[0].clientY;
+      const touchDeltaY = touchStartY - touchCurrentY;
+      const isScrollingDown = touchDeltaY > 0;
+      const isScrollingUp = touchDeltaY < 0;
+      const isAtBottom = scrollTop + clientHeight >= scrollHeight - 1;
+      const isAtTop = scrollTop <= 1;
+      if (isScrollingDown && !isAtBottom || isScrollingUp && !isAtTop) {
+        e.stopPropagation();
+      } else if (isScrollingDown && isAtBottom || isScrollingUp && isAtTop) {
+        e.preventDefault();
+      }
+    };
     element.addEventListener("wheel", handleWheel, { passive: false });
+    element.addEventListener("touchstart", handleTouchStart, {
+      passive: false
+    });
+    element.addEventListener("touchmove", handleTouchMove, { passive: false });
     return () => {
       element.removeEventListener("wheel", handleWheel);
+      element.removeEventListener("touchmove", handleTouchMove);
+      element.removeEventListener("touchstart", handleTouchStart);
     };
   }, []);
   const combinedRef = React33__namespace.useCallback(
@@ -1993,7 +2046,13 @@ var CommandListBase = React33__namespace.forwardRef(({ className, testid: dataTe
       "data-testid": dataTestId,
       style: {
         overscrollBehavior: "contain",
-        WebkitOverflowScrolling: "touch"
+        WebkitOverflowScrolling: "touch",
+        touchAction: "pan-y",
+        scrollbarWidth: "thin",
+        scrollbarColor: "hsl(var(--muted)) transparent",
+        overflowY: "auto",
+        willChange: "scroll-position",
+        transform: "translateZ(0)"
       },
       ...props
     }
@@ -2071,6 +2130,7 @@ var PopoverContentBase = React33__namespace.forwardRef(
     align = "center",
     sideOffset = 4,
     testid: dataTestId = "popover-content",
+    style,
     ...props
   }, ref) => /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
     PopoverPrimitive__namespace.Content,
@@ -2079,10 +2139,20 @@ var PopoverContentBase = React33__namespace.forwardRef(
       align,
       sideOffset,
       className: cn(
-        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-[100] w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       ),
       "data-testid": dataTestId,
+      style: {
+        ...style,
+        WebkitOverflowScrolling: "touch",
+        overscrollBehavior: "contain",
+        pointerEvents: "auto"
+      },
+      onWheel: (e) => {
+        e.stopPropagation();
+        props.onWheel?.(e);
+      },
       onInteractOutside: (event) => {
         props.onInteractOutside?.(event);
         if (event.defaultPrevented) return;
@@ -2139,7 +2209,6 @@ function ComboboxBase({
   hideClear = false
 }) {
   const [open, setOpen] = React33.useState(false);
-  const isMobile = useIsMobile();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -2151,7 +2220,7 @@ function ComboboxBase({
           {
             open,
             onOpenChange: (v) => !disabled && setOpen(v),
-            modal: isMobile,
+            modal: false,
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
                 PopoverTriggerBase,
@@ -2883,7 +2952,7 @@ var SelectContentBase = React33__namespace.forwardRef(
     {
       ref,
       className: cn(
-        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+        "relative z-50 max-h-96 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
         className
       ),
       position,
@@ -5424,14 +5493,29 @@ var TableCaptionBase = React33__namespace.forwardRef(({ className, ...props }, r
   }
 ));
 TableCaptionBase.displayName = "TableCaptionBase";
-var TabsBase = TabsPrimitive__namespace.Root;
+var TabsBase = React33__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  TabsPrimitive__namespace.Root,
+  {
+    ref,
+    className: cn("w-full", className),
+    ...props
+  }
+));
+TabsBase.displayName = TabsPrimitive__namespace.Root.displayName;
 var TabsListBase = React33__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   TabsPrimitive__namespace.List,
   {
     ref,
     className: cn(
       "relative flex w-full items-center justify-start gap-2 border-b border-border",
-      "bg-transparent",
+      "bg-transparent overflow-x-auto",
+      "scrollbar-thin scrollbar-thumb-muted-foreground/30 scrollbar-track-transparent",
+      "hover:scrollbar-thumb-muted-foreground/50",
+      "[&::-webkit-scrollbar]:h-1.5",
+      "[&::-webkit-scrollbar-track]:bg-transparent",
+      "[&::-webkit-scrollbar-thumb]:bg-muted-foreground/30",
+      "[&::-webkit-scrollbar-thumb]:rounded-full",
+      "hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/50",
       className
     ),
     ...props
@@ -7764,13 +7848,11 @@ function ScrollColumn({
   } = useScrollColumn({ value, onChange, max, step });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground rounded-md font-semibold text-sm text-center pb-2 uppercase tracking-wider", children: label }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative w-24 sm:w-20"), children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 h-16 bg-gradient-to-b from-background via-background/80 to-transparent pointer-events-none z-20" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-background via-background/80 to-transparent pointer-events-none z-20" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("relative w-20"), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: "absolute left-0 right-0 pointer-events-none bg-muted/50 backdrop-blur-sm rounded-md border border-border",
+          className: "absolute left-0 right-0 pointer-events-none bg-muted/50  rounded-md border border-border",
           style: {
             top: `${centerIndex * itemHeight}px`,
             height: `${itemHeight}px`
@@ -8154,7 +8236,7 @@ function DateTimePicker({
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(ErrorMessage_default, { error }),
-      /* @__PURE__ */ jsxRuntime.jsx(DialogContentBase, { className: "p-0 max-h-[65vh] w-[calc(100vw-24px)] sm:w-[calc(100vw-32px)] overflow-hidden flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto flex-1", children: renderPickerContent() }) })
+      /* @__PURE__ */ jsxRuntime.jsx(DialogContentBase, { className: "p-0 max-h-[95vh] w-3/6 overflow-hidden flex flex-col", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-y-auto flex-1", children: renderPickerContent() }) })
     ] }) : /* @__PURE__ */ jsxRuntime.jsxs(PopoverBase, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         PopoverTriggerBase,
@@ -10140,8 +10222,8 @@ function EventAgenda({
                   setView(v);
                 },
                 items: selectItems,
-                className: "gap-2 px-3 py-1.5 max-[479px]:h-8",
                 placeholder: viewLabel(view),
+                className: "min-w-24",
                 hideClear: true
               }
             ) })
@@ -10149,8 +10231,7 @@ function EventAgenda({
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: "flex flex-1 flex-col transition-all duration-200 ease-in-out",
-              "aria-live": "polite",
+              className: "flex flex-col transition-all duration-200 ease-in-out",
               children: [
                 view === "month" && /* @__PURE__ */ jsxRuntime.jsx(
                   MonthViewAgenda,
@@ -14158,29 +14239,62 @@ var adaptDataForTooltip = (data, xAxisKey) => {
 };
 var createValueFormatter = (customFormatter, formatBR) => {
   const nf = new Intl.NumberFormat("pt-BR", {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
   });
+  const prefixFormats = ["R$", "$", "\u20AC", "\xA3"];
+  const suffixFormats = ["%", "kg", "km", "m", "L", "un", "t", "h", "min", "s"];
+  const getFormattedValue = (baseValue, format17) => {
+    const trimmedFormat = format17.trim();
+    if (prefixFormats.includes(trimmedFormat)) {
+      return `${trimmedFormat} ${baseValue}`;
+    }
+    if (suffixFormats.includes(trimmedFormat)) {
+      return `${baseValue}${trimmedFormat}`;
+    }
+    return `${baseValue} ${trimmedFormat}`;
+  };
   if (customFormatter) {
-    if (formatBR) {
-      const wrapped = (props) => {
-        const { value, formattedValue } = props;
+    if (typeof customFormatter === "object" && !Array.isArray(customFormatter)) {
+      const formatterMap = customFormatter;
+      return (props) => {
+        const {
+          value,
+          formattedValue,
+          dataKey: propsDataKey
+        } = props;
         let num = NaN;
         if (typeof value === "number") num = value;
         else if (typeof value === "string" && value.trim() !== "") {
           const parsed = Number(value);
           num = Number.isNaN(parsed) ? NaN : parsed;
         }
-        const brFormatted = !Number.isNaN(num) ? nf.format(num) : String(formattedValue ?? value ?? "");
-        return customFormatter({
-          ...props,
-          formattedValue: brFormatted,
-          value: void 0
-        });
+        const baseFormatted = formatBR && !Number.isNaN(num) ? nf.format(num) : String(formattedValue ?? value ?? "");
+        const format17 = propsDataKey && formatterMap[propsDataKey] ? formatterMap[propsDataKey] : "";
+        return format17 ? getFormattedValue(baseFormatted, format17) : baseFormatted;
       };
-      return wrapped;
     }
-    return customFormatter;
+    if (typeof customFormatter === "function") {
+      if (formatBR) {
+        const wrapped = (props) => {
+          const { value, formattedValue } = props;
+          let num = NaN;
+          if (typeof value === "number") num = value;
+          else if (typeof value === "string" && value.trim() !== "") {
+            const parsed = Number(value);
+            num = Number.isNaN(parsed) ? NaN : parsed;
+          }
+          const brFormatted = !Number.isNaN(num) ? nf.format(num) : String(formattedValue ?? value ?? "");
+          return customFormatter({
+            ...props,
+            formattedValue: brFormatted,
+            value: void 0
+          });
+        };
+        return wrapped;
+      }
+      return customFormatter;
+    }
   }
   if (!formatBR) return void 0;
   const builtIn = (props) => {
@@ -14198,8 +14312,8 @@ var createValueFormatter = (customFormatter, formatBR) => {
 };
 var createYTickFormatter = (finalValueFormatter) => {
   const nf = new Intl.NumberFormat("pt-BR", {
-    minimumFractionDigits: 2,
-    maximumFractionDigits: 2
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 0
   });
   const stripCurrency = (s) => String(s).replace(/^\s*R\$\s?/, "");
   if (finalValueFormatter) {
@@ -15709,7 +15823,7 @@ var Brush = ({
   xAxisKey,
   seriesOrder,
   finalColors,
-  brushHeight = 80,
+  brushHeight = 40,
   brushColor,
   miniChartOpacity = 0.3
 }) => {
@@ -15933,16 +16047,76 @@ var ChartTotalLegend = ({ items }) => {
   ] }, index)) });
 };
 var ChartTotalLegend_default = ChartTotalLegend;
+var formatFieldName2 = (key) => {
+  return key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase()).trim();
+};
+var HorizontalLegend = ({
+  allKeys,
+  mapperConfig,
+  finalColors,
+  labelMap,
+  legendUppercase = false,
+  orderBy,
+  maxPeriodLabel,
+  minPeriodLabel,
+  className
+}) => {
+  const formatLegendLabel = (key) => {
+    const label = mapperConfig[key]?.label ?? labelMap?.[key] ?? formatFieldName2(key);
+    return legendUppercase ? label.toUpperCase() : label;
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(className), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-4 flex-wrap", children: [
+    allKeys.map((key) => {
+      const displayLabel = formatLegendLabel(key);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "w-2.5 h-2.5 sm:w-3 sm:h-3 rounded-sm flex-shrink-0",
+            style: { backgroundColor: finalColors[key] }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm tracking-[0] break-words", children: displayLabel })
+      ] }, key);
+    }),
+    orderBy && maxPeriodLabel && minPeriodLabel && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 sm:gap-3 md:gap-4 w-full sm:w-auto justify-center mt-2 sm:mt-0 sm:ml-3 sm:pl-3 md:ml-4 md:pl-4 sm:border-l border-border", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.FunnelSimpleIcon,
+          {
+            className: "w-3 h-3 sm:w-4 sm:h-4 text-green-600 flex-shrink-0",
+            weight: "bold"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm tracking-[0] font-medium truncate max-w-[120px] sm:max-w-none", children: maxPeriodLabel })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 sm:gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          react.FunnelSimpleIcon,
+          {
+            className: "w-3 h-3 sm:w-4 sm:h-4 text-red-600 rotate-180 flex-shrink-0",
+            weight: "bold"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-sm tracking-[0] font-medium truncate max-w-[120px] sm:max-w-none", children: minPeriodLabel })
+      ] })
+    ] })
+  ] }) });
+};
+var HorizontalLegend_default = HorizontalLegend;
 var formatCompactNumber = (value) => {
   const isNegative = value < 0;
   const absValue = Math.abs(value);
   let formatted;
   if (absValue >= 1e9) {
-    formatted = (absValue / 1e9).toFixed(1).replace(/\.0$/, "") + "B";
+    const billions = absValue / 1e9;
+    formatted = (billions % 1 === 0 ? billions.toFixed(0) : billions.toFixed(1)) + "B";
   } else if (absValue >= 1e6) {
-    formatted = (absValue / 1e6).toFixed(1).replace(/\.0$/, "") + "M";
+    const millions = absValue / 1e6;
+    formatted = (millions % 1 === 0 ? millions.toFixed(0) : millions.toFixed(1)) + "M";
   } else if (absValue >= 1e3) {
-    formatted = (absValue / 1e3).toFixed(1).replace(/\.0$/, "") + " mil";
+    const thousands = absValue / 1e3;
+    formatted = (thousands % 1 === 0 ? thousands.toFixed(0) : thousands.toFixed(1)) + " mil";
   } else {
     try {
       const nf = new Intl.NumberFormat("pt-BR", {
@@ -16669,6 +16843,42 @@ function useTimeSeriesRange({
     handleMouseDown
   };
 }
+var useChartMinMax = ({
+  processedData,
+  orderBy,
+  xAxisDataKey,
+  categoryFormatter
+}) => {
+  return React33.useMemo(() => {
+    if (!processedData || processedData.length === 0 || !orderBy) {
+      return {
+        maxPeriodLabel: "",
+        minPeriodLabel: ""
+      };
+    }
+    let maxValue = -Infinity;
+    let minValue = Infinity;
+    let maxPeriodLabel = "";
+    let minPeriodLabel = "";
+    processedData.forEach((item) => {
+      const value = Number(item[orderBy]) || 0;
+      const periodName = String(item[xAxisDataKey] || "N/A");
+      const formattedPeriod = categoryFormatter ? categoryFormatter(periodName) : periodName;
+      if (value > maxValue) {
+        maxValue = value;
+        maxPeriodLabel = formattedPeriod;
+      }
+      if (value < minValue) {
+        minValue = value;
+        minPeriodLabel = formattedPeriod;
+      }
+    });
+    return {
+      maxPeriodLabel,
+      minPeriodLabel
+    };
+  }, [processedData, orderBy, xAxisDataKey, categoryFormatter]);
+};
 var filtersOrder = (mapperConfig, series) => {
   const seriesOrder = [];
   if (series) {
@@ -16741,7 +16951,7 @@ var fnSmartConfig = ({ xAxis, data, labelMap }) => {
   return { xAxisConfig, mapperConfig };
 };
 var fnConfigRightKeys = (biaxialConfigNormalized, yTickFormatter, finalColors) => {
-  const decimals = typeof biaxialConfigNormalized?.decimals === "number" ? Math.max(0, Math.floor(biaxialConfigNormalized.decimals)) : 2;
+  const decimals = typeof biaxialConfigNormalized?.decimals === "number" ? Math.max(0, Math.floor(biaxialConfigNormalized.decimals)) : 1;
   const rightTickFormatter = (v) => {
     if (biaxialConfigNormalized?.percentage) {
       const num = Number(String(v));
@@ -16791,6 +17001,11 @@ var fnContentLabelList = (p) => {
   const needsOutside = barHeight > 0 && barHeight < smallThreshold || barWidth > 0 && barWidth < smallThreshold;
   return needsOutside ? null : true;
 };
+
+// src/utils/calcDivision.ts
+var calcDivision = (dividend, divisor) => {
+  return dividend / divisor;
+};
 var DEFAULT_COLORS2 = ["#55af7d", "#8e68ff", "#2273e1"];
 var Chart = ({
   data,
@@ -16827,7 +17042,9 @@ var Chart = ({
   isLoading = false,
   timeSeries,
   timeSeriesLegend,
-  customLegend
+  customLegend,
+  horizontal = false,
+  orderBy
 }) => {
   const { xAxisConfig, mapperConfig } = React33.useMemo(() => {
     return fnSmartConfig({ xAxis, data, labelMap });
@@ -16863,16 +17080,38 @@ var Chart = ({
     defaultEndIndex: timeSeriesConfig?.end,
     onRangeChange: timeSeriesConfig?.onRangeChange
   });
+  const { maxPeriodLabel, minPeriodLabel } = useChartMinMax({
+    processedData: data,
+    orderBy,
+    xAxisDataKey: xAxisConfig.dataKey,
+    categoryFormatter
+  });
   const processedData = React33.useMemo(() => {
     const mapped = data.map((item) => ({
       ...item,
       name: String(item[xAxisConfig.dataKey] || "N/A")
     }));
+    let result = mapped;
     if (timeSeriesConfig) {
-      return mapped.slice(startIndex, endIndex + 1);
+      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 mapped;
-  }, [data, xAxisConfig.dataKey, timeSeriesConfig, startIndex, endIndex]);
+    return result;
+  }, [
+    data,
+    xAxisConfig.dataKey,
+    timeSeriesConfig,
+    startIndex,
+    endIndex,
+    orderBy,
+    horizontal
+  ]);
   const seriesOrder = filtersOrder(mapperConfig, series);
   const allKeys = seriesOrder.map((s) => s.key).filter(Boolean);
   const finalColors = React33.useMemo(
@@ -17038,7 +17277,10 @@ var Chart = ({
     "div",
     {
       ref: wrapperRef,
-      className: cn("w-full overflow-hidden min-w-0 rounded-lg border-border", className),
+      className: cn(
+        "w-full overflow-hidden min-w-0 rounded-lg border-border",
+        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",
@@ -17135,303 +17377,416 @@ var Chart = ({
             )
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height, children: /* @__PURE__ */ jsxRuntime.jsxs(
-          recharts.ComposedChart,
+        showLegend && horizontal && /* @__PURE__ */ jsxRuntime.jsx(
+          HorizontalLegend_default,
           {
-            data: processedData,
-            height,
-            margin: {
-              top: 10,
-              right: finalChartRightMargin,
-              left: finalChartLeftMargin,
-              bottom: 10
+            allKeys,
+            mapperConfig,
+            finalColors,
+            labelMap,
+            legendUppercase,
+            orderBy,
+            maxPeriodLabel,
+            minPeriodLabel,
+            className: cn(HORIZONTAL_PADDING_CLASS)
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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
             },
-            onClick: handleChartClick,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
-                const key = s.key;
-                const color = finalColors[key];
-                return /* @__PURE__ */ jsxRuntime.jsxs(
-                  "linearGradient",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              recharts.ResponsiveContainer,
+              {
+                width: "100%",
+                height: horizontal ? Math.max(height, processedData.length * 50) : height,
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  recharts.ComposedChart,
                   {
-                    id: `gradient-${key}`,
-                    x1: "0",
-                    y1: "0",
-                    x2: "0",
-                    y2: "0.8",
+                    data: processedData,
+                    height: horizontal ? Math.max(height, processedData.length * 50) : height,
+                    layout: horizontal ? "vertical" : "horizontal",
+                    margin: {
+                      top: 10,
+                      right: finalChartRightMargin,
+                      left: finalChartLeftMargin,
+                      bottom: 10
+                    },
+                    onClick: handleChartClick,
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.8 }),
-                      /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "90%", stopColor: color, stopOpacity: 0.1 })
-                    ]
-                  },
-                  `gradient-${key}`
-                );
-              }) }),
-              showGrid && /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.CartesianGrid,
-                {
-                  strokeDasharray: "3 3",
-                  stroke: gridColor || "hsl(var(--muted-foreground))",
-                  opacity: 0.5
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.XAxis,
-                {
-                  dataKey: xAxisConfig.dataKey,
-                  stroke: "hsl(var(--muted-foreground))",
-                  fontSize: 12,
-                  tickLine: false,
-                  axisLine: false,
-                  tickFormatter: (value) => {
-                    if (categoryFormatter)
-                      return categoryFormatter(value);
-                    if (xAxisConfig.valueFormatter)
-                      return xAxisConfig.valueFormatter(value);
-                    return String(value ?? "");
-                  },
-                  label: xAxisLabel ? {
-                    value: xAxisLabel,
-                    position: "insideBottomRight",
-                    offset: -5,
-                    style: {
-                      fontSize: 12,
-                      fill: "hsl(var(--muted-foreground))",
-                      fontWeight: 500
-                    }
-                  } : void 0
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.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
-                }
-              ),
-              minLeftDataValue < 0 && /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.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__ */ jsxRuntime.jsx(
-                  recharts.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__ */ jsxRuntime.jsx(
-                recharts.Tooltip,
-                {
-                  content: showTooltipTotal ? /* @__PURE__ */ jsxRuntime.jsx(
-                    TooltipWithTotal_default,
-                    {
-                      finalColors,
-                      valueFormatter: finalValueFormatter,
-                      categoryFormatter,
-                      periodLabel
-                    }
-                  ) : /* @__PURE__ */ jsxRuntime.jsx(
-                    TooltipSimple_default,
-                    {
-                      finalColors,
-                      valueFormatter: finalValueFormatter,
-                      categoryFormatter,
-                      periodLabel
-                    }
-                  ),
-                  cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
-                }
-              ),
-              showLegend && /* @__PURE__ */ jsxRuntime.jsx(
-                recharts.Legend,
-                {
-                  iconSize: 12,
-                  formatter: (value) => {
-                    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tracking-[0]", 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__ */ jsxRuntime.jsx(
-                    recharts.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__ */ jsxRuntime.jsx(
-                        recharts.Rectangle,
+                      /* @__PURE__ */ jsxRuntime.jsx("defs", { children: seriesOrder.filter((s) => s.type === "area").map((s) => {
+                        const key = s.key;
+                        const color = finalColors[key];
+                        return /* @__PURE__ */ jsxRuntime.jsxs(
+                          "linearGradient",
+                          {
+                            id: `gradient-${key}`,
+                            x1: "0",
+                            y1: "0",
+                            x2: "0",
+                            y2: "0.8",
+                            children: [
+                              /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "0%", stopColor: color, stopOpacity: 0.8 }),
+                              /* @__PURE__ */ jsxRuntime.jsx(
+                                "stop",
+                                {
+                                  offset: "90%",
+                                  stopColor: color,
+                                  stopOpacity: 0.1
+                                }
+                              )
+                            ]
+                          },
+                          `gradient-${key}`
+                        );
+                      }) }),
+                      showGrid && /* @__PURE__ */ jsxRuntime.jsx(
+                        recharts.CartesianGrid,
                         {
-                          fill: color,
-                          stroke: color,
-                          strokeWidth: 2,
-                          opacity: 0.8
+                          strokeDasharray: "3 3",
+                          stroke: gridColor || "hsl(var(--muted-foreground))",
+                          opacity: 0.5
                         }
                       ),
-                      children: showLabels && labelsVisibility.bar !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsxRuntime.jsx(
-                        recharts.LabelList,
+                      horizontal ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.XAxis,
+                          {
+                            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
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.YAxis,
+                          {
+                            type: "category",
+                            dataKey: xAxisConfig.dataKey,
+                            yAxisId: "left",
+                            width: yAxisTickWidth,
+                            stroke: "hsl(var(--muted-foreground))",
+                            fontSize: 12,
+                            tickLine: false,
+                            axisLine: false,
+                            tickFormatter: (value) => {
+                              if (categoryFormatter)
+                                return categoryFormatter(value);
+                              if (xAxisConfig.valueFormatter)
+                                return xAxisConfig.valueFormatter(
+                                  value
+                                );
+                              return String(value ?? "");
+                            },
+                            label: xAxisLabel ? {
+                              value: xAxisLabel,
+                              angle: -90,
+                              position: "insideTop",
+                              dx: leftYAxisLabelDx,
+                              style: {
+                                fontSize: 12,
+                                fill: "hsl(var(--muted-foreground))",
+                                fontWeight: 500,
+                                textAnchor: "middle"
+                              }
+                            } : void 0
+                          }
+                        )
+                      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.XAxis,
+                          {
+                            dataKey: xAxisConfig.dataKey,
+                            stroke: "hsl(var(--muted-foreground))",
+                            fontSize: 12,
+                            tickLine: false,
+                            axisLine: false,
+                            tickFormatter: (value) => {
+                              if (categoryFormatter)
+                                return categoryFormatter(value);
+                              if (xAxisConfig.valueFormatter)
+                                return xAxisConfig.valueFormatter(
+                                  value
+                                );
+                              return String(value ?? "");
+                            },
+                            label: xAxisLabel ? {
+                              value: xAxisLabel,
+                              position: "insideBottomRight",
+                              offset: -5,
+                              style: {
+                                fontSize: 12,
+                                fill: "hsl(var(--muted-foreground))",
+                                fontWeight: 500
+                              }
+                            } : void 0
+                          }
+                        ),
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.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
+                          }
+                        )
+                      ] }),
+                      minLeftDataValue < 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                        recharts.ReferenceLine,
                         {
-                          dataKey: key,
-                          content: (props) => {
-                            if (!fnContentLabelList(props))
-                              return null;
-                            const inside = renderInsideBarLabel(
-                              color,
-                              finalValueFormatter
-                            );
-                            return inside(props);
-                          },
-                          offset: 0
+                          y: 0,
+                          yAxisId: "left",
+                          stroke: "hsl(var(--muted-foreground))",
+                          strokeWidth: 1,
+                          strokeDasharray: "4 4"
                         }
-                      ) : null
-                    },
-                    `bar-${key}`
-                  );
-                }
-                if (s.type === "line") {
-                  return /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.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__ */ jsxRuntime.jsx(
-                        recharts.LabelList,
+                      ),
+                      rightKeys.length > 0 && (() => {
+                        const { rightAxisColor, rightTickFormatter } = fnConfigRightKeys(
+                          biaxialConfigNormalized,
+                          yTickFormatter,
+                          finalColors
+                        );
+                        return /* @__PURE__ */ jsxRuntime.jsx(
+                          recharts.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__ */ jsxRuntime.jsx(
+                        recharts.Tooltip,
                         {
-                          dataKey: key,
-                          position: "top",
-                          content: pillLabelRenderer_default(
-                            color,
-                            "filled",
-                            finalValueFormatter
+                          content: showTooltipTotal ? /* @__PURE__ */ jsxRuntime.jsx(
+                            TooltipWithTotal_default,
+                            {
+                              finalColors,
+                              valueFormatter: finalValueFormatter,
+                              categoryFormatter,
+                              periodLabel
+                            }
+                          ) : /* @__PURE__ */ jsxRuntime.jsx(
+                            TooltipSimple_default,
+                            {
+                              finalColors,
+                              valueFormatter: finalValueFormatter,
+                              categoryFormatter,
+                              periodLabel
+                            }
                           ),
-                          offset: 14
+                          cursor: { fill: "hsl(var(--muted))", opacity: 0.1 }
                         }
-                      ) : null
-                    },
-                    `line-${key}`
-                  );
-                }
-                if (s.type === "area") {
-                  return /* @__PURE__ */ jsxRuntime.jsx(
-                    recharts.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__ */ jsxRuntime.jsx(
-                        recharts.LabelList,
+                      ),
+                      showLegend && !horizontal && /* @__PURE__ */ jsxRuntime.jsx(
+                        recharts.Legend,
                         {
-                          dataKey: key,
-                          position: "top",
-                          content: pillLabelRenderer_default(
-                            color,
-                            "soft",
-                            finalValueFormatter
-                          ),
-                          offset: 12
+                          iconSize: 12,
+                          formatter: (value) => {
+                            return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tracking-[0] rounded-sm", children: fnFormatterValueLegend(
+                              value,
+                              mapperConfig,
+                              labelMap,
+                              legendUppercase
+                            ) });
+                          }
                         }
-                      ) : null
-                    },
-                    `area-${key}`
-                  );
-                }
-                return null;
-              })
-            ]
+                      ),
+                      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__ */ jsxRuntime.jsx(
+                            recharts.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__ */ jsxRuntime.jsx(
+                                recharts.Rectangle,
+                                {
+                                  fill: color,
+                                  stroke: color,
+                                  strokeWidth: 2,
+                                  opacity: 0.8
+                                }
+                              ),
+                              children: showLabels && labelsVisibility.bar !== false && highlightedSeries.size === 0 || highlightedSeries.has(key) ? /* @__PURE__ */ jsxRuntime.jsx(
+                                recharts.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__ */ jsxRuntime.jsx(
+                            recharts.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__ */ jsxRuntime.jsx(
+                                recharts.LabelList,
+                                {
+                                  dataKey: key,
+                                  position: "top",
+                                  content: pillLabelRenderer_default(
+                                    color,
+                                    "filled",
+                                    lineFormatter
+                                  ),
+                                  offset: 14
+                                }
+                              ) : null
+                            },
+                            `line-${key}`
+                          );
+                        }
+                        if (s.type === "area") {
+                          return /* @__PURE__ */ jsxRuntime.jsx(
+                            recharts.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__ */ jsxRuntime.jsx(
+                                recharts.LabelList,
+                                {
+                                  dataKey: key,
+                                  position: "top",
+                                  content: pillLabelRenderer_default(
+                                    color,
+                                    "soft",
+                                    finalValueFormatter
+                                  ),
+                                  offset: 12
+                                }
+                              ) : null
+                            },
+                            `area-${key}`
+                          );
+                        }
+                        return null;
+                      })
+                    ]
+                  }
+                )
+              }
+            )
           }
-        ) }),
+        ),
         enableDraggableTooltips && activeTooltips.map((tooltip) => /* @__PURE__ */ jsxRuntime.jsx(
           DraggableTooltip_default,
           {
@@ -18009,6 +18364,7 @@ exports.FileUploader = FileUploader;
 exports.FilterButton = FilterButton;
 exports.HideButton = HideButton;
 exports.Highlights = Highlights_default;
+exports.HorizontalLegend = HorizontalLegend_default;
 exports.HoverCardBase = HoverCardBase;
 exports.HoverCardContentBase = HoverCardContentBase;
 exports.HoverCardTriggerBase = HoverCardTriggerBase;
@@ -18234,6 +18590,7 @@ exports.useCalendarDndAgenda = useCalendarDndAgenda;
 exports.useChartClick = useChartClick;
 exports.useChartDimensions = useChartDimensions;
 exports.useChartHighlights = useChartHighlights;
+exports.useChartMinMax = useChartMinMax;
 exports.useChartTooltips = useChartTooltips;
 exports.useCurrentTimeIndicator = useCurrentTimeIndicator;
 exports.useCurrentTimeIndicatorAgenda = useCurrentTimeIndicatorAgenda;