/**
 * Template Name: Inspinia - Multipurpose Admin & Dashboard Template
 * By (Author): WebAppLayers
 * Module/App (File Name): Chart Apex Bar
 */

//
// BASIC BAR CHART
//
new CustomApexChart({
    selector: "#basic-bar",
    options: () => ({
        chart: {
            height: 350,
            type: "bar",
            toolbar: {
                show: false,
            },
        },
        plotOptions: {
            bar: {
                horizontal: true,
            },
        },
        dataLabels: {
            enabled: false,
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + "k" + " Orders"
                },
            },
        },
        series: [
            {
                name: "iPhone 16",
                data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380],
            },
        ],
        colors: [theme("chart-primary")],
        xaxis: {
            categories: ["South Korea", "Canada", "United Kingdom", "Netherlands", "Italy", "France", "Japan", "United States", "China", "Germany"],
            axisBorder: {
                show: false,
            },
        },
        states: {
            hover: {
                filter: "none",
            },
        },
        grid: {
            borderColor: [theme("chart-order-color")],
            padding: {
                top: -20,
                right: 0,
                bottom: -10,
                left: 0,
            },
        },
    }),
})

//
// GROUPED BAR CHART
//
new CustomApexChart({
    selector: "#grouped-bar",
    options: () => ({
        chart: {
            height: 350,
            type: "bar",
            toolbar: {
                show: false,
            },
        },
        plotOptions: {
            bar: {
                horizontal: true,
                borderRadius: 6,
                borderRadiusApplication: "end",
                dataLabels: {
                    position: "top",
                },
            },
        },
        dataLabels: {
            enabled: true,
            offsetX: 15,
            style: {
                fontSize: "12px",
                colors: [theme("body-color")],
            },
        },
        colors: [theme("chart-primary"), theme("chart-secondary")],
        stroke: {
            show: true,
            width: 2,
            colors: [theme("bg-card")],
        },
        series: [
            {
                name: "iPhone 16",
                data: [44, 55, 41, 64, 22, 43, 21],
            },
            {
                name: "iPhone 16 Pro",
                data: [53, 32, 33, 52, 13, 44, 32],
            },
        ],
        xaxis: {
            categories: [2019, 2020, 2021, 2022, 2023, 2024, 2025],
            axisBorder: {
                show: false,
            },
        },
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + " Sales"
                },
            },
        },
        legend: {
            offsetY: 5,
        },
        states: {
            hover: {
                filter: "none",
            },
        },
        grid: {
            borderColor: [theme("chart-order-color")],
            padding: {
                top: -20, // You can use negative or positive values here
                right: 0,
                bottom: -10,
                left: 0,
            },
        },
    }),
})

//
// STACKED BAR CHART
//
new CustomApexChart({
    selector: "#stacked-bar",
    options: () => ({
        chart: {
            height: 350,
            type: "bar",
            stacked: true,
            toolbar: {
                show: false,
            },
        },
        plotOptions: {
            bar: {
                horizontal: true,
            },
        },
        stroke: {
            show: false,
        },
        series: [
            {
                name: "Marine Sprite",
                data: [44, 55, 41, 37, 22, 43, 21],
            },
            {
                name: "Striking Calf",
                data: [53, 32, 33, 52, 13, 43, 32],
            },
            {
                name: "Tank Picture",
                data: [12, 17, 11, 9, 15, 11, 20],
            },
            {
                name: "Bucket Slope",
                data: [9, 7, 5, 8, 6, 9, 4],
            },
            {
                name: "Reborn Kid",
                data: [25, 12, 19, 32, 25, 24, 10],
            },
        ],
        xaxis: {
            categories: [2019, 2020, 2021, 2022, 2023, 2024, 2025],
            labels: {
                formatter: function (val) {
                    return val + "K"
                },
            },
            axisBorder: {
                show: false,
            },
        },
        yaxis: {
            title: {
                text: undefined,
            },
        },
        colors: [theme("chart-primary"), theme("chart-secondary"), theme("chart-delta"), theme("chart-alpha"), theme("chart-zeta")],
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + "K"
                },
            },
        },
        fill: {
            opacity: 1,
        },
        states: {
            hover: {
                filter: "none",
            },
        },
        legend: {
            position: "top",
            horizontalAlign: "center",
            offsetY: -7,
        },
        grid: {
            borderColor: [theme("chart-order-color")],
            padding: {
                top: -30, // You can use negative or positive values here
                right: 0,
                bottom: -15,
                left: 0,
            },
        },
    }),
})

