feat(killer): switch demo chart to multi-point bars and refresh gif

Author: unadlib

README.md

@@ -253,7 +253,7 @@ pnpm playground
 Then open the playground page and run this prompt:
 
 ```text
-Build an analytics dashboard with a LineChart from recharts and KPI toggle buttons
+Build an analytics dashboard with KPI toggle buttons and a multi-point bar chart
 ```
 
 The playground now uses streaming prompt rendering (`/api/prompt-stream`), so you'll see incremental preview updates before final UI completion.

docs/assets/renderify-streaming-demo.gif

@@ -104,7 +104,7 @@ <h1 class="headline">One-Line Embed: AI Chat Dashboard</h1>
       <div class="layout">
         <section class="panel">
           <div class="chat-bubble">
-            User: Build an analytics dashboard with KPI toggles and chart.
+            User: Build an analytics dashboard with KPI toggles and a multi-point bar chart.
           </div>
           <div class="chat-bubble">
             Assistant emitted RuntimePlan + TSX source. Render immediately.
@@ -177,18 +177,28 @@ <h1 class="headline">One-Line Embed: AI Chat Dashboard</h1>
             "    { day: 'Wed', revenue: 148, users: 52 },",
             "    { day: 'Thu', revenue: 222, users: 74 },",
             "    { day: 'Fri', revenue: 261, users: 91 },",
+            "    { day: 'Sat', revenue: 238, users: 87 },",
+            "    { day: 'Sun', revenue: 312, users: 119 },",
+            "    { day: 'Mon+', revenue: 286, users: 102 },",
+            "    { day: 'Tue+', revenue: 334, users: 128 },",
             "  ], []);",
             "  const key = metric === 'revenue' ? 'revenue' : 'users';",
-            "  const width = 560;",
-            "  const height = 280;",
-            "  const pad = 28;",
+            "  const width = 620;",
+            "  const height = 310;",
+            "  const pad = 30;",
+            "  const chartHeight = height - pad * 2;",
+            "  const chartWidth = width - pad * 2;",
             "  const max = Math.max(...data.map((entry) => entry[key]));",
-            "  const points = data.map((entry, index) => {",
-            "    const x = pad + (index * (width - pad * 2)) / Math.max(1, data.length - 1);",
-            "    const y = height - pad - (entry[key] / Math.max(1, max)) * (height - pad * 2);",
-            "    return { x, y, day: entry.day, value: entry[key] };",
+            "  const gap = 8;",
+            "  const barWidth = Math.max(10, chartWidth / data.length - gap);",
+            "  const bars = data.map((entry, index) => {",
+            "    const value = entry[key];",
+            "    const x = pad + index * (barWidth + gap);",
+            "    const barHeight = (value / Math.max(1, max)) * chartHeight;",
+            "    const y = height - pad - barHeight;",
+            "    return { x, y, barHeight, day: entry.day, value };",
             "  });",
-            "  const polyline = points.map((point) => `${point.x},${point.y}`).join(' ');",
+            "  const axisTicks = 4;",
             "  return (",
             "    <section style={{ fontFamily: 'IBM Plex Sans, sans-serif' }}>",
             "      <h2 style={{ margin: '0 0 6px' }}>Revenue Assistant Dashboard</h2>",
@@ -198,25 +208,31 @@ <h1 class="headline">One-Line Embed: AI Chat Dashboard</h1>
             "        <button type='button' onClick={() => setMetric('users')}>Users</button>",
             "      </div>",
             "      <div style={{ overflowX: 'auto' }}>",
-            "        <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} role='img' aria-label='Metric chart'>",
+            "        <svg width={width} height={height} viewBox={`0 0 ${width} ${height}`} role='img' aria-label='Metric bar chart'>",
+            "          {Array.from({ length: axisTicks + 1 }).map((_, tickIndex) => {",
+            "            const y = pad + (tickIndex * chartHeight) / axisTicks;",
+            "            return <line key={`grid-${tickIndex}`} x1={pad} y1={y} x2={width - pad} y2={y} stroke='#e6edf7' strokeDasharray='4 4' />;",
+            "          })}",
             "          <line x1={pad} y1={height - pad} x2={width - pad} y2={height - pad} stroke='#d1d8e6' />",
             "          <line x1={pad} y1={pad} x2={pad} y2={height - pad} stroke='#d1d8e6' />",
-            "          <polyline",
-            "            fill='none'",
-            "            stroke={metric === 'revenue' ? '#0f766e' : '#1d4ed8'}",
-            "            strokeWidth={3}",
-            "            points={polyline}",
-            "          />",
-            "          {points.map((point) => (",
-            "            <g key={point.day}>",
-            "              <circle cx={point.x} cy={point.y} r={4} fill={metric === 'revenue' ? '#0f766e' : '#1d4ed8'} />",
-            "              <text x={point.x} y={height - 8} textAnchor='middle' fontSize='11' fill='#5c6f88'>{point.day}</text>",
-            "              <text x={point.x} y={point.y - 10} textAnchor='middle' fontSize='11' fill='#2a3f58'>{point.value}</text>",
+            "          {bars.map((bar) => (",
+            "            <g key={bar.day}>",
+            "              <rect",
+            "                x={bar.x}",
+            "                y={bar.y}",
+            "                width={barWidth}",
+            "                height={bar.barHeight}",
+            "                rx={6}",
+            "                fill={metric === 'revenue' ? '#0f766e' : '#1d4ed8'}",
+            "                opacity={0.9}",
+            "              />",
+            "              <text x={bar.x + barWidth / 2} y={height - 9} textAnchor='middle' fontSize='11' fill='#5c6f88'>{bar.day}</text>",
+            "              <text x={bar.x + barWidth / 2} y={Math.max(pad + 12, bar.y - 6)} textAnchor='middle' fontSize='11' fill='#2a3f58'>{bar.value}</text>",
             "            </g>",
             "          ))}",
             "        </svg>",
             "      </div>",
-            "      <p style={{ marginBottom: 0 }}>Current metric: <strong>{metric}</strong></p>",
+            "      <p style={{ marginBottom: 0 }}>Current metric: <strong>{metric}</strong> · Data points: <strong>{data.length}</strong></p>",
             "    </section>",
             "  );",
             "}",