Remove apexcharts

Resolve #7907

package.json

@@ -60,9 +60,6 @@
 		"@types/jsonld": "1.5.6",
 		"@types/katex": "0.11.1",
 		"@types/koa": "2.13.4",
-		"@types/koa__cors": "3.0.3",
-		"@types/koa__multer": "2.0.3",
-		"@types/koa__router": "8.0.8",
 		"@types/koa-bodyparser": "4.3.3",
 		"@types/koa-cors": "0.0.2",
 		"@types/koa-favicon": "2.0.21",
@@ -70,6 +67,9 @@
 		"@types/koa-mount": "4.0.1",
 		"@types/koa-send": "4.1.3",
 		"@types/koa-views": "7.0.0",
+		"@types/koa__cors": "3.0.3",
+		"@types/koa__multer": "2.0.3",
+		"@types/koa__router": "8.0.8",
 		"@types/markdown-it": "12.2.3",
 		"@types/matter-js": "0.17.5",
 		"@types/mocha": "8.2.3",
@@ -106,7 +106,6 @@
 		"@typescript-eslint/parser": "5.0.0",
 		"@vue/compiler-sfc": "3.2.20",
 		"abort-controller": "3.0.0",
-		"apexcharts": "3.28.3",
 		"autobind-decorator": "2.4.0",
 		"autosize": "4.0.4",
 		"autwh": "0.1.0",

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>

yarn.lock

@@ -1809,18 +1809,6 @@ anymatch@~3.1.1:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-apexcharts@3.28.3:
-  version "3.28.3"
-  resolved "https://registry.yarnpkg.com/apexcharts/-/apexcharts-3.28.3.tgz#22a6d9b234c82f6c2e1dd4aebba05b7603e2b1d2"
-  integrity sha512-EhghB2P27/Gjhwct8sSS0V63mdpRMx/ikH34dwUTqZQnkAEyOS/RKDmYjXBNA7zsAKBE/pThOdoTya6ADyk6zQ==
-  dependencies:
-    svg.draggable.js "^2.2.2"
-    svg.easing.js "^2.0.0"
-    svg.filter.js "^2.0.2"
-    svg.pathmorphing.js "^0.1.3"
-    svg.resize.js "^1.4.3"
-    svg.select.js "^3.0.1"
-
 app-root-path@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/app-root-path/-/app-root-path-3.0.0.tgz#210b6f43873227e18a4b810a032283311555d5ad"
@@ -10529,61 +10517,6 @@ sver-compat@^1.5.0:
     es6-iterator "^2.0.1"
     es6-symbol "^3.1.1"
 
-svg.draggable.js@^2.2.2:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz#c514a2f1405efb6f0263e7958f5b68fce50603ba"
-  integrity sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==
-  dependencies:
-    svg.js "^2.0.1"
-
-svg.easing.js@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/svg.easing.js/-/svg.easing.js-2.0.0.tgz#8aa9946b0a8e27857a5c40a10eba4091e5691f12"
-  integrity sha1-iqmUawqOJ4V6XEChDrpAkeVpHxI=
-  dependencies:
-    svg.js ">=2.3.x"
-
-svg.filter.js@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/svg.filter.js/-/svg.filter.js-2.0.2.tgz#91008e151389dd9230779fcbe6e2c9a362d1c203"
-  integrity sha1-kQCOFROJ3ZIwd5/L5uLJo2LRwgM=
-  dependencies:
-    svg.js "^2.2.5"
-
-svg.js@>=2.3.x, svg.js@^2.0.1, svg.js@^2.2.5, svg.js@^2.4.0, svg.js@^2.6.5:
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/svg.js/-/svg.js-2.7.1.tgz#eb977ed4737001eab859949b4a398ee1bb79948d"
-  integrity sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==
-
-svg.pathmorphing.js@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz#c25718a1cc7c36e852ecabc380e758ac09bb2b65"
-  integrity sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==
-  dependencies:
-    svg.js "^2.4.0"
-
-svg.resize.js@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/svg.resize.js/-/svg.resize.js-1.4.3.tgz#885abd248e0cd205b36b973c4b578b9a36f23332"
-  integrity sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==
-  dependencies:
-    svg.js "^2.6.5"
-    svg.select.js "^2.1.2"
-
-svg.select.js@^2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-2.1.2.tgz#e41ce13b1acff43a7441f9f8be87a2319c87be73"
-  integrity sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==
-  dependencies:
-    svg.js "^2.2.5"
-
-svg.select.js@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/svg.select.js/-/svg.select.js-3.0.1.tgz#a4198e359f3825739226415f82176a90ea5cc917"
-  integrity sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==
-  dependencies:
-    svg.js "^2.6.5"
-
 svgo@^0.7.0:
   version "0.7.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-0.7.2.tgz#9f5772413952135c6fefbf40afe6a4faa88b4bb5"