Remove apexcharts

Resolve #7907

src/client/components/chart.vue

@@ -89,6 +89,16 @@ export default defineComponent({
 			required: false,
 			default: false
 		},
+		stacked: {
+			type: Boolean,
+			required: false,
+			default: false
+		},
+		aspectRatio: {
+			type: Number,
+			required: false,
+			default: null
+		},
 	},
 
 	setup(props) {
@@ -157,7 +167,7 @@ export default defineComponent({
 					})),
 				},
 				options: {
-					aspectRatio: 2.5,
+					aspectRatio: props.aspectRatio || 2.5,
 					layout: {
 						padding: {
 							left: 16,
@@ -174,7 +184,6 @@ export default defineComponent({
 								unit: props.span === 'day' ? 'month' : 'day',
 							},
 							grid: {
-								display: props.detailed,
 								color: gridColor,
 								borderColor: 'rgb(0, 0, 0, 0)',
 							},
@@ -190,6 +199,7 @@ export default defineComponent({
 						},
 						y: {
 							position: 'left',
+							stacked: props.stacked,
 							grid: {
 								color: gridColor,
 								borderColor: 'rgb(0, 0, 0, 0)',
@@ -204,6 +214,7 @@ export default defineComponent({
 					},
 					plugins: {
 						legend: {
+							display: props.detailed,
 							position: 'bottom',
 							labels: {
 								boxWidth: 16,
@@ -583,6 +594,30 @@ export default defineComponent({
 			};
 		};
 
+		const fetchPerUserNotesChart = async (): Promise<typeof data> => {
+			const raw = await os.api('charts/user/notes', { userId: props.args.user.id, limit: props.limit, span: props.span });
+			return {
+				series: [...(props.args.withoutAll ? [] : [{
+					name: 'All',
+					type: 'line',
+					borderDash: [5, 5],
+					data: format(sum(raw.inc, negate(raw.dec))),
+				}]), {
+					name: 'Renotes',
+					type: 'area',
+					data: format(raw.diffs.renote),
+				}, {
+					name: 'Replies',
+					type: 'area',
+					data: format(raw.diffs.reply),
+				}, {
+					name: 'Normal',
+					type: 'area',
+					data: format(raw.diffs.normal),
+				}],
+			};
+		};
+
 		const fetchAndRender = async () => {
 			const fetchData = () => {
 				switch (props.src) {
@@ -611,6 +646,8 @@ export default defineComponent({
 					case 'instance-drive-usage-total': return fetchInstanceDriveUsageChart(true);
 					case 'instance-drive-files': return fetchInstanceDriveFilesChart(false);
 					case 'instance-drive-files-total': return fetchInstanceDriveFilesChart(true);
+
+					case 'per-user-notes': return fetchPerUserNotesChart();
 				}
 			};
 			fetching.value = true;

src/client/pages/settings/drive.vue

@@ -35,7 +35,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import * as tinycolor from 'tinycolor2';
-import ApexCharts from 'apexcharts';
 import FormButton from '@client/components/debobigego/button.vue';
 import FormGroup from '@client/components/debobigego/group.vue';
 import FormKeyValueView from '@client/components/debobigego/key-value-view.vue';
@@ -44,6 +43,8 @@ import * as os from '@client/os';
 import bytes from '@client/filters/bytes';
 import * as symbols from '@client/symbols';
 
+// TODO: render chart
+
 export default defineComponent({
 	components: {
 		FormBase,
@@ -117,104 +118,6 @@ export default defineComponent({
 			});
 		},
 
-		renderChart() {
-			os.api('charts/user/drive', {
-				userId: this.$i.id,
-				span: 'day',
-				limit: 21
-			}).then(stats => {
-				const addition = [];
-				const deletion = [];
-				const now = new Date();
-				const y = now.getFullYear();
-				const m = now.getMonth();
-				const d = now.getDate();
-				for (let i = 0; i < 21; i++) {
-					const x = new Date(y, m, d - i);
-					addition.push([
-						x,
-						stats.incSize[i]
-					]);
-					deletion.push([
-						x,
-						-stats.decSize[i]
-					]);
-				}
-				const chart = new ApexCharts(this.$refs.chart, {
-					chart: {
-						type: 'bar',
-						stacked: true,
-						height: 150,
-						toolbar: {
-							show: false
-						},
-						zoom: {
-							enabled: false
-						}
-					},
-					plotOptions: {
-						bar: {
-							columnWidth: '80%'
-						}
-					},
-					grid: {
-						clipMarkers: false,
-						borderColor: 'rgba(0, 0, 0, 0.1)',
-						xaxis: {
-							lines: {
-								show: true,
-							}
-						},
-					},
-					tooltip: {
-						shared: true,
-						intersect: false,
-						theme: this.$store.state.darkMode ? 'dark' : 'light',
-					},
-					dataLabels: {
-						enabled: false
-					},
-					legend: {
-						show: false
-					},
-					series: [{
-						name: 'Additions',
-						data: addition
-					}, {
-						name: 'Deletions',
-						data: deletion
-					}],
-					xaxis: {
-						type: 'datetime',
-						labels: {
-							style: {
-								colors: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--fg')).toRgbString()
-							}
-						},
-						axisBorder: {
-							color: 'rgba(0, 0, 0, 0.1)'
-						},
-						axisTicks: {
-							color: 'rgba(0, 0, 0, 0.1)'
-						},
-						crosshairs: {
-							width: 1,
-							opacity: 1
-						}
-					},
-					yaxis: {
-						labels: {
-							formatter: v => bytes(v, 0),
-							style: {
-								colors: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--fg')).toRgbString()
-							}
-						}
-					}
-				});
-				chart.render();
-			});
-		},
-
 		bytes
 	}
 });

src/client/pages/user/index.activity.vue

@@ -3,20 +3,21 @@
 	<template #header><i class="fas fa-chart-bar" style="margin-right: 0.5em;"></i>{{ $ts.activity }}</template>
 
 	<div style="padding: 8px;">
-		<div ref="chart"></div>
+		<MkChart src="per-user-notes" :args="{ user, withoutAll: true }" span="day" :limit="limit" :stacked="true" :detailed="false" :aspect-ratio="6"/>
 	</div>
 </MkContainer>
 </template>
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import ApexCharts from 'apexcharts';
 import * as os from '@client/os';
 import MkContainer from '@client/components/ui/container.vue';
+import MkChart from '@client/components/chart.vue';
 
 export default defineComponent({
 	components: {
 		MkContainer,
+		MkChart,
 	},
 	props: {
 		user: {
@@ -29,96 +30,5 @@ export default defineComponent({
 			default: 40
 		}
 	},
-	data() {
-		return {
-			fetching: true,
-			data: [],
-			peak: null,
-		};
-	},
-	mounted() {
-		os.api('charts/user/notes', {
-			userId: this.user.id,
-			span: 'day',
-			limit: this.limit
-		}).then(stats => {
-			const normal = [];
-			const reply = [];
-			const renote = [];
-
-			const now = new Date();
-			const y = now.getFullYear();
-			const m = now.getMonth();
-			const d = now.getDate();
-
-			for (let i = 0; i < this.limit; i++) {
-				const x = new Date(y, m, d - i);
-				normal.push([
-					x,
-					stats.diffs.normal[i]
-				]);
-				reply.push([
-					x,
-					stats.diffs.reply[i]
-				]);
-				renote.push([
-					x,
-					stats.diffs.renote[i]
-				]);
-			}
-
-			const chart = new ApexCharts(this.$refs.chart, {
-				chart: {
-					type: 'bar',
-					stacked: true,
-					height: 100,
-					sparkline: {
-						enabled: true
-					},
-				},
-				plotOptions: {
-					bar: {
-						columnWidth: '40%'
-					}
-				},
-				dataLabels: {
-					enabled: false
-				},
-				grid: {
-					clipMarkers: false,
-					padding: {
-						top: 0,
-						right: 8,
-						bottom: 0,
-						left: 8
-					}
-				},
-				tooltip: {
-					shared: true,
-					intersect: false,
-					theme: this.$store.state.darkMode ? 'dark' : 'light',
-				},
-				series: [{
-					name: 'Normal',
-					data: normal
-				}, {
-					name: 'Reply',
-					data: reply
-				}, {
-					name: 'Renote',
-					data: renote
-				}],
-				xaxis: {
-					type: 'datetime',
-					crosshairs: {
-						width: 1,
-						opacity: 1
-					}
-				}
-			});
-
-			chart.render();
-		});
-	}
 });
 </script>