@mamrp/components 1.7.30 → 1.7.32

package/dist/charts/index.d.mts

@@ -1,145 +1,23 @@
 import * as React from 'react';
 
+interface Dataset {
+    label: string;
+    data: (number | null)[];
+    backgroundColor: string;
+    borderColor?: string;
+    borderWidth?: number;
+    type?: "line";
+    order?: number;
+    tension?: number;
+    pointRadius?: number;
+    fill?: boolean;
+}
 interface Props$1 {
     labels: string[];
-    datasets: {
-        label: string;
-        data: (number | null)[];
-        backgroundColor: string;
-        borderColor?: string;
-        borderWidth?: number;
-        type?: "line";
-        order?: number;
-        tension?: number;
-        pointRadius?: number;
-        fill?: boolean;
-    }[];
+    datasets: Dataset[];
     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)
- *
- * @component BarChart
- *
- * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای محور افقی (X).
- * @param {Array<{
- *   label: string,
- *   data: number[],
- *   backgroundColor: string,
- *   borderColor?: string,
- *   borderWidth?: number,
- *   type?: "line",
- *   order?: number,
- *   tension?: number,
- *   pointRadius?: number,
- *   fill?: boolean
- * }>} datasets - آرایه‌ای از آبجکت‌های داده برای هر سری نمودار.
- *   - label: عنوان داده‌ها (نمایش در legend)
- *   - data: آرایه‌ای از مقادیر هر سری
- *   - backgroundColor: رنگ میله یا خط
- *   - borderColor: (اختیاری) رنگ خط دور میله یا خط
- *   - borderWidth: (اختیاری) ضخامت خط دور میله یا خط
- *   - type: (اختیاری) اگر "line" باشد، سری به صورت خطی نمایش داده می‌شود (نمودار ترکیبی)
- *   - order: (اختیاری) ترتیب رسم سری (سری با order بالاتر روی بقیه قرار می‌گیرد)
- *   - tension: (اختیاری) میزان خمیدگی خط (برای سری‌های خطی)
- *   - pointRadius: (اختیاری) شعاع نقاط روی خط (برای سری‌های خطی)
- *   - 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 با قابلیت شخصی‌سازی کامل است.
- * - پشتیبانی از فونت وزیر و راست‌چین
- * - ریسپانسیو و مناسب صفحات فارسی
- * - امکان نمایش چند سری داده به صورت میله‌ای و خطی همزمان (Combo)
- * - شخصی‌سازی رنگ، ضخامت، ترتیب و استایل هر سری
- * - پشتیبانی از مقیاس لگاریتمی برای داده‌های با اختلاف زیاد
- * - minBarLength برای نمایش داده‌های خیلی کوچک در کنار بزرگ‌ها
- *
- * @returns {JSX.Element} یک نمودار میله‌ای یا ترکیبی با داده‌های ورودی
- *
- * @example
- * ```jsx
- * // نمودار ساده
- * <BarChart
- *   labels={["شنبه", "یکشنبه", "دوشنبه"]}
- *   datasets={[
- *     {
- *       label: "فروش",
- *       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: [100, 150, 120],
- *       backgroundColor: "rgba(75,192,192,0.7)",
- *     },
- *   ]}
- *   yAxisMin={80}
- *   yAxisMax={200}
- *   beginAtZero={false}
- *   height={400}
- * />
- * ```
- */
-declare function BarChart({ labels, datasets, height, yAxisMin, yAxisMax, beginAtZero, logarithmic, minBarLength, }: Props$1): React.JSX.Element;
+declare function BarChart({ labels, datasets, height }: Props$1): React.JSX.Element;
 
 interface Props {
     labels: string[];

package/dist/charts/index.d.ts

@@ -1,145 +1,23 @@
 import * as React from 'react';
 
+interface Dataset {
+    label: string;
+    data: (number | null)[];
+    backgroundColor: string;
+    borderColor?: string;
+    borderWidth?: number;
+    type?: "line";
+    order?: number;
+    tension?: number;
+    pointRadius?: number;
+    fill?: boolean;
+}
 interface Props$1 {
     labels: string[];
-    datasets: {
-        label: string;
-        data: (number | null)[];
-        backgroundColor: string;
-        borderColor?: string;
-        borderWidth?: number;
-        type?: "line";
-        order?: number;
-        tension?: number;
-        pointRadius?: number;
-        fill?: boolean;
-    }[];
+    datasets: Dataset[];
     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)
- *
- * @component BarChart
- *
- * @param {string[]} labels - آرایه‌ای از برچسب‌ها برای محور افقی (X).
- * @param {Array<{
- *   label: string,
- *   data: number[],
- *   backgroundColor: string,
- *   borderColor?: string,
- *   borderWidth?: number,
- *   type?: "line",
- *   order?: number,
- *   tension?: number,
- *   pointRadius?: number,
- *   fill?: boolean
- * }>} datasets - آرایه‌ای از آبجکت‌های داده برای هر سری نمودار.
- *   - label: عنوان داده‌ها (نمایش در legend)
- *   - data: آرایه‌ای از مقادیر هر سری
- *   - backgroundColor: رنگ میله یا خط
- *   - borderColor: (اختیاری) رنگ خط دور میله یا خط
- *   - borderWidth: (اختیاری) ضخامت خط دور میله یا خط
- *   - type: (اختیاری) اگر "line" باشد، سری به صورت خطی نمایش داده می‌شود (نمودار ترکیبی)
- *   - order: (اختیاری) ترتیب رسم سری (سری با order بالاتر روی بقیه قرار می‌گیرد)
- *   - tension: (اختیاری) میزان خمیدگی خط (برای سری‌های خطی)
- *   - pointRadius: (اختیاری) شعاع نقاط روی خط (برای سری‌های خطی)
- *   - 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 با قابلیت شخصی‌سازی کامل است.
- * - پشتیبانی از فونت وزیر و راست‌چین
- * - ریسپانسیو و مناسب صفحات فارسی
- * - امکان نمایش چند سری داده به صورت میله‌ای و خطی همزمان (Combo)
- * - شخصی‌سازی رنگ، ضخامت، ترتیب و استایل هر سری
- * - پشتیبانی از مقیاس لگاریتمی برای داده‌های با اختلاف زیاد
- * - minBarLength برای نمایش داده‌های خیلی کوچک در کنار بزرگ‌ها
- *
- * @returns {JSX.Element} یک نمودار میله‌ای یا ترکیبی با داده‌های ورودی
- *
- * @example
- * ```jsx
- * // نمودار ساده
- * <BarChart
- *   labels={["شنبه", "یکشنبه", "دوشنبه"]}
- *   datasets={[
- *     {
- *       label: "فروش",
- *       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: [100, 150, 120],
- *       backgroundColor: "rgba(75,192,192,0.7)",
- *     },
- *   ]}
- *   yAxisMin={80}
- *   yAxisMax={200}
- *   beginAtZero={false}
- *   height={400}
- * />
- * ```
- */
-declare function BarChart({ labels, datasets, height, yAxisMin, yAxisMax, beginAtZero, logarithmic, minBarLength, }: Props$1): React.JSX.Element;
+declare function BarChart({ labels, datasets, height }: Props$1): React.JSX.Element;
 
 interface Props {
     labels: string[];

package/dist/charts/index.js

@@ -39,10 +39,10 @@ module.exports = __toCommonJS(charts_exports);
 var React = __toESM(require("react"));
 
 // src/charts/bar/index.tsx
+var import_react = 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,
@@ -55,169 +55,109 @@ import_chart.Chart.register(
   import_chart.BarController,
   import_chart.LineController
 );
-import_chart.Chart.defaults.font.family = "Vazir, sans-serif";
-function BarChart({
-  labels,
-  datasets,
-  height,
-  yAxisMin,
-  yAxisMax,
-  beginAtZero = true,
-  logarithmic = false,
-  minBarLength = 0
-}) {
+function BarChart({ labels, datasets, height }) {
   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;
-    }
+  const [hiddenIndices, setHiddenIndices] = (0, import_react.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;
   }
-  (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,
+    animation: { duration: 500 },
     scales: {
       y: {
-        type: logarithmic ? "logarithmic" : "linear",
-        ...yAxisMin === void 0 && yAxisMax === void 0 && !logarithmic && {
-          beginAtZero
-        },
-        ...autoMin !== void 0 && { min: autoMin },
-        ...autoMax !== void 0 && { max: autoMax },
+        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;
           },
-          ...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;
-            }
-          }
+          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 = import_chart.Chart.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 }
     }
   };
-  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 }));
+  import_chart.Chart.defaults.elements.point.radius = 5;
+  import_chart.Chart.defaults.elements.point.hoverRadius = 9;
+  import_chart.Chart.defaults.elements.point.borderWidth = 0.2;
+  import_chart.Chart.defaults.elements.point.backgroundColor = "red";
+  import_chart.Chart.defaults.elements.point.borderColor = "black";
+  return /* @__PURE__ */ React.createElement(import_material.Box, { height: height ?? 600 }, /* @__PURE__ */ React.createElement(
+    import_react_chartjs_2.Chart,
+    {
+      ref: chartRef,
+      type: "bar",
+      data: {
+        labels,
+        datasets: datasets.map((ds, i) => ({
+          ...ds,
+          hidden: hiddenIndices.has(i)
+        }))
+      },
+      options
+    }
+  ));
 }
 
 // src/charts/pie/index.tsx