@vanduo-oss/vd3-cbun 1.4.0 → 1.4.2

package/dist/charts/index.js

@@ -129,9 +129,22 @@ function normalizeMargin(value, fallback = DEFAULT_MARGIN) {
     left: Number(value?.left ?? fallback.left)
   };
 }
+function dataTableContribution(target) {
+  if (!isElement(target) || typeof target.querySelectorAll !== "function") return 0;
+  let total = 0;
+  target.querySelectorAll(".vd-chart-data-table:not(.vd-chart-sr-only)").forEach((table) => {
+    const style = typeof getComputedStyle === "function" ? getComputedStyle(table) : null;
+    const marginTop = style ? parseFloat(style.marginTop) || 0 : 0;
+    const marginBottom = style ? parseFloat(style.marginBottom) || 0 : 0;
+    total += (table.offsetHeight || 0) + marginTop + marginBottom;
+  });
+  return total;
+}
 function measureTarget(target, options) {
   const width = Number(options.width) || Math.round(target.clientWidth) || DEFAULT_WIDTH;
-  const height = Number(options.height) || Math.round(target.clientHeight) || DEFAULT_HEIGHT;
+  const targetHeight = Math.round(Number(target.clientHeight));
+  const availableHeight = Math.max(0, targetHeight - dataTableContribution(target));
+  const height = Number(options.height) || (targetHeight > 0 ? availableHeight : DEFAULT_HEIGHT);
   return {
     width: Math.max(160, width),
     height: Math.max(140, height)
@@ -444,6 +457,74 @@ function makeInteractive(mark, hasClick, hasTooltip) {
     mark.setAttribute("focusable", "true");
   }
 }
+function setupKeyboardNavigation(svg, markGroup) {
+  svg.addEventListener("keydown", (event) => {
+    const active = document.activeElement;
+    if (!active || !markGroup.contains(active)) return;
+    const marks = Array.from(markGroup.querySelectorAll('[tabindex="0"]'));
+    if (!marks.length) return;
+    const currentIndex = marks.indexOf(active);
+    if (currentIndex === -1) return;
+    let targetIndex = -1;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      event.preventDefault();
+      targetIndex = (currentIndex + 1) % marks.length;
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      event.preventDefault();
+      targetIndex = (currentIndex - 1 + marks.length) % marks.length;
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      targetIndex = 0;
+    } else if (event.key === "End") {
+      event.preventDefault();
+      targetIndex = marks.length - 1;
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      active.blur();
+    }
+    if (targetIndex !== -1 && marks[targetIndex]) {
+      marks[targetIndex].focus();
+    }
+  });
+}
+function renderDataTable(instance, tableData) {
+  const { target, options } = instance;
+  if (options.dataTable === false) return;
+  if (!tableData || !tableData.rows || !tableData.rows.length) return;
+  const table = document.createElement("table");
+  table.className = "vd-chart-data-table";
+  if (options.dataTable !== "visible") {
+    table.classList.add("vd-chart-sr-only");
+  }
+  const caption = document.createElement("caption");
+  caption.textContent = tableData.caption || options.title || options.ariaLabel || `${instance.kind} chart data`;
+  table.appendChild(caption);
+  if (tableData.headers && tableData.headers.length) {
+    const thead = document.createElement("thead");
+    const headerRow = document.createElement("tr");
+    tableData.headers.forEach((h2) => {
+      const th = document.createElement("th");
+      th.setAttribute("scope", "col");
+      th.textContent = String(h2);
+      headerRow.appendChild(th);
+    });
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+  }
+  const tbody = document.createElement("tbody");
+  tableData.rows.forEach((row) => {
+    const tr = document.createElement("tr");
+    row.forEach((cell, idx) => {
+      const el = idx === 0 ? document.createElement("th") : document.createElement("td");
+      if (idx === 0) el.setAttribute("scope", "row");
+      el.textContent = cell == null ? "" : String(cell);
+      tr.appendChild(el);
+    });
+    tbody.appendChild(tr);
+  });
+  table.appendChild(tbody);
+  target.appendChild(table);
+}
 function createSvgShell(instance) {
   const { target, options } = instance;
   const size = measureTarget(target, options);
@@ -460,7 +541,8 @@ function createSvgShell(instance) {
     width: size.width,
     height: size.height,
     viewBox: `0 0 ${size.width} ${size.height}`,
-    role: "img"
+    role: options.role || "graphics-document document",
+    "aria-roledescription": options.ariaRoleDescription || `${instance.kind} chart`
   });
   const titleId = nextId("vd-chart-title");
   const descId = nextId("vd-chart-desc");
