@mamrp/components 1.7.28 → 1.7.31

package/dist/charts/index.mjs

@@ -2,11 +2,13 @@
 import * as React from "react";
 
 // src/charts/bar/index.tsx
+import { useRef, useState } from "react";
 import { Chart } from "react-chartjs-2";
 import {
   Chart as ChartJS,
   CategoryScale,
   LinearScale,
+  LogarithmicScale,
   BarElement,
   LineElement,
   PointElement,
@@ -19,6 +21,7 @@ import { Box } from "@mui/material";
 ChartJS.register(
   CategoryScale,
   LinearScale,
+  LogarithmicScale,
   BarElement,
   LineElement,
   PointElement,
@@ -28,76 +31,119 @@ ChartJS.register(
   LineController
 );
 function BarChart({ labels, datasets, height }) {
+  const chartRef = useRef(null);
+  const [hiddenIndices, setHiddenIndices] = useState(/* @__PURE__ */ new Set());
+  const visibleDatasets = datasets.filter((_, i) => !hiddenIndices.has(i));
+  const allValues = [].concat(
+    ...visibleDatasets.map(
+      (ds) => ds.data.filter((v) => v !== null)
+    )
+  );
+  const minValue = allValues.length ? Math.min(...allValues) : 0;
+  const maxValue = allValues.length ? Math.max(...allValues) : 1;
+  const useLogScale = maxValue / (minValue || 1) > 50;
+  const scaleType = useLogScale ? "logarithmic" : "linear";
+  let yMin = minValue;
+  let yMax = maxValue;
+  let stepSize = 1;
+  if (scaleType === "linear") {
+    const range = yMax - yMin;
+    const targetLines = 8;
+    let rawStep = range / targetLines;
+    const magnitude = Math.pow(10, Math.floor(Math.log10(rawStep)));
+    const normalized = rawStep / magnitude;
+    if (normalized <= 1) stepSize = 1 * magnitude;
+    else if (normalized <= 2) stepSize = 2 * magnitude;
+    else if (normalized <= 5) stepSize = 5 * magnitude;
+    else stepSize = 10 * magnitude;
+    yMin = Math.floor(yMin / stepSize) * stepSize;
+    yMax = Math.ceil(yMax / stepSize) * stepSize;
+  } else {
+    yMin = Math.max(minValue, 1);
+    yMax = maxValue;
+    stepSize = void 0;
+  }
   const options = {
     responsive: true,
     maintainAspectRatio: false,
+    animation: { duration: 500 },
     scales: {
       y: {
+        type: scaleType,
+        min: yMin,
+        max: yMax,
         ticks: {
-          font: {
-            family: "'Vazir', sans-serif",
-            size: 14
-          }
+          ...stepSize !== void 0 ? { stepSize } : {},
+          callback: (value) => {
+            const num = Number(value);
+            if (scaleType === "logarithmic") return num.toLocaleString();
+            if (num >= 1e3) return num.toLocaleString();
+            if (stepSize && stepSize < 1) return num.toFixed(2);
+            return num;
+          },
+          font: { family: "'Vazir', sans-serif", size: 14 }
         }
       },
       x: {
         ticks: {
           autoSkip: false,
-          font: {
-            family: "'Vazir', sans-serif",
-            size: 13
-          }
+          font: { family: "'Vazir', sans-serif", size: 13 }
         }
       }
     },
     plugins: {
-      datalabels: {
-        display: false
-        // ← غیرفعال
-      },
-      tooltip: {
-        bodyFont: {
-          family: "'Vazir', sans-serif",
-          size: 14
-        },
-        titleFont: {
-          family: "'Vazir', sans-serif",
-          size: 16
-        }
-      },
       legend: {
         labels: {
-          generateLabels: function(chart) {
-            const labels2 = ChartJS.defaults.plugins.legend.labels.generateLabels(chart);
-            return labels2.map((label) => ({
-              ...label,
-              text: "     " + label.text + " ",
-              boxWidth: 40,
-              boxHeight: 20
-            }));
-          },
-          padding: 15,
           usePointStyle: true,
-          font: {
-            size: 16,
-            family: "'Vazir', sans-serif"
-          },
-          boxWidth: 40,
-          paddingBottom: 10
+          // دایره‌ای
+          font: { size: 16, family: "'Vazir', sans-serif" }
+        },
+        onClick: (e, legendItem, legend) => {
+          const index = legendItem.datasetIndex;
+          const newHidden = new Set(hiddenIndices);
+          if (hiddenIndices.has(index)) newHidden.delete(index);
+          else newHidden.add(index);
+          setHiddenIndices(newHidden);
         }
-      }
+      },
+      tooltip: {
+        bodyFont: { family: "'Vazir', sans-serif", size: 14 },
+        titleFont: { family: "'Vazir', sans-serif", size: 16 }
+      },
+      datalabels: { display: false }
     }
   };
-  return /* @__PURE__ */ React.createElement(Box, { height: height ?? 600 }, /* @__PURE__ */ React.createElement(Chart, { type: "bar", data: { labels, datasets }, options }));
+  ChartJS.defaults.elements.point.radius = 5;
+  ChartJS.defaults.elements.point.hoverRadius = 9;
+  ChartJS.defaults.elements.point.borderWidth = 0.2;
+  ChartJS.defaults.elements.point.backgroundColor = "red";
+  ChartJS.defaults.elements.point.borderColor = "black";
+  return /* @__PURE__ */ React.createElement(Box, { height: height ?? 600 }, /* @__PURE__ */ React.createElement(
+    Chart,
+    {
+      ref: chartRef,
+      type: "bar",
+      data: {
+        labels,
+        datasets: datasets.map((ds, i) => ({
+          ...ds,
+          hidden: hiddenIndices.has(i)
+        }))
+      },
+      options
+    }
+  ));
 }
 
 // src/charts/pie/index.tsx
 import { Pie } from "react-chartjs-2";
 import { Chart as ChartJS2, ArcElement, Tooltip as Tooltip2, Legend as Legend2 } from "chart.js";
-import { Box as Box2 } from "@mui/material";
+import { useMemo, useRef as useRef2, useEffect, useState as useState2 } from "react";
+import { Box as Box2, Typography } from "@mui/material";
 import Image from "next/image";
 import ChartDataLabels from "chartjs-plugin-datalabels";
 ChartJS2.register(ArcElement, Tooltip2, Legend2, ChartDataLabels);
+ChartJS2.defaults.font.family = "Vazir, sans-serif";
 function PieChart({
   labels,
   datasets,
@@ -107,18 +153,83 @@ function PieChart({
   showDataLabels = false,
   showPercentage = false
 }) {
-  const options = {
+  const chartRef = useRef2(null);
+  const [dataLabels, setDataLabels] = useState2([]);
+  const containerRef = useRef2(null);
+  const calculateLabels = () => {
+    if (!showDataLabels || !chartRef.current || !containerRef.current) return;
+    const chart = chartRef.current;
+    const meta = chart.getDatasetMeta(0);
+    const data = chart.data.datasets[0].data;
+    const chartArea = chart.chartArea;
+    const visibleTotal = data.reduce((sum, val, index) => {
+      if (!meta.data[index] || meta.data[index].hidden !== true) {
+        return sum + val;
+      }
+      return sum;
+    }, 0);
+    const newLabels = [];
+    meta.data.forEach((arc, index) => {
+      if (arc.hidden) return;
+      const value = data[index];
+      if (value === 0) return;
+      const centerAngle = (arc.startAngle + arc.endAngle) / 2;
+      const midRadius = arc.innerRadius + (arc.outerRadius - arc.innerRadius) * 0.65;
+      const x = arc.x - Math.cos(centerAngle) * midRadius;
+      const y = arc.y + Math.sin(centerAngle) * midRadius;
+      let text;
+      if (showPercentage) {
+        const percentage = (value / visibleTotal * 100).toFixed(1);
+        text = percentage + "%";
+      } else {
+        text = String(value);
+      }
+      newLabels.push({ x, y, text, opacity: 1 });
+    });
+    setDataLabels(newLabels);
+  };
+  useEffect(() => {
+    if (!showDataLabels) {
+      setDataLabels([]);
+      return;
+    }
+    const timeout = setTimeout(() => {
+      calculateLabels();
+    }, 500);
+    return () => clearTimeout(timeout);
+  }, [datasets, showDataLabels, showPercentage]);
+  useEffect(() => {
+    if (!chartRef.current || !showDataLabels) return;
+    const chart = chartRef.current;
+    const originalUpdate = chart.update.bind(chart);
+    chart.update = function(...args) {
+      setDataLabels((prev) => prev.map((l) => ({ ...l, opacity: 0 })));
+      originalUpdate(...args);
+      setTimeout(() => {
+        calculateLabels();
+      }, 250);
+    };
+    return () => {
+      chart.update = originalUpdate;
+    };
+  }, [showDataLabels, showPercentage]);
+  const options = useMemo(() => ({
     responsive: true,
     maintainAspectRatio: false,
     cutout: !disableLogo ? "59%" : "0%",
+    animation: {
+      animateRotate: true,
+      animateScale: true,
+      duration: 400
+    },
     plugins: {
       tooltip: {
         bodyFont: {
-          family: "'Vazir', sans-serif",
+          family: "Vazir, sans-serif",
           size: 14
         },
         titleFont: {
-          family: "'Vazir', sans-serif",
+          family: "Vazir, sans-serif",
           size: 16
         }
       },
@@ -130,7 +241,7 @@ function PieChart({
           // رنگ متن legend را نرم‌تر می‌کند
           font: {
             size: 16,
-            family: "'Vazir', sans-serif"
+            family: "Vazir, sans-serif"
           },
           boxWidth: 40,
           paddingBottom: 10,
@@ -161,38 +272,11 @@ function PieChart({
         }
       },
       datalabels: {
-        display: (context) => {
-          return showDataLabels && !context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex].hidden;
-        },
-        color: "#fff",
-        font: {
-          size: 14,
-          weight: "bold",
-          family: "'Vazir', sans-serif"
-        },
-        anchor: "center",
-        // ← روی مرکز هر تکه
-        align: "center",
-        offset: 20,
-        // فاصله از مرکز (می‌تونی کم/زیاد کنی)
-        formatter: showPercentage ? (value, context) => {
-          if (value === 0) return "";
-          const total = context.chart.data.datasets[context.datasetIndex].data.reduce(
-            (sum, val, index) => {
-              const meta = context.chart.getDatasetMeta(context.datasetIndex);
-              if (!meta.data[index] || meta.data[index].hidden !== true) {
-                return sum + val;
-              }
-              return sum;
-            },
-            0
-          );
-          const percentage = (value / total * 100).toFixed(1);
-          return percentage + "%";
-        } : (value) => value === 0 ? "" : value
+        display: false
+        // غیرفعال - لیبل‌ها با React رندر می‌شوند
       }
     }
-  };
+  }), [disableLogo]);
   const CenterComponent = () => {
     return /* @__PURE__ */ React.createElement(
       "div",
@@ -216,16 +300,37 @@ function PieChart({
       )
     );
   };
-  return /* @__PURE__ */ React.createElement(Box2, { height: height ?? 600, sx: { position: "relative" } }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Box2, { ref: containerRef, height: height ?? 600, sx: { position: "relative" } }, /* @__PURE__ */ React.createElement(
     Pie,
     {
+      ref: chartRef,
       data: {
         labels,
         datasets
       },
       options
     }
-  ), !disableLogo && /* @__PURE__ */ React.createElement(
+  ), showDataLabels && dataLabels.map((label, index) => /* @__PURE__ */ React.createElement(
+    Typography,
+    {
+      key: index,
+      sx: {
+        position: "absolute",
+        left: label.x / (window.devicePixelRatio || 1),
+        top: label.y / (window.devicePixelRatio || 1),
+        transform: "translate(-50%, -50%)",
+        color: "#fff",
+        fontWeight: "bold",
+        fontSize: 14,
+        fontFamily: "Vazir, sans-serif",
+        pointerEvents: "none",
+        textShadow: "0 1px 2px rgba(0,0,0,0.5)",
+        opacity: label.opacity,
+        transition: "opacity 0.2s ease-in-out, left 0.2s ease-in-out, top 0.2s ease-in-out"
+      }
+    },
+    label.text
+  )), !disableLogo && /* @__PURE__ */ React.createElement(
     "div",
     {
       style: {

package/dist/charts/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../react-shim.js","../../src/charts/bar/index.tsx","../../src/charts/pie/index.tsx"],"sourcesContent":["import * as React from \"react\";\nexport { React };\n","\"use client\";\r\nimport { Chart } from \"react-chartjs-2\";\r\nimport {\r\n  Chart as ChartJS,\r\n  CategoryScale,\r\n  LinearScale,\r\n  BarElement,\r\n  LineElement,\r\n  PointElement,\r\n  Tooltip,\r\n  Legend,\r\n  BarController,\r\n  LineController,\r\n  Chart as ChartType,\r\n} from \"chart.js\";\r\nimport { Box } from \"@mui/material\";\r\n\r\nChartJS.register(\r\n  CategoryScale,\r\n  LinearScale,\r\n  BarElement,\r\n  LineElement,\r\n  PointElement,\r\n  Tooltip,\r\n  Legend,\r\n  BarController,\r\n  LineController\r\n);\r\n\r\ninterface Props {\r\n  labels: string[];\r\n  datasets: {\r\n    label: string;\r\n    data: (number | null)[];\r\n    backgroundColor: string;\r\n    borderColor?: string;\r\n    borderWidth?: number;\r\n    type?: \"line\";\r\n    order?: number;\r\n    tension?: number;\r\n    pointRadius?: number;\r\n    fill?: boolean;\r\n  }[];\r\n  height?: number;\r\n}\r\n/**\r\n * 📊 BarChart — کامپوننت نمودار میله‌ای (Bar/Combo)\r\n *\r\n * @component BarChart\r\n *\r\n * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای محور افقی (X).\r\n * @param {Array<{\r\n *   label: string,\r\n *   data: number[],\r\n *   backgroundColor: string,\r\n *   borderColor?: string,\r\n *   borderWidth?: number,\r\n *   type?: \"line\",\r\n *   order?: number,\r\n *   tension?: number,\r\n *   pointRadius?: number,\r\n *   fill?: boolean\r\n * }>} datasets - آرایه‌ای از آبجکت‌های داده برای هر سری نمودار.\r\n *   - label: عنوان داده‌ها (نمایش در legend)\r\n *   - data: آرایه‌ای از مقادیر هر سری\r\n *   - backgroundColor: رنگ میله یا خط\r\n *   - borderColor: (اختیاری) رنگ خط دور میله یا خط\r\n *   - borderWidth: (اختیاری) ضخامت خط دور میله یا خط\r\n *   - type: (اختیاری) اگر \"line\" باشد، سری به صورت خطی نمایش داده می‌شود (نمودار ترکیبی)\r\n *   - order: (اختیاری) ترتیب رسم سری (سری با order بالاتر روی بقیه قرار می‌گیرد)\r\n *   - tension: (اختیاری) میزان خمیدگی خط (برای سری‌های خطی)\r\n *   - pointRadius: (اختیاری) شعاع نقاط روی خط (برای سری‌های خطی)\r\n *   - fill: (اختیاری) پر شدن زیر خط (برای سری‌های خطی)\r\n *\r\n * @param {number} [height] - ارتفاع نمودار (پیش‌فرض: 600 پیکسل)\r\n *\r\n * @description\r\n * این کامپوننت یک نمودار میله‌ای (Bar) یا ترکیبی Bar/Line با قابلیت شخصی‌سازی کامل است.\r\n * - پشتیبانی از فونت وزیر و راست‌چین\r\n * - ریسپانسیو و مناسب صفحات فارسی\r\n * - امکان نمایش چند سری داده به صورت میله‌ای و خطی همزمان (Combo)\r\n * - شخصی‌سازی رنگ، ضخامت، ترتیب و استایل هر سری\r\n *\r\n * @returns {JSX.Element} یک نمودار میله‌ای یا ترکیبی با داده‌های ورودی\r\n *\r\n * @example\r\n * ```jsx\r\n * <BarChart\r\n *   labels={[\"شنبه\", \"یکشنبه\", \"دوشنبه\"]}\r\n *   datasets={[\r\n *     {\r\n *       label: \"فروش\",\r\n *       data: [10, 20, 15],\r\n *       backgroundColor: \"rgba(75,192,192,0.7)\",\r\n *     },\r\n *     {\r\n *       label: \"میانگین\",\r\n *       data: [12, 18, 14],\r\n *       borderColor: \"red\",\r\n *       backgroundColor: \"transparent\",\r\n *       type: \"line\",\r\n *       order: 0,\r\n *       borderWidth: 3,\r\n *       tension: 0.4,\r\n *       pointRadius: 4,\r\n *       fill: false,\r\n *     },\r\n *   ]}\r\n *   height={400}\r\n * />\r\n * ```\r\n */\r\nexport default function BarChart({ labels, datasets, height }: Props) {\r\n  const options = {\r\n    responsive: true,\r\n    maintainAspectRatio: false,\r\n    scales: {\r\n      y: {\r\n        ticks: {\r\n          font: {\r\n            family: \"'Vazir', sans-serif\",\r\n            size: 14,\r\n          },\r\n        },\r\n      },\r\n      x: {\r\n        ticks: {\r\n          autoSkip: false,\r\n          font: {\r\n            family: \"'Vazir', sans-serif\",\r\n            size: 13,\r\n          },\r\n        },\r\n      },\r\n    },\r\n    plugins: {\r\n      datalabels: {\r\n        display: false, // ← غیرفعال\r\n      },\r\n      tooltip: {\r\n        bodyFont: {\r\n          family: \"'Vazir', sans-serif\",\r\n          size: 14,\r\n        },\r\n        titleFont: {\r\n          family: \"'Vazir', sans-serif\",\r\n          size: 16,\r\n        },\r\n      },\r\n      legend: {\r\n        labels: {\r\n          generateLabels: function (chart: ChartType) {\r\n            const labels =\r\n              ChartJS.defaults.plugins.legend.labels.generateLabels(chart);\r\n            return labels.map((label) => ({\r\n              ...label,\r\n              text: \"     \" + label.text + \" \",\r\n              boxWidth: 40,\r\n              boxHeight: 20,\r\n            }));\r\n          },\r\n          padding: 15,\r\n          usePointStyle: true,\r\n          font: {\r\n            size: 16,\r\n            family: \"'Vazir', sans-serif\",\r\n          },\r\n          boxWidth: 40,\r\n          paddingBottom: 10,\r\n        },\r\n      },\r\n    },\r\n  };\r\n\r\n  return (\r\n    <Box height={height ?? 600}>\r\n      <Chart type=\"bar\" data={{ labels, datasets }} options={options} />\r\n    </Box>\r\n  );\r\n}\r\n","'use client'\nimport { Pie } from \"react-chartjs-2\";\nimport { Chart as ChartJS, ArcElement, Tooltip, Legend, Chart } from \"chart.js\";\nimport { useMemo } from \"react\";\nimport { Box } from \"@mui/material\";\nimport Image from \"next/image\";\nimport ChartDataLabels from \"chartjs-plugin-datalabels\";\n\nChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);\n\ninterface Props {\n  labels: string[];\n  datasets: {\n    label: string;\n    data: number[];\n    backgroundColor: string | string[];\n    borderWidth?: number;\n  }[];\n  height?: number;\n  disableLogo?: boolean;\n  logoSRC?: string;\n  showDataLabels?: boolean;\n  showPercentage?: boolean;\n}\n/**\n * 📊 PieChart — کامپوننت نمودار دایره‌ای (Pie)\n *\n * @component PieChart\n *\n * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای هر بخش نمودار.\n * @param {boolean} [showDataLabels] - نمایش یا عدم نمایش برچسب‌های داده‌ها\n * @param {boolean} [showPercentage] - نمایش درصد به جای مقدار عددی در برچسب‌های داده‌ها (در صورت فعال بودن showDataLabels). درصد بر اساس داده‌های قابل مشاهده محاسبه می‌شود.\n * @param {Array<{\n *   label: string,\n *   data: number[],\n *   backgroundColor: string[],\n *   borderWidth?: number\n * }>} datasets - آرایه‌ای شامل یک آبجکت داده برای مقداردهی بخش‌های نمودار.\n *   - label: عنوان داده‌ها (نمایش در legend)\n *   - data: آرایه‌ای از مقادیر هر بخش\n *   - backgroundColor: آرایه‌ای از رنگ‌ها برای هر بخش\n *   - borderWidth: (اختیاری) ضخامت خط دور هر بخش\n * @param {number} [height] - ارتفاع نمودار (پیش‌فرض: 600 پیکسل)\n *\n * @description\n * این کامپوننت یک نمودار دایره‌ای با قابلیت شخصی‌سازی رنگ، داده و فونت (هماهنگ با وزیر) است.\n * - ریسپانسیو و مناسب صفحات فارسی\n * - امکان نمایش لوگو یا کامپوننت دلخواه در مرکز نمودار\n * - امکان نمایش درصد یا مقدار عددی در برچسب‌های داده‌ها بر اساس داده‌های قابل مشاهده\n *\n * @returns {JSX.Element} یک نمودار دایره‌ای با داده‌های ورودی\n *\n * @example\n * ```jsx\n * <PieChart\n *   labels={[\"بخش اول\", \"بخش دوم\", \"بخش سوم\"]}\n *   datasets={[\n *     {\n *       label: \"مقدار\",\n *       data: [10, 20, 30],\n *       backgroundColor: [\n *         \"rgba(75,192,192,1)\",\n *         \"rgba(255,99,132,1)\",\n *         \"rgba(153,102,255,1)\",\n *       ],\n *       borderWidth: 2,\n *     },\n *   ]}\n *   showDataLabels={true}\n *   showPercentage={true}\n * />\n * ```\n */\nexport default function PieChart({\n  labels,\n  datasets,\n  height,\n  disableLogo,\n  logoSRC,\n  showDataLabels = false,\n  showPercentage = false,\n}: Props) {\n  const options = {\n    responsive: true,\n    maintainAspectRatio: false,\n    cutout: !disableLogo ? \"59%\" : \"0%\",\n    plugins: {\n      tooltip: {\n        bodyFont: {\n          family: \"'Vazir', sans-serif\",\n          size: 14,\n        },\n        titleFont: {\n          family: \"'Vazir', sans-serif\",\n          size: 16,\n        },\n      },\n      legend: {\n        labels: {\n          padding: 15,\n          usePointStyle: true,\n          color: '#666', // رنگ متن legend را نرم‌تر می‌کند\n          font: {\n            size: 16,\n            family: \"'Vazir', sans-serif\",\n          },\n          boxWidth: 40,\n          paddingBottom: 10,\n          generateLabels: (chart: any) => {\n            const data = chart.data;\n            const meta = chart.getDatasetMeta(0);\n            return data.labels.map((label: string, index: number) => {\n              const hidden = meta.data[index] ? meta.data[index].hidden : false;\n              return {\n                text: label,\n                fillStyle: data.datasets[0].backgroundColor[index] || '#000',\n                hidden: hidden,\n                index: index,\n                datasetIndex: 0,\n                textDecoration: hidden ? 'line-through' : undefined,\n              };\n            });\n          },\n        },\n        onClick: (e: any, legendItem: any, legend: any) => {\n          const ci = legend.chart;\n          const meta = ci.getDatasetMeta(legendItem.datasetIndex || 0);\n          const index = legendItem.index;\n          if (meta.data[index]) {\n            meta.data[index].hidden = !meta.data[index].hidden;\n          }\n          ci.update();\n        },\n      },\n      datalabels: {\n        display: (context: any) => {\n          return showDataLabels && !context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex].hidden;\n        },\n        color: \"#fff\",\n        font: {\n          size: 14,\n          weight: \"bold\",\n          family: \"'Vazir', sans-serif\",\n        } as const,\n        anchor: \"center\" as const, // ← روی مرکز هر تکه\n        align: \"center\" as const,\n        offset: 20, // فاصله از مرکز (می‌تونی کم/زیاد کنی)\n        formatter: showPercentage\n          ? (value: number, context: any) => {\n            if (value === 0) return \"\";\n            // محاسبه مجموع داده‌های قابل مشاهده\n            const total = context.chart.data.datasets[context.datasetIndex].data.reduce(\n              (sum: number, val: number, index: number) => {\n                const meta = context.chart.getDatasetMeta(context.datasetIndex);\n                if (!meta.data[index] || meta.data[index].hidden !== true) {\n                  return sum + val;\n                }\n                return sum;\n              },\n              0\n            );\n            const percentage = ((value / total) * 100).toFixed(1);\n            return percentage + \"%\";\n          }\n          : (value: number) => (value === 0 ? \"\" : value),\n      },\n    },\n  };\n\n  // کامپوننتی که می‌خواهید در مرکز نمودار نمایش داده شود\n  const CenterComponent = () => {\n    return (\n      <div\n        style={{\n          padding: \"10px\",\n          borderRadius: \"8px\",\n          textAlign: \"center\",\n          width: 220,\n        }}\n      >\n        <Image\n          alt=\"\"\n          width={220}\n          height={220}\n          src={logoSRC ?? \"/assets/images/pilogo.png\"}\n          unoptimized\n        />\n      </div>\n    );\n  };\n\n  return (\n    <Box height={height ?? 600} sx={{ position: \"relative\" }}>\n      <Pie\n        data={{\n          labels: labels,\n          datasets: datasets,\n        }}\n        options={options}\n      />\n      {!disableLogo && (\n        <div\n          style={{\n            position: \"absolute\",\n            top: \"53%\",\n            left: \"50%\",\n            transform: \"translate(-50%, -50%)\",\n            pointerEvents: \"none\", // جلوگیری از دریافت event روی این لایه\n          }}\n        >\n          <CenterComponent />\n        </div>\n      )}\n    </Box>\n  );\n}\n"],"mappings":"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","names":["labels","ChartJS","Tooltip","Legend","Box"]}
+{"version":3,"sources":["../../react-shim.js","../../src/charts/bar/index.tsx","../../src/charts/pie/index.tsx"],"sourcesContent":["import * as React from \"react\";\nexport { React };\n","\"use client\";\nimport { useRef, useState } from \"react\";\nimport { Chart } from \"react-chartjs-2\";\nimport {\n  Chart as ChartJS,\n  CategoryScale,\n  LinearScale,\n  LogarithmicScale,\n  BarElement,\n  LineElement,\n  PointElement,\n  Tooltip,\n  Legend,\n  BarController,\n  LineController,\n  Chart as ChartType,\n} from \"chart.js\";\nimport { Box } from \"@mui/material\";\n\nChartJS.register(\n  CategoryScale,\n  LinearScale,\n  LogarithmicScale,\n  BarElement,\n  LineElement,\n  PointElement,\n  Tooltip,\n  Legend,\n  BarController,\n  LineController\n);\n\ninterface Dataset {\n  label: string;\n  data: (number | null)[];\n  backgroundColor: string;\n  borderColor?: string;\n  borderWidth?: number;\n  type?: \"line\";\n  order?: number;\n  tension?: number;\n  pointRadius?: number;\n  fill?: boolean;\n}\n\ninterface Props {\n  labels: string[];\n  datasets: Dataset[];\n  height?: number;\n}\n\nexport default function BarChart({ labels, datasets, height }: Props) {\n  const chartRef = useRef<ChartType | null>(null);\n  const [hiddenIndices, setHiddenIndices] = useState<Set<number>>(new Set());\n\n  // --- داده‌های visible ---\n  const visibleDatasets = datasets.filter((_, i) => !hiddenIndices.has(i));\n  const allValues = ([] as number[]).concat(\n    ...visibleDatasets.map((ds) =>\n      ds.data.filter((v): v is number => v !== null)\n    )\n  );\n\n  const minValue = allValues.length ? Math.min(...allValues) : 0;\n  const maxValue = allValues.length ? Math.max(...allValues) : 1;\n\n  // --- تصمیم هوشمند برای scale ---\n  const useLogScale = maxValue / (minValue || 1) > 50; // اگر اختلاف >50 برابر باشد log scale\n  const scaleType: \"linear\" | \"logarithmic\" = useLogScale\n    ? \"logarithmic\"\n    : \"linear\";\n\n  // --- محاسبه محور Y ---\n  let yMin = minValue;\n  let yMax = maxValue;\n  let stepSize: number | undefined = 1;\n\n  if (scaleType === \"linear\") {\n    const range = yMax - yMin;\n    const targetLines = 8;\n    let rawStep = range / targetLines;\n\n    const magnitude = Math.pow(10, Math.floor(Math.log10(rawStep)));\n    const normalized = rawStep / magnitude;\n    if (normalized <= 1) stepSize = 1 * magnitude;\n    else if (normalized <= 2) stepSize = 2 * magnitude;\n    else if (normalized <= 5) stepSize = 5 * magnitude;\n    else stepSize = 10 * magnitude;\n\n    yMin = Math.floor(yMin / stepSize) * stepSize;\n    yMax = Math.ceil(yMax / stepSize) * stepSize;\n  } else {\n    yMin = Math.max(minValue, 1);\n    yMax = maxValue;\n    stepSize = undefined;\n  }\n\n  // --- تنظیمات Chart.js ---\n  const options = {\n    responsive: true,\n    maintainAspectRatio: false,\n    animation: { duration: 500 },\n    scales: {\n      y: {\n        type: scaleType,\n        min: yMin,\n        max: yMax,\n        ticks: {\n          ...(stepSize !== undefined ? { stepSize } : {}),\n          callback: (value: any) => {\n            // محدود کردن تعداد اعشار به حداکثر 2\n            const num = Number(value);\n            if (scaleType === \"logarithmic\") return num.toLocaleString();\n            // اگر عدد خیلی بزرگ است، بدون اعشار\n            if (num >= 1000) return num.toLocaleString();\n            // اعشار برای اعداد کوچک\n            if (stepSize && stepSize < 1) return num.toFixed(2);\n            return num;\n          },\n          font: { family: \"'Vazir', sans-serif\", size: 14 },\n        },\n      },\n      x: {\n        ticks: {\n          autoSkip: false,\n          font: { family: \"'Vazir', sans-serif\", size: 13 },\n        },\n      },\n    },\n    plugins: {\n      legend: {\n        labels: {\n          usePointStyle: true, // دایره‌ای\n          font: { size: 16, family: \"'Vazir', sans-serif\" },\n        },\n        onClick: (e: any, legendItem: any, legend: any) => {\n          const index = legendItem.datasetIndex as number;\n          const newHidden = new Set(hiddenIndices);\n          if (hiddenIndices.has(index)) newHidden.delete(index);\n          else newHidden.add(index);\n          setHiddenIndices(newHidden);\n        },\n      },\n      tooltip: {\n        bodyFont: { family: \"'Vazir', sans-serif\", size: 14 },\n        titleFont: { family: \"'Vazir', sans-serif\", size: 16 },\n      },\n      datalabels: { display: false },\n    },\n  };\n\n  // --- تنظیمات نقاط ---\n  ChartJS.defaults.elements.point.radius = 5;\n  ChartJS.defaults.elements.point.hoverRadius = 9;\n  ChartJS.defaults.elements.point.borderWidth = 0.2;\n  ChartJS.defaults.elements.point.backgroundColor = \"red\";\n  ChartJS.defaults.elements.point.borderColor = \"black\";\n\n  return (\n    <Box height={height ?? 600}>\n      <Chart\n        ref={chartRef}\n        type=\"bar\"\n        data={{\n          labels,\n          datasets: datasets.map((ds, i) => ({\n            ...ds,\n            hidden: hiddenIndices.has(i),\n          })),\n        }}\n        options={options}\n      />\n    </Box>\n  );\n}\n","'use client'\nimport { Pie } from \"react-chartjs-2\";\nimport { Chart as ChartJS, ArcElement, Tooltip, Legend, Chart } from \"chart.js\";\nimport { useMemo, useRef, useEffect, useState } from \"react\";\nimport { Box, Typography } from \"@mui/material\";\nimport Image from \"next/image\";\nimport ChartDataLabels from \"chartjs-plugin-datalabels\";\n\nChartJS.register(ArcElement, Tooltip, Legend, ChartDataLabels);\n\n// تنظیم فونت پیش‌فرض Chart.js به Vazir\nChartJS.defaults.font.family = \"Vazir, sans-serif\";\n\ninterface Props {\n  labels: string[];\n  datasets: {\n    label: string;\n    data: number[];\n    backgroundColor: string | string[];\n    borderWidth?: number;\n  }[];\n  height?: number;\n  disableLogo?: boolean;\n  logoSRC?: string;\n  showDataLabels?: boolean;\n  showPercentage?: boolean;\n}\n/**\n * 📊 PieChart — کامپوننت نمودار دایره‌ای (Pie)\n *\n * @component PieChart\n *\n * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای هر بخش نمودار.\n * @param {boolean} [showDataLabels] - نمایش یا عدم نمایش برچسب‌های داده‌ها\n * @param {boolean} [showPercentage] - نمایش درصد به جای مقدار عددی در برچسب‌های داده‌ها (در صورت فعال بودن showDataLabels). درصد بر اساس داده‌های قابل مشاهده محاسبه می‌شود.\n * @param {Array<{\n *   label: string,\n *   data: number[],\n *   backgroundColor: string[],\n *   borderWidth?: number\n * }>} datasets - آرایه‌ای شامل یک آبجکت داده برای مقداردهی بخش‌های نمودار.\n *   - label: عنوان داده‌ها (نمایش در legend)\n *   - data: آرایه‌ای از مقادیر هر بخش\n *   - backgroundColor: آرایه‌ای از رنگ‌ها برای هر بخش\n *   - borderWidth: (اختیاری) ضخامت خط دور هر بخش\n * @param {number} [height] - ارتفاع نمودار (پیش‌فرض: 600 پیکسل)\n *\n * @description\n * این کامپوننت یک نمودار دایره‌ای با قابلیت شخصی‌سازی رنگ، داده و فونت (هماهنگ با وزیر) است.\n * - ریسپانسیو و مناسب صفحات فارسی\n * - امکان نمایش لوگو یا کامپوننت دلخواه در مرکز نمودار\n * - امکان نمایش درصد یا مقدار عددی در برچسب‌های داده‌ها بر اساس داده‌های قابل مشاهده\n *\n * @returns {JSX.Element} یک نمودار دایره‌ای با داده‌های ورودی\n *\n * @example\n * ```jsx\n * <PieChart\n *   labels={[\"بخش اول\", \"بخش دوم\", \"بخش سوم\"]}\n *   datasets={[\n *     {\n *       label: \"مقدار\",\n *       data: [10, 20, 30],\n *       backgroundColor: [\n *         \"rgba(75,192,192,1)\",\n *         \"rgba(255,99,132,1)\",\n *         \"rgba(153,102,255,1)\",\n *       ],\n *       borderWidth: 2,\n *     },\n *   ]}\n *   showDataLabels={true}\n *   showPercentage={true}\n * />\n * ```\n */\nexport default function PieChart({\n  labels,\n  datasets,\n  height,\n  disableLogo,\n  logoSRC,\n  showDataLabels = false,\n  showPercentage = false,\n}: Props) {\n  const chartRef = useRef<ChartJS<\"pie\">>(null);\n  const [dataLabels, setDataLabels] = useState<{ x: number; y: number; text: string; opacity: number }[]>([]);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // تابع محاسبه موقعیت لیبل‌ها\n  const calculateLabels = () => {\n    if (!showDataLabels || !chartRef.current || !containerRef.current) return;\n\n    const chart = chartRef.current;\n    const meta = chart.getDatasetMeta(0);\n    const data = chart.data.datasets[0].data as number[];\n\n    // گرفتن اطلاعات chart area\n    const chartArea = chart.chartArea;\n\n    // محاسبه مجموع داده‌های قابل مشاهده\n    const visibleTotal = data.reduce((sum, val, index) => {\n      if (!meta.data[index] || (meta.data[index] as any).hidden !== true) {\n        return sum + val;\n      }\n      return sum;\n    }, 0);\n\n    const newLabels: { x: number; y: number; text: string; opacity: number }[] = [];\n\n    meta.data.forEach((arc: any, index: number) => {\n      if (arc.hidden) return;\n\n      const value = data[index];\n      if (value === 0) return;\n\n      // محاسبه مرکز arc\n      const centerAngle = (arc.startAngle + arc.endAngle) / 2;\n      // نزدیک‌تر به دیواره (0.7 = بین مرکز و لبه، هرچه بیشتر به 1 نزدیک‌تر = نزدیک‌تر به لبه)\n      const midRadius = arc.innerRadius + (arc.outerRadius - arc.innerRadius) * 0.65;\n\n      // موقعیت در chart area - آینه کردن روی محور X\n      const x = arc.x - Math.cos(centerAngle) * midRadius;\n      const y = arc.y + Math.sin(centerAngle) * midRadius;\n\n      let text: string;\n      if (showPercentage) {\n        const percentage = ((value / visibleTotal) * 100).toFixed(1);\n        text = percentage + \"%\";\n      } else {\n        text = String(value);\n      }\n\n      newLabels.push({ x, y, text, opacity: 1 });\n    });\n\n    setDataLabels(newLabels);\n  };\n\n  // محاسبه موقعیت لیبل‌ها بعد از اتمام انیمیشن\n  useEffect(() => {\n    if (!showDataLabels) {\n      setDataLabels([]);\n      return;\n    }\n\n    // صبر برای اتمام انیمیشن اولیه (500ms)\n    const timeout = setTimeout(() => {\n      calculateLabels();\n    }, 500);\n\n    return () => clearTimeout(timeout);\n  }, [datasets, showDataLabels, showPercentage]);\n\n  // آپدیت لیبل‌ها بعد از هر تغییر در chart (مثل کلیک روی legend)\n  useEffect(() => {\n    if (!chartRef.current || !showDataLabels) return;\n\n    const chart = chartRef.current;\n    const originalUpdate = chart.update.bind(chart);\n\n    chart.update = function (...args: any[]) {\n      // مخفی کردن لیبل‌ها قبل از آپدیت\n      setDataLabels(prev => prev.map(l => ({ ...l, opacity: 0 })));\n\n      originalUpdate(...args);\n\n      // محاسبه مجدد لیبل‌ها بعد از انیمیشن\n      setTimeout(() => {\n        calculateLabels();\n      }, 250);\n    };\n\n    return () => {\n      chart.update = originalUpdate;\n    };\n  }, [showDataLabels, showPercentage]);\n\n  const options = useMemo(() => ({\n    responsive: true,\n    maintainAspectRatio: false,\n    cutout: !disableLogo ? \"59%\" : \"0%\",\n    animation: {\n      animateRotate: true,\n      animateScale: true,\n      duration: 400,\n    },\n    plugins: {\n      tooltip: {\n        bodyFont: {\n          family: \"Vazir, sans-serif\",\n          size: 14,\n        },\n        titleFont: {\n          family: \"Vazir, sans-serif\",\n          size: 16,\n        },\n      },\n      legend: {\n        labels: {\n          padding: 15,\n          usePointStyle: true,\n          color: '#666', // رنگ متن legend را نرم‌تر می‌کند\n          font: {\n            size: 16,\n            family: \"Vazir, sans-serif\",\n          },\n          boxWidth: 40,\n          paddingBottom: 10,\n          generateLabels: (chart: any) => {\n            const data = chart.data;\n            const meta = chart.getDatasetMeta(0);\n            return data.labels.map((label: string, index: number) => {\n              const hidden = meta.data[index] ? meta.data[index].hidden : false;\n              return {\n                text: label,\n                fillStyle: data.datasets[0].backgroundColor[index] || '#000',\n                hidden: hidden,\n                index: index,\n                datasetIndex: 0,\n                textDecoration: hidden ? 'line-through' : undefined,\n              };\n            });\n          },\n        },\n        onClick: (e: any, legendItem: any, legend: any) => {\n          const ci = legend.chart;\n          const meta = ci.getDatasetMeta(legendItem.datasetIndex || 0);\n          const index = legendItem.index;\n          if (meta.data[index]) {\n            meta.data[index].hidden = !meta.data[index].hidden;\n          }\n          ci.update();\n        },\n      },\n      datalabels: {\n        display: false, // غیرفعال - لیبل‌ها با React رندر می‌شوند\n      },\n    },\n  }), [disableLogo]);\n\n  // کامپوننتی که می‌خواهید در مرکز نمودار نمایش داده شود\n  const CenterComponent = () => {\n    return (\n      <div\n        style={{\n          padding: \"10px\",\n          borderRadius: \"8px\",\n          textAlign: \"center\",\n          width: 220,\n        }}\n      >\n        <Image\n          alt=\"\"\n          width={220}\n          height={220}\n          src={logoSRC ?? \"/assets/images/pilogo.png\"}\n          unoptimized\n        />\n      </div>\n    );\n  };\n\n  return (\n    <Box ref={containerRef} height={height ?? 600} sx={{ position: \"relative\" }}>\n      <Pie\n        ref={chartRef}\n        data={{\n          labels: labels,\n          datasets: datasets,\n        }}\n        options={options}\n      />\n      {/* لیبل‌های سفارشی با فونت Vazir */}\n      {showDataLabels && dataLabels.map((label, index) => (\n        <Typography\n          key={index}\n          sx={{\n            position: \"absolute\",\n            left: label.x / (window.devicePixelRatio || 1),\n            top: label.y / (window.devicePixelRatio || 1),\n            transform: \"translate(-50%, -50%)\",\n            color: \"#fff\",\n            fontWeight: \"bold\",\n            fontSize: 14,\n            fontFamily: \"Vazir, sans-serif\",\n            pointerEvents: \"none\",\n            textShadow: \"0 1px 2px rgba(0,0,0,0.5)\",\n            opacity: label.opacity,\n            transition: \"opacity 0.2s ease-in-out, left 0.2s ease-in-out, top 0.2s ease-in-out\",\n          }}\n        >\n          {label.text}\n        </Typography>\n      ))}\n      {!disableLogo && (\n        <div\n          style={{\n            position: \"absolute\",\n            top: \"53%\",\n            left: \"50%\",\n            transform: \"translate(-50%, -50%)\",\n            pointerEvents: \"none\", // جلوگیری از دریافت event روی این لایه\n          }}\n        >\n          <CenterComponent />\n        </div>\n      )}\n    </Box>\n  );\n}\n"],"mappings":"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","names":["ChartJS","Tooltip","Legend","useRef","useState","Box"]}

package/dist/date-pickers/index.d.mts

@@ -55,6 +55,7 @@ import { Moment } from 'moment-jalaali';
  *       dualCalendar={false}  // جدید: کنترل تقویم دوم
  *       singleCalendar={false}
  *       useMobilePickers={false}
+ *       disableSmartTabs={false}
  *     />
  *   );
  * };
@@ -116,6 +117,16 @@ import { Moment } from 'moment-jalaali';
  * />
  * ```
  *
+ * 6. پنهان کردن تب‌های هوشمند (بدون تغییر عملکرد):
+ * ```tsx
+ * <DateRangePicker
+ *   fromDate="from"
+ *   toDate="to"
+ *   control={control}
+ *   disableSmartTabs={true}
+ * />
+ * ```
+ *
  * ویژگی‌های تب‌های هوشمند (جدید در v3.0):
  *
  * ```tsx
@@ -242,6 +253,7 @@ interface DateRangePickerProps {
     singleCalendar?: boolean;
     useMobilePickers?: boolean;
     dualCalendar?: boolean;
+    disableSmartTabs?: boolean;
     variant?: TextFieldVariants;
     placeholder?: string;
     disableClearIcon?: boolean;
@@ -364,6 +376,7 @@ interface DateRangePickerProps {
  * @property {boolean} [clear] - نمایش دکمه پاک کردن (پیش‌فرض: true)
  * @property {boolean} [singleCalendar] - نمایش تک تقویم به جای دوتایی (پیش‌فرض: false)
  * @property {boolean} [useMobilePickers] - استفاده از DatePicker جداگانه به جای popup (پیش‌فرض: false)
+ * @property {boolean} [disableSmartTabs] - پنهان کردن تب‌های هوشمند بدون تغییر عملکرد (پیش‌فرض: false)
  *
  * نکات مهم:
  * - کامپوننت خودکار mobile detection دارد (breakpoint: 700px)

package/dist/date-pickers/index.d.ts

@@ -55,6 +55,7 @@ import { Moment } from 'moment-jalaali';
  *       dualCalendar={false}  // جدید: کنترل تقویم دوم
  *       singleCalendar={false}
  *       useMobilePickers={false}
+ *       disableSmartTabs={false}
  *     />
  *   );
  * };
@@ -116,6 +117,16 @@ import { Moment } from 'moment-jalaali';
  * />
  * ```
  *
+ * 6. پنهان کردن تب‌های هوشمند (بدون تغییر عملکرد):
+ * ```tsx
+ * <DateRangePicker
+ *   fromDate="from"
+ *   toDate="to"
+ *   control={control}
+ *   disableSmartTabs={true}
+ * />
+ * ```
+ *
  * ویژگی‌های تب‌های هوشمند (جدید در v3.0):
  *
  * ```tsx
@@ -242,6 +253,7 @@ interface DateRangePickerProps {
     singleCalendar?: boolean;
     useMobilePickers?: boolean;
     dualCalendar?: boolean;
+    disableSmartTabs?: boolean;
     variant?: TextFieldVariants;
     placeholder?: string;
     disableClearIcon?: boolean;
@@ -364,6 +376,7 @@ interface DateRangePickerProps {
  * @property {boolean} [clear] - نمایش دکمه پاک کردن (پیش‌فرض: true)
  * @property {boolean} [singleCalendar] - نمایش تک تقویم به جای دوتایی (پیش‌فرض: false)
  * @property {boolean} [useMobilePickers] - استفاده از DatePicker جداگانه به جای popup (پیش‌فرض: false)
+ * @property {boolean} [disableSmartTabs] - پنهان کردن تب‌های هوشمند بدون تغییر عملکرد (پیش‌فرض: false)
  *
  * نکات مهم:
  * - کامپوننت خودکار mobile detection دارد (breakpoint: 700px)

package/dist/date-pickers/index.js

@@ -70,6 +70,8 @@ var DateRangePicker = ({
   // Default to calendar popup style
   dualCalendar = false,
   // Default to single calendar with smart tabs
+  disableSmartTabs = false,
+  // Default to show tabs
   variant = "outlined",
   placeholder,
   disableClearIcon = false
@@ -371,7 +373,7 @@ var DateRangePicker = ({
               alignItems: "center"
             }
           },
-          !dualCalendar && showSingleCalendar && /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: { width: "100%", mb: 2 } }, /* @__PURE__ */ import_react.default.createElement(
+          !dualCalendar && showSingleCalendar && !disableSmartTabs && /* @__PURE__ */ import_react.default.createElement(import_material.Box, { sx: { width: "100%", mb: 2 } }, /* @__PURE__ */ import_react.default.createElement(
             import_material.Box,
             {
               sx: { display: "flex", justifyContent: "center", mb: 1 }