astryx-dracula 0.2.0 → 0.3.0

package/templates/dashboard-portfolio.tsx

@@ -1,22 +1,29 @@
 // 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)
+
+/**
+ * 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';
-import {Grid, GridSpan} from '@astryxdesign/core/Grid';
-import {Icon} from '@astryxdesign/core/Icon';
+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 {Badge} from '@astryxdesign/core/Badge';
 import {Button} from '@astryxdesign/core/Button';
-import {Table, proportional} from '@astryxdesign/core/Table';
+import {Table, proportional, pixel} from '@astryxdesign/core/Table';
 import type {TableColumn} from '@astryxdesign/core/Table';
 import {Divider} from '@astryxdesign/core/Divider';
-import {ArrowUp, ArrowDown} from 'lucide-react';
+import {MetricDelta} from 'astryx-dracula/shared/metric-delta';
+import {Sparkline, type SparkPoint} from 'astryx-dracula/shared/sparkline';
+import {CHART_PANEL_STYLE} from 'astryx-dracula/shared/chart-panel-style';
+import {ChartLabel} from 'astryx-dracula/shared/chart-labels';
 
 // ============= DATA =============
 
@@ -135,20 +142,22 @@ const topAssets = [
 ];
 
 // 96 points per series = one tick every 15 minutes across a 24h window.
-// Deterministic LCG so the sparklines are stable across renders.
+// 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,
-): number[] {
+): SparkPoint[] {
   let s = seed >>> 0;
   const rand = () => {
     s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
     return s / 0x100000000;
   };
-  const points: number[] = [];
+  const points: SparkPoint[] = [];
   let drift = 0;
   for (let i = 0; i < N; i++) {
     const t = i / (N - 1);
@@ -163,7 +172,7 @@ function genSpark(
     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(trend + wave + drift + spike);
+    points.push({id: `${seed}-${i}`, value: trend + wave + drift + spike});
   }
   return points;
 }
@@ -244,7 +253,7 @@ interface StockRow extends Record<string, unknown> {
   dailyPts: number;
   dailyPct: number;
   weekChg: number;
-  spark: number[];
+  spark: SparkPoint[];
 }
 
 const trendingStocks: StockRow[] = [
@@ -342,61 +351,55 @@ const trendingStocks: StockRow[] = [
 
 // ============= CHART COMPONENTS =============
 
+// Downsample the 407 daily points to one bar per week
+const portfolioBars = portfolioData.filter((_, i) => i % 7 === 0);
+const PORTFOLIO_MIN = 200000;
+const PORTFOLIO_MAX = 320000;
+const PORTFOLIO_BASE = 168;
+const PORTFOLIO_PLOT = 138;
+const PORTFOLIO_LEFT = 52;
+const PORTFOLIO_WIDTH = 500;
+const PORTFOLIO_STEP = PORTFOLIO_WIDTH / portfolioBars.length;
+const portfolioYFor = (v: number) =>
+  PORTFOLIO_BASE - ((v - PORTFOLIO_MIN) / (PORTFOLIO_MAX - PORTFOLIO_MIN)) * PORTFOLIO_PLOT;
+const PORTFOLIO_Y_TICKS = [200000, 240000, 280000, 320000];
+
 function PortfolioChart() {
-  // Downsample the 407 daily points to one bar per week
-  const bars = portfolioData.filter((_, i) => i % 7 === 0);
-  const min = 200000;
-  const max = 320000;
-  const base = 168;
-  const plot = 138;
-  const left = 52;
-  const width = 500;
-  const step = width / bars.length;
-  const yFor = (v: number) => base - ((v - min) / (max - min)) * plot;
-  const yTicks = [200000, 240000, 280000, 320000];
   return (
     <VStack gap={3}>
-      <Card
-        padding={3}
-        style={{
-          backgroundColor: 'var(--color-background)',
-          border: 'var(--border-width) solid var(--color-separator)',
-        }}>
+      <Card padding={4} style={CHART_PANEL_STYLE}>
         <svg
           viewBox="0 0 560 210"
           width="100%"
           role="img"
           aria-label="Vault value by week, October to October">
-          {yTicks.map(t => (
+          {PORTFOLIO_Y_TICKS.map(t => (
             <g key={t}>
               <line
-                x1={left}
-                y1={yFor(t)}
-                x2={left + width}
-                y2={yFor(t)}
+                x1={PORTFOLIO_LEFT}
+                y1={portfolioYFor(t)}
+                x2={PORTFOLIO_LEFT + PORTFOLIO_WIDTH}
+                y2={portfolioYFor(t)}
                 stroke="var(--color-separator)"
                 strokeDasharray="3 3"
                 opacity={0.5}
               />
-              <text
-                x={left - 8}
-                y={yFor(t) + 4}
-                textAnchor="end"
-                fontSize={13}
-                fill="var(--color-text-paragraph)"
-                fontFamily="var(--font-family-mono)">
+              <ChartLabel
+                x={PORTFOLIO_LEFT - 8}
+                y={portfolioYFor(t) + 4}
+                textAnchor="end">
                 ${(t / 1000).toFixed(0)}k
-              </text>
+              </ChartLabel>
             </g>
           ))}
-          {bars.map((d, i) => {
-            const h = Math.max(3, base - yFor(d.value));
+          {portfolioBars.map((d, i) => {
+            const h = Math.max(3, PORTFOLIO_BASE - portfolioYFor(d.value));
             return (
               <rect
-                key={i}
-                x={left + i * step + 1}
-                y={base - h}
-                width={Math.max(2, step - 2)}
+                key={d.label}
+                x={PORTFOLIO_LEFT + i * PORTFOLIO_STEP + 1}
+                y={PORTFOLIO_BASE - h}
+                width={Math.max(2, PORTFOLIO_STEP - 2)}
                 height={h}
                 rx={4}
                 fill="var(--dracula-green)"
@@ -404,26 +407,21 @@ function PortfolioChart() {
             );
           })}
           {xAxisTicks.map(m => (
-            <text
+            <ChartLabel
               key={m}
-              x={left + (m / 12) * width}
+              x={PORTFOLIO_LEFT + (m / 12) * PORTFOLIO_WIDTH}
               y={192}
-              textAnchor={m === 12 ? 'end' : 'middle'}
-              fontSize={13}
-              fill="var(--color-text-paragraph)"
-              fontFamily="var(--font-family-mono)">
+              textAnchor={m === 12 ? 'end' : 'middle'}>
               {xAxisLabels[m] ?? ''}
-            </text>
+            </ChartLabel>
           ))}
-          <text
-            x={left + width - 4}
-            y={yFor(294200) - 8}
+          <ChartLabel
+            x={PORTFOLIO_LEFT + PORTFOLIO_WIDTH - 4}
+            y={portfolioYFor(294200) - 8}
             textAnchor="end"
-            fontSize={13}
-            fill="var(--color-text-highlight)"
-            fontFamily="var(--font-family-mono)">
+            fill="var(--color-text-highlight)">
             $294k
-          </text>
+          </ChartLabel>
         </svg>
       </Card>
       <Text type="supporting" color="secondary">
@@ -435,38 +433,6 @@ function PortfolioChart() {
 
 // ============= CARD COMPONENTS =============
 
-function Sparkline({data, positive}: {data: number[]; positive: boolean}) {
-  const max = Math.max(...data);
-  const min = Math.min(...data);
-  const range = Math.max(1, max - min);
-  const step = 300 / data.length;
-  return (
-    <svg
-      viewBox="0 0 300 40"
-      width="100%"
-      height={40}
-      role="img"
-      aria-label="Twenty-four hour trend">
-      {data.map((v, i) => {
-        const h = Math.max(3, ((v - min) / range) * 32);
-        return (
-          <rect
-            key={i}
-            x={i * step}
-            y={36 - h}
-            width={Math.max(1.5, step - 1)}
-            height={h}
-            rx={4}
-            fill={
-              positive ? 'var(--dracula-green)' : 'var(--dracula-red)'
-            }
-          />
-        );
-      })}
-    </svg>
-  );
-}
-
 function MarketCard({
   name,
   ticker,
@@ -480,7 +446,7 @@ function MarketCard({
   price: string;
   change: string;
   positive: boolean;
-  spark: number[];
+  spark: SparkPoint[];
 }) {
   return (
     <Card>
@@ -491,76 +457,35 @@ function MarketCard({
             {ticker}
           </Text>
         </VStack>
-        <Sparkline data={spark} positive={positive} />
+        <Sparkline
+          data={spark}
+          label={`${name} 24-hour trend`}
+          positive={positive}
+          mode="range"
+        />
         <HStack gap={3} vAlign="center">
-          <Text type="display-3" weight="bold" hasTabularNumbers>
+          <Text type="display-3" weight="semibold" hasTabularNumbers>
             {price}
           </Text>
-          <HStack gap={1} vAlign="center">
-            <Icon
-              icon={positive ? ArrowUp : ArrowDown}
-              size="xsm"
-              color={positive ? 'success' : 'error'}
-            />
-            <Text type="body" color="secondary" hasTabularNumbers>
-              {change}
-            </Text>
-          </HStack>
+          <MetricDelta value={change} positive={positive} />
         </HStack>
       </VStack>
     </Card>
   );
 }
 
-function TrendSparkline({data, positive}: {data: number[]; positive: boolean}) {
-  const max = Math.max(...data);
-  const min = Math.min(...data);
-  const range = Math.max(1, max - min);
-  const step = 300 / data.length;
-  return (
-    <svg
-      viewBox="0 0 300 24"
-      width="100%"
-      height={24}
-      role="img"
-      aria-label="Daily trend">
-      {data.map((v, i) => {
-        const h = Math.max(2, ((v - min) / range) * 18);
-        return (
-          <rect
-            key={i}
-            x={i * step}
-            y={21 - h}
-            width={Math.max(1.5, step - 1)}
-            height={h}
-            rx={4}
-            fill={
-              positive ? 'var(--dracula-green)' : 'var(--dracula-red)'
-            }
-          />
-        );
-      })}
-    </svg>
-  );
-}
-
-function ColoredValue({
-  value,
-  isPositive,
-}: {
-  value: string;
-  isPositive: boolean;
-}) {
-  return <Badge label={value} variant={isPositive ? 'green' : 'red'} />;
-}
+// Signed figures render with an explicit sign, so the value reads as a move
+// even before the tone does.
+const formatSigned = (value: number, digits: number, suffix = '') =>
+  `${value >= 0 ? '+' : ''}${value.toFixed(digits)}${suffix}`;
 
 const trendingColumns: TableColumn<StockRow>[] = [
   {
     key: 'ticker',
     header: 'Ticker',
-    width: proportional(1),
+    width: pixel(88),
     renderCell: (row: StockRow) => (
-      <Text type="body" weight="bold">
+      <Text type="body" weight="semibold" maxLines={1}>
         {row.ticker}
       </Text>
     ),
@@ -568,49 +493,58 @@ const trendingColumns: TableColumn<StockRow>[] = [
   {
     key: 'price',
     header: 'Price',
-    width: proportional(1),
+    width: pixel(88),
     renderCell: (row: StockRow) => (
-      <Text type="body" hasTabularNumbers>
+      <Text type="body" hasTabularNumbers maxLines={1}>
         {row.price}
       </Text>
     ),
   },
   {
     key: 'dailyPts',
-    header: 'Daily Chg (pts)',
-    width: proportional(1),
-    renderCell: (row: StockRow) => {
-      const isPos = row.dailyPts >= 0;
-      const formatted = (isPos ? '+' : '') + row.dailyPts.toFixed(2);
-      return <ColoredValue value={formatted} isPositive={isPos} />;
-    },
+    header: 'Chg (pts)',
+    width: pixel(104),
+    renderCell: (row: StockRow) => (
+      <MetricDelta
+        value={formatSigned(row.dailyPts, 2)}
+        positive={row.dailyPts >= 0}
+      />
+    ),
   },
   {
     key: 'dailyPct',
-    header: 'Daily Chg (%)',
-    width: proportional(1),
-    renderCell: (row: StockRow) => {
-      const isPos = row.dailyPct >= 0;
-      const formatted = (isPos ? '+' : '') + row.dailyPct.toFixed(2) + '%';
-      return <ColoredValue value={formatted} isPositive={isPos} />;
-    },
+    header: 'Chg (%)',
+    width: pixel(96),
+    renderCell: (row: StockRow) => (
+      <MetricDelta
+        value={formatSigned(row.dailyPct, 2, '%')}
+        positive={row.dailyPct >= 0}
+      />
+    ),
   },
   {
     key: 'weekChg',
-    header: '52W Chg (%)',
-    width: proportional(1),
-    renderCell: (row: StockRow) => {
-      const isPos = row.weekChg >= 0;
-      const formatted = (isPos ? '+' : '') + row.weekChg.toFixed(1) + '%';
-      return <ColoredValue value={formatted} isPositive={isPos} />;
-    },
+    header: '52W (%)',
+    width: pixel(96),
+    renderCell: (row: StockRow) => (
+      <MetricDelta
+        value={formatSigned(row.weekChg, 1, '%')}
+        positive={row.weekChg >= 0}
+      />
+    ),
   },
   {
     key: 'spark',
     header: '24h Trend',
-    width: proportional(1),
+    width: proportional(1, {minWidth: 96}),
     renderCell: (row: StockRow) => (
-      <TrendSparkline data={row.spark} positive={row.dailyPct >= 0} />
+      <Sparkline
+        data={row.spark}
+        label={`${row.ticker} 24-hour trend`}
+        positive={row.dailyPct >= 0}
+        mode="range"
+        isCompact
+      />
     ),
   },
 ];
@@ -630,19 +564,14 @@ function MetricCard({
   return (
     <Card>
       <VStack gap={2}>
-        <Heading level={4}>{label}</Heading>
+        <Text type="supporting" color="secondary">
+          {label}
+        </Text>
         <HStack gap={2} vAlign="center">
-          <Heading level={2}>{value}</Heading>
-          <HStack gap={1} vAlign="center">
-            <Icon
-              icon={positive ? ArrowUp : ArrowDown}
-              size="xsm"
-              color={positive ? 'success' : 'error'}
-            />
-            <Text type="body" color="secondary" hasTabularNumbers>
-              {change}
-            </Text>
-          </HStack>
+          <Text type="display-3" weight="semibold" hasTabularNumbers>
+            {value}
+          </Text>
+          <MetricDelta value={change} positive={positive} />
         </HStack>
         <Text type="supporting" color="secondary">
           {caption}
@@ -665,7 +594,7 @@ function AssetRow({
 }) {
   return (
     <ListItem
-      label={<Text weight="bold">{ticker}</Text>}
+      label={<Text weight="semibold">{ticker}</Text>}
       description={name}
       href="#/templates/dashboard-portfolio"
       startContent={<Avatar name={ticker} size="md" />}
@@ -674,10 +603,7 @@ function AssetRow({
           <Text type="body" hasTabularNumbers>
             {value}
           </Text>
-          <Badge
-            label={change}
-            variant={change.startsWith('-') ? 'red' : 'green'}
-          />
+          <MetricDelta value={change} positive={!change.startsWith('-')} />
         </VStack>
       }
     />
@@ -720,43 +646,35 @@ export default function DashboardPortfolio() {
 
             {/* KPI metric cards */}
             <Grid columns={{minWidth: 280, repeat: 'fit'}} gap={4}>
