@mamrp/components 1.7.27 → 1.7.30

package/dist/charts/index.d.mts

@@ -15,6 +15,36 @@ interface Props$1 {
         fill?: boolean;
     }[];
     height?: number;
+    /**
+     * حداقل مقدار محور Y (اختیاری)
+     * اگر ست نشود، Chart.js خودش محاسبه می‌کند
+     * ⚠️ نکته: اگر این مقدار ست شود، beginAtZero نادیده گرفته می‌شود
+     */
+    yAxisMin?: number;
+    /**
+     * حداکثر مقدار محور Y (اختیاری)
+     * اگر ست نشود، Chart.js خودش محاسبه می‌کند
+     */
+    yAxisMax?: number;
+    /**
+     * آیا محور Y از صفر شروع شود؟
+     * پیش‌فرض: true
+     * ⚠️ نکته: اگر yAxisMin ست شود، این گزینه نادیده گرفته می‌شود
+     */
+    beginAtZero?: boolean;
+    /**
+     * استفاده از مقیاس لگاریتمی برای محور Y
+     * مناسب برای داده‌هایی که اختلاف خیلی زیادی دارند
+     * پیش‌فرض: false
+     * ⚠️ نکته: مقادیر 0 یا منفی در مقیاس لگاریتمی نمایش داده نمی‌شوند
+     */
+    logarithmic?: boolean;
+    /**
+     * حداقل ارتفاع میله برای داده‌های خیلی کوچک (پیکسل)
+     * مقادیر خیلی کوچک (مثل 1) در کنار مقادیر بزرگ (مثل 10000) گم نمی‌شوند
+     * پیش‌فرض: 0 (غیرفعال)
+     */
+    minBarLength?: number;
 }
 /**
  * 📊 BarChart — کامپوننت نمودار میله‌ای (Bar/Combo)
@@ -46,6 +76,11 @@ interface Props$1 {
  *   - fill: (اختیاری) پر شدن زیر خط (برای سری‌های خطی)
  *
  * @param {number} [height] - ارتفاع نمودار (پیش‌فرض: 600 پیکسل)
+ * @param {number} [yAxisMin] - حداقل مقدار محور Y (نادیده‌گرفتن beginAtZero)
+ * @param {number} [yAxisMax] - حداکثر مقدار محور Y
+ * @param {boolean} [beginAtZero=true] - آیا محور Y از صفر شروع شود؟ (اگر yAxisMin ست شود نادیده گرفته می‌شود)
+ * @param {boolean} [logarithmic=false] - استفاده از مقیاس لگاریتمی (مقادیر 0 یا منفی نمایش داده نمی‌شوند)
+ * @param {number} [minBarLength=0] - حداقل ارتفاع میله (پیکسل) - برای جلوگیری از گم شدن داده‌های کوچک
  *
  * @description
  * این کامپوننت یک نمودار میله‌ای (Bar) یا ترکیبی Bar/Line با قابلیت شخصی‌سازی کامل است.
@@ -53,11 +88,14 @@ interface Props$1 {
  * - ریسپانسیو و مناسب صفحات فارسی
  * - امکان نمایش چند سری داده به صورت میله‌ای و خطی همزمان (Combo)
  * - شخصی‌سازی رنگ، ضخامت، ترتیب و استایل هر سری
+ * - پشتیبانی از مقیاس لگاریتمی برای داده‌های با اختلاف زیاد
+ * - minBarLength برای نمایش داده‌های خیلی کوچک در کنار بزرگ‌ها
  *
  * @returns {JSX.Element} یک نمودار میله‌ای یا ترکیبی با داده‌های ورودی
  *
  * @example
  * ```jsx
+ * // نمودار ساده
  * <BarChart
  *   labels={["شنبه", "یکشنبه", "دوشنبه"]}
  *   datasets={[
@@ -66,24 +104,42 @@ interface Props$1 {
  *       data: [10, 20, 15],
  *       backgroundColor: "rgba(75,192,192,0.7)",
  *     },
+ *   ]}
+ *   height={400}
+ * />
+ *
+ * // نمودار با داده‌های اختلاف زیاد (مقیاس لگاریتمی)
+ * <BarChart
+ *   labels={["A", "B", "C", "D"]}
+ *   datasets={[
+ *     {
+ *       label: "مقادیر",
+ *       data: [5, 50, 5000, 50000],
+ *       backgroundColor: "rgba(75,192,192,0.7)",
+ *     },
+ *   ]}
+ *   logarithmic={true}
+ *   height={400}
+ * />
+ *
+ * // نمودار با کنترل دستی بازه محور Y
+ * <BarChart
+ *   labels={["A", "B", "C"]}
+ *   datasets={[
  *     {
- *       label: "میانگین",
- *       data: [12, 18, 14],
- *       borderColor: "red",
- *       backgroundColor: "transparent",
- *       type: "line",
- *       order: 0,
- *       borderWidth: 3,
- *       tension: 0.4,
- *       pointRadius: 4,
- *       fill: false,
+ *       label: "مقادیر",
+ *       data: [100, 150, 120],
+ *       backgroundColor: "rgba(75,192,192,0.7)",
  *     },
  *   ]}
+ *   yAxisMin={80}
+ *   yAxisMax={200}
+ *   beginAtZero={false}
  *   height={400}
  * />
  * ```
  */
