@nadicodeai/ui 7.1.4 → 8.0.1
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/AGENTS.md +0 -7
- package/dist/components/agent-card.js +1 -1
- package/dist/components/agent-visual.js +1 -1
- package/dist/components/alert-dialog.js +1 -1
- package/dist/components/automation-section.js +1 -1
- package/dist/components/card-marketing.d.ts +1 -1
- package/dist/components/card-marketing.js +4 -4
- package/dist/components/card.js +3 -3
- package/dist/components/chart-area-stacked.d.ts +4 -0
- package/dist/components/chart-area-stacked.d.ts.map +1 -0
- package/dist/components/chart-area-stacked.js +24 -0
- package/dist/components/chart-axis.d.ts +38 -0
- package/dist/components/chart-axis.d.ts.map +1 -0
- package/dist/components/chart-axis.js +83 -0
- package/dist/components/chart-bar-multiple.d.ts +9 -0
- package/dist/components/chart-bar-multiple.d.ts.map +1 -0
- package/dist/components/chart-bar-multiple.js +26 -0
- package/dist/components/chart-bar-stacked.d.ts +10 -0
- package/dist/components/chart-bar-stacked.d.ts.map +1 -0
- package/dist/components/chart-bar-stacked.js +41 -0
- package/dist/components/chart-card.d.ts +75 -0
- package/dist/components/chart-card.d.ts.map +1 -0
- package/dist/components/chart-card.js +71 -0
- package/dist/components/chart-date-range-control.d.ts +4 -6
- package/dist/components/chart-date-range-control.d.ts.map +1 -1
- package/dist/components/chart-date-range-control.js +43 -33
- package/dist/components/chart-sparkline.d.ts +6 -42
- package/dist/components/chart-sparkline.d.ts.map +1 -1
- package/dist/components/chart-sparkline.js +22 -35
- package/dist/components/chart.d.ts +3 -4
- package/dist/components/chart.d.ts.map +1 -1
- package/dist/components/chart.js +7 -16
- package/dist/components/combobox.js +1 -1
- package/dist/components/command.js +2 -2
- package/dist/components/context-menu.js +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/drawer.js +1 -1
- package/dist/components/dropdown-menu.js +1 -1
- package/dist/components/glass-control.js +1 -1
- package/dist/components/hover-card.js +1 -1
- package/dist/components/kpi-card.d.ts +37 -0
- package/dist/components/kpi-card.d.ts.map +1 -0
- package/dist/components/kpi-card.js +20 -0
- package/dist/components/live-demo.js +1 -1
- package/dist/components/menubar.js +1 -1
- package/dist/components/model-mark.js +1 -1
- package/dist/components/navigation-menu.js +2 -2
- package/dist/components/popover.d.ts +1 -1
- package/dist/components/popover.d.ts.map +1 -1
- package/dist/components/popover.js +2 -2
- package/dist/components/progress.d.ts +18 -2
- package/dist/components/progress.d.ts.map +1 -1
- package/dist/components/progress.js +40 -10
- package/dist/components/select.js +2 -2
- package/dist/components/sheet.js +1 -1
- package/dist/components/sidebar.js +1 -1
- package/dist/components/toggle.js +1 -1
- package/dist/components/trend-badge.d.ts +22 -0
- package/dist/components/trend-badge.d.ts.map +1 -0
- package/dist/components/trend-badge.js +31 -0
- package/dist/index.d.ts +13 -14
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +13 -14
- package/docs/component-classification.md +1 -1
- package/docs/contract.md +19 -21
- package/package.json +2 -2
- package/dist/components/chart-breakdown-table.d.ts +0 -69
- package/dist/components/chart-breakdown-table.d.ts.map +0 -1
- package/dist/components/chart-breakdown-table.js +0 -35
- package/dist/components/chart-bullet-bar.d.ts +0 -53
- package/dist/components/chart-bullet-bar.d.ts.map +0 -1
- package/dist/components/chart-bullet-bar.js +0 -63
- package/dist/components/chart-delta.d.ts +0 -30
- package/dist/components/chart-delta.d.ts.map +0 -1
- package/dist/components/chart-delta.js +0 -32
- package/dist/components/chart-kpi-stat.d.ts +0 -44
- package/dist/components/chart-kpi-stat.d.ts.map +0 -1
- package/dist/components/chart-kpi-stat.js +0 -51
- package/dist/components/chart-time-series-layout.d.ts +0 -6
- package/dist/components/chart-time-series-layout.d.ts.map +0 -1
- package/dist/components/chart-time-series-layout.js +0 -6
- package/dist/components/chart-time-series.d.ts +0 -103
- package/dist/components/chart-time-series.d.ts.map +0 -1
- package/dist/components/chart-time-series.js +0 -310
- package/dist/components/stat-block.d.ts +0 -24
- package/dist/components/stat-block.d.ts.map +0 -1
- package/dist/components/stat-block.js +0 -26
- package/dist/components/stats-band.d.ts +0 -22
- package/dist/components/stats-band.d.ts.map +0 -1
- package/dist/components/stats-band.js +0 -32
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { type EntityColorMap } from "./chart-entity-colors.js";
|
|
3
|
-
/**
|
|
4
|
-
* chart-breakdown-table — entity breakdown with proportion bars for the
|
|
5
|
-
* console chart kit (issue #166; DESIGN.md "Entity-color assignment",
|
|
6
|
-
* proportion-bar carve-out).
|
|
7
|
-
*
|
|
8
|
-
* Real `<table>` semantics: each entity row reads name + value + proportion
|
|
9
|
-
* bar + share of total, with the entity-color dot resolved from the shared
|
|
10
|
-
* page-context assignment map. An entity may also carry a `mark`, printed
|
|
11
|
-
* between its dot and its name — a model's maker's mark, so color never
|
|
12
|
-
* identifies it alone (rule `model-shown-with-logo`). `topN` folds the tail
|
|
13
|
-
* into a single "everything else" rollup row on the neutral register — never an
|
|
14
|
-
* extra hue. When the caller has already bounded the read store-side,
|
|
15
|
-
* `otherValue` passes the precomputed tail sum instead: the given entities
|
|
16
|
-
* render as-is (no local fold) and the rollup row and shares account for that
|
|
17
|
-
* tail.
|
|
18
|
-
*
|
|
19
|
-
* `value` is a float and is for geometry only: sorting, the fold and the share
|
|
20
|
-
* bars. A printed figure that must not cross a float (money) comes in as
|
|
21
|
-
* `display`, `otherDisplay` and `totalDisplay`, text the caller formatted from
|
|
22
|
-
* the exact amount and the table prints as given.
|
|
23
|
-
*/
|
|
24
|
-
type BreakdownEntity = {
|
|
25
|
-
/** Stable entity id — the key the entity-color map assigns by. */
|
|
26
|
-
id: string;
|
|
27
|
-
label: React.ReactNode;
|
|
28
|
-
value: number;
|
|
29
|
-
/** The value's printed text; without it the table formats `value`. */
|
|
30
|
-
display?: string;
|
|
31
|
-
/**
|
|
32
|
-
* The entity's mark, printed beside its label. A model row carries its
|
|
33
|
-
* maker's mark here; the mark is decorative by contract, because the label
|
|
34
|
-
* is the entity's accessible name.
|
|
35
|
-
*/
|
|
36
|
-
mark?: React.ReactNode;
|
|
37
|
-
};
|
|
38
|
-
declare function BreakdownTable({ entities, entityColorMap, label, topN, otherValue, otherDisplay, totalDisplay, valueFormatter, columnLabels, otherLabel, totalLabel, }: {
|
|
39
|
-
entities: readonly BreakdownEntity[];
|
|
40
|
-
/** The shared page-context entity-color assignment map. */
|
|
41
|
-
entityColorMap: EntityColorMap;
|
|
42
|
-
/** REQUIRED accessible name, rendered as a visually hidden caption. */
|
|
43
|
-
label: string;
|
|
44
|
-
/** Keep the top N entities by value; the rest fold into one rollup row. */
|
|
45
|
-
topN?: number;
|
|
46
|
-
/**
|
|
47
|
-
* Precomputed tail sum for a read the caller already bounded store-side. When
|
|
48
|
-
* set, `entities` render as given (no local `topN` fold) and this value backs
|
|
49
|
-
* the neutral rollup row and the share denominator.
|
|
50
|
-
*/
|
|
51
|
-
otherValue?: number;
|
|
52
|
-
/** The printed text of `otherValue`, as an entity's `display` is for its value. */
|
|
53
|
-
otherDisplay?: string;
|
|
54
|
-
/** The printed text of the footer total, which the table otherwise sums as floats. */
|
|
55
|
-
totalDisplay?: string;
|
|
56
|
-
valueFormatter?: (value: number) => string;
|
|
57
|
-
columnLabels?: {
|
|
58
|
-
entity?: string;
|
|
59
|
-
value?: string;
|
|
60
|
-
share?: string;
|
|
61
|
-
};
|
|
62
|
-
/** Label for the neutral rollup row. */
|
|
63
|
-
otherLabel?: React.ReactNode;
|
|
64
|
-
/** When provided, adds the sum of all entities and the remainder below the rows. */
|
|
65
|
-
totalLabel?: React.ReactNode;
|
|
66
|
-
}): React.JSX.Element;
|
|
67
|
-
export { BreakdownTable };
|
|
68
|
-
export type { BreakdownEntity };
|
|
69
|
-
//# sourceMappingURL=chart-breakdown-table.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"chart-breakdown-table.d.ts","sourceRoot":"","sources":["../../src/components/chart-breakdown-table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,EAGL,KAAK,cAAc,EACpB,MAAM,kCAAkC,CAAC;AAE1C;;;;;;;;;;;;;;;;;;;;GAoBG;AAEH,KAAK,eAAe,GAAG;IACrB,kEAAkE;IAClE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,sEAAsE;IACtE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB,CAAC;AAsFF,iBAAS,cAAc,CAAC,EACtB,QAAQ,EACR,cAAc,EACd,KAAK,EACL,IAAI,EACJ,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,cAA8B,EAC9B,YAAY,EACZ,UAA8B,EAC9B,UAAU,GACX,EAAE;IACD,QAAQ,EAAE,SAAS,eAAe,EAAE,CAAC;IACrC,2DAA2D;IAC3D,cAAc,EAAE,cAAc,CAAC;IAC/B,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;IACd,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,mFAAmF;IACnF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,sFAAsF;IACtF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,YAAY,CAAC,EAAE;QAAE,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;IACnE,wCAAwC;IACxC,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,oFAAoF;IACpF,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC9B,qBAuEA;AAED,OAAO,EAAE,cAAc,EAAE,CAAC;AAC1B,YAAY,EAAE,eAAe,EAAE,CAAC"}
|
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { cn } from "../lib/utils.js";
|
|
3
|
-
import { Table, TableBody, TableCaption, TableCell, TableDetailRow, TableFooter, TableHead, TableHeader, TableRow, } from "./table.js";
|
|
4
|
-
import { tableCompactLayouts } from "./table-layouts.js";
|
|
5
|
-
import { CHART_ENTITY_OTHER_COLOR, entityColor, } from "./chart-entity-colors.js";
|
|
6
|
-
function percentOf(value, total) {
|
|
7
|
-
return total > 0 ? (value / total) * 100 : 0;
|
|
8
|
-
}
|
|
9
|
-
function formatShare(share) {
|
|
10
|
-
return `${share.toFixed(1)}%`;
|
|
11
|
-
}
|
|
12
|
-
function defaultFormat(value) {
|
|
13
|
-
return value.toLocaleString("en-US");
|
|
14
|
-
}
|
|
15
|
-
function ShareBar({ share, color }) {
|
|
16
|
-
return (_jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { "data-slot": "breakdown-table-bar", "aria-hidden": "true", className: "h-1.5 min-w-0 flex-1 overflow-hidden rounded-xs bg-muted", children: _jsx("span", { className: "block h-full rounded-r-xs", style: { width: `${Number(share.toFixed(3))}%`, backgroundColor: color } }) }), _jsx("span", { className: "shrink-0 text-right font-mono text-xs text-muted-foreground tabular-nums", children: formatShare(share) })] }));
|
|
17
|
-
}
|
|
18
|
-
function BreakdownRow({ label, value, display, share, color, mark, shareLabel, valueFormatter, ...props }) {
|
|
19
|
-
return (_jsxs(_Fragment, { children: [_jsxs(TableRow, { className: tableCompactLayouts.standard.row, ...props, children: [_jsx(TableCell, { className: "wrap-anywhere font-medium whitespace-normal", children: _jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [_jsx("span", { "data-slot": "breakdown-table-dot", "aria-hidden": "true", className: "size-2 shrink-0 rounded-xs", style: { backgroundColor: color } }), mark, _jsx("span", { className: "min-w-0", children: label })] }) }), _jsx(TableCell, { className: "text-right font-mono tabular-nums", children: display ?? valueFormatter(value) }), _jsx(TableCell, { className: tableCompactLayouts.standard.column, children: _jsx(ShareBar, { share: share, color: color }) })] }), _jsx(TableDetailRow, { colSpan: 2, facts: [
|
|
20
|
-
{ id: "share", label: shareLabel, value: _jsx(ShareBar, { share: share, color: color }) },
|
|
21
|
-
] })] }));
|
|
22
|
-
}
|
|
23
|
-
function BreakdownTable({ entities, entityColorMap, label, topN, otherValue, otherDisplay, totalDisplay, valueFormatter = defaultFormat, columnLabels, otherLabel = "Everything else", totalLabel, }) {
|
|
24
|
-
const providedOther = otherValue !== undefined;
|
|
25
|
-
const sorted = [...entities].sort((a, b) => b.value - a.value);
|
|
26
|
-
const visible = !providedOther && topN !== undefined && topN < sorted.length ? sorted.slice(0, topN) : sorted;
|
|
27
|
-
const foldedValue = providedOther
|
|
28
|
-
? otherValue
|
|
29
|
-
: sorted.slice(visible.length).reduce((sum, entity) => sum + entity.value, 0);
|
|
30
|
-
const total = sorted.reduce((sum, entity) => sum + entity.value, 0) + (providedOther ? otherValue : 0);
|
|
31
|
-
const showOther = providedOther ? otherValue > 0 : visible.length < sorted.length;
|
|
32
|
-
const shareLabel = columnLabels?.share ?? "Share of total";
|
|
33
|
-
return (_jsxs(Table, { "data-slot": "breakdown-table", className: "table-fixed text-sm", compactDetails: "standard", children: [_jsx(TableCaption, { className: "sr-only", children: label }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-1/2 whitespace-normal", children: columnLabels?.entity ?? "Entity" }), _jsx(TableHead, { className: "w-1/4 text-right whitespace-normal", children: columnLabels?.value ?? "Value" }), _jsx(TableHead, { className: cn("w-1/4 whitespace-normal", tableCompactLayouts.standard.column), children: shareLabel })] }) }), _jsxs(TableBody, { children: [visible.map((entity) => (_jsx(BreakdownRow, { label: entity.label, value: entity.value, ...(entity.display !== undefined ? { display: entity.display } : {}), share: percentOf(entity.value, total), color: entityColor(entityColorMap, entity.id), mark: entity.mark, shareLabel: shareLabel, valueFormatter: valueFormatter }, entity.id))), showOther ? (_jsx(BreakdownRow, { "data-slot": "breakdown-table-other", label: otherLabel, value: foldedValue, ...(otherDisplay !== undefined ? { display: otherDisplay } : {}), share: percentOf(foldedValue, total), color: CHART_ENTITY_OTHER_COLOR, shareLabel: shareLabel, valueFormatter: valueFormatter })) : null] }), totalLabel ? (_jsx(TableFooter, { children: _jsx(BreakdownRow, { label: totalLabel, value: total, ...(totalDisplay !== undefined ? { display: totalDisplay } : {}), share: percentOf(total, total), color: CHART_ENTITY_OTHER_COLOR, shareLabel: shareLabel, valueFormatter: valueFormatter }) })) : null] }));
|
|
34
|
-
}
|
|
35
|
-
export { BreakdownTable };
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
/**
|
|
3
|
-
* chart-bullet-bar — the cap / included-usage meter for the console chart kit
|
|
4
|
-
* (issue #166; DESIGN.md "Meter and bullet grammar").
|
|
5
|
-
*
|
|
6
|
-
* The bar carries a positional threshold tick at the product-configured
|
|
7
|
-
* warning fraction (`thresholdFraction` is a REQUIRED consumer input, never a
|
|
8
|
-
* constant of this component — 0.8 is the common product default) and a cap
|
|
9
|
-
* tick at 100%. Overflow renders as a distinct segment continuing past the
|
|
10
|
-
* cap tick, never clamped away. The required product-owned tone communicates
|
|
11
|
-
* consequence independently of position: a full included allowance can have
|
|
12
|
-
* funded extra available. The current value reads at the bar tip.
|
|
13
|
-
*
|
|
14
|
-
* Two scales, one meter owner. The default `panel` scale is the full grammar
|
|
15
|
-
* above. The `row` scale carries a percent and a thin bar without ticks or a
|
|
16
|
-
* second value line, so measurements align in compact tables and membership
|
|
17
|
-
* rows. Its tone still comes from the product; compact does not mean warning.
|
|
18
|
-
* Overflow remains visible at either scale.
|
|
19
|
-
*
|
|
20
|
-
* Accessibility: `role="meter"` with a REQUIRED accessible name (`label`);
|
|
21
|
-
* `aria-valuenow` clamps to the meter maximum while `aria-valuetext` conveys
|
|
22
|
-
* the true value including overflow. At the `row` scale the label is the only
|
|
23
|
-
* place the words live — the row prints no caption — so the caller passes a
|
|
24
|
-
* label that reads as a sentence, not a bare noun.
|
|
25
|
-
*/
|
|
26
|
-
type BulletBarTone = "neutral" | "warning" | "danger";
|
|
27
|
-
type BulletBarSize = "panel" | "row";
|
|
28
|
-
declare function BulletBar({ value, max, thresholdFraction, tone, label, size, valueFormatter, valueText, className, ...props }: Omit<React.ComponentProps<"div">, "children"> & {
|
|
29
|
-
value: number;
|
|
30
|
-
/** The cap (included usage / limit) the meter measures against. */
|
|
31
|
-
max: number;
|
|
32
|
-
/**
|
|
33
|
-
* REQUIRED product-configured warning fraction of the cap (0–1) for the
|
|
34
|
-
* positional threshold tick. 0.8 is the common product default, but the
|
|
35
|
-
* fraction is a consumer input, never a constant of this contract.
|
|
36
|
-
*/
|
|
37
|
-
thresholdFraction: number;
|
|
38
|
-
/** REQUIRED product consequence; not derived from the measurement. */
|
|
39
|
-
tone: BulletBarTone;
|
|
40
|
-
/** REQUIRED accessible name for the meter. */
|
|
41
|
-
label: string;
|
|
42
|
-
/**
|
|
43
|
-
* `panel` (default) is the full meter grammar. `row` is the single-line
|
|
44
|
-
* compact comparison scale: percent plus a thin bar, no ticks, no value line.
|
|
45
|
-
*/
|
|
46
|
-
size?: BulletBarSize;
|
|
47
|
-
valueFormatter?: (value: number) => string;
|
|
48
|
-
/** Optional override for the generated `aria-valuetext`. */
|
|
49
|
-
valueText?: string;
|
|
50
|
-
}): React.JSX.Element;
|
|
51
|
-
export { BulletBar };
|
|
52
|
-
export type { BulletBarTone };
|
|
53
|
-
//# sourceMappingURL=chart-bullet-bar.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"chart-bullet-bar.d.ts","sourceRoot":"","sources":["../../src/components/chart-bullet-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,KAAK,aAAa,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AACtD,KAAK,aAAa,GAAG,OAAO,GAAG,KAAK,CAAC;AAmCrC,iBAAS,SAAS,CAAC,EACjB,KAAK,EACL,GAAG,EACH,iBAAiB,EACjB,IAAI,EACJ,KAAK,EACL,IAAc,EACd,cAA8B,EAC9B,SAAS,EACT,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAAG;IACjD,KAAK,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,GAAG,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,iBAAiB,EAAE,MAAM,CAAC;IAC1B,sEAAsE;IACtE,IAAI,EAAE,aAAa,CAAC;IACpB,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,4DAA4D;IAC5D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,qBAgIA;AAED,OAAO,EAAE,SAAS,EAAE,CAAC;AACrB,YAAY,EAAE,aAAa,EAAE,CAAC"}
|
|
@@ -1,63 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { cn } from "../lib/utils.js";
|
|
3
|
-
/**
|
|
4
|
-
* The tip value is TEXT, so it takes the feedback pair's deep tone, not the
|
|
5
|
-
* rail tone the segments wear: `--nc-state-review` / `--nc-state-blocked` are
|
|
6
|
-
* fill tones (0.85 amber reads at 1.6:1 on the light canvas), while
|
|
7
|
-
* `--nc-warning-deep` and `--nc-error-deep` are authored light AND dark so the
|
|
8
|
-
* percentage stays readable in both modes when the product signals attention.
|
|
9
|
-
*/
|
|
10
|
-
const BULLET_BAR_VALUE_CLASS = {
|
|
11
|
-
neutral: "text-foreground",
|
|
12
|
-
warning: "text-(--nc-warning-deep)",
|
|
13
|
-
danger: "text-(--nc-error-deep)",
|
|
14
|
-
};
|
|
15
|
-
const BULLET_BAR_FILL_CLASS = {
|
|
16
|
-
neutral: "bg-(--nc-chart-seq-3)",
|
|
17
|
-
warning: "bg-(--nc-state-review)",
|
|
18
|
-
danger: "bg-(--nc-state-blocked)",
|
|
19
|
-
};
|
|
20
|
-
const BULLET_BAR_OVERFLOW_CLASS = {
|
|
21
|
-
neutral: "bg-(--nc-chart-seq-4)",
|
|
22
|
-
warning: "bg-(--nc-warning-deep)",
|
|
23
|
-
danger: "bg-(--nc-error-deep)",
|
|
24
|
-
};
|
|
25
|
-
function percent(fraction) {
|
|
26
|
-
return `${Number((fraction * 100).toFixed(3))}%`;
|
|
27
|
-
}
|
|
28
|
-
function defaultFormat(value) {
|
|
29
|
-
return value.toLocaleString("en-US");
|
|
30
|
-
}
|
|
31
|
-
function BulletBar({ value, max, thresholdFraction, tone, label, size = "panel", valueFormatter = defaultFormat, valueText, className, ...props }) {
|
|
32
|
-
const overflow = Math.max(value - max, 0);
|
|
33
|
-
const total = Math.max(value, max);
|
|
34
|
-
const fillFraction = total > 0 ? Math.min(value, max) / total : 0;
|
|
35
|
-
const overflowFraction = total > 0 ? overflow / total : 0;
|
|
36
|
-
const capFraction = total > 0 ? max / total : 1;
|
|
37
|
-
const thresholdTickFraction = capFraction * thresholdFraction;
|
|
38
|
-
const tipFraction = fillFraction + overflowFraction;
|
|
39
|
-
const meterValueText = valueText ??
|
|
40
|
-
`${valueFormatter(value)} of ${valueFormatter(max)}${overflow > 0 ? ` (${valueFormatter(overflow)} over the cap)` : ""}`;
|
|
41
|
-
const consumedPercent = max > 0 ? Math.round((value / max) * 100) : 0;
|
|
42
|
-
const segments = (_jsxs(_Fragment, { children: [_jsx("div", { "data-slot": "bullet-bar-track",
|
|
43
|
-
// One step darker than the surface it sits on, in both themes: at
|
|
44
|
-
// `bg-muted` an empty meter on the light canvas read as a hairline
|
|
45
|
-
// rather than as a track with nothing in it.
|
|
46
|
-
className: "absolute inset-y-0 rounded-r-sm bg-muted-foreground/20", style: { left: 0, width: percent(capFraction) } }), _jsx("div", { "data-slot": "bullet-bar-fill", className: cn("absolute inset-y-0", BULLET_BAR_FILL_CLASS[tone], overflow === 0 && "rounded-r-sm"), style: { left: 0, width: percent(fillFraction) } }), overflow > 0 ? (_jsx("div", { "data-slot": "bullet-bar-overflow", className: cn("absolute inset-y-0 rounded-r-sm", BULLET_BAR_OVERFLOW_CLASS[tone]), style: {
|
|
47
|
-
left: percent(fillFraction),
|
|
48
|
-
width: percent(overflowFraction),
|
|
49
|
-
} })) : null] }));
|
|
50
|
-
const meterAria = {
|
|
51
|
-
role: "meter",
|
|
52
|
-
"aria-label": label,
|
|
53
|
-
"aria-valuemin": 0,
|
|
54
|
-
"aria-valuemax": max,
|
|
55
|
-
"aria-valuenow": Math.min(value, max),
|
|
56
|
-
"aria-valuetext": meterValueText,
|
|
57
|
-
};
|
|
58
|
-
if (size === "row") {
|
|
59
|
-
return (_jsxs("div", { "data-slot": "bullet-bar", "data-tone": tone, "data-size": "row", className: cn("flex items-center gap-2", className), ...props, children: [_jsxs("span", { "data-slot": "bullet-bar-percent", "aria-hidden": "true", className: cn("font-mono text-xs tabular-nums", BULLET_BAR_VALUE_CLASS[tone]), children: [consumedPercent, "%"] }), _jsx("div", { ...meterAria, className: "relative h-1 min-w-0 flex-1", children: segments })] }));
|
|
60
|
-
}
|
|
61
|
-
return (_jsxs("div", { "data-slot": "bullet-bar", "data-tone": tone, "data-size": "panel", className: cn("flex flex-col gap-1", className), ...props, children: [_jsxs("div", { ...meterAria, className: "relative h-3 w-full", children: [segments, _jsx("div", { "data-slot": "bullet-bar-threshold-tick", "aria-hidden": "true", className: "absolute -inset-y-0.5 w-px bg-foreground", style: { left: percent(thresholdTickFraction) } }), _jsx("div", { "data-slot": "bullet-bar-cap-tick", "aria-hidden": "true", className: "absolute -inset-y-0.5 w-px bg-foreground", style: { left: percent(capFraction) } })] }), _jsx("div", { className: "relative h-4 w-full text-xs", "aria-hidden": "true", children: _jsx("span", { "data-slot": "bullet-bar-value", className: cn("absolute font-mono whitespace-nowrap tabular-nums", tipFraction > 0.6 && "-translate-x-full", BULLET_BAR_VALUE_CLASS[tone]), style: { left: percent(tipFraction) }, children: valueFormatter(value) }) })] }));
|
|
62
|
-
}
|
|
63
|
-
export { BulletBar };
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
/**
|
|
3
|
-
* chart-delta — shared delta/trend encoding for the console chart kit
|
|
4
|
-
* (issue #166; DESIGN.md "Delta and trend encoding").
|
|
5
|
-
*
|
|
6
|
-
* A change reads as a direction glyph (▲ ▼) plus a tone token, never bare
|
|
7
|
-
* signed text and never color alone. Tone follows direction crossed with
|
|
8
|
-
* whether up is good in the surrounding context (`upIsGood`).
|
|
9
|
-
*/
|
|
10
|
-
type DeltaDirection = "up" | "down" | "flat";
|
|
11
|
-
type DeltaTone = "positive" | "negative" | "neutral";
|
|
12
|
-
declare const DELTA_DIRECTION_TEXT: Record<DeltaDirection, string>;
|
|
13
|
-
declare const DELTA_TONE_CLASSES: Record<DeltaTone, string>;
|
|
14
|
-
/**
|
|
15
|
-
* Maps a delta direction onto its tone: direction crossed with whether up is
|
|
16
|
-
* good in this context. A flat delta is always neutral.
|
|
17
|
-
*/
|
|
18
|
-
declare function deltaTone(direction: DeltaDirection, upIsGood?: boolean): DeltaTone;
|
|
19
|
-
declare function Delta({ value, direction, upIsGood, vsLabel, className, ...props }: Omit<React.ComponentProps<"span">, "children"> & {
|
|
20
|
-
/** The formatted change, e.g. "+12%" or "3.4k". */
|
|
21
|
-
value: React.ReactNode;
|
|
22
|
-
direction: DeltaDirection;
|
|
23
|
-
/** Whether an upward move is good in this context. Defaults to true. */
|
|
24
|
-
upIsGood?: boolean;
|
|
25
|
-
/** The named comparison period, rendered as "vs {vsLabel}". */
|
|
26
|
-
vsLabel?: string;
|
|
27
|
-
}): React.JSX.Element;
|
|
28
|
-
export { Delta, deltaTone, DELTA_DIRECTION_TEXT, DELTA_TONE_CLASSES };
|
|
29
|
-
export type { DeltaDirection, DeltaTone };
|
|
30
|
-
//# sourceMappingURL=chart-delta.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"chart-delta.d.ts","sourceRoot":"","sources":["../../src/components/chart-delta.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B;;;;;;;GAOG;AAEH,KAAK,cAAc,GAAG,IAAI,GAAG,MAAM,GAAG,MAAM,CAAC;AAC7C,KAAK,SAAS,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAQrD,QAAA,MAAM,oBAAoB,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAIxD,CAAC;AAEF,QAAA,MAAM,kBAAkB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAIjD,CAAC;AAEF;;;GAGG;AACH,iBAAS,SAAS,CAAC,SAAS,EAAE,cAAc,EAAE,QAAQ,UAAO,GAAG,SAAS,CAMxE;AAED,iBAAS,KAAK,CAAC,EACb,KAAK,EACL,SAAS,EACT,QAAe,EACf,OAAO,EACP,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAClD,mDAAmD;IACnD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,EAAE,cAAc,CAAC;IAC1B,wEAAwE;IACxE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,qBAqBA;AAED,OAAO,EAAE,KAAK,EAAE,SAAS,EAAE,oBAAoB,EAAE,kBAAkB,EAAE,CAAC;AACtE,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,CAAC"}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { cn } from "../lib/utils.js";
|
|
3
|
-
const DELTA_GLYPHS = {
|
|
4
|
-
up: "▲",
|
|
5
|
-
down: "▼",
|
|
6
|
-
flat: "–",
|
|
7
|
-
};
|
|
8
|
-
const DELTA_DIRECTION_TEXT = {
|
|
9
|
-
up: "up",
|
|
10
|
-
down: "down",
|
|
11
|
-
flat: "unchanged",
|
|
12
|
-
};
|
|
13
|
-
const DELTA_TONE_CLASSES = {
|
|
14
|
-
positive: "text-(--nc-state-complete)",
|
|
15
|
-
negative: "text-(--nc-state-blocked)",
|
|
16
|
-
neutral: "text-muted-foreground",
|
|
17
|
-
};
|
|
18
|
-
/**
|
|
19
|
-
* Maps a delta direction onto its tone: direction crossed with whether up is
|
|
20
|
-
* good in this context. A flat delta is always neutral.
|
|
21
|
-
*/
|
|
22
|
-
function deltaTone(direction, upIsGood = true) {
|
|
23
|
-
if (direction === "flat") {
|
|
24
|
-
return "neutral";
|
|
25
|
-
}
|
|
26
|
-
return (direction === "up") === upIsGood ? "positive" : "negative";
|
|
27
|
-
}
|
|
28
|
-
function Delta({ value, direction, upIsGood = true, vsLabel, className, ...props }) {
|
|
29
|
-
const tone = deltaTone(direction, upIsGood);
|
|
30
|
-
return (_jsxs("span", { "data-slot": "delta", "data-direction": direction, "data-tone": tone, className: cn("inline-flex items-baseline gap-1 text-sm font-medium", DELTA_TONE_CLASSES[tone], className), ...props, children: [_jsx("span", { "aria-hidden": "true", children: DELTA_GLYPHS[direction] }), _jsx("span", { className: "sr-only", children: DELTA_DIRECTION_TEXT[direction] }), _jsx("span", { children: value }), vsLabel ? _jsxs("span", { className: "font-normal text-muted-foreground", children: ["vs ", vsLabel] }) : null] }));
|
|
31
|
-
}
|
|
32
|
-
export { Delta, deltaTone, DELTA_DIRECTION_TEXT, DELTA_TONE_CLASSES };
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { useRender } from "@base-ui/react/use-render";
|
|
3
|
-
import { type DeltaDirection } from "./chart-delta.js";
|
|
4
|
-
type KpiStatDelta = {
|
|
5
|
-
/** The formatted change, e.g. "+12%". */
|
|
6
|
-
value: React.ReactNode;
|
|
7
|
-
direction: DeltaDirection;
|
|
8
|
-
/** Whether an upward move is good for this KPI. Defaults to true. */
|
|
9
|
-
upIsGood?: boolean;
|
|
10
|
-
/** The named comparison period, e.g. "previous 30 days". */
|
|
11
|
-
vsLabel: string;
|
|
12
|
-
/** A volume change keeps its arrow, which is a fact, and takes no tone, which would be a judgment. */
|
|
13
|
-
neutral?: boolean;
|
|
14
|
-
};
|
|
15
|
-
type KpiStatTone = "default" | "warning" | "critical";
|
|
16
|
-
declare function KpiStat({ label, value, delta, sparkline, note, tone, className, ...props }: Omit<React.ComponentProps<"dl">, "children"> & {
|
|
17
|
-
label: React.ReactNode;
|
|
18
|
-
value: React.ReactNode;
|
|
19
|
-
delta?: KpiStatDelta;
|
|
20
|
-
/** Optional decorative sparkline slot (e.g. a `Sparkline` element). */
|
|
21
|
-
sparkline?: React.ReactNode;
|
|
22
|
-
note?: React.ReactNode;
|
|
23
|
-
tone?: KpiStatTone;
|
|
24
|
-
}): React.JSX.Element;
|
|
25
|
-
type KpiStatGroupItem = Pick<React.ComponentProps<typeof KpiStat>, "label" | "value" | "delta" | "note" | "tone"> & {
|
|
26
|
-
id: string;
|
|
27
|
-
sparkline?: {
|
|
28
|
-
data: readonly number[];
|
|
29
|
-
baseline: number;
|
|
30
|
-
};
|
|
31
|
-
/** Bind an app link or data attributes without replacing the tile's presentation. */
|
|
32
|
-
render?: useRender.ComponentProps<"div">["render"];
|
|
33
|
-
interactive?: boolean;
|
|
34
|
-
};
|
|
35
|
-
declare function KpiStatGroup({ items, heading, }: {
|
|
36
|
-
items: readonly KpiStatGroupItem[];
|
|
37
|
-
heading?: {
|
|
38
|
-
title: string;
|
|
39
|
-
description?: string;
|
|
40
|
-
};
|
|
41
|
-
}): React.JSX.Element | null;
|
|
42
|
-
export { KpiStat, KpiStatGroup };
|
|
43
|
-
export type { KpiStatDelta, KpiStatTone, KpiStatGroupItem };
|
|
44
|
-
//# sourceMappingURL=chart-kpi-stat.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"chart-kpi-stat.d.ts","sourceRoot":"","sources":["../../src/components/chart-kpi-stat.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAOtD,OAAO,EAIL,KAAK,cAAc,EACpB,MAAM,0BAA0B,CAAC;AAGlC,KAAK,YAAY,GAAG;IAClB,yCAAyC;IACzC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,EAAE,cAAc,CAAC;IAC1B,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4DAA4D;IAC5D,OAAO,EAAE,MAAM,CAAC;IAChB,sGAAsG;IACtG,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,KAAK,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;AAyCtD,iBAAS,OAAO,CAAC,EACf,KAAK,EACL,KAAK,EACL,KAAK,EACL,SAAS,EACT,IAAI,EACJ,IAAgB,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,GAAG;IAChD,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB,uEAAuE;IACvE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,qBA+CA;AAED,KAAK,gBAAgB,GAAG,IAAI,CAC1B,KAAK,CAAC,cAAc,CAAC,OAAO,OAAO,CAAC,EACpC,OAAO,GAAG,OAAO,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CAC9C,GAAG;IACF,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,CAAC,EAAE;QAAE,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1D,qFAAqF;IACrF,MAAM,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC;IACnD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAqBF,iBAAS,YAAY,CAAC,EACpB,KAAK,EACL,OAAO,GACR,EAAE;IACD,KAAK,EAAE,SAAS,gBAAgB,EAAE,CAAC;IACnC,OAAO,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,WAAW,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACnD,4BA2BA;AAED,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;AACjC,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,gBAAgB,EAAE,CAAC"}
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { useRender } from "@base-ui/react/use-render";
|
|
3
|
-
import { MinusIcon, TrendingDownIcon, TrendingUpIcon } from "lucide-react";
|
|
4
|
-
import { cn } from "../lib/utils.js";
|
|
5
|
-
import { Card, CardDescription, CardHeader, CardTitle } from "./card.js";
|
|
6
|
-
import { Separator } from "./separator.js";
|
|
7
|
-
import { Badge } from "./badge.js";
|
|
8
|
-
import { DELTA_DIRECTION_TEXT, DELTA_TONE_CLASSES, deltaTone, } from "./chart-delta.js";
|
|
9
|
-
import { Sparkline } from "./chart-sparkline.js";
|
|
10
|
-
const valueTones = {
|
|
11
|
-
default: "text-foreground",
|
|
12
|
-
warning: "text-(--nc-warning-deep)",
|
|
13
|
-
critical: "text-(--nc-error-deep)",
|
|
14
|
-
};
|
|
15
|
-
const trendIcons = {
|
|
16
|
-
up: TrendingUpIcon,
|
|
17
|
-
down: TrendingDownIcon,
|
|
18
|
-
flat: MinusIcon,
|
|
19
|
-
};
|
|
20
|
-
/*
|
|
21
|
-
* The change sits top right as an arrow plus a number, the way shadcn's
|
|
22
|
-
* dashboard-01 card shows it (`rule/kpi-card-trend-top-right`). The arrow is
|
|
23
|
-
* the direction glyph DESIGN.md requires; tone still comes from direction
|
|
24
|
-
* crossed with `upIsGood`. A neutral change keeps its arrow and takes no tone.
|
|
25
|
-
* The badge is a grid cell, so a long change wraps the label instead of
|
|
26
|
-
* covering it.
|
|
27
|
-
*/
|
|
28
|
-
function KpiStatTrend({ delta }) {
|
|
29
|
-
const Icon = trendIcons[delta.direction];
|
|
30
|
-
const tone = delta.neutral ? "neutral" : deltaTone(delta.direction, delta.upIsGood);
|
|
31
|
-
return (_jsx("dd", { "data-slot": "kpi-stat-trend", "data-direction": delta.direction, "data-tone": tone, className: "col-start-2 row-start-1 justify-self-end", children: _jsxs(Badge, { variant: "outline", className: cn("tabular-nums", DELTA_TONE_CLASSES[tone]), children: [_jsx(Icon, { "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: DELTA_DIRECTION_TEXT[delta.direction] }), delta.value] }) }));
|
|
32
|
-
}
|
|
33
|
-
function KpiStat({ label, value, delta, sparkline, note, tone = "default", className, ...props }) {
|
|
34
|
-
return (_jsxs("dl", { "data-slot": "kpi-stat", className: cn("@container/kpi-stat grid min-w-0 grid-cols-[minmax(0,1fr)_auto] gap-x-2 gap-y-1.5", className), ...props, children: [_jsx("dt", { "data-slot": "kpi-stat-label", className: "col-start-1 row-start-1 min-h-8 min-w-0 text-xs font-medium text-muted-foreground", children: label }), delta ? _jsx(KpiStatTrend, { delta: delta }) : null, _jsxs("dd", { className: "col-span-2 flex min-w-0 flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-end justify-between gap-3", children: [_jsx("div", { "data-slot": "kpi-stat-value", className: cn("min-w-0 shrink-0 text-[clamp(1.125rem,12cqw,1.875rem)] leading-none font-semibold", valueTones[tone]), children: value }), sparkline ? (_jsx("div", { "data-slot": "kpi-stat-sparkline", "aria-hidden": "true", className: "hidden min-w-0 max-w-24 @[15rem]/kpi-stat:block [&>svg]:h-auto [&>svg]:max-w-full", children: sparkline })) : null] }), delta ? (_jsxs("p", { "data-slot": "kpi-stat-comparison", className: "text-sm text-muted-foreground", children: ["vs ", delta.vsLabel] })) : null, note ? _jsx("p", { className: "text-sm font-medium text-muted-foreground", children: note }) : null] })] }));
|
|
35
|
-
}
|
|
36
|
-
function KpiStatTile({ render, interactive, sparkline, ...stat }) {
|
|
37
|
-
return useRender({
|
|
38
|
-
defaultTagName: "div",
|
|
39
|
-
render,
|
|
40
|
-
props: {
|
|
41
|
-
className: cn("block h-full min-w-0 p-4", interactive && "nc-transition-paint rounded-md hover:bg-accent"),
|
|
42
|
-
children: (_jsx(KpiStat, { ...stat, ...(sparkline ? { sparkline: _jsx(Sparkline, { ...sparkline, width: 96, height: 28 }) } : {}) })),
|
|
43
|
-
},
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
function KpiStatGroup({ items, heading, }) {
|
|
47
|
-
if (items.length === 0)
|
|
48
|
-
return null;
|
|
49
|
-
return (_jsxs(Card, { className: "gap-0 py-0", children: [heading ? (_jsxs(_Fragment, { children: [_jsxs(CardHeader, { className: "py-4", children: [_jsx(CardTitle, { children: _jsx("h2", { children: heading.title }) }), heading.description ? _jsx(CardDescription, { children: heading.description }) : null] }), _jsx(Separator, {})] })) : null, _jsx("div", { "data-slot": "kpi-stat-group", className: "grid min-w-0 grid-cols-1 divide-y divide-border sm:grid-cols-[repeat(auto-fit,minmax(0,1fr))] sm:divide-x sm:divide-y-0", children: items.map(({ id, ...item }) => (_jsx("div", { className: "min-w-0", children: _jsx(KpiStatTile, { ...item }) }, id))) })] }));
|
|
50
|
-
}
|
|
51
|
-
export { KpiStat, KpiStatGroup };
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"chart-time-series-layout.d.ts","sourceRoot":"","sources":["../../src/components/chart-time-series-layout.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,SAAS,GAAG,IAAI,GAAG,MAAM,CAAC;AAE9D,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,cAAc,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAKtF,CAAC"}
|
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
|
-
import { type TimeSeriesSize } from "./chart-time-series-layout.js";
|
|
3
|
-
import { type EntityColorMap } from "./chart-entity-colors.js";
|
|
4
|
-
type TimeSeriesSeries = {
|
|
5
|
-
/** Stable entity id — the data key in each datum and the color-map key. */
|
|
6
|
-
id: string;
|
|
7
|
-
label: string;
|
|
8
|
-
/**
|
|
9
|
-
* The entity's mark, printed beside its name in the legend and its tooltip
|
|
10
|
-
* row. A model series carries its maker's mark here so colour never
|
|
11
|
-
* identifies it alone (rule `model-shown-with-logo`); the chart only places
|
|
12
|
-
* the node, and the mark stays decorative because the name beside it is the
|
|
13
|
-
* series' text.
|
|
14
|
-
*/
|
|
15
|
-
mark?: React.ReactNode;
|
|
16
|
-
};
|
|
17
|
-
type TimeSeriesDatum = Record<string, number | string>;
|
|
18
|
-
type TimeSeriesProps = Omit<React.ComponentProps<"figure">, "children"> & {
|
|
19
|
-
size?: TimeSeriesSize;
|
|
20
|
-
data: readonly TimeSeriesDatum[];
|
|
21
|
-
/** The datum key carrying the period (e.g. the day). */
|
|
22
|
-
xKey: string;
|
|
23
|
-
series: readonly TimeSeriesSeries[];
|
|
24
|
-
/** Stable entity-id datum key for horizontal categorical bars; omitted for time series. */
|
|
25
|
-
barCategoryKey?: string;
|
|
26
|
-
/** The shared page-context entity-color assignment map. */
|
|
27
|
-
entityColorMap: EntityColorMap;
|
|
28
|
-
/** REQUIRED accessible name for the chart and its table alternative. */
|
|
29
|
-
label: string;
|
|
30
|
-
/** Column header for the period column in the table alternative. */
|
|
31
|
-
xLabel?: string;
|
|
32
|
-
valueFormatter?: (value: number) => string;
|
|
33
|
-
/**
|
|
34
|
-
* Y-axis width. Defaults to `"auto"` (recharts 3.8 sizes the gutter to the
|
|
35
|
-
* formatted ticks); pass a number to pin it.
|
|
36
|
-
*/
|
|
37
|
-
yAxisWidth?: number;
|
|
38
|
-
/** Label for the folded neutral "Other" series (entities past the sixth). */
|
|
39
|
-
otherLabel?: string;
|
|
40
|
-
};
|
|
41
|
-
type FormattedSeries = {
|
|
42
|
-
id: string;
|
|
43
|
-
label: string;
|
|
44
|
-
/** Formats this series' values where it needs its own reading, e.g. a rate beside a sum. */
|
|
45
|
-
valueFormatter?: (value: number) => string;
|
|
46
|
-
};
|
|
47
|
-
declare function TimeSeriesBars({ data, xKey, series, entityColorMap, label, xLabel, valueFormatter, yAxisWidth, otherLabel, barCategoryKey, size, className, ...props }: TimeSeriesProps): React.JSX.Element;
|
|
48
|
-
declare function TimeSeriesArea({ data, xKey, series, entityColorMap, label, xLabel, valueFormatter, yAxisWidth, otherLabel, size, className, ...props }: TimeSeriesProps): React.JSX.Element;
|
|
49
|
-
/**
|
|
50
|
-
* One series of a composed plot. A composed chart mixes measures that do not
|
|
51
|
-
* share a unit — sums as bars on the left axis, a rate as a line on the right —
|
|
52
|
-
* so each series states how it is drawn, which axis it reads, and how its own
|
|
53
|
-
* values print.
|
|
54
|
-
*/
|
|
55
|
-
type TimeSeriesComposedSeries = FormattedSeries & {
|
|
56
|
-
/**
|
|
57
|
-
* The series' mark, printed beside its name in the legend and its tooltip
|
|
58
|
-
* row (rule `model-shown-with-logo`); see `TimeSeriesSeries.mark`.
|
|
59
|
-
*/
|
|
60
|
-
mark?: React.ReactNode;
|
|
61
|
-
/** Drawn as a column or as a line. */
|
|
62
|
-
kind: "bar" | "line";
|
|
63
|
-
/** The value axis this series reads. Defaults to the left one. */
|
|
64
|
-
axis?: "left" | "right";
|
|
65
|
-
/**
|
|
66
|
-
* A bar's fill as a share of its hue, so a line sharing the plot still reads
|
|
67
|
-
* over it. Full strength when omitted; a wash stays a readability choice of
|
|
68
|
-
* the surface that composes the chart.
|
|
69
|
-
*/
|
|
70
|
-
fillOpacity?: number;
|
|
71
|
-
/** Shows the line's point markers at the DESIGN.md marker geometry. Off by default. */
|
|
72
|
-
dot?: boolean;
|
|
73
|
-
};
|
|
74
|
-
type TimeSeriesComposedProps = Omit<React.ComponentProps<"figure">, "children"> & {
|
|
75
|
-
size?: TimeSeriesSize;
|
|
76
|
-
data: readonly TimeSeriesDatum[];
|
|
77
|
-
/** The datum key carrying the period (e.g. the month). */
|
|
78
|
-
xKey: string;
|
|
79
|
-
series: readonly TimeSeriesComposedSeries[];
|
|
80
|
-
/** The shared page-context entity-color assignment map. */
|
|
81
|
-
entityColorMap: EntityColorMap;
|
|
82
|
-
/** REQUIRED accessible name for the chart and its table alternative. */
|
|
83
|
-
label: string;
|
|
84
|
-
/** Column header for the period column in the table alternative. */
|
|
85
|
-
xLabel?: string;
|
|
86
|
-
/** Formats every series that declares none of its own. */
|
|
87
|
-
valueFormatter?: (value: number) => string;
|
|
88
|
-
/** Width of both y-axis gutters. Defaults to `"auto"` (recharts sizes them to the ticks). */
|
|
89
|
-
yAxisWidth?: number;
|
|
90
|
-
};
|
|
91
|
-
/**
|
|
92
|
-
* Bars for the measures, a line over them for the rate, and a second axis for
|
|
93
|
-
* the rate's own unit. The shadcn registry holds no composed chart item (see the
|
|
94
|
-
* file header), so this is Recharts' `ComposedChart` through the same
|
|
95
|
-
* foundation, and it keeps the kit's whole contract: a named figure, a
|
|
96
|
-
* `accessibilityLayer` graphic with its own title, a legend at two or more
|
|
97
|
-
* series, an entity-colored pair of marks, and a table twin carrying each
|
|
98
|
-
* series in its own terms.
|
|
99
|
-
*/
|
|
100
|
-
declare function TimeSeriesComposed({ data, xKey, series, entityColorMap, label, xLabel, valueFormatter, yAxisWidth, size, className, ...props }: TimeSeriesComposedProps): React.JSX.Element;
|
|
101
|
-
export { TimeSeriesArea, TimeSeriesBars, TimeSeriesComposed };
|
|
102
|
-
export type { TimeSeriesComposedProps, TimeSeriesComposedSeries, TimeSeriesDatum, TimeSeriesProps, TimeSeriesSeries, };
|
|
103
|
-
//# sourceMappingURL=chart-time-series.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"chart-time-series.d.ts","sourceRoot":"","sources":["../../src/components/chart-time-series.tsx"],"names":[],"mappings":"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"}
|