@icen.ai/ui 0.11.0 → 0.11.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/README.md +2 -2
- package/dist/base.css +11 -6
- package/dist/behaviors/ai-branch.mjs +13 -0
- package/dist/behaviors/ai-chat.mjs +13 -0
- package/dist/behaviors/ai-composer.mjs +13 -0
- package/dist/behaviors/ai-core.mjs +13 -0
- package/dist/behaviors/ai-diff.mjs +13 -0
- package/dist/behaviors/ai-feedback.mjs +13 -0
- package/dist/behaviors/ai-panel.mjs +13 -0
- package/dist/behaviors/ai-provider.mjs +13 -0
- package/dist/behaviors/ai-threads.mjs +13 -0
- package/dist/behaviors/ai-tool.mjs +242 -0
- package/dist/behaviors/ai-tools.mjs +242 -0
- package/dist/behaviors/autocomplete.mjs +13 -0
- package/dist/behaviors/back-top.mjs +13 -0
- package/dist/behaviors/carousel.mjs +13 -0
- package/dist/behaviors/cascader.mjs +13 -0
- package/dist/behaviors/charts.d.mts +12 -1
- package/dist/behaviors/charts.mjs +242 -0
- package/dist/behaviors/code-block.mjs +13 -0
- package/dist/behaviors/context-menu.mjs +13 -0
- package/dist/behaviors/controls.mjs +13 -0
- package/dist/behaviors/copy.mjs +13 -0
- package/dist/behaviors/datatable.mjs +13 -0
- package/dist/behaviors/date-picker.mjs +13 -0
- package/dist/behaviors/form-validate.mjs +13 -0
- package/dist/behaviors/i18n.d.mts +13 -0
- package/dist/behaviors/i18n.mjs +26 -0
- package/dist/behaviors/input.mjs +13 -0
- package/dist/behaviors/kb-access.mjs +13 -0
- package/dist/behaviors/kb-acl.mjs +13 -0
- package/dist/behaviors/kb-answer.mjs +242 -0
- package/dist/behaviors/kb-audit.mjs +13 -0
- package/dist/behaviors/kb-canvas.mjs +13 -0
- package/dist/behaviors/kb-chain.mjs +13 -0
- package/dist/behaviors/kb-checkpoint.mjs +13 -0
- package/dist/behaviors/kb-chunks.mjs +13 -0
- package/dist/behaviors/kb-citation.mjs +13 -0
- package/dist/behaviors/kb-clarify.mjs +13 -0
- package/dist/behaviors/kb-conflict.mjs +13 -0
- package/dist/behaviors/kb-connector.mjs +13 -0
- package/dist/behaviors/kb-core.mjs +13 -0
- package/dist/behaviors/kb-eval.mjs +13 -0
- package/dist/behaviors/kb-explain.mjs +13 -0
- package/dist/behaviors/kb-filter.mjs +13 -0
- package/dist/behaviors/kb-gap.mjs +13 -0
- package/dist/behaviors/kb-hittest.mjs +13 -0
- package/dist/behaviors/kb-metadata.mjs +13 -0
- package/dist/behaviors/kb-passage.mjs +13 -0
- package/dist/behaviors/kb-pipeline.mjs +13 -0
- package/dist/behaviors/kb-qa.mjs +13 -0
- package/dist/behaviors/kb-rerank.mjs +13 -0
- package/dist/behaviors/kb-retrieval.mjs +13 -0
- package/dist/behaviors/kb-review.mjs +13 -0
- package/dist/behaviors/kb-sandbox.mjs +13 -0
- package/dist/behaviors/kb-segment.mjs +13 -0
- package/dist/behaviors/kb-select.mjs +13 -0
- package/dist/behaviors/kb-sources.mjs +13 -0
- package/dist/behaviors/kb-sql.mjs +13 -0
- package/dist/behaviors/kb-trace.mjs +13 -0
- package/dist/behaviors/kb-visibility.mjs +13 -0
- package/dist/behaviors/kb-who-can.mjs +13 -0
- package/dist/behaviors/mentions.mjs +13 -0
- package/dist/behaviors/modal.mjs +13 -0
- package/dist/behaviors/motion.d.mts +16 -0
- package/dist/behaviors/motion.mjs +39 -0
- package/dist/behaviors/notification.mjs +13 -0
- package/dist/behaviors/panel.mjs +13 -0
- package/dist/behaviors/select.mjs +13 -0
- package/dist/behaviors/suggestions.mjs +13 -0
- package/dist/behaviors/tag-input.mjs +13 -0
- package/dist/behaviors/theme-switcher.mjs +13 -0
- package/dist/behaviors/toast.mjs +13 -0
- package/dist/behaviors/tree-select.mjs +13 -0
- package/dist/behaviors/upload.mjs +13 -0
- package/dist/components/charts.css +29 -0
- package/dist/index.d.mts +1 -1
- package/dist/index.mjs +257 -1
- package/dist/react.mjs +242 -0
- package/dist/registry.json +3 -1
- package/dist/tokens/design.css +15 -9
- package/dist/tokens/dtcg.json +3594 -738
- package/dist/tokens/figma.variables.json +1705 -157
- package/dist/tokens/motion.css +51 -0
- package/dist/tokens/pixel.css +7 -0
- package/dist/tokens/tokens-studio.json +3007 -679
- package/dist/tokens/typography.css +33 -0
- package/dist/tokens.css +106 -9
- package/dist/ui.css +146 -15
- package/dist/vue.mjs +242 -0
- package/docs/spec/charts-scale-a11y.md +115 -0
- package/docs/spec/motion-typography.md +105 -0
- package/package.json +2 -1
|
@@ -299,6 +299,19 @@ var ICEN_LOCALE_ZH_CN = {
|
|
|
299
299
|
"charts.noData": "\u6682\u65E0\u6570\u636E",
|
|
300
300
|
"charts.resetZoom": "\u91CD\u7F6E\u7F29\u653E",
|
|
301
301
|
"charts.sampled": "\u5DF2\u62BD\u6837 {p0}\u2192{p1} \u70B9",
|
|
302
|
+
"charts.a11y.keyboardHint": "\u65B9\u5411\u952E\u9010\u70B9\u6D4F\u89C8\uFF0CHome/End \u8DF3\u9996\u5C3E\uFF0CEsc \u91CD\u7F6E\u7F29\u653E",
|
|
303
|
+
"charts.a11y.max": "\u6700\u5927 {p0}\uFF08{p1}\uFF09",
|
|
304
|
+
"charts.a11y.min": "\u6700\u5C0F {p0}\uFF08{p1}\uFF09",
|
|
305
|
+
"charts.a11y.point": "{p0}\uFF1A{p1}\uFF0C\u7B2C {p2}/{p3} \u70B9",
|
|
306
|
+
"charts.a11y.pointSeries": "{p0} \xB7 {p1}\uFF1A{p2}\uFF0C\u7B2C {p3}/{p4} \u70B9",
|
|
307
|
+
"charts.a11y.range": "\u7C7B\u76EE {p0} \u81F3 {p1}",
|
|
308
|
+
"charts.a11y.scatterRange": "x \u8303\u56F4 {p0}\u2013{p1}\uFF0Cy \u8303\u56F4 {p2}\u2013{p3}",
|
|
309
|
+
"charts.a11y.seriesCount": "{p0} \u4E2A\u7CFB\u5217",
|
|
310
|
+
"charts.a11y.tableCaption": "{p0} \u6570\u636E\u8868",
|
|
311
|
+
"charts.a11y.trend": "\u9996\u7CFB\u5217\u8D8B\u52BF{p0}",
|
|
312
|
+
"charts.a11y.trendDown": "\u4E0B\u964D",
|
|
313
|
+
"charts.a11y.trendFlat": "\u6301\u5E73",
|
|
314
|
+
"charts.a11y.trendUp": "\u4E0A\u5347",
|
|
302
315
|
"charts.type.area": "\u9762\u79EF\u56FE",
|
|
303
316
|
"charts.type.donut": "\u73AF\u5F62\u56FE",
|
|
304
317
|
"charts.type.gauge": "\u4EEA\u8868\u76D8",
|
|
@@ -2191,6 +2204,14 @@ function normalizeChartSpec(raw) {
|
|
|
2191
2204
|
}
|
|
2192
2205
|
if (s.zoom === "x" || s.zoom === "brush") spec.zoom = s.zoom;
|
|
2193
2206
|
if (typeof s.loading === "boolean") spec.loading = s.loading;
|
|
2207
|
+
if (s.a11y && typeof s.a11y === "object") {
|
|
2208
|
+
const a = s.a11y;
|
|
2209
|
+
const a11y = {};
|
|
2210
|
+
if (typeof a.summary === "boolean") a11y.summary = a.summary;
|
|
2211
|
+
if (typeof a.table === "boolean") a11y.table = a.table;
|
|
2212
|
+
if (typeof a.keyboard === "boolean") a11y.keyboard = a.keyboard;
|
|
2213
|
+
if (Object.keys(a11y).length > 0) spec.a11y = a11y;
|
|
2214
|
+
}
|
|
2194
2215
|
if (Array.isArray(s.marks)) {
|
|
2195
2216
|
const marks = [];
|
|
2196
2217
|
for (const raw2 of s.marks) {
|
|
@@ -2546,6 +2567,81 @@ function paintVBarChartMarks(root, view, spec, marks, formatValue, warned) {
|
|
|
2546
2567
|
function chartAriaLabel(title, typeName) {
|
|
2547
2568
|
return title ? `${typeName}\uFF1A${title}` : typeName;
|
|
2548
2569
|
}
|
|
2570
|
+
function summarizeChart(view, type, fmt2) {
|
|
2571
|
+
const series = view.series && view.series.length > 0 ? view.series : [{ name: "", values: view.values ?? [] }];
|
|
2572
|
+
const parts = [];
|
|
2573
|
+
if (series.length > 1) parts.push(t("charts.a11y.seriesCount", { p0: series.length }));
|
|
2574
|
+
if (type === "scatter") {
|
|
2575
|
+
const pts = view.points ?? [];
|
|
2576
|
+
if (pts.length > 0) {
|
|
2577
|
+
const xs = pts.map((p) => p.x);
|
|
2578
|
+
const ys = pts.map((p) => p.y);
|
|
2579
|
+
parts.push(t("charts.a11y.scatterRange", { p0: fmt2(Math.min(...xs)), p1: fmt2(Math.max(...xs)), p2: fmt2(Math.min(...ys)), p3: fmt2(Math.max(...ys)) }));
|
|
2580
|
+
}
|
|
2581
|
+
return parts.join("\uFF1B");
|
|
2582
|
+
}
|
|
2583
|
+
const labels = view.labels ?? [];
|
|
2584
|
+
if (labels.length > 1) parts.push(t("charts.a11y.range", { p0: labels[0], p1: labels[labels.length - 1] }));
|
|
2585
|
+
let min = Infinity;
|
|
2586
|
+
let max = -Infinity;
|
|
2587
|
+
let minAt = "";
|
|
2588
|
+
let maxAt = "";
|
|
2589
|
+
for (const s of series) {
|
|
2590
|
+
s.values.forEach((v, i) => {
|
|
2591
|
+
if (v < min) {
|
|
2592
|
+
min = v;
|
|
2593
|
+
minAt = labels[i] ?? String(i + 1);
|
|
2594
|
+
}
|
|
2595
|
+
if (v > max) {
|
|
2596
|
+
max = v;
|
|
2597
|
+
maxAt = labels[i] ?? String(i + 1);
|
|
2598
|
+
}
|
|
2599
|
+
});
|
|
2600
|
+
}
|
|
2601
|
+
if (Number.isFinite(min) && Number.isFinite(max)) {
|
|
2602
|
+
parts.push(t("charts.a11y.min", { p0: fmt2(min), p1: minAt }));
|
|
2603
|
+
parts.push(t("charts.a11y.max", { p0: fmt2(max), p1: maxAt }));
|
|
2604
|
+
}
|
|
2605
|
+
const first = series[0]?.values ?? [];
|
|
2606
|
+
if (first.length > 1) {
|
|
2607
|
+
const d = first[first.length - 1] - first[0];
|
|
2608
|
+
const key = Math.abs(d) < 1e-9 ? "charts.a11y.trendFlat" : d > 0 ? "charts.a11y.trendUp" : "charts.a11y.trendDown";
|
|
2609
|
+
parts.push(t("charts.a11y.trend", { p0: t(key) }));
|
|
2610
|
+
}
|
|
2611
|
+
return parts.join("\uFF1B");
|
|
2612
|
+
}
|
|
2613
|
+
function buildChartTable(view, spec, type, fmt2) {
|
|
2614
|
+
const table = document.createElement("table");
|
|
2615
|
+
table.className = "icen-chart-table";
|
|
2616
|
+
const caption = document.createElement("caption");
|
|
2617
|
+
caption.textContent = t("charts.a11y.tableCaption", { p0: spec.title ?? String(type) });
|
|
2618
|
+
table.appendChild(caption);
|
|
2619
|
+
const addRow = (target, cells, head) => {
|
|
2620
|
+
const tr = document.createElement("tr");
|
|
2621
|
+
for (const c of cells) {
|
|
2622
|
+
const cell = document.createElement(head ? "th" : "td");
|
|
2623
|
+
if (head) cell.scope = target.tagName === "THEAD" ? "col" : "row";
|
|
2624
|
+
cell.textContent = c;
|
|
2625
|
+
tr.appendChild(cell);
|
|
2626
|
+
}
|
|
2627
|
+
target.appendChild(tr);
|
|
2628
|
+
};
|
|
2629
|
+
const thead = table.createTHead();
|
|
2630
|
+
const tbody = table.createTBody();
|
|
2631
|
+
if (type === "scatter") {
|
|
2632
|
+
addRow(thead, ["x", "y"], true);
|
|
2633
|
+
for (const p of view.points ?? []) addRow(tbody, [fmt2(p.x), fmt2(p.y)], false);
|
|
2634
|
+
return table;
|
|
2635
|
+
}
|
|
2636
|
+
const series = view.series && view.series.length > 0 ? view.series : [{ name: "", values: view.values ?? [] }];
|
|
2637
|
+
const labels = view.labels ?? [];
|
|
2638
|
+
addRow(thead, ["", ...series.map((s, i) => s.name || String(i + 1))], true);
|
|
2639
|
+
const n = Math.max(labels.length, ...series.map((s) => s.values.length));
|
|
2640
|
+
for (let i = 0; i < n; i++) {
|
|
2641
|
+
addRow(tbody, [labels[i] ?? String(i + 1), ...series.map((s) => fmt2(s.values[i] ?? 0))], false);
|
|
2642
|
+
}
|
|
2643
|
+
return table;
|
|
2644
|
+
}
|
|
2549
2645
|
function svgDimsOf(svg) {
|
|
2550
2646
|
const vb = (svg.getAttribute("viewBox") ?? "").split(/\s+/).map(Number);
|
|
2551
2647
|
const w = Number.isFinite(vb[2]) && (vb[2] ?? 0) > 0 ? vb[2] : CHART_LINE_W;
|
|
@@ -2886,6 +2982,7 @@ function renderChart(el, raw) {
|
|
|
2886
2982
|
if (!isZoomableType(t2) || fullLength() < 2) return;
|
|
2887
2983
|
const plot = t2 === "vbar" ? root.querySelector(".icen-chart-vbar") : root.querySelector(".icen-chart-line svg");
|
|
2888
2984
|
if (!plot) return;
|
|
2985
|
+
plot.style.touchAction = current2.zoom === "x" ? "pan-y" : "none";
|
|
2889
2986
|
const on = (type, fn) => {
|
|
2890
2987
|
plot.addEventListener(type, fn);
|
|
2891
2988
|
};
|
|
@@ -2941,6 +3038,149 @@ function renderChart(el, raw) {
|
|
|
2941
3038
|
render();
|
|
2942
3039
|
});
|
|
2943
3040
|
};
|
|
3041
|
+
const KB_TYPES = /* @__PURE__ */ new Set(["line", "area", "vbar", "hbar", "scatter"]);
|
|
3042
|
+
const kbCursor = { si: 0, i: 0, active: false };
|
|
3043
|
+
let liveRegion = null;
|
|
3044
|
+
let a11ySeq = 0;
|
|
3045
|
+
const a11yOf = () => ({
|
|
3046
|
+
summary: current2.a11y?.summary !== false,
|
|
3047
|
+
table: current2.a11y?.table === true,
|
|
3048
|
+
keyboard: current2.a11y?.keyboard !== false
|
|
3049
|
+
});
|
|
3050
|
+
const seriesViewOf = (view) => view.series && view.series.length > 0 ? view.series : [{ name: "", values: view.values ?? [] }];
|
|
3051
|
+
const kbPointCount = (view) => typeOf() === "scatter" ? view.points?.length ?? 0 : Math.max(0, ...seriesViewOf(view).map((s) => s.values.length), view.labels?.length ?? 0);
|
|
3052
|
+
const kbCursorEl = () => {
|
|
3053
|
+
const t2 = typeOf();
|
|
3054
|
+
const view = viewOf();
|
|
3055
|
+
const series = seriesViewOf(view);
|
|
3056
|
+
const n = kbPointCount(view);
|
|
3057
|
+
if (n < 1) return null;
|
|
3058
|
+
const si = clampNum(kbCursor.si, 0, Math.max(0, series.length - 1));
|
|
3059
|
+
const i = clampNum(kbCursor.i, 0, n - 1);
|
|
3060
|
+
if (t2 === "line" || t2 === "area") {
|
|
3061
|
+
const svg = root.querySelector(".icen-chart-line svg");
|
|
3062
|
+
if (!svg) return null;
|
|
3063
|
+
const dots = svg.querySelectorAll("circle");
|
|
3064
|
+
let base = 0;
|
|
3065
|
+
for (let k = 0; k < si; k++) base += Math.min(series[k].values.length, n);
|
|
3066
|
+
return dots.item(base + i) ?? null;
|
|
3067
|
+
}
|
|
3068
|
+
if (t2 === "scatter") return root.querySelector(".icen-chart-scatter svg")?.querySelectorAll("circle").item(i) ?? null;
|
|
3069
|
+
if (t2 === "vbar") return root.querySelectorAll(".icen-chart-vbar-bar").item(series.length > 1 ? i * series.length + si : i) ?? null;
|
|
3070
|
+
if (t2 === "hbar") return root.querySelectorAll(".icen-chart-hbar-bar").item(i) ?? null;
|
|
3071
|
+
return null;
|
|
3072
|
+
};
|
|
3073
|
+
const announceKb = (text) => {
|
|
3074
|
+
if (!liveRegion || !liveRegion.isConnected) {
|
|
3075
|
+
liveRegion = document.createElement("div");
|
|
3076
|
+
liveRegion.className = "icen-chart-live";
|
|
3077
|
+
liveRegion.setAttribute("aria-live", "polite");
|
|
3078
|
+
root.appendChild(liveRegion);
|
|
3079
|
+
}
|
|
3080
|
+
liveRegion.textContent = "";
|
|
3081
|
+
liveRegion.textContent = text;
|
|
3082
|
+
};
|
|
3083
|
+
const applyKbCursor = () => {
|
|
3084
|
+
for (const el2 of root.querySelectorAll(".icen-chart-kb-focus")) el2.classList.remove("icen-chart-kb-focus");
|
|
3085
|
+
if (!kbCursor.active) return;
|
|
3086
|
+
kbCursorEl()?.classList.add("icen-chart-kb-focus");
|
|
3087
|
+
};
|
|
3088
|
+
const announceCursor = () => {
|
|
3089
|
+
const view = viewOf();
|
|
3090
|
+
const series = seriesViewOf(view);
|
|
3091
|
+
const n = kbPointCount(view);
|
|
3092
|
+
if (n < 1) return;
|
|
3093
|
+
const si = clampNum(kbCursor.si, 0, Math.max(0, series.length - 1));
|
|
3094
|
+
const i = clampNum(kbCursor.i, 0, Math.max(0, n - 1));
|
|
3095
|
+
const fmt2 = chartFormatValue(current2.format);
|
|
3096
|
+
if (typeOf() === "scatter") {
|
|
3097
|
+
const p = view.points?.[i];
|
|
3098
|
+
if (!p) return;
|
|
3099
|
+
announceKb(t("charts.a11y.point", { p0: `x ${fmt2(p.x)}`, p1: `y ${fmt2(p.y)}`, p2: i + 1, p3: n }));
|
|
3100
|
+
return;
|
|
3101
|
+
}
|
|
3102
|
+
const label = view.labels?.[i] ?? String(i + 1);
|
|
3103
|
+
const value = series[si]?.values[i] ?? 0;
|
|
3104
|
+
if (series.length > 1) announceKb(t("charts.a11y.pointSeries", { p0: series[si].name || String(si + 1), p1: label, p2: fmt2(value), p3: i + 1, p4: n }));
|
|
3105
|
+
else announceKb(t("charts.a11y.point", { p0: label, p1: fmt2(value), p2: i + 1, p3: n }));
|
|
3106
|
+
};
|
|
3107
|
+
const onKbKeydown = (e) => {
|
|
3108
|
+
const conf = a11yOf();
|
|
3109
|
+
if (!conf.keyboard || !KB_TYPES.has(typeOf())) return;
|
|
3110
|
+
const g = root.querySelector("[data-icen-chart-kb]");
|
|
3111
|
+
if (!g || e.target !== g) return;
|
|
3112
|
+
if (e.key === "Escape") {
|
|
3113
|
+
if (zoomWindow) {
|
|
3114
|
+
zoomWindow = null;
|
|
3115
|
+
kbCursor.active = false;
|
|
3116
|
+
render();
|
|
3117
|
+
}
|
|
3118
|
+
return;
|
|
3119
|
+
}
|
|
3120
|
+
const view = viewOf();
|
|
3121
|
+
const series = seriesViewOf(view);
|
|
3122
|
+
const n = kbPointCount(view);
|
|
3123
|
+
if (n < 1) return;
|
|
3124
|
+
const siMax = Math.max(0, series.length - 1);
|
|
3125
|
+
let moved = true;
|
|
3126
|
+
switch (e.key) {
|
|
3127
|
+
case "ArrowRight":
|
|
3128
|
+
kbCursor.i = clampNum(kbCursor.i + 1, 0, n - 1);
|
|
3129
|
+
break;
|
|
3130
|
+
case "ArrowLeft":
|
|
3131
|
+
kbCursor.i = clampNum(kbCursor.i - 1, 0, n - 1);
|
|
3132
|
+
break;
|
|
3133
|
+
case "ArrowDown":
|
|
3134
|
+
kbCursor.si = clampNum(kbCursor.si + 1, 0, siMax);
|
|
3135
|
+
break;
|
|
3136
|
+
case "ArrowUp":
|
|
3137
|
+
kbCursor.si = clampNum(kbCursor.si - 1, 0, siMax);
|
|
3138
|
+
break;
|
|
3139
|
+
case "Home":
|
|
3140
|
+
kbCursor.i = 0;
|
|
3141
|
+
break;
|
|
3142
|
+
case "End":
|
|
3143
|
+
kbCursor.i = n - 1;
|
|
3144
|
+
break;
|
|
3145
|
+
default:
|
|
3146
|
+
moved = false;
|
|
3147
|
+
}
|
|
3148
|
+
if (!moved) return;
|
|
3149
|
+
e.preventDefault();
|
|
3150
|
+
kbCursor.active = true;
|
|
3151
|
+
applyKbCursor();
|
|
3152
|
+
announceCursor();
|
|
3153
|
+
};
|
|
3154
|
+
root.addEventListener("keydown", onKbKeydown);
|
|
3155
|
+
const applyChartA11yPlus = (view, spec, type, formatValue) => {
|
|
3156
|
+
const conf = a11yOf();
|
|
3157
|
+
const graphic = root.querySelector('[role="img"]');
|
|
3158
|
+
if (!graphic) return;
|
|
3159
|
+
const body = root.querySelector(".icen-chart-body") ?? graphic.parentElement ?? root;
|
|
3160
|
+
const summaryParts = [];
|
|
3161
|
+
if (conf.summary) summaryParts.push(summarizeChart(view, type, formatValue));
|
|
3162
|
+
if (conf.keyboard && KB_TYPES.has(type)) summaryParts.push(t("charts.a11y.keyboardHint"));
|
|
3163
|
+
const summaryText = summaryParts.filter(Boolean).join("\uFF1B");
|
|
3164
|
+
if (summaryText) {
|
|
3165
|
+
const p = document.createElement("p");
|
|
3166
|
+
p.className = "icen-chart-summary";
|
|
3167
|
+
p.id = `icen-chart-a11y-${++a11ySeq}`;
|
|
3168
|
+
p.textContent = summaryText;
|
|
3169
|
+
body.appendChild(p);
|
|
3170
|
+
graphic.setAttribute("aria-describedby", p.id);
|
|
3171
|
+
} else {
|
|
3172
|
+
graphic.removeAttribute("aria-describedby");
|
|
3173
|
+
}
|
|
3174
|
+
if (conf.keyboard && KB_TYPES.has(type)) {
|
|
3175
|
+
graphic.setAttribute("tabindex", "0");
|
|
3176
|
+
graphic.setAttribute("data-icen-chart-kb", "");
|
|
3177
|
+
} else {
|
|
3178
|
+
graphic.removeAttribute("tabindex");
|
|
3179
|
+
graphic.removeAttribute("data-icen-chart-kb");
|
|
3180
|
+
}
|
|
3181
|
+
if (conf.table) body.appendChild(buildChartTable(view, spec, type, formatValue));
|
|
3182
|
+
applyKbCursor();
|
|
3183
|
+
};
|
|
2944
3184
|
const render = () => {
|
|
2945
3185
|
if (!current2.type) current2 = { ...current2, type: inferChartType(current2) };
|
|
2946
3186
|
const spec = current2;
|
|
@@ -3021,6 +3261,7 @@ function renderChart(el, raw) {
|
|
|
3021
3261
|
}
|
|
3022
3262
|
}
|
|
3023
3263
|
if (loading) return;
|
|
3264
|
+
applyChartA11yPlus(view, spec, type, formatValue);
|
|
3024
3265
|
paintChartMarks(root, view, spec, formatValue, warnedMarks);
|
|
3025
3266
|
bindZoomGesture();
|
|
3026
3267
|
};
|
|
@@ -3102,6 +3343,7 @@ function renderChart(el, raw) {
|
|
|
3102
3343
|
releaseFluidWidth(root);
|
|
3103
3344
|
hiddenLegendKeys.delete(root);
|
|
3104
3345
|
zoomDragCleanup?.();
|
|
3346
|
+
root.removeEventListener("keydown", onKbKeydown);
|
|
3105
3347
|
root.textContent = "";
|
|
3106
3348
|
root.classList.remove("is-loading");
|
|
3107
3349
|
unbindEvents();
|
|
@@ -204,6 +204,19 @@ var ICEN_LOCALE_ZH_CN = {
|
|
|
204
204
|
"charts.noData": "\u6682\u65E0\u6570\u636E",
|
|
205
205
|
"charts.resetZoom": "\u91CD\u7F6E\u7F29\u653E",
|
|
206
206
|
"charts.sampled": "\u5DF2\u62BD\u6837 {p0}\u2192{p1} \u70B9",
|
|
207
|
+
"charts.a11y.keyboardHint": "\u65B9\u5411\u952E\u9010\u70B9\u6D4F\u89C8\uFF0CHome/End \u8DF3\u9996\u5C3E\uFF0CEsc \u91CD\u7F6E\u7F29\u653E",
|
|
208
|
+
"charts.a11y.max": "\u6700\u5927 {p0}\uFF08{p1}\uFF09",
|
|
209
|
+
"charts.a11y.min": "\u6700\u5C0F {p0}\uFF08{p1}\uFF09",
|
|
210
|
+
"charts.a11y.point": "{p0}\uFF1A{p1}\uFF0C\u7B2C {p2}/{p3} \u70B9",
|
|
211
|
+
"charts.a11y.pointSeries": "{p0} \xB7 {p1}\uFF1A{p2}\uFF0C\u7B2C {p3}/{p4} \u70B9",
|
|
212
|
+
"charts.a11y.range": "\u7C7B\u76EE {p0} \u81F3 {p1}",
|
|
213
|
+
"charts.a11y.scatterRange": "x \u8303\u56F4 {p0}\u2013{p1}\uFF0Cy \u8303\u56F4 {p2}\u2013{p3}",
|
|
214
|
+
"charts.a11y.seriesCount": "{p0} \u4E2A\u7CFB\u5217",
|
|
215
|
+
"charts.a11y.tableCaption": "{p0} \u6570\u636E\u8868",
|
|
216
|
+
"charts.a11y.trend": "\u9996\u7CFB\u5217\u8D8B\u52BF{p0}",
|
|
217
|
+
"charts.a11y.trendDown": "\u4E0B\u964D",
|
|
218
|
+
"charts.a11y.trendFlat": "\u6301\u5E73",
|
|
219
|
+
"charts.a11y.trendUp": "\u4E0A\u5347",
|
|
207
220
|
"charts.type.area": "\u9762\u79EF\u56FE",
|
|
208
221
|
"charts.type.donut": "\u73AF\u5F62\u56FE",
|
|
209
222
|
"charts.type.gauge": "\u4EEA\u8868\u76D8",
|
|
@@ -299,6 +299,19 @@ var ICEN_LOCALE_ZH_CN = {
|
|
|
299
299
|
"charts.noData": "\u6682\u65E0\u6570\u636E",
|
|
300
300
|
"charts.resetZoom": "\u91CD\u7F6E\u7F29\u653E",
|
|
301
301
|
"charts.sampled": "\u5DF2\u62BD\u6837 {p0}\u2192{p1} \u70B9",
|
|
302
|
+
"charts.a11y.keyboardHint": "\u65B9\u5411\u952E\u9010\u70B9\u6D4F\u89C8\uFF0CHome/End \u8DF3\u9996\u5C3E\uFF0CEsc \u91CD\u7F6E\u7F29\u653E",
|
|
303
|
+
"charts.a11y.max": "\u6700\u5927 {p0}\uFF08{p1}\uFF09",
|
|
304
|
+
"charts.a11y.min": "\u6700\u5C0F {p0}\uFF08{p1}\uFF09",
|
|
305
|
+
"charts.a11y.point": "{p0}\uFF1A{p1}\uFF0C\u7B2C {p2}/{p3} \u70B9",
|
|
306
|
+
"charts.a11y.pointSeries": "{p0} \xB7 {p1}\uFF1A{p2}\uFF0C\u7B2C {p3}/{p4} \u70B9",
|
|
307
|
+
"charts.a11y.range": "\u7C7B\u76EE {p0} \u81F3 {p1}",
|
|
308
|
+
"charts.a11y.scatterRange": "x \u8303\u56F4 {p0}\u2013{p1}\uFF0Cy \u8303\u56F4 {p2}\u2013{p3}",
|
|
309
|
+
"charts.a11y.seriesCount": "{p0} \u4E2A\u7CFB\u5217",
|
|
310
|
+
"charts.a11y.tableCaption": "{p0} \u6570\u636E\u8868",
|
|
311
|
+
"charts.a11y.trend": "\u9996\u7CFB\u5217\u8D8B\u52BF{p0}",
|
|
312
|
+
"charts.a11y.trendDown": "\u4E0B\u964D",
|
|
313
|
+
"charts.a11y.trendFlat": "\u6301\u5E73",
|
|
314
|
+
"charts.a11y.trendUp": "\u4E0A\u5347",
|
|
302
315
|
"charts.type.area": "\u9762\u79EF\u56FE",
|
|
303
316
|
"charts.type.donut": "\u73AF\u5F62\u56FE",
|
|
304
317
|
"charts.type.gauge": "\u4EEA\u8868\u76D8",
|
|
@@ -204,6 +204,19 @@ var ICEN_LOCALE_ZH_CN = {
|
|
|
204
204
|
"charts.noData": "\u6682\u65E0\u6570\u636E",
|
|
205
205
|
"charts.resetZoom": "\u91CD\u7F6E\u7F29\u653E",
|
|
206
206
|
"charts.sampled": "\u5DF2\u62BD\u6837 {p0}\u2192{p1} \u70B9",
|
|
207
|
+
"charts.a11y.keyboardHint": "\u65B9\u5411\u952E\u9010\u70B9\u6D4F\u89C8\uFF0CHome/End \u8DF3\u9996\u5C3E\uFF0CEsc \u91CD\u7F6E\u7F29\u653E",
|
|
208
|
+
"charts.a11y.max": "\u6700\u5927 {p0}\uFF08{p1}\uFF09",
|
|
209
|
+
"charts.a11y.min": "\u6700\u5C0F {p0}\uFF08{p1}\uFF09",
|
|
210
|
+
"charts.a11y.point": "{p0}\uFF1A{p1}\uFF0C\u7B2C {p2}/{p3} \u70B9",
|
|
211
|
+
"charts.a11y.pointSeries": "{p0} \xB7 {p1}\uFF1A{p2}\uFF0C\u7B2C {p3}/{p4} \u70B9",
|
|
212
|
+
"charts.a11y.range": "\u7C7B\u76EE {p0} \u81F3 {p1}",
|
|
213
|
+
"charts.a11y.scatterRange": "x \u8303\u56F4 {p0}\u2013{p1}\uFF0Cy \u8303\u56F4 {p2}\u2013{p3}",
|
|
214
|
+
"charts.a11y.seriesCount": "{p0} \u4E2A\u7CFB\u5217",
|
|
215
|
+
"charts.a11y.tableCaption": "{p0} \u6570\u636E\u8868",
|
|
216
|
+
"charts.a11y.trend": "\u9996\u7CFB\u5217\u8D8B\u52BF{p0}",
|
|
217
|
+
"charts.a11y.trendDown": "\u4E0B\u964D",
|
|
218
|
+
"charts.a11y.trendFlat": "\u6301\u5E73",
|
|
219
|
+
"charts.a11y.trendUp": "\u4E0A\u5347",
|
|
207
220
|
"charts.type.area": "\u9762\u79EF\u56FE",
|
|
208
221
|
"charts.type.donut": "\u73AF\u5F62\u56FE",
|
|
209
222
|
"charts.type.gauge": "\u4EEA\u8868\u76D8",
|
|
@@ -204,6 +204,19 @@ var ICEN_LOCALE_ZH_CN = {
|
|
|
204
204
|
"charts.noData": "\u6682\u65E0\u6570\u636E",
|
|
205
205
|
"charts.resetZoom": "\u91CD\u7F6E\u7F29\u653E",
|
|
206
206
|
"charts.sampled": "\u5DF2\u62BD\u6837 {p0}\u2192{p1} \u70B9",
|
|
207
|
+
"charts.a11y.keyboardHint": "\u65B9\u5411\u952E\u9010\u70B9\u6D4F\u89C8\uFF0CHome/End \u8DF3\u9996\u5C3E\uFF0CEsc \u91CD\u7F6E\u7F29\u653E",
|
|
208
|
+
"charts.a11y.max": "\u6700\u5927 {p0}\uFF08{p1}\uFF09",
|
|
209
|
+
"charts.a11y.min": "\u6700\u5C0F {p0}\uFF08{p1}\uFF09",
|
|
210
|
+
"charts.a11y.point": "{p0}\uFF1A{p1}\uFF0C\u7B2C {p2}/{p3} \u70B9",
|
|
211
|
+
"charts.a11y.pointSeries": "{p0} \xB7 {p1}\uFF1A{p2}\uFF0C\u7B2C {p3}/{p4} \u70B9",
|
|
212
|
+
"charts.a11y.range": "\u7C7B\u76EE {p0} \u81F3 {p1}",
|
|
213
|
+
"charts.a11y.scatterRange": "x \u8303\u56F4 {p0}\u2013{p1}\uFF0Cy \u8303\u56F4 {p2}\u2013{p3}",
|
|
214
|
+
"charts.a11y.seriesCount": "{p0} \u4E2A\u7CFB\u5217",
|
|
215
|
+
"charts.a11y.tableCaption": "{p0} \u6570\u636E\u8868",
|
|
216
|
+
"charts.a11y.trend": "\u9996\u7CFB\u5217\u8D8B\u52BF{p0}",
|
|
217
|
+
"charts.a11y.trendDown": "\u4E0B\u964D",
|
|
218
|
+
"charts.a11y.trendFlat": "\u6301\u5E73",
|
|
219
|
+
"charts.a11y.trendUp": "\u4E0A\u5347",
|
|
207
220
|
"charts.type.area": "\u9762\u79EF\u56FE",
|
|
208
221
|
"charts.type.donut": "\u73AF\u5F62\u56FE",
|
|
209
222
|
"charts.type.gauge": "\u4EEA\u8868\u76D8",
|
|
@@ -275,6 +275,17 @@ interface ChartSpec {
|
|
|
275
275
|
marks?: ChartMark[];
|
|
276
276
|
/** 加载态:渲染骨架 shimmer(优先于空态) */
|
|
277
277
|
loading?: boolean;
|
|
278
|
+
/** 无障碍层(全部可选;默认摘要开、键盘开、数据表关):
|
|
279
|
+
* summary 生成 sr-only 自动摘要(图型/系列数/范围/最值/首系列趋势),经 aria-describedby 挂到图形;
|
|
280
|
+
* table 追加 sr-only 数据表替代视图(读屏与复制导出同源);
|
|
281
|
+
* keyboard 为 line/area/vbar/hbar/scatter 开键盘游标(方向键逐点、Home/End 首尾、Esc 重置缩放) */
|
|
282
|
+
a11y?: ChartA11ySpec;
|
|
283
|
+
}
|
|
284
|
+
/** 图表无障碍层开关(纯 JSON,可序列化;缺省 = summary/keyboard 开、table 关) */
|
|
285
|
+
interface ChartA11ySpec {
|
|
286
|
+
summary?: boolean;
|
|
287
|
+
table?: boolean;
|
|
288
|
+
keyboard?: boolean;
|
|
278
289
|
}
|
|
279
290
|
/** 格式化描述符 → 函数(底层渲染器的 formatValue 槽) */
|
|
280
291
|
declare function chartFormatValue(format?: ChartValueFormat): (value: number) => string;
|
|
@@ -459,4 +470,4 @@ declare function renderGraph(el: HTMLElement, raw: GraphSpec | unknown): DatumCh
|
|
|
459
470
|
*/
|
|
460
471
|
declare function renderMap(el: HTMLElement, raw: MapSpec | unknown): DatumChartHandle<MapSpec>;
|
|
461
472
|
|
|
462
|
-
export { type ChartCalendarOptions, type ChartChromeOptions, type ChartDatum, type ChartDatumDetail, type ChartDims, type ChartEventDetail, type ChartEventName, type ChartGaugeOptions, type ChartHandle, type ChartHeatmapOptions, type ChartI18nLabels, type ChartLineOptions, type ChartMark, type ChartMarkData, type ChartMarkTone, type ChartPointSpec, type ChartRadarOptions, type ChartScatterOptions, type ChartSegment, type ChartSegmentsOptions, type ChartSeriesOptions, type ChartSeriesSpec, type ChartSpec, type ChartTone, type ChartType, type ChartVBarOptions, type ChartValueFormat, type DatumChartHandle, type GraphEdgeSpec, type GraphLayoutOptions, type GraphNodeSpec, type GraphSpec, type HeatmapDatum, type MapPointSpec, type MapSpec, type RadarSeries, bindChartEvents, chartFormatValue, inferChartType, layoutGraph, lttb, normalizeChartSpec, registerChartTone, renderArea, renderCalendar, renderChart, renderDonut, renderGauge, renderGraph, renderHBar, renderHeatmap, renderLine, renderMap, renderRadar, renderScatter, renderSparkline, renderStack, renderVBar };
|
|
473
|
+
export { type ChartA11ySpec, type ChartCalendarOptions, type ChartChromeOptions, type ChartDatum, type ChartDatumDetail, type ChartDims, type ChartEventDetail, type ChartEventName, type ChartGaugeOptions, type ChartHandle, type ChartHeatmapOptions, type ChartI18nLabels, type ChartLineOptions, type ChartMark, type ChartMarkData, type ChartMarkTone, type ChartPointSpec, type ChartRadarOptions, type ChartScatterOptions, type ChartSegment, type ChartSegmentsOptions, type ChartSeriesOptions, type ChartSeriesSpec, type ChartSpec, type ChartTone, type ChartType, type ChartVBarOptions, type ChartValueFormat, type DatumChartHandle, type GraphEdgeSpec, type GraphLayoutOptions, type GraphNodeSpec, type GraphSpec, type HeatmapDatum, type MapPointSpec, type MapSpec, type RadarSeries, bindChartEvents, chartFormatValue, inferChartType, layoutGraph, lttb, normalizeChartSpec, registerChartTone, renderArea, renderCalendar, renderChart, renderDonut, renderGauge, renderGraph, renderHBar, renderHeatmap, renderLine, renderMap, renderRadar, renderScatter, renderSparkline, renderStack, renderVBar };
|