astryx-dracula 0.2.1 → 0.3.0

package/templates/dashboard.tsx

@@ -1,7 +1,12 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 // XLE (canonical structure, validated with `bunx astryx layout check`):
-//   L > LC[p=6] > V[g=6] > (V[g=6] > (H[j=between a=center] > Hd"Awake after dark"[level=3] + B.secondary"Reload") + C[p=3]) + (G[c=4 g=4] > C*4) + D + (H[j=between a=center] > Hd"Night denizens"[level=3] + B.secondary"View more") + (G[c=2 g=4] > C*2) + D + (H[j=between a=center] > Hd"Engagement"[level=3] + B.secondary"View more") + (G[c=2 g=4] > (C > V[g=6] > (H[j=between a=center] > Hd"Top pages"[level=4] + Lk"All pages") + T)*2)
+//   L > LC[p=6] > V[g=6] > (Hd"The night shift"[level=1] + V[g=6] > (H[j=between a=center] > Hd"Awake after dark"[level=2] + B.secondary"Reload") + (V[g=3] > C[p=4] + Tx"Hourly intervals"[t=supporting] + (H[g=6] > (H[g=2 a=center] > Ic + Tx"Desktop"[t=supporting])*2))) + (G[c={min:280} g=4] > (C > V[g=2] > Tx"Moonlit visitors"[t=supporting] + (H[g=2] > Tx"27.3 k"[t=display-3] + Tx"+18.2%"[t=body]) + Tx"Last 30 days vs. Previous"[t=supporting])*4) + D + (H[j=between a=center] > Hd"Night denizens"[level=2] + B.secondary"View more") + (G[c={min:280} g=4] > (C > V[g=4] > Hd"Territory"[level=3] + (H[g=4 wrap] > (V[g=0] > (H[g=2 a=center] > Ic + Tx[t=supporting]) + Tx[t=supporting])*5))*2) + D + (H[j=between a=center] > Hd"Engagement"[level=2] + B.secondary"View more") + (G[c={min:280} g=4] > (C > V[g=6] > (H[j=between a=center] > Hd"Top pages"[level=3] + Lk"All pages") + T)*2)
 
+/**
+ * Analytics Dashboard — the night shift at a glance: live active users, four KPI tiles, audience breakdown strips, and engagement tables. (Frame/responsive/container: see XLE header above.)
+ */
+
+import type {CSSProperties} from 'react';
 import {VStack, HStack, Layout, LayoutContent} from '@astryxdesign/core/Layout';
 import {Text, Heading} from '@astryxdesign/core/Text';
 import {Card} from '@astryxdesign/core/Card';
@@ -16,7 +21,12 @@ import {Icon} from '@astryxdesign/core/Icon';
 
 // ============= ICONS =============
 
-import {RefreshCw, ArrowUp, ArrowDown, Square} from 'lucide-react';
+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 {CHART_PANEL_STYLE} from 'astryx-dracula/shared/chart-panel-style';
 
 // ============= DATA =============
 
@@ -173,20 +183,26 @@ const metrics = [
   },
 ];
 
