@krizaka/charts 0.1.0 → 0.2.0

package/README.md

@@ -27,6 +27,18 @@ import { LineChart } from "@krizaka/charts/line";
 />;
 ```
 
+**Start from the need.** The ready-made charts answer the screens of the Krizaka apps with their formats, words and
+defaults chosen; the core charts are what they are built on; the advanced ones have no product use today.
+
+| Need (screen) | Ready-made chart | Entry | Native |
+| :-- | :-- | :-- | :-- |
+| Earnings per month (Orochia /earnings, the console's treasury) | `EarningsChart` | `@krizaka/charts/earnings` | yes |
+| Jobs per day by status, success rate (Orazaka insights, supervision, mobile Jobs) | `JobThroughput` | `@krizaka/charts/throughput` | yes |
+| Latency / time to result per capability, against an objective | `LatencyChart` | `@krizaka/charts/latency` | yes |
+| Credits or storage left, run-out date (Orazaka billing, Orochia storage) | `CreditUsage` | `@krizaka/charts/credits` | yes |
+| A challenge's pot towards its goal (Orochia web and app) | `GoalProgress` | `@krizaka/charts/goal` | yes |
+| A live auction's price (Orochia auction room, web and app) | `PriceTicker` | `@krizaka/charts/ticker` | yes |
+
 | Entry | Charts | Engine |
 | :-- | :-- | :-- |
 | `@krizaka/charts/line` | `LineChart`, `AreaChart` | SVG, 13 kB |
@@ -34,12 +46,12 @@ import { LineChart } from "@krizaka/charts/line";
 | `@krizaka/charts/pie` | `PieChart`, `DonutChart` | SVG, 9 kB |
 | `@krizaka/charts/gauge` | `Gauge` | SVG, 8 kB |
 | `@krizaka/charts/sparkline` | `Sparkline` | SVG, 10 kB |
-| `@krizaka/charts/geo` | `GeoMap` | SVG (d3-geo) + the world on demand |
-| `@krizaka/charts/globe` | `Globe3D` | SVG (orthographic, no WebGL) |
-| `@krizaka/charts/radar` · `heatmap` · `sankey` · `funnel` · `candlestick` · `treemap` · `scatter` | `RadarChart`, `Heatmap`, `CalendarHeatmap`, `Sankey`, `Funnel`, `Candlestick`, `Treemap`, `ScatterChart` | ECharts, loaded when the chart nears the screen (~11 kB before) |
-| `@krizaka/charts/chart` | `Chart` — any ECharts option, themed and framed | ECharts (`modules` to tree-shake) |
+| `@krizaka/charts/geo` | `GeoMap` — advanced | SVG (d3-geo) + the world on demand |
+| `@krizaka/charts/globe` | `Globe3D` — advanced | SVG (orthographic, no WebGL) |
+| advanced: `@krizaka/charts/radar` · `heatmap` · `sankey` · `funnel` · `candlestick` · `treemap` · `scatter` | `RadarChart`, `Heatmap`, `CalendarHeatmap`, `Sankey`, `Funnel`, `Candlestick`, `Treemap`, `ScatterChart` | ECharts, loaded when the chart nears the screen (~11 kB before) |
+| `@krizaka/charts/chart` | `Chart` — advanced: any ECharts option, themed and framed | ECharts (`modules` to tree-shake) |
 | `@krizaka/charts/provider` | `ChartsProvider` (locale, brand, words), `useSlidingWindow` | — |
-| `@krizaka/charts/native` | `LineChart`, `AreaChart`, `BarChart`, `PieChart`, `DonutChart`, `Gauge`, `Sparkline` | react-native-svg |
+| `@krizaka/charts/native` | the six ready-made charts, `LineChart`, `AreaChart`, `BarChart`, `PieChart`, `DonutChart`, `Gauge`, `Sparkline` | react-native-svg |
 
 Needs React 19 and the Krizaka tokens in the page (`@krizaka/tokens/tokens.css`, or `@krizaka/tailwind`); the
 charts' own CSS is embedded. Themes follow `color-scheme` (`html.light`, `.theme-light`); brands follow a

package/dist/bar.js

@@ -1,14 +1,15 @@
 "use client";
+import "./chunk-FINOPIDN.js";
 import {
   BarChart
-} from "./chunk-XR4ZJDOV.js";
-import "./chunk-UNK4MJVG.js";
+} from "./chunk-WVTIKOII.js";
+import "./chunk-CVWSMUUB.js";
 import "./chunk-BISL7DYW.js";
 import "./chunk-ANUCSRUN.js";
-import "./chunk-OB5EFDDH.js";
 import "./chunk-W5FX4TU3.js";
+import "./chunk-OB5EFDDH.js";
 import "./chunk-XLLYNNC6.js";
-import "./chunk-DWJPPEMC.js";
+import "./chunk-JTKR7ZWP.js";
 import "./chunk-3CJHBJXA.js";
 export {
   BarChart

package/dist/candlestick.js

@@ -1,11 +1,11 @@
 "use client";
 import {
   Candlestick
-} from "./chunk-OER6ETT4.js";
-import "./chunk-I5QUZVU2.js";
+} from "./chunk-NCIQMRV3.js";
+import "./chunk-PWMMXRMC.js";
 import "./chunk-W5FX4TU3.js";
 import "./chunk-XLLYNNC6.js";
-import "./chunk-DWJPPEMC.js";
+import "./chunk-JTKR7ZWP.js";
 import "./chunk-3CJHBJXA.js";
 export {
   Candlestick

package/dist/chart.js

@@ -1,9 +1,9 @@
 "use client";
 import {
   Chart
-} from "./chunk-AHQXJSAQ.js";
-import "./chunk-I5QUZVU2.js";
-import "./chunk-DWJPPEMC.js";
+} from "./chunk-AA5EWWYV.js";
+import "./chunk-PWMMXRMC.js";
+import "./chunk-JTKR7ZWP.js";
 import "./chunk-3CJHBJXA.js";
 export {
   Chart

package/dist/{chunk-EK3Z647J.js → chunk-4LBXEAGC.js}

@@ -4,7 +4,7 @@ import {
   baseOption,
   tooltipHtml,
   valueAxis
-} from "./chunk-I5QUZVU2.js";
+} from "./chunk-PWMMXRMC.js";
 import {
   read
 } from "./chunk-W5FX4TU3.js";
@@ -14,7 +14,7 @@ import {
 import {
   Legend,
   useSettings
-} from "./chunk-DWJPPEMC.js";
+} from "./chunk-JTKR7ZWP.js";
 import {
   fill
 } from "./chunk-3CJHBJXA.js";
@@ -130,4 +130,4 @@ export {
   correlation,
   ScatterChart
 };
-//# sourceMappingURL=chunk-EK3Z647J.js.map
+//# sourceMappingURL=chunk-4LBXEAGC.js.map

package/dist/{chunk-AHQXJSAQ.js → chunk-AA5EWWYV.js}

@@ -2,7 +2,7 @@
 import {
   EChartHost,
   baseOption
-} from "./chunk-I5QUZVU2.js";
+} from "./chunk-PWMMXRMC.js";
 
 // src/chart/chart.tsx
 import { useCallback } from "react";
@@ -35,4 +35,4 @@ function Chart({ option, modules = fullEngine, summaryText, table, items, onItem
 export {
   Chart
 };
-//# sourceMappingURL=chunk-AHQXJSAQ.js.map
+//# sourceMappingURL=chunk-AA5EWWYV.js.map

package/dist/{chunk-VKO2OYYM.js → chunk-ARARFMNE.js}

@@ -20,7 +20,7 @@ import {
   ChartFrame,
   colorOf,
   useSettings
-} from "./chunk-DWJPPEMC.js";
+} from "./chunk-JTKR7ZWP.js";
 
 // src/sparkline/sparkline.tsx
 import { useMemo } from "react";
@@ -85,4 +85,4 @@ function Sparkline(props) {
 export {
   Sparkline
 };
-//# sourceMappingURL=chunk-VKO2OYYM.js.map
+//# sourceMappingURL=chunk-ARARFMNE.js.map

package/dist/{chunk-WBH2QU77.js → chunk-BV4DBGN7.js}

@@ -17,7 +17,7 @@ import {
   stepColor,
   useMounted,
   useSettings
-} from "./chunk-DWJPPEMC.js";
+} from "./chunk-JTKR7ZWP.js";
 import {
   capitalize,
   fill
@@ -175,4 +175,4 @@ function GeoMap(props) {
 export {
   GeoMap
 };
-//# sourceMappingURL=chunk-WBH2QU77.js.map
+//# sourceMappingURL=chunk-BV4DBGN7.js.map

package/dist/{chunk-BZ5CQFPH.js → chunk-C4MFZLJM.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   Cartesian
-} from "./chunk-UNK4MJVG.js";
+} from "./chunk-CVWSMUUB.js";
 
 // src/line/line-chart.tsx
 import { jsx } from "react/jsx-runtime";
@@ -16,4 +16,4 @@ export {
   LineChart,
   AreaChart
 };
-//# sourceMappingURL=chunk-BZ5CQFPH.js.map
+//# sourceMappingURL=chunk-C4MFZLJM.js.map

package/dist/{chunk-XAJ3KCC4.js → chunk-CSSZLFLO.js}

@@ -3,7 +3,7 @@ import {
   EChartHost,
   baseOption,
   tooltipHtml
-} from "./chunk-I5QUZVU2.js";
+} from "./chunk-PWMMXRMC.js";
 import {
   read
 } from "./chunk-W5FX4TU3.js";
@@ -13,7 +13,7 @@ import {
 } from "./chunk-XLLYNNC6.js";
 import {
   useSettings
-} from "./chunk-DWJPPEMC.js";
+} from "./chunk-JTKR7ZWP.js";
 import {
   capitalize,
   fill
@@ -113,4 +113,4 @@ function Funnel(props) {
 export {
   Funnel
 };
-//# sourceMappingURL=chunk-XAJ3KCC4.js.map
+//# sourceMappingURL=chunk-CSSZLFLO.js.map

package/dist/{chunk-UNK4MJVG.js → chunk-CVWSMUUB.js}

@@ -9,18 +9,18 @@ import {
 import {
   describeSeries
 } from "./chunk-ANUCSRUN.js";
-import {
-  areaPath,
-  barPath,
-  linePath,
-  segments
-} from "./chunk-OB5EFDDH.js";
 import {
   extent,
   normalizeSeries,
   stack,
   tabulate
 } from "./chunk-W5FX4TU3.js";
+import {
+  areaPath,
+  barPath,
+  linePath,
+  segments
+} from "./chunk-OB5EFDDH.js";
 import {
   categoryFormatter,
   shareFormatter,
@@ -33,7 +33,7 @@ import {
   colorOf,
   cx,
   useSettings
-} from "./chunk-DWJPPEMC.js";
+} from "./chunk-JTKR7ZWP.js";
 import {
   fill
 } from "./chunk-3CJHBJXA.js";
@@ -375,4 +375,4 @@ function sameCategory(a, b) {
 export {
   Cartesian
 };
-//# sourceMappingURL=chunk-UNK4MJVG.js.map
+//# sourceMappingURL=chunk-CVWSMUUB.js.map

package/dist/chunk-E5DKBSWX.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-E5DKBSWX.js.map

package/dist/chunk-E5DKBSWX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-EEP7PS2L.js

@@ -0,0 +1,54 @@
+"use client";
+import {
+  Gauge
+} from "./chunk-EQLC2QVN.js";
+import {
+  GOAL_LABELS,
+  fillIn,
+  roundMoney
+} from "./chunk-WNUFGMS7.js";
+import {
+  valueFormatter
+} from "./chunk-XLLYNNC6.js";
+import {
+  useSettings
+} from "./chunk-JTKR7ZWP.js";
+
+// src/goal/goal-progress.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function GoalProgress({ raised, goal, currency, supporters, timeLeft, labels: given, description, ...props }) {
+  const words = { ...GOAL_LABELS, ...given };
+  const { locale } = useSettings(props);
+  const format = roundMoney(currency);
+  const reached = goal > 0 && raised >= goal;
+  const facts = [
+    supporters != null ? fillIn(words.supporters, { count: valueFormatter("integer", locale)(supporters) }) : null,
+    reached ? words.reached : null
+  ].filter(Boolean);
+  const line = facts.length > 0 || timeLeft ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    facts.join(" \xB7 "),
+    facts.length > 0 && timeLeft ? " \xB7 " : null,
+    timeLeft ? /* @__PURE__ */ jsx(Fragment, { children: typeof timeLeft === "string" ? fillIn(words.left, { time: timeLeft }) : timeLeft }) : null
+  ] }) : null;
+  return /* @__PURE__ */ jsx(
+    Gauge,
+    {
+      ...props,
+      value: raised,
+      max: goal,
+      format,
+      caption: fillIn(words.raised, { goal: valueFormatter(format, locale)(goal) }),
+      tone: reached ? "success" : "accent",
+      description: description || line ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        description,
+        description && line ? " \xB7 " : null,
+        line
+      ] }) : void 0
+    }
+  );
+}
+
+export {
+  GoalProgress
+};
+//# sourceMappingURL=chunk-EEP7PS2L.js.map

package/dist/chunk-EEP7PS2L.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/goal/goal-progress.tsx"],"sourcesContent":["\"use client\";\n// A pot towards its goal (an Orochia challenge, a crowdfunded request): the amount raised in money minor units on a\n// gauge whose arc fills towards the goal, “raised of $500” under it, the supporters and the time left beside the\n// title, the success tone once the goal is reached (and the amount past it still written). A Gauge preset.\nimport type { ReactNode } from \"react\";\n\nimport { valueFormatter } from \"../core/format\";\nimport { Gauge, type GaugeProps } from \"../gauge/gauge\";\nimport { GOAL_LABELS, type GoalLabels } from \"../needs/labels\";\nimport { fillIn, roundMoney } from \"../needs/model\";\nimport { useSettings } from \"../web/frame\";\n\nexport interface GoalProgressProps extends Omit<GaugeProps, \"value\" | \"min\" | \"max\" | \"format\" | \"caption\" | \"target\" | \"zones\" | \"tone\" | \"labels\"> {\n  /** The amount raised, in **minor units** (cents). */\n  raised: number;\n  /** The goal, in minor units. */\n  goal: number;\n  /** The ISO 4217 currency. */\n  currency: string;\n  /** How many people chipped in. */\n  supporters?: number;\n  /** The time left, written by the app (a `Countdown`, “2 days”). */\n  timeLeft?: ReactNode;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<GoalLabels>;\n}\n\n/** A pot towards its goal, in money: the arc fills, the words say how much of what, and who chipped in. */\nexport function GoalProgress({ raised, goal, currency, supporters, timeLeft, labels: given, description, ...props }: GoalProgressProps) {\n  const words = { ...GOAL_LABELS, ...given };\n  const { locale } = useSettings(props);\n  const format = roundMoney(currency);\n  const reached = goal > 0 && raised >= goal;\n  const facts = [\n    supporters != null ? fillIn(words.supporters, { count: valueFormatter(\"integer\", locale)(supporters) }) : null,\n    reached ? words.reached : null,\n  ].filter(Boolean);\n  const line =\n    facts.length > 0 || timeLeft ? (\n      <>\n        {facts.join(\" · \")}\n        {facts.length > 0 && timeLeft ? \" · \" : null}\n        {timeLeft ? <>{typeof timeLeft === \"string\" ? fillIn(words.left, { time: timeLeft }) : timeLeft}</> : null}\n      </>\n    ) : null;\n  return (\n    <Gauge\n      {...props}\n      value={raised}\n      max={goal}\n      format={format}\n      caption={fillIn(words.raised, { goal: valueFormatter(format, locale)(goal) })}\n      tone={reached ? \"success\" : \"accent\"}\n      description={\n        description || line ? (\n          <>\n            {description}\n            {description && line ? \" · \" : null}\n            {line}\n          </>\n        ) : undefined\n      }\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAuCM,SAGc,eAHd;AAXC,SAAS,aAAa,EAAE,QAAQ,MAAM,UAAU,YAAY,UAAU,QAAQ,OAAO,aAAa,GAAG,MAAM,GAAsB;AACtI,QAAM,QAAQ,EAAE,GAAG,aAAa,GAAG,MAAM;AACzC,QAAM,EAAE,OAAO,IAAI,YAAY,KAAK;AACpC,QAAM,SAAS,WAAW,QAAQ;AAClC,QAAM,UAAU,OAAO,KAAK,UAAU;AACtC,QAAM,QAAQ;AAAA,IACZ,cAAc,OAAO,OAAO,MAAM,YAAY,EAAE,OAAO,eAAe,WAAW,MAAM,EAAE,UAAU,EAAE,CAAC,IAAI;AAAA,IAC1G,UAAU,MAAM,UAAU;AAAA,EAC5B,EAAE,OAAO,OAAO;AAChB,QAAM,OACJ,MAAM,SAAS,KAAK,WAClB,iCACG;AAAA,UAAM,KAAK,QAAK;AAAA,IAChB,MAAM,SAAS,KAAK,WAAW,WAAQ;AAAA,IACvC,WAAW,gCAAG,iBAAO,aAAa,WAAW,OAAO,MAAM,MAAM,EAAE,MAAM,SAAS,CAAC,IAAI,UAAS,IAAM;AAAA,KACxG,IACE;AACN,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,OAAO;AAAA,MACP,KAAK;AAAA,MACL;AAAA,MACA,SAAS,OAAO,MAAM,QAAQ,EAAE,MAAM,eAAe,QAAQ,MAAM,EAAE,IAAI,EAAE,CAAC;AAAA,MAC5E,MAAM,UAAU,YAAY;AAAA,MAC5B,aACE,eAAe,OACb,iCACG;AAAA;AAAA,QACA,eAAe,OAAO,WAAQ;AAAA,QAC9B;AAAA,SACH,IACE;AAAA;AAAA,EAER;AAEJ;","names":[]}

package/dist/{chunk-DZB6HEVO.js → chunk-EQLC2QVN.js}

@@ -10,7 +10,7 @@ import {
   ChartFrame,
   colorOf,
   useSettings
-} from "./chunk-DWJPPEMC.js";
+} from "./chunk-JTKR7ZWP.js";
 import {
   fill
 } from "./chunk-3CJHBJXA.js";
@@ -70,4 +70,4 @@ function Gauge(props) {
 export {
   Gauge
 };
-//# sourceMappingURL=chunk-DZB6HEVO.js.map
+//# sourceMappingURL=chunk-EQLC2QVN.js.map

package/dist/chunk-FINOPIDN.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-FINOPIDN.js.map

package/dist/chunk-FINOPIDN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-G2KF2WL4.js

@@ -0,0 +1,2 @@
+"use client";
+//# sourceMappingURL=chunk-G2KF2WL4.js.map

package/dist/chunk-G2KF2WL4.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/{chunk-PTSB3H5Q.js → chunk-I3D7KUGN.js}

@@ -13,7 +13,7 @@ import {
   useMounted,
   useReducedMotion,
   useSettings
-} from "./chunk-DWJPPEMC.js";
+} from "./chunk-JTKR7ZWP.js";
 import {
   fill
 } from "./chunk-3CJHBJXA.js";
@@ -202,4 +202,4 @@ function Globe3D(props) {
 export {
   Globe3D
 };
-//# sourceMappingURL=chunk-PTSB3H5Q.js.map
+//# sourceMappingURL=chunk-I3D7KUGN.js.map

package/dist/chunk-IKQV3NSL.js

@@ -0,0 +1,76 @@
+"use client";
+import {
+  BarChart
+} from "./chunk-WVTIKOII.js";
+import {
+  Kpi
+} from "./chunk-WBHFVBSK.js";
+import {
+  LATENCY_LABELS,
+  fillIn,
+  formatDuration,
+  numberOf
+} from "./chunk-WNUFGMS7.js";
+import {
+  useSettings
+} from "./chunk-JTKR7ZWP.js";
+
+// src/latency/latency-chart.tsx
+import { useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function LatencyChart({
+  x = "name",
+  p50 = "p50",
+  p95 = "p95",
+  objective,
+  vertical,
+  hideSummary,
+  labels: given,
+  description,
+  data,
+  ...props
+}) {
+  const words = { ...LATENCY_LABELS, ...given };
+  const { locale } = useSettings(props);
+  const series = useMemo(
+    () => [{ key: p50, label: words.p50, color: "neutral" }, ...p95 ? [{ key: p95, label: words.p95, color: 1 }] : []],
+    [p50, p95, words.p50, words.p95]
+  );
+  const tail = p95 ?? p50;
+  const measured = data.map((row, i) => ({ row, i, value: numberOf(row, tail, i) })).filter((m) => m.value != null);
+  const slowest = measured.reduce((a, m) => !a || (m.value ?? 0) > (a.value ?? 0) ? m : a, null);
+  const over = objective ? measured.filter((m) => (m.value ?? 0) > objective.value).length : 0;
+  const nameOf = (row, i) => String(typeof x === "function" ? x(row, i) : row[x]);
+  const summary = hideSummary || !slowest ? null : /* @__PURE__ */ jsx(
+    Kpi,
+    {
+      value: formatDuration(slowest.value ?? 0, locale),
+      label: fillIn(words.slowest, { name: nameOf(slowest.row, slowest.i) }),
+      delta: objective ? over > 0 ? fillIn(words.over, { count: over }) : words.within : null,
+      direction: objective ? over > 0 ? "up" : "flat" : null,
+      tone: over > 0 ? "danger" : "success"
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    BarChart,
+    {
+      ...props,
+      data,
+      x,
+      series,
+      format: (value, l) => formatDuration(value, l),
+      horizontal: !vertical,
+      thresholds: objective ? [{ ...objective, tone: "danger" }] : void 0,
+      description: description || summary ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        description,
+        description && summary ? /* @__PURE__ */ jsx("br", {}) : null,
+        summary
+      ] }) : void 0
+    }
+  );
+}
+
+export {
+  LatencyChart
+};
+//# sourceMappingURL=chunk-IKQV3NSL.js.map

package/dist/chunk-IKQV3NSL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/latency/latency-chart.tsx"],"sourcesContent":["\"use client\";\n// Latency per capability, model or kind of job (the console's supervision, Orazaka's \"time to result\"): the median\n// and the 95th percentile side by side in horizontal bars, durations written in the unit that fits (ms, s, min), the\n// service objective as a line, the slowest p95 and how many go past the objective written above.\nimport { useMemo } from \"react\";\n\nimport { BarChart } from \"../bar/bar-chart\";\nimport type { CartesianProps } from \"../cartesian/cartesian\";\nimport type { Accessor, Datum, SeriesSpec } from \"../core/types\";\nimport { Kpi } from \"../needs/kpi\";\nimport { LATENCY_LABELS, type LatencyLabels } from \"../needs/labels\";\nimport { fillIn, formatDuration, numberOf } from \"../needs/model\";\nimport { useSettings } from \"../web/frame\";\n\nexport interface LatencyChartProps<T extends Datum>\n  extends Omit<CartesianProps<T>, \"y\" | \"yLabel\" | \"series\" | \"format\" | \"x\" | \"xFormat\" | \"thresholds\" | \"labels\"> {\n  /** The field (or function) naming what is measured (a capability, a model). Default `\"name\"`. */\n  x?: Accessor<T, unknown>;\n  /** The median, in milliseconds. Default `\"p50\"`. */\n  p50?: Accessor<T, number | null | undefined>;\n  /** The 95th percentile, in milliseconds. Default `\"p95\"`; `null` to draw the median alone. */\n  p95?: Accessor<T, number | null | undefined> | null;\n  /** The service objective, in milliseconds: a line, and the count of what goes past it (by p95). */\n  objective?: { readonly value: number; readonly label: string };\n  /** Vertical bars instead of horizontal ones (few, short names). */\n  vertical?: boolean;\n  /** Hide the slowest p95 and the count over the objective. */\n  hideSummary?: boolean;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<LatencyLabels>;\n}\n\n/** Median and p95 latency per item, durations in the unit that fits, against a service objective. */\nexport function LatencyChart<T extends Datum>({\n  x = \"name\" as Accessor<T, unknown>,\n  p50 = \"p50\" as Accessor<T, number | null | undefined>,\n  p95 = \"p95\" as Accessor<T, number | null | undefined>,\n  objective,\n  vertical,\n  hideSummary,\n  labels: given,\n  description,\n  data,\n  ...props\n}: LatencyChartProps<T>) {\n  const words = { ...LATENCY_LABELS, ...given };\n  const { locale } = useSettings(props as CartesianProps<T>);\n  const series = useMemo<SeriesSpec<T>[]>(\n    () => [{ key: p50, label: words.p50, color: \"neutral\" }, ...(p95 ? [{ key: p95, label: words.p95, color: 1 as const }] : [])],\n    [p50, p95, words.p50, words.p95],\n  );\n  const tail = p95 ?? p50;\n  const measured = data.map((row, i) => ({ row, i, value: numberOf(row, tail, i) })).filter((m) => m.value != null);\n  const slowest = measured.reduce<(typeof measured)[number] | null>((a, m) => (!a || (m.value ?? 0) > (a.value ?? 0) ? m : a), null);\n  const over = objective ? measured.filter((m) => (m.value ?? 0) > objective.value).length : 0;\n  const nameOf = (row: T, i: number) => String(typeof x === \"function\" ? x(row, i) : (row as Record<string, unknown>)[x]);\n  const summary =\n    hideSummary || !slowest ? null : (\n      <Kpi\n        value={formatDuration(slowest.value ?? 0, locale)}\n        label={fillIn(words.slowest, { name: nameOf(slowest.row, slowest.i) })}\n        delta={objective ? (over > 0 ? fillIn(words.over, { count: over }) : words.within) : null}\n        direction={objective ? (over > 0 ? \"up\" : \"flat\") : null}\n        tone={over > 0 ? \"danger\" : \"success\"}\n      />\n    );\n  return (\n    <BarChart\n      {...props}\n      data={data}\n      x={x}\n      series={series}\n      format={(value, l) => formatDuration(value, l)}\n      horizontal={!vertical}\n      thresholds={objective ? [{ ...objective, tone: \"danger\" }] : undefined}\n      description={\n        description || summary ? (\n          <>\n            {description}\n            {description && summary ? <br /> : null}\n            {summary}\n          </>\n        ) : undefined\n      }\n    />\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAIA,SAAS,eAAe;AAsDlB,SAmBI,UAnBJ,KAmBI,YAnBJ;AAzBC,SAAS,aAA8B;AAAA,EAC5C,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,QAAQ,EAAE,GAAG,gBAAgB,GAAG,MAAM;AAC5C,QAAM,EAAE,OAAO,IAAI,YAAY,KAA0B;AACzD,QAAM,SAAS;AAAA,IACb,MAAM,CAAC,EAAE,KAAK,KAAK,OAAO,MAAM,KAAK,OAAO,UAAU,GAAG,GAAI,MAAM,CAAC,EAAE,KAAK,KAAK,OAAO,MAAM,KAAK,OAAO,EAAW,CAAC,IAAI,CAAC,CAAE;AAAA,IAC5H,CAAC,KAAK,KAAK,MAAM,KAAK,MAAM,GAAG;AAAA,EACjC;AACA,QAAM,OAAO,OAAO;AACpB,QAAM,WAAW,KAAK,IAAI,CAAC,KAAK,OAAO,EAAE,KAAK,GAAG,OAAO,SAAS,KAAK,MAAM,CAAC,EAAE,EAAE,EAAE,OAAO,CAAC,MAAM,EAAE,SAAS,IAAI;AAChH,QAAM,UAAU,SAAS,OAAyC,CAAC,GAAG,MAAO,CAAC,MAAM,EAAE,SAAS,MAAM,EAAE,SAAS,KAAK,IAAI,GAAI,IAAI;AACjI,QAAM,OAAO,YAAY,SAAS,OAAO,CAAC,OAAO,EAAE,SAAS,KAAK,UAAU,KAAK,EAAE,SAAS;AAC3F,QAAM,SAAS,CAAC,KAAQ,MAAc,OAAO,OAAO,MAAM,aAAa,EAAE,KAAK,CAAC,IAAK,IAAgC,CAAC,CAAC;AACtH,QAAM,UACJ,eAAe,CAAC,UAAU,OACxB;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,eAAe,QAAQ,SAAS,GAAG,MAAM;AAAA,MAChD,OAAO,OAAO,MAAM,SAAS,EAAE,MAAM,OAAO,QAAQ,KAAK,QAAQ,CAAC,EAAE,CAAC;AAAA,MACrE,OAAO,YAAa,OAAO,IAAI,OAAO,MAAM,MAAM,EAAE,OAAO,KAAK,CAAC,IAAI,MAAM,SAAU;AAAA,MACrF,WAAW,YAAa,OAAO,IAAI,OAAO,SAAU;AAAA,MACpD,MAAM,OAAO,IAAI,WAAW;AAAA;AAAA,EAC9B;AAEJ,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ,CAAC,OAAO,MAAM,eAAe,OAAO,CAAC;AAAA,MAC7C,YAAY,CAAC;AAAA,MACb,YAAY,YAAY,CAAC,EAAE,GAAG,WAAW,MAAM,SAAS,CAAC,IAAI;AAAA,MAC7D,aACE,eAAe,UACb,iCACG;AAAA;AAAA,QACA,eAAe,UAAU,oBAAC,QAAG,IAAK;AAAA,QAClC;AAAA,SACH,IACE;AAAA;AAAA,EAER;AAEJ;","names":[]}

