feat: Enhance hypertrophy charts with color-coded progress indicators and tooltip improvements

aree6 · aree6 · commit fd614fc57f3f · 2026-05-06T16:40:28.000+08:00
diff --git a/frontend/components/dashboard/hypertrophy/HypertrophyBarCard.tsx b/frontend/components/dashboard/hypertrophy/HypertrophyBarCard.tsx
@@ -3,6 +3,7 @@ import { TrendingUp, BarChart3 } from 'lucide-react';
 import { Tooltip, useTooltip } from '../../ui/Tooltip';
 import { SegmentControl } from '../../ui/SegmentControl';
 import { useIsMobile } from '../../insights/useIsMobile';
+import { ChartDescription, InsightText } from '../../dashboard/insights/ChartBits';
 import {
   FACTOR_COLORS,
   FACTOR_WEIGHTS,
@@ -117,6 +118,10 @@ export const HypertrophyBarCard: React.FC<HypertrophyBarCardProps> = ({
     return map;
   }, [hypertrophyData30d, hypertrophyPeriod]);
 
+  const volColor = (v: number) => v <= 15 ? '#ef4444' : v <= 35 ? '#f59e0b' : '#22c55e';
+  const progColor = (v: number) => v <= 11 ? '#ef4444' : v <= 22 ? '#f59e0b' : '#22c55e';
+  const freqColor = (v: number) => v <= 3 ? '#ef4444' : v <= 6 ? '#f59e0b' : '#22c55e';
+
   const handleMouseEnter = (e: React.MouseEvent, m: MuscleHypertrophyData) => {
     const raw = m.score.raw;
     const volW = Math.round(m.score.volumeScore * FACTOR_WEIGHTS.volumeScore);
@@ -127,19 +132,22 @@ export const HypertrophyBarCard: React.FC<HypertrophyBarCardProps> = ({
     const volMax = Math.round(FACTOR_WEIGHTS.volumeScore * 100);
     const progMax = Math.round(FACTOR_WEIGHTS.progressiveOverload * 100);
     const freqMax = Math.round(FACTOR_WEIGHTS.frequency * 100);
+
     showTooltip(e, {
       title: m.muscleName,
-      body: `Volume: ${volW}/${volMax} → ${raw.weeklySets.toFixed(1)} sets/week\n` +
-        `Progress: ${progW}/${progMax} → ${trendLabel} trend\n` +
-        `Frequency: ${freqW}/${freqMax} → ${raw.daysPerWeek.toFixed(1)} days/week`,
+      bodySections: [
+        { text: `Volume: ${volW}/${volMax} → ${raw.weeklySets.toFixed(1)} sets/week`, color: volColor(volW) },
+        { text: `Progress: ${progW}/${progMax} → ${trendLabel} trend`, color: progColor(progW) },
+        { text: `Frequency: ${freqW}/${freqMax} → ${raw.daysPerWeek.toFixed(1)} days/week`, color: freqColor(freqW) },
+      ],
       status: m.score.totalScore >= 60 ? 'success' : m.score.totalScore >= 40 ? 'info' : 'warning',
     });
   };
 
   return (
-    <div className="bg-black/70 rounded-xl border border-slate-700/50 overflow-hidden h-[300px] sm:h-[450px] lg:h-full flex flex-col">
-      <div className="p-3 flex-shrink-0">
-        <div className="flex items-center justify-between mb-2">
+    <div className="bg-black/70 rounded-xl border border-slate-700/50 px-2 sm:px-3 py-4 sm:py-6 min-h-[400px] sm:min-h-[520px] lg:min-h-0 lg:h-full flex flex-col">
+      <div className="flex-shrink-0">
+        <div className="flex items-center justify-between mb-3 gap-3">
           <div>
             <h2 className="text-xs font-bold text-white">Hypertrophy Scores</h2>
             <p className="text-[10px] text-slate-500 mt-0.5">Per muscle breakdown</p>
@@ -195,7 +203,7 @@ export const HypertrophyBarCard: React.FC<HypertrophyBarCardProps> = ({
         )}
       </div>
 
-      <div className="px-3 pb-3 flex-1 min-h-0 overflow-y-auto">
+      <div className="flex-1 min-h-0 overflow-y-auto pb-3">
         {hypertrophyData.length > 0 ? (
           <div className="space-y-2 pr-3">
             <div className="flex items-center gap-3 px-1">
@@ -256,6 +264,9 @@ export const HypertrophyBarCard: React.FC<HypertrophyBarCardProps> = ({
           <div className="text-[10px] text-slate-500 py-4 text-center">No muscle data available.</div>
         )}
       </div>
+      <ChartDescription>
+        <InsightText text="The hypertrophy score estimates muscle growth potential from 0 to 100 percent. It combines three factors: volume how many weekly sets, progress how much your strength is trending up, and frequency how often you train each muscle. Higher scores mean a better stimulus for growth." />
+      </ChartDescription>
       {tooltip && <Tooltip data={tooltip} />}
     </div>
   );
diff --git a/frontend/components/dashboard/hypertrophy/HypertrophyScatterCard.tsx b/frontend/components/dashboard/hypertrophy/HypertrophyScatterCard.tsx
@@ -18,13 +18,17 @@ import {
 const PROGRESS_MID = 25;
 const VOLUME_MID = 25;
 
-const QUADRANT_COLORS: Record<string, string> = {
-  'Volume Focus': '#ef4444',
-  'Optimal Growth': '#22c55e',
-  'Undertrained': '#f59e0b',
-  'Strength Focus': '#3b82f6',
+const SCORE_COLORS = ['#ef4444', '#f59e0b', '#22c55e'] as const;
+
+const getDotColor = (total: number) => {
+  if (total <= 30) return SCORE_COLORS[0];
+  if (total <= 60) return SCORE_COLORS[1];
+  return SCORE_COLORS[2];
 };
 
+const volColor = (v: number) => v <= 15 ? '#ef4444' : v <= 35 ? '#f59e0b' : '#22c55e';
+const progColor = (v: number) => v <= 11 ? '#ef4444' : v <= 22 ? '#f59e0b' : '#22c55e';
+
 interface ChartPoint {
   name: string;
   muscleId: string;
@@ -100,24 +104,26 @@ export const HypertrophyScatterCard: React.FC<HypertrophyScatterCardProps> = ({
     const d: ChartPoint | undefined = payload[0]?.payload;
     if (!d) return null;
 
-    const quadrantDesc: Record<string, string> = {
-      'Volume Focus': 'High volume but lagging strength progress, add progressive overload',
-      'Optimal Growth': 'High volume + strong progress, ideal for hypertrophy',
-      'Undertrained': 'Low volume + low progress, increase training frequency',
-      'Strength Focus': 'Strong progress despite low volume, great strength adaptation',
+    const quadrantDesc: Record<string, { desc: string; advice: string }> = {
+      'Volume Focus': { desc: 'High volume but lagging strength progress', advice: 'Focus on progressive overload, add weight or reps slowly' },
+      'Optimal Growth': { desc: 'High volume + strong progress, ideal for hypertrophy', advice: 'Keep it up! Maintain this balance for gains' },
+      'Undertrained': { desc: 'Low volume + low progress', advice: 'If prioritizing this muscle, add sets and train 2-3x/week' },
+      'Strength Focus': { desc: 'Strong progress despite low volume', advice: 'Consider increasing volume for more size gains' },
     };
 
+    const q = quadrantDesc[d.quadrant];
     return (
       <div className="rounded-lg px-3 py-2 shadow-2xl border text-xs"
         style={{ backgroundColor: 'rgb(var(--panel-rgb) / 0.95)', borderColor: 'rgb(var(--border-rgb) / 0.5)', color: 'var(--text-primary)' }}>
         <p className="font-semibold mb-1.5">{d.name} <span className="opacity-60 font-normal">({d.total}/100)</span></p>
         <div className="flex items-center gap-3 mb-1.5">
-          <span style={{ color: '#3b82f6' }}>Progress <b>{d.progress}/40</b></span>
-          <span style={{ color: '#22c55e' }}>Volume <b>{d.volume}/50</b></span>
+          <span>Progress <b style={{ color: progColor(d.progress) }}>{d.progress}/40</b></span>
+          <span>Volume <b style={{ color: volColor(d.volume) }}>{d.volume}/50</b></span>
         </div>
-        <div className="border-t pt-1.5" style={{ borderColor: 'rgb(var(--border-rgb) / 0.3)' }}>
-          <p className="font-semibold text-[10px]" style={{ color: QUADRANT_COLORS[d.quadrant] }}>{d.quadrant}</p>
-          <p className="text-[9px] opacity-70 leading-tight mt-0.5">{quadrantDesc[d.quadrant]}</p>
+        <div className="border-t pt-1.5 text-slate-400" style={{ borderColor: 'rgb(var(--border-rgb) / 0.3)' }}>
+          <p className="font-semibold text-[10px]">{d.quadrant}</p>
+          <p className="text-[9px] leading-tight mt-0.5">{q.desc}</p>
+          <p className="text-[8px] mt-1">{q.advice}</p>
         </div>
       </div>
     );
@@ -142,7 +148,7 @@ export const HypertrophyScatterCard: React.FC<HypertrophyScatterCardProps> = ({
         </div>
       </div>
 
-      <div className="flex-1 px-3 pb-3 relative" style={{ minHeight: 350 }}>
+      <div className="flex-1 w-full relative" style={{ minHeight: 300 }}>
         {hypertrophyData.length > 0 ? (
           <>
             <ResponsiveContainer width="100%" height="100%">
@@ -160,16 +166,19 @@ export const HypertrophyScatterCard: React.FC<HypertrophyScatterCardProps> = ({
                 <RechartsTooltip content={<CustomScatterTooltip />} />
 
                 <Scatter data={chartData} shape="circle" isAnimationActive={false}>
-                  {chartData.map((entry) => (
-                    <Cell
-                      key={entry.muscleId}
-                      fill={QUADRANT_COLORS[entry.quadrant]}
-                      fillOpacity={0.85}
-                      stroke={QUADRANT_COLORS[entry.quadrant]}
-                      strokeWidth={0.5}
-                      style={{ cursor: 'pointer' }}
-                    />
-                  ))}
+                  {chartData.map((entry) => {
+                    const c = getDotColor(entry.total);
+                    return (
+                      <Cell
+                        key={entry.muscleId}
+                        fill={c}
+                        fillOpacity={0.85}
+                        stroke={c}
+                        strokeWidth={0.5}
+                        style={{ cursor: 'pointer' }}
+                      />
+                    );
+                  })}
                 </Scatter>
 
                 <Scatter data={chartData.filter(d => labeledIds.includes(d.muscleId))} shape="circle" isAnimationActive={false} legendType="none"
@@ -187,6 +196,7 @@ export const HypertrophyScatterCard: React.FC<HypertrophyScatterCardProps> = ({
           <div className="text-[10px] text-slate-500 py-4 text-center">No muscle data available.</div>
         )}
       </div>
+   
     </div>
   );
 };
diff --git a/frontend/components/muscleAnalysis/ui/LifetimeAchievementCard.tsx b/frontend/components/muscleAnalysis/ui/LifetimeAchievementCard.tsx
@@ -242,6 +242,9 @@ const FactorProgressBar: React.FC<{
 
 const SCATTER_DOT_COLORS = ['#22c55e', '#84cc16', '#f59e0b', '#f97316', '#ef4444'];
 
+const volColor = (v: number) => v <= 15 ? '#ef4444' : v <= 35 ? '#f59e0b' : '#22c55e';
+const progColor = (v: number) => v <= 11 ? '#ef4444' : v <= 22 ? '#f59e0b' : '#22c55e';
+
 const HypertrophyScatterChart: React.FC<{ data: MuscleHypertrophyData[] }> = ({ data }) => {
   const chartData = useMemo(() =>
     data.map(m => ({
@@ -295,8 +298,8 @@ const HypertrophyScatterChart: React.FC<{ data: MuscleHypertrophyData[] }> = ({
         }}>
         <p className="font-semibold mb-1.5">{d?.name} <span className="opacity-60 font-normal">({d?.total}/100)</span></p>
         <div className="flex items-center gap-3">
-          <span style={{ color: '#3b82f6' }}>Progress <b>{d?.progress}/40</b></span>
-          <span style={{ color: '#22c55e' }}>Volume <b>{d?.volume}/50</b></span>
+          <span>Progress <b style={{ color: progColor(d?.progress) }}>{d?.progress}/40</b></span>
+          <span>Volume <b style={{ color: volColor(d?.volume) }}>{d?.volume}/50</b></span>
         </div>
       </div>
     );
diff --git a/frontend/components/ui/Tooltip.tsx b/frontend/components/ui/Tooltip.tsx
@@ -7,7 +7,8 @@ export interface TooltipData {
   mouseX?: number;
   mouseY?: number;
   title: string;
-  body: string;
+  body?: string;
+  bodySections?: Array<{ text: string; color: string }>;
   footer?: string;
   status: AnalysisStatus | 'default';
   metrics?: Array<{ label: string; value: string }>;
@@ -18,7 +19,7 @@ interface TooltipProps {
 }
 
 export const Tooltip: React.FC<TooltipProps> = ({ data }) => {
-  const { rect, mouseX, mouseY, title, body, footer, status, metrics } = data;
+  const { rect, mouseX, mouseY, title, body, bodySections, footer, status, metrics } = data;
   const theme = TOOLTIP_THEMES[status];
   
   let positionStyle;
@@ -42,7 +43,15 @@ export const Tooltip: React.FC<TooltipProps> = ({ data }) => {
         <div className="flex items-center gap-2 mb-1 pb-1 border-b border-white/10">
           <span className="font-bold uppercase text-[10px] tracking-wider">{title}</span>
         </div>
-        <div className="text-xs leading-relaxed opacity-90 whitespace-pre-line break-words">{body}</div>
+        {bodySections ? (
+          <div className="text-xs leading-relaxed whitespace-pre-line break-words">
+            {bodySections.map((s, i) => (
+              <div key={i} style={{ color: s.color }}>{s.text}</div>
+            ))}
+          </div>
+        ) : body ? (
+          <div className="text-xs leading-relaxed opacity-90 whitespace-pre-line break-words">{body}</div>
+        ) : null}
         {metrics && metrics.length > 0 && (
           <div className="mt-3 pt-2 border-t border-white/10 flex gap-4 text-xs font-mono opacity-80">
             {metrics.map((m, i) => (
