@arcfusionz/arc-analytic-ui 0.0.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/_virtual/_rolldown/runtime.js +13 -0
- package/dist/components/AnomalyCard/AnomalyCard.chart.d.ts +64 -0
- package/dist/components/AnomalyCard/AnomalyCard.chart.js +341 -0
- package/dist/components/AnomalyCard/AnomalyCard.d.ts +169 -0
- package/dist/components/AnomalyCard/AnomalyCard.js +1019 -0
- package/dist/components/AnomalyCard/AnomalyCard.model.d.ts +508 -0
- package/dist/components/AnomalyCard/AnomalyCard.model.js +553 -0
- package/dist/components/AnomalyCard/index.d.ts +4 -0
- package/dist/components/AnomalyCard/index.js +4 -0
- package/dist/components/ChartCard/ChartCard.chart.d.ts +72 -0
- package/dist/components/ChartCard/ChartCard.chart.js +1333 -0
- package/dist/components/ChartCard/ChartCard.d.ts +206 -0
- package/dist/components/ChartCard/ChartCard.js +718 -0
- package/dist/components/ChartCard/ChartCard.model.d.ts +452 -0
- package/dist/components/ChartCard/ChartCard.model.js +1223 -0
- package/dist/components/ChartCard/index.d.ts +4 -0
- package/dist/components/ChartCard/index.js +4 -0
- package/dist/components/ComparisonCard/ComparisonCard.chart.d.ts +80 -0
- package/dist/components/ComparisonCard/ComparisonCard.chart.js +337 -0
- package/dist/components/ComparisonCard/ComparisonCard.d.ts +200 -0
- package/dist/components/ComparisonCard/ComparisonCard.js +1325 -0
- package/dist/components/ComparisonCard/ComparisonCard.model.d.ts +309 -0
- package/dist/components/ComparisonCard/ComparisonCard.model.js +263 -0
- package/dist/components/ComparisonCard/index.d.ts +4 -0
- package/dist/components/ComparisonCard/index.js +4 -0
- package/dist/components/ForecastCard/ForecastCard.chart.d.ts +82 -0
- package/dist/components/ForecastCard/ForecastCard.chart.js +416 -0
- package/dist/components/ForecastCard/ForecastCard.d.ts +148 -0
- package/dist/components/ForecastCard/ForecastCard.js +1029 -0
- package/dist/components/ForecastCard/ForecastCard.model.d.ts +497 -0
- package/dist/components/ForecastCard/ForecastCard.model.js +554 -0
- package/dist/components/ForecastCard/index.d.ts +4 -0
- package/dist/components/ForecastCard/index.js +4 -0
- package/dist/components/HighlightCard/HighlightCard.chart.d.ts +122 -0
- package/dist/components/HighlightCard/HighlightCard.chart.js +660 -0
- package/dist/components/HighlightCard/HighlightCard.d.ts +202 -0
- package/dist/components/HighlightCard/HighlightCard.js +1286 -0
- package/dist/components/HighlightCard/HighlightCard.model.d.ts +692 -0
- package/dist/components/HighlightCard/HighlightCard.model.js +875 -0
- package/dist/components/HighlightCard/index.d.ts +4 -0
- package/dist/components/HighlightCard/index.js +4 -0
- package/dist/components/InsightCard/InsightCard.chart.d.ts +91 -0
- package/dist/components/InsightCard/InsightCard.chart.js +471 -0
- package/dist/components/InsightCard/InsightCard.d.ts +161 -0
- package/dist/components/InsightCard/InsightCard.js +961 -0
- package/dist/components/InsightCard/InsightCard.model.d.ts +405 -0
- package/dist/components/InsightCard/InsightCard.model.js +421 -0
- package/dist/components/InsightCard/index.d.ts +4 -0
- package/dist/components/InsightCard/index.js +4 -0
- package/dist/components/MetricCard/MetricCard.chart.d.ts +79 -0
- package/dist/components/MetricCard/MetricCard.chart.js +435 -0
- package/dist/components/MetricCard/MetricCard.d.ts +227 -0
- package/dist/components/MetricCard/MetricCard.js +1293 -0
- package/dist/components/MetricCard/MetricCard.model.d.ts +521 -0
- package/dist/components/MetricCard/MetricCard.model.js +627 -0
- package/dist/components/MetricCard/index.d.ts +4 -0
- package/dist/components/MetricCard/index.js +4 -0
- package/dist/components/ProfileCard/ProfileCard.chart.d.ts +64 -0
- package/dist/components/ProfileCard/ProfileCard.chart.js +427 -0
- package/dist/components/ProfileCard/ProfileCard.d.ts +140 -0
- package/dist/components/ProfileCard/ProfileCard.js +735 -0
- package/dist/components/ProfileCard/ProfileCard.model.d.ts +279 -0
- package/dist/components/ProfileCard/ProfileCard.model.js +244 -0
- package/dist/components/ProfileCard/index.d.ts +4 -0
- package/dist/components/ProfileCard/index.js +4 -0
- package/dist/components/ProgressCard/ProgressCard.chart.d.ts +73 -0
- package/dist/components/ProgressCard/ProgressCard.chart.js +373 -0
- package/dist/components/ProgressCard/ProgressCard.d.ts +137 -0
- package/dist/components/ProgressCard/ProgressCard.js +908 -0
- package/dist/components/ProgressCard/ProgressCard.model.d.ts +385 -0
- package/dist/components/ProgressCard/ProgressCard.model.js +389 -0
- package/dist/components/ProgressCard/index.d.ts +4 -0
- package/dist/components/ProgressCard/index.js +4 -0
- package/dist/components/ReportCard/ReportCard.chart.d.ts +45 -0
- package/dist/components/ReportCard/ReportCard.chart.js +231 -0
- package/dist/components/ReportCard/ReportCard.d.ts +153 -0
- package/dist/components/ReportCard/ReportCard.js +1118 -0
- package/dist/components/ReportCard/ReportCard.model.d.ts +392 -0
- package/dist/components/ReportCard/ReportCard.model.js +399 -0
- package/dist/components/ReportCard/index.d.ts +4 -0
- package/dist/components/ReportCard/index.js +4 -0
- package/dist/components/SankeyCard/SankeyCard.chart.d.ts +75 -0
- package/dist/components/SankeyCard/SankeyCard.chart.js +249 -0
- package/dist/components/SankeyCard/SankeyCard.d.ts +185 -0
- package/dist/components/SankeyCard/SankeyCard.js +788 -0
- package/dist/components/SankeyCard/SankeyCard.model.d.ts +501 -0
- package/dist/components/SankeyCard/SankeyCard.model.js +789 -0
- package/dist/components/SankeyCard/index.d.ts +4 -0
- package/dist/components/SankeyCard/index.js +4 -0
- package/dist/components/StatusCard/StatusCard.chart.d.ts +60 -0
- package/dist/components/StatusCard/StatusCard.chart.js +188 -0
- package/dist/components/StatusCard/StatusCard.d.ts +176 -0
- package/dist/components/StatusCard/StatusCard.js +989 -0
- package/dist/components/StatusCard/StatusCard.model.d.ts +555 -0
- package/dist/components/StatusCard/StatusCard.model.js +776 -0
- package/dist/components/StatusCard/index.d.ts +4 -0
- package/dist/components/StatusCard/index.js +4 -0
- package/dist/components/TableCard/TableCard.chart.d.ts +53 -0
- package/dist/components/TableCard/TableCard.chart.js +192 -0
- package/dist/components/TableCard/TableCard.d.ts +140 -0
- package/dist/components/TableCard/TableCard.js +811 -0
- package/dist/components/TableCard/TableCard.model.d.ts +381 -0
- package/dist/components/TableCard/TableCard.model.js +475 -0
- package/dist/components/TableCard/index.d.ts +4 -0
- package/dist/components/TableCard/index.js +4 -0
- package/dist/components/TargetCard/TargetCard.chart.d.ts +52 -0
- package/dist/components/TargetCard/TargetCard.chart.js +273 -0
- package/dist/components/TargetCard/TargetCard.d.ts +143 -0
- package/dist/components/TargetCard/TargetCard.js +910 -0
- package/dist/components/TargetCard/TargetCard.model.d.ts +468 -0
- package/dist/components/TargetCard/TargetCard.model.js +581 -0
- package/dist/components/TargetCard/index.d.ts +4 -0
- package/dist/components/TargetCard/index.js +4 -0
- package/dist/components/TreeCard/TreeCard.chart.d.ts +80 -0
- package/dist/components/TreeCard/TreeCard.chart.js +178 -0
- package/dist/components/TreeCard/TreeCard.d.ts +182 -0
- package/dist/components/TreeCard/TreeCard.js +1187 -0
- package/dist/components/TreeCard/TreeCard.model.d.ts +330 -0
- package/dist/components/TreeCard/TreeCard.model.js +401 -0
- package/dist/components/TreeCard/index.d.ts +4 -0
- package/dist/components/TreeCard/index.js +4 -0
- package/dist/components/TrendCard/TrendCard.chart.d.ts +75 -0
- package/dist/components/TrendCard/TrendCard.chart.js +393 -0
- package/dist/components/TrendCard/TrendCard.d.ts +224 -0
- package/dist/components/TrendCard/TrendCard.js +1053 -0
- package/dist/components/TrendCard/TrendCard.model.d.ts +545 -0
- package/dist/components/TrendCard/TrendCard.model.js +623 -0
- package/dist/components/TrendCard/index.d.ts +4 -0
- package/dist/components/TrendCard/index.js +4 -0
- package/dist/index.d.ts +76 -0
- package/dist/index.js +57 -0
- package/dist/lib/vega/ArcVegaChart.d.ts +24 -0
- package/dist/lib/vega/ArcVegaChart.js +42 -0
- package/dist/lib/vega/ArcVegaSurface.d.ts +13 -0
- package/dist/lib/vega/ArcVegaSurface.js +38 -0
- package/dist/lib/vega/axisTicks.js +156 -0
- package/dist/lib/vega/config.d.ts +29 -0
- package/dist/lib/vega/config.js +113 -0
- package/dist/lib/vega/embed.d.ts +29 -0
- package/dist/lib/vega/embed.js +29 -0
- package/dist/lib/vega/engine.d.ts +10 -0
- package/dist/lib/vega/engine.js +6 -0
- package/dist/lib/vega/formatters.d.ts +125 -0
- package/dist/lib/vega/formatters.js +277 -0
- package/dist/lib/vega/index.d.ts +11 -0
- package/dist/lib/vega/load.d.ts +13 -0
- package/dist/lib/vega/load.js +21 -0
- package/dist/lib/vega/time.d.ts +45 -0
- package/dist/lib/vega/time.js +105 -0
- package/dist/lib/vega/tokens.d.ts +73 -0
- package/dist/lib/vega/tokens.js +137 -0
- package/dist/lib/vega/tooltip.d.ts +45 -0
- package/dist/lib/vega/tooltip.js +124 -0
- package/dist/lib/vega/useArcVega.d.ts +43 -0
- package/dist/lib/vega/useArcVega.js +121 -0
- package/package.json +60 -0
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { BuildSankeyDescriptionInput, DEFAULT_SANKEY_LABELS, DeriveSankeyStateInput, HAIRLINE_PX, LayoutSankeyOptions, NormalizeSankeyOptions, RIBBON_SAMPLES, SANKEY_MAX_IDENTITY, SANKEY_MIN_FLOWS, SANKEY_MIN_STAGES, SankeyAlign, SankeyCardLabels, SankeyCardSize, SankeyCardState, SankeyCardStatus, SankeyColor, SankeyHighlights, SankeyInsightSegment, SankeyLayout, SankeyLink, SankeyLinkInfo, SankeyNode, SankeyNodeInfo, SankeyNodeLabels, SankeyNodeOrder, SankeyNodeRow, SankeyRejectedLink, SankeyRibbonRow, SankeySummary, SankeyTextFormatters, SankeyTone, buildSankeyChartDescription, buildSankeyDescription, buildSankeyInsight, createSankeyFormatters, deriveSankeyHighlights, deriveSankeyState, layoutSankey, normalizeSankey, resolveSankeyLabels, sankeyInsightToText } from "./SankeyCard.model.js";
|
|
2
|
+
import { SankeyCard, SankeyCardProps } from "./SankeyCard.js";
|
|
3
|
+
import { SANKEY_HOVER_PARAM, SANKEY_NODES_DATASET, SANKEY_NODE_HOVER_PARAM, SANKEY_RIBBONS_DATASET, SANKEY_SELECTED_PARAM, SankeyPlotSpecOptions, buildSankeyPlotSpec } from "./SankeyCard.chart.js";
|
|
4
|
+
export { type BuildSankeyDescriptionInput, DEFAULT_SANKEY_LABELS, type DeriveSankeyStateInput, HAIRLINE_PX, type LayoutSankeyOptions, type NormalizeSankeyOptions, RIBBON_SAMPLES, SANKEY_HOVER_PARAM, SANKEY_MAX_IDENTITY, SANKEY_MIN_FLOWS, SANKEY_MIN_STAGES, SANKEY_NODES_DATASET, SANKEY_NODE_HOVER_PARAM, SANKEY_RIBBONS_DATASET, SANKEY_SELECTED_PARAM, type SankeyAlign, SankeyCard, type SankeyCardLabels, type SankeyCardProps, type SankeyCardSize, type SankeyCardState, type SankeyCardStatus, type SankeyColor, type SankeyHighlights, type SankeyInsightSegment, type SankeyLayout, type SankeyLink, type SankeyLinkInfo, type SankeyNode, type SankeyNodeInfo, type SankeyNodeLabels, type SankeyNodeOrder, type SankeyNodeRow, type SankeyPlotSpecOptions, type SankeyRejectedLink, type SankeyRibbonRow, type SankeySummary, type SankeyTextFormatters, type SankeyTone, buildSankeyChartDescription, buildSankeyDescription, buildSankeyInsight, buildSankeyPlotSpec, createSankeyFormatters, deriveSankeyHighlights, deriveSankeyState, layoutSankey, normalizeSankey, resolveSankeyLabels, sankeyInsightToText };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { SANKEY_HOVER_PARAM, SANKEY_NODES_DATASET, SANKEY_NODE_HOVER_PARAM, SANKEY_RIBBONS_DATASET, SANKEY_SELECTED_PARAM, buildSankeyPlotSpec } from "./SankeyCard.chart.js";
|
|
2
|
+
import { DEFAULT_SANKEY_LABELS, HAIRLINE_PX, RIBBON_SAMPLES, SANKEY_MAX_IDENTITY, SANKEY_MIN_FLOWS, SANKEY_MIN_STAGES, buildSankeyChartDescription, buildSankeyDescription, buildSankeyInsight, createSankeyFormatters, deriveSankeyHighlights, deriveSankeyState, layoutSankey, normalizeSankey, resolveSankeyLabels, sankeyInsightToText } from "./SankeyCard.model.js";
|
|
3
|
+
import { SankeyCard } from "./SankeyCard.js";
|
|
4
|
+
export { DEFAULT_SANKEY_LABELS, HAIRLINE_PX, RIBBON_SAMPLES, SANKEY_HOVER_PARAM, SANKEY_MAX_IDENTITY, SANKEY_MIN_FLOWS, SANKEY_MIN_STAGES, SANKEY_NODES_DATASET, SANKEY_NODE_HOVER_PARAM, SANKEY_RIBBONS_DATASET, SANKEY_SELECTED_PARAM, SankeyCard, buildSankeyChartDescription, buildSankeyDescription, buildSankeyInsight, buildSankeyPlotSpec, createSankeyFormatters, deriveSankeyHighlights, deriveSankeyState, layoutSankey, normalizeSankey, resolveSankeyLabels, sankeyInsightToText };
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { ChartTokens } from "../../lib/vega/tokens.js";
|
|
2
|
+
import { TopLevelSpec } from "vega-lite";
|
|
3
|
+
//#region src/components/StatusCard/StatusCard.chart.d.ts
|
|
4
|
+
/** The cells the strip draws — `StatusStripRow[]`, bucketed or exact. */
|
|
5
|
+
declare const STATUS_TABLE_DATASET = "table";
|
|
6
|
+
/** One row `{ start, end }` — the x domain and the track behind the cells. */
|
|
7
|
+
declare const STATUS_WINDOW_DATASET = "window";
|
|
8
|
+
/** Hover selection, keyed on a cell's true start. */
|
|
9
|
+
declare const STATUS_HOVER_PARAM = "hover";
|
|
10
|
+
/** The x domain's ends, read from the `window` dataset so they are in the first parse. */
|
|
11
|
+
declare const STATUS_MIN_PARAM = "status_x_min";
|
|
12
|
+
declare const STATUS_MAX_PARAM = "status_x_max";
|
|
13
|
+
/** Responsive x tick values, recomputed by Vega when the domain or the width changes. */
|
|
14
|
+
declare const STATUS_X_TICKS_PARAM = "status_x_ticks";
|
|
15
|
+
/**
|
|
16
|
+
* The narrowest cell that still reads as a block rather than a hairline. It is
|
|
17
|
+
* what stops `resolution="auto"` from bucketing finer than the frame can
|
|
18
|
+
* draw — the reason a 40-second outage in a 90-day window is visible at all.
|
|
19
|
+
*/
|
|
20
|
+
declare const STATUS_MIN_CELL_PX = 6;
|
|
21
|
+
/**
|
|
22
|
+
* The gap between touching cells, as a SHARE of the cell pitch — the
|
|
23
|
+
* reference uptime bars space theirs proportionally (GitHub Status, measured
|
|
24
|
+
* 2026-09-10: an 8.1px cell with a 5.4px gap), which is what makes a strip
|
|
25
|
+
* read as a row of days rather than as a barcode. A fixed pixel gap looks
|
|
26
|
+
* right at one cell width and wrong at every other.
|
|
27
|
+
*/
|
|
28
|
+
declare const STATUS_CELL_GAP_RATIO = 0.28;
|
|
29
|
+
/** …clamped, so a wide cell keeps its gap modest and a narrow one keeps its fill. */
|
|
30
|
+
declare const STATUS_CELL_GAP_MIN_PX = 1;
|
|
31
|
+
declare const STATUS_CELL_GAP_MAX_PX = 4;
|
|
32
|
+
/** Room the x-axis label row takes under the strip. */
|
|
33
|
+
declare const STATUS_AXIS_ROW_PX = 18;
|
|
34
|
+
interface StatusTimelineSpecOptions {
|
|
35
|
+
/** Total plot height in pixels — the strip band plus, with `axis`, the label row. */
|
|
36
|
+
height: number;
|
|
37
|
+
/** Draw the x axis. `false` leaves a bare strip; the window still rides the description and the table. */
|
|
38
|
+
axis: boolean;
|
|
39
|
+
/** Wire the hover selection and the tooltip channel. */
|
|
40
|
+
tooltip: boolean;
|
|
41
|
+
/** `arcTime` grammar for the axis tick labels (`day-short@en-US@Asia/Bangkok`). */
|
|
42
|
+
axisTimeFormat: string;
|
|
43
|
+
locale?: string;
|
|
44
|
+
timeZone?: string;
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Builds the timeline: a muted track across the whole window (so a partly
|
|
48
|
+
* unmonitored window still shows its extent), the cells painted with their own
|
|
49
|
+
* level's hue, a quiet time axis whose labels are chosen for the measured
|
|
50
|
+
* width, and a hover outline in the text colour — an outline rather than an
|
|
51
|
+
* opacity change, because dimming a status hue costs the contrast the level
|
|
52
|
+
* depends on.
|
|
53
|
+
*
|
|
54
|
+
* The band fills the plot area (`y2: height`) instead of a fixed pixel height,
|
|
55
|
+
* so `autosize: fit` can hand the axis exactly the room its labels need and
|
|
56
|
+
* the strip keeps the rest — no guessed gap under the cells.
|
|
57
|
+
*/
|
|
58
|
+
declare function buildStatusTimelineSpec(options: StatusTimelineSpecOptions, tokens: ChartTokens): TopLevelSpec;
|
|
59
|
+
//#endregion
|
|
60
|
+
export { STATUS_AXIS_ROW_PX, STATUS_CELL_GAP_MAX_PX, STATUS_CELL_GAP_MIN_PX, STATUS_CELL_GAP_RATIO, STATUS_HOVER_PARAM, STATUS_MAX_PARAM, STATUS_MIN_CELL_PX, STATUS_MIN_PARAM, STATUS_TABLE_DATASET, STATUS_WINDOW_DATASET, STATUS_X_TICKS_PARAM, StatusTimelineSpecOptions, buildStatusTimelineSpec };
|
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
import { AXIS_LABEL_LIMIT_EXPR } from "../../lib/vega/axisTicks.js";
|
|
2
|
+
import { arcVegaConfig } from "../../lib/vega/config.js";
|
|
3
|
+
//#region src/components/StatusCard/StatusCard.chart.ts
|
|
4
|
+
/** The cells the strip draws — `StatusStripRow[]`, bucketed or exact. */
|
|
5
|
+
const STATUS_TABLE_DATASET = "table";
|
|
6
|
+
/** One row `{ start, end }` — the x domain and the track behind the cells. */
|
|
7
|
+
const STATUS_WINDOW_DATASET = "window";
|
|
8
|
+
/** Hover selection, keyed on a cell's true start. */
|
|
9
|
+
const STATUS_HOVER_PARAM = "hover";
|
|
10
|
+
/** The x domain's ends, read from the `window` dataset so they are in the first parse. */
|
|
11
|
+
const STATUS_MIN_PARAM = "status_x_min";
|
|
12
|
+
const STATUS_MAX_PARAM = "status_x_max";
|
|
13
|
+
/** Responsive x tick values, recomputed by Vega when the domain or the width changes. */
|
|
14
|
+
const STATUS_X_TICKS_PARAM = "status_x_ticks";
|
|
15
|
+
/**
|
|
16
|
+
* The narrowest cell that still reads as a block rather than a hairline. It is
|
|
17
|
+
* what stops `resolution="auto"` from bucketing finer than the frame can
|
|
18
|
+
* draw — the reason a 40-second outage in a 90-day window is visible at all.
|
|
19
|
+
*/
|
|
20
|
+
const STATUS_MIN_CELL_PX = 6;
|
|
21
|
+
/**
|
|
22
|
+
* The gap between touching cells, as a SHARE of the cell pitch — the
|
|
23
|
+
* reference uptime bars space theirs proportionally (GitHub Status, measured
|
|
24
|
+
* 2026-09-10: an 8.1px cell with a 5.4px gap), which is what makes a strip
|
|
25
|
+
* read as a row of days rather than as a barcode. A fixed pixel gap looks
|
|
26
|
+
* right at one cell width and wrong at every other.
|
|
27
|
+
*/
|
|
28
|
+
const STATUS_CELL_GAP_RATIO = .28;
|
|
29
|
+
/** …clamped, so a wide cell keeps its gap modest and a narrow one keeps its fill. */
|
|
30
|
+
const STATUS_CELL_GAP_MIN_PX = 1;
|
|
31
|
+
const STATUS_CELL_GAP_MAX_PX = 4;
|
|
32
|
+
/** Room the x-axis label row takes under the strip. */
|
|
33
|
+
const STATUS_AXIS_ROW_PX = 18;
|
|
34
|
+
const CELL_RADIUS = 2;
|
|
35
|
+
const PLOT_PADDING_PX = 1;
|
|
36
|
+
/**
|
|
37
|
+
* Builds the timeline: a muted track across the whole window (so a partly
|
|
38
|
+
* unmonitored window still shows its extent), the cells painted with their own
|
|
39
|
+
* level's hue, a quiet time axis whose labels are chosen for the measured
|
|
40
|
+
* width, and a hover outline in the text colour — an outline rather than an
|
|
41
|
+
* opacity change, because dimming a status hue costs the contrast the level
|
|
42
|
+
* depends on.
|
|
43
|
+
*
|
|
44
|
+
* The band fills the plot area (`y2: height`) instead of a fixed pixel height,
|
|
45
|
+
* so `autosize: fit` can hand the axis exactly the room its labels need and
|
|
46
|
+
* the strip keeps the rest — no guessed gap under the cells.
|
|
47
|
+
*/
|
|
48
|
+
function buildStatusTimelineSpec(options, tokens) {
|
|
49
|
+
const { height, axis, tooltip, axisTimeFormat, locale, timeZone } = options;
|
|
50
|
+
const xScale = {
|
|
51
|
+
type: "time",
|
|
52
|
+
domain: { expr: `[${STATUS_MIN_PARAM}, ${STATUS_MAX_PARAM}]` },
|
|
53
|
+
nice: false
|
|
54
|
+
};
|
|
55
|
+
const axisArgs = `domain('x'), width, false, ${JSON.stringify(axisTimeFormat)}, 'time'`;
|
|
56
|
+
const band = {
|
|
57
|
+
y: {
|
|
58
|
+
datum: 0,
|
|
59
|
+
type: "quantitative",
|
|
60
|
+
scale: {
|
|
61
|
+
domain: [0, 1],
|
|
62
|
+
nice: false
|
|
63
|
+
},
|
|
64
|
+
axis: null
|
|
65
|
+
},
|
|
66
|
+
y2: { datum: 1 }
|
|
67
|
+
};
|
|
68
|
+
const xAxis = axis ? {
|
|
69
|
+
title: null,
|
|
70
|
+
orient: "bottom",
|
|
71
|
+
domain: false,
|
|
72
|
+
ticks: false,
|
|
73
|
+
grid: false,
|
|
74
|
+
values: { expr: STATUS_X_TICKS_PARAM },
|
|
75
|
+
labelAngle: 0,
|
|
76
|
+
labelAlign: { expr: `arcAxisLabelAlign(datum.value, ${axisArgs})` },
|
|
77
|
+
labelFlush: false,
|
|
78
|
+
labelOverlap: false,
|
|
79
|
+
labelLimit: { expr: AXIS_LABEL_LIMIT_EXPR },
|
|
80
|
+
labelPadding: 4,
|
|
81
|
+
format: axisTimeFormat,
|
|
82
|
+
formatType: "arcTime"
|
|
83
|
+
} : null;
|
|
84
|
+
const layers = [{
|
|
85
|
+
data: { name: STATUS_WINDOW_DATASET },
|
|
86
|
+
mark: {
|
|
87
|
+
type: "rect",
|
|
88
|
+
fill: tokens.muted,
|
|
89
|
+
cornerRadius: CELL_RADIUS,
|
|
90
|
+
aria: false
|
|
91
|
+
},
|
|
92
|
+
encoding: {
|
|
93
|
+
x: {
|
|
94
|
+
field: "start",
|
|
95
|
+
type: "temporal",
|
|
96
|
+
axis: xAxis,
|
|
97
|
+
scale: xScale
|
|
98
|
+
},
|
|
99
|
+
x2: { field: "end" },
|
|
100
|
+
...band
|
|
101
|
+
}
|
|
102
|
+
}, {
|
|
103
|
+
...tooltip ? { params: [{
|
|
104
|
+
name: STATUS_HOVER_PARAM,
|
|
105
|
+
select: {
|
|
106
|
+
type: "point",
|
|
107
|
+
on: "pointerover",
|
|
108
|
+
clear: "pointerout",
|
|
109
|
+
fields: ["from"]
|
|
110
|
+
}
|
|
111
|
+
}] } : {},
|
|
112
|
+
mark: {
|
|
113
|
+
type: "rect",
|
|
114
|
+
cornerRadius: CELL_RADIUS,
|
|
115
|
+
strokeWidth: 1,
|
|
116
|
+
aria: false
|
|
117
|
+
},
|
|
118
|
+
encoding: {
|
|
119
|
+
x: {
|
|
120
|
+
field: "start",
|
|
121
|
+
type: "temporal",
|
|
122
|
+
axis: xAxis,
|
|
123
|
+
scale: xScale
|
|
124
|
+
},
|
|
125
|
+
x2: { field: "end" },
|
|
126
|
+
...band,
|
|
127
|
+
fill: {
|
|
128
|
+
field: "c",
|
|
129
|
+
type: "nominal",
|
|
130
|
+
scale: null,
|
|
131
|
+
legend: null
|
|
132
|
+
},
|
|
133
|
+
...tooltip ? {
|
|
134
|
+
stroke: {
|
|
135
|
+
condition: {
|
|
136
|
+
param: STATUS_HOVER_PARAM,
|
|
137
|
+
empty: false,
|
|
138
|
+
value: tokens.foreground
|
|
139
|
+
},
|
|
140
|
+
value: null
|
|
141
|
+
},
|
|
142
|
+
tooltip: {
|
|
143
|
+
field: "level",
|
|
144
|
+
type: "nominal"
|
|
145
|
+
}
|
|
146
|
+
} : {}
|
|
147
|
+
}
|
|
148
|
+
}];
|
|
149
|
+
const params = [{
|
|
150
|
+
name: STATUS_MIN_PARAM,
|
|
151
|
+
expr: windowBound("start", 0)
|
|
152
|
+
}, {
|
|
153
|
+
name: STATUS_MAX_PARAM,
|
|
154
|
+
expr: windowBound("end", 1)
|
|
155
|
+
}];
|
|
156
|
+
if (axis) params.push({
|
|
157
|
+
name: STATUS_X_TICKS_PARAM,
|
|
158
|
+
expr: `arcAxisTicks(${axisArgs})`
|
|
159
|
+
});
|
|
160
|
+
return {
|
|
161
|
+
$schema: "https://vega.github.io/schema/vega-lite/v6.json",
|
|
162
|
+
width: 320,
|
|
163
|
+
height,
|
|
164
|
+
autosize: {
|
|
165
|
+
type: "fit",
|
|
166
|
+
contains: "padding"
|
|
167
|
+
},
|
|
168
|
+
padding: {
|
|
169
|
+
left: PLOT_PADDING_PX,
|
|
170
|
+
right: PLOT_PADDING_PX,
|
|
171
|
+
top: 0,
|
|
172
|
+
bottom: 0
|
|
173
|
+
},
|
|
174
|
+
background: "transparent",
|
|
175
|
+
data: { name: STATUS_TABLE_DATASET },
|
|
176
|
+
params,
|
|
177
|
+
layer: layers,
|
|
178
|
+
config: arcVegaConfig(tokens, {
|
|
179
|
+
locale,
|
|
180
|
+
timeZone
|
|
181
|
+
})
|
|
182
|
+
};
|
|
183
|
+
}
|
|
184
|
+
function windowBound(field, fallback) {
|
|
185
|
+
return `length(data('${STATUS_WINDOW_DATASET}')) ? data('${STATUS_WINDOW_DATASET}')[0].${field} : ${fallback}`;
|
|
186
|
+
}
|
|
187
|
+
//#endregion
|
|
188
|
+
export { STATUS_AXIS_ROW_PX, STATUS_CELL_GAP_MAX_PX, STATUS_CELL_GAP_MIN_PX, STATUS_CELL_GAP_RATIO, STATUS_HOVER_PARAM, STATUS_MAX_PARAM, STATUS_MIN_CELL_PX, STATUS_MIN_PARAM, STATUS_TABLE_DATASET, STATUS_WINDOW_DATASET, STATUS_X_TICKS_PARAM, buildStatusTimelineSpec };
|
|
@@ -0,0 +1,176 @@
|
|
|
1
|
+
import { ArcTimeGranularity } from "../../lib/vega/formatters.js";
|
|
2
|
+
import { StatusCardLabels, StatusCardSize, StatusCardStatus, StatusHeadline, StatusLevel, StatusPeriod, StatusResolution, StatusUptimeMode, StatusWindowInput } from "./StatusCard.model.js";
|
|
3
|
+
import { ReactNode } from "react";
|
|
4
|
+
import { BoxProps } from "@arcfusionz/arc-primitive-ui";
|
|
5
|
+
import { TopLevelSpec } from "vega-lite";
|
|
6
|
+
import { Result } from "vega-embed";
|
|
7
|
+
//#region src/components/StatusCard/StatusCard.d.ts
|
|
8
|
+
interface StatusCardBaseProps extends Omit<BoxProps, "children" | "padding" | "title"> {
|
|
9
|
+
/** The monitored thing's name — the tile's heading. Pass `name` too when this is not plain text. */
|
|
10
|
+
label: ReactNode;
|
|
11
|
+
/** Plain-text name used in the generated descriptions, the timeline's `aria-label` and every control's accessible name. Required when `label` is not a string. */
|
|
12
|
+
name?: string;
|
|
13
|
+
/** What is being monitored and how, shown in a tooltip behind an info control beside the label and exposed to assistive technology as the control's description. */
|
|
14
|
+
hint?: string;
|
|
15
|
+
/**
|
|
16
|
+
* The state right now. Appended to `history` as a still-running period — from
|
|
17
|
+
* `since` when known, otherwise from wherever the history stops — so the
|
|
18
|
+
* strip's right-hand edge always agrees with the headline. Omit it and the
|
|
19
|
+
* state is read off the end of the history; pass `null` with no history to
|
|
20
|
+
* render the empty (or no-match) state.
|
|
21
|
+
*/
|
|
22
|
+
level?: StatusLevel | null;
|
|
23
|
+
/**
|
|
24
|
+
* When the current state began. Gives the duration under the headline, and
|
|
25
|
+
* is authoritative from that moment on: reported periods that overlap it are
|
|
26
|
+
* closed there, so a fresh reading can never be contradicted by a stale
|
|
27
|
+
* report. Without it the duration is read off the history.
|
|
28
|
+
*/
|
|
29
|
+
since?: Date | string | number | null;
|
|
30
|
+
/**
|
|
31
|
+
* The reported states, in any order, as `{ level, start, end?, label? }`.
|
|
32
|
+
* Omit `end` for a period that was still running when it was reported — it
|
|
33
|
+
* runs to the next report or to the window's edge. Date-only ISO strings are
|
|
34
|
+
* calendar dates in the card's `timeZone`. Holes between reports become
|
|
35
|
+
* explicit unmonitored (`unknown`) time rather than blanks, overlaps resolve
|
|
36
|
+
* in favour of the later report, and neighbours at the same level merge.
|
|
37
|
+
* Pass a stable array — the run is re-derived when it changes.
|
|
38
|
+
*/
|
|
39
|
+
history?: readonly StatusPeriod[];
|
|
40
|
+
/**
|
|
41
|
+
* The window the strip covers and availability is measured over, as
|
|
42
|
+
* `{ start, end }`. A date-only `end` is an INCLUSIVE calendar day
|
|
43
|
+
* (`"2026-08-11"` – `"2026-09-09"` is 30 whole days), and the window is
|
|
44
|
+
* clipped at `updatedAt` when the reading lands inside it — availability is
|
|
45
|
+
* never reported for time that has not happened. Defaults to the span the
|
|
46
|
+
* history covers, extended to `updatedAt`.
|
|
47
|
+
*/
|
|
48
|
+
window?: StatusWindowInput;
|
|
49
|
+
/**
|
|
50
|
+
* The availability target as a ratio (`0.999` for three nines). Draws the
|
|
51
|
+
* verdict chip, gives the availability badge its polarity, and turns the
|
|
52
|
+
* error budget into time — allowed, spent, left. Without it the card
|
|
53
|
+
* reports availability as a fact and reaches no verdict.
|
|
54
|
+
*/
|
|
55
|
+
uptimeTarget?: number | null;
|
|
56
|
+
/**
|
|
57
|
+
* What availability is a share OF. `monitored` (default) leaves planned
|
|
58
|
+
* maintenance and unmonitored time out of the denominator and reports how
|
|
59
|
+
* much it excluded; `window` divides by the whole window, so both count
|
|
60
|
+
* against the number.
|
|
61
|
+
*/
|
|
62
|
+
uptimeMode?: StatusUptimeMode;
|
|
63
|
+
/**
|
|
64
|
+
* Number format for availability and the target, everywhere they are
|
|
65
|
+
* rendered: `percent[:digits]`, `number[:digits]`. Default `percent:2` —
|
|
66
|
+
* two decimals is where an SLA lives.
|
|
67
|
+
*/
|
|
68
|
+
uptimeFormat?: string;
|
|
69
|
+
/** Custom formatter for availability. Takes precedence over `uptimeFormat` everywhere the share is rendered. */
|
|
70
|
+
formatUptime?: (value: number) => string;
|
|
71
|
+
/**
|
|
72
|
+
* What the big thing is: `level` (default) — the state as a word, the answer
|
|
73
|
+
* an operational reader scans for, with availability in the badge beside it;
|
|
74
|
+
* or `uptime` — the availability percentage, with the state as a chip
|
|
75
|
+
* beneath and the verdict in the badge. Stamped as `data-headline`.
|
|
76
|
+
*/
|
|
77
|
+
headline?: StatusHeadline;
|
|
78
|
+
/**
|
|
79
|
+
* How the strip divides the window. `auto` (default) buckets it to the
|
|
80
|
+
* finest step whose cells the measured frame can draw, each cell painted the
|
|
81
|
+
* worst level inside it — so no incident is ever a sub-pixel sliver.
|
|
82
|
+
* `exact` draws true segment widths. The named steps force a granularity.
|
|
83
|
+
* Every figure the card reports comes from the exact segments whatever this
|
|
84
|
+
* says. The resolved granularity is stamped as `data-resolution`.
|
|
85
|
+
*
|
|
86
|
+
* A named step is honoured literally, even where its cells come out under a
|
|
87
|
+
* pixel wide — `"hour"` over a month is seven hundred of them. Only `auto`
|
|
88
|
+
* is bounded by the frame.
|
|
89
|
+
*/
|
|
90
|
+
resolution?: StatusResolution;
|
|
91
|
+
/**
|
|
92
|
+
* Add a Vega tick axis under the strip, with interior dates. Default
|
|
93
|
+
* `false`: the caption row's two anchors already date both ends of the
|
|
94
|
+
* strip in one row, which is all a tile has room for. Turn it on for a
|
|
95
|
+
* full-width row where interior ticks earn their line.
|
|
96
|
+
*/
|
|
97
|
+
axis?: boolean;
|
|
98
|
+
/**
|
|
99
|
+
* Add a key row under the caption — every level present, with its shape and
|
|
100
|
+
* its word, and the strip's declared granularity. Default `false`: the
|
|
101
|
+
* green / amber / red ladder is the universal convention (GitHub Status and
|
|
102
|
+
* Statuspage ship no key beside their bars), and every level is named in
|
|
103
|
+
* the cell's tooltip, the details popover and the generated description. A
|
|
104
|
+
* surface where planned maintenance and monitoring gaps are common — whose
|
|
105
|
+
* blue and grey are NOT conventional — should turn it on.
|
|
106
|
+
*/
|
|
107
|
+
legend?: boolean;
|
|
108
|
+
/** The takeaway in a sentence, rendered beside the AI mark under the strip. Wrap values in `<strong>` to set them in bold. */
|
|
109
|
+
insight?: ReactNode;
|
|
110
|
+
/** The transport's status. `loading` with data already present is a refresh: the previous render stays under the veil. Default `ready`. */
|
|
111
|
+
status?: StatusCardStatus;
|
|
112
|
+
/** The consumer's filter is active — a missing state then reads as no-match rather than empty, with a clear-filters action when `onClearFilters` is set. */
|
|
113
|
+
filtered?: boolean;
|
|
114
|
+
/** The data is older than the product's freshness rule (TanStack Query's `isStale`). Shows a badge and stamps `data-stale`. */
|
|
115
|
+
stale?: boolean;
|
|
116
|
+
/**
|
|
117
|
+
* When the data was last true. Rendered as an "as of" line (see
|
|
118
|
+
* `updatedAtFormat`), included in the description, the right-hand edge every
|
|
119
|
+
* duration is measured to, and the instant an explicit `window` is clipped
|
|
120
|
+
* at — so nothing here depends on the wall clock and baselines never drift.
|
|
121
|
+
*/
|
|
122
|
+
updatedAt?: Date | string | number;
|
|
123
|
+
/**
|
|
124
|
+
* How `updatedAt` is written, as a time-grammar granularity — `datetime`
|
|
125
|
+
* (default, `Sep 9, 2026, 04:00 PM`), `day`, `time`, `month`, `year` — or a
|
|
126
|
+
* formatter for a custom form. Applies to the as-of line and the description
|
|
127
|
+
* alike, in the card's `locale` and `timeZone`.
|
|
128
|
+
*/
|
|
129
|
+
updatedAtFormat?: ArcTimeGranularity | ((date: Date) => string);
|
|
130
|
+
/** Recovery action for the error state; renders a retry button when set. */
|
|
131
|
+
onRetry?: () => void;
|
|
132
|
+
/** Recovery action for the no-match state; renders a clear-filters button when set. */
|
|
133
|
+
onClearFilters?: () => void;
|
|
134
|
+
/** Density: `sm` for dense wallboards, `md` (default), `lg` for a hero service. Scales type, padding, the strip's thickness and the plot height. */
|
|
135
|
+
size?: StatusCardSize;
|
|
136
|
+
/** Heading level of the label for the document outline. Default 3 — tiles usually sit under a page's h2. */
|
|
137
|
+
titleLevel?: 2 | 3 | 4 | 5 | 6;
|
|
138
|
+
/** BCP 47 locale for every number and date. Defaults to the runtime's. Thai products on the Gregorian calendar pass `th-TH-u-ca-gregory`. */
|
|
139
|
+
locale?: string;
|
|
140
|
+
/** IANA time zone for the window's calendar dates, the strip's day boundaries and every rendered instant. Defaults to the runtime's — pass it for deterministic output and single-business-zone reporting. */
|
|
141
|
+
timeZone?: string;
|
|
142
|
+
/** Overrides for every rendered or announced string, including the five level names. */
|
|
143
|
+
labels?: Partial<StatusCardLabels>;
|
|
144
|
+
/** Replaces the generated accessible description of the whole card (the figure's `aria-describedby` text). */
|
|
145
|
+
description?: string;
|
|
146
|
+
/** Trailing header slot — a ghost `Button` or `Menu` for drill-through, runbooks, or muting. */
|
|
147
|
+
action?: ReactNode;
|
|
148
|
+
/** Open the details popover on first render, anchored to the card. */
|
|
149
|
+
defaultTableOpen?: boolean;
|
|
150
|
+
/** Hide the header info button for the details popover. Only when another surface exposes the same figures and incidents to keyboard and screen-reader users. */
|
|
151
|
+
hideTableToggle?: boolean;
|
|
152
|
+
/** Called with vega-embed's result once the timeline mounts — for `view` access in advanced compositions. */
|
|
153
|
+
onEmbed?: (result: Result) => void;
|
|
154
|
+
/** Escape hatch: transform the timeline spec before it renders. Voids the token and accessibility guarantees for whatever it changes. */
|
|
155
|
+
patchSpec?: (spec: TopLevelSpec) => TopLevelSpec;
|
|
156
|
+
}
|
|
157
|
+
type StatusCardLabelProps = {
|
|
158
|
+
label: string;
|
|
159
|
+
name?: string;
|
|
160
|
+
} | {
|
|
161
|
+
label: ReactNode;
|
|
162
|
+
name: string;
|
|
163
|
+
};
|
|
164
|
+
type StatusCardProps = StatusCardBaseProps & StatusCardLabelProps;
|
|
165
|
+
/**
|
|
166
|
+
* An operational status tile for dashboard grids and status pages: the state
|
|
167
|
+
* right now as a word, how long it has held, availability over the window
|
|
168
|
+
* against its target, the incidents behind that number, and the error budget
|
|
169
|
+
* they leave — on a state timeline (each cell painted the worst level inside
|
|
170
|
+
* it, so no outage can vanish) with every loading, empty, error and stale
|
|
171
|
+
* state, layout-stable, with a generated text equivalent and both a details
|
|
172
|
+
* table and an incident list in an info popover.
|
|
173
|
+
*/
|
|
174
|
+
declare const StatusCard: import("react").ForwardRefExoticComponent<StatusCardProps & import("react").RefAttributes<HTMLElement>>;
|
|
175
|
+
//#endregion
|
|
176
|
+
export { StatusCard, StatusCardBaseProps, StatusCardLabelProps, StatusCardProps };
|