Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | 1x 1x 1x | <template>
<BModal
v-model="show"
id="visitors-apex-charts"
title="Visitors"
size="lg"
centered
hide-footer
>
<div class="d-flex flex-column justify-content-center align-items-center">
<div class="d-flex justify-content-start w-100">
<button
class="btn mx-1"
:class="active === 'month' ? 'btn-success' : 'btn-primary'"
v-on:click="byMonth"
>
month
</button>
<button
class="btn btn-primary mx-1"
:class="active === 'half year' ? 'btn-success' : 'btn-primary'"
v-on:click="byHalfYear"
>
half year</button
><button
class="btn btn-primary mx-1"
:class="active === 'year' ? 'btn-success' : 'btn-primary'"
v-on:click="byYear"
>
year
</button>
</div>
<VueApexCharts
class="w-100"
height="400"
:options="chartOptions"
:series="series"
/>
</div>
</BModal>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
export default {
name: "VisitorsApexChartsModal",
data: () => ({
show: false,
active: "month",
chartOptions: {
chart: {
id: "vuechart-example",
type: "area",
},
xaxis: {
type: "datetime",
},
},
series: [{ name: "visitors", data: [] }],
}),
computed: {
...mapGetters({
visitors: "admin_visitors/visitors",
}),
},
methods: {
...mapActions({
getVisitors: "admin_visitors/getVisitors",
}),
byMonth: function () {
const fromDate = new Date(new Date().setMonth(new Date().getMonth() - 1));
this.setVisitors(fromDate);
this.active = "month";
},
byHalfYear: function () {
const fromDate = new Date(new Date().setMonth(new Date().getMonth() - 6));
this.setVisitors(fromDate);
this.active = "half year";
},
byYear: function () {
const fromDate = new Date(
new Date().setFullYear(new Date().getFullYear() - 1)
);
this.setVisitors(fromDate);
this.active = "year";
},
setVisitors: async function (fromDate) {
await this.getVisitors(fromDate);
const data = this.visitors.reduce((acc, item) => {
const date = new Date(item.created_at).toDateString();
if (!acc.length) {
acc.push({ x: date, y: item.visits });
return acc;
}
const index = acc.findIndex((item) => item.x === date);
if (index !== -1) {
acc[index].y = acc[index].y + item.visits;
} else {
acc.push({ x: date, y: item.visits });
}
return acc;
}, []);
this.series[0].data = data;
},
},
async mounted() {
this.byMonth();
},
};
</script>
<style scoped>
</style> |