@parto-system-design/ui 1.1.11 → 1.1.16

package/dist/components/charts/PartoLineChart.js

@@ -1,6 +1,571 @@
-export { PartoLineChart } from '../../chunk-YFQWC2PW.js';
-import '../../chunk-PYURPUTV.js';
-import '../../chunk-SB5DSYR5.js';
-import '../../chunk-4SVQNEVH.js';
+'use client';
+import * as React2 from 'react';
+import { useState, useEffect, useMemo } from 'react';
+import { ResponsiveContainer, LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Line } from 'recharts';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function useRootStyles() {
+  const [version, setVersion] = useState(0);
+  useEffect(() => {
+    if (typeof window === "undefined" || !document?.documentElement) {
+      return;
+    }
+    const target = document.documentElement;
+    const observer = new MutationObserver(() => {
+      setVersion((prev) => prev + 1);
+    });
+    observer.observe(target, {
+      attributes: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const mediaHandler = () => setVersion((prev) => prev + 1);
+    media.addEventListener("change", mediaHandler);
+    return () => {
+      observer.disconnect();
+      media.removeEventListener("change", mediaHandler);
+    };
+  }, []);
+  return useMemo(() => {
+    if (typeof window === "undefined" || !document?.documentElement) {
+      return null;
+    }
+    return getComputedStyle(document.documentElement);
+  }, [version]);
+}
+
+// src/lib/theme.ts
+var COLOR_VALUE_REGEX = /^(#|rgb|hsl|oklch)/i;
+function resolveCssColor(styles, variable, fallback) {
+  if (!styles) return fallback;
+  const raw = styles.getPropertyValue(variable).trim();
+  if (!raw) return fallback;
+  if (COLOR_VALUE_REGEX.test(raw)) return raw;
+  if (raw.includes("%")) return `hsl(${raw})`;
+  return raw;
+}
+
+// src/hooks/use-chart-theme.ts
+var FALLBACKS = {
+  foregroundMuted: "hsl(0 0% 50%)",
+  border: "hsl(0 0% 22%)",
+  popover: "hsl(0 0% 10%)",
+  popoverForeground: "hsl(0 0% 98%)",
+  chart1: "hsl(155 65% 38%)",
+  chart2: "hsl(198 50% 48%)",
+  chart3: "hsl(240 40% 54%)",
+  chart4: "hsl(310 38% 52%)",
+  chart5: "hsl(355 45% 52%)",
+  chart6: "hsl(35 52% 48%)",
+  chart7: "hsl(75 38% 46%)",
+  chart8: "hsl(118 35% 46%)"
+};
+var CHART_FONT_FAMILY = "Yekan Bakh, system-ui, -apple-system, sans-serif";
+function useChartTheme() {
+  const styles = useRootStyles();
+  return React2.useMemo(() => {
+    const getColor = (variable, fallback) => resolveCssColor(styles, variable, fallback);
+    const chartColors = [
+      getColor("--chart-1", FALLBACKS.chart1),
+      getColor("--chart-2", FALLBACKS.chart2),
+      getColor("--chart-3", FALLBACKS.chart3),
+      getColor("--chart-4", FALLBACKS.chart4),
+      getColor("--chart-5", FALLBACKS.chart5),
+      getColor("--chart-6", FALLBACKS.chart6),
+      getColor("--chart-7", FALLBACKS.chart7),
+      getColor("--chart-8", FALLBACKS.chart8)
+    ];
+    const axisTickStyle = {
+      fontFamily: CHART_FONT_FAMILY,
+      fill: getColor("--foreground-lighter", FALLBACKS.foregroundMuted),
+      fontSize: 11,
+      fontWeight: 400
+    };
+    const gridStyle = {
+      stroke: getColor("--border", FALLBACKS.border),
+      strokeDasharray: "3 3",
+      strokeOpacity: 0.15
+    };
+    const tooltipStyle = {
+      fontFamily: CHART_FONT_FAMILY,
+      background: getColor("--background-overlay-default", FALLBACKS.popover),
+      color: getColor("--foreground-default", FALLBACKS.popoverForeground),
+      fontSize: 12,
+      lineHeight: "1.5",
+      borderRadius: "10px",
+      border: `1px solid ${getColor("--border-muted", FALLBACKS.border)}`,
+      boxShadow: "0 4px 24px -4px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.06)",
+      padding: "10px 14px",
+      backdropFilter: "blur(8px)",
+      WebkitBackdropFilter: "blur(8px)"
+    };
+    const crosshairStyle = {
+      stroke: getColor("--foreground-muted", FALLBACKS.foregroundMuted),
+      strokeWidth: 1,
+      strokeDasharray: "4 4",
+      strokeOpacity: 0.5
+    };
+    return {
+      chartColors,
+      getColor,
+      fontFamily: CHART_FONT_FAMILY,
+      axisTickStyle,
+      gridStyle,
+      tooltipStyle,
+      crosshairStyle
+    };
+  }, [styles]);
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function convertToLocalNumbers(text, locale) {
+  if (locale === "fa" || locale === "ar") {
+    const persianDigits = ["\u06F0", "\u06F1", "\u06F2", "\u06F3", "\u06F4", "\u06F5", "\u06F6", "\u06F7", "\u06F8", "\u06F9"];
+    return String(text).replace(/\d/g, (digit) => persianDigits[parseInt(digit)]);
+  }
+  return String(text);
+}
+function formatLargeNumber(num, locale) {
+  if (num >= 1e9) {
+    const formatted = (num / 1e9).toFixed(1).replace(/\.0$/, "");
+    return convertToLocalNumbers(formatted, locale) + (locale === "en" ? "B" : " \u0645\u06CC\u0644\u06CC\u0627\u0631\u062F");
+  }
+  if (num >= 1e6) {
+    const formatted = (num / 1e6).toFixed(1).replace(/\.0$/, "");
+    return convertToLocalNumbers(formatted, locale) + (locale === "en" ? "M" : " \u0645\u06CC\u0644\u06CC\u0648\u0646");
+  }
+  if (num >= 1e3) {
+    const formatted = (num / 1e3).toFixed(1).replace(/\.0$/, "");
+    return convertToLocalNumbers(formatted, locale) + (locale === "en" ? "K" : " \u0647\u0632\u0627\u0631");
+  }
+  return convertToLocalNumbers(num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","), locale);
+}
+var skeletonVariants = cva("bg-accent animate-pulse", {
+  variants: {
+    shape: {
+      rect: "rounded-md",
+      line: "rounded-full h-4 w-full",
+      circle: "rounded-full",
+      text: "rounded h-4"
+    },
+    size: {
+      sm: "",
+      md: "",
+      lg: ""
+    }
+  },
+  compoundVariants: [
+    { shape: "circle", size: "sm", class: "size-8" },
+    { shape: "circle", size: "md", class: "size-10" },
+    { shape: "circle", size: "lg", class: "size-14" }
+  ],
+  defaultVariants: {
+    shape: "rect",
+    size: "md"
+  }
+});
+function Skeleton({ className, shape, size, count, ...props }) {
+  if (count && count > 1) {
+    return /* @__PURE__ */ jsx("div", { role: "status", "aria-busy": "true", "aria-label": "Loading", className: "space-y-2", children: Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "skeleton",
+        "aria-hidden": "true",
+        className: cn(skeletonVariants({ shape, size }), className)
+      },
+      i
+    )) });
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "skeleton",
+      role: "status",
+      "aria-busy": "true",
+      "aria-label": "Loading",
+      ...props,
+      className: cn(skeletonVariants({ shape, size }), className)
+    }
+  );
+}
+Skeleton.displayName = "Skeleton";
+var ChartContainer = React2.forwardRef(
+  ({ className, dataSlot, ariaLabel, children }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className,
+      dir: "ltr",
+      "data-slot": dataSlot,
+      role: "img",
+      "aria-label": ariaLabel ?? "\u0646\u0645\u0648\u062F\u0627\u0631",
+      style: { position: "relative", width: "100%", height: "100%" },
+      children
+    }
+  )
+);
+ChartContainer.displayName = "ChartContainer";
+function ChartLoadingSkeleton({ className, shape = "rect" }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "chart-loading-skeleton",
+      className,
+      dir: "ltr",
+      style: { position: "relative", width: "100%", height: "100%" },
+      role: "status",
+      "aria-label": "Loading chart",
+      children: /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          shape,
+          className: shape === "circle" ? "w-full h-full min-h-[200px] aspect-square mx-auto" : "w-full h-full min-h-[200px]"
+        }
+      )
+    }
+  );
+}
+var LOCALE_TO_BCP47 = {
+  fa: "fa-IR",
+  ar: "ar",
+  en: "en-US"
+};
+function ChartTooltip({ active, payload, label, tooltipStyle, formatter, locale = "fa" }) {
+  if (!active || !payload?.length) return null;
+  const bcp47 = LOCALE_TO_BCP47[locale] ?? "fa-IR";
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "chart-tooltip", style: tooltipStyle, children: [
+    label && /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, fontSize: 13, marginBottom: 6 }, children: label }),
+    payload.map((entry, i) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8, marginTop: i > 0 ? 4 : 0 }, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            width: 10,
+            height: 10,
+            borderRadius: 2,
+            backgroundColor: entry.color,
+            flexShrink: 0
+          }
+        }
+      ),
+      formatter ? formatter(entry.name, entry.value) : /* @__PURE__ */ jsxs("span", { style: { display: "flex", justifyContent: "space-between", width: "100%", gap: 16 }, children: [
+        /* @__PURE__ */ jsx("span", { style: { opacity: 0.7 }, children: entry.name }),
+        /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, fontVariantNumeric: "tabular-nums" }, children: typeof entry.value === "number" ? entry.value.toLocaleString(bcp47) : entry.value })
+      ] })
+    ] }, i))
+  ] });
+}
+function localeAwareNumberTick(locale) {
+  return (value) => {
+    if (typeof value === "number") return formatLargeNumber(value, locale);
+    if (typeof value === "string") {
+      if (/^-?\d+(\.\d+)?$/.test(value)) return convertToLocalNumbers(value, locale);
+      return value;
+    }
+    return String(value ?? "");
+  };
+}
+function localeAwareCategoryTick(locale) {
+  return (value) => convertToLocalNumbers(String(value ?? ""), locale);
+}
+var PATTERN_DASHARRAY = {
+  solid: void 0,
+  dashed: "4 3",
+  dotted: "1 3",
+  "dash-dot": "4 2 1 2"
+};
+var ChartLegend = React2.forwardRef(
+  ({ className, items, orientation = "horizontal", swatchSize = 10, ...props }, ref) => {
+    const isVertical = orientation === "vertical";
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "chart-legend",
+        "data-orientation": orientation,
+        className,
+        style: {
+          display: "flex",
+          flexWrap: isVertical ? "nowrap" : "wrap",
+          flexDirection: isVertical ? "column" : "row",
+          gap: isVertical ? "6px" : "12px 16px",
+          fontSize: 12,
+          color: "hsl(var(--foreground-light))"
+        },
+        role: "list",
+        ...props,
+        children: items.map((item) => /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "listitem",
+            "data-slot": "chart-legend-item",
+            style: { display: "inline-flex", alignItems: "center", gap: 6, lineHeight: 1.2 },
+            children: [
+              /* @__PURE__ */ jsx(
+                ChartLegendSwatch,
+                {
+                  color: item.color,
+                  shape: item.shape ?? "dot",
+                  pattern: item.pattern ?? "solid",
+                  size: swatchSize
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { style: { fontWeight: 500 }, children: item.label }),
+              item.value !== void 0 && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  style: { marginInlineStart: 4, fontVariantNumeric: "tabular-nums", opacity: 0.7 },
+                  "data-slot": "chart-legend-value",
+                  children: item.value
+                }
+              )
+            ]
+          },
+          item.key
+        ))
+      }
+    );
+  }
+);
+ChartLegend.displayName = "ChartLegend";
+function ChartLegendSwatch({
+  color,
+  shape,
+  pattern,
+  size
+}) {
+  if (shape === "dot") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        style: {
+          display: "inline-block",
+          width: size,
+          height: size,
+          borderRadius: "50%",
+          backgroundColor: color,
+          flexShrink: 0
+        }
+      }
+    );
+  }
+  if (shape === "bar") {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        style: {
+          display: "inline-block",
+          width: size + 4,
+          height: Math.max(3, Math.round(size / 2.5)),
+          borderRadius: 2,
+          backgroundColor: color,
+          flexShrink: 0
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      width: size + 8,
+      height: Math.max(8, Math.round(size / 1.5)),
+      viewBox: `0 0 ${size + 8} ${Math.max(8, Math.round(size / 1.5))}`,
+      style: { flexShrink: 0 },
+      children: /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: 1,
+          y1: Math.max(8, Math.round(size / 1.5)) / 2,
+          x2: size + 7,
+          y2: Math.max(8, Math.round(size / 1.5)) / 2,
+          stroke: color,
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          strokeDasharray: PATTERN_DASHARRAY[pattern]
+        }
+      )
+    }
+  );
+}
+var ChartGradientLegend = React2.forwardRef(
+  ({
+    className,
+    startColor,
+    endColor,
+    startLabel,
+    endLabel,
+    caption,
+    width = 160,
+    height = 8,
+    "aria-label": ariaLabelProp,
+    ...props
+  }, ref) => {
+    const ariaLabel = ariaLabelProp ?? (typeof startLabel === "string" && typeof endLabel === "string" ? `${startLabel} \u062A\u0627 ${endLabel}` : "\u0645\u0642\u06CC\u0627\u0633 \u0631\u0646\u06AF");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "chart-gradient-legend",
+        className,
+        role: "img",
+        "aria-label": ariaLabel,
+        style: {
+          display: "inline-flex",
+          flexDirection: "column",
+          gap: 4,
+          fontSize: 12,
+          color: "hsl(var(--foreground-light))"
+        },
+        ...props,
+        children: [
+          caption && /* @__PURE__ */ jsx("div", { "data-slot": "chart-gradient-legend-caption", style: { fontWeight: 500 }, children: caption }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "data-slot": "chart-gradient-legend-bar",
+              "aria-hidden": "true",
+              style: {
+                width,
+                height,
+                borderRadius: height / 2,
+                background: `linear-gradient(to right, ${startColor}, ${endColor})`
+              }
+            }
+          ),
+          (startLabel !== void 0 || endLabel !== void 0) && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                display: "flex",
+                justifyContent: "space-between",
+                width,
+                fontVariantNumeric: "tabular-nums",
+                opacity: 0.85
+              },
+              children: [
+                /* @__PURE__ */ jsx("span", { "data-slot": "chart-gradient-legend-start", children: startLabel }),
+                /* @__PURE__ */ jsx("span", { "data-slot": "chart-gradient-legend-end", children: endLabel })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ChartGradientLegend.displayName = "ChartGradientLegend";
+var SERIES_PATTERNS = ["solid", "dashed", "dotted", "dash-dot"];
+var SERIES_DASHARRAY = {
+  solid: void 0,
+  dashed: "6 4",
+  dotted: "2 4",
+  "dash-dot": "6 3 2 3"
+};
+var PartoLineChart = React2.forwardRef(function PartoLineChart2({
+  data,
+  dataKeys,
+  xAxisKey = "name",
+  curve = "monotone",
+  strokeWidth = 2.5,
+  showDots = false,
+  enableGridY = true,
+  enableGridX = false,
+  margin = { top: 20, right: 20, bottom: 50, left: 50 },
+  axisBottom,
+  axisLeft,
+  tooltipFormatter,
+  locale = "fa",
+  className,
+  isLoading = false,
+  ariaLabel,
+  chartProps,
+  legend = false
+}, ref) {
+  const { chartColors, axisTickStyle, gridStyle, tooltipStyle, crosshairStyle } = useChartTheme();
+  const defaultXTick = React2.useMemo(() => localeAwareCategoryTick(locale), [locale]);
+  const defaultYTick = React2.useMemo(() => localeAwareNumberTick(locale), [locale]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(ChartLoadingSkeleton, { className });
+  }
+  const usePatterns = legend === "patterns";
+  const seriesPattern = (i) => SERIES_PATTERNS[i % SERIES_PATTERNS.length];
+  const legendItems = legend ? dataKeys.map((key, i) => ({
+    key,
+    label: key,
+    color: chartColors[i % chartColors.length],
+    shape: "line",
+    pattern: usePatterns ? seriesPattern(i) : "solid"
+  })) : [];
+  return /* @__PURE__ */ jsx(ChartContainer, { ref, className, dataSlot: "line-chart", ariaLabel, children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", width: "100%", height: "100%" }, children: [
+    /* @__PURE__ */ jsx("div", { style: { flex: 1, minHeight: 0 }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart, { data, margin, ...chartProps, children: [
+      (enableGridX || enableGridY) && /* @__PURE__ */ jsx(
+        CartesianGrid,
+        {
+          horizontal: enableGridY,
+          vertical: enableGridX,
+          stroke: gridStyle.stroke,
+          strokeDasharray: gridStyle.strokeDasharray,
+          strokeOpacity: gridStyle.strokeOpacity
+        }
+      ),
+      axisBottom !== null && /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: xAxisKey,
+          tick: axisTickStyle,
+          tickLine: false,
+          axisLine: false,
+          tickMargin: 12,
+          tickFormatter: defaultXTick,
+          ...axisBottom
+        }
+      ),
+      axisLeft !== null && /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          tick: axisTickStyle,
+          tickLine: false,
+          axisLine: false,
+          tickMargin: 12,
+          tickFormatter: defaultYTick,
+          ...axisLeft
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Tooltip,
+        {
+          cursor: crosshairStyle,
+          content: /* @__PURE__ */ jsx(ChartTooltip, { tooltipStyle, formatter: tooltipFormatter, locale })
+        }
+      ),
+      dataKeys.map((key, i) => /* @__PURE__ */ jsx(
+        Line,
+        {
+          type: curve,
+          dataKey: key,
+          stroke: chartColors[i % chartColors.length],
+          strokeWidth,
+          strokeDasharray: usePatterns ? SERIES_DASHARRAY[seriesPattern(i)] : void 0,
+          dot: showDots,
+          activeDot: { r: 4, strokeWidth: 2 },
+          animationDuration: 800,
+          animationEasing: "ease-out"
+        },
+        key
+      ))
+    ] }) }) }),
+    legend && /* @__PURE__ */ jsx(ChartLegend, { items: legendItems, style: { paddingTop: 12 } })
+  ] }) });
+});
+PartoLineChart.displayName = "PartoLineChart";
+
+export { PartoLineChart };
 //# sourceMappingURL=PartoLineChart.js.map
 //# sourceMappingURL=PartoLineChart.js.map