LFFE-8 Localization of charts and make a HOC component

src/components/dashboard/first/index.jsx

@@ -1,7 +1,96 @@
 import DashboardLayouts from "@/layouts/dashboardLayouts";
+import Chart from "@/core/components/Chart";
+import {Box} from "@mui/material";
+import useLanguage from "@/lib/app/hooks/useLanguage";
 
 const DashboardFirstComponent = () => {
-    return <DashboardLayouts></DashboardLayouts>;
+    const {languageList} = useLanguage();
+    const specialOption = {
+        title: {
+            text: 'چارت بورس',
+            align: 'center',
+            style: {
+                fontSize: '17px',
+                fontWeight: 500
+            }
+        },
+        toolbar: {
+            style: {
+                justifyContent: 'center',
+            }
+        },
+        plotOptions: {
+            treemap: {
+                enableShades: true,
+                shadeIntensity: 0.5,
+                reverseNegativeShade: true,
+            }
+        },
+        colors: [
+            '#421243',
+            '#3B93A5',
+            '#F7B844',
+            '#ADD8C7',
+            '#EC3C65',
+            '#CDD7B6',
+            '#C1F666',
+            '#D43F97',
+            '#1E5D8C',
+            '#7F94B0',
+        ],
+    }
+    const series = [{
+        name: "finance",
+        data: [
+            {
+                x: 'INTC',
+                y: 1.2
+            },
+            {
+                x: 'GS',
+                y: 0.4
+            },
+            {
+                x: 'CVX',
+                y: -1.4
+            },
+            {
+                x: 'GE',
+                y: 2.7
+            },
+            {
+                x: 'CAT',
+                y: -0.3
+            },
+            {
+                x: 'RTX',
+                y: 5.1
+            },
+            {
+                x: 'CSCO',
+                y: -2.3
+            },
+            {
+                x: 'JNJ',
+                y: 2.1
+            },
+            {
+                x: 'PG',
+                y: 0.3
+            },
+            {
+                x: 'TRV',
+                y: 0.12
+            }
+        ]
+    }]
+    return (
+        <DashboardLayouts>
+            <Box sx={{width: "100%", height: "500px", position: "relative"}}>
+                <Chart type="treemap" series={series} specialOption={specialOption}/>
+            </Box>
+        </DashboardLayouts>
+    );
 };
 
 export default DashboardFirstComponent;

src/core/components/Chart.jsx

@@ -0,0 +1,21 @@
+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 fa = languageList.find((item) => item.key == languageApp).chartLocalization
+    const options = {
+        chart: {
+            locales: [fa],
+            defaultLocale: 'fa',
+            fontFamily: languageList[0].fontFamily
+        },
+        ...(specialOption ? specialOption : {})
+    }
+    console.log(options)
+    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();