astryx-dracula 0.4.0 → 0.5.0

package/templates/dashboard-portfolio.tsx

@@ -1,13 +1,10 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 // XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L[h=fill] > LC[p=6] > V[g=6] > (H[j=between a=center] > Hd"The night vault"[level=1] + DM"1 year") + (G[c={min:280} g=4] > (C > V[g=2] > Tx"Total value"[t=supporting] + (H[g=2] > Tx"$294,200"[t=display-3] + Tx"+14.8%"[t=body]))*4) + (G[c={min:280} g=4] > (C > V[g=4] > (H[j=between] > Hd"Vault value"[level=2] + Lk"View details") + (C > V[g=3] > Tx"Weekly closes"[t=supporting])) + (V[g=4] > (H[j=between] > Hd"Top holdings"[level=2] + Lk"View all") + UL)) + D + (H[j=between a=start] > (V[g=1] > Hd"Market at midnight"[level=2] + Tx"Past 24 hours under moonlight"[t=body]) + B"View more") + (G[c={min:280} g=4] > (C > V[g=3] > Hd"Index"[level=3] + Tx"$5,200"[t=body])*8) + (C > V[g=4] > Hd"Trending stocks"[level=3] + T)
+//   L[h=fill] > LC[p=6] > V[g=6] > (H[j=between a=center] > Hd"The night vault"[level=1] + Tx"1 year"[t=body]) + (G[c={min:280} g=4] > (C > V[g=2] > Tx"Total value"[t=supporting] + (H[g=2] > Tx"$294,200"[t=display-3] + Tx"+14.8%"[t=body]))*4) + (G[c={min:280} g=4] > (C > V[g=4] > (H[j=between] > Hd"Vault value"[level=2] + Lk"View details") + (C > V[g=3] > Tx"Weekly closes"[t=supporting])) + (V[g=4] > (H[j=between] > Hd"Top holdings"[level=2] + Lk"View all") + UL)) + D + (H[j=between a=start] > (V[g=1] > Hd"Market at midnight"[level=2] + Tx"Past 24 hours under moonlight"[t=body]) + B"View more") + (G[c={min:280} g=4] > (C > V[g=3] > Hd"Index"[level=3] + Tx"$5,200"[t=body])*8) + (C > V[g=4] > Hd"Trending stocks"[level=3] + T)
 
 /**
  * Portfolio Dashboard — the night vault: KPI tiles, a weekly value chart, the holdings list, and the market board. (Frame/responsive/container: see XLE header above.)
  */
-
-import {useState} from 'react';
-
 import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
 import {Text, Heading} from '@astryxdesign/core/Text';
 import {Card} from '@astryxdesign/core/Card';
@@ -15,10 +12,10 @@ import {Grid} from '@astryxdesign/core/Grid';
 import {Link} from '@astryxdesign/core/Link';
 import {Avatar} from '@astryxdesign/core/Avatar';
 import {List, ListItem} from '@astryxdesign/core/List';
-import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
 import {Button} from '@astryxdesign/core/Button';
-import {Table, proportional, pixel} from '@astryxdesign/core/Table';
-import type {TableColumn} from '@astryxdesign/core/Table';
+import {proportional, pixel} from '@astryxdesign/core/Table';
+import type {TableColumn, PixelWidth} from '@astryxdesign/core/Table';
+import {MetricCard, TableCard} from 'astryx-dracula/shared/metric-card';
 import {Divider} from '@astryxdesign/core/Divider';
 import {MetricDelta} from 'astryx-dracula/shared/metric-delta';
 import {Sparkline, type SparkPoint} from 'astryx-dracula/shared/sparkline';
@@ -142,39 +139,13 @@ const topAssets = [
 ];
 
 // 96 points per series = one tick every 15 minutes across a 24h window.