-// Sparkline data for each metric card (30 days, weekends at indices 5-6, 12-13, 19-20, 26-27)
-const sparklines = [
+// Sparkline data for each metric card (30 days, weekends at indices 5-6, 12-13,
+// 19-20, 26-27). Every sample carries its day, so the bars key off the series
+// rather than off the array slot.
+function toSparkSeries(values: number[]): SparkPoint[] {
+  return values.map((value, day) => ({id: `day-${day + 1}`, value}));
+}
+
+const sparklines: SparkPoint[][] = [
   // Monthly Visitors: +18.2% — declining first 2 weeks, hits bottom around day 14, then sharp recovery
   // prettier-ignore
-  [48, 46, 44, 42, 40, 18, 16, 38, 36, 34, 32, 30, 12, 10, 28, 26, 28, 32, 36, 14, 12, 40, 44, 48, 52, 56, 28, 24, 58, 62],
+  toSparkSeries([48, 46, 44, 42, 40, 18, 16, 38, 36, 34, 32, 30, 12, 10, 28, 26, 28, 32, 36, 14, 12, 40, 44, 48, 52, 56, 28, 24, 58, 62]),
   // Monthly Page Views: +12.5% — flat/choppy first 3 weeks, then kicks up sharply in final week
   // prettier-ignore
-  [36, 38, 35, 37, 36, 14, 12, 38, 36, 34, 37, 35, 12, 10, 36, 34, 36, 35, 38, 14, 12, 40, 44, 50, 54, 56, 26, 22, 58, 60],
+  toSparkSeries([36, 38, 35, 37, 36, 14, 12, 38, 36, 34, 37, 35, 12, 10, 36, 34, 36, 35, 38, 14, 12, 40, 44, 50, 54, 56, 26, 22, 58, 60]),
   // Avg. Session: -14.3% — strong start, holds through week 2, then clear drop-off week 3-4
   // prettier-ignore
-  [58, 56, 60, 58, 62, 30, 26, 60, 58, 62, 60, 58, 28, 24, 56, 54, 50, 46, 42, 18, 14, 38, 36, 34, 32, 30, 10, 8, 28, 26],
+  toSparkSeries([58, 56, 60, 58, 62, 30, 26, 60, 58, 62, 60, 58, 28, 24, 56, 54, 50, 46, 42, 18, 14, 38, 36, 34, 32, 30, 10, 8, 28, 26]),
   // Bounce Rate: -8.7% — high and volatile first half, starts dropping around day 16, steady decline
   // prettier-ignore
-  [52, 56, 50, 54, 58, 62, 60, 54, 52, 56, 50, 54, 60, 58, 50, 48, 46, 44, 40, 46, 44, 38, 36, 34, 36, 32, 38, 36, 30, 28],
+  toSparkSeries([52, 56, 50, 54, 58, 62, 60, 54, 52, 56, 50, 54, 60, 58, 50, 48, 46, 44, 40, 46, 44, 38, 36, 34, 36, 32, 38, 36, 30, 28]),
 ];
 
 // Demographics
@@ -194,48 +210,48 @@ const regionData = [
   {
     label: 'NORAM',
     value: 38,
-    color: 'var(--dracula-cyan)',
+    color: CHART_HUES.cyan,
   },
   {
     label: 'EMEA',
     value: 28,
-    color: 'var(--dracula-orange)',
+    color: CHART_HUES.orange,
   },
   {
     label: 'APAC',
     value: 22,
-    color: 'var(--dracula-green)',
+    color: CHART_HUES.green,
   },
   {
     label: 'LATAM',
     value: 8,
-    color: 'var(--dracula-purple)',
+    color: CHART_HUES.pink,
   },
-  {label: 'Other', value: 4, color: 'var(--dracula-comment)'},
+  {label: 'Other', value: 4, color: CHART_HUES.muted},
 ];
 
 const roleData = [
   {
     label: 'Engineer',
     value: 45,
-    color: 'var(--dracula-cyan)',
+    color: CHART_HUES.cyan,
   },
   {
     label: 'Manager',
     value: 20,
-    color: 'var(--dracula-orange)',
+    color: CHART_HUES.orange,
   },
   {
     label: 'Designer',
     value: 15,
-    color: 'var(--dracula-green)',
+    color: CHART_HUES.green,
   },
   {
     label: 'Data Scientist',
     value: 12,
-    color: 'var(--dracula-purple)',
+    color: CHART_HUES.pink,
   },
-  {label: 'Other', value: 8, color: 'var(--dracula-comment)'},
+  {label: 'Other', value: 8, color: CHART_HUES.muted},
 ];
 
 // Engagement — Top pages
@@ -320,10 +336,13 @@ const topPagesData: PageRow[] = [
   },
 ];
 
