imprpve active users chart

1 files changed, 28 insertions, 8 deletions

diff --git a/packages/client/src/components/chart.vue b/packages/client/src/components/chart.vue
index d1b5ad9d1b..6d6f57188f 100644
--- a/packages/client/src/components/chart.vue
+++ b/packages/client/src/components/chart.vue
@@ -61,7 +61,7 @@ const alpha = (hex, a) => {
 	return `rgba(${r}, ${g}, ${b}, ${a})`;
 };
 
-const colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560'];
+const colors = ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#e300db'];
 const getColor = (i) => {
 	return colors[i % colors.length];
 };
@@ -471,17 +471,37 @@ export default defineComponent({
 			const raw = await os.api('charts/active-users', { limit: props.limit, span: props.span });
 			return {
 				series: [{
-					name: 'Combined',
-					type: 'line',
-					data: format(sum(raw.local.users, raw.remote.users)),
+					name: 'Users',
+					type: 'area',
+					data: format(raw.users),
 				}, {
-					name: 'Local',
+					name: 'Noted',
 					type: 'area',
-					data: format(raw.local.users),
+					data: format(raw.notedUsers),
 				}, {
-					name: 'Remote',
+					name: '< Week',
+					type: 'area',
+					data: format(raw.registeredWithinWeek),
+				}, {
+					name: '< Month',
+					type: 'area',
+					data: format(raw.registeredWithinMonth),
+				}, {
+					name: '< Year',
+					type: 'area',
+					data: format(raw.registeredWithinYear),
+				}, {
+					name: '> Week',
+					type: 'area',
+					data: format(raw.registeredOutsideWeek),
+				}, {
+					name: '> Month',
+					type: 'area',
+					data: format(raw.registeredOutsideMonth),
+				}, {
+					name: '> Year',
 					type: 'area',
-					data: format(raw.remote.users),
+					data: format(raw.registeredOutsideYear),
 				}],
 			};
 		};