@@ -531,7 +613,7 @@ function drawAxisLine(svg, x1, y1, x2, y2, theme) {
 }
 function drawCartesianAxes(svg, config) {
   const { plot, xScale, yScale, xTicks, yTicks, theme, options, categoricalX } = config;
-  const axisGroup = append(svg, svgEl("g", { class: "vd-chart-axes" }));
+  const axisGroup = append(svg, svgEl("g", { class: "vd-chart-axes", "aria-hidden": "true" }));
   yTicks.forEach((tick) => {
     const y = yScale(tick);
     if (!isFiniteNumber(y)) return;
@@ -774,7 +856,14 @@ function drawDataLabel(svg, x, y, value, cfg, theme, anchor = "middle") {
 function drawAnnotations(svg, options, plot, xScale, yScale, theme) {
   const annotations = toArray(options.annotations);
   if (!annotations.length) return;
-  const group = append(svg, svgEl("g", { class: "vd-chart-annotations" }));
+  const group = append(
+    svg,
+    svgEl("g", {
+      class: "vd-chart-annotations",
+      role: "graphics-object",
+      "aria-roledescription": "annotations"
+    })
+  );
   annotations.forEach((ann) => {
     const color = ann.color || theme.mutedTextColor;
     const dash = ann.dash === false ? null : "4 3";
@@ -894,7 +983,14 @@ function renderBarChart(instance) {
   });
   drawAnnotations(svg, options, plot, xScale, yScale, theme);
   const labels = dataLabelConfig(options);
-  const markGroup = append(svg, svgEl("g", { class: "vd-chart-marks vd-chart-bars" }));
+  const markGroup = append(
+    svg,
+    svgEl("g", {
+      class: "vd-chart-marks vd-chart-bars",
+      role: "graphics-object",
+      "aria-roledescription": "data points"
+    })
+  );
   const baseline = yScale(Math.min(Math.max(0, yDomain[0]), yDomain[1]));
   rows.forEach((row) => {
     const x = xScale(row.x);
@@ -912,6 +1008,7 @@ function renderBarChart(instance) {
       rx: 3,
       fill,
       role: "graphics-symbol",
+      "aria-roledescription": "bar",
       "aria-label": `${formatCategory(row.x)}: ${formatNumber(row.y)}`
     });
     makeInteractive(rect, typeof options.onBarClick === "function", options.tooltip !== false);
@@ -933,6 +1030,12 @@ function renderBarChart(instance) {
     if (labels) drawDataLabel(svg, x + xScale.bandwidth() / 2, rectY - 4, row.y, labels, theme);
     append(markGroup, rect);
   });
+  setupKeyboardNavigation(svg, markGroup);
+  renderDataTable(instance, {
+    caption: options.title || options.ariaLabel || `${instance.kind} chart data`,
+    headers: [options.xAxis?.label || "Category", options.yAxis?.label || "Value"],
+    rows: rows.map((r) => [formatCategory(r.x), formatNumber(r.y)])
+  });
   if (options.legend && color && color.scale) {
     renderTopLegend(
       svg,
@@ -986,7 +1089,14 @@ function renderMultiBarChart(instance) {
   });
   drawAnnotations(svg, options, plot, xScale, yScale, theme);
   const labels = dataLabelConfig(options);
-  const markGroup = append(svg, svgEl("g", { class: "vd-chart-marks vd-chart-bars" }));
+  const markGroup = append(
+    svg,
+    svgEl("g", {
+      class: "vd-chart-marks vd-chart-bars",
+      role: "graphics-object",
+      "aria-roledescription": "grouped bars"
+    })
+  );
   const baseline = yScale(Math.min(Math.max(0, yDomain[0]), yDomain[1]));
   seriesList.forEach((series) => {
     const fill = seriesColor(series, theme);
@@ -1006,6 +1116,7 @@ function renderMultiBarChart(instance) {
         rx: 3,
         fill,
         role: "graphics-symbol",
+        "aria-roledescription": "bar",
         "aria-label": `${series.name} \u2014 ${formatCategory(row.x)}: ${formatNumber(row.y)}`
       });
       makeInteractive(rect, typeof options.onBarClick === "function", options.tooltip !== false);
@@ -1038,6 +1149,20 @@ function renderMultiBarChart(instance) {
       append(markGroup, rect);
     });
   });
+  setupKeyboardNavigation(svg, markGroup);
+  const tableRows = categories.map((cat) => {
+    const rowCells = [cat];
+    seriesList.forEach((s) => {
+      const match = s.rows.find((r) => String(r.x) === cat);
+      rowCells.push(match && isFiniteNumber(match.y) ? formatNumber(match.y) : "");
+    });
+    return rowCells;
+  });
+  renderDataTable(instance, {
+    caption: options.title || options.ariaLabel || `${instance.kind} chart data`,
+    headers: [options.xAxis?.label || "Category", ...seriesList.map((s) => s.name)],
+    rows: tableRows
+  });
   if (options.legend !== false) {
     renderTopLegend(
       svg,
@@ -1098,7 +1223,14 @@ function renderLineLikeChart(instance, mode) {
   });
   drawAnnotations(svg, options, plot, xInfo.scale, yScale, theme);
   const labels = dataLabelConfig(options);
-  const markGroup = append(svg, svgEl("g", { class: `vd-chart-marks vd-chart-${mode}` }));
+  const markGroup = append(
+    svg,
+    svgEl("g", {
+      class: `vd-chart-marks vd-chart-${mode}`,
+      role: "graphics-object",
+      "aria-roledescription": `${mode} series`
+    })
+  );
   if (mode === "area") {
     const baseline = yScale(Math.max(0, yDomain[0]));
     append(
@@ -1135,6 +1267,7 @@ function renderLineLikeChart(instance, mode) {
         stroke: color,
         "stroke-width": 2,
         role: "graphics-symbol",
+        "aria-roledescription": "data point",
         "aria-label": `${formatCategory(point.xValue)}: ${formatNumber(point.yValue)}`
       });
       makeInteractive(
@@ -1164,6 +1297,12 @@ function renderLineLikeChart(instance, mode) {
       (point) => drawDataLabel(svg, point.x, point.y - 8, point.yValue, labels, theme)
     );
   }
+  setupKeyboardNavigation(svg, markGroup);
+  renderDataTable(instance, {
+    caption: options.title || options.ariaLabel || `${instance.kind} chart data`,
+    headers: [options.xAxis?.label || "X", options.yAxis?.label || "Y"],
+    rows: points.map((p) => [formatCategory(p.xValue), formatNumber(p.yValue)])
+  });
 }
 function renderMultiLineChart(instance, mode) {
   const shell = createSvgShell(instance);
@@ -1199,7 +1338,14 @@ function renderMultiLineChart(instance, mode) {
   });
   drawAnnotations(svg, options, plot, xInfo.scale, yScale, theme);
   const labels = dataLabelConfig(options);
-  const markGroup = append(svg, svgEl("g", { class: `vd-chart-marks vd-chart-${mode}` }));
+  const markGroup = append(
+    svg,
+    svgEl("g", {
+      class: `vd-chart-marks vd-chart-${mode}`,
+      role: "graphics-object",
+      "aria-roledescription": `multi-series ${mode}`
+    })
+  );
   const baseline = yScale(Math.max(0, yDomain[0]));
   seriesList.forEach((series) => {
     const stroke = seriesColor(series, theme);
@@ -1246,6 +1392,7 @@ function renderMultiLineChart(instance, mode) {
           stroke,
           "stroke-width": 2,
           role: "graphics-symbol",
+          "aria-roledescription": "data point",
           "aria-label": `${series.name} ${formatCategory(point.xValue)}: ${formatNumber(point.yValue)}`
         });
         makeInteractive(
@@ -1278,6 +1425,31 @@ function renderMultiLineChart(instance, mode) {
       );
     }
   });
+  setupKeyboardNavigation(svg, markGroup);
+  const xKey = (value) => String(xInfo.mapValue(value));
+  const uniqueX = /* @__PURE__ */ new Map();
+  for (const row of allRows) {
+    const key = xKey(row.x);
+    if (!uniqueX.has(key)) uniqueX.set(key, row.x);
+  }
+  const seriesValues = seriesList.map((s) => {
+    const byX = /* @__PURE__ */ new Map();
+    for (const row of s.rows) byX.set(xKey(row.x), row.y);
+    return byX;
+  });
+  const tableRows = [...uniqueX.entries()].map(([key, xVal]) => {
+    const rowCells = [formatCategory(xVal)];
+    seriesValues.forEach((byX) => {
+      const y = byX.get(key);
+      rowCells.push(isFiniteNumber(y) ? formatNumber(y) : "");
+    });
+    return rowCells;
+  });
+  renderDataTable(instance, {
+    caption: options.title || options.ariaLabel || `${instance.kind} chart data`,
+    headers: [options.xAxis?.label || "X", ...seriesList.map((s) => s.name)],
+    rows: tableRows
+  });
   if (options.legend !== false) {
     renderTopLegend(
       svg,
@@ -1329,7 +1501,14 @@ function renderScatterChart(instance) {
   });
   drawAnnotations(svg, options, plot, xInfo.scale, yScale, theme);
   const labels = dataLabelConfig(options);
-  const markGroup = append(svg, svgEl("g", { class: "vd-chart-marks vd-chart-scatter" }));
+  const markGroup = append(
+    svg,
+    svgEl("g", {
+      class: "vd-chart-marks vd-chart-scatter",
+      role: "graphics-object",
+      "aria-roledescription": "data points"
+    })
+  );
   rows.forEach((row) => {
     const cx = xInfo.scale(xInfo.mapValue(row.x));
     const cy = yScale(row.y);
@@ -1343,6 +1522,7 @@ function renderScatterChart(instance) {
       fill,
       opacity: options.pointOpacity ?? 0.88,
       role: "graphics-symbol",
+      "aria-roledescription": "data point",
       "aria-label": `${formatCategory(row.x)}: ${formatNumber(row.y)}`
     });
     makeInteractive(circle, typeof options.onPointClick === "function", options.tooltip !== false);
@@ -1363,6 +1543,12 @@ function renderScatterChart(instance) {
     if (labels) drawDataLabel(svg, cx, cy - 8, row.y, labels, theme);
     append(markGroup, circle);
   });
+  setupKeyboardNavigation(svg, markGroup);
+  renderDataTable(instance, {
+    caption: options.title || options.ariaLabel || `${instance.kind} chart data`,
+    headers: [options.xAxis?.label || "X", options.yAxis?.label || "Y"],
+    rows: rows.map((r) => [formatCategory(r.x), formatNumber(r.y)])
+  });
   if (options.legend && color && color.scale) {
     renderTopLegend(
       svg,
@@ -1431,7 +1617,14 @@ function renderDonutChart(instance) {
   const innerRadius = outerRadius * ratio;
   const colorScale = scaleOrdinal({ domain: rows.map((row) => row.label), range: theme.colors });
   const labels = dataLabelConfig(options);
-  const markGroup = append(svg, svgEl("g", { class: "vd-chart-marks vd-chart-slices" }));
+  const markGroup = append(
+    svg,
+    svgEl("g", {
+      class: "vd-chart-marks vd-chart-slices",
+      role: "graphics-object",
+      "aria-roledescription": "pie slices"
+    })
+  );
   let cursor = -Math.PI / 2;
   rows.forEach((row) => {
     const angle = row.value / total * TAU;
@@ -1445,6 +1638,7 @@ function renderDonutChart(instance) {
       stroke: theme.backgroundColor,
       "stroke-width": 2,
       role: "graphics-symbol",
+      "aria-roledescription": "slice",
       "aria-label": `${formatCategory(row.label)}: ${formatNumber(row.value)}`
     });
     makeInteractive(path, typeof options.onSliceClick === "function", options.tooltip !== false);
@@ -1469,6 +1663,16 @@ function renderDonutChart(instance) {
     }
     append(markGroup, path);
   });
+  setupKeyboardNavigation(svg, markGroup);
+  renderDataTable(instance, {
+    caption: options.title || options.ariaLabel || `${instance.kind} chart data`,
+    headers: ["Category", "Value", "Percentage"],
+    rows: rows.map((r) => [
+      formatCategory(r.label),
+      formatNumber(r.value),
+      total > 0 ? `${Math.round(r.value / total * 100)}%` : "0%"
+    ])
+  });
   if (innerRadius > 16 && options.centerLabel !== false) {
     append(
       svg,
@@ -1519,7 +1723,11 @@ var ChartInstance = class {
   }
   render() {
     if (this.destroyed) return this;
+    const tableHeight = dataTableContribution(this.target);
     this.renderer(this);
+    if (!Number(this.options.height) && dataTableContribution(this.target) !== tableHeight) {
+      this.renderer(this);
+    }
     return this;
   }
   update(nextOptions = {}) {
@@ -1533,11 +1741,12 @@ var ChartInstance = class {
   setupResizeObserver() {
     if (this.options.responsive === false || !hasWindow() || typeof ResizeObserver === "undefined")
       return;
+    const chartHeight = () => Math.max(0, this.target.clientHeight - dataTableContribution(this.target));
     let lastWidth = this.target.clientWidth;
-    let lastHeight = this.target.clientHeight;
+    let lastHeight = chartHeight();
     this.resizeObserver = new ResizeObserver(() => {
       const width = this.target.clientWidth;
-      const height = this.target.clientHeight;
+      const height = chartHeight();
       if (width === lastWidth && height === lastHeight) return;
       lastWidth = width;
       lastHeight = height;
@@ -1651,7 +1860,13 @@ var CHART_PROPS = {
   xFormat: { type: Function, default: void 0 },
   yFormat: { type: Function, default: void 0 },
   xAxis: { type: Object, default: void 0 },
-  yAxis: { type: Object, default: void 0 }
+  yAxis: { type: Object, default: void 0 },
+  // Accessible data table: `true` (sr-only, default) / `false` / `'visible'`.
+  dataTable: { type: [Boolean, String], default: void 0 },
+  // Override the SVG `aria-roledescription` (defaults to `${kind} chart`).
+  ariaRoleDescription: { type: String, default: void 0 },
+  // Avoid colliding with the standard root `role` fallthrough attribute.
+  svgRole: { type: String, default: void 0 }
 };
 function optionsFrom(target, props, emit) {
   return {
@@ -1685,6 +1900,9 @@ function optionsFrom(target, props, emit) {
     yFormat: props.yFormat,
     xAxis: props.xAxis,
     yAxis: props.yAxis,
+    dataTable: props.dataTable,
+    ariaRoleDescription: props.ariaRoleDescription,
+    role: props.svgRole,
     // Forward the core's mark-click callbacks as the Vue emit family. Passing
     // all three unconditionally is safe: the core only fires the callback
     // relevant to the rendered chart type (bars → onBarClick, points →
@@ -1743,7 +1961,10 @@ var VdChart = defineComponent({
         props.xFormat,
         props.yFormat,
         props.xAxis,
-        props.yAxis
+        props.yAxis,
+        props.dataTable,
+        props.ariaRoleDescription,
+        props.svgRole
       ],
       () => {
         if (!instance) return;