
<template>
  <div>
    <apexchart
      height="400"
      :options="salesByCategory"
      :series="salesByCategorySeries"
      class="bg-white dark:bg-black rounded-lg overflow-hidden"
    >
      <!-- loader -->
      <div
        class="min-h-[460px] grid place-content-center bg-white-light/30 dark:bg-dark dark:bg-opacity-[0.08]"
      >
        <span
          class="animate-spin border-2 border-black dark:border-white !border-l-transparent rounded-full w-5 h-5 inline-flex"
        ></span>
      </div>
    </apexchart>
  </div>
</template>

<script>
export default {
  name: "alarmCalcul",
  computed: {},
  methods: {},
  data() {
    return {
      salesByCategory: {
            chart: {
                type: 'donut',
                height: 400,
                fontFamily: 'Nunito, sans-serif',
            },
            dataLabels: {
                enabled: false,
            },
            stroke: {
                show: true,
                width: 25,
                colors: '#fff',
            },
            colors:['#e2a03f', '#5c1ac3', '#e7515a'],
            legend: {
                position: 'bottom',
                horizontalAlign: 'center',
                fontSize: '14px',
                markers: {
                    width: 10,
                    height: 10,
                    offsetX: -2,
                },
                height: 50,
                offsetY: 20,
            },
            plotOptions: {
                pie: {
                    donut: {
                        size: '65%',
                        background: 'transparent',
                        labels: {
                            show: true,
                            name: {
                                show: true,
                                fontSize: '29px',
                                offsetY: -10,
                            },
                            value: {
                                show: true,
                                fontSize: '26px',
                                color: '#bfc9d4',
                                offsetY: 16,
                                formatter: (val) => {
                                    return val;
                                },
                            },
                            total: {
                                show: true,
                                label: 'Total',
                                color: '#888ea8',
                                fontSize: '29px',
                                formatter: (w) => {
                                    return w.globals.seriesTotals.reduce(function (a, b) {
                                        return a + b;
                                    }, 0);
                                },
                            },
                        },
                    },
                },
            },
            labels: ['Apparel', 'Sports', 'Others'],
            states: {
                hover: {
                    filter: {
                        type: 'none',
                        value: 0.15,
                    },
                },
                active: {
                    filter: {
                        type: 'none',
                        value: 0.15,
                    },
                },
            },
        },
      salesByCategorySeries: [985, 737, 270],
    };
  },
};
</script>

<style scoped>
</style>
