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 => { + 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 @@ -
+
@@ -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 @@
- +