+// Counts render with thousands separators in every table cell.
+const formatCount = (value: number) => value.toLocaleString();
+
 const topPagesMaxViews = Math.max(...topPagesData.map(d => d.views));
 
 const topPagesColumns: TableColumn<PageRow>[] = [
-  {key: 'page', header: 'Page', width: pixel(160)},
+  {key: 'page', header: 'Page', width: pixel(112)},
   {
     key: 'views',
     header: 'Views',
@@ -336,8 +355,8 @@ const topPagesColumns: TableColumn<PageRow>[] = [
           label={`${item.page} views`}
           isLabelHidden
         />
-        <Text type="supporting" hasTabularNumbers>
-          {item.views.toLocaleString()}
+        <Text type="body" hasTabularNumbers maxLines={1}>
+          {formatCount(item.views)}
         </Text>
       </VStack>
     ),
@@ -345,17 +364,21 @@ const topPagesColumns: TableColumn<PageRow>[] = [
   {
     key: 'newUsers',
     header: 'New Users',
-    width: pixel(120),
+    width: pixel(104),
     renderCell: (item: PageRow) => (
-      <Text hasTabularNumbers>{item.newUsers}</Text>
+      <Text hasTabularNumbers maxLines={1}>
+        {item.newUsers}
+      </Text>
     ),
   },
   {
     key: 'avgTime',
     header: 'Avg. Time',
-    width: pixel(120),
+    width: pixel(104),
     renderCell: (item: PageRow) => (
-      <Text hasTabularNumbers>{item.avgTime}</Text>
+      <Text hasTabularNumbers maxLines={1}>
+        {item.avgTime}
+      </Text>
     ),
   },
 ];
@@ -385,7 +408,7 @@ const topEventsData: EventRow[] = [
 const topEventsMaxCount = Math.max(...topEventsData.map(d => d.count));
 
 const topEventsColumns: TableColumn<EventRow>[] = [
-  {key: 'event', header: 'Event', width: pixel(160)},
+  {key: 'event', header: 'Event', width: pixel(112)},
   {
     key: 'count',
     header: 'Count',
@@ -398,8 +421,8 @@ const topEventsColumns: TableColumn<EventRow>[] = [
           label={`${item.count}`}
           isLabelHidden
         />
-        <Text type="supporting" hasTabularNumbers>
-          {item.count.toLocaleString()}
+        <Text type="body" hasTabularNumbers maxLines={1}>
+          {formatCount(item.count)}
         </Text>
       </VStack>
     ),
@@ -407,39 +430,36 @@ const topEventsColumns: TableColumn<EventRow>[] = [
   {
     key: 'users',
     header: 'Users',
-    width: pixel(120),
+    width: pixel(72),
     renderCell: (item: EventRow) => (
-      <Text hasTabularNumbers>{item.users.toLocaleString()}</Text>
+      <Text hasTabularNumbers maxLines={1}>
+        {formatCount(item.users)}
+      </Text>
     ),
   },
   {
     key: 'newUsers',
     header: 'New Users',
-    width: pixel(120),
+    width: pixel(104),
     renderCell: (item: EventRow) => (
-      <Text hasTabularNumbers>{item.newUsers.toLocaleString()}</Text>
+      <Text hasTabularNumbers maxLines={1}>
+        {formatCount(item.newUsers)}
+      </Text>
     ),
   },
 ];
 
 // ============= CHART COMPONENTS =============
 
-// Chart series colors: desktop glows orange, mobile purple
+// 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: 'var(--dracula-orange)',
-  mobile: 'var(--dracula-purple)',
+  desktop: CHART_HUES.orange,
+  mobile: CHART_HUES.cyan,
 };
 
-function ChartLegendItem({color, label}: {color: string; label: string}) {
-  return (
-    <HStack gap={2} vAlign="center">
-      <Icon icon={Square} size="xsm" style={{color}} />
-      <Text type="supporting" color="secondary">
-        {label}
-      </Text>
-    </HStack>
-  );
-}
+// 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.
 
 function ActiveUsersChart() {
   // Downsample the 96 quarter-hour points to one bar per hour, stacking
@@ -447,15 +467,11 @@ function ActiveUsersChart() {
   const bars = activeUsersData.filter((_, i) => i % 4 === 0);
   const max = 130;
   const tickHours = [0, 32, 64, 92];
-  // SVG type scales up with the viewBox, so unit sizes stay small
+  // SVG type scales up with the viewBox, so unit sizes stay small: raw <text>
+  // (not ChartLabel) — 13px labels would render ~2.4x oversize in this 540-wide viewBox.
   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 540 180"
           width="100%"
@@ -513,44 +529,22 @@ function ActiveUsersChart() {
           })}
         </svg>
       </Card>
-      <Text type="supporting" color="secondary">
-        Hourly intervals · trailing 24 hours
-      </Text>
-      <HStack gap={6} vAlign="center">
-        <ChartLegendItem color={chartColors.desktop} label="Desktop" />
-        <ChartLegendItem color={chartColors.mobile} label="Mobile" />
-      </HStack>
+      <ChartLegend
+        entries={[
+          {label: 'Desktop', color: chartColors.desktop},
+          {label: 'Mobile', color: chartColors.mobile},
+        ]}
+        gap={4}
+        caption={
+          <Text type="supporting" color="secondary">
+            Hourly intervals · trailing 24 hours
+          </Text>
+        }
+      />
     </VStack>
   );
 }
 
-function Sparkline({data, label}: {data: number[]; label: string}) {
-  const max = Math.max(...data);
-  return (
-    <svg
-      viewBox="0 0 300 40"
-      width="100%"
-      height={40}
-      role="img"
-      aria-label={`${label} thirty-day trend`}>
-      {data.map((v, i) => {
-        const h = Math.max(3, (v / max) * 32);
-        return (
-          <rect
-            key={i}
-            x={i * 10}
-            y={36 - h}
-            width={7}
-            height={h}
-            rx={4}
-            fill="var(--dracula-purple)"
-          />
-        );
-      })}
-    </svg>
-  );
-}
-
 // ============= CARD COMPONENTS =============
 
 function MetricCard({
@@ -564,29 +558,28 @@ function MetricCard({
   value: string;
   change: string;
   positive: boolean;
-  sparkline: number[];
+  sparkline: SparkPoint[];
 }) {
   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={change.trim().startsWith('-') ? ArrowDown : ArrowUp}
-              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">
           Last 30 days vs. Previous
         </Text>
-        <Sparkline data={sparkline} label={label} />
+        <Sparkline
+          data={sparkline}
+          label={`${label} thirty-day trend`}
+          positive={positive}
+        />
       </VStack>
     </Card>
   );
@@ -611,7 +604,7 @@ function StackedBarCard({
   return (
     <Card>
       <VStack gap={4}>
-        <Heading level={4}>{title}</Heading>
+        <Heading level={3}>{title}</Heading>
         <svg
           viewBox="0 0 540 24"
           width="100%"
@@ -642,7 +635,7 @@ function StackedBarCard({
             <VStack key={d.label} gap={0}>
               <HStack gap={2} vAlign="center">
                 <Icon icon={Square} size="xsm" style={{color: d.color}} />
-                <Text type="supporting">{d.label}</Text>
+                <Text type="supporting" color="secondary">{d.label}</Text>
               </HStack>
               <Text type="supporting" color="secondary" hasTabularNumbers>
                 {((d.value / total) * 100).toFixed(0)}%
@@ -674,7 +667,7 @@ function TableCard<T extends {id: string}>({
     <Card>
       <VStack gap={6}>
         <HStack hAlign="between" vAlign="center">
-          <Heading level={4}>{title}</Heading>
+          <Heading level={3}>{title}</Heading>
           <Link href={linkHref}>{linkLabel}</Link>
         </HStack>
         <Table<T>
@@ -683,6 +676,7 @@ function TableCard<T extends {id: string}>({
           idKey="id"
           density="compact"
           dividers="rows"
+          textOverflow="truncate"
           hasHover
         />
       </VStack>
@@ -694,17 +688,34 @@ function TableCard<T extends {id: string}>({
 
 // ============= MAIN COMPONENT =============
 
+// A definite ancestor, so `Layout height="fill"` (Layout.tsx:58-63, height:
+// calc(100% + ...)) has something definite to resolve against instead of
+// collapsing to auto and handing the scroll to the document. 100dvh rather
+// than minHeight: '100%' -- a percentage min-height against an indefinite
+// containing block computes to 0, so the soft failure would survive. The
+// anchor is on the Layout, not a wrapper: LayoutContent is overflow:auto
+// (LayoutContent.tsx:36-39), so a definite height is what makes the content
+// pane SCROLL rather than clip. Same shape as editor.tsx:302 and
+// kanban-board.tsx:704. Not applied to shell-nav / shell-side-nav, which
+// already sit inside an AppShell's own 100dvh and would overflow by the
+// header height.
+const pageStyle: CSSProperties = {height: '100dvh'};
+
 export default function DashboardTemplate() {
   return (
     <Layout
+      style={pageStyle}
       height="fill"
       content={
         <LayoutContent padding={6}>
           <VStack gap={6}>
+            {/* Page header — the only h1; section titles sit at level 2 */}
+            <Heading level={1}>The night shift</Heading>
+
             {/* Active Users Chart */}
             <VStack gap={6}>
               <HStack hAlign="between" vAlign="center">
-                <Heading level={3}>Awake after dark</Heading>
+                <Heading level={2}>Awake after dark</Heading>
                 <Button
                   label="Reload"
                   variant="secondary"
@@ -716,20 +727,9 @@ export default function DashboardTemplate() {
             </VStack>
 
             {/* Metric Cards */}
-            <Grid columns={{minWidth: 320, repeat: 'fit'}} gap={4}>
-              {[0, 2].map(start => (
-                <Grid
-                  key={start}
-                  columns={{minWidth: 240, repeat: 'fit'}}
-                  gap={4}>
-                  {metrics.slice(start, start + 2).map((m, i) => (
-                    <MetricCard
-                      key={m.label}
-                      {...m}
-                      sparkline={sparklines[start + i]}
-                    />
-                  ))}
-                </Grid>
+            <Grid columns={{minWidth: 280, repeat: 'fit'}} gap={4}>
+              {metrics.map((m, index) => (
+                <MetricCard key={m.label} {...m} sparkline={sparklines[index]} />
               ))}
             </Grid>
 
@@ -737,10 +737,10 @@ export default function DashboardTemplate() {
 
             {/* Demographics */}
             <HStack hAlign="between" vAlign="center">
-              <Heading level={3}>Night denizens</Heading>
+              <Heading level={2}>Night denizens</Heading>
               <Button label="View more" variant="secondary" size="md" />
             </HStack>
-            <Grid columns={{minWidth: 320, repeat: 'fit'}} gap={4}>
+            <Grid columns={{minWidth: 280, repeat: 'fit'}} gap={4}>
               <StackedBarCard title="Territory" data={regionData} />
               <StackedBarCard title="Role" data={roleData} />
             </Grid>
@@ -749,10 +749,10 @@ export default function DashboardTemplate() {
 
             {/* Engagement */}
             <HStack hAlign="between" vAlign="center">
-              <Heading level={3}>Engagement</Heading>
+              <Heading level={2}>Engagement</Heading>
               <Button label="View more" variant="secondary" size="md" />
             </HStack>
-            <Grid columns={{minWidth: 320, repeat: 'fit'}} gap={4}>
+            <Grid columns={{minWidth: 280, repeat: 'fit'}} gap={4}>
               <TableCard
                 title="Top pages"
                 linkLabel="All pages"