import { DottedChart } from "@elabs-ai/components-process";npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-processPrompt for your coding agent
Paste it into Claude Code, Cursor, Codex or any other coding agent. Text in [brackets] is yours to fill in.
Add the brand-ui DottedChart component (from @elabs-ai/components-process) to this project. 1. Read https://elabs-ai.com/llms.txt first: it maps every package and the rules. If you can use MCP servers, connect https://elabs-ai.com/mcp and use its search, docs and tokens tools. If not, run the same lookups in the terminal: `npx -y @elabs-ai/components-cli search "<what you need>"` and `npx -y @elabs-ai/components-cli docs <Component>`. 2. Look DottedChart up before writing code: `npx -y @elabs-ai/components-cli docs DottedChart` prints its real props, variants, what it pairs with and what to avoid. 3. If @elabs-ai/components-process is not installed yet: `pnpm add @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-process` (or `npm install @elabs-ai/components-tokens @elabs-ai/components-ui @elabs-ai/components-process`). If this is the first brand-ui package in the project, wire it once: import `@elabs-ai/components-tokens/styles.css` plus the `themes/light.css` and `themes/dark.css` stylesheets in the CSS entry, add one Tailwind `@source` line per installed @elabs-ai package (Tailwind does not scan node_modules, so without it everything renders unstyled), and wrap the app root in `ThemeProvider` from `@elabs-ai/components-tokens`. 4. Use it here: [the screen or file, and what it should show] 5. Rules: use only @elabs-ai/components-* components and the semantic tokens — no raw colours, no raw font sizes, no arbitrary Tailwind values. Look up each component's real props with the docs tool before you use it; never guess a prop. 6. Done means: the typecheck passes, `npx -y @elabs-ai/components-cli audit src --strict` reports nothing, and you have opened the app and looked at every screen you touched in the light and the dark theme.
Examples
Relative To Start
Every case starts at zero — compare case shapes, not calendar dates.
Sort By Duration
Shortest cases on top; the long tail collects at the bottom.
Color By Resource
Colour by who executed each event; the same colour budget as activities.
With Selection
Ten cases selected — everything else dims, and a text count states the selection.
Click To Select
Click a dot to select its case.
Table View
The accessible twin: every case as a table row.
Loading
No log yet — the frame’s skeleton.
Empty
The filters left no cases.
API
DottedChart
| Prop | Type | Description |
|---|---|---|
logrequired | EventLog | |
x | DottedChartX | How the x axis places an event. @default "absolute" |
sort | DottedChartSort | How case rows are ordered, top to bottom. @default "start" |
color | DottedChartColor | What colours a dot. `"activity"` reads `colorScale`; `"resource"` and a function rank their category keys onto the same `--chart-1 …` budget. @default "activity" |
colorScale | ActivityColorScale | The shared activity colour scale — hand `ProcessMap` the same instance. Built from `log` when omitted. |
selectedCaseIds | readonly string[] | Case ids to highlight; every other dot dims. |
onSelect | (caseIds: string[]) => void | Fires with the case ids a click, brush or keyboard range selects. |
onFilterIntent | (intent: DottedChartFilterIntent) => void | Fires once when a brush is released (or a keyboard range committed), with ids in row order. |
title | ReactNode | Card title — write the conclusion, not "Dotted chart". |
description | ReactNode | Prose under the title. |
height | number | Body height in CSS pixels (legend + plot + axis). @default 360 |
tableView | boolean | Render the accessible table twin instead of the plot. @default false |
loading | boolean | No log yet. Renders the frame's skeleton. |
labels | Partial<DottedChartLabels> | Override any user-visible string. |