refactor: replace bar chart with SVG line chart for usage stats

pfillion42 · claude · pfillion42 · commit c2c71e06db0a · 2026-02-14T23:44:52.000-05:00
Switch UsageChart from CSS bar chart to SVG line chart with area fill,
data points with tooltips, grid lines, and axis labels. Better suited
for visualizing temporal trends.

Co-Authored-By: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/client/src/components/UsageChart.tsx b/client/src/components/UsageChart.tsx
@@ -5,6 +5,9 @@ interface UsageChartProps {
   accesses: UsageDataPoint[];
 }
 
+const CHART_HEIGHT = 140;
+const CHART_PADDING = { top: 10, right: 10, bottom: 30, left: 40 };
+
 export function UsageChart({ creations, accesses }: UsageChartProps) {
   // Fusionner toutes les dates uniques et trier par ordre ASC
   const allDates = Array.from(new Set([
@@ -23,7 +26,7 @@ export function UsageChart({ creations, accesses }: UsageChartProps) {
     ...accesses.map(a => a.count),
   );
 
-  // Limiter a 30 barres visibles (les plus recentes)
+  // Limiter a 30 points visibles (les plus recents)
   const visibleDates = allDates.slice(-30);
 
   if (visibleDates.length === 0) {
@@ -34,112 +37,201 @@ export function UsageChart({ creations, accesses }: UsageChartProps) {
     );
   }
 
+  const drawWidth = 100 - CHART_PADDING.left - CHART_PADDING.right;
+  const drawHeight = CHART_HEIGHT - CHART_PADDING.top - CHART_PADDING.bottom;
+
+  // Calculer les positions X et Y pour chaque point
+  function getX(i: number): number {
+    if (visibleDates.length === 1) return CHART_PADDING.left + drawWidth / 2;
+    return CHART_PADDING.left + (i / (visibleDates.length - 1)) * drawWidth;
+  }
+
+  function getY(count: number): number {
+    return CHART_PADDING.top + drawHeight - (count / maxCount) * drawHeight;
+  }
+
+  // Construire les paths SVG pour les 2 series
+  function buildPath(dataMap: Map<string, number>): string {
+    return visibleDates.map((date, i) => {
+      const count = dataMap.get(date) || 0;
+      const x = getX(i);
+      const y = getY(count);
+      return `${i === 0 ? 'M' : 'L'} ${x} ${y}`;
+    }).join(' ');
+  }
+
+  // Construire le path de l'aire sous la courbe
+  function buildAreaPath(dataMap: Map<string, number>): string {
+    const linePath = buildPath(dataMap);
+    const lastX = getX(visibleDates.length - 1);
+    const firstX = getX(0);
+    const baseY = CHART_PADDING.top + drawHeight;
+    return `${linePath} L ${lastX} ${baseY} L ${firstX} ${baseY} Z`;
+  }
+
+  const creationPath = buildPath(creationMap);
+  const accessPath = buildPath(accessMap);
+  const creationAreaPath = buildAreaPath(creationMap);
+  const accessAreaPath = buildAreaPath(accessMap);
+
+  // Graduations Y (3-4 niveaux)
+  const yTicks: number[] = [];
+  const step = Math.ceil(maxCount / 3);
+  for (let v = 0; v <= maxCount; v += step) {
+    yTicks.push(v);
+  }
+  if (!yTicks.includes(maxCount)) yTicks.push(maxCount);
+
+  // Labels X (afficher max ~6 labels pour eviter le chevauchement)
+  const labelStep = Math.max(1, Math.floor(visibleDates.length / 6));
+
   return (
     <div>
       {/* Legende */}
       <div data-testid="usage-legend" style={{
         display: 'flex',
         gap: '16px',
-        marginBottom: '16px',
+        marginBottom: '12px',
         fontSize: '12px',
         color: 'var(--text-secondary)',
       }}>
         <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
           <div style={{
-            width: '12px',
-            height: '12px',
+            width: '16px',
+            height: '3px',
             borderRadius: '2px',
-            background: 'var(--accent-gradient, var(--accent-primary))',
+            background: 'var(--accent-primary)',
           }} />
           <span>Creations</span>
         </div>
         <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
           <div style={{
-            width: '12px',
-            height: '12px',
+            width: '16px',
+            height: '3px',
             borderRadius: '2px',
             backgroundColor: 'var(--info)',
           }} />
           <span>Acces</span>
         </div>
       </div>
 
-      {/* Barres */}
-      <div style={{
-        display: 'flex',
-        alignItems: 'flex-end',
-        gap: '4px',
-        height: '120px',
-        overflow: 'hidden',
-      }}>
-        {visibleDates.map(date => {
+      {/* Line chart SVG */}
+      <svg
+        data-testid="usage-line-chart"
+        viewBox={`0 0 100 ${CHART_HEIGHT}`}
+        preserveAspectRatio="none"
+        style={{ width: '100%', height: `${CHART_HEIGHT}px` }}
+      >
+        {/* Lignes de grille horizontales */}
+        {yTicks.map(v => {
+          const y = getY(v);
+          return (
+            <g key={`tick-${v}`}>
+              <line
+                x1={CHART_PADDING.left}
+                y1={y}
+                x2={CHART_PADDING.left + drawWidth}
+                y2={y}
+                stroke="var(--border-default)"
+                strokeWidth="0.2"
+                strokeDasharray="1,1"
+              />
+              <text
+                x={CHART_PADDING.left - 2}
+                y={y + 1.2}
+                textAnchor="end"
+                fontSize="3.5"
+                fill="var(--text-muted)"
+              >
+                {v}
+              </text>
+            </g>
+          );
+        })}
+
+        {/* Aire sous les courbes (fond transparent) */}
+        <path
+          d={creationAreaPath}
+          fill="var(--accent-primary)"
+          opacity="0.1"
+        />
+        <path
+          d={accessAreaPath}
+          fill="var(--info)"
+          opacity="0.08"
+        />
+
+        {/* Ligne creations */}
+        <path
+          data-testid="line-creation"
+          d={creationPath}
+          fill="none"
+          stroke="var(--accent-primary)"
+          strokeWidth="0.6"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+
+        {/* Ligne acces */}
+        <path
+          data-testid="line-access"
+          d={accessPath}
+          fill="none"
+          stroke="var(--info)"
+          strokeWidth="0.6"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+
+        {/* Points sur les courbes */}
+        {visibleDates.map((date, i) => {
           const creationCount = creationMap.get(date) || 0;
           const accessCount = accessMap.get(date) || 0;
-          const creationHeight = (creationCount / maxCount) * 100;
-          const accessHeight = (accessCount / maxCount) * 100;
+          return (
+            <g key={date}>
+              {creationCount > 0 && (
+                <circle
+                  data-testid="point-creation"
+                  cx={getX(i)}
+                  cy={getY(creationCount)}
+                  r="0.8"
+                  fill="var(--accent-primary)"
+                >
+                  <title>{`${date} - Creations: ${creationCount}`}</title>
+                </circle>
+              )}
+              {accessCount > 0 && (
+                <circle
+                  data-testid="point-access"
+                  cx={getX(i)}
+                  cy={getY(accessCount)}
+                  r="0.8"
+                  fill="var(--info)"
+                >
+                  <title>{`${date} - Acces: ${accessCount}`}</title>
+                </circle>
+              )}
+            </g>
+          );
+        })}
 
+        {/* Labels X */}
+        {visibleDates.map((date, i) => {
+          if (i % labelStep !== 0 && i !== visibleDates.length - 1) return null;
           return (
-            <div key={date} style={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              flex: 1,
-              minWidth: 0,
-              height: '100%',
-              justifyContent: 'flex-end',
-            }}>
-              <div style={{
-                display: 'flex',
-                gap: '1px',
-                alignItems: 'flex-end',
-                width: '100%',
-                height: '100%',
-              }}>
-                {/* Barre creation */}
-                <div
-                  data-testid="bar-creation"
-                  title={`Creations: ${creationCount}`}
-                  style={{
-                    flex: 1,
-                    height: `${Math.max(creationHeight, creationCount > 0 ? 4 : 0)}%`,
-                    background: 'var(--accent-gradient, var(--accent-primary))',
-                    borderRadius: '2px 2px 0 0',
-                    minHeight: creationCount > 0 ? '4px' : '0',
-                    transition: 'height 0.3s ease',
-                  }}
-                />
-                {/* Barre acces */}
-                <div
-                  data-testid="bar-access"
-                  title={`Acces: ${accessCount}`}
-                  style={{
-                    flex: 1,
-                    height: `${Math.max(accessHeight, accessCount > 0 ? 4 : 0)}%`,
-                    backgroundColor: 'var(--info)',
-                    borderRadius: '2px 2px 0 0',
-                    minHeight: accessCount > 0 ? '4px' : '0',
-                    opacity: 0.8,
-                    transition: 'height 0.3s ease',
-                  }}
-                />
-              </div>
-              {/* Label date (abrege) */}
-              <div style={{
-                fontSize: '9px',
-                color: 'var(--text-muted)',
-                marginTop: '4px',
-                textAlign: 'center',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                maxWidth: '100%',
-              }}>
-                {date.length > 7 ? date.slice(5) : date}
-              </div>
-            </div>
+            <text
+              key={`label-${date}`}
+              x={getX(i)}
+              y={CHART_HEIGHT - 5}
+              textAnchor="middle"
+              fontSize="3"
+              fill="var(--text-muted)"
+            >
+              {date.length > 7 ? date.slice(5) : date}
+            </text>
           );
         })}
-      </div>
+      </svg>
     </div>
   );
 }
diff --git a/client/tests/UsageChart.test.tsx b/client/tests/UsageChart.test.tsx
@@ -13,16 +13,18 @@ const MOCK_ACCESSES = [
 ];
 
 describe('UsageChart', () => {
-  it('affiche les barres de creation', () => {
+  it('affiche la ligne de creation', () => {
     render(<UsageChart creations={MOCK_CREATIONS} accesses={MOCK_ACCESSES} />);
-    const bars = screen.getAllByTestId('bar-creation');
-    expect(bars.length).toBe(2);
+    const line = screen.getByTestId('line-creation');
+    expect(line).toBeDefined();
+    expect(line.getAttribute('d')).toBeTruthy();
   });
 
-  it('affiche les barres d\'acces', () => {
+  it('affiche la ligne d\'acces', () => {
     render(<UsageChart creations={MOCK_CREATIONS} accesses={MOCK_ACCESSES} />);
-    const bars = screen.getAllByTestId('bar-access');
-    expect(bars.length).toBe(2);
+    const line = screen.getByTestId('line-access');
+    expect(line).toBeDefined();
+    expect(line.getAttribute('d')).toBeTruthy();
   });
 
   it('affiche la legende avec les 2 series', () => {