package/dist/{chunk-DWJPPEMC.js → chunk-JTKR7ZWP.js}

@@ -140,65 +140,6 @@ function RampLegend({ min, max, steps, write }) {
   ] });
 }
 
-// src/web/frame.tsx
-import { useCallback, useId, useMemo, useRef, useState as useState2 } from "react";
-
-// src/web/export.ts
-function toCsv(rows) {
-  const cell = (value) => /[",\n;]/.test(value) ? `"${value.replace(/"/g, '""')}"` : value;
-  return rows.map((row) => row.map(cell).join(",")).join("\n");
-}
-function fileName(title, extension) {
-  const base = (title ?? "chart").normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "chart";
-  return `${base}.${extension}`;
-}
-function download(name, content) {
-  const url = typeof content === "string" ? content : URL.createObjectURL(content);
-  const link = document.createElement("a");
-  link.href = url;
-  link.download = name;
-  link.click();
-  if (typeof content !== "string") setTimeout(() => URL.revokeObjectURL(url), 1e3);
-}
-var PROPS = ["fill", "stroke", "stroke-width", "stroke-dasharray", "opacity", "fill-opacity", "font-size", "font-weight", "font-family"];
-function serializeSvg(svg, background) {
-  const clone = svg.cloneNode(true);
-  const source = [svg, ...svg.querySelectorAll("*")];
-  const target = [clone, ...clone.querySelectorAll("*")];
-  source.forEach((el, i) => {
-    const style = getComputedStyle(el);
-    const out = target[i];
-    for (const prop of PROPS) {
-      const value = style.getPropertyValue(prop);
-      if (value) out.style.setProperty(prop, value);
-    }
-    out.style.removeProperty("stroke-dasharray");
-    if (el.getAttribute("stroke-dasharray")) out.style.setProperty("stroke-dasharray", el.getAttribute("stroke-dasharray"));
-  });
-  clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
-  if (background) clone.style.setProperty("background", background);
-  return new XMLSerializer().serializeToString(clone);
-}
-function svgToPng(markup, width, height, background, scale = 2) {
-  return new Promise((resolve, reject) => {
-    const image = new Image();
-    image.onload = () => {
-      const canvas = document.createElement("canvas");
-      canvas.width = width * scale;
-      canvas.height = height * scale;
-      const context = canvas.getContext("2d");
-      if (!context) return reject(new Error("No 2D canvas"));
-      context.fillStyle = background;
-      context.fillRect(0, 0, canvas.width, canvas.height);
-      context.drawImage(image, 0, 0, canvas.width, canvas.height);
-      resolve(canvas.toDataURL("image/png"));
-      return void 0;
-    };
-    image.onerror = () => reject(new Error("The SVG could not be rasterised"));
-    image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;
-  });
-}
-
 // src/web/styles.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var slots = (brand) => ORDERS[brand].map((hue, i) => `--kzc-${i + 1}:light-dark(${HUES[hue].light},${HUES[hue].dark});`).join("");
@@ -259,6 +200,16 @@ ${tone("neutral", "var(--kz-text-secondary)")}${tone("accent", "var(--kz-accent)
 .kzc-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
 .kzc-host{position:absolute;inset:0}
 .kzc-host>div{border-radius:inherit}
+.kzc-kpi{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin-top:4px}
+.kzc-kpi-value{font-family:var(--kz-font-display,inherit);font-size:24px;line-height:30px;font-weight:800;letter-spacing:-.01em;color:var(--kzc-text)}
+.kzc-kpi-label{font-size:13px;color:var(--kzc-text-2)}
+.kzc-kpi-delta{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:600;color:var(--kzc-text)}
+.kzc-kpi-delta svg{width:12px;height:12px;flex:none;color:var(--kzc-tone)}
+.kzc-meter{position:relative;height:10px;border-radius:999px;background:var(--kz-surface-3);overflow:hidden;--kzc-tone:var(--kz-accent)}
+.kzc-meter>i{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--kzc-tone);transition:width .6s var(--kz-ease,ease-out)}
+.kzc-meter[data-tone=warning]{--kzc-tone:var(--kz-warning)}.kzc-meter[data-tone=danger]{--kzc-tone:var(--kz-danger)}
+.kzc-row{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;margin:0;font-size:12px;line-height:18px;color:var(--kzc-text-2)}
+.kzc-row b{font-weight:600;color:var(--kzc-text)}
 @media (prefers-reduced-motion:no-preference){
 .kzc-skeleton i{animation:kzc-pulse 1.6s ease-in-out infinite}
 .kzc[data-inview] .kzc-enter-line{stroke-dasharray:1;stroke-dashoffset:1;animation:kzc-draw .9s var(--kz-ease,ease-out) forwards}
@@ -270,6 +221,8 @@ ${tone("neutral", "var(--kz-text-secondary)")}${tone("accent", "var(--kz-accent)
 .kzc[data-inview] .kzc-enter-pop{opacity:0;transform:scale(.92);transform-box:view-box;transform-origin:center;animation:kzc-pop .6s var(--kz-ease,ease-out) forwards}
 .kzc:not([data-inview]) .kzc-enter-line,.kzc:not([data-inview]) .kzc-enter-fade,.kzc:not([data-inview]) .kzc-enter-grow,.kzc:not([data-inview]) .kzc-enter-growx,.kzc:not([data-inview]) .kzc-enter-pop{visibility:hidden}
 .kzc[data-live] *{animation:none!important}
+.kzc[data-live] .kzc-enter-line{stroke-dasharray:none;stroke-dashoffset:0}
+.kzc[data-live] :is(.kzc-enter-fade,.kzc-enter-grow,.kzc-enter-growx,.kzc-enter-pop){opacity:1;transform:none;visibility:visible}
 }
 @keyframes kzc-draw{to{stroke-dashoffset:0}}
 @keyframes kzc-fade{to{opacity:1}}
@@ -283,6 +236,65 @@ function ChartStyles() {
   return /* @__PURE__ */ jsx2("style", { href: "krizaka-charts", precedence: "default", children: CSS });
 }
 
+// src/web/frame.tsx
+import { useCallback, useId, useMemo, useRef, useState as useState2 } from "react";
+
+// src/web/export.ts
+function toCsv(rows) {
+  const cell = (value) => /[",\n;]/.test(value) ? `"${value.replace(/"/g, '""')}"` : value;
+  return rows.map((row) => row.map(cell).join(",")).join("\n");
+}
+function fileName(title, extension) {
+  const base = (title ?? "chart").normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "chart";
+  return `${base}.${extension}`;
+}
+function download(name, content) {
+  const url = typeof content === "string" ? content : URL.createObjectURL(content);
+  const link = document.createElement("a");
+  link.href = url;
+  link.download = name;
+  link.click();
+  if (typeof content !== "string") setTimeout(() => URL.revokeObjectURL(url), 1e3);
+}
+var PROPS = ["fill", "stroke", "stroke-width", "stroke-dasharray", "opacity", "fill-opacity", "font-size", "font-weight", "font-family"];
+function serializeSvg(svg, background) {
+  const clone = svg.cloneNode(true);
+  const source = [svg, ...svg.querySelectorAll("*")];
+  const target = [clone, ...clone.querySelectorAll("*")];
+  source.forEach((el, i) => {
+    const style = getComputedStyle(el);
+    const out = target[i];
+    for (const prop of PROPS) {
+      const value = style.getPropertyValue(prop);
+      if (value) out.style.setProperty(prop, value);
+    }
+    out.style.removeProperty("stroke-dasharray");
+    if (el.getAttribute("stroke-dasharray")) out.style.setProperty("stroke-dasharray", el.getAttribute("stroke-dasharray"));
+  });
+  clone.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+  if (background) clone.style.setProperty("background", background);
+  return new XMLSerializer().serializeToString(clone);
+}
+function svgToPng(markup, width, height, background, scale = 2) {
+  return new Promise((resolve, reject) => {
+    const image = new Image();
+    image.onload = () => {
+      const canvas = document.createElement("canvas");
+      canvas.width = width * scale;
+      canvas.height = height * scale;
+      const context = canvas.getContext("2d");
+      if (!context) return reject(new Error("No 2D canvas"));
+      context.fillStyle = background;
+      context.fillRect(0, 0, canvas.width, canvas.height);
+      context.drawImage(image, 0, 0, canvas.width, canvas.height);
+      resolve(canvas.toDataURL("image/png"));
+      return void 0;
+    };
+    image.onerror = () => reject(new Error("The SVG could not be rasterised"));
+    image.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(markup)}`;
+  });
+}
+
 // src/web/frame.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function useSettings(frame) {
@@ -448,8 +460,9 @@ export {
   Tooltip,
   stepColor,
   RampLegend,
+  ChartStyles,
   useSettings,
   ChartFrame,
   resolveColor
 };
-//# sourceMappingURL=chunk-DWJPPEMC.js.map
+//# sourceMappingURL=chunk-JTKR7ZWP.js.map