@opendata-ai/openchart-vanilla 7.1.2 → 7.1.4

package/dist/index.js

@@ -5259,7 +5259,7 @@ function renderAnnotations(parent, layout) {
 
 // src/renderers/axes.ts
 import {
-  AXIS_TITLE_OFFSET_COMPACT,
+  AXIS_TITLE_GAP,
   estimateTextWidth as estimateTextWidth2,
   getAxisTitleOffset,
   TICK_LABEL_OFFSET
@@ -5474,7 +5474,6 @@ function renderAxis(parent, axis, orientation, layout) {
         transform: `rotate(90, ${titleX}, ${area.y + area.height / 2})`
       });
     } else {
-      const AXIS_TITLE_GAP = 8;
       const maxTickLabelWidth = axis.ticks.reduce((max, t) => {
         const w = estimateTextWidth2(
           t.label,
@@ -5484,7 +5483,7 @@ function renderAxis(parent, axis, orientation, layout) {
         return Math.max(max, w);
       }, 0);
       const dynamicOffset = TICK_LABEL_OFFSET + maxTickLabelWidth + AXIS_TITLE_GAP;
-      const titleOffset = Math.max(dynamicOffset, AXIS_TITLE_OFFSET_COMPACT);
+      const titleOffset = Math.max(dynamicOffset, getAxisTitleOffset(layout.dimensions.width));
       setAttrs2(axisLabel, {
         x: area.x - titleOffset,
         y: area.y + area.height / 2,
@@ -5703,36 +5702,18 @@ function renderEndpointLabels(parent, layout) {
       entryG.appendChild(leader);
     }
     const rowY = entry.labelY + labelFontSize / 2;
-    const chipHeight = Math.max(12, Math.round(ep.swatchSize * 0.85));
-    const chipY = rowY - chipHeight / 2;
-    const chip = createSVGElement2("rect");
-    chip.setAttribute("class", "oc-endpoint-swatch-chip");
-    setAttrs2(chip, {
-      x: chipX,
-      y: chipY,
-      width: chipWidth,
-      height: chipHeight,
-      rx: 3,
-      ry: 3,
-      fill: ep.swatchChipFill
-    });
-    entryG.appendChild(chip);
-    const barWidth = Math.max(8, chipWidth - 8);
-    const barHeight = 3;
-    const barX = chipX + (chipWidth - barWidth) / 2;
-    const barY = rowY - barHeight / 2;
-    const bar = createSVGElement2("rect");
-    bar.setAttribute("class", "oc-endpoint-swatch-bar");
-    setAttrs2(bar, {
-      x: barX,
-      y: barY,
-      width: barWidth,
-      height: barHeight,
-      rx: barHeight / 2,
-      ry: barHeight / 2,
-      fill: entry.color
+    const line = createSVGElement2("line");
+    line.setAttribute("class", "oc-endpoint-swatch-line");
+    setAttrs2(line, {
+      x1: chipX,
+      y1: rowY,
+      x2: chipX + chipWidth,
+      y2: rowY,
+      stroke: entry.color,
+      "stroke-width": 2,
+      "stroke-linecap": "round"
     });
-    entryG.appendChild(bar);
+    entryG.appendChild(line);
     const label = createSVGElement2("text");
     label.setAttribute("class", "oc-endpoint-label");
     setAttrs2(label, { x: textX, y: entry.labelY + labelFontSize });
@@ -5822,46 +5803,45 @@ function renderLegend(parent, legend) {
         entryG.setAttribute("opacity", "0.3");
       }
     }
+    const midX = offsetX + legend.swatchSize / 2;
+    const midY = offsetY + legend.swatchSize / 2;
     if (entry.shape === "circle") {
       const circle = createSVGElement2("circle");
       setAttrs2(circle, {
-        cx: offsetX + legend.swatchSize / 2,
-        cy: offsetY + legend.swatchSize / 2,
+        cx: midX,
+        cy: midY,
         r: legend.swatchSize / 2,
         fill: entry.color
       });
       entryG.appendChild(circle);
-    } else {
-      const chipHeight = Math.max(12, Math.round(legend.swatchSize * 0.85));
-      const chipY = offsetY + legend.swatchSize / 2 - chipHeight / 2;
-      const chip = createSVGElement2("rect");
-      chip.setAttribute("class", "oc-legend-swatch-chip");
-      setAttrs2(chip, {
-        x: offsetX,
-        y: chipY,
-        width: legend.swatchSize,
-        height: chipHeight,
-        rx: 3,
-        ry: 3,
-        fill: legend.swatchChipFill
+    } else if (entry.shape === "line") {
+      const lineWidth = legend.swatchSize;
+      const line = createSVGElement2("line");
+      line.setAttribute("class", "oc-legend-swatch-line");
+      setAttrs2(line, {
+        x1: offsetX,
+        y1: midY,
+        x2: offsetX + lineWidth,
+        y2: midY,
+        stroke: entry.color,
+        "stroke-width": 2,
+        "stroke-linecap": "round"
       });
-      entryG.appendChild(chip);
-      const barWidth = Math.max(8, legend.swatchSize - 8);
-      const barHeight = 3;
-      const barX = offsetX + (legend.swatchSize - barWidth) / 2;
-      const barY = offsetY + legend.swatchSize / 2 - barHeight / 2;
-      const bar = createSVGElement2("rect");
-      bar.setAttribute("class", "oc-legend-swatch-bar");
-      setAttrs2(bar, {
-        x: barX,
-        y: barY,
-        width: barWidth,
-        height: barHeight,
-        rx: barHeight / 2,
-        ry: barHeight / 2,
+      entryG.appendChild(line);
+    } else {
+      const rectSize = Math.round(legend.swatchSize * 0.6);
+      const rect = createSVGElement2("rect");
+      rect.setAttribute("class", "oc-legend-swatch-rect");
+      setAttrs2(rect, {
+        x: offsetX + (legend.swatchSize - rectSize) / 2,
+        y: midY - rectSize / 2,
+        width: rectSize,
+        height: rectSize,
+        rx: 2,
+        ry: 2,
         fill: entry.color
       });
-      entryG.appendChild(bar);
+      entryG.appendChild(rect);
     }
     const label = createSVGElement2("text");
     setAttrs2(label, {
@@ -8711,9 +8691,11 @@ function renderTable(layout, container, opts) {
   if (pagination) {
     wrapper.appendChild(pagination);
   }
+  const footerRow = document.createElement("div");
+  footerRow.className = "oc-table-footer-row";
   const footerChrome = renderChromeBlock(layout, "footer");
   if (footerChrome) {
-    wrapper.appendChild(footerChrome);
+    footerRow.appendChild(footerChrome);
   }
   const liveRegion = document.createElement("div");
   liveRegion.className = "oc-table-live-region oc-sr-only";
@@ -8734,7 +8716,6 @@ function renderTable(layout, container, opts) {
     const brandColor = theme ? theme.colors.axis : "#999999";
     const brand = document.createElement("div");
     brand.className = "oc-table-ref";
-    brand.style.cssText = "text-align: right; padding: 4px 8px;";
     const brandLink = document.createElement("a");
     brandLink.href = BRAND_URL4;
     brandLink.target = "_blank";
@@ -8742,7 +8723,10 @@ function renderTable(layout, container, opts) {
     brandLink.style.cssText = `font-size: ${BRAND_FONT_SIZE4}px; font-weight: 600; color: ${brandColor}; opacity: 0.55; text-decoration: none; font-family: ${theme ? theme.fonts.family : "sans-serif"};`;
     brandLink.textContent = "tryOpenData.ai";
     brand.appendChild(brandLink);
-    wrapper.appendChild(brand);
+    footerRow.appendChild(brand);
+  }
+  if (footerRow.childElementCount > 0) {
+    wrapper.appendChild(footerRow);
   }
   if (opts?.animate && layout.animation?.enabled) {
     const anim = layout.animation;