@vanduo-oss/vd3-cbun 1.4.1 → 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)
@@ -1413,12 +1426,22 @@ function renderMultiLineChart(instance, mode) {
     }
   });
   setupKeyboardNavigation(svg, markGroup);
-  const uniqueX = unique(allRows.map((r) => r.x));
-  const tableRows = uniqueX.map((xVal) => {
+  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)];
-    seriesList.forEach((s) => {
-      const match = s.rows.find((r) => r.x === xVal);
-      rowCells.push(match && isFiniteNumber(match.y) ? formatNumber(match.y) : "");
+    seriesValues.forEach((byX) => {
+      const y = byX.get(key);
+      rowCells.push(isFiniteNumber(y) ? formatNumber(y) : "");
     });
     return rowCells;
   });
@@ -1700,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 = {}) {
@@ -1714,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;
@@ -1836,7 +1864,9 @@ var CHART_PROPS = {
   // 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 }
+  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 {
@@ -1872,6 +1902,7 @@ function optionsFrom(target, props, emit) {
     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 →
@@ -1930,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;