-// Deterministic LCG so the sparklines are stable across renders. Each point
-// carries the slot it was generated for, so the bars key off data rather than
-// off the array position.
-function genSpark(
-  seed: number,
-  start: number,
-  end: number,
-  volatility: number,
-  N: number = 96,
-): SparkPoint[] {
-  let s = seed >>> 0;
-  const rand = () => {
-    s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
-    return s / 0x100000000;
-  };
-  const points: SparkPoint[] = [];
-  let drift = 0;
-  for (let i = 0; i < N; i++) {
-    const t = i / (N - 1);
-    const trend = start + (end - start) * t;
-    // Multiple overlaid waves at different frequencies for session-like rhythm
-    // plus high-frequency chop.
-    const wave =
-      Math.sin(t * Math.PI * 2.3 + seed * 0.13) * volatility * 1.4 +
-      Math.sin(t * Math.PI * 5.7 + seed * 0.41) * volatility * 0.9 +
-      Math.sin(t * Math.PI * 13.1 + seed * 0.07) * volatility * 0.5;
-    // Loosely-correlated random walk so adjacent ticks jitter rather than glide.
-    drift = drift * 0.55 + (rand() - 0.5) * volatility * 2.2;
-    // Occasional sharper spike to mimic news-driven moves.
-    const spike = rand() < 0.04 ? (rand() - 0.5) * volatility * 4 : 0;
-    points.push({id: `${seed}-${i}`, value: trend + wave + drift + spike});
-  }
-  return points;
+// Static arrays: the dashboard metric tiles already establish the toSparkSeries
+// precedent (static number rows + stable ids), so these print the same LCG
+// output the generator produced instead of rerunning it per render. Every
+// sample carries the slot it was generated for, so the bars key off data
+// rather than off the array position.
+function toSparkSeries(seed: number, values: number[]): SparkPoint[] {
+  return values.map((value, i) => ({id: `${seed}-${i}`, value}));
 }
 
 // Market index cards — 24h sparkline data (every 15min, 96 points)
@@ -185,7 +156,8 @@ const marketIndices = [
     price: '43,821.67',
     change: '+0.42%',
     positive: true,
-    spark: genSpark(1337, 78, 84, 3.2),
+    // prettier-ignore
+    spark: toSparkSeries(1337, [77.87, 75.96, 76.35, 77.99, 78.95, 77.57, 78.14, 75.12, 74.24, 74.03, 72.88, 71.93, 74.65, 71.43, 69.56, 74.19, 72.66, 72.02, 76.09, 74.07, 75.82, 78.14, 77.91, 80.15, 79.18, 76.96, 76.57, 81.07, 83.59, 83.21, 81.58, 83.82, 84.82, 88.56, 87.03, 89.64, 87.35, 89.63, 90.67, 87.45, 87.4, 86.09, 87.85, 82.63, 81.81, 84.78, 82.26, 83.25, 80.04, 80.63, 83.56, 84.28, 83.96, 84.49, 80.85, 79.3, 80.45, 84.58, 81.83, 83.45, 87.92, 90.46, 89.1, 88.1, 90.6, 87.26, 84.82, 84.27, 86.7, 82.89, 84.38, 89.24, 82.39, 82.18, 82.24, 81.38, 82.38, 78.55, 76.91, 75.31, 78.55, 76.46, 73.89, 76.36, 77.01, 79.15, 78.98, 79.79, 78.68, 77.35, 76.01, 84.41, 82.31, 81.97, 80.42, 80.29]),
   },
   {
     name: 'NASDAQ',
@@ -193,7 +165,8 @@ const marketIndices = [
     price: '18,942.18',
     change: '-0.50%',
     positive: false,
-    spark: genSpark(2042, 86, 78, 3.8),
+    // prettier-ignore
+    spark: toSparkSeries(2042, [88.89, 94.82, 92.53, 93.22, 91.88, 91.07, 90.86, 89.3, 89.42, 85.69, 88.02, 82.52, 84.79, 86.08, 81.15, 78.83, 79.56, 80.01, 83.14, 84.1, 88.09, 84.29, 82.48, 84.9, 84.15, 86.04, 87.12, 86.85, 82.29, 84.8, 81.87, 79.88, 79.57, 78.77, 82.32, 83.19, 85.35, 86.71, 87.68, 80, 74.7, 73.28, 77.07, 71.96, 68.62, 70.7, 73.72, 74.67, 68.28, 71.29, 69.49, 71.73, 72.22, 73.75, 77.29, 79.86, 76.32, 78.94, 78.77, 77.52, 78.62, 80.01, 85.09, 86.36, 83.71, 88.49, 89.99, 86.02, 89.11, 83.46, 84.72, 85.43, 85.97, 84.73, 86.18, 88.06, 82.82, 82.32, 87.12, 82.77, 79.32, 84.78, 84.46, 80.3, 84.21, 82.15, 84.84, 75.1, 82.07, 85.92, 78.74, 82.77, 82.99, 87.84, 88.57, 90.07]),
   },
   {
     name: 'S&P 500',
@@ -201,7 +174,8 @@ const marketIndices = [
     price: '5,918.33',
     change: '+0.21%',
     positive: true,
-    spark: genSpark(3155, 71, 75, 2.8),
+    // prettier-ignore
+    spark: toSparkSeries(3155, [73.95, 72.03, 71.08, 71.6, 73.2, 72.67, 74.14, 73.45, 76.38, 75.1, 77.61, 79.72, 77.52, 79.27, 78.25, 75.63, 76.23, 76.58, 72.42, 72.4, 69.84, 66.76, 67.12, 67.73, 64.69, 68.27, 65.01, 64.02, 66.05, 69.6, 68.7, 70.05, 69.54, 65.52, 66.42, 66.58, 69.36, 71.28, 71.66, 73.08, 70.32, 69.85, 72.45, 72.94, 72.02, 74.88, 71.61, 71.7, 72.69, 74.3, 74.46, 71.99, 70.45, 70.11, 72.53, 69.96, 71.6, 72, 74.4, 70.78, 72.74, 71.44, 71.37, 73.54, 71.05, 72.86, 70.79, 69.5, 73.43, 72.36, 73.76, 75.05, 77.58, 77.17, 78.5, 82.25, 78.78, 78.42, 78.07, 82.01, 78.82, 78.48, 78.36, 79.8, 79, 76.6, 75.18, 75.82, 78.39, 80.59, 80.93, 79.71, 78.44, 74.41, 74.09, 75.98]),
   },
   {
     name: 'NYSE Composite',
@@ -209,7 +183,8 @@ const marketIndices = [
     price: '19,752.41',
     change: '-0.20%',
     positive: false,
-    spark: genSpark(4287, 70, 65, 3.0),
+    // prettier-ignore
+    spark: toSparkSeries(4287, [64.45, 61.11, 62.04, 60.88, 61.84, 66.42, 65.95, 68.68, 66.53, 66.2, 64.61, 66.78, 65.37, 64.69, 64.48, 60.48, 70.11, 69.62, 67.37, 70.31, 73.61, 74.74, 71.95, 68.83, 68.85, 66.69, 65.72, 64.01, 65.91, 64.38, 68.51, 63.62, 68.71, 66.45, 66.61, 70.22, 67.86, 68.96, 72.44, 74.53, 74.4, 75.52, 72.63, 69.2, 67.72, 72.46, 75.34, 74.64, 76.13, 73.74, 73.53, 74.47, 76.73, 76.4, 74.91, 74.34, 73.92, 70.94, 71.5, 68.68, 68.44, 65.97, 68.07, 69.63, 70.45, 68.45, 65.12, 63.93, 64.71, 66.68, 61.08, 58, 61.79, 63.61, 65.05, 62.4, 68.06, 65.87, 66.63, 68.18, 68.06, 67.32, 64.23, 65.72, 63.78, 62.09, 63.94, 61.55, 59.14, 59.95, 58.74, 59.44, 61.25, 63.96, 60.62, 59.61]),
   },
   {
     name: 'NVIDIA Corp.',
@@ -217,7 +192,8 @@ const marketIndices = [
     price: '$177.39',
     change: '+0.93%',
     positive: true,
-    spark: genSpark(5519, 60, 67, 3.6),
+    // prettier-ignore
+    spark: toSparkSeries(5519, [66.26, 68.28, 68.39, 65.49, 62.97, 68.15, 71.28, 67.14, 71.53, 68.43, 69.39, 73.97, 67.92, 57.1, 61.58, 64.45, 59.15, 55.38, 56.78, 60.73, 63.46, 59.3, 56.58, 56.55, 59.43, 58.93, 57.88, 57.25, 56.11, 61.79, 62.87, 65.09, 66.15, 59.93, 60.64, 63.97, 65.3, 65.5, 66.02, 67.5, 67.43, 61.9, 59.69, 59.48, 59.88, 61.71, 59.95, 54.99, 52.18, 51.09, 52.02, 53.2, 55.88, 60.58, 56.65, 58.89, 55.9, 58.03, 60.31, 62.14, 57.94, 61.24, 60.94, 59.09, 64.39, 63.59, 64.45, 65.84, 66.83, 69.01, 68.41, 71.9, 74.79, 69.82, 67.76, 68.77, 67.7, 65.13, 62.97, 66.86, 69.31, 69.64, 67.68, 67.14, 67.12, 68.13, 61.27, 66.8, 63.53, 68.48, 64.28, 68.53, 69.09, 66.14, 66.67, 72.57]),
   },
   {
     name: 'Intel Corp.',
@@ -225,7 +201,8 @@ const marketIndices = [
     price: '$50.38',
     change: '+4.89%',
     positive: true,
-    spark: genSpark(6701, 40, 51, 2.6),
+    // prettier-ignore
+    spark: toSparkSeries(6701, [40.29, 36.52, 38.65, 38.66, 38.73, 39.59, 39.74, 40.27, 37.68, 37.74, 38.19, 38.45, 34.69, 33.53, 36.19, 35.7, 37.18, 36.76, 36.8, 38.82, 38.54, 36.97, 38.21, 39.09, 43.08, 45.5, 42.94, 40.59, 40.6, 43.51, 42.51, 44.7, 47.77, 46.53, 44.78, 45.66, 45.29, 47.54, 45.72, 47.71, 47.55, 49.13, 47.53, 43.52, 41.69, 40.58, 41.74, 46.68, 47.53, 49.99, 46.64, 49.91, 49.01, 51.21, 47.53, 45.66, 47.51, 48.7, 50.76, 53.95, 48.88, 50.92, 51.45, 51.69, 49.34, 52.86, 55.07, 51.08, 50.1, 49.78, 49.18, 49.55, 49.15, 45.34, 47.77, 45.99, 43.61, 44.84, 48.01, 46.33, 43.42, 46.93, 46.35, 47.6, 45.09, 45.85, 43.72, 41.2, 42.89, 42.83, 43.48, 46.41, 49.01, 48.49, 48.68, 51.78]),
   },
   {
     name: 'Nokia Corp.',
@@ -233,7 +210,8 @@ const marketIndices = [
     price: '$8.82',
     change: '+6.65%',
     positive: true,
-    spark: genSpark(7823, 30, 41, 2.4),
+    // prettier-ignore
+    spark: toSparkSeries(7823, [27.46, 26.98, 25.8, 25.95, 22.92, 23.25, 27.1, 28.27, 26.12, 28.96, 28.95, 27.78, 29.41, 30.28, 30.85, 32.49, 31.78, 32.11, 34.47, 36.23, 36.59, 37.96, 35.38, 36.79, 37.14, 37.87, 36.61, 35.2, 39.04, 40.18, 41.09, 41.92, 38.86, 36.21, 33.95, 35.27, 35.61, 35.38, 37.29, 37.02, 36.76, 34.27, 34.9, 34.79, 33.48, 34.53, 35.99, 38.24, 37.76, 39.23, 38.1, 36.08, 35.04, 36.38, 37.29, 39.2, 41.21, 42.11, 41.35, 38.23, 36.64, 37.97, 39.03, 39.17, 36.98, 35.69, 33.04, 31.86, 38.61, 35.08, 35.33, 36.35, 34.24, 36.73, 32.08, 32.11, 32.87, 31.23, 33.2, 33.36, 32.8, 31.44, 32.34, 29.65, 36.02, 38.33, 39.14, 42.58, 44.72, 43.06, 40.97, 40.47, 41.21, 40.21, 40.21, 40.11]),
   },
   {
     name: 'Tesla, Inc.',
@@ -241,7 +219,8 @@ const marketIndices = [
     price: '$360.59',
     change: '-5.42%',
     positive: false,
-    spark: genSpark(8945, 90, 76, 4.2),
+    // prettier-ignore
+    spark: toSparkSeries(8945, [89.21, 88.42, 91.95, 94.9, 97.2, 93.76, 95.02, 93.99, 96.41, 93.71, 92.92, 95.4, 91.94, 97.48, 96.94, 95.45, 92.4, 93.76, 96.33, 97.28, 96.74, 92.99, 92.26, 90.48, 93.76, 92.11, 86.82, 83.2, 87.28, 88.08, 86.09, 81.46, 77.09, 79.91, 85.21, 80.13, 85.23, 80.03, 81.33, 84.31, 84.52, 84.57, 81.19, 81.81, 75.98, 77.99, 77.95, 75.93, 76.87, 81.09, 83.04, 82.12, 78.12, 78.69, 77.63, 79.19, 74.18, 75.44, 77.03, 77.73, 71.89, 76.98, 74.25, 77.95, 77.4, 81.04, 78.54, 77.9, 78.6, 76.53, 73.58, 71.02, 71.9, 70.44, 76.85, 77.69, 76.22, 81.78, 82.78, 85.32, 87.59, 91.37, 88.55, 86.27, 84.09, 86.52, 85.12, 84.64, 86.29, 82.58, 81.71, 86.28, 88.26, 83.47, 80.1, 79.92]),
   },
 ];
 
@@ -264,7 +243,8 @@ const trendingStocks: StockRow[] = [
     dailyPts: 1.35,
     dailyPct: 0.72,
     weekChg: 22.4,
-    spark: genSpark(11023, 60, 70, 2.6, 48),
+    // prettier-ignore
+    spark: toSparkSeries(11023, [62.59, 62.87, 66.28, 66.94, 63.05, 60.71, 60.87, 63.01, 65.63, 66.72, 66.14, 65.67, 63.28, 63.24, 64.03, 65.31, 69.18, 67.03, 67.02, 65.16, 63.09, 63.23, 59.79, 57.91, 60.58, 62.7, 59.12, 60.59, 60.07, 64.53, 64.61, 68.12, 66.44, 67.6, 65.99, 65.37, 67.56, 64.35, 65.35, 66.14, 65.38, 65.53, 63.89, 68.35, 70.22, 72.78, 73.31, 77.18]),
   },
   {
     id: '2',
@@ -273,7 +253,8 @@ const trendingStocks: StockRow[] = [
     dailyPts: 3.2,
     dailyPct: 0.78,
     weekChg: 18.6,
-    spark: genSpark(12591, 55, 65, 2.4, 48),
+    // prettier-ignore
+    spark: toSparkSeries(12591, [52.61, 54.67, 54.37, 52.39, 53.13, 54.24, 53.77, 56.96, 54.21, 56.36, 52.87, 52.91, 52.91, 53.06, 54.05, 56.77, 55.22, 53.5, 55.24, 55.21, 55.57, 57.52, 58.11, 60.48, 62.67, 64.05, 67.62, 67.64, 70.11, 69.7, 67.71, 66.07, 64.31, 61.5, 60.25, 60.01, 62.04, 63.71, 64.69, 65.02, 63.57, 64.63, 65.9, 61.94, 64.71, 63.25, 60.84, 62.99]),
   },
   {
     id: '3',
@@ -282,7 +263,8 @@ const trendingStocks: StockRow[] = [
     dailyPts: 1.65,
     dailyPct: 0.93,
     weekChg: 45.2,
-    spark: genSpark(13744, 40, 68, 3.8, 48),
+    // prettier-ignore
+    spark: toSparkSeries(13744, [42.97, 43.84, 42.55, 43.07, 41.45, 45.69, 47.46, 45.15, 47.75, 43.08, 44.46, 37.8, 37.94, 35.72, 35.14, 32.33, 41.42, 45.22, 46.61, 45, 44.99, 48.42, 56.57, 59.5, 54.67, 55.56, 53.34, 54.15, 56.29, 57.95, 59.47, 59.02, 58.39, 61.6, 59.14, 66.24, 68.92, 69.13, 73.86, 76.15, 73.14, 74.89, 71.4, 71.95, 74.65, 69.61, 63.98, 63.68]),
   },
   {
     id: '4',
@@ -291,7 +273,8 @@ const trendingStocks: StockRow[] = [
     dailyPts: -0.8,
     dailyPct: -0.43,
     weekChg: 15.3,
-    spark: genSpark(14882, 70, 63, 2.5, 48),
+    // prettier-ignore
+    spark: toSparkSeries(14882, [65.57, 69.23, 72.54, 70.58, 69.7, 67.79, 66.66, 69.84, 72.05, 73.69, 71.33, 72.56, 68.97, 67.02, 69.25, 68.04, 70.12, 73.38, 71.49, 70.24, 70.59, 69.81, 70.5, 66.45, 63.72, 61.63, 63.06, 60.22, 61.87, 61.91, 61.4, 61.43, 62.03, 63.27, 65.56, 61.76, 62.77, 62.52, 63.4, 65.86, 61.54, 60.71, 61.09, 66, 62.46, 64, 67.5, 65.32]),
   },
   {
     id: '5',
@@ -300,7 +283,8 @@ const trendingStocks: StockRow[] = [
     dailyPts: 2.1,
     dailyPct: 1.37,
     weekChg: 12.8,
-    spark: genSpark(15967, 50, 60, 2.7, 48),
+    // prettier-ignore
+    spark: toSparkSeries(15967, [50.19, 52.48, 56.14, 57.13, 53.58, 52.4, 49.76, 51.71, 53.73, 52.83, 47.01, 48.64, 46.49, 44.71, 45.84, 47.51, 51.21, 51.75, 47.07, 53.25, 53.02, 56.04, 53.9, 54.27, 53.09, 56.7, 54.86, 53.61, 54.39, 55.27, 58.44, 59.21, 58.89, 60.97, 63.5, 64.41, 64.28, 65.48, 63.86, 62.88, 65.82, 64.06, 60.89, 57.93, 60.15, 57.94, 57.86, 54.45]),
   },
   {
     id: '6',
@@ -309,7 +293,8 @@ const trendingStocks: StockRow[] = [
     dailyPts: 4.5,
     dailyPct: 0.9,
     weekChg: 35.1,
-    spark: genSpark(17105, 45, 61, 3.0, 48),
+    // prettier-ignore
+    spark: toSparkSeries(17105, [46.75, 47.76, 46.13, 45.91, 45.34, 49.3, 50.87, 48.9, 46.85, 49.07, 50.88, 54.37, 54.34, 54.17, 52.62, 52.71, 55.65, 55.18, 57.28, 59.71, 56.07, 57.36, 56.8, 52.95, 49.59, 50.35, 50.11, 48.92, 51.6, 52.4, 50.29, 52.17, 54.87, 55.44, 54.27, 52.27, 53.76, 55.31, 55.75, 56.16, 57.8, 58.73, 54.6, 53.58, 55.27, 55.62, 62.45, 62.94]),
   },
   {
     id: '7',
@@ -318,7 +303,8 @@ const trendingStocks: StockRow[] = [
     dailyPts: -20.67,
     dailyPct: -5.42,
     weekChg: -8.3,
-    spark: genSpark(18249, 90, 64, 4.4, 48),
+    // prettier-ignore
+    spark: toSparkSeries(18249, [83.75, 78.44, 81.1, 79.12, 76.61, 84.38, 84.64, 87.7, 86.31, 80.02, 74.82, 75.1, 75.36, 73.06, 74.86, 75.38, 78.07, 78.02, 75.42, 81.25, 85.54, 86.68, 84.46, 86.89, 80.57, 84.1, 82.48, 85.83, 87.06, 79.95, 74.26, 68.41, 64.98, 70.44, 71.17, 74.21, 69.56, 73.59, 70.47, 70.24, 65.12, 64.41, 69.18, 62.39, 63.5, 59.78, 59.96, 60.64]),
   },
   {
     id: '8',
@@ -327,7 +313,8 @@ const trendingStocks: StockRow[] = [
     dailyPts: 2.35,
     dailyPct: 4.89,
     weekChg: -12.5,
-    spark: genSpark(19388, 65, 57, 2.8, 48),
+    // prettier-ignore
+    spark: toSparkSeries(19388, [71.45, 75.23, 76.21, 71.96, 69.34, 69.92, 69.21, 65.68, 62.87, 64.07, 64.44, 62.98, 59.15, 61.12, 62.74, 64.13, 62.29, 65.14, 60.86, 58.23, 56.22, 57.6, 60.39, 57.87, 57.04, 54.84, 55.29, 56.38, 56.92, 58.48, 61.09, 59.01, 58.65, 61.44, 61.55, 58.75, 61.48, 60.6, 58.99, 61.4, 56.7, 57.42, 59.98, 57.74, 64.44, 59.11, 59.16, 59.45]),
   },
   {
     id: '9',
@@ -336,7 +323,8 @@ const trendingStocks: StockRow[] = [
     dailyPts: -1.2,
     dailyPct: -0.73,
     weekChg: 28.7,
-    spark: genSpark(20471, 50, 63, 2.9, 48),
+    // prettier-ignore
+    spark: toSparkSeries(20471, [44.8, 46.66, 43.7, 46.12, 47.65, 50.65, 48.05, 52.96, 54.41, 54.91, 53.77, 49.18, 50.01, 52.14, 49.46, 49.81, 52.08, 52.56, 50.02, 50.61, 56.27, 56.79, 62.63, 61.99, 65.99, 62.88, 59.6, 57.44, 58.61, 62.78, 62, 59.58, 57.36, 54.92, 59.1, 55.37, 64.03, 63.13, 63.88, 65.3, 65.22, 60.4, 62.84, 60.12, 59.42, 65.11, 58, 57.8]),
   },
   {
     id: '10',
@@ -345,7 +333,8 @@ const trendingStocks: StockRow[] = [
     dailyPts: 5.4,
     dailyPct: 0.87,
     weekChg: 42.1,
-    spark: genSpark(21556, 42, 58, 2.6, 48),
+    // prettier-ignore
+    spark: toSparkSeries(21556, [42.07, 41.72, 43.08, 43.95, 42.71, 43, 47.8, 51.53, 49.82, 51.72, 51.75, 54.86, 54.64, 54.28, 55.52, 55.2, 53.51, 49.34, 45.58, 51.95, 44.7, 46.57, 48.92, 47.16, 49.62, 47.2, 47.47, 49.84, 51.12, 53.9, 53.39, 51.34, 51.56, 47.93, 50.31, 50.69, 50.32, 50.04, 53.93, 52.8, 52.46, 55.01, 56.66, 58.11, 59.39, 60.81, 62.81, 64]),
   },
 ];
 
@@ -479,6 +468,17 @@ function MarketCard({
 const formatSigned = (value: number, digits: number, suffix = '') =>
   `${value >= 0 ? '+' : ''}${value.toFixed(digits)}${suffix}`;
 
+const chgColumns: Array<{
+  key: 'dailyPts' | 'dailyPct' | 'weekChg';
+  header: string;
+  width: PixelWidth;
+  digits: number;
+  suffix: string;
+}> = [
+  {key: 'dailyPts', header: 'Chg (pts)', width: pixel(104), digits: 2, suffix: ''},
+  {key: 'dailyPct', header: 'Chg (%)', width: pixel(96), digits: 2, suffix: '%'},
+  {key: 'weekChg', header: '52W (%)', width: pixel(96), digits: 1, suffix: '%'},
+];
 const trendingColumns: TableColumn<StockRow>[] = [
   {
     key: 'ticker',
@@ -500,39 +500,17 @@ const trendingColumns: TableColumn<StockRow>[] = [
       </Text>
     ),
   },
-  {
-    key: 'dailyPts',
-    header: 'Chg (pts)',
-    width: pixel(104),
-    renderCell: (row: StockRow) => (
-      <MetricDelta
-        value={formatSigned(row.dailyPts, 2)}
-        positive={row.dailyPts >= 0}
-      />
-    ),
-  },
-  {
-    key: 'dailyPct',
-    header: 'Chg (%)',
-    width: pixel(96),
-    renderCell: (row: StockRow) => (
-      <MetricDelta
-        value={formatSigned(row.dailyPct, 2, '%')}
-        positive={row.dailyPct >= 0}
-      />
-    ),
-  },
-  {
-    key: 'weekChg',
-    header: '52W (%)',
-    width: pixel(96),
-    renderCell: (row: StockRow) => (
-      <MetricDelta
-        value={formatSigned(row.weekChg, 1, '%')}
-        positive={row.weekChg >= 0}
-      />
-    ),
-  },
+  ...chgColumns.map(column => ({
+    key: column.key,
+    header: column.header,
+    width: column.width,
+    renderCell: (row: StockRow) => {
+      const value = row[column.key] as number;
+      return (
+        <MetricDelta value={formatSigned(value, column.digits, column.suffix)} positive={value >= 0} />
+      );
+    },
+  })),
   {
     key: 'spark',
     header: '24h Trend',
@@ -549,37 +527,6 @@ const trendingColumns: TableColumn<StockRow>[] = [
   },
 ];
 
-function MetricCard({
-  value,
-  change,
-  label,
-  caption,
-}: {
-  value: string;
-  change: string;
-  label: string;
-  caption: string;
-}) {
-  const positive = !change.startsWith('-');
-  return (
-    <Card>
-      <VStack gap={2}>
-        <Text type="supporting" color="secondary">
-          {label}
-        </Text>
-        <HStack gap={2} vAlign="center">
-          <Text type="display-3" weight="semibold" hasTabularNumbers>
-            {value}
-          </Text>
-          <MetricDelta value={change} positive={positive} />
-        </HStack>
-        <Text type="supporting" color="secondary">
-          {caption}
-        </Text>
-      </VStack>
-    </Card>
-  );
-}
 
 function AssetRow({
   ticker,
@@ -610,13 +557,9 @@ function AssetRow({
   );
 }
 
-// ============= SIDENAV =============
-
 // ============= MAIN COMPONENT =============
 
 export default function DashboardPortfolio() {
-  const [timeRange, setTimeRange] = useState('1 year');
-
   return (
     <Layout
       height="fill"
@@ -626,22 +569,9 @@ export default function DashboardPortfolio() {
             {/* Page header */}
             <HStack hAlign="between" vAlign="center">
               <Heading level={1}>The night vault</Heading>
-              <DropdownMenu
-                button={{
-                  label: timeRange,
-                  variant: 'secondary',
-                  size: 'lg',
-                }}
-                hasChevron
-                items={[
-                  {label: '1 month', onClick: () => setTimeRange('1 month')},
-                  {label: '3 months', onClick: () => setTimeRange('3 months')},
-                  {label: '6 months', onClick: () => setTimeRange('6 months')},
-                  {label: '1 year', onClick: () => setTimeRange('1 year')},
-                  {label: '5 years', onClick: () => setTimeRange('5 years')},
-                  {label: 'All time', onClick: () => setTimeRange('All time')},
-                ]}
-              />
+              <Text type="body" color="secondary">
+                1 year
+              </Text>
             </HStack>
 
             {/* KPI metric cards */}
@@ -698,19 +628,11 @@ export default function DashboardPortfolio() {
             </Grid>
 
             {/* Trending stocks table */}
-            <Card>
-              <VStack gap={4}>
-                <Heading level={3}>Trending stocks</Heading>
-                <Table<StockRow>
-                  data={trendingStocks}
-                  columns={trendingColumns}
-                  idKey="id"
-                  textOverflow="truncate"
-                  hasHover
-                  dividers="rows"
-                />
-              </VStack>
-            </Card>
+            <TableCard
+              title="Trending stocks"
+              data={trendingStocks}
+              columns={trendingColumns}
+            />
           </VStack>
         </LayoutContent>
       }

package/templates/dashboard.tsx

@@ -11,12 +11,10 @@ import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
 import {Text, Heading} from '@astryxdesign/core/Text';
 import {Card} from '@astryxdesign/core/Card';
 import {Button} from '@astryxdesign/core/Button';
-import {ProgressBar} from '@astryxdesign/core/ProgressBar';
 import {Grid} from '@astryxdesign/core/Grid';
-import {Table, proportional, pixel} from '@astryxdesign/core/Table';
+import {proportional, pixel} from '@astryxdesign/core/Table';
 import type {TableColumn} from '@astryxdesign/core/Table';
 import {Divider} from '@astryxdesign/core/Divider';
-import {Link} from '@astryxdesign/core/Link';
 import {Icon} from '@astryxdesign/core/Icon';
 
 // Same-route hash: demo links stay focusable anchors without escaping the
@@ -28,8 +26,8 @@ const SELF_HASH = '#/templates/dashboard';
 import {RefreshCw, Square} from 'lucide-react';
 import {ChartLegend} from 'astryx-dracula/shared/chart-legend';
 import {CHART_HUES} from 'astryx-dracula/shared/chart-hues';
-import {MetricDelta} from 'astryx-dracula/shared/metric-delta';
-import {Sparkline, type SparkPoint} from 'astryx-dracula/shared/sparkline';
+import type {SparkPoint} from 'astryx-dracula/shared/sparkline';
+import {MetricCard, TableCard, BarCell, CountCell} from 'astryx-dracula/shared/metric-card';
 import {CHART_PANEL_STYLE} from 'astryx-dracula/shared/chart-panel-style';
 
 // ============= DATA =============
@@ -352,38 +350,22 @@ const topPagesColumns: TableColumn<PageRow>[] = [
     header: 'Views',
     width: proportional(1),
     renderCell: (item: PageRow) => (
-      <VStack gap={1}>
-        <ProgressBar
-          value={item.views}
-          max={topPagesMaxViews}
-          label={`${item.page} views`}
-          isLabelHidden
-        />
-        <Text type="body" hasTabularNumbers maxLines={1}>
-          {formatCount(item.views)}
-        </Text>
-      </VStack>
+      <BarCell label={`${item.page} views`} value={item.views} max={topPagesMaxViews}>
+        {formatCount(item.views)}
+      </BarCell>
     ),
   },
   {
     key: 'newUsers',
     header: 'New Users',
     width: pixel(104),
-    renderCell: (item: PageRow) => (
-      <Text hasTabularNumbers maxLines={1}>
-        {item.newUsers}
-      </Text>
-    ),
+    renderCell: (item: PageRow) => <CountCell>{item.newUsers}</CountCell>,
   },
   {
     key: 'avgTime',
     header: 'Avg. Time',
     width: pixel(104),
-    renderCell: (item: PageRow) => (
-      <Text hasTabularNumbers maxLines={1}>
-        {item.avgTime}
-      </Text>
-    ),
+    renderCell: (item: PageRow) => <CountCell>{item.avgTime}</CountCell>,
   },
 ];
 
@@ -418,50 +400,27 @@ const topEventsColumns: TableColumn<EventRow>[] = [
     header: 'Count',
     width: proportional(1),
     renderCell: (item: EventRow) => (
-      <VStack gap={1}>
-        <ProgressBar
-          value={item.count}
-          max={topEventsMaxCount}
-          label={`${item.count}`}
-          isLabelHidden
-        />
-        <Text type="body" hasTabularNumbers maxLines={1}>
-          {formatCount(item.count)}
-        </Text>
-      </VStack>
+      <BarCell label={`${item.count}`} value={item.count} max={topEventsMaxCount}>
+        {formatCount(item.count)}
+      </BarCell>
     ),
   },
   {
     key: 'users',
     header: 'Users',
     width: pixel(72),
-    renderCell: (item: EventRow) => (
-      <Text hasTabularNumbers maxLines={1}>
-        {formatCount(item.users)}
-      </Text>
-    ),
+    renderCell: (item: EventRow) => <CountCell>{formatCount(item.users)}</CountCell>,
   },
   {
     key: 'newUsers',
     header: 'New Users',
     width: pixel(104),
-    renderCell: (item: EventRow) => (
-      <Text hasTabularNumbers maxLines={1}>
-        {formatCount(item.newUsers)}
-      </Text>
-    ),
+    renderCell: (item: EventRow) => <CountCell>{formatCount(item.newUsers)}</CountCell>,
   },
 ];
 
 // ============= CHART COMPONENTS =============
 
-// Chart series colors: desktop glows orange, mobile glows cyan. Sourced from
-// the shared categorical hues so data encoding can never reach for purple.
-const chartColors = {
-  desktop: CHART_HUES.orange,
-  mobile: CHART_HUES.cyan,
-};
-
 // Legend rows go through shared/chart-legend.tsx, which makes `label` a
 // REQUIRED field so a hue can never ship without the word that names it.
 
@@ -496,7 +455,7 @@ function ActiveUsersChart() {
                   width={14}
                   height={hAll - hDesktop}
                   rx={4}
-                  fill={chartColors.mobile}
+                  fill={CHART_HUES.cyan}
                 />
                 <rect
                   x={x}
@@ -504,7 +463,7 @@ function ActiveUsersChart() {
                   width={14}
                   height={hDesktop}
                   rx={4}
-                  fill={chartColors.desktop}
+                  fill={CHART_HUES.orange}
                 />
                 {(i % 6 === 0 || i === bars.length - 1) && (
                   <text
@@ -535,8 +494,8 @@ function ActiveUsersChart() {
       </Card>
       <ChartLegend
         entries={[
-          {label: 'Desktop', color: chartColors.desktop},
-          {label: 'Mobile', color: chartColors.mobile},
+          {label: 'Desktop', color: CHART_HUES.orange},
+          {label: 'Mobile', color: CHART_HUES.cyan},
         ]}
         gap={4}
         caption={
@@ -551,44 +510,6 @@ function ActiveUsersChart() {
 
 // ============= CARD COMPONENTS =============
 
-function MetricCard({
-  label,
-  value,
-  change,
-  positive,
-  sparkline,
-}: {
-  label: string;
-  value: string;
-  change: string;
-  positive: boolean;
-  sparkline: SparkPoint[];
-}) {
-  return (
-    <Card>
-      <VStack gap={2}>
-        <Text type="supporting" color="secondary">
-          {label}
-        </Text>
-        <HStack gap={2} vAlign="center">
-          <Text type="display-3" weight="semibold" hasTabularNumbers>
-            {value}
-          </Text>
-          <MetricDelta value={change} positive={positive} />
-        </HStack>
-        <Text type="supporting" color="secondary">
-          Last 30 days vs. Previous
-        </Text>
-        <Sparkline
-          data={sparkline}
-          label={`${label} thirty-day trend`}
-          positive={positive}
-        />
-      </VStack>
-    </Card>
-  );
-}
-
 function StackedBarCard({
   title,
   data,
@@ -652,44 +573,6 @@ function StackedBarCard({
   );
 }
 
-// ============= TABLE COMPONENTS =============
-
-function TableCard<T extends {id: string}>({
-  title,
-  linkLabel,
-  linkHref,
-  data,
-  columns,
-}: {
-  title: string;
-  linkLabel: string;
-  linkHref: string;
-  data: T[];
-  columns: TableColumn<T>[];
-}) {
-  return (
-    <Card>
-      <VStack gap={6}>
-        <HStack hAlign="between" vAlign="center">
-          <Heading level={3}>{title}</Heading>
-          <Link href={linkHref}>{linkLabel}</Link>
-        </HStack>
-        <Table<T>
-          data={data}
-          columns={columns}
-          idKey="id"
-          density="compact"
-          dividers="rows"
-          textOverflow="truncate"
-          hasHover
-        />
-      </VStack>
-    </Card>
-  );
-}
-
-// ============= SIDENAV =============
-
 // ============= MAIN COMPONENT =============
 
 // A definite ancestor, so `Layout height="fill"` (Layout.tsx:58-63, height: