add percentile stats!

gtarpenning · gtarpenning · commit b3efcf75d5db · 2025-12-30T17:47:37.000-08:00
diff --git a/web/app/[year]/[id]/page.js b/web/app/[year]/[id]/page.js
@@ -21,6 +21,7 @@ export default function WrappedPage() {
   const params = useParams();
   const [data, setData] = useState(null);
   const [percentiles, setPercentiles] = useState({});
+  const [totalWraps, setTotalWraps] = useState(0);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
 
@@ -48,6 +49,7 @@ export default function WrappedPage() {
         if (percentileResponse.ok) {
           const percentileData = await percentileResponse.json();
           setPercentiles(percentileData.percentiles || {});
+          setTotalWraps(percentileData.total || 0);
         }
       } catch (err) {
         setError(err.message);
@@ -79,19 +81,19 @@ export default function WrappedPage() {
 
   return (
     <main className="container">
-      <HeroSection year={data.year} volume={stats.volume} percentiles={percentiles} />
+      <HeroSection year={data.year} volume={stats.volume} percentiles={percentiles} totalWraps={totalWraps} />
       <HeatmapSection volume={stats.volume} year={data.year} />
       <TemporalSection temporal={stats.temporal} />
-      <ContactsSection contacts={stats.contacts} percentiles={percentiles} />
-      <ContentSection content={stats.content} percentiles={percentiles} />
+      <ContactsSection contacts={stats.contacts} percentiles={percentiles} totalWraps={totalWraps} />
+      <ContentSection content={stats.content} percentiles={percentiles} totalWraps={totalWraps} />
       <MessageAnalysisSection sentiment={stats.content?.sentiment} />
-      <MessageLengthSection content={stats.content} percentiles={percentiles} />
-      <ConversationsSection conversations={stats.conversations} percentiles={percentiles} />
-      <GhostSection ghosts={stats.ghosts} percentiles={percentiles} />
+      <MessageLengthSection content={stats.content} percentiles={percentiles} totalWraps={totalWraps} />
+      <ConversationsSection conversations={stats.conversations} percentiles={percentiles} totalWraps={totalWraps} />
+      <GhostSection ghosts={stats.ghosts} percentiles={percentiles} totalWraps={totalWraps} />
       {/* <CliffhangerSection cliffhangers={stats.cliffhangers} /> */}
-      <ResponseTimesSection response_times={stats.response_times} percentiles={percentiles} />
-      <TapbacksSection tapbacks={stats.tapbacks} percentiles={percentiles} />
-      <StreaksSection streaks={stats.streaks} percentiles={percentiles} />
+      <ResponseTimesSection response_times={stats.response_times} percentiles={percentiles} totalWraps={totalWraps} />
+      <TapbacksSection tapbacks={stats.tapbacks} percentiles={percentiles} totalWraps={totalWraps} />
+      <StreaksSection streaks={stats.streaks} percentiles={percentiles} totalWraps={totalWraps} />
       <WrappedFooter views={data.views} volume={stats.volume} />
     </main>
   );
diff --git a/web/app/api/percentiles/[year]/[id]/route.js b/web/app/api/percentiles/[year]/[id]/route.js
@@ -17,8 +17,10 @@ function calculatePercentile(value, allValues) {
 
 // Helper to extract stat from data JSON
 function extractStat(data, path) {
+  // Handle both data.raw.X and data.X structures
+  let value = data?.raw || data;
+  
   const keys = path.split(".");
-  let value = data;
   for (const key of keys) {
     if (value === null || value === undefined) return null;
     value = value[key];
@@ -63,6 +65,7 @@ export async function GET(request, { params }) {
       "volume.total_received",
       "content.avg_message_length_sent",
       "content.avg_message_length_received",
+      "content.avg_word_count_sent",
       "content.questions_percentage",
       "content.enthusiasm_percentage",
       "content.attachments_sent",
@@ -72,11 +75,16 @@ export async function GET(request, { params }) {
       "conversations.one_on_one_chats",
       "content.double_text_count",
       "response_times.avg_response_time_minutes",
+      "response_times.median_response_time_you_seconds",
+      "response_times.median_response_time_them_seconds",
       "tapbacks.total_tapbacks_given",
       "tapbacks.total_tapbacks_received",
       "streaks.longest_streak_days",
       "contacts.unique_contacts_messaged",
       "contacts.unique_contacts_received_from",
+      "ghosts.people_you_left_hanging",
+      "ghosts.people_who_left_you_hanging",
+      "ghosts.ghost_ratio",
     ];
 
     // Extract all values for each stat
@@ -106,7 +114,10 @@ export async function GET(request, { params }) {
       }
     });
 
-    return NextResponse.json({ percentiles });
+    return NextResponse.json({ 
+      percentiles,
+      total: result.rows.length 
+    });
   } catch (error) {
     console.error("Percentile calculation error:", error);
     return NextResponse.json(
diff --git a/web/app/globals.css b/web/app/globals.css
@@ -62,17 +62,53 @@ body {
 
 .percentile-badge {
   position: absolute;
-  top: 0.75rem;
-  right: 0.75rem;
+  top: 0.5rem;
+  right: 0.5rem;
   background: rgba(139, 92, 246, 0.2);
   border: 1px solid rgba(139, 92, 246, 0.4);
-  border-radius: 0.5rem;
-  padding: 0.25rem 0.5rem;
-  font-size: 0.75rem;
+  border-radius: 0.375rem;
+  padding: 0.15rem 0.35rem;
+  font-size: 0.65rem;
   font-weight: 600;
   color: rgba(139, 92, 246, 1);
   text-transform: uppercase;
   letter-spacing: 0.05em;
+  cursor: help;
+  transition: all 0.2s ease;
+}
+
+.percentile-badge:hover {
+  background: rgba(139, 92, 246, 0.3);
+  border-color: rgba(139, 92, 246, 0.6);
+  transform: scale(1.05);
+}
+
+.percentile-tooltip {
+  visibility: hidden;
+  opacity: 0;
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 0.5rem;
+  background: rgba(30, 30, 40, 0.98);
+  color: white;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.5rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+  z-index: 1000;
+  pointer-events: none;
+  border: 1px solid rgba(139, 92, 246, 0.3);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  text-transform: none;
+  letter-spacing: normal;
+  transition: opacity 0.2s ease, visibility 0.2s ease;
+}
+
+.percentile-badge:hover .percentile-tooltip {
+  visibility: visible;
+  opacity: 1;
 }
 
 .stat-label {
diff --git a/web/components/ContactsSection.js b/web/components/ContactsSection.js
@@ -1,7 +1,7 @@
 import StatCard from "./StatCard";
 import ContactDistributionChart from "./ContactDistributionChart";
 
-export default function ContactsSection({ contacts, percentiles = {} }) {
+export default function ContactsSection({ contacts, percentiles = {}, totalWraps = 0 }) {
   if (!contacts) return null;
 
   return (
@@ -52,6 +52,7 @@ export default function ContactsSection({ contacts, percentiles = {} }) {
             label="Unique Contacts Messaged"
             value={contacts.unique_contacts_messaged}
             percentile={percentiles["contacts.unique_contacts_messaged"]}
+            totalWraps={totalWraps}
             valueStyle={{ fontSize: "2rem" }}
           />
         )}
@@ -60,6 +61,7 @@ export default function ContactsSection({ contacts, percentiles = {} }) {
             label="Unique Contacts Received From"
             value={contacts.unique_contacts_received_from}
             percentile={percentiles["contacts.unique_contacts_received_from"]}
+            totalWraps={totalWraps}
             valueStyle={{ fontSize: "2rem" }}
           />
         )}
diff --git a/web/components/ContentSection.js b/web/components/ContentSection.js
@@ -3,7 +3,7 @@ import PhraseHighlights from "./PhraseHighlights";
 import EnhancedText from "./EnhancedText";
 import { useEnhancement, PLAYFUL_INSTRUCTION } from "@/hooks/useEnhancement";
 
-export default function ContentSection({ content, percentiles = {} }) {
+export default function ContentSection({ content, percentiles = {}, totalWraps = 0 }) {
   if (!content) return null;
 
   return (
@@ -16,6 +16,7 @@ export default function ContentSection({ content, percentiles = {} }) {
             label="Avg Message Length (Sent)"
             value={`${Math.round(content.avg_message_length_sent)} chars`}
             percentile={percentiles["content.avg_message_length_sent"]}
+            totalWraps={totalWraps}
             valueStyle={{ fontSize: "2rem" }}
           />
         )}
@@ -24,6 +25,7 @@ export default function ContentSection({ content, percentiles = {} }) {
             label="Avg Message Length (Received)"
             value={`${Math.round(content.avg_message_length_received)} chars`}
             percentile={percentiles["content.avg_message_length_received"]}
+            totalWraps={totalWraps}
             valueStyle={{ fontSize: "2rem" }}
           />
         )}
@@ -32,6 +34,7 @@ export default function ContentSection({ content, percentiles = {} }) {
             label="❓ Questions Asked"
             value={`${content.questions_percentage}%`}
             percentile={percentiles["content.questions_percentage"]}
+            totalWraps={totalWraps}
             valueStyle={{ fontSize: "2rem" }}
           />
         )}
@@ -40,6 +43,7 @@ export default function ContentSection({ content, percentiles = {} }) {
             label="❗ Enthusiasm Level"
             value={`${content.enthusiasm_percentage}%`}
             percentile={percentiles["content.enthusiasm_percentage"]}
+            totalWraps={totalWraps}
             valueStyle={{ fontSize: "2rem" }}
           />
         )}
@@ -48,6 +52,7 @@ export default function ContentSection({ content, percentiles = {} }) {
             label="📎 Attachments Sent"
             value={content.attachments_sent.toLocaleString()}
             percentile={percentiles["content.attachments_sent"]}
+            totalWraps={totalWraps}
             valueStyle={{ fontSize: "2rem" }}
           />
         )}
@@ -56,12 +61,13 @@ export default function ContentSection({ content, percentiles = {} }) {
             label="📎 Attachments Received"
             value={content.attachments_received.toLocaleString()}
             percentile={percentiles["content.attachments_received"]}
+            totalWraps={totalWraps}
             valueStyle={{ fontSize: "2rem" }}
           />
         )}
       </div>
 
-      <DoubleTextSection content={content} percentiles={percentiles} />
+      <DoubleTextSection content={content} percentiles={percentiles} totalWraps={totalWraps} />
 
       <EmojiSection content={content} />
 
@@ -73,7 +79,7 @@ export default function ContentSection({ content, percentiles = {} }) {
   );
 }
 
-function DoubleTextSection({ content, percentiles }) {
+function DoubleTextSection({ content, percentiles, totalWraps }) {
   const prompt =
     content.double_text_count !== undefined
       ? `You sent ${content.double_text_count} double texts, that's ${content.double_text_percentage}% of your messages. ${PLAYFUL_INSTRUCTION}`
@@ -109,6 +115,7 @@ function DoubleTextSection({ content, percentiles }) {
           label="Double Texts Sent"
           value={content.double_text_count.toLocaleString()}
           percentile={percentiles["content.double_text_count"]}
+          totalWraps={totalWraps}
           valueStyle={{ fontSize: "2.5rem", color: "#06b6d4" }}
         />
       </div>
diff --git a/web/components/ConversationsSection.js b/web/components/ConversationsSection.js
@@ -1,6 +1,6 @@
 import StatCard from "./StatCard";
 
-export default function ConversationsSection({ conversations, percentiles = {} }) {
+export default function ConversationsSection({ conversations, percentiles = {}, totalWraps = 0 }) {
   if (!conversations) return null;
 
   return (
@@ -12,6 +12,7 @@ export default function ConversationsSection({ conversations, percentiles = {} }
             label="Total Conversations"
             value={conversations.total_conversations}
             percentile={percentiles["conversations.total_conversations"]}
+            totalWraps={totalWraps}
             valueStyle={{ fontSize: "2rem" }}
           />
         )}
@@ -20,6 +21,7 @@ export default function ConversationsSection({ conversations, percentiles = {} }
             label="Group Chats"
             value={conversations.group_chats}
             percentile={percentiles["conversations.group_chats"]}
+            totalWraps={totalWraps}
             valueStyle={{ fontSize: "2rem" }}
           />
         )}
@@ -28,6 +30,7 @@ export default function ConversationsSection({ conversations, percentiles = {} }
             label="1-on-1 Chats"
             value={conversations.one_on_one_chats}
             percentile={percentiles["conversations.one_on_one_chats"]}
+            totalWraps={totalWraps}
             valueStyle={{ fontSize: "2rem" }}
           />
         )}
diff --git a/web/components/GhostSection.js b/web/components/GhostSection.js
@@ -1,6 +1,6 @@
 import StatCard from "./StatCard";
 
-export default function GhostSection({ ghosts, percentiles = {} }) {
+export default function GhostSection({ ghosts, percentiles = {}, totalWraps = 0 }) {
   if (!ghosts) return null;
 
   const totalYou = ghosts.people_you_left_hanging || 0;
@@ -25,17 +25,23 @@ export default function GhostSection({ ghosts, percentiles = {} }) {
         <StatCard
           label="People You Left Hanging"
           value={totalYou.toLocaleString()}
+          percentile={percentiles["ghosts.people_you_left_hanging"]}
+          totalWraps={totalWraps}
           valueStyle={{ fontSize: "2rem" }}
         />
         <StatCard
           label="People Who Left You Hanging"
           value={totalThem.toLocaleString()}
+          percentile={percentiles["ghosts.people_who_left_you_hanging"]}
+          totalWraps={totalWraps}
           valueStyle={{ fontSize: "2rem" }}
         />
         {typeof ratio === "number" && (
           <StatCard
             label="Ghost Ratio (You/Them)"
             value={ratio.toFixed(2)}
+            percentile={percentiles["ghosts.ghost_ratio"]}
+            totalWraps={totalWraps}
             valueStyle={{ fontSize: "2rem" }}
           />
         )}
diff --git a/web/components/HeroSection.js b/web/components/HeroSection.js
@@ -1,6 +1,6 @@
 import StatCard from "./StatCard";
 
-export default function HeroSection({ year, volume, percentiles = {} }) {
+export default function HeroSection({ year, volume, percentiles = {}, totalWraps = 0 }) {
   return (
     <div className="hero">
       <h1>
@@ -12,12 +12,14 @@ export default function HeroSection({ year, volume, percentiles = {} }) {
           label="Messages Sent"
           value={volume?.total_sent?.toLocaleString() || 0}
           percentile={percentiles["volume.total_sent"]}
+          totalWraps={totalWraps}
         />
 
         <StatCard
           label="Messages Received"
           value={volume?.total_received?.toLocaleString() || 0}
           percentile={percentiles["volume.total_received"]}
+          totalWraps={totalWraps}
           valueStyle={{
             background: "linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%)",
             WebkitBackgroundClip: "text",
diff --git a/web/components/MessageLengthSection.js b/web/components/MessageLengthSection.js
@@ -2,7 +2,7 @@ import StatCard from "./StatCard";
 import { useEnhancement, PLAYFUL_INSTRUCTION } from "@/hooks/useEnhancement";
 import { Histogram, getWarmColorGradient } from "@/lib/histogram";
 
-export default function MessageLengthSection({ content, percentiles = {} }) {
+export default function MessageLengthSection({ content, percentiles = {}, totalWraps = 0 }) {
   if (!content) return null;
 
   const hasLengthData =
@@ -21,6 +21,7 @@ export default function MessageLengthSection({ content, percentiles = {} }) {
             label="Avg Length (Sent)"
             value={`${Math.round(content.avg_message_length_sent)} chars`}
             percentile={percentiles["content.avg_message_length_sent"]}
+            totalWraps={totalWraps}
             valueStyle={{ fontSize: "2rem" }}
           />
         )}
@@ -29,13 +30,16 @@ export default function MessageLengthSection({ content, percentiles = {} }) {
             label="Avg Length (Received)"
             value={`${Math.round(content.avg_message_length_received)} chars`}
             percentile={percentiles["content.avg_message_length_received"]}
+            totalWraps={totalWraps}
             valueStyle={{ fontSize: "2rem" }}
           />
         )}
         {content.avg_word_count_sent !== undefined && (
           <StatCard
             label="Avg Words (Sent)"
             value={`${Math.round(content.avg_word_count_sent)} words`}
+            percentile={percentiles["content.avg_word_count_sent"]}
+            totalWraps={totalWraps}
             valueStyle={{ fontSize: "2rem" }}
           />
         )}
diff --git a/web/components/ResponseTimesSection.js b/web/components/ResponseTimesSection.js
diff --git a/web/components/StatCard.js b/web/components/StatCard.js
diff --git a/web/components/StreaksSection.js b/web/components/StreaksSection.js
diff --git a/web/components/TapbacksSection.js b/web/components/TapbacksSection.js
