From 0b462feff6be22f0da8ea773a2a5af24d6300240 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 4 Feb 2022 16:39:09 +0900
Subject: [PATCH] enhance(client): improve chart rendering
---
packages/client/src/components/chart.vue | 27 +++++++++++++++++--
packages/client/src/pages/settings/drive.vue | 6 ++---
.../client/src/pages/user/index.activity.vue | 2 +-
3 files changed, 29 insertions(+), 6 deletions(-)
diff --git a/packages/client/src/components/chart.vue b/packages/client/src/components/chart.vue
index e9938e6903..ea0df55355 100644
--- a/packages/client/src/components/chart.vue
+++ b/packages/client/src/components/chart.vue
@@ -95,6 +95,11 @@ export default defineComponent({
required: false,
default: false
},
+ bar: {
+ type: Boolean,
+ required: false,
+ default: false
+ },
aspectRatio: {
type: Number,
required: false,
@@ -187,7 +192,7 @@ export default defineComponent({
Chart.defaults.color = getComputedStyle(document.documentElement).getPropertyValue('--fg');
chartInstance = new Chart(chartEl.value, {
- type: 'line',
+ type: props.bar ? 'bar' : 'line',
data: {
labels: new Array(props.limit).fill(0).map((_, i) => getDate(i).toLocaleString()).slice().reverse(),
datasets: data.series.map((x, i) => ({
@@ -195,12 +200,13 @@ export default defineComponent({
label: x.name,
data: x.data.slice().reverse(),
pointRadius: 0,
- tension: 0,
borderWidth: 2,
borderColor: x.color ? x.color : getColor(i),
borderDash: x.borderDash || [],
borderJoinStyle: 'round',
backgroundColor: alpha(x.color ? x.color : getColor(i), 0.1),
+ barPercentage: 0.9,
+ categoryPercentage: 0.9,
fill: x.type === 'area',
hidden: !!x.hidden,
})),
@@ -218,6 +224,7 @@ export default defineComponent({
scales: {
x: {
type: 'time',
+ stacked: props.stacked,
time: {
stepSize: 1,
unit: props.span === 'day' ? 'month' : 'day',
@@ -688,6 +695,21 @@ export default defineComponent({
};
};
+ const fetchPerUserDriveChart = async (): Promise<typeof data> => {
+ const raw = await os.api('charts/user/drive', { userId: props.args.user.id, limit: props.limit, span: props.span });
+ return {
+ series: [{
+ name: 'Inc',
+ type: 'area',
+ data: format(raw.incSize),
+ }, {
+ name: 'Dec',
+ type: 'area',
+ data: format(raw.decSize),
+ }],
+ };
+ };
+
const fetchAndRender = async () => {
const fetchData = () => {
switch (props.src) {
@@ -718,6 +740,7 @@ export default defineComponent({
case 'instance-drive-files-total': return fetchInstanceDriveFilesChart(true);
case 'per-user-notes': return fetchPerUserNotesChart();
+ case 'per-user-drive': return fetchPerUserDriveChart();
}
};
fetching.value = true;
diff --git a/packages/client/src/pages/settings/drive.vue b/packages/client/src/pages/settings/drive.vue
index 134fa63308..9309eb5ec7 100644
--- a/packages/client/src/pages/settings/drive.vue
+++ b/packages/client/src/pages/settings/drive.vue
@@ -19,7 +19,7 @@
<FormSection>
<template #label>{{ $ts.statistics }}</template>
- <div ref="chart"></div>
+ <MkChart src="per-user-drive" :args="{ user: $i }" span="day" :limit="7 * 5" :bar="true" :stacked="true" :detailed="false" :aspect-ratio="6"/>
</FormSection>
<FormSection>
@@ -45,8 +45,7 @@ import * as os from '@/os';
import bytes from '@/filters/bytes';
import * as symbols from '@/symbols';
import { defaultStore } from '@/store';
-
-// TODO: render chart
+import MkChart from '@/components/chart.vue';
export default defineComponent({
components: {
@@ -55,6 +54,7 @@ export default defineComponent({
FormSection,
MkKeyValue,
FormSplit,
+ MkChart,
},
emits: ['info'],
diff --git a/packages/client/src/pages/user/index.activity.vue b/packages/client/src/pages/user/index.activity.vue
index 43a4f476f1..ebb251d4cc 100644
--- a/packages/client/src/pages/user/index.activity.vue
+++ b/packages/client/src/pages/user/index.activity.vue
@@ -3,7 +3,7 @@
<template #header><i class="fas fa-chart-bar" style="margin-right: 0.5em;"></i>{{ $ts.activity }}</template>
<div style="padding: 8px;">
- <MkChart src="per-user-notes" :args="{ user, withoutAll: true }" span="day" :limit="limit" :stacked="true" :detailed="false" :aspect-ratio="6"/>
+ <MkChart src="per-user-notes" :args="{ user, withoutAll: true }" span="day" :limit="limit" :bar="true" :stacked="true" :detailed="false" :aspect-ratio="5"/>
</div>
</MkContainer>
</template>