//
// 100% STACKED BAR CHART
//
new CustomApexChart({
    selector: "#full-stacked-bar",
    options: () => ({
        chart: {
            height: 350,
            type: "bar",
            stacked: true,
            stackType: "100%",
            toolbar: {
                show: false,
            },
        },
        plotOptions: {
            bar: {
                horizontal: true,
            },
        },
        stroke: {
            width: 1,
            colors: ["transparent"],
        },
        series: [
            {
                name: "Marine Sprite",
                data: [44, 55, 41, 37, 22, 43, 21],
            },
            {
                name: "Striking Calf",
                data: [53, 32, 33, 52, 13, 43, 32],
            },
            {
                name: "Tank Picture",
                data: [12, 17, 11, 9, 15, 11, 20],
            },
            {
                name: "Bucket Slope",
                data: [9, 7, 5, 8, 6, 9, 4],
            },
            {
                name: "Reborn Kid",
                data: [25, 12, 19, 32, 25, 24, 10],
            },
        ],
        xaxis: {
            categories: [2019, 2020, 2021, 2022, 2023, 2024, 2025],
            axisBorder: {
                show: false,
            },
        },
        colors: [theme("chart-delta"), theme("chart-beta"), theme("chart-primary"), theme("chart-secondary"), theme("chart-zeta")],
        tooltip: {
            y: {
                formatter: function (val) {
                    return val + "K"
                },
            },
        },
        fill: {
            opacity: 1,
        },
        states: {
            hover: {
                filter: "none",
            },
        },
        legend: {
            position: "top",
            horizontalAlign: "center",
            offsetY: -7,
        },
        grid: {
            borderColor: [theme("chart-order-color")],
            padding: {
                top: -30, // You can use negative or positive values here
                right: 0,
                bottom: -15,
                left: 0,
            },
        },
    }),
})

//
// Grouped Stacked Bars
//
new CustomApexChart({
    selector: "#grouped-stacked-bar",
    options: () => ({
        series: [
            {
                name: "Q1 Budget",
                group: "budget",
                data: [44000, 55000, 41000, 67000, 22000],
            },
            {
                name: "Q1 Actual",
                group: "actual",
                data: [48000, 50000, 40000, 65000, 25000],
            },
            {
                name: "Q2 Budget",
                group: "budget",
                data: [13000, 36000, 20000, 8000, 13000],
            },
            {
                name: "Q2 Actual",
                group: "actual",
                data: [20000, 40000, 25000, 10000, 12000],
            },
        ],
        chart: {
            type: "bar",
            height: 350,
            stacked: true,
            toolbar: {
                show: false,
            },
        },
        stroke: {
            width: 1,
            colors: ["#fff"],
        },
        dataLabels: {
            formatter: (val) => {
                return val / 1000 + "K"
            },
        },
        plotOptions: {
            bar: {
                horizontal: true,
            },
        },
        xaxis: {
            categories: ["Online advertising", "Sales Training", "Print advertising", "Catalogs", "Meetings"],
            labels: {
                formatter: (val) => {
                    return val / 1000 + "K"
                },
            },
        },
        fill: {
            opacity: 1,
        },
        colors: [theme("chart-primary"), theme("chart-secondary"), theme("chart-delta"), theme("chart-alpha")],
        legend: {
            position: "top",
            horizontalAlign: "center",
            offsetY: -7,
        },
        grid: {
            borderColor: [theme("chart-order-color")],
            padding: {
                top: -20, // You can use negative or positive values here
                right: 0,
                bottom: -15,
                left: 0,
            },
        },
    }),
})