-declare function BarChart({ labels, datasets, height }: Props$1): React.JSX.Element;
+declare function BarChart({ labels, datasets, height, yAxisMin, yAxisMax, beginAtZero, logarithmic, minBarLength, }: Props$1): React.JSX.Element;
 
 interface Props {
     labels: string[];

package/dist/charts/index.d.ts

@@ -15,6 +15,36 @@ interface Props$1 {
         fill?: boolean;
     }[];
     height?: number;
+    /**
+     * حداقل مقدار محور Y (اختیاری)
+     * اگر ست نشود، Chart.js خودش محاسبه می‌کند
+     * ⚠️ نکته: اگر این مقدار ست شود، beginAtZero نادیده گرفته می‌شود
+     */
+    yAxisMin?: number;
+    /**
+     * حداکثر مقدار محور Y (اختیاری)
+     * اگر ست نشود، Chart.js خودش محاسبه می‌کند
+     */
+    yAxisMax?: number;
+    /**
+     * آیا محور Y از صفر شروع شود؟
+     * پیش‌فرض: true
+     * ⚠️ نکته: اگر yAxisMin ست شود، این گزینه نادیده گرفته می‌شود
+     */
+    beginAtZero?: boolean;
+    /**
+     * استفاده از مقیاس لگاریتمی برای محور Y
+     * مناسب برای داده‌هایی که اختلاف خیلی زیادی دارند
+     * پیش‌فرض: false
+     * ⚠️ نکته: مقادیر 0 یا منفی در مقیاس لگاریتمی نمایش داده نمی‌شوند
+     */
+    logarithmic?: boolean;
+    /**
+     * حداقل ارتفاع میله برای داده‌های خیلی کوچک (پیکسل)
+     * مقادیر خیلی کوچک (مثل 1) در کنار مقادیر بزرگ (مثل 10000) گم نمی‌شوند
+     * پیش‌فرض: 0 (غیرفعال)
+     */
+    minBarLength?: number;
 }
 /**
  * 📊 BarChart — کامپوننت نمودار میله‌ای (Bar/Combo)
@@ -46,6 +76,11 @@ interface Props$1 {
  *   - fill: (اختیاری) پر شدن زیر خط (برای سری‌های خطی)
  *
  * @param {number} [height] - ارتفاع نمودار (پیش‌فرض: 600 پیکسل)
+ * @param {number} [yAxisMin] - حداقل مقدار محور Y (نادیده‌گرفتن beginAtZero)
+ * @param {number} [yAxisMax] - حداکثر مقدار محور Y
+ * @param {boolean} [beginAtZero=true] - آیا محور Y از صفر شروع شود؟ (اگر yAxisMin ست شود نادیده گرفته می‌شود)
+ * @param {boolean} [logarithmic=false] - استفاده از مقیاس لگاریتمی (مقادیر 0 یا منفی نمایش داده نمی‌شوند)
+ * @param {number} [minBarLength=0] - حداقل ارتفاع میله (پیکسل) - برای جلوگیری از گم شدن داده‌های کوچک
  *
  * @description
  * این کامپوننت یک نمودار میله‌ای (Bar) یا ترکیبی Bar/Line با قابلیت شخصی‌سازی کامل است.
@@ -53,11 +88,14 @@ interface Props$1 {
  * - ریسپانسیو و مناسب صفحات فارسی
  * - امکان نمایش چند سری داده به صورت میله‌ای و خطی همزمان (Combo)
  * - شخصی‌سازی رنگ، ضخامت، ترتیب و استایل هر سری
+ * - پشتیبانی از مقیاس لگاریتمی برای داده‌های با اختلاف زیاد
+ * - minBarLength برای نمایش داده‌های خیلی کوچک در کنار بزرگ‌ها
  *
  * @returns {JSX.Element} یک نمودار میله‌ای یا ترکیبی با داده‌های ورودی
  *
  * @example
  * ```jsx
+ * // نمودار ساده
  * <BarChart
  *   labels={["شنبه", "یکشنبه", "دوشنبه"]}
  *   datasets={[
@@ -66,24 +104,42 @@ interface Props$1 {
  *       data: [10, 20, 15],
  *       backgroundColor: "rgba(75,192,192,0.7)",
  *     },
+ *   ]}
+ *   height={400}
+ * />
+ *
+ * // نمودار با داده‌های اختلاف زیاد (مقیاس لگاریتمی)
+ * <BarChart
+ *   labels={["A", "B", "C", "D"]}
+ *   datasets={[
+ *     {
+ *       label: "مقادیر",
+ *       data: [5, 50, 5000, 50000],
+ *       backgroundColor: "rgba(75,192,192,0.7)",
+ *     },
+ *   ]}
+ *   logarithmic={true}
+ *   height={400}
+ * />
+ *
+ * // نمودار با کنترل دستی بازه محور Y
+ * <BarChart
+ *   labels={["A", "B", "C"]}
+ *   datasets={[
  *     {
- *       label: "میانگین",
- *       data: [12, 18, 14],
- *       borderColor: "red",
- *       backgroundColor: "transparent",
- *       type: "line",
- *       order: 0,
- *       borderWidth: 3,
- *       tension: 0.4,
- *       pointRadius: 4,
- *       fill: false,
+ *       label: "مقادیر",
+ *       data: [100, 150, 120],
+ *       backgroundColor: "rgba(75,192,192,0.7)",
  *     },
  *   ]}
+ *   yAxisMin={80}
+ *   yAxisMax={200}
+ *   beginAtZero={false}
  *   height={400}
  * />
  * ```
  */
