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;