@umriss-ui/charts 0.8.0 → 0.8.2

package/dist/index.d.ts

@@ -1215,8 +1215,10 @@ export declare function workingTimeTicks(input: CalendarInput, from: number, to:
 export declare function XAxis<T>(props: XAxisProps<T>): null;
 
 export declare interface XAxisProps<T> extends CommonProps_2<T> {
-    /** `"nice"` widens the data's extent to ticks, `"data"` keeps it, a pair is
-     fixed - the one a zoom passes back. */
+    /** `"nice"` widens the data's extent to ticks - to named `ticks` where
+     there are any, on a time axis to whole units of a step of hours or
+     longer -, `"data"` keeps it, a pair is fixed - the one a zoom passes
+     back. */
     domain?: "nice" | "data" | readonly [number, number];
     /** Which edge the axis stands at. A second x axis on the opposite edge is how
      a series counts in a unit of its own. */

package/docs/llms-full.md

@@ -1,6 +1,6 @@
-# @umriss-ui/charts 0.8.0
+# @umriss-ui/charts 0.8.2
 
-> Canvas charts for data-dense applications - few chart kinds, drawn well, fast.
+> React canvas chart library for data-dense dashboards - line, area, bar, scatter, control and Pareto charts. Few chart kinds, drawn well, fast.
 
 Install with `pnpm add @umriss-ui/charts`. This text is generated from the package's demo (https://romanhaendler.github.io/umriss-ui/charts/): every page with its import line, its examples - the source exactly as it runs, with the package name where the demo imports its own source - its props tables generated from the code, and what it deliberately does not do. The pages index stands in https://romanhaendler.github.io/umriss-ui/charts/llms.txt.
 
@@ -523,7 +523,7 @@ What to know before the first chart.
 
 Install the package, draw a first chart and size it in its container. Read this once before the component pages; everything after it assumes it.
 
-Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/getting-started
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/getting-started/
 
 Install with `pnpm add @umriss-ui/charts`; React 18 or 19 is the only peer, and the package depends on nothing else. The stylesheet comes with the JavaScript, so there is nothing to import - `@umriss-ui/charts/styles.css` is there for setups that link stylesheets by hand.
 
@@ -633,7 +633,7 @@ Holds the rows and draws the series on shared axes, one chart for every kind a s
 import { Chart } from "@umriss-ui/charts";
 ```
 
-Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/chart
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/chart/
 
 Series and axes are children, and their order in the JSX is the drawing order and the colour order. The marks are drawn on canvas; axes, legend and tooltip are elements a screen reader and a test can read (ADR-0001).
 
@@ -877,14 +877,11 @@ import { SERVICES, SUCCESS_BY_HOUR, type SuccessCell } from "./operations";
 const BATTERY = batteryDay("v2");
 const STATES = vehicleDay("v2");
 
-const timeOfDay = (v: number) =>
-  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
-
 export default function BandsLimitsAndCells() {
   return (
     <div className="side-by-side">
       <Chart data={BATTERY} height={280} ariaLabel="An e-van's battery against its reserve, above its states" encoding="marks">
-        <XAxis accessor={(d: BatteryPoint) => d.t} tickFormat={timeOfDay} label="Time" tickCount={4} />
+        <XAxis accessor={(d: BatteryPoint) => d.t} time label="Time" tickCount={4} />
         <YAxis accessor={(d: BatteryPoint) => d.charge ?? 0} domain={[-40, 100]} ticks={[0, 20, 40, 60, 80, 100]} label="%" />
         <YAxis id="lane" position="right" accessor={() => 0} domain={[0, 5]} ticks={[0.45]} tickFormat={() => "FP 377 K"} />
         <LimitBand from={10} to={20} severity="warning" label="Reserve" />
@@ -975,7 +972,7 @@ What a value is measured against: extent, ticks and labels, several axes per sid
 import { XAxis, YAxis, workingCalendar } from "@umriss-ui/charts";
 ```
 
-Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/axis
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/axis/
 
 Every scale is linear. Categories are numbers 0, 1, 2 … with a `tickFormat` that names them (ADR-0002); a working calendar maps time before it is drawn and marks every seam it took out (ADR-0001).
 
@@ -1216,7 +1213,7 @@ It imports `operations.ts` from beside itself; the file stands once, under "File
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `domain` | `"nice" \| "data" \| readonly [number, number]` | — | `"nice"` widens the data's extent to ticks, `"data"` keeps it, a pair is fixed - the one a zoom passes back. |
+| `domain` | `"nice" \| "data" \| readonly [number, number]` | — | `"nice"` widens the data's extent to ticks - to named `ticks` where there are any, on a time axis to whole units of a step of hours or longer -, `"data"` keeps it, a pair is fixed - the one a zoom passes back. |
 | `position` | `"bottom" \| "top"` | — | Which edge the axis stands at. A second x axis on the opposite edge is how a series counts in a unit of its own. |
 | `time` | `boolean` | — | The values are instants (milliseconds since the epoch): ticks on local boundaries from the minute to the month, labels by level in en-GB with a 24-hour clock - `15:00`, `17 Mar`, `Mar 2026` - and the date on the first tick and on the first of a new day (`17 Mar 00:00`); a day tick there carries the year. The tooltip's x value carries the seconds where the readings lie less than a minute apart. Another language is a `tickFormat`, which is handed the instant. `calendar` implies it. |
 | `calendar` | `readonly WorkingInterval[]` | — | Working calendar: the intervals in which time counts. With it the axis stands in working time - nights and weekends are out, and every removed span gets a break mark. The scale stays affine; the mapping happens in materialisation (ADR-0001). |
@@ -1262,7 +1259,7 @@ Joins the readings of a series into a course (a line chart, a trend). Reach for
 import { Line } from "@umriss-ui/charts";
 ```
 
-Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/line
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/line/
 
 A missing reading breaks the line; nothing is drawn across a gap. With `step` a value holds until the next one, for things logged only when they change.
 
@@ -1422,7 +1419,7 @@ A filled course (an area chart): down to zero for a quantity, between two edges
 import { Area } from "@umriss-ui/charts";
 ```
 
-Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/area
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/area/
 
 Without `baseline` the foot is 0 and stays in the y extent. A range's lower edge is the `baseline` accessor of the same series, not a second series - where either edge is missing, the fill has a hole.
 
@@ -1545,7 +1542,7 @@ Bars on the numeric x axis (a bar or column chart): one per category, grouped si
 import { Bar } from "@umriss-ui/charts";
 ```
 
-Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/bar
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/bar/
 
 A category is a position the axis places and a `tickFormat` names (ADR-0002). A bar's foot is 0, so one series carries both signs.
 
@@ -1728,7 +1725,7 @@ Single readings as points, joined by nothing (a scatter plot, dots). Reach for i
 import { Scatter } from "@umriss-ui/charts";
 ```
 
-Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/scatter
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/scatter/
 
 #### Examples
 
@@ -1817,7 +1814,7 @@ What something was doing over time, as a band of coloured segments (a status tim
 import { StateBand } from "@umriss-ui/charts";
 ```
 
-Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/stateband
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/stateband/
 
 The accessor returns a state's place in `states`, which fixes the order, the name and the colour in one place (ADR-0007). Each segment runs to the next reading; a `null` leaves a hole, never a colour for unknown.
 
@@ -1835,13 +1832,10 @@ import { VEHICLE_STATES, vehicleDay, type StatePoint } from "./logistics";
 
 const DAY = vehicleDay("v1");
 
-const timeOfDay = (v: number) =>
-  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
-
 export default function OneVehicle() {
   return (
     <Chart data={DAY} height={150} ariaLabel="States of van FP 214 K through the day">
-      <XAxis accessor={(d: StatePoint) => d.t} tickFormat={timeOfDay} label="Time" />
+      <XAxis accessor={(d: StatePoint) => d.t} time label="Time" />
       {/* Without a lane the band fills its y axis; one tick names it. */}
       <YAxis accessor={() => 0} domain={[0, 1]} ticks={[0.5]} tickFormat={() => "FP 214 K"} grid={false} />
       <StateBand accessor={(d: StatePoint) => d.state} states={VEHICLE_STATES} name="FP 214 K" />
@@ -1865,13 +1859,10 @@ import { VEHICLE_STATES, batteryDay, vehicleDay, type BatteryPoint, type StatePo
 const BATTERY = batteryDay("v2");
 const STATES = vehicleDay("v2");
 
-const timeOfDay = (v: number) =>
-  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
-
 export default function UnderACourse() {
   return (
     <Chart data={BATTERY} height={320} ariaLabel="An e-van's charge above what it was doing">
-      <XAxis accessor={(d: BatteryPoint) => d.t} tickFormat={timeOfDay} label="Time" />
+      <XAxis accessor={(d: BatteryPoint) => d.t} time label="Time" />
       <YAxis accessor={(d: BatteryPoint) => d.charge ?? 0} domain={[-40, 100]} ticks={[0, 25, 50, 75, 100]} label="Charge %" />
       {/* The lane: the bottom unit of five, the rest is room for the course. */}
       <YAxis id="lane" position="right" accessor={() => 0} domain={[0, 5]} ticks={[0.4]} tickFormat={() => "State"} />
@@ -1896,13 +1887,10 @@ import { VEHICLES, VEHICLE_STATES, vehicleDay, type StatePoint } from "./logisti
 
 const FLEET = VEHICLES.map((vehicle) => ({ vehicle, day: vehicleDay(vehicle.id) }));
 
-const timeOfDay = (v: number) =>
-  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
-
 export default function OneLaneEach() {
   return (
     <Chart data={FLEET[0]!.day} height={300} ariaLabel="The states of all eight vehicles through the day">
-      <XAxis accessor={(d: StatePoint) => d.t} tickFormat={timeOfDay} label="Time" />
+      <XAxis accessor={(d: StatePoint) => d.t} time label="Time" />
       {/* Lane 0 lies at the bottom, so the first vehicle takes the top lane. */}
       <YAxis
         accessor={() => 0}
@@ -1959,7 +1947,7 @@ One value per cell across two axes (a heatmap), coloured by its limits or along
 import { Matrix, DEFAULT_GRADIENT } from "@umriss-ui/charts";
 ```
 
-Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/matrix
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/matrix/
 
 A cell without a value stays a hole, not a zero. The tooltip carries the value as text, since colour alone carries no number.
 
@@ -2050,7 +2038,7 @@ The limits a course is read against (a threshold, a reference line): a line abov
 import { LimitLine, LimitBand } from "@umriss-ui/charts";
 ```
 
-Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/limitline
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/limitline/
 
 A limit's tone follows its `severity`, never a colour of its own. The model is the one `@umriss-ui/core` uses for its verdicts, so a chart and a tile agree (ADR-0006).
 
@@ -2119,9 +2107,6 @@ import { VEHICLES, VEHICLE_STATES, batteryDay, vehicleDay, type BatteryPoint, ty
 const NORTH = VEHICLES.filter((vehicle) => vehicle.depot === "north");
 const BATTERY = batteryDay("v2");
 
-const timeOfDay = (v: number) =>
-  new Date(v).toLocaleTimeString("en-GB", { hour: "2-digit", minute: "2-digit" });
-
 /* The lanes: one domain unit per vehicle, the rest is room for the course.
    Lane 0 lies at the bottom, so the list runs from the bottom up. */
 const LANES = [...NORTH].reverse().map((vehicle) => ({ vehicle, day: vehicleDay(vehicle.id) }));
@@ -2129,7 +2114,7 @@ const LANES = [...NORTH].reverse().map((vehicle) => ({ vehicle, day: vehicleDay(
 export default function LimitsAndState() {
   return (
     <Chart data={BATTERY} height={340} ariaLabel="An e-van's charge against its limits, above the states of the North depot's vehicles">
-      <XAxis accessor={(d: BatteryPoint) => d.t} tickFormat={timeOfDay} label="Time" />
+      <XAxis accessor={(d: BatteryPoint) => d.t} time label="Time" />
       <YAxis accessor={(d: BatteryPoint) => d.charge ?? 0} domain={[-100, 100]} ticks={[0, 20, 40, 60, 80, 100]} label="Charge %" />
       <YAxis
         id="lanes"
@@ -2234,7 +2219,7 @@ Centre line, control limits and the rule violations of a process (an SPC or Shew
 import { ControlChart, controlLimits, violations } from "@umriss-ui/charts";
 ```
 
-Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/controlchart
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/controlchart/
 
 Control limits are computed from a named reference window, never from what happens to be visible; specification limits are chosen and drawn with `LimitLine` (ADR-0008).
 
@@ -2372,7 +2357,7 @@ Causes sorted by weight with a cumulative line (a Pareto chart). Reach for it af
 import { pareto } from "@umriss-ui/charts";
 ```
 
-Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/pareto
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/pareto/
 
 `pareto()` sorts, adds up and folds the tail into one entry that stands last whatever its size; the bars, the line and the second axis are yours to compose.
 
@@ -2437,7 +2422,7 @@ What a hover reports and what the colours mean (a hover card, a key), and the va
 import { Tooltip, Legend, DataTable } from "@umriss-ui/charts";
 ```
 
-Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/tooltip
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/tooltip/
 
 The crosshair snaps to a reading, never between two. A legend without `onToggle` only explains; with it, it switches series on and off, and the state stays yours.
 
@@ -2547,7 +2532,7 @@ const month = (row: LedgerRow) => Number(row.month.slice(5)) - 1;
 function Marketing({ placement }: { placement?: "bottom" }) {
   return (
     <Chart data={MARKETING} height={220} ariaLabel={`Marketing's budget and forecast, legend ${placement ?? "above"}`}>
-      <XAxis accessor={month} tickFormat={(v) => MONTH_NAMES[v] ?? ""} tickCount={4} />
+      <XAxis accessor={month} ticks={MONTH_NAMES.map((_, i) => i)} tickFormat={(v) => MONTH_NAMES[v] ?? ""} />
       <YAxis accessor={(d: LedgerRow) => d.forecast} label="€" />
       <Line accessor={(d: LedgerRow) => d.budget} name="Budget" />
       <Line accessor={(d: LedgerRow) => d.forecast} name="Forecast" />
@@ -2731,7 +2716,7 @@ Millions of points, measured in this browser rather than claimed: the time to pr
 import { Chart } from "@umriss-ui/charts";
 ```
 
-Demo page: https://romanhaendler.github.io/umriss-ui/charts/#/benchmark
+Demo page: https://romanhaendler.github.io/umriss-ui/charts/benchmark/
 
 A hover redraws only the overlay layer, so the frame rate stays up over a million points. The figures in `packages/charts/docs/capabilities.md` come from here.
 
@@ -4495,7 +4480,7 @@ export interface AlertType {
 
 export const ALERT_TYPES: readonly AlertType[] = [
   { id: "checkout-latency", label: "Checkout · p95 latency above 300 ms", priority: "high" },
-  { id: "checkout-errors", label: "Checkout · error rate above 2 %", priority: "high" },
+  { id: "checkout-errors", label: "Checkout · error rate above 2\u00a0%", priority: "high" },
   { id: "webhooks-queue", label: "Webhooks · queue older than 5 min", priority: "medium" },
   { id: "search-latency", label: "Search · p95 latency above 250 ms", priority: "medium" },
   { id: "images-disk", label: "Image service · disk 85 % full", priority: "low" },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@umriss-ui/charts",
-  "version": "0.8.0",
-  "description": "Canvas charts for data-dense applications - few chart kinds, drawn well, fast.",
+  "version": "0.8.2",
+  "description": "React canvas chart library for data-dense dashboards - line, area, bar, scatter, control and Pareto charts. Few chart kinds, drawn well, fast.",
   "license": "MIT",
   "author": "Roman Händler",
   "homepage": "https://romanhaendler.github.io/umriss-ui/charts/",
@@ -15,11 +15,18 @@
   },
   "keywords": [
     "react",
-    "components",
-    "ui",
-    "umriss",
+    "react-charts",
     "charts",
-    "canvas"
+    "chart-library",
+    "canvas",
+    "line-chart",
+    "bar-chart",
+    "scatter-plot",
+    "control-chart",
+    "pareto",
+    "dashboard",
+    "typescript",
+    "umriss"
   ],
   "type": "module",
   "files": [
@@ -63,7 +70,7 @@
     "vite": "^6.0.0",
     "vite-plugin-dts": "^4.3.0",
     "@umriss-ui/demo": "0.0.0",
-    "@umriss-ui/core": "0.11.0"
+    "@umriss-ui/core": "0.16.0"
   },
   "scripts": {
     "props": "node --disable-warning=ExperimentalWarning --experimental-strip-types demo/props.ts",