//
// BAR WITH NEGATIVE VALUES
//
new CustomApexChart({
    selector: "#negative-bar",
    options: () => ({
        chart: {
            height: 350,
            type: "bar",
            stacked: true,
            toolbar: {
                show: false,
            },
        },
        colors: [theme("chart-alpha"), theme("chart-alpha")],
        plotOptions: {
            bar: {
                horizontal: true,
                barHeight: "80%",
            },
        },
        dataLabels: {
            enabled: false,
        },
        stroke: {
            width: 1,
            colors: ["transparent"],
        },
        series: [
            {
                name: "Male",
                data: [0.4, 0.65, 0.76, 0.88, 1.5, 2.1, 2.9, 3.8, 3.9, 4.2, 4, 4.3, 4.1, 4.2, 4.5, 3.9, 3.5, 3],
            },
            {
                name: "Females",
                data: [-0.8, -1.05, -1.06, -1.18, -1.4, -2.2, -2.85, -3.7, -3.96, -4.22, -4.3, -4.4, -4.1, -4, -4.1, -3.4, -3.1, -2.8],
            },
        ],
        yaxis: {
            min: -5,
            max: 5,
            title: {
                text: "Age",
                style: {
                    fontSize: "14px", // Font size
                    fontWeight: 600, // Font weight (600 is semi-bold)
                },
            },
        },
        tooltip: {
            shared: false,
            x: {
                formatter: function (val) {
                    return val
                },
            },
            y: {
                formatter: function (val) {
                    return Math.abs(val) + "%"
                },
            },
        },
        xaxis: {
            categories: ["85+", "80-84", "75-79", "70-74", "65-69", "60-64", "55-59", "50-54", "45-49", "40-44", "35-39", "30-34", "25-29", "20-24", "15-19", "10-14", "5-9", "0-4"],
            title: {
                text: "Percent",
                style: {
                    fontSize: "14px", // Font size
                    fontWeight: 600, // Font weight (600 is semi-bold)
                },
            },
            labels: {
                formatter: function (val) {
                    return Math.abs(Math.round(val)) + "%"
                },
            },
            axisBorder: {
                show: false,
            },
        },
        legend: {
            offsetY: 7,
        },
        grid: {
            borderColor: [theme("chart-order-color")],
            xaxis: {
                showLines: false,
            },
            padding: {
                top: -20, // You can use negative or positive values here
                right: 0,
                bottom: -15,
                left: 0,
            },
        },
    }),
})

//
// Reversed Bar Chart
//
new CustomApexChart({
    selector: "#reversed-bar",
    options: () => ({
        series: [
            {
                data: [400, 430, 448, 470, 540, 580, 690],
            },
        ],
        chart: {
            type: "bar",
            height: 350,
        },
        colors: [theme("chart-alpha")],
        annotations: {
            xaxis: [
                {
                    x: 500,
                    borderColor: theme("chart-alpha"),
                    label: {
                        borderColor: theme("chart-alpha"),
                        style: {
                            color: "#fff",
                            background: theme("chart-alpha"),
                        },
                        text: "X annotation",
                    },
                },
            ],
            yaxis: [
                {
                    y: "July",
                    y2: "September",
                    label: {
                        text: "Y annotation",
                    },
                },
            ],
        },
        plotOptions: {
            bar: {
                horizontal: true,
            },
        },
        dataLabels: {
            enabled: true,
        },
        xaxis: {
            categories: ["June", "July", "August", "September", "October", "November", "December"],
            axisBorder: {
                show: false,
            },
        },
        grid: {
            borderColor: [theme("chart-order-color")],
            xaxis: {
                lines: {
                    show: true,
                },
            },
            padding: {
                top: -20, // You can use negative or positive values here
                right: 0,
                bottom: -15,
                left: 0,
            },
        },
        yaxis: {
            reversed: true,
            axisTicks: {
                show: true,
            },
        },
    }),
})

//
// BAR WITH IMAGE FILL
//
const labels = Array.apply(null, { length: 39 }).map(function (el, index) {
    return index + 1
})