-declare function BarChart({ labels, datasets, height }: Props$1): React.JSX.Element;
+declare function BarChart({ labels, datasets, height, yAxisMin, yAxisMax, beginAtZero, logarithmic, minBarLength, }: Props$1): React.JSX.Element;
 
 interface Props {
     labels: string[];

package/dist/charts/index.js

@@ -42,9 +42,11 @@ var React = __toESM(require("react"));
 var import_react_chartjs_2 = require("react-chartjs-2");
 var import_chart = require("chart.js");
 var import_material = require("@mui/material");
+var import_react = require("react");
 import_chart.Chart.register(
   import_chart.CategoryScale,
   import_chart.LinearScale,
+  import_chart.LogarithmicScale,
   import_chart.BarElement,
   import_chart.LineElement,
   import_chart.PointElement,
@@ -53,16 +55,113 @@ import_chart.Chart.register(
   import_chart.BarController,
   import_chart.LineController
 );
-function BarChart({ labels, datasets, height }) {
+import_chart.Chart.defaults.font.family = "Vazir, sans-serif";
+function BarChart({
+  labels,
+  datasets,
+  height,
+  yAxisMin,
+  yAxisMax,
+  beginAtZero = true,
+  logarithmic = false,
+  minBarLength = 0
+}) {
+  const chartRef = (0, import_react.useRef)(null);
+  const [fontLoaded, setFontLoaded] = (0, import_react.useState)(false);
+  (0, import_react.useEffect)(() => {
+    let isMounted = true;
+    const loadFont = async () => {
+      if (typeof document !== "undefined" && document.fonts) {
+        try {
+          await document.fonts.load("16px Vazir");
+          await document.fonts.ready;
+        } catch (e) {
+        }
+        if (isMounted) {
+          setFontLoaded(true);
+          setTimeout(() => {
+            if (chartRef.current) {
+              chartRef.current.update();
+            }
+          }, 100);
+        }
+      } else {
+        if (isMounted) setFontLoaded(true);
+      }
+    };
+    loadFont();
+    return () => {
+      isMounted = false;
+    };
+  }, []);
+  const getVisibleData = () => {
+    if (!chartRef.current) return [];
+    return datasets.reduce((acc, ds, i) => {
+      if ((ds.type === void 0 || ds.type === "bar") && chartRef.current && typeof chartRef.current.isDatasetVisible === "function" && chartRef.current.isDatasetVisible(i)) {
+        ds.data.forEach((v) => {
+          if (typeof v === "number" && v > 0) acc.push(v);
+        });
+      }
+      return acc;
+    }, []);
+  };
+  let autoMin = yAxisMin;
+  let autoMax = yAxisMax;
+  if (logarithmic && yAxisMin === void 0 && yAxisMax === void 0) {
+    const visibleData = getVisibleData();
+    if (visibleData.length) {
+      const minVal = Math.min(...visibleData);
+      const maxVal = Math.max(...visibleData);
+      autoMin = minVal < 1 ? 0.5 : minVal * 0.7;
+      autoMax = minVal === maxVal ? maxVal * 1.2 : maxVal * 1.1;
+    }
+  }
+  (0, import_react.useEffect)(() => {
+    if (!logarithmic || yAxisMin !== void 0 || yAxisMax !== void 0) return;
+    if (!chartRef.current) return;
+    const handler = () => {
+      const visibleData = getVisibleData();
+      if (visibleData.length && chartRef.current && chartRef.current.options && chartRef.current.options.scales && chartRef.current.options.scales.y) {
+        const minVal = Math.min(...visibleData);
+        const maxVal = Math.max(...visibleData);
+        chartRef.current.options.scales.y.min = minVal < 1 ? 0.5 : minVal * 0.7;
+        chartRef.current.options.scales.y.max = minVal === maxVal ? maxVal * 1.2 : maxVal * 1.1;
+        chartRef.current.update();
+      }
+    };
+    chartRef.current?.canvas?.addEventListener("click", handler);
+    return () => {
+      chartRef.current?.canvas?.removeEventListener("click", handler);
+    };
+  }, [logarithmic, yAxisMin, yAxisMax, datasets]);
   const options = {
     responsive: true,
     maintainAspectRatio: false,
     scales: {
       y: {
+        type: logarithmic ? "logarithmic" : "linear",
+        ...yAxisMin === void 0 && yAxisMax === void 0 && !logarithmic && {
+          beginAtZero
+        },
+        ...autoMin !== void 0 && { min: autoMin },
+        ...autoMax !== void 0 && { max: autoMax },
         ticks: {
           font: {
-            family: "'Vazir', sans-serif",
+            family: "Vazir, sans-serif",
             size: 14
+          },
+          ...logarithmic && {
+            callback: function(value) {
+              const numValue = Number(value);
+              if (numValue === 0) return null;
+              const log10 = Math.log10(numValue);
+              if (Math.abs(log10 - Math.round(log10)) < 1e-4) {
+                if (numValue >= 1e6) return (numValue / 1e6).toFixed(1) + "M";
+                if (numValue >= 1e3) return (numValue / 1e3).toFixed(1) + "K";
+                return numValue;
+              }
+              return null;
+            }
           }
         }
       },
@@ -70,7 +169,7 @@ function BarChart({ labels, datasets, height }) {
         ticks: {
           autoSkip: false,
           font: {
-            family: "'Vazir', sans-serif",
+            family: "Vazir, sans-serif",
             size: 13
           }
         }
@@ -83,11 +182,11 @@ function BarChart({ labels, datasets, height }) {
       },
       tooltip: {
         bodyFont: {
-          family: "'Vazir', sans-serif",
+          family: "Vazir, sans-serif",
           size: 14
         },
         titleFont: {
-          family: "'Vazir', sans-serif",
+          family: "Vazir, sans-serif",
           size: 16
         }
       },
@@ -106,7 +205,7 @@ function BarChart({ labels, datasets, height }) {
           usePointStyle: true,
           font: {
             size: 16,
-            family: "'Vazir', sans-serif"
+            family: "Vazir, sans-serif"
           },
           boxWidth: 40,
           paddingBottom: 10
@@ -114,16 +213,22 @@ function BarChart({ labels, datasets, height }) {
       }
     }
   };
-  return /* @__PURE__ */ React.createElement(import_material.Box, { height: height ?? 600 }, /* @__PURE__ */ React.createElement(import_react_chartjs_2.Chart, { type: "bar", data: { labels, datasets }, options }));
+  const processedDatasets = datasets.map((ds) => ({
+    ...ds,
+    minBarLength
+  }));
+  return /* @__PURE__ */ React.createElement(import_material.Box, { height: height ?? 600 }, fontLoaded && /* @__PURE__ */ React.createElement(import_react_chartjs_2.Chart, { ref: chartRef, type: "bar", data: { labels, datasets: processedDatasets }, options }));
 }
 
 // src/charts/pie/index.tsx
 var import_react_chartjs_22 = require("react-chartjs-2");
 var import_chart2 = require("chart.js");
+var import_react2 = require("react");
 var import_material2 = require("@mui/material");
 var import_image = __toESM(require("next/image"));
 var import_chartjs_plugin_datalabels = __toESM(require("chartjs-plugin-datalabels"));
 import_chart2.Chart.register(import_chart2.ArcElement, import_chart2.Tooltip, import_chart2.Legend, import_chartjs_plugin_datalabels.default);
+import_chart2.Chart.defaults.font.family = "Vazir, sans-serif";
 function PieChart({
   labels,
   datasets,
@@ -133,18 +238,83 @@ function PieChart({
   showDataLabels = false,
   showPercentage = false
 }) {
-  const options = {
+  const chartRef = (0, import_react2.useRef)(null);
+  const [dataLabels, setDataLabels] = (0, import_react2.useState)([]);
+  const containerRef = (0, import_react2.useRef)(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);
+  };
+  (0, import_react2.useEffect)(() => {
+    if (!showDataLabels) {
+      setDataLabels([]);
+      return;
+    }
+    const timeout = setTimeout(() => {
+      calculateLabels();
+    }, 500);
+    return () => clearTimeout(timeout);
+  }, [datasets, showDataLabels, showPercentage]);
+  (0, import_react2.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 = (0, import_react2.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
         }
       },
@@ -156,7 +326,7 @@ function PieChart({
           // رنگ متن legend را نرم‌تر می‌کند
           font: {
             size: 16,
-            family: "'Vazir', sans-serif"
+            family: "Vazir, sans-serif"
           },
           boxWidth: 40,
           paddingBottom: 10,
@@ -187,38 +357,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",
@@ -242,16 +385,37 @@ function PieChart({
       )
     );
   };
-  return /* @__PURE__ */ React.createElement(import_material2.Box, { height: height ?? 600, sx: { position: "relative" } }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(import_material2.Box, { ref: containerRef, height: height ?? 600, sx: { position: "relative" } }, /* @__PURE__ */ React.createElement(
     import_react_chartjs_22.Pie,
     {
+      ref: chartRef,
       data: {
         labels,
         datasets
       },
       options
     }
-  ), !disableLogo && /* @__PURE__ */ React.createElement(
+  ), showDataLabels && dataLabels.map((label, index) => /* @__PURE__ */ React.createElement(
+    import_material2.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: {