enhance(client): improve chart rendering

1 files changed, 25 insertions, 2 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;