# Ghost trend (Notchset): prompt.md (v2.0.0) - id: `ghost-trend` · version 2.0.0 · component · free - category: Charts - build: one set of files for every shadcn style - install: `npx shadcn@latest add https://notchset.dev/r/ghost-trend.json` - npm dependencies: none - registry dependencies: utils, https://notchset.dev/r/notchset-foundation.json, @notchset/chart - docs: https://notchset.dev/components/ghost-trend - The install command carries everything this item needs (files, CSS, tokens, npm and registry dependencies). Prefer it to copying source by hand. A metric over a period: the luminous line, last period's as a dashed ghost, your usual as a soft band, the dashed average and the latest point haloed. A second signal shares the axis as % from your usual. Gaps stay gaps or are bridged dotted, the lowest and highest pinned; a logged dose is a grey diamond along the top.. ## Build it - Stack: React 18.3 or 19, TypeScript, Tailwind CSS v4 utility classes on the foundation's roles, a components.json (imports use its aliases). - Packages: none beyond React. - Files: `components/ui/notchset/ghost-trend.tsx`. - Registry dependencies, installed with it automatically: shadcn `utils` (cn), `notchset-foundation`, `chart`. - Builds: one set of files, the same for every shadcn style. - Exports to keep: `GhostTrend`, `pctFromUsual`, and every exported type. - CSS: the install adds the notchset foundation (its roles, keyframes and motion switch, reading your shadcn tokens for colour) to your global stylesheet once. Nothing to import by hand. - Re-running `add` (or `--overwrite`) re-applies those rules: put overrides in your own CSS, never in the installed rules. - Colours: every part reads the foundation's roles (`--ns-canvas`, `--ns-ink`, `--ns-line`, `--ns-signal` …), which read your shadcn tokens (`--background`, `--foreground`, `--border`, `--destructive` …), plus the optional `--success` and `--warning`. Retheme on `:root` or any container; never add Tailwind colour classes inside the component. - This item reads `--ns-band-grade`, `--ns-canvas`, `--ns-font-mono`, `--ns-ink-2`, `--ns-ink-3`, `--ns-line`, `--ns-series`, `--ns-series-core`, `--ns-text-meta`. - Retune it (on any ancestor) with the foundation's roles and hooks: `--ns-bad`, `--ns-bad-ink`, `--ns-band`, `--ns-band-edge`, `--ns-band-grade`, `--ns-band-optimal`, `--ns-beat`, `--ns-bezel`, `--ns-canvas`, `--ns-cat-1`, `--ns-cat-2`, `--ns-cat-3`, `--ns-cat-4`, `--ns-cat-5`, `--ns-cat-6`, `--ns-check`, `--ns-chip`, `--ns-control`, `--ns-control-pad`, `--ns-control-sm`, `--ns-deep`, `--ns-deep-ink`, `--ns-deep-ink-2`, `--ns-deep-line`, `--ns-dialog`, `--ns-dialog-lg`, `--ns-dialog-sm`, `--ns-ease`, `--ns-ease-in`, `--ns-ease-panel`, `--ns-ease-pop`, `--ns-field`, `--ns-flood-arc`, `--ns-flood-aurora`, `--ns-flood-behind-1`, `--ns-flood-behind-2`, `--ns-flood-bloom`, `--ns-flood-deep`, `--ns-flood-dial-bloom`, `--ns-flood-glass`, `--ns-flood-grain`, `--ns-flood-image`, `--ns-flood-ink`, `--ns-flood-ink-low`, `--ns-flood-light`, `--ns-flood-mid`, `--ns-flood-pale`, `--ns-flood-pane`, `--ns-flood-pane-edge`, `--ns-flood-pill-ink`, `--ns-flood-ribbon`, `--ns-flood-ribbon-core`, `--ns-flood-shadow`, `--ns-flood-sheen`, `--ns-flood-wash`, `--ns-font-body`, `--ns-font-display`, `--ns-font-mono`, `--ns-font-script`, `--ns-glass`, `--ns-glass-blur`, `--ns-glass-shadow`, `--ns-glow`, `--ns-grain`, `--ns-gutter`, `--ns-header`, `--ns-heat`, `--ns-hover`, `--ns-ink`, `--ns-ink-2`, `--ns-ink-3`, `--ns-ink-4`, `--ns-leading`, `--ns-lift`, `--ns-light-1`, `--ns-light-2`, `--ns-light-3`, `--ns-light-spread`, `--ns-light-strength`, `--ns-line`, `--ns-line-soft`, `--ns-lit-edge`, `--ns-menu-dy`, `--ns-menu-row`, `--ns-mesh`, `--ns-mesh-frost`, `--ns-ok`, `--ns-ok-ink`, `--ns-orb-body`, `--ns-orb-cool`, `--ns-orb-core`, `--ns-orb-dawn`, `--ns-orb-deep`, `--ns-orb-edge`, `--ns-orb-grain`, `--ns-orb-ground`, `--ns-orb-halo`, `--ns-orb-inner`, `--ns-orb-key`, `--ns-orb-lift`, `--ns-orb-limb`, `--ns-orb-limb-from`, `--ns-orb-rim`, `--ns-orb-skin-hi`, `--ns-orb-skin-lo`, `--ns-orb-skin-mid`, `--ns-orb-warm`, `--ns-panel`, `--ns-panel-w`, `--ns-prism-edge`, `--ns-prism-glint`, `--ns-prism-sheen`, `--ns-prism-tint`, `--ns-pulse`, `--ns-radius`, `--ns-radius-card`, `--ns-radius-full`, `--ns-radius-lg`, `--ns-radius-sm`, `--ns-radius-xl`, `--ns-raised`, `--ns-range`, `--ns-row`, `--ns-row-compact`, `--ns-segment`, `--ns-selected`, `--ns-series`, `--ns-series-core`, `--ns-series-lilac`, `--ns-series-tint`, `--ns-shadow-dialog`, `--ns-shadow-float`, `--ns-shadow-panel`, `--ns-sheet`, `--ns-sheet-bottom`, `--ns-side`, `--ns-signal`, `--ns-sleep-awake`, `--ns-sleep-deep`, `--ns-sleep-light`, `--ns-sleep-rem`, `--ns-space-1`, `--ns-space-2`, `--ns-space-3`, `--ns-space-4`, `--ns-space-5`, `--ns-space-6`, `--ns-space-8`, `--ns-space-section`, `--ns-stack-on`, `--ns-standing-critical`, `--ns-standing-in`, `--ns-standing-out`, `--ns-state-doing`, `--ns-state-done`, `--ns-state-review`, `--ns-state-todo`, `--ns-switch-h`, `--ns-switch-w`, `--ns-text-body`, `--ns-text-control`, `--ns-text-display`, `--ns-text-figure`, `--ns-text-headline`, `--ns-text-hero`, `--ns-text-lede`, `--ns-text-meta`, `--ns-text-page`, `--ns-text-record`, `--ns-text-small`, `--ns-text-strong`, `--ns-text-sub`, `--ns-text-title`, `--ns-tile-shadow`, `--ns-time-born`, `--ns-time-color`, `--ns-time-dialog`, `--ns-time-menu`, `--ns-time-page`, `--ns-time-panel`, `--ns-time-toast`, `--ns-tint`, `--ns-tint-ink`, `--ns-toast-bottom`, `--ns-toast-left`, `--ns-touch`, `--ns-tracking-display`, `--ns-tracking-headline`, `--ns-warn`, `--ns-warn-ink`, `--ns-wash-clay`, `--ns-wash-dusk`, `--ns-wash-graphite`, `--ns-wash-ink`, `--ns-wash-sage`, `--ns-wash-sand`, `--ns-weight-light`, `--ns-weight-medium`, `--ns-weight-regular`, `--ns-weight-strong`, `--ns-well`. - Never add Tailwind colour classes inside the component. ```tsx import { GhostTrend } from "@/components/ui/notchset/ghost-trend"; ``` ## Parts - A single export that takes props. ## Match the original - Read `components/ui/notchset/ghost-trend.tsx` as the reference implementation before changing or recreating anything, and match it: sizes, colours per theme, motion timings, copy and behaviour. - If you deviate (a prop you can't honour, a style you changed, a dependency you swapped), say so in your reply, part by part. - Keep the accessibility contract, the keyboard map and the motion levels listed below. ## Use it when ### Not when ## Built from - chart (`chart`), installed with it: reuse it, don't rebuild it ## Mistakes - Recreating the component instead of installing it ## Usage ```tsx "use client"; import { GhostTrend } from "@/components/ui/notchset/ghost-trend"; const now = [52, 55, 50, 54, 57, 53, 49, 51, 56, 58, 54, null, 52, 55, 57, 59, 56, 53, 55, 58, 60, 57, 54, 56, 58, 55, 57, 59, 57, 61]; const last = [50, 49, 53, 51, 48, 52, 50, 47, 41, 37, 40, 45, 49, 51, 50, 52, 49, 51, 53, 50, 52, 54, 51, 49, 52, 50, 53, 51, 52, 50]; export default function GhostTrendDemo() { return (
({ label: `${((i + 25) % 30) + 1} ${i < 5 ? "Sep" : "Oct"}`, value }))} ghost={last} band={{ low: 47, high: 55 }} avg={55} format={(v) => `${v} ms`} nowName="This month" ghostName="Last month" />
); } ``` ## Props | Prop | Type | Default | What it does | |---|---|---|---| | `points` | `GhostTrendPoint[]` | | Required. | | `ghost` | `(number \| null)[]` | | the period before, point for point | | `band` | `{ low: number; high: number }` | | your usual, drawn as a soft band | | `avg` | `number \| null` | | | | `overlay` | `{ name: string; values: (number \| null)[] }` | | a second signal on the same axis, as a quiet ink trace | | `format` | `(v: number) => string` | `String` | | | `label` | `string` | | the chart's name, "HRV, this month" | | `nowName` | `string` | `"This period"` | | | `ghostName` | `string` | `"The period before"` | | | `height` | `number` | `260` | | | `gaps` | `"open" \| "dotted"` | `"open"` | "dotted" bridges a gap inside the line with a quiet dotted segment (a day's ring readings); default leaves it open | | `pins` | `boolean` | `false` | pin the lowest and the highest value on the line, each with its value and when | | `marks` | `{ at: number; label: string }[]` | `[]` | events at a point (a logged dose), drawn as small diamonds along the top; `marksName` names them in the key | | `marksName` | `string` | `"Logged"` | | | `labelEvery` | `number` | | label every nth point on the time axis (default: about six labels) | Full docs: https://notchset.dev/components/ghost-trend ## Customising - Colours: every part reads the foundation's roles (`--ns-canvas`, `--ns-ink`, `--ns-line`, `--ns-signal` …), which read your shadcn tokens (`--background`, `--foreground`, `--border`, `--destructive` …), plus the optional `--success` and `--warning`. Retheme on `:root` or any container; never add Tailwind colour classes inside the component. - Dark mode follows the `.dark` class or `data-theme="dark"` on an ancestor (the shadcn and next-themes conventions). - Update later: Commit or stash local changes first (or copy the files), so the update can be undone. Read https://notchset.dev/r/changelog.json for the new versions: a major version, an entry marked breaking or a merge says what to change. Then re-run the install with `--overwrite`, on a branch. It replaces the component's files, the shared helper files they import, and the item's CSS rules in the global stylesheet, so review the whole diff (components, shared files, CSS), re-apply your own edits, and run the app's typecheck, tests and build. ## Accessibility contract (preserve when editing) ## Install ```bash npx shadcn@latest add https://notchset.dev/r/ghost-trend.json ``` Or add the `@notchset` registry to components.json and run `npx shadcn@latest add @notchset/ghost-trend`. Every components.json style gets the same files. ## Continue the workflow - [Metric card](https://notchset.dev/blocks/metric-card) - [Day timeline](https://notchset.dev/components/day-timeline) - [Source row](https://notchset.dev/blocks/source-row) ## Source ### components/ui/notchset/ghost-trend.tsx ```tsx // Notchset ghost-trend 2.0.0 · https://notchset.dev/changelog "use client"; import * as React from "react"; import { cn } from "@/lib/utils"; import { ChartHalo, ChartTable, ChartTableToggle, InkLine, useChartWidth } from "@/components/ui/notchset/chart"; /* * Ghost trend: this period's line, luminous, over the period before as a dashed ghost, on your usual band, with the * period's average as a dashed hairline and the latest point haloed. A second signal (an overlay) joins as a quiet * ink trace on the same time axis, never a second axis: when there is one, the caller plots both as "% from your * usual" (pctFromUsual) so one honest axis carries them. Gaps stay gaps, or (`gaps="dotted"`, a day's readings) are * bridged by a quiet dotted segment; `pins` marks the lowest and highest values; `marks` are events on the time axis * (a logged dose) as small grey diamonds along the top, named in the key. The table carries every point. * * `${v} ms`} /> */ type GhostTrendPoint = { label: string; value: number | null }; type GhostTrendProps = { points: GhostTrendPoint[]; /** the period before, point for point */ ghost?: (number | null)[] | undefined; /** your usual, drawn as a soft band */ band?: { low: number; high: number } | undefined; avg?: number | null | undefined; /** a second signal on the same axis, as a quiet ink trace */ overlay?: { name: string; values: (number | null)[] } | undefined; format?: ((v: number) => string) | undefined; /** the chart's name, "HRV, this month" */ label: string; nowName?: string | undefined; ghostName?: string | undefined; height?: number | undefined; /** "dotted" bridges a gap inside the line with a quiet dotted segment (a day's ring readings); default leaves it open */ gaps?: "open" | "dotted" | undefined; /** pin the lowest and the highest value on the line, each with its value and when */ pins?: boolean | undefined; /** events at a point (a logged dose), drawn as small diamonds along the top; `marksName` names them in the key */ marks?: { at: number; label: string }[] | undefined; marksName?: string | undefined; /** label every nth point on the time axis (default: about six labels) */ labelEvery?: number | undefined; className?: string | undefined; }; /** Values as their % difference from the middle of your usual, so two signals share one honest axis. */ function pctFromUsual(values: (number | null)[], usual: { low: number; high: number }): (number | null)[] { const mid = (usual.low + usual.high) / 2 || 1; return values.map((v) => (v == null ? null : Math.round(((v - mid) / mid) * 1000) / 10)); } const pathOf = (vals: (number | null)[], X: (i: number) => number, Y: (v: number) => number) => { let d = ""; let pen = false; vals.forEach((v, i) => { if (v == null) return void (pen = false); d += `${pen ? "L" : "M"}${X(i).toFixed(1)} ${Y(v).toFixed(1)}`; pen = true; }); return d; }; /** The dotted bridges over the gaps inside a line (never before its first value or after its last). */ const bridgesOf = (vals: (number | null)[], X: (i: number) => number, Y: (v: number) => number) => { let d = ""; let last = -1; vals.forEach((v, i) => { if (v == null) return; if (last >= 0 && i - last > 1) d += `M${X(last).toFixed(1)} ${Y(vals[last]!).toFixed(1)}L${X(i).toFixed(1)} ${Y(v).toFixed(1)}`; last = i; }); return d; }; function GhostTrend({ points, ghost, band, avg, overlay, format = String, label, nowName = "This period", ghostName = "The period before", height = 260, gaps = "open", pins = false, marks = [], marksName = "Logged", labelEvery, className }: GhostTrendProps) { const [box, W] = useChartWidth(720); const [table, setTable] = React.useState(false); const vals = points.map((p) => p.value); const all = [...vals, ...(ghost ?? []), ...(overlay?.values ?? []), ...(band ? [band.low, band.high] : []), ...(avg != null ? [avg] : [])].filter((v): v is number => v != null); const lo0 = all.length ? Math.min(...all) : 0; const hi0 = all.length ? Math.max(...all) : 1; const pad = (hi0 - lo0 || 1) * 0.18; const lo = lo0 - pad, hi = hi0 + pad; const T = marks.length ? 30 : 18, B = height - 30; const n = Math.max(1, points.length - 1); const X = (i: number) => 6 + (i / n) * (W - 12); const Y = (v: number) => B - ((v - lo) / (hi - lo)) * (B - T); const lastI = vals.reduce((a: number, v, i) => (v != null ? i : a), -1); /* a given step doubles until its labels sit at least 64px apart (a day's 3-hourly labels become 6-hourly on a phone) */ let every = labelEvery ?? Math.max(1, Math.ceil(points.length / Math.max(2, Math.floor(W / 72)))); while (labelEvery && every < points.length && (every / n) * (W - 12) < 64) every *= 2; const latest = lastI >= 0 ? vals[lastI]! : null; const known = vals.flatMap((v, i) => (v == null ? [] : [i])); const minI = pins && known.length > 1 ? known.reduce((a, i) => (vals[i]! < vals[a]! ? i : a)) : -1; const maxI = pins && known.length > 1 ? known.reduce((a, i) => (vals[i]! > vals[a]! ? i : a)) : -1; const hasGaps = gaps === "dotted" && known.some((i, j) => j > 0 && i - known[j - 1]! > 1); /* the average's label sits at the right edge, above its line unless a line passes there, then below */ const avgSide = (() => { if (avg == null) return "above"; const ya = Y(avg); const near = [vals, ghost ?? []].flatMap((vs) => vs.flatMap((v, i) => (v != null && X(i) > W - 96 ? [Y(v)] : []))); if (lastI >= 0 && X(lastI) > W - 96) near.push(Y(latest!) - 6, Y(latest!) + 6); const hits = (a: number, b: number) => near.filter((y) => y >= a && y <= b).length; return hits(ya - 20, ya - 1) <= hits(ya + 1, ya + 20) ? "above" : "below"; })(); const pinX = (i: number) => Math.min(W - 74, Math.max(74, X(i))); const summary = `${label}: ${latest != null ? `latest ${format(latest)}` : "no readings"}${avg != null ? `, average ${format(avg)}` : ""}${band ? `, your usual ${format(band.low)} to ${format(band.high)}` : ""}${ghost?.some((v) => v != null) ? `, ${ghostName.toLowerCase()} drawn as a dashed line` : ""}${overlay ? `, with ${overlay.name} on the same axis` : ""}${minI >= 0 ? `, lowest ${format(vals[minI]!)} at ${points[minI]!.label}, highest ${format(vals[maxI]!)} at ${points[maxI]!.label}` : ""}${hasGaps ? ", gaps where the ring was off drawn dotted" : ""}${marks.length ? `; ${marks.map((m) => `${m.label} at ${points[m.at]?.label ?? ""}`).join("; ")}` : ""}.`; return (
{band && } {avg != null && } {ghost && } {overlay && } {hasGaps && } {marks.map((m, j) => ( ))} {[minI, maxI].map((i) => i >= 0 && )} {[minI, maxI].map( (i, j) => i >= 0 && ( {`${j ? "high" : "low"} ${format(vals[i]!)} · ${points[i]!.label}`} ), )} {lastI >= 0 && } {avg != null && ( avg {format(avg)} )}
{points.map((p, i) => i % every === 0 || i === points.length - 1 ? (i === points.length - 1 || X(points.length - 1) - X(i) >= 72) && ( {p.label} ) : null, )}
{nowName} {ghost && ( {ghostName} )} {hasGaps && ( Ring off )} {marks.length > 0 && ( {marksName} )} {overlay && ( {overlay.name} )} {band && ( Your usual )} setTable(!table)} className="ml-auto" />
[p.label, p.value == null ? "—" : format(p.value), ...(ghost ? [ghost[i] == null ? "—" : format(ghost[i]!)] : []), ...(overlay ? [overlay.values[i] == null ? "—" : format(overlay.values[i]!)] : [])])} />
); } export { GhostTrend, pctFromUsual, type GhostTrendPoint, type GhostTrendProps }; ``` The foundation (the tokens listed above, keyframes and motion levels) installs once with the first component; its CSS is public at https://notchset.dev/r/notchset-foundation.json.