From 221bac64dbbff23a78065bde6cd6988f907b7c4b Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Tue, 25 Apr 2023 18:06:21 -0700
Subject: [PATCH] feat: heatmap option for activity widget

---
 package.json                                 |  2 +-
 packages/client/src/components/MkHeatmap.vue |  8 ++++++++
 packages/client/src/widgets/activity.vue     | 12 ++++++++++--
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 0f41e29d1d..955e68792b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "13.2.0-dev36",
+	"version": "13.2.0-dev37",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",
diff --git a/packages/client/src/components/MkHeatmap.vue b/packages/client/src/components/MkHeatmap.vue
index 1af278b233..c3010109ff 100644
--- a/packages/client/src/components/MkHeatmap.vue
+++ b/packages/client/src/components/MkHeatmap.vue
@@ -25,6 +25,7 @@ import { useChartTooltip } from "@/scripts/use-chart-tooltip";
 import { chartVLine } from "@/scripts/chart-vline";
 import { alpha } from "@/scripts/color";
 import { initChart } from "@/scripts/init-chart";
+import { $i } from "@/account";
 
 initChart();
 
@@ -108,6 +109,13 @@ async function renderChart() {
 			span: "day",
 		});
 		values = raw.deliverFailed;
+	} else if (props.src === "user-notes") {
+		const raw = await os.api("charts/user/notes", {
+			limit: 7 * 21,
+			span: "day",
+			userId: $i.id,
+		});
+		values = raw.total;
 	}
 
 	fetching = false;
diff --git a/packages/client/src/widgets/activity.vue b/packages/client/src/widgets/activity.vue
index b148d39345..6292431afd 100644
--- a/packages/client/src/widgets/activity.vue
+++ b/packages/client/src/widgets/activity.vue
@@ -9,11 +9,14 @@
 			>{{ i18n.ts._widgets.activity }}</template
 		>
 		<template #func
-			><button class="_button" @click="toggleView()">
+			><button v-if="!widgetProps.newStyle" class="_button" @click="toggleView()">
 				<i class="ph-sort-ascending ph-bold ph-lg"></i></button
 		></template>
 
-		<div>
+		<div v-if="widgetProps.newStyle">
+			<MkHeatmap src="notes-user" />
+		</div>
+		<div v-else>
 			<MkLoading v-if="fetching" />
 			<template v-else>
 				<XCalendar
@@ -40,6 +43,7 @@ import {
 } from "./widget";
 import XCalendar from "./activity.calendar.vue";
 import XChart from "./activity.chart.vue";
+import MkHeatmap from "@/components/MkHeatmap.vue";
 import { GetFormResultType } from "@/scripts/form";
 import * as os from "@/os";
 import MkContainer from "@/components/MkContainer.vue";
@@ -49,6 +53,10 @@ import { i18n } from "@/i18n";
 const name = "activity";
 
 const widgetPropsDef = {
+	newStyle: {
+		type: "boolean" as const,
+		default: true,
+	},
 	showHeader: {
 		type: "boolean" as const,
 		default: true,