@krizaka/charts 0.5.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/bar.d.ts +4 -3
- package/dist/candlestick.d.ts +3 -2
- package/dist/card.d.ts +2 -1
- package/dist/card.js +2 -1
- package/dist/{cartesian-CEY_wwe_.d.ts → cartesian-XyEi00ub.d.ts} +2 -2
- package/dist/chart.d.ts +3 -2
- package/dist/chunk-3VCCSEVF.js +2 -0
- package/dist/chunk-3VCCSEVF.js.map +1 -0
- package/dist/chunk-6NYD3ROH.js +2 -0
- package/dist/chunk-6NYD3ROH.js.map +1 -0
- package/dist/{chunk-YHQFW2PR.js → chunk-AX3QU25V.js} +1 -1
- package/dist/{chunk-MK2ZFUWM.js → chunk-BHMUX6F5.js} +1 -1
- package/dist/context-CSEXYepn.d.ts +100 -0
- package/dist/credits.d.ts +2 -1
- package/dist/earnings.d.ts +4 -3
- package/dist/{frame-B1HDNm7c.d.ts → frame-7tt0uRS5.d.ts} +1 -1
- package/dist/funnel.d.ts +3 -2
- package/dist/gauge.d.ts +3 -2
- package/dist/genui.d.ts +11 -0
- package/dist/genui.js +122 -0
- package/dist/genui.js.map +1 -0
- package/dist/geo.d.ts +3 -2
- package/dist/globe.d.ts +3 -2
- package/dist/goal.d.ts +3 -2
- package/dist/heatmap.d.ts +3 -2
- package/dist/index.d.ts +4 -3
- package/dist/index.js +4 -2
- package/dist/latency.d.ts +4 -3
- package/dist/line.d.ts +4 -3
- package/dist/pie.d.ts +3 -2
- package/dist/pie.js +2 -1
- package/dist/provider.d.ts +3 -2
- package/dist/radar.d.ts +3 -2
- package/dist/sankey.d.ts +3 -2
- package/dist/scatter.d.ts +3 -2
- package/dist/sparkline.d.ts +3 -2
- package/dist/throughput.d.ts +4 -3
- package/dist/ticker.d.ts +4 -3
- package/dist/treemap.d.ts +3 -2
- package/dist/types-BL149CsX.d.ts +84 -0
- package/package.json +8 -4
- package/registry/examples/genui-catalog/dashboard.d.ts +4 -0
- package/registry/examples/genui-catalog/dashboard.js +22 -0
- package/registry/examples/genui-catalog/dashboard.tsx +18 -0
- package/registry/genui-catalog.json +91 -0
- package/registry/index.json +38 -1
- package/dist/context-DNW7bJYw.d.ts +0 -182
- /package/dist/{chunk-YHQFW2PR.js.map → chunk-AX3QU25V.js.map} +0 -0
- /package/dist/{chunk-MK2ZFUWM.js.map → chunk-BHMUX6F5.js.map} +0 -0
package/dist/bar.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { C as CartesianProps } from './cartesian-
|
|
1
|
+
import { C as CartesianProps } from './cartesian-XyEi00ub.js';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import {
|
|
4
|
-
import './frame-
|
|
3
|
+
import { D as Datum } from './types-BL149CsX.js';
|
|
4
|
+
import './frame-7tt0uRS5.js';
|
|
5
|
+
import './context-CSEXYepn.js';
|
|
5
6
|
|
|
6
7
|
interface BarChartProps<T extends Datum> extends CartesianProps<T> {
|
|
7
8
|
/** Stack the series in one bar per category (a total and its parts); default: grouped side by side. */
|
package/dist/candlestick.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { D as Datum, A as Accessor, V as ValueFormat, C as CategoryFormat, T as Threshold } from './types-BL149CsX.js';
|
|
3
3
|
import { E as EngineProps } from './host-_F8RgiIz.js';
|
|
4
|
-
import { C as ChartFrameProps } from './frame-
|
|
4
|
+
import { C as ChartFrameProps } from './frame-7tt0uRS5.js';
|
|
5
|
+
import './context-CSEXYepn.js';
|
|
5
6
|
|
|
6
7
|
interface CandlestickProps<T extends Datum> extends ChartFrameProps, EngineProps {
|
|
7
8
|
/** One row per period, oldest first. */
|
package/dist/card.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactNode } from 'react';
|
|
3
3
|
import { StatProps } from '@krizaka/ui/stat';
|
|
4
|
-
import {
|
|
4
|
+
import { V as ValueFormat, S as SeriesColor } from './types-BL149CsX.js';
|
|
5
|
+
import { e as ChartsSettings } from './context-CSEXYepn.js';
|
|
5
6
|
|
|
6
7
|
interface ChartCardProps {
|
|
7
8
|
/** What the chart shows, in a few words (a heading and the chart's accessible name). */
|
package/dist/card.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { C as ChartFrameProps } from './frame-
|
|
1
|
+
import { D as Datum, A as Accessor, a as SeriesSpec, V as ValueFormat, C as CategoryFormat, T as Threshold, M as Marker } from './types-BL149CsX.js';
|
|
2
|
+
import { C as ChartFrameProps } from './frame-7tt0uRS5.js';
|
|
3
3
|
|
|
4
4
|
/** What every cartesian chart takes: rows, the category field, the series, the formats, thresholds and markers. */
|
|
5
5
|
interface CartesianProps<T extends Datum> extends ChartFrameProps {
|
package/dist/chart.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { E as EngineProps, W as WalkItem } from './host-_F8RgiIz.js';
|
|
2
|
-
import { C as ChartFrameProps, T as TableModel } from './frame-
|
|
2
|
+
import { C as ChartFrameProps, T as TableModel } from './frame-7tt0uRS5.js';
|
|
3
3
|
import * as react from 'react';
|
|
4
4
|
import { EChartsCoreOption } from 'echarts/core';
|
|
5
|
-
import './context-
|
|
5
|
+
import './context-CSEXYepn.js';
|
|
6
|
+
import './types-BL149CsX.js';
|
|
6
7
|
|
|
7
8
|
interface ResolvedTheme {
|
|
8
9
|
readonly text: string;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}
|
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
import { L as Locale, B as BrandId } from './types-BL149CsX.js';
|
|
4
|
+
|
|
5
|
+
interface ChartLabels {
|
|
6
|
+
/** The button that shows the data table. */
|
|
7
|
+
showData: string;
|
|
8
|
+
/** The button that hides it. */
|
|
9
|
+
hideData: string;
|
|
10
|
+
/** The caption of the data table: `{title}`. */
|
|
11
|
+
tableCaption: string;
|
|
12
|
+
/** The export buttons. */
|
|
13
|
+
exportPng: string;
|
|
14
|
+
exportSvg: string;
|
|
15
|
+
exportCsv: string;
|
|
16
|
+
/** The actions menu (⋯) of a chart: its accessible name, and its entries. */
|
|
17
|
+
actions: string;
|
|
18
|
+
viewTable: string;
|
|
19
|
+
downloadCsv: string;
|
|
20
|
+
downloadPng: string;
|
|
21
|
+
downloadSvg: string;
|
|
22
|
+
copyData: string;
|
|
23
|
+
/** Announced once the data is on the clipboard. */
|
|
24
|
+
copied: string;
|
|
25
|
+
/** The close button of the table sheet. */
|
|
26
|
+
close: string;
|
|
27
|
+
/** The sheet's description: `{count}` rows. */
|
|
28
|
+
tableRows: string;
|
|
29
|
+
/** Legend chips filter: the chip's accessible name, `{label}`. */
|
|
30
|
+
toggleSeries: string;
|
|
31
|
+
/** Sparse data: under the chart, `{count}` periods with data out of `{total}`. */
|
|
32
|
+
sparse: string;
|
|
33
|
+
/** A KPI's change: `{change}` (`+12 %`) against the previous period. */
|
|
34
|
+
trendVsPrevious: string;
|
|
35
|
+
/** Announced while the data loads. */
|
|
36
|
+
loading: string;
|
|
37
|
+
/** Shown when there is nothing to draw. */
|
|
38
|
+
empty: string;
|
|
39
|
+
/** Shown when the data could not be loaded. */
|
|
40
|
+
error: string;
|
|
41
|
+
/** The keyboard hint, read once when the plot takes the focus. */
|
|
42
|
+
keyboardHint: string;
|
|
43
|
+
/** The role description of the plot (`chart`). */
|
|
44
|
+
roleDescription: string;
|
|
45
|
+
/** Summary pieces. `{kind}` is the chart's name (`Line chart`), `{count}` a number of points or series. */
|
|
46
|
+
summaryIntro: string;
|
|
47
|
+
summarySeries: string;
|
|
48
|
+
summaryRange: string;
|
|
49
|
+
summaryTrendUp: string;
|
|
50
|
+
summaryTrendDown: string;
|
|
51
|
+
summaryTrendFlat: string;
|
|
52
|
+
summaryTotal: string;
|
|
53
|
+
summaryThreshold: string;
|
|
54
|
+
summaryShare: string;
|
|
55
|
+
/** Scatter: the correlation of x and y (Pearson's r). */
|
|
56
|
+
summaryCorrelation: string;
|
|
57
|
+
/** Funnel: from one stage to the next, and from the first to the last. */
|
|
58
|
+
summaryConversion: string;
|
|
59
|
+
summaryOverall: string;
|
|
60
|
+
/** Heatmap, calendar: the largest cell and the number of cells with a value. */
|
|
61
|
+
summaryPeak: string;
|
|
62
|
+
summaryActive: string;
|
|
63
|
+
/** Candlestick: the period's range. */
|
|
64
|
+
summaryOhlc: string;
|
|
65
|
+
/** The names of the charts, read first in the summary. */
|
|
66
|
+
kinds: Record<ChartKind, string>;
|
|
67
|
+
/** The column of the values, when the chart has no value label. */
|
|
68
|
+
value: string;
|
|
69
|
+
/** The column of the categories in the data table, when the chart has no x label. */
|
|
70
|
+
category: string;
|
|
71
|
+
/** The total row of a stacked chart, a pie, a funnel. */
|
|
72
|
+
total: string;
|
|
73
|
+
/** What a missing value reads as. */
|
|
74
|
+
noValue: string;
|
|
75
|
+
}
|
|
76
|
+
type ChartKind = "line" | "area" | "bar" | "pie" | "donut" | "gauge" | "sparkline" | "radar" | "heatmap" | "calendar" | "sankey" | "funnel" | "candlestick" | "treemap" | "scatter" | "map" | "globe" | "chart";
|
|
77
|
+
declare const DEFAULT_LABELS: ChartLabels;
|
|
78
|
+
/** The words an app or a chart passes: any of them, and any of the chart names. */
|
|
79
|
+
type ChartLabelsInput = Partial<Omit<ChartLabels, "kinds">> & {
|
|
80
|
+
kinds?: Partial<Record<ChartKind, string>>;
|
|
81
|
+
};
|
|
82
|
+
|
|
83
|
+
interface ChartsSettings {
|
|
84
|
+
/** The locale of every figure and date (`"fr-FR"`). Default `"en-US"`. */
|
|
85
|
+
locale?: Locale;
|
|
86
|
+
/**
|
|
87
|
+
* The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it
|
|
88
|
+
* when the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).
|
|
89
|
+
*/
|
|
90
|
+
brand?: BrandId;
|
|
91
|
+
/** The words, translated: the buttons, the states, the written summary. */
|
|
92
|
+
labels?: ChartLabelsInput;
|
|
93
|
+
}
|
|
94
|
+
interface ChartsProviderProps extends ChartsSettings {
|
|
95
|
+
children: ReactNode;
|
|
96
|
+
}
|
|
97
|
+
/** Sets the locale, the brand and the words of every chart below it. */
|
|
98
|
+
declare function ChartsProvider({ locale, brand, labels, children }: ChartsProviderProps): react.JSX.Element;
|
|
99
|
+
|
|
100
|
+
export { type ChartKind as C, DEFAULT_LABELS as D, type ChartLabels as a, type ChartLabelsInput as b, ChartsProvider as c, type ChartsProviderProps as d, type ChartsSettings as e };
|
package/dist/credits.d.ts
CHANGED
|
@@ -2,7 +2,8 @@ import { a as CreditLabels } from './labels-DE_743fQ.js';
|
|
|
2
2
|
export { C as CREDIT_LABELS } from './labels-DE_743fQ.js';
|
|
3
3
|
import * as react from 'react';
|
|
4
4
|
import { ReactNode, CSSProperties } from 'react';
|
|
5
|
-
import {
|
|
5
|
+
import { V as ValueFormat } from './types-BL149CsX.js';
|
|
6
|
+
import { e as ChartsSettings } from './context-CSEXYepn.js';
|
|
6
7
|
|
|
7
8
|
interface CreditUsageProps extends Omit<ChartsSettings, "labels"> {
|
|
8
9
|
/** What the allowance is (“Credits this month”): the heading and the meter's name. */
|
package/dist/earnings.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { b as EarningsLabels } from './labels-DE_743fQ.js';
|
|
2
2
|
export { E as EARNINGS_LABELS } from './labels-DE_743fQ.js';
|
|
3
3
|
import * as react from 'react';
|
|
4
|
-
import { C as CartesianProps } from './cartesian-
|
|
5
|
-
import {
|
|
6
|
-
import './frame-
|
|
4
|
+
import { C as CartesianProps } from './cartesian-XyEi00ub.js';
|
|
5
|
+
import { D as Datum, A as Accessor, C as CategoryFormat, T as Threshold } from './types-BL149CsX.js';
|
|
6
|
+
import './frame-7tt0uRS5.js';
|
|
7
|
+
import './context-CSEXYepn.js';
|
|
7
8
|
|
|
8
9
|
interface EarningsChartProps<T extends Datum> extends Omit<CartesianProps<T>, "y" | "yLabel" | "series" | "format" | "x" | "xFormat" | "thresholds" | "labels"> {
|
|
9
10
|
/** The field (or function) of the period: an ISO month (`"2026-04"`), a day. Default `"month"`. */
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactNode, CSSProperties } from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { e as ChartsSettings } from './context-CSEXYepn.js';
|
|
3
3
|
|
|
4
4
|
type ExportFormat = "png" | "svg" | "csv";
|
|
5
5
|
/** The props every web chart takes, on top of its data. */
|
package/dist/funnel.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { D as Datum, A as Accessor, V as ValueFormat } from './types-BL149CsX.js';
|
|
3
3
|
import { E as EngineProps } from './host-_F8RgiIz.js';
|
|
4
|
-
import { C as ChartFrameProps } from './frame-
|
|
4
|
+
import { C as ChartFrameProps } from './frame-7tt0uRS5.js';
|
|
5
|
+
import './context-CSEXYepn.js';
|
|
5
6
|
|
|
6
7
|
interface FunnelProps<T extends Datum> extends ChartFrameProps, EngineProps {
|
|
7
8
|
/** One row per stage, first stage first. */
|
package/dist/gauge.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { V as ValueFormat, T as Threshold,
|
|
3
|
-
import { C as ChartFrameProps } from './frame-
|
|
2
|
+
import { V as ValueFormat, T as Threshold, c as Tone } from './types-BL149CsX.js';
|
|
3
|
+
import { C as ChartFrameProps } from './frame-7tt0uRS5.js';
|
|
4
|
+
import './context-CSEXYepn.js';
|
|
4
5
|
|
|
5
6
|
interface GaugeZone {
|
|
6
7
|
/** The zone runs from the previous one's end (or `min`) to this value. */
|
package/dist/genui.d.ts
ADDED
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { GenUiCatalog } from '@krizaka/ui/genui';
|
|
2
|
+
import { V as ValueFormat } from './types-BL149CsX.js';
|
|
3
|
+
|
|
4
|
+
/** The most rows a generated chart draws (a year of days). */
|
|
5
|
+
declare const GENUI_CHART_ROWS = 366;
|
|
6
|
+
/** A closed format of the spec as the charts' `ValueFormat`. */
|
|
7
|
+
declare function chartFormat(format: unknown, currency: unknown): ValueFormat;
|
|
8
|
+
/** `KpiStat`, `ChartCard` — the data entries of the catalog `krizaka:genui/v1`. */
|
|
9
|
+
declare const chartsGenUiCatalog: GenUiCatalog;
|
|
10
|
+
|
|
11
|
+
export { GENUI_CHART_ROWS, chartFormat, chartsGenUiCatalog };
|
package/dist/genui.js
ADDED
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import {
|
|
3
|
+
AreaChart,
|
|
4
|
+
LineChart
|
|
5
|
+
} from "./chunk-Z4T3JFNU.js";
|
|
6
|
+
import {
|
|
7
|
+
PieChart
|
|
8
|
+
} from "./chunk-BHMUX6F5.js";
|
|
9
|
+
import {
|
|
10
|
+
ChartCard,
|
|
11
|
+
KpiStat
|
|
12
|
+
} from "./chunk-AX3QU25V.js";
|
|
13
|
+
import {
|
|
14
|
+
BarChart
|
|
15
|
+
} from "./chunk-IURCLBUQ.js";
|
|
16
|
+
import "./chunk-JST4HJC3.js";
|
|
17
|
+
import "./chunk-FIQHMJZK.js";
|
|
18
|
+
import "./chunk-BISL7DYW.js";
|
|
19
|
+
import "./chunk-GD7TWEN3.js";
|
|
20
|
+
import "./chunk-PGD6SH5I.js";
|
|
21
|
+
import "./chunk-OB5EFDDH.js";
|
|
22
|
+
import "./chunk-XLLYNNC6.js";
|
|
23
|
+
import "./chunk-P6RS2L23.js";
|
|
24
|
+
import "./chunk-OVASCEGF.js";
|
|
25
|
+
import "./chunk-GRRFPI27.js";
|
|
26
|
+
|
|
27
|
+
// src/genui/catalog.tsx
|
|
28
|
+
import { allowKeys, checkBinding, checkCurrency, checkEnum, checkNumber, checkText, GENUI_FORMATS } from "@krizaka/ui/genui";
|
|
29
|
+
import { jsx } from "react/jsx-runtime";
|
|
30
|
+
var GENUI_CHART_ROWS = 366;
|
|
31
|
+
var KINDS = ["line", "bar", "area", "pie"];
|
|
32
|
+
var first = (...problems) => problems.find((p) => p !== null) ?? null;
|
|
33
|
+
var KEY = /^[A-Za-z0-9_]{1,64}$/;
|
|
34
|
+
function chartFormat(format, currency) {
|
|
35
|
+
if (format === "money" && typeof currency === "string") return { style: "money", currency };
|
|
36
|
+
if (format === "integer" || format === "compact" || format === "percent") return format;
|
|
37
|
+
return "number";
|
|
38
|
+
}
|
|
39
|
+
var text = (value) => typeof value === "string" ? value : typeof value === "number" ? String(value) : "";
|
|
40
|
+
var num = (value) => typeof value === "number" && Number.isFinite(value) ? value : void 0;
|
|
41
|
+
var kpiStat = {
|
|
42
|
+
check: (c) => first(
|
|
43
|
+
allowKeys(c, ["label", "value", "previous", "format", "currency", "good"]),
|
|
44
|
+
checkText(c.label, "label", true),
|
|
45
|
+
checkNumber(c.value, "value", true),
|
|
46
|
+
checkNumber(c.previous, "previous", false),
|
|
47
|
+
checkEnum(c.format, "format", GENUI_FORMATS),
|
|
48
|
+
checkCurrency(c.currency, c.format === "money"),
|
|
49
|
+
checkEnum(c.good, "good", ["up", "down"])
|
|
50
|
+
),
|
|
51
|
+
render: (c, ctx) => /* @__PURE__ */ jsx(
|
|
52
|
+
KpiStat,
|
|
53
|
+
{
|
|
54
|
+
label: text(ctx.resolve(c.label)),
|
|
55
|
+
value: num(ctx.resolve(c.value)) ?? 0,
|
|
56
|
+
previous: num(ctx.resolve(c.previous)),
|
|
57
|
+
format: chartFormat(c.format, c.currency),
|
|
58
|
+
good: c.good ?? "up",
|
|
59
|
+
locale: ctx.locale
|
|
60
|
+
}
|
|
61
|
+
)
|
|
62
|
+
};
|
|
63
|
+
function checkSeries(value) {
|
|
64
|
+
if (!Array.isArray(value) || value.length === 0 || value.length > 12) return "series is an array of 1 to 12";
|
|
65
|
+
for (const s of value) {
|
|
66
|
+
if (s === null || typeof s !== "object" || Array.isArray(s)) return "a series is an object";
|
|
67
|
+
const extra = Object.keys(s).find((k) => k !== "key" && k !== "label");
|
|
68
|
+
if (extra) return `a series has no key "${extra}"`;
|
|
69
|
+
const { key, label } = s;
|
|
70
|
+
if (typeof key !== "string" || !KEY.test(key)) return "a series key is 1-64 characters of [A-Za-z0-9_]";
|
|
71
|
+
if (typeof label !== "string" || label.length > 80) return "a series label is a string";
|
|
72
|
+
}
|
|
73
|
+
return null;
|
|
74
|
+
}
|
|
75
|
+
function rowsOf(value) {
|
|
76
|
+
if (!Array.isArray(value)) return [];
|
|
77
|
+
return value.slice(0, GENUI_CHART_ROWS).flatMap((r) => {
|
|
78
|
+
if (r === null || typeof r !== "object" || Array.isArray(r)) return [];
|
|
79
|
+
const row = {};
|
|
80
|
+
for (const [k, v] of Object.entries(r)) if (KEY.test(k)) row[k] = typeof v === "number" || typeof v === "string" ? v : null;
|
|
81
|
+
return [row];
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
function Chart({ c, rows, locale }) {
|
|
85
|
+
const series = c.series.map((s) => ({ key: s.key, label: s.label }));
|
|
86
|
+
const format = chartFormat(c.format, c.currency);
|
|
87
|
+
const common = { data: rows, x: c.x, series, format, locale, height: 240 };
|
|
88
|
+
switch (c.kind) {
|
|
89
|
+
case "bar":
|
|
90
|
+
return /* @__PURE__ */ jsx(BarChart, { ...common });
|
|
91
|
+
case "area":
|
|
92
|
+
return /* @__PURE__ */ jsx(AreaChart, { ...common });
|
|
93
|
+
case "pie":
|
|
94
|
+
return /* @__PURE__ */ jsx(PieChart, { data: rows, label: (r) => text(r[c.x]), value: (r) => num(r[series[0].key]) ?? 0, format, locale, donut: true, height: 240 });
|
|
95
|
+
default:
|
|
96
|
+
return /* @__PURE__ */ jsx(LineChart, { ...common });
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
var chartCard = {
|
|
100
|
+
check: (c) => first(
|
|
101
|
+
allowKeys(c, ["title", "insight", "kind", "x", "series", "data", "format", "currency"]),
|
|
102
|
+
checkText(c.title, "title", true),
|
|
103
|
+
checkText(c.insight, "insight", false),
|
|
104
|
+
checkEnum(c.kind, "kind", KINDS, true),
|
|
105
|
+
typeof c.x === "string" && KEY.test(c.x) ? null : "x is a column key",
|
|
106
|
+
checkSeries(c.series),
|
|
107
|
+
checkBinding(c.data, "data"),
|
|
108
|
+
checkEnum(c.format, "format", GENUI_FORMATS),
|
|
109
|
+
checkCurrency(c.currency, c.format === "money")
|
|
110
|
+
),
|
|
111
|
+
render: (c, ctx) => {
|
|
112
|
+
const rows = rowsOf(ctx.resolve(c.data));
|
|
113
|
+
return /* @__PURE__ */ jsx(ChartCard, { title: text(ctx.resolve(c.title)), insight: c.insight === void 0 ? void 0 : text(ctx.resolve(c.insight)), children: rows.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-sm text-fg-muted", children: ctx.labels.noData }) : /* @__PURE__ */ jsx(Chart, { c, rows, locale: ctx.locale }) });
|
|
114
|
+
}
|
|
115
|
+
};
|
|
116
|
+
var chartsGenUiCatalog = { KpiStat: kpiStat, ChartCard: chartCard };
|
|
117
|
+
export {
|
|
118
|
+
GENUI_CHART_ROWS,
|
|
119
|
+
chartFormat,
|
|
120
|
+
chartsGenUiCatalog
|
|
121
|
+
};
|
|
122
|
+
//# sourceMappingURL=genui.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/genui/catalog.tsx"],"sourcesContent":["\"use client\";\n// The data entries of `krizaka:genui/v1` (ADR-082): `KpiStat` and `ChartCard`, drawn with this package's components.\n// Merge with @krizaka/ui's base catalog: `{ ...baseGenUiCatalog, ...chartsGenUiCatalog }`. The checks are strict — a\n// property outside the list, a format outside the closed list or data that is not a list of rows refuses the message.\nimport { allowKeys, checkBinding, checkCurrency, checkEnum, checkNumber, checkText, GENUI_FORMATS, type GenUiCatalog, type GenUiComponent, type GenUiEntry, type GenUiFormat } from \"@krizaka/ui/genui\";\n\nimport { BarChart } from \"../bar/bar-chart\";\nimport { ChartCard } from \"../card/chart-card\";\nimport { KpiStat } from \"../card/kpi-stat\";\nimport type { ValueFormat } from \"../core/types\";\nimport { AreaChart, LineChart } from \"../line/line-chart\";\nimport { PieChart } from \"../pie/pie-chart\";\n\n/** The most rows a generated chart draws (a year of days). */\nexport const GENUI_CHART_ROWS = 366;\nconst KINDS = [\"line\", \"bar\", \"area\", \"pie\"] as const;\nconst first = (...problems: (string | null)[]) => problems.find((p) => p !== null) ?? null;\nconst KEY = /^[A-Za-z0-9_]{1,64}$/;\n\n/** A closed format of the spec as the charts' `ValueFormat`. */\nexport function chartFormat(format: unknown, currency: unknown): ValueFormat {\n if (format === \"money\" && typeof currency === \"string\") return { style: \"money\", currency };\n if (format === \"integer\" || format === \"compact\" || format === \"percent\") return format;\n return \"number\";\n}\n\nconst text = (value: unknown) => (typeof value === \"string\" ? value : typeof value === \"number\" ? String(value) : \"\");\nconst num = (value: unknown) => (typeof value === \"number\" && Number.isFinite(value) ? value : undefined);\n\nconst kpiStat: GenUiEntry = {\n check: (c) =>\n first(\n allowKeys(c, [\"label\", \"value\", \"previous\", \"format\", \"currency\", \"good\"]),\n checkText(c.label, \"label\", true),\n checkNumber(c.value, \"value\", true),\n checkNumber(c.previous, \"previous\", false),\n checkEnum(c.format, \"format\", GENUI_FORMATS),\n checkCurrency(c.currency, c.format === \"money\"),\n checkEnum(c.good, \"good\", [\"up\", \"down\"]),\n ),\n render: (c, ctx) => (\n <KpiStat\n label={text(ctx.resolve(c.label))}\n value={num(ctx.resolve(c.value)) ?? 0}\n previous={num(ctx.resolve(c.previous))}\n format={chartFormat(c.format as GenUiFormat | undefined, c.currency)}\n good={(c.good as \"up\" | \"down\" | undefined) ?? \"up\"}\n locale={ctx.locale}\n />\n ),\n};\n\nfunction checkSeries(value: unknown): string | null {\n if (!Array.isArray(value) || value.length === 0 || value.length > 12) return \"series is an array of 1 to 12\";\n for (const s of value) {\n if (s === null || typeof s !== \"object\" || Array.isArray(s)) return \"a series is an object\";\n const extra = Object.keys(s).find((k) => k !== \"key\" && k !== \"label\");\n if (extra) return `a series has no key \"${extra}\"`;\n const { key, label } = s as Record<string, unknown>;\n if (typeof key !== \"string\" || !KEY.test(key)) return \"a series key is 1-64 characters of [A-Za-z0-9_]\";\n if (typeof label !== \"string\" || label.length > 80) return \"a series label is a string\";\n }\n return null;\n}\n\ntype Row = Record<string, string | number | null>;\n\n/** The rows a binding points at, as flat records of strings and numbers (anything else dropped). */\nfunction rowsOf(value: unknown): Row[] {\n if (!Array.isArray(value)) return [];\n return value.slice(0, GENUI_CHART_ROWS).flatMap((r) => {\n if (r === null || typeof r !== \"object\" || Array.isArray(r)) return [];\n const row: Row = {};\n for (const [k, v] of Object.entries(r)) if (KEY.test(k)) row[k] = typeof v === \"number\" || typeof v === \"string\" ? v : null;\n return [row];\n });\n}\n\nfunction Chart({ c, rows, locale }: { c: GenUiComponent; rows: Row[]; locale: string }) {\n const series = (c.series as { key: string; label: string }[]).map((s) => ({ key: s.key, label: s.label }));\n const format = chartFormat(c.format, c.currency);\n const common = { data: rows, x: c.x as string, series, format, locale, height: 240 };\n switch (c.kind) {\n case \"bar\":\n return <BarChart {...common} />;\n case \"area\":\n return <AreaChart {...common} />;\n case \"pie\":\n return <PieChart data={rows} label={(r: Row) => text(r[c.x as string])} value={(r: Row) => num(r[series[0].key]) ?? 0} format={format} locale={locale} donut height={240} />;\n default:\n return <LineChart {...common} />;\n }\n}\n\nconst chartCard: GenUiEntry = {\n check: (c) =>\n first(\n allowKeys(c, [\"title\", \"insight\", \"kind\", \"x\", \"series\", \"data\", \"format\", \"currency\"]),\n checkText(c.title, \"title\", true),\n checkText(c.insight, \"insight\", false),\n checkEnum(c.kind, \"kind\", KINDS, true),\n typeof c.x === \"string\" && KEY.test(c.x) ? null : \"x is a column key\",\n checkSeries(c.series),\n checkBinding(c.data, \"data\"),\n checkEnum(c.format, \"format\", GENUI_FORMATS),\n checkCurrency(c.currency, c.format === \"money\"),\n ),\n render: (c, ctx) => {\n const rows = rowsOf(ctx.resolve(c.data));\n return (\n <ChartCard title={text(ctx.resolve(c.title))} insight={c.insight === undefined ? undefined : text(ctx.resolve(c.insight))}>\n {rows.length === 0 ? <p className=\"text-sm text-fg-muted\">{ctx.labels.noData}</p> : <Chart c={c} rows={rows} locale={ctx.locale} />}\n </ChartCard>\n );\n },\n};\n\n/** `KpiStat`, `ChartCard` — the data entries of the catalog `krizaka:genui/v1`. */\nexport const chartsGenUiCatalog: GenUiCatalog = { KpiStat: kpiStat, ChartCard: chartCard };\n"],"mappings":"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","names":[]}
|
package/dist/geo.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import { C as ChartFrameProps } from './frame-
|
|
2
|
+
import { D as Datum, A as Accessor, V as ValueFormat } from './types-BL149CsX.js';
|
|
3
|
+
import { C as ChartFrameProps } from './frame-7tt0uRS5.js';
|
|
4
|
+
import './context-CSEXYepn.js';
|
|
4
5
|
|
|
5
6
|
/** A place on the map or the globe. */
|
|
6
7
|
interface GeoPoint {
|
package/dist/globe.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { c as Tone, V as ValueFormat } from './types-BL149CsX.js';
|
|
3
3
|
import { GeoPoint } from './geo.js';
|
|
4
|
-
import { C as ChartFrameProps } from './frame-
|
|
4
|
+
import { C as ChartFrameProps } from './frame-7tt0uRS5.js';
|
|
5
|
+
import './context-CSEXYepn.js';
|
|
5
6
|
|
|
6
7
|
interface GlobePoint extends GeoPoint {
|
|
7
8
|
/** Its tone: a healthy region in `"success"`, a degraded one in `"warning"`. Default `"accent"`. */
|
package/dist/goal.d.ts
CHANGED
|
@@ -3,8 +3,9 @@ export { G as GOAL_LABELS } from './labels-DE_743fQ.js';
|
|
|
3
3
|
import * as react from 'react';
|
|
4
4
|
import { ReactNode } from 'react';
|
|
5
5
|
import { GaugeProps } from './gauge.js';
|
|
6
|
-
import './
|
|
7
|
-
import './frame-
|
|
6
|
+
import './types-BL149CsX.js';
|
|
7
|
+
import './frame-7tt0uRS5.js';
|
|
8
|
+
import './context-CSEXYepn.js';
|
|
8
9
|
|
|
9
10
|
interface GoalProgressProps extends Omit<GaugeProps, "value" | "min" | "max" | "format" | "caption" | "target" | "zones" | "tone" | "labels"> {
|
|
10
11
|
/** The amount raised, in **minor units** (cents). */
|
package/dist/heatmap.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { D as Datum, A as Accessor, V as ValueFormat, C as CategoryFormat } from './types-BL149CsX.js';
|
|
3
3
|
import { E as EngineProps } from './host-_F8RgiIz.js';
|
|
4
|
-
import { C as ChartFrameProps } from './frame-
|
|
4
|
+
import { C as ChartFrameProps } from './frame-7tt0uRS5.js';
|
|
5
|
+
import './context-CSEXYepn.js';
|
|
5
6
|
|
|
6
7
|
interface HeatmapProps<T extends Datum> extends ChartFrameProps, EngineProps {
|
|
7
8
|
/** One row per cell. */
|
package/dist/index.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
export { C as CartesianProps } from './cartesian-
|
|
1
|
+
export { C as CartesianProps } from './cartesian-XyEi00ub.js';
|
|
2
2
|
export { BarChart, BarChartProps } from './bar.js';
|
|
3
3
|
export { Candlestick, CandlestickProps } from './candlestick.js';
|
|
4
4
|
export { ChartCard, ChartCardProps, KpiStat, KpiStatProps } from './card.js';
|
|
5
5
|
export { W as WalkItem } from './host-_F8RgiIz.js';
|
|
6
|
-
export { T as TableModel } from './frame-
|
|
6
|
+
export { T as TableModel } from './frame-7tt0uRS5.js';
|
|
7
7
|
export { Chart, ChartProps, ResolvedTheme } from './chart.js';
|
|
8
8
|
export { C as CREDIT_LABELS, a as CreditLabels, E as EARNINGS_LABELS, b as EarningsLabels, G as GOAL_LABELS, c as GoalLabels, L as LATENCY_LABELS, d as LatencyLabels, T as THROUGHPUT_LABELS, e as TICKER_LABELS, f as ThroughputLabels, g as TickerLabels } from './labels-DE_743fQ.js';
|
|
9
9
|
export { CreditUsage, CreditUsageProps } from './credits.js';
|
|
@@ -17,8 +17,9 @@ export { CalendarHeatmap, CalendarHeatmapProps, Heatmap, HeatmapProps } from './
|
|
|
17
17
|
export { LatencyChart, LatencyChartProps, formatDuration } from './latency.js';
|
|
18
18
|
export { AreaChart, AreaChartProps, LineChart, LineChartProps } from './line.js';
|
|
19
19
|
export { DonutChart, PieChart, PieChartProps } from './pie.js';
|
|
20
|
-
export {
|
|
20
|
+
export { C as ChartKind, a as ChartLabels, b as ChartLabelsInput, c as ChartsProvider, d as ChartsProviderProps, e as ChartsSettings, D as DEFAULT_LABELS } from './context-CSEXYepn.js';
|
|
21
21
|
export { DIVERGING, HUES, ORDERS, SlidingWindow, palette, sequential, useSlidingWindow } from './provider.js';
|
|
22
|
+
export { A as Accessor, B as BrandId, C as CategoryFormat, D as Datum, L as Locale, M as Marker, S as SeriesColor, a as SeriesSpec, b as SeriesSummary, T as Threshold, c as Tone, V as ValueFormat } from './types-BL149CsX.js';
|
|
22
23
|
export { RadarChart, RadarChartProps } from './radar.js';
|
|
23
24
|
export { Sankey, SankeyProps } from './sankey.js';
|
|
24
25
|
export { ScatterChart, ScatterChartProps, correlation } from './scatter.js';
|
package/dist/index.js
CHANGED
|
@@ -35,10 +35,11 @@ import {
|
|
|
35
35
|
LineChart
|
|
36
36
|
} from "./chunk-Z4T3JFNU.js";
|
|
37
37
|
import "./chunk-FINOPIDN.js";
|
|
38
|
+
import "./chunk-6NYD3ROH.js";
|
|
38
39
|
import {
|
|
39
40
|
DonutChart,
|
|
40
41
|
PieChart
|
|
41
|
-
} from "./chunk-
|
|
42
|
+
} from "./chunk-BHMUX6F5.js";
|
|
42
43
|
import "./chunk-G2KF2WL4.js";
|
|
43
44
|
import "./chunk-POQIHFAZ.js";
|
|
44
45
|
import {
|
|
@@ -51,10 +52,11 @@ import "./chunk-6FINSUOS.js";
|
|
|
51
52
|
import {
|
|
52
53
|
useSlidingWindow
|
|
53
54
|
} from "./chunk-TPJDOB7R.js";
|
|
55
|
+
import "./chunk-3VCCSEVF.js";
|
|
54
56
|
import {
|
|
55
57
|
ChartCard,
|
|
56
58
|
KpiStat
|
|
57
|
-
} from "./chunk-
|
|
59
|
+
} from "./chunk-AX3QU25V.js";
|
|
58
60
|
import {
|
|
59
61
|
EarningsChart
|
|
60
62
|
} from "./chunk-IJTI6VJD.js";
|
package/dist/latency.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { d as LatencyLabels } from './labels-DE_743fQ.js';
|
|
2
2
|
export { L as LATENCY_LABELS } from './labels-DE_743fQ.js';
|
|
3
|
-
import { L as Locale,
|
|
3
|
+
import { L as Locale, D as Datum, A as Accessor } from './types-BL149CsX.js';
|
|
4
4
|
import * as react from 'react';
|
|
5
|
-
import { C as CartesianProps } from './cartesian-
|
|
6
|
-
import './frame-
|
|
5
|
+
import { C as CartesianProps } from './cartesian-XyEi00ub.js';
|
|
6
|
+
import './frame-7tt0uRS5.js';
|
|
7
|
+
import './context-CSEXYepn.js';
|
|
7
8
|
|
|
8
9
|
/** Milliseconds as a duration: `840 ms`, `1.2 s`, `2.5 min` — the unit follows the size, through Intl. */
|
|
9
10
|
declare function formatDuration(ms: number, locale: Locale): string;
|
package/dist/line.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import { C as CartesianProps } from './cartesian-
|
|
1
|
+
import { C as CartesianProps } from './cartesian-XyEi00ub.js';
|
|
2
2
|
import * as react from 'react';
|
|
3
|
-
import {
|
|
4
|
-
import './frame-
|
|
3
|
+
import { D as Datum } from './types-BL149CsX.js';
|
|
4
|
+
import './frame-7tt0uRS5.js';
|
|
5
|
+
import './context-CSEXYepn.js';
|
|
5
6
|
|
|
6
7
|
type Curve = "linear" | "monotone" | "step";
|
|
7
8
|
|
package/dist/pie.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
3
|
-
import { C as ChartFrameProps } from './frame-
|
|
2
|
+
import { D as Datum, A as Accessor, S as SeriesColor, V as ValueFormat } from './types-BL149CsX.js';
|
|
3
|
+
import { C as ChartFrameProps } from './frame-7tt0uRS5.js';
|
|
4
|
+
import './context-CSEXYepn.js';
|
|
4
5
|
|
|
5
6
|
interface PieChartProps<T extends Datum> extends ChartFrameProps {
|
|
6
7
|
/** One row per part. */
|
package/dist/pie.js
CHANGED
package/dist/provider.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
export { C as ChartKind, a as ChartLabels, b as ChartLabelsInput, c as ChartsProvider, d as ChartsProviderProps, e as ChartsSettings, D as DEFAULT_LABELS } from './context-CSEXYepn.js';
|
|
2
|
+
import { B as BrandId } from './types-BL149CsX.js';
|
|
3
|
+
export { A as Accessor, C as CategoryFormat, D as Datum, L as Locale, M as Marker, S as SeriesColor, a as SeriesSpec, b as SeriesSummary, T as Threshold, c as Tone, V as ValueFormat } from './types-BL149CsX.js';
|
|
3
4
|
import 'react';
|
|
4
5
|
|
|
5
6
|
type Mode = "dark" | "light";
|
package/dist/radar.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { D as Datum, A as Accessor, a as SeriesSpec, V as ValueFormat } from './types-BL149CsX.js';
|
|
3
3
|
import { E as EngineProps } from './host-_F8RgiIz.js';
|
|
4
|
-
import { C as ChartFrameProps } from './frame-
|
|
4
|
+
import { C as ChartFrameProps } from './frame-7tt0uRS5.js';
|
|
5
|
+
import './context-CSEXYepn.js';
|
|
5
6
|
|
|
6
7
|
interface RadarChartProps<T extends Datum> extends ChartFrameProps, EngineProps {
|
|
7
8
|
/** One row per axis (“Latency”, “Quality”…). */
|
package/dist/sankey.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { D as Datum, A as Accessor, V as ValueFormat } from './types-BL149CsX.js';
|
|
3
3
|
import { E as EngineProps } from './host-_F8RgiIz.js';
|
|
4
|
-
import { C as ChartFrameProps } from './frame-
|
|
4
|
+
import { C as ChartFrameProps } from './frame-7tt0uRS5.js';
|
|
5
|
+
import './context-CSEXYepn.js';
|
|
5
6
|
|
|
6
7
|
interface SankeyProps<T extends Datum> extends ChartFrameProps, EngineProps {
|
|
7
8
|
/** One row per flow. */
|
package/dist/scatter.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { D as Datum, A as Accessor, V as ValueFormat, T as Threshold } from './types-BL149CsX.js';
|
|
3
3
|
import { E as EngineProps } from './host-_F8RgiIz.js';
|
|
4
|
-
import { C as ChartFrameProps } from './frame-
|
|
4
|
+
import { C as ChartFrameProps } from './frame-7tt0uRS5.js';
|
|
5
|
+
import './context-CSEXYepn.js';
|
|
5
6
|
|
|
6
7
|
interface ScatterChartProps<T extends Datum> extends ChartFrameProps, EngineProps {
|
|
7
8
|
/** One row per point. */
|
package/dist/sparkline.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { S as SeriesColor, T as Threshold, V as ValueFormat } from './
|
|
3
|
-
import { C as ChartFrameProps } from './frame-
|
|
2
|
+
import { S as SeriesColor, T as Threshold, V as ValueFormat } from './types-BL149CsX.js';
|
|
3
|
+
import { C as ChartFrameProps } from './frame-7tt0uRS5.js';
|
|
4
|
+
import './context-CSEXYepn.js';
|
|
4
5
|
|
|
5
6
|
interface SparklineProps extends Omit<ChartFrameProps, "hideTitle" | "dataTable" | "exportable" | "description"> {
|
|
6
7
|
/** The values, oldest first (`null` for a gap). */
|
package/dist/throughput.d.ts
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { f as ThroughputLabels } from './labels-DE_743fQ.js';
|
|
2
2
|
export { T as THROUGHPUT_LABELS } from './labels-DE_743fQ.js';
|
|
3
|
-
import {
|
|
3
|
+
import { c as Tone, D as Datum, A as Accessor, C as CategoryFormat } from './types-BL149CsX.js';
|
|
4
4
|
import * as react from 'react';
|
|
5
|
-
import { C as CartesianProps } from './cartesian-
|
|
6
|
-
import './frame-
|
|
5
|
+
import { C as CartesianProps } from './cartesian-XyEi00ub.js';
|
|
6
|
+
import './frame-7tt0uRS5.js';
|
|
7
|
+
import './context-CSEXYepn.js';
|
|
7
8
|
|
|
8
9
|
/** A status of a job: the field holding its count per period, its name, its tone, and its part in the success rate. */
|
|
9
10
|
interface JobStatus {
|
package/dist/ticker.d.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { g as TickerLabels } from './labels-DE_743fQ.js';
|
|
2
2
|
export { e as TICKER_LABELS } from './labels-DE_743fQ.js';
|
|
3
3
|
import * as react from 'react';
|
|
4
|
-
import { C as CategoryFormat } from './
|
|
4
|
+
import { C as CategoryFormat } from './types-BL149CsX.js';
|
|
5
5
|
import { LineChartProps } from './line.js';
|
|
6
|
-
import './cartesian-
|
|
7
|
-
import './frame-
|
|
6
|
+
import './cartesian-XyEi00ub.js';
|
|
7
|
+
import './frame-7tt0uRS5.js';
|
|
8
|
+
import './context-CSEXYepn.js';
|
|
8
9
|
|
|
9
10
|
/** A bid: when (an ISO date-time or a `Date`) and how much, in money minor units. */
|
|
10
11
|
interface Bid {
|
package/dist/treemap.d.ts
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import { V as ValueFormat } from './
|
|
2
|
+
import { V as ValueFormat } from './types-BL149CsX.js';
|
|
3
3
|
import { E as EngineProps } from './host-_F8RgiIz.js';
|
|
4
|
-
import { C as ChartFrameProps } from './frame-
|
|
4
|
+
import { C as ChartFrameProps } from './frame-7tt0uRS5.js';
|
|
5
|
+
import './context-CSEXYepn.js';
|
|
5
6
|
|
|
6
7
|
/** A part: a name and either a value or children (whose values add up). */
|
|
7
8
|
interface TreemapNode {
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
/** A row of data: any object; the chart reads the fields its `x`, `y` and `series` name. */
|
|
2
|
+
type Datum = object;
|
|
3
|
+
/** A field of a row (`"month"`) or a function that reads it. */
|
|
4
|
+
type Accessor<T, V> = (keyof T & string) | ((datum: T, index: number) => V);
|
|
5
|
+
/** A Krizaka brand: its palette leads with the brand's own hue (Krizaka blue, Orazaka orange, Orochia violet). */
|
|
6
|
+
type BrandId = "krizaka" | "orazaka" | "orochia";
|
|
7
|
+
/** A BCP 47 locale (`"en-US"`, `"fr-FR"`), always explicit: server and client write the same figures. */
|
|
8
|
+
type Locale = string | readonly string[];
|
|
9
|
+
/**
|
|
10
|
+
* How a value is written, through `@krizaka/intl`:
|
|
11
|
+
* - `"number"` (default) `12,345.6`, `"integer"` `12,346`, `"compact"` `12.3K`, `"percent"` (a ratio: `0.42` → `42%`);
|
|
12
|
+
* - `{ style: "money", currency }`: the values are **integer minor units** (cents), as the ledger stores them;
|
|
13
|
+
* - `{ style: "unit", unit }`: an `Intl` unit (`"second"`, `"megabyte"`);
|
|
14
|
+
* - a function, for anything else.
|
|
15
|
+
*/
|
|
16
|
+
type ValueFormat = "number" | "integer" | "compact" | "percent" | {
|
|
17
|
+
readonly style: "money";
|
|
18
|
+
readonly currency: string;
|
|
19
|
+
readonly compact?: boolean;
|
|
20
|
+
} | {
|
|
21
|
+
readonly style: "unit";
|
|
22
|
+
readonly unit: string;
|
|
23
|
+
readonly compact?: boolean;
|
|
24
|
+
} | {
|
|
25
|
+
readonly style: "number";
|
|
26
|
+
readonly options: Intl.NumberFormatOptions;
|
|
27
|
+
} | ((value: number, locale: Locale) => string);
|
|
28
|
+
/**
|
|
29
|
+
* How a category of the x axis is written. A category that is a `Date`, an epoch or an ISO date (`"2026-04"`,
|
|
30
|
+
* `"2026-04-12"`) is a date: `"month"` (`Apr 2026`), `"day"` (`Apr 12`), `"date"` (`Apr 12, 2026`), `"time"`
|
|
31
|
+
* (`14:30`), `"datetime"`, `"year"`. `"text"` writes it as is (the default for anything that is not a date).
|
|
32
|
+
*/
|
|
33
|
+
type CategoryFormat = "text" | "year" | "month" | "day" | "date" | "time" | "datetime" | ((category: unknown, locale: Locale) => string);
|
|
34
|
+
/** A series to draw: the field holding its values and the words that name it. */
|
|
35
|
+
interface SeriesSpec<T extends Datum = Datum> {
|
|
36
|
+
/** The field (or a function) holding the series' value in each row. */
|
|
37
|
+
readonly key: Accessor<T, number | null | undefined>;
|
|
38
|
+
/** Its name: in the legend, the tooltip, the data table and the summary. */
|
|
39
|
+
readonly label: string;
|
|
40
|
+
/** A colour role instead of the next palette slot: `"accent"`, a status (`"success"`…) or a `var(--…)`. */
|
|
41
|
+
readonly color?: SeriesColor;
|
|
42
|
+
/** Draw it dashed (a forecast, a previous period). Lines and areas only. */
|
|
43
|
+
readonly dashed?: boolean;
|
|
44
|
+
}
|
|
45
|
+
/** A status or brand role a series, a threshold or a marker may wear instead of a palette slot. */
|
|
46
|
+
type Tone = "neutral" | "accent" | "success" | "warning" | "danger" | "info";
|
|
47
|
+
/** A palette slot (1–8), a tone, or any CSS colour (`var(--kz-…)` preferred). */
|
|
48
|
+
type SeriesColor = Tone | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | (string & {});
|
|
49
|
+
/** A horizontal line at a value: a goal, a payout threshold, a quota. */
|
|
50
|
+
interface Threshold {
|
|
51
|
+
readonly value: number;
|
|
52
|
+
/** What it means, written beside the line and in the summary: “Payout threshold”. */
|
|
53
|
+
readonly label: string;
|
|
54
|
+
/** Default `"neutral"`; a goal reads well in `"success"`, a limit in `"danger"`. */
|
|
55
|
+
readonly tone?: Tone;
|
|
56
|
+
}
|
|
57
|
+
/** A vertical marker at a category: an event worth pointing at (“Campaign launch”). */
|
|
58
|
+
interface Marker {
|
|
59
|
+
/** The category it marks, as in the data (`"2026-04"`). */
|
|
60
|
+
readonly x: unknown;
|
|
61
|
+
readonly label: string;
|
|
62
|
+
readonly tone?: Tone;
|
|
63
|
+
}
|
|
64
|
+
/** What a series says about itself, for the written summary. */
|
|
65
|
+
interface SeriesSummary {
|
|
66
|
+
readonly label: string;
|
|
67
|
+
readonly count: number;
|
|
68
|
+
readonly min: {
|
|
69
|
+
readonly value: number;
|
|
70
|
+
readonly category: string;
|
|
71
|
+
} | null;
|
|
72
|
+
readonly max: {
|
|
73
|
+
readonly value: number;
|
|
74
|
+
readonly category: string;
|
|
75
|
+
} | null;
|
|
76
|
+
readonly first: number | null;
|
|
77
|
+
readonly last: number | null;
|
|
78
|
+
readonly total: number;
|
|
79
|
+
/** `last / first − 1`, or null when it cannot be said (no first value, a first value of 0). */
|
|
80
|
+
readonly change: number | null;
|
|
81
|
+
readonly trend: "up" | "down" | "flat" | "none";
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
export type { Accessor as A, BrandId as B, CategoryFormat as C, Datum as D, Locale as L, Marker as M, SeriesColor as S, Threshold as T, ValueFormat as V, SeriesSpec as a, SeriesSummary as b, Tone as c };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@krizaka/charts",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"description": "Krizaka's data visualisation: typed, declarative React charts (line, area, bar, pie, radar, heatmap, calendar, sankey, funnel, gauge, sparkline, candlestick, treemap, scatter, geo map, 3D globe) on the --kz-* tokens and the brand palettes — an accessible data table, a written summary and keyboard navigation in every chart, SSR without layout shift, and React Native for the simple types.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"krizaka",
|
|
@@ -128,6 +128,10 @@
|
|
|
128
128
|
"types": "./dist/chart.d.ts",
|
|
129
129
|
"import": "./dist/chart.js"
|
|
130
130
|
},
|
|
131
|
+
"./genui": {
|
|
132
|
+
"types": "./dist/genui.d.ts",
|
|
133
|
+
"import": "./dist/genui.js"
|
|
134
|
+
},
|
|
131
135
|
"./native": {
|
|
132
136
|
"types": "./dist/native.d.ts",
|
|
133
137
|
"import": "./dist/native.js"
|
|
@@ -161,7 +165,7 @@
|
|
|
161
165
|
"react-dom": ">=19",
|
|
162
166
|
"react-native": ">=0.76",
|
|
163
167
|
"react-native-svg": ">=15",
|
|
164
|
-
"@krizaka/ui": "^3.
|
|
168
|
+
"@krizaka/ui": "^3.22.0"
|
|
165
169
|
},
|
|
166
170
|
"peerDependenciesMeta": {
|
|
167
171
|
"react-dom": {
|
|
@@ -213,9 +217,9 @@
|
|
|
213
217
|
"typescript": "^5.9.0",
|
|
214
218
|
"vitest": "^4.1.11",
|
|
215
219
|
"world-atlas": "^2.0.2",
|
|
216
|
-
"@krizaka/tokens": "3.20.0",
|
|
217
220
|
"@krizaka/config": "0.4.1",
|
|
218
|
-
"@krizaka/
|
|
221
|
+
"@krizaka/tokens": "3.22.0",
|
|
222
|
+
"@krizaka/ui": "3.22.0"
|
|
219
223
|
},
|
|
220
224
|
"engines": {
|
|
221
225
|
"node": ">=22"
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// registry/examples/genui-catalog/dashboard.tsx
|
|
4
|
+
import { chartsGenUiCatalog } from "@krizaka/charts/genui";
|
|
5
|
+
import { baseGenUiCatalog, GenUiStream } from "@krizaka/ui/genui";
|
|
6
|
+
import { jsx } from "react/jsx-runtime";
|
|
7
|
+
var catalog = { ...baseGenUiCatalog, ...chartsGenUiCatalog };
|
|
8
|
+
var days = ["2026-10-11", "2026-10-12", "2026-10-13", "2026-10-14", "2026-10-15"].map((day, i) => ({ day, views: [40, 52, 47, 61, 75][i] }));
|
|
9
|
+
var ANSWER = [
|
|
10
|
+
"Views grew all week; likes followed.",
|
|
11
|
+
"```a2ui",
|
|
12
|
+
'{"version":"v0.9","createSurface":{"surfaceId":"week","catalogId":"krizaka:genui/v1"}}',
|
|
13
|
+
'{"version":"v0.9","updateComponents":{"surfaceId":"week","components":[{"id":"root","component":"Column","children":["figures","trend"]},{"id":"figures","component":"Row","children":["views","likes"]},{"id":"views","component":"KpiStat","label":"Views","value":275,"previous":211,"format":"integer"},{"id":"likes","component":"KpiStat","label":"Likes","value":38,"previous":30,"format":"integer"},{"id":"trend","component":"ChartCard","title":"Views per day","kind":"area","x":"day","series":[{"key":"views","label":"Views"}],"data":{"path":"/days"}}]}}',
|
|
14
|
+
JSON.stringify({ version: "v0.9", updateDataModel: { surfaceId: "week", path: "/days", value: days } }),
|
|
15
|
+
"```"
|
|
16
|
+
].join("\n");
|
|
17
|
+
function GenUiDashboard() {
|
|
18
|
+
return /* @__PURE__ */ jsx(GenUiStream, { text: ANSWER, catalog });
|
|
19
|
+
}
|
|
20
|
+
export {
|
|
21
|
+
GenUiDashboard as default
|
|
22
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { chartsGenUiCatalog } from "@krizaka/charts/genui";
|
|
2
|
+
import { baseGenUiCatalog, GenUiStream } from "@krizaka/ui/genui";
|
|
3
|
+
|
|
4
|
+
const catalog = { ...baseGenUiCatalog, ...chartsGenUiCatalog };
|
|
5
|
+
const days = ["2026-10-11", "2026-10-12", "2026-10-13", "2026-10-14", "2026-10-15"].map((day, i) => ({ day, views: [40, 52, 47, 61, 75][i] }));
|
|
6
|
+
|
|
7
|
+
const ANSWER = [
|
|
8
|
+
"Views grew all week; likes followed.",
|
|
9
|
+
"```a2ui",
|
|
10
|
+
'{"version":"v0.9","createSurface":{"surfaceId":"week","catalogId":"krizaka:genui/v1"}}',
|
|
11
|
+
'{"version":"v0.9","updateComponents":{"surfaceId":"week","components":[{"id":"root","component":"Column","children":["figures","trend"]},{"id":"figures","component":"Row","children":["views","likes"]},{"id":"views","component":"KpiStat","label":"Views","value":275,"previous":211,"format":"integer"},{"id":"likes","component":"KpiStat","label":"Likes","value":38,"previous":30,"format":"integer"},{"id":"trend","component":"ChartCard","title":"Views per day","kind":"area","x":"day","series":[{"key":"views","label":"Views"}],"data":{"path":"/days"}}]}}',
|
|
12
|
+
JSON.stringify({ version: "v0.9", updateDataModel: { surfaceId: "week", path: "/days", value: days } }),
|
|
13
|
+
"```",
|
|
14
|
+
].join("\n");
|
|
15
|
+
|
|
16
|
+
export default function GenUiDashboard() {
|
|
17
|
+
return <GenUiStream text={ANSWER} catalog={catalog} />;
|
|
18
|
+
}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "genui-catalog",
|
|
3
|
+
"package": "@krizaka/charts",
|
|
4
|
+
"type": "chart",
|
|
5
|
+
"title": "Generated view catalog",
|
|
6
|
+
"summary": "KpiStat and ChartCard as entries of the data-driven UI catalog (A2UI v0.9): a model's answer draws figures and charts from data, never code.",
|
|
7
|
+
"description": "KpiStat and ChartCard as entries of the data-driven UI catalog (A2UI v0.9): a model's answer draws figures and charts from data, never code.",
|
|
8
|
+
"status": "beta",
|
|
9
|
+
"category": "charts",
|
|
10
|
+
"platforms": "web",
|
|
11
|
+
"parity": {
|
|
12
|
+
"web": {
|
|
13
|
+
"state": "yes"
|
|
14
|
+
},
|
|
15
|
+
"native": {
|
|
16
|
+
"state": "gap",
|
|
17
|
+
"reason": "Slice 3 of the data-driven UI epic: the same messages drawn by the native charts.",
|
|
18
|
+
"issue": "krizaka/orazaka#207"
|
|
19
|
+
},
|
|
20
|
+
"desktop": {
|
|
21
|
+
"state": "yes"
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
"engine": null,
|
|
25
|
+
"tier": "advanced",
|
|
26
|
+
"whenToUse": [
|
|
27
|
+
"With `GenUiStream` of @krizaka/ui: merge `chartsGenUiCatalog` with `baseGenUiCatalog` so a model's answer can hold figures and charts.",
|
|
28
|
+
"When an assistant answers a question about data with a dashboard the reader can then refine."
|
|
29
|
+
],
|
|
30
|
+
"whenNotToUse": [
|
|
31
|
+
{
|
|
32
|
+
"when": "A dashboard the app knows in advance: use the charts directly.",
|
|
33
|
+
"use": "chart-card"
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
"when": "One figure in a page.",
|
|
37
|
+
"use": "kpi-stat"
|
|
38
|
+
}
|
|
39
|
+
],
|
|
40
|
+
"bestPractices": [
|
|
41
|
+
"Tell the model the catalog and that every number must come from the data it was given: the entries check shapes, not truth.",
|
|
42
|
+
"Formats are a closed list (number, integer, compact, percent, money with a currency): no free-form format string reaches the chart."
|
|
43
|
+
],
|
|
44
|
+
"accessibility": {
|
|
45
|
+
"keyboard": [],
|
|
46
|
+
"notes": [
|
|
47
|
+
"Each generated chart keeps its title as accessible name, its written summary and its data table, as any chart of the package."
|
|
48
|
+
]
|
|
49
|
+
},
|
|
50
|
+
"related": [
|
|
51
|
+
"kpi-stat",
|
|
52
|
+
"chart-card",
|
|
53
|
+
"line-chart",
|
|
54
|
+
"bar-chart",
|
|
55
|
+
"pie-chart"
|
|
56
|
+
],
|
|
57
|
+
"source": "packages/charts/src/meta/genui-catalog.ts",
|
|
58
|
+
"install": {
|
|
59
|
+
"web": "npm install @krizaka/charts",
|
|
60
|
+
"native": "npx expo install react-native-svg\nnpm install @krizaka/charts"
|
|
61
|
+
},
|
|
62
|
+
"web": {
|
|
63
|
+
"entry": "@krizaka/charts/genui",
|
|
64
|
+
"import": "import { chartsGenUiCatalog } from \"@krizaka/charts/genui\";",
|
|
65
|
+
"props": [],
|
|
66
|
+
"examples": [
|
|
67
|
+
{
|
|
68
|
+
"name": "dashboard",
|
|
69
|
+
"title": "A generated dashboard",
|
|
70
|
+
"description": "Two figures and a chart from a model's answer, drawn with both catalogs.",
|
|
71
|
+
"path": "examples/genui-catalog/dashboard.tsx",
|
|
72
|
+
"module": "@krizaka/charts/registry/examples/genui-catalog/dashboard",
|
|
73
|
+
"code": "import { chartsGenUiCatalog } from \"@krizaka/charts/genui\";\nimport { baseGenUiCatalog, GenUiStream } from \"@krizaka/ui/genui\";\n\nconst catalog = { ...baseGenUiCatalog, ...chartsGenUiCatalog };\nconst days = [\"2026-10-11\", \"2026-10-12\", \"2026-10-13\", \"2026-10-14\", \"2026-10-15\"].map((day, i) => ({ day, views: [40, 52, 47, 61, 75][i] }));\n\nconst ANSWER = [\n \"Views grew all week; likes followed.\",\n \"```a2ui\",\n '{\"version\":\"v0.9\",\"createSurface\":{\"surfaceId\":\"week\",\"catalogId\":\"krizaka:genui/v1\"}}',\n '{\"version\":\"v0.9\",\"updateComponents\":{\"surfaceId\":\"week\",\"components\":[{\"id\":\"root\",\"component\":\"Column\",\"children\":[\"figures\",\"trend\"]},{\"id\":\"figures\",\"component\":\"Row\",\"children\":[\"views\",\"likes\"]},{\"id\":\"views\",\"component\":\"KpiStat\",\"label\":\"Views\",\"value\":275,\"previous\":211,\"format\":\"integer\"},{\"id\":\"likes\",\"component\":\"KpiStat\",\"label\":\"Likes\",\"value\":38,\"previous\":30,\"format\":\"integer\"},{\"id\":\"trend\",\"component\":\"ChartCard\",\"title\":\"Views per day\",\"kind\":\"area\",\"x\":\"day\",\"series\":[{\"key\":\"views\",\"label\":\"Views\"}],\"data\":{\"path\":\"/days\"}}]}}',\n JSON.stringify({ version: \"v0.9\", updateDataModel: { surfaceId: \"week\", path: \"/days\", value: days } }),\n \"```\",\n].join(\"\\n\");\n\nexport default function GenUiDashboard() {\n return <GenUiStream text={ANSWER} catalog={catalog} />;\n}\n"
|
|
74
|
+
}
|
|
75
|
+
]
|
|
76
|
+
},
|
|
77
|
+
"native": null,
|
|
78
|
+
"files": [],
|
|
79
|
+
"dependencies": [
|
|
80
|
+
"@krizaka/intl@workspace:^",
|
|
81
|
+
"d3-geo@^3.1.1",
|
|
82
|
+
"echarts@^6.1.0",
|
|
83
|
+
"topojson-client@^3.1.0"
|
|
84
|
+
],
|
|
85
|
+
"registryDependencies": [],
|
|
86
|
+
"demo": {
|
|
87
|
+
"path": "examples/genui-catalog/dashboard.tsx",
|
|
88
|
+
"content": "import { chartsGenUiCatalog } from \"@krizaka/charts/genui\";\nimport { baseGenUiCatalog, GenUiStream } from \"@krizaka/ui/genui\";\n\nconst catalog = { ...baseGenUiCatalog, ...chartsGenUiCatalog };\nconst days = [\"2026-10-11\", \"2026-10-12\", \"2026-10-13\", \"2026-10-14\", \"2026-10-15\"].map((day, i) => ({ day, views: [40, 52, 47, 61, 75][i] }));\n\nconst ANSWER = [\n \"Views grew all week; likes followed.\",\n \"```a2ui\",\n '{\"version\":\"v0.9\",\"createSurface\":{\"surfaceId\":\"week\",\"catalogId\":\"krizaka:genui/v1\"}}',\n '{\"version\":\"v0.9\",\"updateComponents\":{\"surfaceId\":\"week\",\"components\":[{\"id\":\"root\",\"component\":\"Column\",\"children\":[\"figures\",\"trend\"]},{\"id\":\"figures\",\"component\":\"Row\",\"children\":[\"views\",\"likes\"]},{\"id\":\"views\",\"component\":\"KpiStat\",\"label\":\"Views\",\"value\":275,\"previous\":211,\"format\":\"integer\"},{\"id\":\"likes\",\"component\":\"KpiStat\",\"label\":\"Likes\",\"value\":38,\"previous\":30,\"format\":\"integer\"},{\"id\":\"trend\",\"component\":\"ChartCard\",\"title\":\"Views per day\",\"kind\":\"area\",\"x\":\"day\",\"series\":[{\"key\":\"views\",\"label\":\"Views\"}],\"data\":{\"path\":\"/days\"}}]}}',\n JSON.stringify({ version: \"v0.9\", updateDataModel: { surfaceId: \"week\", path: \"/days\", value: days } }),\n \"```\",\n].join(\"\\n\");\n\nexport default function GenUiDashboard() {\n return <GenUiStream text={ANSWER} catalog={catalog} />;\n}\n"
|
|
89
|
+
},
|
|
90
|
+
"props": []
|
|
91
|
+
}
|
package/registry/index.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@krizaka/charts",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.6.0",
|
|
4
4
|
"items": [
|
|
5
5
|
{
|
|
6
6
|
"name": "area-chart",
|
|
@@ -397,6 +397,43 @@
|
|
|
397
397
|
],
|
|
398
398
|
"registryDependencies": []
|
|
399
399
|
},
|
|
400
|
+
{
|
|
401
|
+
"name": "genui-catalog",
|
|
402
|
+
"type": "chart",
|
|
403
|
+
"package": "@krizaka/charts",
|
|
404
|
+
"engine": null,
|
|
405
|
+
"tier": "advanced",
|
|
406
|
+
"title": "Generated view catalog",
|
|
407
|
+
"summary": "KpiStat and ChartCard as entries of the data-driven UI catalog (A2UI v0.9): a model's answer draws figures and charts from data, never code.",
|
|
408
|
+
"description": "KpiStat and ChartCard as entries of the data-driven UI catalog (A2UI v0.9): a model's answer draws figures and charts from data, never code.",
|
|
409
|
+
"status": "beta",
|
|
410
|
+
"category": "charts",
|
|
411
|
+
"platforms": "web",
|
|
412
|
+
"parity": {
|
|
413
|
+
"web": {
|
|
414
|
+
"state": "yes"
|
|
415
|
+
},
|
|
416
|
+
"native": {
|
|
417
|
+
"state": "gap",
|
|
418
|
+
"reason": "Slice 3 of the data-driven UI epic: the same messages drawn by the native charts.",
|
|
419
|
+
"issue": "krizaka/orazaka#207"
|
|
420
|
+
},
|
|
421
|
+
"desktop": {
|
|
422
|
+
"state": "yes"
|
|
423
|
+
}
|
|
424
|
+
},
|
|
425
|
+
"examples": {
|
|
426
|
+
"web": 1,
|
|
427
|
+
"native": 0
|
|
428
|
+
},
|
|
429
|
+
"dependencies": [
|
|
430
|
+
"@krizaka/intl@workspace:^",
|
|
431
|
+
"d3-geo@^3.1.1",
|
|
432
|
+
"echarts@^6.1.0",
|
|
433
|
+
"topojson-client@^3.1.0"
|
|
434
|
+
],
|
|
435
|
+
"registryDependencies": []
|
|
436
|
+
},
|
|
400
437
|
{
|
|
401
438
|
"name": "geo-map",
|
|
402
439
|
"type": "chart",
|
|
@@ -1,182 +0,0 @@
|
|
|
1
|
-
import * as react from 'react';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
3
|
-
|
|
4
|
-
interface ChartLabels {
|
|
5
|
-
/** The button that shows the data table. */
|
|
6
|
-
showData: string;
|
|
7
|
-
/** The button that hides it. */
|
|
8
|
-
hideData: string;
|
|
9
|
-
/** The caption of the data table: `{title}`. */
|
|
10
|
-
tableCaption: string;
|
|
11
|
-
/** The export buttons. */
|
|
12
|
-
exportPng: string;
|
|
13
|
-
exportSvg: string;
|
|
14
|
-
exportCsv: string;
|
|
15
|
-
/** The actions menu (⋯) of a chart: its accessible name, and its entries. */
|
|
16
|
-
actions: string;
|
|
17
|
-
viewTable: string;
|
|
18
|
-
downloadCsv: string;
|
|
19
|
-
downloadPng: string;
|
|
20
|
-
downloadSvg: string;
|
|
21
|
-
copyData: string;
|
|
22
|
-
/** Announced once the data is on the clipboard. */
|
|
23
|
-
copied: string;
|
|
24
|
-
/** The close button of the table sheet. */
|
|
25
|
-
close: string;
|
|
26
|
-
/** The sheet's description: `{count}` rows. */
|
|
27
|
-
tableRows: string;
|
|
28
|
-
/** Legend chips filter: the chip's accessible name, `{label}`. */
|
|
29
|
-
toggleSeries: string;
|
|
30
|
-
/** Sparse data: under the chart, `{count}` periods with data out of `{total}`. */
|
|
31
|
-
sparse: string;
|
|
32
|
-
/** A KPI's change: `{change}` (`+12 %`) against the previous period. */
|
|
33
|
-
trendVsPrevious: string;
|
|
34
|
-
/** Announced while the data loads. */
|
|
35
|
-
loading: string;
|
|
36
|
-
/** Shown when there is nothing to draw. */
|
|
37
|
-
empty: string;
|
|
38
|
-
/** Shown when the data could not be loaded. */
|
|
39
|
-
error: string;
|
|
40
|
-
/** The keyboard hint, read once when the plot takes the focus. */
|
|
41
|
-
keyboardHint: string;
|
|
42
|
-
/** The role description of the plot (`chart`). */
|
|
43
|
-
roleDescription: string;
|
|
44
|
-
/** Summary pieces. `{kind}` is the chart's name (`Line chart`), `{count}` a number of points or series. */
|
|
45
|
-
summaryIntro: string;
|
|
46
|
-
summarySeries: string;
|
|
47
|
-
summaryRange: string;
|
|
48
|
-
summaryTrendUp: string;
|
|
49
|
-
summaryTrendDown: string;
|
|
50
|
-
summaryTrendFlat: string;
|
|
51
|
-
summaryTotal: string;
|
|
52
|
-
summaryThreshold: string;
|
|
53
|
-
summaryShare: string;
|
|
54
|
-
/** Scatter: the correlation of x and y (Pearson's r). */
|
|
55
|
-
summaryCorrelation: string;
|
|
56
|
-
/** Funnel: from one stage to the next, and from the first to the last. */
|
|
57
|
-
summaryConversion: string;
|
|
58
|
-
summaryOverall: string;
|
|
59
|
-
/** Heatmap, calendar: the largest cell and the number of cells with a value. */
|
|
60
|
-
summaryPeak: string;
|
|
61
|
-
summaryActive: string;
|
|
62
|
-
/** Candlestick: the period's range. */
|
|
63
|
-
summaryOhlc: string;
|
|
64
|
-
/** The names of the charts, read first in the summary. */
|
|
65
|
-
kinds: Record<ChartKind, string>;
|
|
66
|
-
/** The column of the values, when the chart has no value label. */
|
|
67
|
-
value: string;
|
|
68
|
-
/** The column of the categories in the data table, when the chart has no x label. */
|
|
69
|
-
category: string;
|
|
70
|
-
/** The total row of a stacked chart, a pie, a funnel. */
|
|
71
|
-
total: string;
|
|
72
|
-
/** What a missing value reads as. */
|
|
73
|
-
noValue: string;
|
|
74
|
-
}
|
|
75
|
-
type ChartKind = "line" | "area" | "bar" | "pie" | "donut" | "gauge" | "sparkline" | "radar" | "heatmap" | "calendar" | "sankey" | "funnel" | "candlestick" | "treemap" | "scatter" | "map" | "globe" | "chart";
|
|
76
|
-
declare const DEFAULT_LABELS: ChartLabels;
|
|
77
|
-
/** The words an app or a chart passes: any of them, and any of the chart names. */
|
|
78
|
-
type ChartLabelsInput = Partial<Omit<ChartLabels, "kinds">> & {
|
|
79
|
-
kinds?: Partial<Record<ChartKind, string>>;
|
|
80
|
-
};
|
|
81
|
-
|
|
82
|
-
/** A row of data: any object; the chart reads the fields its `x`, `y` and `series` name. */
|
|
83
|
-
type Datum = object;
|
|
84
|
-
/** A field of a row (`"month"`) or a function that reads it. */
|
|
85
|
-
type Accessor<T, V> = (keyof T & string) | ((datum: T, index: number) => V);
|
|
86
|
-
/** A Krizaka brand: its palette leads with the brand's own hue (Krizaka blue, Orazaka orange, Orochia violet). */
|
|
87
|
-
type BrandId = "krizaka" | "orazaka" | "orochia";
|
|
88
|
-
/** A BCP 47 locale (`"en-US"`, `"fr-FR"`), always explicit: server and client write the same figures. */
|
|
89
|
-
type Locale = string | readonly string[];
|
|
90
|
-
/**
|
|
91
|
-
* How a value is written, through `@krizaka/intl`:
|
|
92
|
-
* - `"number"` (default) `12,345.6`, `"integer"` `12,346`, `"compact"` `12.3K`, `"percent"` (a ratio: `0.42` → `42%`);
|
|
93
|
-
* - `{ style: "money", currency }`: the values are **integer minor units** (cents), as the ledger stores them;
|
|
94
|
-
* - `{ style: "unit", unit }`: an `Intl` unit (`"second"`, `"megabyte"`);
|
|
95
|
-
* - a function, for anything else.
|
|
96
|
-
*/
|
|
97
|
-
type ValueFormat = "number" | "integer" | "compact" | "percent" | {
|
|
98
|
-
readonly style: "money";
|
|
99
|
-
readonly currency: string;
|
|
100
|
-
readonly compact?: boolean;
|
|
101
|
-
} | {
|
|
102
|
-
readonly style: "unit";
|
|
103
|
-
readonly unit: string;
|
|
104
|
-
readonly compact?: boolean;
|
|
105
|
-
} | {
|
|
106
|
-
readonly style: "number";
|
|
107
|
-
readonly options: Intl.NumberFormatOptions;
|
|
108
|
-
} | ((value: number, locale: Locale) => string);
|
|
109
|
-
/**
|
|
110
|
-
* How a category of the x axis is written. A category that is a `Date`, an epoch or an ISO date (`"2026-04"`,
|
|
111
|
-
* `"2026-04-12"`) is a date: `"month"` (`Apr 2026`), `"day"` (`Apr 12`), `"date"` (`Apr 12, 2026`), `"time"`
|
|
112
|
-
* (`14:30`), `"datetime"`, `"year"`. `"text"` writes it as is (the default for anything that is not a date).
|
|
113
|
-
*/
|
|
114
|
-
type CategoryFormat = "text" | "year" | "month" | "day" | "date" | "time" | "datetime" | ((category: unknown, locale: Locale) => string);
|
|
115
|
-
/** A series to draw: the field holding its values and the words that name it. */
|
|
116
|
-
interface SeriesSpec<T extends Datum = Datum> {
|
|
117
|
-
/** The field (or a function) holding the series' value in each row. */
|
|
118
|
-
readonly key: Accessor<T, number | null | undefined>;
|
|
119
|
-
/** Its name: in the legend, the tooltip, the data table and the summary. */
|
|
120
|
-
readonly label: string;
|
|
121
|
-
/** A colour role instead of the next palette slot: `"accent"`, a status (`"success"`…) or a `var(--…)`. */
|
|
122
|
-
readonly color?: SeriesColor;
|
|
123
|
-
/** Draw it dashed (a forecast, a previous period). Lines and areas only. */
|
|
124
|
-
readonly dashed?: boolean;
|
|
125
|
-
}
|
|
126
|
-
/** A status or brand role a series, a threshold or a marker may wear instead of a palette slot. */
|
|
127
|
-
type Tone = "neutral" | "accent" | "success" | "warning" | "danger" | "info";
|
|
128
|
-
/** A palette slot (1–8), a tone, or any CSS colour (`var(--kz-…)` preferred). */
|
|
129
|
-
type SeriesColor = Tone | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | (string & {});
|
|
130
|
-
/** A horizontal line at a value: a goal, a payout threshold, a quota. */
|
|
131
|
-
interface Threshold {
|
|
132
|
-
readonly value: number;
|
|
133
|
-
/** What it means, written beside the line and in the summary: “Payout threshold”. */
|
|
134
|
-
readonly label: string;
|
|
135
|
-
/** Default `"neutral"`; a goal reads well in `"success"`, a limit in `"danger"`. */
|
|
136
|
-
readonly tone?: Tone;
|
|
137
|
-
}
|
|
138
|
-
/** A vertical marker at a category: an event worth pointing at (“Campaign launch”). */
|
|
139
|
-
interface Marker {
|
|
140
|
-
/** The category it marks, as in the data (`"2026-04"`). */
|
|
141
|
-
readonly x: unknown;
|
|
142
|
-
readonly label: string;
|
|
143
|
-
readonly tone?: Tone;
|
|
144
|
-
}
|
|
145
|
-
/** What a series says about itself, for the written summary. */
|
|
146
|
-
interface SeriesSummary {
|
|
147
|
-
readonly label: string;
|
|
148
|
-
readonly count: number;
|
|
149
|
-
readonly min: {
|
|
150
|
-
readonly value: number;
|
|
151
|
-
readonly category: string;
|
|
152
|
-
} | null;
|
|
153
|
-
readonly max: {
|
|
154
|
-
readonly value: number;
|
|
155
|
-
readonly category: string;
|
|
156
|
-
} | null;
|
|
157
|
-
readonly first: number | null;
|
|
158
|
-
readonly last: number | null;
|
|
159
|
-
readonly total: number;
|
|
160
|
-
/** `last / first − 1`, or null when it cannot be said (no first value, a first value of 0). */
|
|
161
|
-
readonly change: number | null;
|
|
162
|
-
readonly trend: "up" | "down" | "flat" | "none";
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
interface ChartsSettings {
|
|
166
|
-
/** The locale of every figure and date (`"fr-FR"`). Default `"en-US"`. */
|
|
167
|
-
locale?: Locale;
|
|
168
|
-
/**
|
|
169
|
-
* The brand whose palette the charts use. Without it, a chart follows a `.brand-<id>` ancestor, else Krizaka. Set it
|
|
170
|
-
* when the app loads a brand stylesheet on `:root` (`@krizaka/tokens/brands/orazaka.css`).
|
|
171
|
-
*/
|
|
172
|
-
brand?: BrandId;
|
|
173
|
-
/** The words, translated: the buttons, the states, the written summary. */
|
|
174
|
-
labels?: ChartLabelsInput;
|
|
175
|
-
}
|
|
176
|
-
interface ChartsProviderProps extends ChartsSettings {
|
|
177
|
-
children: ReactNode;
|
|
178
|
-
}
|
|
179
|
-
/** Sets the locale, the brand and the words of every chart below it. */
|
|
180
|
-
declare function ChartsProvider({ locale, brand, labels, children }: ChartsProviderProps): react.JSX.Element;
|
|
181
|
-
|
|
182
|
-
export { type Accessor as A, type BrandId as B, type CategoryFormat as C, DEFAULT_LABELS as D, type Locale as L, type Marker as M, type SeriesColor as S, type Threshold as T, type ValueFormat as V, type ChartKind as a, type ChartLabels as b, type ChartLabelsInput as c, ChartsProvider as d, type ChartsProviderProps as e, type ChartsSettings as f, type Datum as g, type SeriesSpec as h, type SeriesSummary as i, type Tone as j };
|
|
File without changes
|
|
File without changes
|