@adsgency_npm/adsgency-ads-ui 0.1.0-alpha.33 → 0.1.0-alpha.35

package/dist/index.cjs

@@ -6118,9 +6118,7 @@ function LineChartTooltipContent({
   tooltipLabelFormatter,
   tooltipValueFormatter
 }) {
-  if (!active || !payload.length) {
-    return null;
-  }
+  if (!active || !payload.length) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
     "div",
     {
@@ -6132,15 +6130,30 @@ function LineChartTooltipContent({
       children: [
         tooltipLabelFormatter && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "mb-2 text-xs font-medium text-muted-foreground", children: tooltipLabelFormatter(label) }),
         /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "space-y-1.5", children: series.map((item, index) => {
-          const entry = payload.find((payloadItem) => payloadItem.dataKey === item.dataKey);
+          const entry = payload.find(
+            (payloadItem) => payloadItem.dataKey === item.dataKey
+          );
           const value = typeof entry?.value === "number" && Number.isFinite(entry.value) ? entry.value : 0;
           const color = getSeriesColor(item, index);
-          const displayLabel = item.label ?? item.dataKey;
-          return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "flex items-center gap-1.5 text-sm", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { "aria-hidden": "true", className: "size-2 rounded-full", style: { backgroundColor: color } }),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-muted-foreground", children: displayLabel }),
-            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "font-semibold text-popover-foreground", children: tooltipValueFormatter ? tooltipValueFormatter(value, item) : value })
-          ] }, item.dataKey);
+          return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+            "div",
+            {
+              className: "flex items-center gap-1.5 text-sm",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "size-2 rounded-full",
+                    style: { backgroundColor: color }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "text-muted-foreground", children: item.label ?? item.dataKey }),
+                /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "font-semibold text-popover-foreground", children: tooltipValueFormatter ? tooltipValueFormatter(value, item) : value })
+              ]
+            },
+            item.dataKey
+          );
         }) }),
         tooltipFooter && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("p", { className: "mt-2 text-xs font-bold leading-[1.4]", children: tooltipFooter })
       ]
