122 lines
2.8 KiB
Vue
122 lines
2.8 KiB
Vue
<template>
|
|
<div>
|
|
<div class="mt-5 sm:px-3 lg:px-5">전체 통계 페이지 대시보드</div>
|
|
|
|
<LineChart
|
|
:chart-data="lineChartData"
|
|
:chart-options="lineChartOptions"
|
|
/>
|
|
|
|
<PieChart :chart-data="pieChartData" :chart-options="pieChartOptions" />
|
|
|
|
<div class="mt-5 sm:px-3 lg:px-5">
|
|
<a
|
|
href="javascript:void(0)"
|
|
class="text-base font-medium text-indigo-700 hover:text-indigo-600"
|
|
@click="navigateTo('/admin/statistics/byterm/usage')"
|
|
>기간별 사용량 통계 화면으로 →</a
|
|
>
|
|
</div>
|
|
<div class="mt-5 sm:px-3 lg:px-5">
|
|
<a
|
|
href="javascript:void(0)"
|
|
class="text-base font-medium text-indigo-700 hover:text-indigo-600"
|
|
@click="navigateTo('/admin/statistics/byterm/word')"
|
|
>기간별 단어 통계 화면으로 →</a
|
|
>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
middleware: 'check-auth-admin',
|
|
});
|
|
|
|
/*
|
|
const route = useRoute();
|
|
let hero: string | string[] = '';
|
|
hero = route.params['hero'];
|
|
*/
|
|
|
|
const responseJson = await _crossCtl.doComm(
|
|
'local/select',
|
|
'admin:dashboard',
|
|
{}
|
|
);
|
|
|
|
let rawData1 = [];
|
|
let rawData2 = [];
|
|
|
|
console.log('responseJson=', responseJson);
|
|
if (responseJson['responseMessage'] == 'ok') {
|
|
rawData1 = responseJson['result']['adminDashData1'];
|
|
rawData2 = responseJson['result']['adminDashData2'];
|
|
}
|
|
|
|
const lineChartData = {
|
|
labels: rawData1.map((item) => item['date_tag']),
|
|
datasets: [
|
|
{
|
|
label: 'Total',
|
|
backgroundColor: '#00D8FF',
|
|
data: rawData1.map((item) => item['total']),
|
|
},
|
|
{
|
|
label: 'Hit',
|
|
backgroundColor: '#f87979',
|
|
data: rawData1.map((item) => item['hit']),
|
|
},
|
|
],
|
|
};
|
|
|
|
const lineChartOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
};
|
|
|
|
const pieChartData = {
|
|
labels: rawData2.map((item) => item['key_name']),
|
|
datasets: [
|
|
{
|
|
// backgroundColor: ['#41B883', '#E46651', '#00D8FF', '#DD1B16'],
|
|
data: rawData2.map((item) => item['total']),
|
|
},
|
|
],
|
|
};
|
|
|
|
const pieChartOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
};
|
|
|
|
const chartData = {
|
|
labels: [
|
|
'January',
|
|
'February',
|
|
'March',
|
|
'April',
|
|
'May',
|
|
'June',
|
|
'July',
|
|
'August',
|
|
'September',
|
|
'October',
|
|
'November',
|
|
'December',
|
|
],
|
|
datasets: [
|
|
{
|
|
label: 'Data One',
|
|
backgroundColor: '#f87979',
|
|
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11],
|
|
},
|
|
],
|
|
};
|
|
|
|
const chartOptions = {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
};
|
|
</script>
|