new CustomApexChart({
    selector: "#image-fill-bar",
    options: () => ({
        chart: {
            height: 350,
            type: "bar",
            toolbar: {
                show: false,
            },
            animations: {
                enabled: false,
            },
        },
        plotOptions: {
            bar: {
                horizontal: true,
            },
        },
        dataLabels: {
            enabled: false,
        },
        colors: [theme("chart-alpha")],
        stroke: {
            colors: ["#fff"],
            width: 0.2,
        },
        series: [
            {
                name: "iPhones",
                data: [2, 4, 3, 4, 3, 5, 5, 6.5, 6, 5, 4, 5, 8, 7, 7, 8, 8, 10, 9, 9, 12, 12, 11, 12, 13, 14, 16, 14, 15, 17, 19, 21, 12, 12, 11, 12, 13, 14, 16, 14, 15, 17, 19, 21],
            },
        ],
        labels: labels,
        yaxis: {
            axisBorder: {
                show: false,
            },
            axisTicks: {
                show: false,
            },
            labels: {
                show: false,
            },
            title: {
                text: "Weight",
                style: {
                    fontSize: "14px", // Change to any size you prefer
                    fontWeight: 600, // Sets font weight
                },
            },
        },
        xaxis: {
            axisBorder: {
                show: false,
            },
        },
        grid: {
            borderColor: [theme("chart-order-color")],
            position: "back",
            padding: {
                top: -20, // You can use negative or positive values here
                right: 0,
                bottom: -15,
                left: 0,
            },
        },
        fill: {
            type: "image",
            opacity: 0.87,
            image: {
                src: ["/images/stock/small-1.jpg"],
                width: 466,
                height: 406,
            },
        },
    }),
})

//
// CUSTOM DATALABELS BAR
//
new CustomApexChart({
    selector: "#datalables-bar",
    options: () => ({
        chart: {
            height: 350,
            type: "bar",
        },
        plotOptions: {
            bar: {
                barHeight: "100%",
                distributed: true,
                horizontal: true,
                dataLabels: {
                    position: "bottom",
                },
            },
        },
        colors: [theme("chart-primary"), theme("chart-secondary"), theme("chart-delta"), theme("chart-alpha"), theme("chart-zeta"), theme("chart-beta"), theme("chart-dark"), theme("chart-secondary"), theme("chart-gamma"), theme("chart-primary")],
        dataLabels: {
            enabled: true,
            textAnchor: "none",
            style: {
                colors: ["#fff"],
            },
            formatter: function (val, opt) {
                return opt.w.globals.labels[opt.dataPointIndex] + ":  " + val
            },
            offsetX: 10,
            offsetY: -1,
            dropShadow: {
                enabled: false,
            },
        },
        series: [
            {
                data: [400, 430, 448, 470, 540, 580, 690, 1100, 1200, 1380],
            },
        ],
        stroke: {
            width: 0,
            colors: ["#fff"],
        },
        xaxis: {
            categories: ["South Korea", "Canada", "United Kingdom", "Netherlands", "Italy", "France", "Japan", "United States", "China", "India"],
            axisBorder: {
                show: false,
            },
        },
        yaxis: {
            labels: {
                show: false,
            },
        },
        grid: {
            borderColor: [theme("chart-order-color")],
            padding: {
                top: -20, // You can use negative or positive values here
                right: 0,
                bottom: -15,
                left: 0,
            },
        },

        tooltip: {
            x: {
                show: false,
            },
            y: {
                title: {
                    formatter: function () {
                        return ""
                    },
                },
            },
        },
    }),
})