-              {Array.from({length: Math.ceil(metrics.length / 2)}, (_, i) => (
-                <Grid key={i} columns={{minWidth: 280, repeat: 'fit'}} gap={4}>
-                  {metrics.slice(i * 2, i * 2 + 2).map(m => (
-                    <MetricCard key={m.label} {...m} />
-                  ))}
-                </Grid>
+              {metrics.map(m => (
+                <MetricCard key={m.label} {...m} />
               ))}
             </Grid>
 
-            {/* Chart + Top assets */}
-            <Grid columns={{minWidth: 280, max: 4}} gap={4}>
-              <GridSpan columns={3}>
-                <Card>
-                  <VStack gap={4}>
-                    <HStack hAlign="between" vAlign="center">
-                      <Heading level={3}>Vault value</Heading>
-                      <Link href="#/templates/dashboard-portfolio">View details</Link>
-                    </HStack>
-                    <PortfolioChart />
-                  </VStack>
-                </Card>
-              </GridSpan>
-              <GridSpan columns={1}>
-                <Card>
-                  <VStack gap={4}>
-                    <HStack hAlign="between" vAlign="center">
-                      <Heading level={3}>Top holdings</Heading>
-                      <Link href="#/templates/dashboard-portfolio">View all</Link>
-                    </HStack>
-                    <List density="spacious">
-                      {topAssets.map(asset => (
-                        <AssetRow key={asset.ticker} {...asset} />
-                      ))}
-                    </List>
-                  </VStack>
-                </Card>
-              </GridSpan>
+            {/* Chart + Top holdings */}
+            <Grid columns={{minWidth: 280, repeat: 'fit'}} gap={4}>
+              <Card>
+                <VStack gap={4}>
+                  <HStack hAlign="between" vAlign="center">
+                    <Heading level={2}>Vault value</Heading>
+                    <Link href="#/templates/dashboard-portfolio">
+                      View details
+                    </Link>
+                  </HStack>
+                  <PortfolioChart />
+                </VStack>
+              </Card>
+              <VStack gap={4}>
+                <HStack hAlign="between" vAlign="center">
+                  <Heading level={2}>Top holdings</Heading>
+                  <Link href="#/templates/dashboard-portfolio">View all</Link>
+                </HStack>
+                <List density="spacious">
+                  {topAssets.map(asset => (
+                    <AssetRow key={asset.ticker} {...asset} />
+                  ))}
+                </List>
+              </VStack>
             </Grid>
 
             <Divider />
@@ -769,11 +687,11 @@ export default function DashboardPortfolio() {
                   Past 24 hours under moonlight
                 </Text>
               </VStack>
-              <Button label="View more" variant="secondary" size="lg" />
+              <Button label="View more" variant="secondary" size="md" />
             </HStack>
 
             {/* Market index cards */}
-            <Grid columns={{minWidth: 320, repeat: 'fit'}} gap={4}>
+            <Grid columns={{minWidth: 280, repeat: 'fit'}} gap={4}>
               {marketIndices.map(m => (
                 <MarketCard key={m.ticker} {...m} />
               ))}
@@ -782,11 +700,12 @@ export default function DashboardPortfolio() {
             {/* Trending stocks table */}
             <Card>
               <VStack gap={4}>
-                <Heading level={3}>Trending Stocks</Heading>
+                <Heading level={3}>Trending stocks</Heading>
                 <Table<StockRow>
                   data={trendingStocks}
                   columns={trendingColumns}
                   idKey="id"
+                  textOverflow="truncate"
                   hasHover
                   dividers="rows"
                 />