@@ -6150,8 +6163,8 @@ function LineChartTooltipContent({
 function AdsLineChart({
   ariaLabel,
   chartProps,
-  className,
   children,
+  className,
   containerProps,
   curve = "linear",
   data,
@@ -6175,29 +6188,47 @@ function AdsLineChart({
   yAxisProps
 }) {
   const [activeDataKey, setActiveDataKey] = React48.useState(null);
+  const chartElementRef = React48.useRef(null);
+  const previousDataRef = React48.useRef(data);
   const hoverHighlightDataKey = series.find((item) => item.activeColor)?.dataKey ?? null;
-  const chartData = data.map((datum) => {
-    const safeDatum = { ...datum, [xKey]: datum[xKey] };
-    series.forEach((item) => {
-      safeDatum[item.dataKey] = getSafeValue(datum[item.dataKey]);
-    });
-    return safeDatum;
-  });
-  const safeHeight = getSafeHeight(height);
-  const chartConfig = getChartConfig(series);
+  const chartData = React48.useMemo(
+    () => data.map((datum) => {
+      const safeDatum = { ...datum, [xKey]: datum[xKey] };
+      series.forEach((item) => {
+        safeDatum[item.dataKey] = getSafeValue(datum[item.dataKey]);
+      });
+      return safeDatum;
+    }),
+    [data, series, xKey]
+  );
+  const chartConfig = React48.useMemo(() => getChartConfig(series), [series]);
   const {
     cursor: tooltipCursor,
     wrapperStyle: tooltipWrapperStyle,
     ...restTooltipProps
   } = tooltipProps ?? {};
+  React48.useEffect(() => {
+    if (previousDataRef.current === data) {
+      return;
+    }
+    previousDataRef.current = data;
+    chartElementRef.current?.animate?.(
+      [
+        { opacity: 0.72, transform: "translateY(4px)" },
+        { opacity: 1, transform: "translateY(0)" }
+      ],
+      { duration: 360, easing: "ease-out" }
+    );
+  }, [data]);
   return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     "div",
     {
       "aria-label": ariaLabel ?? "Line chart",
       className: cn("w-full", className),
       "data-testid": "ads-line-chart",
+      ref: chartElementRef,
       role: "img",
-      style: { height: safeHeight },
+      style: { height: getSafeHeight(height) },
       children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         ChartContainer,
         {
@@ -6296,12 +6327,12 @@ function AdsLineChart({
                       import_recharts3.Area,
                       {
                         ...item.areaProps,
+                        animationDuration: item.areaProps?.animationDuration ?? 360,
+                        animationEasing: item.areaProps?.animationEasing ?? "ease-out",
                         dataKey: item.dataKey,
                         fill: item.areaProps?.fill ?? color,
                         fillOpacity: item.areaProps?.fillOpacity ?? opacity,
-                        animationDuration: item.areaProps?.animationDuration ?? 360,
-                        animationEasing: item.areaProps?.animationEasing ?? "ease-out",
-                        isAnimationActive: item.areaProps?.isAnimationActive ?? true,
+                        isAnimationActive: item.areaProps?.isAnimationActive ?? false,
                         stroke: item.areaProps?.stroke ?? "none",
                         type: item.areaProps?.type ?? curve
                       }
@@ -6315,7 +6346,7 @@ function AdsLineChart({
                         animationEasing: item.lineProps?.animationEasing ?? "ease-out",
                         dataKey: item.dataKey,
                         dot: item.lineProps?.dot ?? false,
-                        isAnimationActive: item.lineProps?.isAnimationActive ?? true,
+                        isAnimationActive: item.lineProps?.isAnimationActive ?? false,
                         onMouseEnter: () => setActiveDataKey(item.dataKey),
                         onMouseLeave: () => setActiveDataKey(null),
                         stroke: activeDataKey === item.dataKey ? item.activeColor ?? "#2196f3" : item.lineProps?.stroke ?? color,
@@ -6337,6 +6368,34 @@ function AdsLineChart({
 
 // src/components/AdsSparklineChart/index.tsx
 var import_recharts4 = require("recharts");
+
+// src/lib/chartTooltip.ts
+var ISO_TIMESTAMP_PATTERN = /^(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2}:\d{2})(?:\.\d+)?(?:Z|[+-]\d{2}:?\d{2})?$/;
+var DEFAULT_DATE_FORMAT = "YYYY-MM-DD HH:mm:ss";
+function formatChartTooltipLabel(label, dateFormat = DEFAULT_DATE_FORMAT) {
+  if (typeof label !== "string") {
+    return String(label ?? "");
+  }
+  const match = label.match(ISO_TIMESTAMP_PATTERN);
+  if (!match) {
+    return label;
+  }
+  const [year, month, day] = match[1].split("-");
+  const [hour, minute, second] = match[2].split(":");
+  return dateFormat.replace(/YYYY|MM|DD|HH|mm|ss/g, (token) => {
+    const values = {
+      YYYY: year,
+      MM: month,
+      DD: day,
+      HH: hour,
+      mm: minute,
+      ss: second
+    };
+    return values[token];
+  });
+}
+
+// src/components/AdsSparklineChart/index.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
 var DEFAULT_HEIGHT2 = 40;
 var tooltipContentStyle2 = {
@@ -6352,6 +6411,13 @@ function getSafeHeight2(height) {
 function getSafeValue2(value) {
   return typeof value === "number" && Number.isFinite(value) ? Math.max(value, 0) : 0;
 }
+function getChartMargin(height, plotHeight) {
+  if (!Number.isFinite(plotHeight) || !plotHeight || plotHeight >= height) {
+    return { bottom: 1, left: 1, right: 1, top: 1 };
+  }
+  const verticalMargin = (height - Math.max(plotHeight, 1)) / 2;
+  return { bottom: verticalMargin, left: 1, right: 1, top: verticalMargin };
+}
 function AdsSparklineChart({
   ariaLabel,
   className,
@@ -6359,7 +6425,9 @@ function AdsSparklineChart({
   data,
   dataKey,
   height,
+  plotHeight,
   showTooltip = true,
+  tooltipDateFormat,
   xKey
 }) {
   const chartData = data.map((datum) => ({
@@ -6368,6 +6436,7 @@ function AdsSparklineChart({
     [dataKey]: getSafeValue2(datum[dataKey])
   }));
   const safeHeight = getSafeHeight2(height);
+  const chartMargin = getChartMargin(safeHeight, plotHeight);
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "div",
     {
@@ -6388,10 +6457,17 @@ function AdsSparklineChart({
             {
               accessibilityLayer: false,
               data: chartData,
-              margin: { bottom: 1, left: 1, right: 1, top: 1 },
+              margin: chartMargin,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_recharts4.XAxis, { dataKey: xKey, hide: true, type: "category" }),
-                showTooltip && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_recharts4.Tooltip, { contentStyle: tooltipContentStyle2, cursor: false }),
+                showTooltip && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                  import_recharts4.Tooltip,
+                  {
+                    contentStyle: tooltipContentStyle2,
+                    cursor: false,
+                    labelFormatter: (label) => formatChartTooltipLabel(label, tooltipDateFormat)
+                  }
+                ),
                 /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
                   import_recharts4.Line,
                   {
@@ -6578,6 +6654,7 @@ function AdsBarChart({
   highlightIndex,
   hoverColor,
   showTooltip = true,
+  tooltipDateFormat,
   xAxis,
   xKey,
   yAxis
@@ -6637,7 +6714,14 @@ function AdsBarChart({
                     width: yAxis.width
                   }
                 ),
-                showTooltip && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_recharts5.Tooltip, { contentStyle: tooltipContentStyle3, cursor: { fill: "transparent" } }),
+                showTooltip && /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+                  import_recharts5.Tooltip,
+                  {
+                    contentStyle: tooltipContentStyle3,
+                    cursor: { fill: "transparent" },
+                    labelFormatter: (label) => formatChartTooltipLabel(label, tooltipDateFormat)
+                  }
+                ),
                 /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                   import_recharts5.Bar,
                   {

package/dist/index.d.cts

@@ -807,8 +807,8 @@ interface AdsLineChartReferenceLine {
 interface AdsLineChartProps {
     ariaLabel?: string;
     chartProps?: Omit<React$1.ComponentProps<typeof ComposedChart>, "accessibilityLayer" | "children" | "data">;
-    className?: string;
     children?: React$1.ReactNode;
+    className?: string;
     containerProps?: Omit<ChartContainerProps, "children" | "config" | "height">;
     curve?: AdsLineChartCurve;
     data: AdsChartDatum[];
@@ -834,7 +834,7 @@ interface AdsLineChartProps {
     yAxis?: AdsLineChartYAxisOptions;
     yAxisProps?: React$1.ComponentProps<typeof YAxis>;
 }
-declare function AdsLineChart({ ariaLabel, chartProps, className, children, containerProps, curve, data, gridColor, gridProps, height, referenceLine, series, showGrid, showTooltip, tooltipContent, tooltipContentClassName, tooltipFooter, tooltipLabelFormatter, tooltipProps, tooltipValueFormatter, xAxis, xAxisProps, xKey, yAxis, yAxisProps, }: AdsLineChartProps): React$1.JSX.Element;
+declare function AdsLineChart({ ariaLabel, chartProps, children, className, containerProps, curve, data, gridColor, gridProps, height, referenceLine, series, showGrid, showTooltip, tooltipContent, tooltipContentClassName, tooltipFooter, tooltipLabelFormatter, tooltipProps, tooltipValueFormatter, xAxis, xAxisProps, xKey, yAxis, yAxisProps, }: AdsLineChartProps): React$1.JSX.Element;
 
 interface AdsSparklineChartProps {
     ariaLabel?: string;
@@ -843,10 +843,12 @@ interface AdsSparklineChartProps {
     data: AdsChartDatum[];
     dataKey: string;
     height?: number;
+    plotHeight?: number;
     showTooltip?: boolean;
+    tooltipDateFormat?: string;
     xKey: string;
 }
-declare function AdsSparklineChart({ ariaLabel, className, color, data, dataKey, height, showTooltip, xKey, }: AdsSparklineChartProps): React$1.JSX.Element;
+declare function AdsSparklineChart({ ariaLabel, className, color, data, dataKey, height, plotHeight, showTooltip, tooltipDateFormat, xKey, }: AdsSparklineChartProps): React$1.JSX.Element;
 
 interface AdsStackedBarChartProps {
     ariaLabel?: string;
@@ -888,11 +890,12 @@ interface AdsBarChartProps {
     highlightIndex?: number;
     hoverColor?: string;
     showTooltip?: boolean;
+    tooltipDateFormat?: string;
     xAxis?: AdsBarChartXAxisOptions;
     xKey: string;
     yAxis?: AdsBarChartYAxisOptions;
 }
-declare function AdsBarChart({ ariaLabel, barRadius, barSize, className, color, data, dataKey, height, highlightColor, highlightIndex, hoverColor, showTooltip, xAxis, xKey, yAxis, }: AdsBarChartProps): React$1.JSX.Element;
+declare function AdsBarChart({ ariaLabel, barRadius, barSize, className, color, data, dataKey, height, highlightColor, highlightIndex, hoverColor, showTooltip, tooltipDateFormat, xAxis, xKey, yAxis, }: AdsBarChartProps): React$1.JSX.Element;
 
 declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<_radix_ui_react_radio_group.RadioGroupProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 

package/dist/index.d.ts

@@ -807,8 +807,8 @@ interface AdsLineChartReferenceLine {
 interface AdsLineChartProps {
     ariaLabel?: string;
     chartProps?: Omit<React$1.ComponentProps<typeof ComposedChart>, "accessibilityLayer" | "children" | "data">;
-    className?: string;
     children?: React$1.ReactNode;
+    className?: string;
     containerProps?: Omit<ChartContainerProps, "children" | "config" | "height">;
     curve?: AdsLineChartCurve;
     data: AdsChartDatum[];
@@ -834,7 +834,7 @@ interface AdsLineChartProps {
     yAxis?: AdsLineChartYAxisOptions;
     yAxisProps?: React$1.ComponentProps<typeof YAxis>;
 }
-declare function AdsLineChart({ ariaLabel, chartProps, className, children, containerProps, curve, data, gridColor, gridProps, height, referenceLine, series, showGrid, showTooltip, tooltipContent, tooltipContentClassName, tooltipFooter, tooltipLabelFormatter, tooltipProps, tooltipValueFormatter, xAxis, xAxisProps, xKey, yAxis, yAxisProps, }: AdsLineChartProps): React$1.JSX.Element;
+declare function AdsLineChart({ ariaLabel, chartProps, children, className, containerProps, curve, data, gridColor, gridProps, height, referenceLine, series, showGrid, showTooltip, tooltipContent, tooltipContentClassName, tooltipFooter, tooltipLabelFormatter, tooltipProps, tooltipValueFormatter, xAxis, xAxisProps, xKey, yAxis, yAxisProps, }: AdsLineChartProps): React$1.JSX.Element;
 
 interface AdsSparklineChartProps {
     ariaLabel?: string;
@@ -843,10 +843,12 @@ interface AdsSparklineChartProps {
     data: AdsChartDatum[];
     dataKey: string;
     height?: number;
+    plotHeight?: number;
     showTooltip?: boolean;
+    tooltipDateFormat?: string;
     xKey: string;
 }
-declare function AdsSparklineChart({ ariaLabel, className, color, data, dataKey, height, showTooltip, xKey, }: AdsSparklineChartProps): React$1.JSX.Element;
+declare function AdsSparklineChart({ ariaLabel, className, color, data, dataKey, height, plotHeight, showTooltip, tooltipDateFormat, xKey, }: AdsSparklineChartProps): React$1.JSX.Element;
 
 interface AdsStackedBarChartProps {
     ariaLabel?: string;
@@ -888,11 +890,12 @@ interface AdsBarChartProps {
     highlightIndex?: number;
     hoverColor?: string;
     showTooltip?: boolean;
+    tooltipDateFormat?: string;
     xAxis?: AdsBarChartXAxisOptions;
     xKey: string;
     yAxis?: AdsBarChartYAxisOptions;
 }
-declare function AdsBarChart({ ariaLabel, barRadius, barSize, className, color, data, dataKey, height, highlightColor, highlightIndex, hoverColor, showTooltip, xAxis, xKey, yAxis, }: AdsBarChartProps): React$1.JSX.Element;
+declare function AdsBarChart({ ariaLabel, barRadius, barSize, className, color, data, dataKey, height, highlightColor, highlightIndex, hoverColor, showTooltip, tooltipDateFormat, xAxis, xKey, yAxis, }: AdsBarChartProps): React$1.JSX.Element;
 
 declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<_radix_ui_react_radio_group.RadioGroupProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -5955,9 +5955,7 @@ function LineChartTooltipContent({
   tooltipLabelFormatter,
   tooltipValueFormatter
 }) {
-  if (!active || !payload.length) {
-    return null;
-  }
+  if (!active || !payload.length) return null;
   return /* @__PURE__ */ jsxs28(
     "div",
     {
@@ -5969,15 +5967,30 @@ function LineChartTooltipContent({
       children: [
         tooltipLabelFormatter && /* @__PURE__ */ jsx55("p", { className: "mb-2 text-xs font-medium text-muted-foreground", children: tooltipLabelFormatter(label) }),
         /* @__PURE__ */ jsx55("div", { className: "space-y-1.5", children: series.map((item, index) => {
-          const entry = payload.find((payloadItem) => payloadItem.dataKey === item.dataKey);
+          const entry = payload.find(
+            (payloadItem) => payloadItem.dataKey === item.dataKey
+          );
           const value = typeof entry?.value === "number" && Number.isFinite(entry.value) ? entry.value : 0;
           const color = getSeriesColor(item, index);
-          const displayLabel = item.label ?? item.dataKey;
-          return /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-1.5 text-sm", children: [
-            /* @__PURE__ */ jsx55("span", { "aria-hidden": "true", className: "size-2 rounded-full", style: { backgroundColor: color } }),
-            /* @__PURE__ */ jsx55("span", { className: "text-muted-foreground", children: displayLabel }),
-            /* @__PURE__ */ jsx55("span", { className: "font-semibold text-popover-foreground", children: tooltipValueFormatter ? tooltipValueFormatter(value, item) : value })
-          ] }, item.dataKey);
+          return /* @__PURE__ */ jsxs28(
+            "div",
+            {
+              className: "flex items-center gap-1.5 text-sm",
+              children: [
+                /* @__PURE__ */ jsx55(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "size-2 rounded-full",
+                    style: { backgroundColor: color }
+                  }
+                ),
+                /* @__PURE__ */ jsx55("span", { className: "text-muted-foreground", children: item.label ?? item.dataKey }),
+                /* @__PURE__ */ jsx55("span", { className: "font-semibold text-popover-foreground", children: tooltipValueFormatter ? tooltipValueFormatter(value, item) : value })
+              ]
+            },
+            item.dataKey
+          );
         }) }),
         tooltipFooter && /* @__PURE__ */ jsx55("p", { className: "mt-2 text-xs font-bold leading-[1.4]", children: tooltipFooter })
       ]
@@ -5987,8 +6000,8 @@ function LineChartTooltipContent({
 function AdsLineChart({
   ariaLabel,
   chartProps,
-  className,
   children,
+  className,
   containerProps,
   curve = "linear",
   data,
@@ -6012,29 +6025,47 @@ function AdsLineChart({
   yAxisProps
 }) {
   const [activeDataKey, setActiveDataKey] = React48.useState(null);
+  const chartElementRef = React48.useRef(null);
+  const previousDataRef = React48.useRef(data);
   const hoverHighlightDataKey = series.find((item) => item.activeColor)?.dataKey ?? null;
-  const chartData = data.map((datum) => {
-    const safeDatum = { ...datum, [xKey]: datum[xKey] };
-    series.forEach((item) => {
-      safeDatum[item.dataKey] = getSafeValue(datum[item.dataKey]);
-    });
-    return safeDatum;
-  });
-  const safeHeight = getSafeHeight(height);
-  const chartConfig = getChartConfig(series);
+  const chartData = React48.useMemo(
+    () => data.map((datum) => {
+      const safeDatum = { ...datum, [xKey]: datum[xKey] };
+      series.forEach((item) => {
+        safeDatum[item.dataKey] = getSafeValue(datum[item.dataKey]);
+      });
+      return safeDatum;
+    }),
+    [data, series, xKey]
+  );
+  const chartConfig = React48.useMemo(() => getChartConfig(series), [series]);
   const {
     cursor: tooltipCursor,
     wrapperStyle: tooltipWrapperStyle,
     ...restTooltipProps
   } = tooltipProps ?? {};
+  React48.useEffect(() => {
+    if (previousDataRef.current === data) {
+      return;
+    }
+    previousDataRef.current = data;
+    chartElementRef.current?.animate?.(
+      [
+        { opacity: 0.72, transform: "translateY(4px)" },
+        { opacity: 1, transform: "translateY(0)" }
+      ],
+      { duration: 360, easing: "ease-out" }
+    );
+  }, [data]);
   return /* @__PURE__ */ jsx55(
     "div",
     {
       "aria-label": ariaLabel ?? "Line chart",
       className: cn("w-full", className),
       "data-testid": "ads-line-chart",
+      ref: chartElementRef,
       role: "img",
-      style: { height: safeHeight },
+      style: { height: getSafeHeight(height) },
       children: /* @__PURE__ */ jsx55(
         ChartContainer,
         {
@@ -6133,12 +6164,12 @@ function AdsLineChart({
                       Area,
                       {
                         ...item.areaProps,
+                        animationDuration: item.areaProps?.animationDuration ?? 360,
+                        animationEasing: item.areaProps?.animationEasing ?? "ease-out",
                         dataKey: item.dataKey,
                         fill: item.areaProps?.fill ?? color,
                         fillOpacity: item.areaProps?.fillOpacity ?? opacity,
-                        animationDuration: item.areaProps?.animationDuration ?? 360,
-                        animationEasing: item.areaProps?.animationEasing ?? "ease-out",
-                        isAnimationActive: item.areaProps?.isAnimationActive ?? true,
+                        isAnimationActive: item.areaProps?.isAnimationActive ?? false,
                         stroke: item.areaProps?.stroke ?? "none",
                         type: item.areaProps?.type ?? curve
                       }
@@ -6152,7 +6183,7 @@ function AdsLineChart({
                         animationEasing: item.lineProps?.animationEasing ?? "ease-out",
                         dataKey: item.dataKey,
                         dot: item.lineProps?.dot ?? false,
-                        isAnimationActive: item.lineProps?.isAnimationActive ?? true,
+                        isAnimationActive: item.lineProps?.isAnimationActive ?? false,
                         onMouseEnter: () => setActiveDataKey(item.dataKey),
                         onMouseLeave: () => setActiveDataKey(null),
                         stroke: activeDataKey === item.dataKey ? item.activeColor ?? "#2196f3" : item.lineProps?.stroke ?? color,
@@ -6174,6 +6205,34 @@ function AdsLineChart({
 
 // src/components/AdsSparklineChart/index.tsx
 import { Line as Line2, LineChart, Tooltip as Tooltip3, XAxis as XAxis2 } from "recharts";
+
+// src/lib/chartTooltip.ts
+var ISO_TIMESTAMP_PATTERN = /^(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2}:\d{2})(?:\.\d+)?(?:Z|[+-]\d{2}:?\d{2})?$/;
+var DEFAULT_DATE_FORMAT = "YYYY-MM-DD HH:mm:ss";
+function formatChartTooltipLabel(label, dateFormat = DEFAULT_DATE_FORMAT) {
+  if (typeof label !== "string") {
+    return String(label ?? "");
+  }
+  const match = label.match(ISO_TIMESTAMP_PATTERN);
+  if (!match) {
+    return label;
+  }
+  const [year, month, day] = match[1].split("-");
+  const [hour, minute, second] = match[2].split(":");
+  return dateFormat.replace(/YYYY|MM|DD|HH|mm|ss/g, (token) => {
+    const values = {
+      YYYY: year,
+      MM: month,
+      DD: day,
+      HH: hour,
+      mm: minute,
+      ss: second
+    };
+    return values[token];
+  });
+}
+
+// src/components/AdsSparklineChart/index.tsx
 import { jsx as jsx56, jsxs as jsxs29 } from "react/jsx-runtime";
 var DEFAULT_HEIGHT2 = 40;
 var tooltipContentStyle2 = {
@@ -6189,6 +6248,13 @@ function getSafeHeight2(height) {
 function getSafeValue2(value) {
   return typeof value === "number" && Number.isFinite(value) ? Math.max(value, 0) : 0;
 }
+function getChartMargin(height, plotHeight) {
+  if (!Number.isFinite(plotHeight) || !plotHeight || plotHeight >= height) {
+    return { bottom: 1, left: 1, right: 1, top: 1 };
+  }
+  const verticalMargin = (height - Math.max(plotHeight, 1)) / 2;
+  return { bottom: verticalMargin, left: 1, right: 1, top: verticalMargin };
+}
 function AdsSparklineChart({
   ariaLabel,
   className,
@@ -6196,7 +6262,9 @@ function AdsSparklineChart({
   data,
   dataKey,
   height,
+  plotHeight,
   showTooltip = true,
+  tooltipDateFormat,
   xKey
 }) {
   const chartData = data.map((datum) => ({
@@ -6205,6 +6273,7 @@ function AdsSparklineChart({
     [dataKey]: getSafeValue2(datum[dataKey])
   }));
   const safeHeight = getSafeHeight2(height);
+  const chartMargin = getChartMargin(safeHeight, plotHeight);
   return /* @__PURE__ */ jsx56(
     "div",
     {
@@ -6225,10 +6294,17 @@ function AdsSparklineChart({
             {
               accessibilityLayer: false,
               data: chartData,
-              margin: { bottom: 1, left: 1, right: 1, top: 1 },
+              margin: chartMargin,
               children: [
                 /* @__PURE__ */ jsx56(XAxis2, { dataKey: xKey, hide: true, type: "category" }),
-                showTooltip && /* @__PURE__ */ jsx56(Tooltip3, { contentStyle: tooltipContentStyle2, cursor: false }),
+                showTooltip && /* @__PURE__ */ jsx56(
+                  Tooltip3,
+                  {
+                    contentStyle: tooltipContentStyle2,
+                    cursor: false,
+                    labelFormatter: (label) => formatChartTooltipLabel(label, tooltipDateFormat)
+                  }
+                ),
                 /* @__PURE__ */ jsx56(
                   Line2,
                   {
@@ -6415,6 +6491,7 @@ function AdsBarChart({
   highlightIndex,
   hoverColor,
   showTooltip = true,
+  tooltipDateFormat,
   xAxis,
   xKey,
   yAxis
@@ -6474,7 +6551,14 @@ function AdsBarChart({
                     width: yAxis.width
                   }
                 ),
-                showTooltip && /* @__PURE__ */ jsx60(Tooltip5, { contentStyle: tooltipContentStyle3, cursor: { fill: "transparent" } }),
+                showTooltip && /* @__PURE__ */ jsx60(
+                  Tooltip5,
+                  {
+                    contentStyle: tooltipContentStyle3,
+                    cursor: { fill: "transparent" },
+                    labelFormatter: (label) => formatChartTooltipLabel(label, tooltipDateFormat)
+                  }
+                ),
                 /* @__PURE__ */ jsx60(
                   Bar,
                   {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adsgency_npm/adsgency-ads-ui",
-  "version": "0.1.0-alpha.33",
+  "version": "0.1.0-alpha.35",
   "description": "AdsGency Ads Design System React component library.",
   "private": false,
   "type": "module",
@@ -111,8 +111,8 @@
     "verify:package": "node scripts/verify-package.mjs",
     "lint": "eslint src tests --max-warnings=0 && pnpm verify:hygiene && pnpm verify:tokens",
     "typecheck": "tsc --noEmit",
-    "test": "NODE_OPTIONS=--max-old-space-size=1536 vitest run",
-    "test:watch": "NODE_OPTIONS=--max-old-space-size=1536 vitest",
+    "test": "vitest run",
+    "test:watch": "vitest",
     "pack:dry": "pnpm build && npm pack --dry-run",
     "verify": "pnpm lint && pnpm typecheck && pnpm test && pnpm demo:typecheck && pnpm build && pnpm verify:package"
   }