import * as echarts from "echarts";

const styleName1 = {
    tooltip: {
        trigger: "item",
        formatter: (params) => {
            if (params.name) {
                return params.name + "=" + params.value;
            }
        },
    },
    title: [
        {
            text: "91%",
            left: "49.2%",
            top: "29%",
            textAlign: "center",
            textStyle: {
                fontSize: "18",
                color: "#000",
                textAlign: "center",
            },
        },
        {
            text: "PG1",
            left: "49%",
            top: "51%",
            textAlign: "center",
            textStyle: {
                fontSize: "13",
                color: "#000",
                textAlign: "center",
            },
        },
    ],
    grid: {
        top: "0",
        left: "0",
        right: "0",
        bottom: "0",
        containLabel: true,
    },
    color: [
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
                offset: 0,
                color: "#00DC59",
            },
            {
                offset: 1,
                color: "#00C798",
            },
        ]),
        new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
                offset: 0,
                color: "#FF9900",
            },
            {
                offset: 1,
                color: "#FFD400",
            },
        ]),
    ],
    series: [
        {
            type: "pie",
            z: 3,
            roundCap: true,
            radius: ["65%", "90%"],
            center: ["50%", "50%"],
            label: {
                show: false,
            },
            labelLine: {
                show: false,
            },
            data: [],
        },
    ],
};

const styleName2 = {
    tooltip: {
        trigger: "item",
    },
    // legend: {
    //     top: "5%",
    //     left: "center",
    // },
    title: {
        text: "Total Location",
        left:'center',
        textStyle: {
            fontSize: 16,
            color: "#197B40",
        },
    },
    color: ["#57B4BA", "#015551", "#FE4F2D"],
    series: [
        {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
                borderColor: "#fff",
                borderWidth: 4,
            },
            label: {
                show: true,
                color:'#fff',
                position: "inside",
                fontWeight: "bold",
                fontSize: 10,
                formatter:`{c}\n{b}`
            },
            labelLine: {
                show: false,
            },
            data: [
                { value: 735, name: "Direct" },
                { value: 580, name: "Email" },
                { value: 484, name: "Union Ads" },
            ],
        },
    ],
};

export const pieOption = { styleName1, styleName2 };
