@umriss-ui/charts 0.8.1 → 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,4 +1,4 @@
-# @umriss-ui/charts 0.8.1
+# @umriss-ui/charts 0.8.2
 
 > React canvas chart library for data-dense dashboards - line, area, bar, scatter, control and Pareto charts. Few chart kinds, drawn well, fast.
 
@@ -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" />
@@ -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). |
@@ -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}
@@ -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"
@@ -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" />
@@ -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,6 +1,6 @@
 {
   "name": "@umriss-ui/charts",
-  "version": "0.8.1",
+  "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",
@@ -70,7 +70,7 @@
     "vite": "^6.0.0",
     "vite-plugin-dts": "^4.3.0",
     "@umriss-ui/demo": "0.0.0",
-    "@umriss-ui/core": "0.14.1"
+    "@umriss-ui/core": "0.16.0"
   },
   "scripts": {
     "props": "node --disable-warning=ExperimentalWarning --experimental-strip-types demo/props.ts",