@opendata-ai/openchart-vanilla 7.1.1 → 7.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-vanilla",
-  "version": "7.1.1",
+  "version": "7.1.3",
   "description": "Vanilla JS renderer for openchart: SVG charts, HTML tables, force-directed graphs",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -50,8 +50,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.6",
-    "@opendata-ai/openchart-core": "7.1.1",
-    "@opendata-ai/openchart-engine": "7.1.1",
+    "@opendata-ai/openchart-core": "7.1.3",
+    "@opendata-ai/openchart-engine": "7.1.3",
     "d3-force": "^3.0.0",
     "d3-quadtree": "^3.0.1"
   },

package/src/renderers/brand.ts

@@ -46,13 +46,13 @@ export function renderBrand(parent: SVGElement, layout: ChartLayout): void {
 
   // "try" in normal weight, "OpenData" in semibold, ".ai" in normal weight,
   // rendered as a single right-aligned text element with three tspans.
-  // Use alphabetic baseline so mixed-size tspans share a common bottom line.
+  // Use hanging baseline to align top-edge with source/byline chrome text.
   const BRAND_LARGE = 16;
   const text = createSVGElement('text');
   setAttrs(text, {
     x: rightEdge,
-    y: chromeY + BRAND_LARGE,
-    'dominant-baseline': 'alphabetic',
+    y: chromeY,
+    'dominant-baseline': 'hanging',
     'font-family': layout.theme.fonts.family,
     'font-size': BRAND_FONT_SIZE,
     'text-anchor': 'end',

package/src/renderers/endpoint-labels.ts

@@ -71,40 +71,20 @@ export function renderEndpointLabels(parent: SVGElement, layout: ChartLayout): v
       entryG.appendChild(leader);
     }
 
-    // Swatch: rounded chip with a colored bar through its midline, matching
-    // the traditional legend so a chart never shows two swatch idioms.
+    // Swatch: bare colored line segment matching the legend style.
     const rowY = entry.labelY + labelFontSize / 2;
-    const chipHeight = Math.max(12, Math.round(ep.swatchSize * 0.85));
-    const chipY = rowY - chipHeight / 2;
-    const chip = createSVGElement('rect');
-    chip.setAttribute('class', 'oc-endpoint-swatch-chip');
-    setAttrs(chip, {
-      x: chipX,
-      y: chipY,
-      width: chipWidth,
-      height: chipHeight,
-      rx: 3,
-      ry: 3,
-      fill: ep.swatchChipFill,
+    const line = createSVGElement('line');
+    line.setAttribute('class', 'oc-endpoint-swatch-line');
+    setAttrs(line, {
+      x1: chipX,
+      y1: rowY,
+      x2: chipX + chipWidth,
+      y2: rowY,
+      stroke: entry.color,
+      'stroke-width': 2,
+      'stroke-linecap': 'round',
     });
-    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 = createSVGElement('rect');
-    bar.setAttribute('class', 'oc-endpoint-swatch-bar');
-    setAttrs(bar, {
-      x: barX,
-      y: barY,
-      width: barWidth,
-      height: barHeight,
-      rx: barHeight / 2,
-      ry: barHeight / 2,
-      fill: entry.color,
-    });
-    entryG.appendChild(bar);
+    entryG.appendChild(line);
 
     // Label text. Multi-line via tspans when wrapped.
     const label = createSVGElement('text');

package/src/renderers/legend.ts

@@ -60,53 +60,47 @@ export function renderLegend(parent: SVGElement, legend: LegendLayout): void {
       }
     }
 
-    // Swatch
-    // The default ('square') and 'line' shapes render as a "chip": a small
-    // rounded rectangle in a subtle elevated surface tone with a colored
-    // rounded bar through the middle. Matches the editorial mock-2 legend
-    // and the endpoint-labels swatch so a chart never shows two swatch styles.
-    // 'circle' is preserved for point/scatter charts.
+    // Swatch: bare colored mark matching the chart type.
+    // Circle for point/scatter, line segment for line/area, filled rect for bar.
+    const midX = offsetX + legend.swatchSize / 2;
+    const midY = offsetY + legend.swatchSize / 2;
     if (entry.shape === 'circle') {
       const circle = createSVGElement('circle');
       setAttrs(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 = createSVGElement('rect');
-      chip.setAttribute('class', 'oc-legend-swatch-chip');
-      setAttrs(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 = createSVGElement('line');
+      line.setAttribute('class', 'oc-legend-swatch-line');
+      setAttrs(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 = createSVGElement('rect');
-      bar.setAttribute('class', 'oc-legend-swatch-bar');
-      setAttrs(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 = createSVGElement('rect');
+      rect.setAttribute('class', 'oc-legend-swatch-rect');
+      setAttrs(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);
     }
 
     // Label