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 = () => {
    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;