From 70805e00eb2b2b3af7d7460b374f270a7de627e7 Mon Sep 17 00:00:00 2001 From: syuilo <Syuilotan@yahoo.co.jp> Date: Fri, 6 Jan 2023 20:19:27 +0900 Subject: [PATCH] :art: --- .../frontend/src/components/MkChartLegend.vue | 7 ++++ .../src/pages/user/activity.heatmap.vue | 8 ++++- .../frontend/src/pages/user/activity.pv.vue | 36 +++++++++++++++++-- packages/frontend/src/pages/user/activity.vue | 18 +++++----- 4 files changed, 57 insertions(+), 12 deletions(-) diff --git a/packages/frontend/src/components/MkChartLegend.vue b/packages/frontend/src/components/MkChartLegend.vue index 8d2a2be8e..b950f2836 100644 --- a/packages/frontend/src/components/MkChartLegend.vue +++ b/packages/frontend/src/components/MkChartLegend.vue @@ -72,4 +72,11 @@ defineExpose({ } } } + +@container (max-width: 500px) { + .root { + font-size: 90%; + gap: 6px; + } +} </style> diff --git a/packages/frontend/src/pages/user/activity.heatmap.vue b/packages/frontend/src/pages/user/activity.heatmap.vue index 7b4c92c02..202201afb 100644 --- a/packages/frontend/src/pages/user/activity.heatmap.vue +++ b/packages/frontend/src/pages/user/activity.heatmap.vue @@ -1,7 +1,7 @@ <template> <div ref="rootEl"> <MkLoading v-if="fetching"/> - <div v-else> + <div v-else :class="$style.root" class="_panel"> <canvas ref="chartEl"></canvas> </div> </div> @@ -205,3 +205,9 @@ onMounted(async () => { renderChart(); }); </script> + +<style lang="scss" module> +.root { + padding: 20px; +} +</style> diff --git a/packages/frontend/src/pages/user/activity.pv.vue b/packages/frontend/src/pages/user/activity.pv.vue index 1f355cbcb..d74b641da 100644 --- a/packages/frontend/src/pages/user/activity.pv.vue +++ b/packages/frontend/src/pages/user/activity.pv.vue @@ -64,6 +64,8 @@ async function renderChart() { const colorUser = '#3498db'; const colorVisitor = '#2ecc71'; + const colorUser2 = '#3498db88'; + const colorVisitor2 = '#2ecc7188'; chartInstance = new Chart(chartEl, { type: 'bar', @@ -78,8 +80,9 @@ async function renderChart() { borderRadius: 4, backgroundColor: colorUser, barPercentage: 0.7, - categoryPercentage: 1, + categoryPercentage: 0.7, fill: true, + stack: 'u', }, { parsing: false, label: 'UPV (visitor)', @@ -90,8 +93,35 @@ async function renderChart() { borderRadius: 4, backgroundColor: colorVisitor, barPercentage: 0.7, - categoryPercentage: 1, + categoryPercentage: 0.7, fill: true, + stack: 'u', + }, { + parsing: false, + label: 'NPV (user)', + data: format(raw.pv.user).slice().reverse(), + pointRadius: 0, + borderWidth: 0, + borderJoinStyle: 'round', + borderRadius: 4, + backgroundColor: colorUser2, + barPercentage: 0.7, + categoryPercentage: 0.7, + fill: true, + stack: 'n', + }, { + parsing: false, + label: 'NPV (visitor)', + data: format(raw.pv.visitor).slice().reverse(), + pointRadius: 0, + borderWidth: 0, + borderJoinStyle: 'round', + borderRadius: 4, + backgroundColor: colorVisitor2, + barPercentage: 0.7, + categoryPercentage: 0.7, + fill: true, + stack: 'n', }], }, options: { @@ -146,7 +176,7 @@ async function renderChart() { plugins: { title: { display: true, - text: 'Unique PV', + text: 'Unique/Natural PV', padding: { left: 0, right: 0, diff --git a/packages/frontend/src/pages/user/activity.vue b/packages/frontend/src/pages/user/activity.vue index f9dce3a9e..3def41467 100644 --- a/packages/frontend/src/pages/user/activity.vue +++ b/packages/frontend/src/pages/user/activity.vue @@ -1,13 +1,15 @@ <template> <MkSpacer :content-max="700"> - <MkFolder class="item"> - <template #header>Heatmap</template> - <XHeatmap :user="user" :src="'notes'"/> - </MkFolder> - <MkFolder class="item"> - <template #header>PV</template> - <XPv :user="user"/> - </MkFolder> + <div class="_gaps"> + <MkFolder class="item"> + <template #header>Heatmap</template> + <XHeatmap :user="user" :src="'notes'"/> + </MkFolder> + <MkFolder class="item"> + <template #header>PV</template> + <XPv :user="user"/> + </MkFolder> + </div> </MkSpacer> </template>