MAINHACK

Viewing / Editing File: CustomerStatsComponent.vue

<template>
    <LoadingComponent :props="loading" />
    <div class="col-12 xl:col-6">
        <div class="db-card">
            <div class="db-card-header">
                <h3 class="font-semibold text-lg capitalize text-heading">{{ $t('label.customer_stats') }}</h3>
                <div id="customer-range" class="cursor-pointer flex items-center gap-3">
                    <Datepicker hideInputIcon autoApply :enableTimePicker="false" utc="false"
                        :placeholder="$t('label.select_date_range')" @update:modelValue="customerStates"
                        v-model="modelValue" :range="true">
                    </Datepicker>
                </div>
            </div>
            <div class="db-card-body">
                <apexchart height="270" v-if="options" :options="options" :series="options.series"></apexchart>
            </div>
        </div>
    </div>
</template>

this.loading.isActive = true;

this.$store.dispatch("dashboard/customerStates", date).then((res) => {
                this.options = {
                    series: [{
                        name: this.$t('menu.customers'),
                        data: res.data.data.total_customers,
                    }],
                    chart: {
                        type: 'bar',
                        height: 276,
                        parentHeightOffset: 0,
                        zoom: { enabled: false },
                        toolbar: { show: false },
                    },
                    plotOptions: {
                        bar: {
                            horizontal: false,
                            columnWidth: '40%',
                            endingShape: 'rounded'
                        },
                    },
                    stroke: {
                        show: true,
                        width: 2,
                        colors: ['#567DFF']
                    },
                    xaxis: {
                        categories: res.data.data.times,
                    },
                    fill: {
                        opacity: 1
                    },
                    tooltip: {
                        style: {
                            fontSize: '14px',
                            fontFamily: 'inherit',
                        }
                    },
                    colors: ['#567DFF'],
                    grid: { show: false, },
                    yaxis: { show: false },
                    dataLabels: { enabled: false },
                };
                this.loading.isActive = false;
            }).catch((err) => {
                this.loading.isActive = false;
            });
        },
    },
}
</script>

Cancel / Back

[ MAINHACK ]

Viewing / Editing File: CustomerStatsComponent.vue

Server Info

System Features

User Info