feat: add a data script with user stats to the profile page

aradzie · Dec 2, 2024 · 4b0a8b5 · 4b0a8b5
1 parent 6a59082
commit 4b0a8b5
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git a/packages/page-profile/lib/ProfilePage.tsx b/packages/page-profile/lib/ProfilePage.tsx
@@ -7,6 +7,7 @@ import {
 import { ExplainerBoundary } from "@keybr/widget";
 import { AccuracyStreaksSection } from "./profile/AccuracyStreaksSection.tsx";
 import { CalendarSection } from "./profile/CalendarSection.tsx";
+import { DataScript } from "./profile/DataScript.tsx";
 import { ExplainProfile } from "./profile/ExplainProfile.tsx";
 import { FooterSection } from "./profile/FooterSection.tsx";
 import { HistogramsSection } from "./profile/HistogramsSection.tsx";
@@ -41,6 +42,8 @@ function Content({ keyStatsMap }: { keyStatsMap: KeyStatsMap }) {
 
   return (
     <>
+      <DataScript stats={stats} dailyStatsMap={dailyStatsMap} />
+
       <AllTimeSummary stats={stats} />
 
       <TodaySummary stats={dailyStatsMap.today.stats} />

diff --git a/packages/page-profile/lib/PublicProfilePage.tsx b/packages/page-profile/lib/PublicProfilePage.tsx
@@ -7,6 +7,7 @@ import {
 import { ExplainerBoundary, Header } from "@keybr/widget";
 import { AccuracyStreaksSection } from "./profile/AccuracyStreaksSection.tsx";
 import { CalendarSection } from "./profile/CalendarSection.tsx";
+import { DataScript } from "./profile/DataScript.tsx";
 import { ExplainProfile } from "./profile/ExplainProfile.tsx";
 import { HistogramsSection } from "./profile/HistogramsSection.tsx";
 import { KeyFrequencyHeatmapSection } from "./profile/KeyFrequencyHeatmapSection.tsx";
@@ -41,6 +42,8 @@ function Content({ keyStatsMap }: { keyStatsMap: KeyStatsMap }) {
 
   return (
     <>
+      <DataScript stats={stats} dailyStatsMap={dailyStatsMap} />
+
       <AllTimeSummary stats={stats} />
 
       <TodaySummary stats={dailyStatsMap.today.stats} />

diff --git a/packages/page-profile/lib/profile/DataScript.tsx b/packages/page-profile/lib/profile/DataScript.tsx
@@ -0,0 +1,25 @@
+import type { DailyStatsMap, SummaryStats } from "@keybr/result";
+
+export function DataScript({
+  stats,
+  dailyStatsMap,
+}: {
+  stats: SummaryStats;
+  dailyStatsMap: DailyStatsMap;
+}) {
+  return (
+    <script
+      id="profile-data"
+      type="application/json"
+      dangerouslySetInnerHTML={{
+        __html: JSON.stringify({
+          allTime: stats,
+          today: dailyStatsMap.today.stats,
+          byDate: Object.fromEntries(
+            [...dailyStatsMap].map(({ date, stats }) => [date, stats]),
+          ),
+        }),
+      }}
+    ></script>
+  );
+}