@startsimpli/ui 0.4.139 → 0.4.140

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.139",
+  "version": "0.4.140",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -126,8 +126,8 @@
     "tailwindcss": "^3.4.19",
     "tsup": "^8.5.1",
     "typescript": "^6.0.3",
-    "@startsimpli/realtime": "0.0.2",
-    "@startsimpli/i18n": "0.1.3"
+    "@startsimpli/i18n": "0.1.3",
+    "@startsimpli/realtime": "0.0.2"
   },
   "keywords": [
     "ui",

package/src/components/charts/TimeSeriesChart.tsx

@@ -53,25 +53,32 @@ export interface TimeSeriesChartProps {
 /**
  * Series colours, in order, from the theme contract (theme/contract.css) — so
  * they follow the app's brand and flip with `.dark` like every other surface.
- * `--success` carries the same fallback channels as the Tailwind preset, for
- * apps that predate the token.
+ *
+ * Categorical only: a series' colour says which series it is, nothing more.
+ * `--success` and `--destructive` are deliberately absent — they mean good/bad
+ * (gain/loss), and a series that happened to land on one would assert that.
+ * `--secondary` and `--accent` are surface tones, too faint to read as a
+ * stroke. That leaves three tokens, so distinguishability comes mostly from
+ * the dash cycle below.
  */
 export const SERIES_COLORS = [
   'hsl(var(--primary))',
   'hsl(var(--muted-foreground))',
-  'hsl(var(--success, 142.1 76.2% 36.3%))',
-  'hsl(var(--destructive))',
   'hsl(var(--foreground))',
 ] as const
 
-/** After the palette runs out, series repeat its colours with a dash. */
-const DASHES = [undefined, '6 4', '2 3'] as const
+/**
+ * Each pass through the palette gets the next dash: solid, dashed, dotted,
+ * dash-dot. 3 colours x 4 dashes = 12 series before a style repeats. The
+ * patterns fit the 16px legend swatch so each one shows its full rhythm.
+ */
+export const SERIES_DASHES = [undefined, '6 4', '2 3', '8 3 2 3'] as const
 
 export function seriesStroke(index: number): { color: string; dash: string | undefined } {
   const n = SERIES_COLORS.length
   return {
     color: SERIES_COLORS[index % n],
-    dash: DASHES[Math.floor(index / n) % DASHES.length],
+    dash: SERIES_DASHES[Math.floor(index / n) % SERIES_DASHES.length],
   }
 }
 

package/src/components/charts/__tests__/TimeSeriesChart.test.tsx

@@ -1,5 +1,5 @@
 import { render, screen } from '@testing-library/react'
-import { TimeSeriesChart, SERIES_COLORS, seriesStroke } from '../TimeSeriesChart'
+import { TimeSeriesChart, SERIES_COLORS, SERIES_DASHES, seriesStroke } from '../TimeSeriesChart'
 import type { TimeSeries } from '../lib/series'
 
 // jsdom lays nothing out: recharts' ResponsiveContainer renders no chart at a
@@ -74,6 +74,19 @@ describe('TimeSeriesChart', () => {
     expect(new Set(strokes)).toEqual(new Set([SERIES_COLORS[0], SERIES_COLORS[1]]))
   })
 
+  it('dashes the series that repeat a colour, on the line and in the legend', () => {
+    const four = [0, 1, 2, 3].map((k) => ({ ...holding, name: `S${k}` }))
+    const { container } = render(<TimeSeriesChart series={four} unit="$" />)
+    const lines = linePaths(container)
+    expect(lines).toHaveLength(4)
+    expect(lines[3].getAttribute('stroke')).toBe(lines[0].getAttribute('stroke'))
+    expect(lines[3].getAttribute('stroke-dasharray')).toBe('6 4')
+    expect(lines[0].getAttribute('stroke-dasharray')).toBeNull()
+
+    const swatches = Array.from(container.querySelectorAll('ul svg line'))
+    expect(swatches.map((l) => l.getAttribute('stroke-dasharray'))).toEqual([null, null, null, '6 4'])
+  })
+
   it('shows a legend for two or more series and none for one', () => {
     const { rerender } = render(<TimeSeriesChart series={[strategy, holding]} unit="$" />)
     expect(screen.getByText('Strategy')).toBeInTheDocument()
@@ -132,10 +145,42 @@ describe('TimeSeriesChart', () => {
 })
 
 describe('seriesStroke', () => {
-  it('cycles the token palette and dashes the repeats', () => {
+  it('uses only non-semantic tokens, in order', () => {
+    expect([...SERIES_COLORS]).toEqual([
+      'hsl(var(--primary))',
+      'hsl(var(--muted-foreground))',
+      'hsl(var(--foreground))',
+    ])
+  })
+
+  it('never colours a series as gain or loss', () => {
+    // --success / --destructive mean good / bad; a categorical series must not
+    // inherit that meaning by landing on one.
+    const styles = Array.from({ length: 40 }, (_, i) => seriesStroke(i).color)
+    for (const color of styles) {
+      expect(color).not.toMatch(/--(success|destructive)\b/)
+    }
+  })
+
+  it('cycles the token palette and steps the dash on each pass', () => {
     const n = SERIES_COLORS.length
     expect(seriesStroke(0)).toEqual({ color: SERIES_COLORS[0], dash: undefined })
+    expect(seriesStroke(n - 1)).toEqual({ color: SERIES_COLORS[n - 1], dash: undefined })
     expect(seriesStroke(n)).toEqual({ color: SERIES_COLORS[0], dash: '6 4' })
     expect(seriesStroke(n + 1).color).toBe(SERIES_COLORS[1])
+    expect(seriesStroke(2 * n).dash).toBe('2 3')
+    expect(seriesStroke(3 * n).dash).toBe('8 3 2 3')
+  })
+
+  it('keeps every series distinct until colours x dashes run out', () => {
+    const distinct = SERIES_COLORS.length * SERIES_DASHES.length
+    expect(distinct).toBe(12)
+    const keys = Array.from({ length: distinct }, (_, i) => {
+      const { color, dash } = seriesStroke(i)
+      return `${color}|${dash ?? 'solid'}`
+    })
+    expect(new Set(keys).size).toBe(distinct)
+    // Then the cycle starts over.
+    expect(seriesStroke(distinct)).toEqual(seriesStroke(0))
   })
 })

package/src/components/charts/index.ts

@@ -1,6 +1,6 @@
 // Charts live behind their own subpath (`@startsimpli/ui/charts`) so recharts
 // is only bundled by apps that draw one.
-export { TimeSeriesChart, SERIES_COLORS, seriesStroke } from './TimeSeriesChart'
+export { TimeSeriesChart, SERIES_COLORS, SERIES_DASHES, seriesStroke } from './TimeSeriesChart'
 export type { TimeSeriesChartProps, TimeSeriesReferenceLine } from './TimeSeriesChart'
 export type {
   TimeSeries,