//
// PATTERNED BAR CHART
//
new CustomApexChart({
    selector: "#pattern-bar",
    options: () => ({
        chart: {
            height: 350,
            type: "bar",
            stacked: true,
            toolbar: {
                show: false,
            },
            shadow: {
                enabled: true,
                blur: 1,
                opacity: 0.5,
            },
        },
        plotOptions: {
            bar: {
                horizontal: true,
                barHeight: "60%",
            },
        },
        dataLabels: {
            enabled: false,
        },
        stroke: {
            width: 2,
        },
        series: [
            {
                name: "Marine Sprite",
                data: [44, 55, 41, 37, 22, 43, 21],
            },
            {
                name: "Striking Calf",
                data: [53, 32, 33, 52, 13, 43, 32],
            },
            {
                name: "Tank Picture",
                data: [12, 17, 11, 9, 15, 11, 20],
            },
            {
                name: "Bucket Slope",
                data: [9, 7, 5, 8, 6, 9, 4],
            },
        ],
        xaxis: {
            categories: [2019, 2020, 2021, 2022, 2023, 2024, 2025],
            axisBorder: {
                show: false,
            },
        },
        yaxis: {
            title: {
                text: undefined,
            },
        },
        tooltip: {
            shared: false,
            y: {
                formatter: function (val) {
                    return val + "K"
                },
            },
        },
        colors: [theme("chart-primary"), theme("chart-secondary"), theme("chart-delta"), theme("chart-alpha")],
        fill: {
            type: "pattern",
            opacity: 1,
            pattern: {
                style: ["circles", "slantedLines", "verticalLines", "horizontalLines"], // string or array of strings
            },
        },
        states: {
            hover: {
                filter: "none",
            },
        },
        legend: {
            position: "right",
        },
        grid: {
            borderColor: [theme("chart-order-color")],
            padding: {
                top: -20, // You can use negative or positive values here
                right: 0,
                bottom: -5,
                left: 0,
            },
        },
        responsive: [
            {
                breakpoint: 600,
                options: {
                    legend: {
                        show: false,
                    },
                },
            },
        ],
    }),
})

//
// Bar with Markers
//
new CustomApexChart({
    selector: "#bar-markers",
    options: () => ({
        series: [
            {
                name: "Actual",
                data: [
                    {
                        x: "2017",
                        y: 12,
                        goals: [
                            {
                                name: "Expected",
                                value: 14,
                                strokeWidth: 2,
                                strokeDashArray: 2,
                                strokeColor: theme("chart-secondary"),
                            },
                        ],
                    },
                    {
                        x: "2018",
                        y: 44,
                        goals: [
                            {
                                name: "Expected",
                                value: 54,
                                strokeWidth: 5,
                                strokeHeight: 10,
                                strokeColor: theme("chart-secondary"),
                            },
                        ],
                    },
                    {
                        x: "2019",
                        y: 54,
                        goals: [
                            {
                                name: "Expected",
                                value: 52,
                                strokeWidth: 10,
                                strokeHeight: 0,
                                strokeLineCap: "round",
                                strokeColor: theme("chart-secondary"),
                            },
                        ],
                    },
                    {
                        x: "2020",
                        y: 66,
                        goals: [
                            {
                                name: "Expected",
                                value: 61,
                                strokeWidth: 10,
                                strokeHeight: 0,
                                strokeLineCap: "round",
                                strokeColor: theme("chart-secondary"),
                            },
                        ],
                    },
                    {
                        x: "2021",
                        y: 81,
                        goals: [
                            {
                                name: "Expected",
                                value: 66,
                                strokeWidth: 10,
                                strokeHeight: 0,
                                strokeLineCap: "round",
                                strokeColor: theme("chart-secondary"),
                            },
                        ],
                    },
                    {
                        x: "2022",
                        y: 67,
                        goals: [
                            {
                                name: "Expected",
                                value: 70,
                                strokeWidth: 5,
                                strokeHeight: 10,
                                strokeColor: theme("chart-secondary"),
                            },
                        ],
                    },
                ],
            },
        ],
        chart: {
            height: 350,
            type: "bar",
        },
        plotOptions: {
            bar: {
                horizontal: true,
            },
        },
        colors: [theme("chart-primary"), theme("chart-secondary"), theme("chart-delta"), theme("chart-alpha")],
        dataLabels: {
            dataLabels: {
                formatter: function (val, opt) {
                    var goals = opt.w.config.series[opt.seriesIndex].data[opt.dataPointIndex].goals

                    // if (goals && goals.length) {
                    //   return `${val} / ${goals[0].value}`
                    // }
                    return val
                },
            },
        },
        legend: {
            show: true,
            showForSingleSeries: true,
            customLegendItems: ["Actual", "Expected"],
        },
        xaxis: {
            axisBorder: {
                show: false,
            },
        },
        grid: {
            borderColor: [theme("chart-order-color")],
            padding: {
                top: -20, // You can use negative or positive values here
                right: 0,
                bottom: -15,
                left: 0,
            },
        },
    }),
})
