LFFE-8 Merge branch 'feature/LFFE-8_implemention_of_charts' into 'develop'

package.json

@@ -19,6 +19,7 @@
     "@mui/icons-material": "^5.11.16",
     "@mui/material": "^5.12.0",
     "@mui/x-date-pickers": "^6.9.2",
+    "apexcharts": "^3.44.0",
     "axios": "^1.4.0",
     "colord": "^2.9.3",
     "date-fns-jalali": "^2.13.0-0",
@@ -38,6 +39,7 @@
     "nextjs-progressbar": "^0.0.16",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
+    "react-apexcharts": "^1.4.1",
     "react-dom": "^18.2.0",
     "react-toastify": "^9.1.3",
     "sass": "^1.62.0",

public/locales/fa/chart.js

@@ -0,0 +1,63 @@
+export const FA_CHART_LOCALIZATION = {
+    "name": "fa",
+    "options": {
+        "months": [
+            "فروردین",
+            "اردیبهشت",
+            "خرداد",
+            "تیر",
+            "مرداد",
+            "شهریور",
+            "مهر",
+            "آبان",
+            "آذر",
+            "دی",
+            "بهمن",
+            "اسفند"
+        ],
+        "shortMonths": [
+            "فرو",
+            "ارد",
+            "خرد",
+            "تیر",
+            "مرد",
+            "شهر",
+            "مهر",
+            "آبا",
+            "آذر",
+            "دی",
+            "بهمـ",
+            "اسفـ"
+        ],
+        "days": [
+            "یکشنبه",
+            "دوشنبه",
+            "سه شنبه",
+            "چهارشنبه",
+            "پنجشنبه",
+            "جمعه",
+            "شنبه"
+        ],
+        "shortDays": [
+            "ی",
+            "د",
+            "س",
+            "چ",
+            "پ",
+            "ج",
+            "ش"
+        ],
+        "toolbar": {
+            "exportToSVG": "دانلود SVG",
+            "exportToPNG": "دانلود PNG",
+            "exportToCSV": "دانلود CSV",
+            "menu": "منو",
+            "selection": "انتخاب",
+            "selectionZoom": "بزرگنمایی انتخابی",
+            "zoomIn": "بزرگنمایی",
+            "zoomOut": "کوچکنمایی",
+            "pan": "پیمایش",
+            "reset": "بازنشانی بزرگنمایی"
+        }
+    }
+}

src/components/dashboard/first/index.jsx

@@ -1,7 +1,7 @@
 import DashboardLayouts from "@/layouts/dashboardLayouts";
 
 const DashboardFirstComponent = () => {
-    return <DashboardLayouts></DashboardLayouts>;
+    return <DashboardLayouts></DashboardLayouts>
 };
 
 export default DashboardFirstComponent;

src/core/components/Chart.jsx

@@ -0,0 +1,20 @@
+import dynamic from "next/dynamic";
+import useLanguage from "@/lib/app/hooks/useLanguage";
+
+const ApexChart = dynamic(() => import("react-apexcharts"), {ssr: false});
+
+const Chart = ({type, series, specialOption}) => {
+    const {languageApp, languageList} = useLanguage();
+    const chartLang = languageList.find((item) => item.key == languageApp).chartLocalization
+    const options = {
+        chart: {
+            locales: [chartLang],
+            defaultLocale: languageApp,
+            fontFamily: languageList[0].fontFamily
+        },
+        ...(specialOption ? specialOption : {})
+    }
+    return <ApexChart type={type} options={options} series={series} width="100%" height="100%"/>
+};
+
+export default Chart; 

src/lib/app/contexts/language.jsx

@@ -1,4 +1,5 @@
 import {FA_DATATABLE_LOCALIZATION} from "&/locales/fa/datatable";
+import {FA_CHART_LOCALIZATION} from "&/locales/fa/chart";
 import {useRouter} from "next/router";
 import {createContext, useEffect, useState} from "react";
 import useUser from "../hooks/useUser";
@@ -14,6 +15,7 @@ export const LanguageProvider = ({children}) => {
             name: "فارسی",
             fontFamily: `IRANSans, sans-serif`,
             tableLocalization: FA_DATATABLE_LOCALIZATION,
+            chartLocalization: FA_CHART_LOCALIZATION
         }
     ];
     const {user, userChangedLanguage, changeLanguageState} = useUser();