@adsgency_npm/adsgency-ads-ui 0.1.0-alpha.32 → 0.1.0-alpha.34

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,
@@ -6174,15 +6187,19 @@ function AdsLineChart({
   yAxis,
   yAxisProps
 }) {
-  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 [activeDataKey, setActiveDataKey] = React48.useState(null);
+  const hoverHighlightDataKey = series.find((item) => item.activeColor)?.dataKey ?? null;
+  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,
@@ -6195,7 +6212,7 @@ function AdsLineChart({
       className: cn("w-full", className),
       "data-testid": "ads-line-chart",
       role: "img",
-      style: { height: safeHeight },
+      style: { height: getSafeHeight(height) },
       children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         ChartContainer,
         {
@@ -6211,6 +6228,14 @@ function AdsLineChart({
               data: chartData,
               margin: chartProps?.margin ?? { bottom: 0, left: 0, right: 0, top: 0 },
               ...chartProps,
+              onMouseLeave: (...args) => {
+                setActiveDataKey(null);
+                chartProps?.onMouseLeave?.(...args);
+              },
+              onMouseMove: (...args) => {
+                setActiveDataKey(hoverHighlightDataKey);
+                chartProps?.onMouseMove?.(...args);
+              },
               children: [
                 showGrid && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
                   import_recharts3.CartesianGrid,
@@ -6286,10 +6311,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,
-                        isAnimationActive: item.areaProps?.isAnimationActive ?? false,
+                        isAnimationActive: item.areaProps?.isAnimationActive ?? true,
                         stroke: item.areaProps?.stroke ?? "none",
                         type: item.areaProps?.type ?? curve
                       }
@@ -6299,10 +6326,14 @@ function AdsLineChart({
                       {
                         ...item.lineProps,
                         activeDot: item.lineProps?.activeDot ?? { r: 5 },
+                        animationDuration: item.lineProps?.animationDuration ?? 360,
+                        animationEasing: item.lineProps?.animationEasing ?? "ease-out",
                         dataKey: item.dataKey,
                         dot: item.lineProps?.dot ?? false,
-                        isAnimationActive: item.lineProps?.isAnimationActive ?? false,
-                        stroke: item.lineProps?.stroke ?? color,
+                        isAnimationActive: item.lineProps?.isAnimationActive ?? true,
+                        onMouseEnter: () => setActiveDataKey(item.dataKey),
+                        onMouseLeave: () => setActiveDataKey(null),
+                        stroke: activeDataKey === item.dataKey ? item.activeColor ?? "#2196f3" : item.lineProps?.stroke ?? color,
                         strokeWidth: item.lineProps?.strokeWidth ?? item.strokeWidth ?? 2,
                         type: item.lineProps?.type ?? curve
                       }
@@ -6321,6 +6352,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 = {
@@ -6336,6 +6395,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,
@@ -6343,7 +6409,9 @@ function AdsSparklineChart({
   data,
   dataKey,
   height,
+  plotHeight,
   showTooltip = true,
+  tooltipDateFormat,
   xKey
 }) {
   const chartData = data.map((datum) => ({
@@ -6352,6 +6420,7 @@ function AdsSparklineChart({
     [dataKey]: getSafeValue2(datum[dataKey])
   }));
   const safeHeight = getSafeHeight2(height);
+  const chartMargin = getChartMargin(safeHeight, plotHeight);
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "div",
     {
@@ -6372,10 +6441,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,
                   {
@@ -6562,6 +6638,7 @@ function AdsBarChart({
   highlightIndex,
   hoverColor,
   showTooltip = true,
+  tooltipDateFormat,
   xAxis,
   xKey,
   yAxis
@@ -6621,7 +6698,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

@@ -771,6 +771,7 @@ interface ChartContainerProps extends React$1.ComponentPropsWithoutRef<"div"> {
 type AxisBound$1 = "auto" | "dataMax" | "dataMin" | number;
 type AdsLineChartCurve = "linear" | "monotone" | "step";
 interface AdsLineChartSeries {
+    activeColor?: string;
     areaOpacity?: number;
     areaProps?: Omit<React$1.ComponentProps<typeof Area>, "dataKey">;
     color?: string;
@@ -806,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[];
@@ -833,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;
@@ -842,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;
@@ -887,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

@@ -771,6 +771,7 @@ interface ChartContainerProps extends React$1.ComponentPropsWithoutRef<"div"> {
 type AxisBound$1 = "auto" | "dataMax" | "dataMin" | number;
 type AdsLineChartCurve = "linear" | "monotone" | "step";
 interface AdsLineChartSeries {
+    activeColor?: string;
     areaOpacity?: number;
     areaProps?: Omit<React$1.ComponentProps<typeof Area>, "dataKey">;
     color?: string;
@@ -806,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[];
@@ -833,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;
@@ -842,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;
@@ -887,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,
@@ -6011,15 +6024,19 @@ function AdsLineChart({
   yAxis,
   yAxisProps
 }) {
-  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 [activeDataKey, setActiveDataKey] = React48.useState(null);
+  const hoverHighlightDataKey = series.find((item) => item.activeColor)?.dataKey ?? null;
+  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,
@@ -6032,7 +6049,7 @@ function AdsLineChart({
       className: cn("w-full", className),
       "data-testid": "ads-line-chart",
       role: "img",
-      style: { height: safeHeight },
+      style: { height: getSafeHeight(height) },
       children: /* @__PURE__ */ jsx55(
         ChartContainer,
         {
@@ -6048,6 +6065,14 @@ function AdsLineChart({
               data: chartData,
               margin: chartProps?.margin ?? { bottom: 0, left: 0, right: 0, top: 0 },
               ...chartProps,
+              onMouseLeave: (...args) => {
+                setActiveDataKey(null);
+                chartProps?.onMouseLeave?.(...args);
+              },
+              onMouseMove: (...args) => {
+                setActiveDataKey(hoverHighlightDataKey);
+                chartProps?.onMouseMove?.(...args);
+              },
               children: [
                 showGrid && /* @__PURE__ */ jsx55(
                   CartesianGrid,
@@ -6123,10 +6148,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,
-                        isAnimationActive: item.areaProps?.isAnimationActive ?? false,
+                        isAnimationActive: item.areaProps?.isAnimationActive ?? true,
                         stroke: item.areaProps?.stroke ?? "none",
                         type: item.areaProps?.type ?? curve
                       }
@@ -6136,10 +6163,14 @@ function AdsLineChart({
                       {
                         ...item.lineProps,
                         activeDot: item.lineProps?.activeDot ?? { r: 5 },
+                        animationDuration: item.lineProps?.animationDuration ?? 360,
+                        animationEasing: item.lineProps?.animationEasing ?? "ease-out",
                         dataKey: item.dataKey,
                         dot: item.lineProps?.dot ?? false,
-                        isAnimationActive: item.lineProps?.isAnimationActive ?? false,
-                        stroke: item.lineProps?.stroke ?? color,
+                        isAnimationActive: item.lineProps?.isAnimationActive ?? true,
+                        onMouseEnter: () => setActiveDataKey(item.dataKey),
+                        onMouseLeave: () => setActiveDataKey(null),
+                        stroke: activeDataKey === item.dataKey ? item.activeColor ?? "#2196f3" : item.lineProps?.stroke ?? color,
                         strokeWidth: item.lineProps?.strokeWidth ?? item.strokeWidth ?? 2,
                         type: item.lineProps?.type ?? curve
                       }
@@ -6158,6 +6189,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 = {
@@ -6173,6 +6232,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,
@@ -6180,7 +6246,9 @@ function AdsSparklineChart({
   data,
   dataKey,
   height,
+  plotHeight,
   showTooltip = true,
+  tooltipDateFormat,
   xKey
 }) {
   const chartData = data.map((datum) => ({
@@ -6189,6 +6257,7 @@ function AdsSparklineChart({
     [dataKey]: getSafeValue2(datum[dataKey])
   }));
   const safeHeight = getSafeHeight2(height);
+  const chartMargin = getChartMargin(safeHeight, plotHeight);
   return /* @__PURE__ */ jsx56(
     "div",
     {
@@ -6209,10 +6278,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,
                   {
@@ -6399,6 +6475,7 @@ function AdsBarChart({
   highlightIndex,
   hoverColor,
   showTooltip = true,
+  tooltipDateFormat,
   xAxis,
   xKey,
   yAxis
@@ -6458,7 +6535,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.32",
+  "version": "0.1.0-alpha.34",
   "description": "AdsGency Ads Design System React component library.",
   "private": false,
   "type": "module",
@@ -35,26 +35,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "scripts": {
-    "build": "tsup && node scripts/copy-assets.mjs",
-    "dev": "tsup --watch",
-    "demo": "vite --config examples/playground/vite.config.ts --host 127.0.0.1 --port 4173",
-    "demo:full": "pnpm build && pnpm demo",
-    "demo:build": "pnpm build && vite build --config examples/playground/vite.config.ts",
-    "demo:typecheck": "tsc --noEmit -p examples/playground/tsconfig.json",
-    "verify:hygiene": "node scripts/verify-hygiene.mjs",
-    "verify:tokens": "node scripts/verify-tokens.mjs",
-    "verify:package": "node scripts/verify-package.mjs",
-    "lint": "eslint src tests --max-warnings=0 && pnpm verify:hygiene && pnpm verify:tokens",
-    "typecheck": "tsc --noEmit",
-    "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",
-    "prepublishOnly": "pnpm verify",
-    "prepack": "node scripts/remove-sourcemaps.mjs",
-    "postpack": "pnpm build"
-  },
   "peerDependencies": {
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
@@ -118,5 +98,22 @@
     "typescript-eslint": "^8.35.1",
     "vite": "^7.3.5",
     "vitest": "^3.2.4"
+  },
+  "scripts": {
+    "build": "tsup && node scripts/copy-assets.mjs",
+    "dev": "tsup --watch",
+    "demo": "vite --config examples/playground/vite.config.ts --host 127.0.0.1 --port 4173",
+    "demo:full": "pnpm build && pnpm demo",
+    "demo:build": "pnpm build && vite build --config examples/playground/vite.config.ts",
+    "demo:typecheck": "tsc --noEmit -p examples/playground/tsconfig.json",
+    "verify:hygiene": "node scripts/verify-hygiene.mjs",
+    "verify:tokens": "node scripts/verify-tokens.mjs",
+    "verify:package": "node scripts/verify-package.mjs",
+    "lint": "eslint src tests --max-warnings=0 && pnpm verify:hygiene && pnpm verify:tokens",
+    "typecheck": "tsc --noEmit",
+    "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"
   }
-}
+}