@opendata-ai/openchart-engine 7.4.1 → 7.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "7.4.1",
+  "version": "7.6.0",
   "description": "Headless compiler for openchart: spec validation, data compilation, scales, and layout",
   "license": "Apache-2.0",
   "author": "Riley Hilliard",
@@ -48,7 +48,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@opendata-ai/openchart-core": "7.4.1",
+    "@opendata-ai/openchart-core": "7.6.0",
     "d3-array": "^3.2.0",
     "d3-format": "^3.1.2",
     "d3-interpolate": "^3.0.0",

package/src/charts/scatter/__tests__/compute.test.ts

@@ -3,6 +3,7 @@ import { describe, expect, it } from 'vitest';
 import type { NormalizedChartSpec } from '../../../compiler/types';
 import { computeScales } from '../../../layout/scales';
 import { computeScatterMarks } from '../compute';
+import { scatterRenderer } from '../index';
 import { computeTrendLine } from '../trendline';
 
 // ---------------------------------------------------------------------------
@@ -179,6 +180,40 @@ describe('computeScatterMarks', () => {
 
       expect(marks[0].aria.label).toContain('population=');
     });
+
+    it('explicit size domain keeps the largest datum below the max radius', () => {
+      const base = makeBubbleSpec();
+      // Widen the domain past the data max (8000) so nothing reaches radius 30.
+      const spec: NormalizedChartSpec = {
+        ...base,
+        encoding: {
+          ...base.encoding,
+          size: { field: 'population', type: 'quantitative', scale: { domain: [0, 32000] } },
+        },
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeScatterMarks(spec, scales, chartArea, fullStrategy);
+
+      const largest = marks.find((m) => m.data.population === 8000)!;
+      // sqrt(8000/32000) * 30 = 0.5 * 30 = 15, well under the 30px cap.
+      expect(largest.r).toBeLessThan(20);
+    });
+
+    it('explicit size range caps the radii', () => {
+      const base = makeBubbleSpec();
+      const spec: NormalizedChartSpec = {
+        ...base,
+        encoding: {
+          ...base.encoding,
+          size: { field: 'population', type: 'quantitative', scale: { range: [2, 12] } },
+        },
+      };
+      const scales = computeScales(spec, chartArea, spec.data);
+      const marks = computeScatterMarks(spec, scales, chartArea, fullStrategy);
+
+      const maxRadius = Math.max(...marks.map((m) => m.r));
+      expect(maxRadius).toBeLessThanOrEqual(12);
+    });
   });
 
   describe('color encoding', () => {
@@ -428,3 +463,26 @@ describe('computeTrendLine', () => {
     expect(computeTrendLine([])).toBeNull();
   });
 });
+
+describe('trendline opt-out', () => {
+  it('renders a trend line by default', () => {
+    const spec = makeBasicScatterSpec();
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = scatterRenderer(spec, scales, chartArea, fullStrategy, undefined as never);
+
+    expect(marks.some((m) => m.type === 'line')).toBe(true);
+  });
+
+  it('suppresses the trend line when mark.trendline is false', () => {
+    const base = makeBasicScatterSpec();
+    const spec: NormalizedChartSpec = {
+      ...base,
+      markDef: { type: 'point', trendline: false },
+    };
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = scatterRenderer(spec, scales, chartArea, fullStrategy, undefined as never);
+
+    expect(marks.some((m) => m.type === 'line')).toBe(false);
+    expect(marks.every((m) => m.type === 'point')).toBe(true);
+  });
+});

package/src/charts/scatter/compute.ts

@@ -113,19 +113,24 @@ export function computeScatterMarks(
   const colorEnc = encoding.color && 'field' in encoding.color ? encoding.color : undefined;
   const isSequentialColor = colorEnc?.type === 'quantitative';
   const colorField = colorEnc?.field;
-  const sizeField = encoding.size && 'field' in encoding.size ? encoding.size.field : undefined;
+  const sizeEnc = encoding.size && 'field' in encoding.size ? encoding.size : undefined;
+  const sizeField = sizeEnc?.field;
 
-  // Build a size scale for bubble variant
+  // Build a size scale for bubble variant. Domain and radius range are
+  // author-overridable via `encoding.size.scale.{domain,range}`: an explicit
+  // domain (e.g. [0, 900]) keeps the largest datum below the max radius so
+  // dense clusters don't blob together, and an explicit range caps the radii.
   let sizeScale: ((v: number) => number) | undefined;
   if (sizeField) {
     const sizeValues = spec.data.map((d) => Number(d[sizeField])).filter((v) => Number.isFinite(v));
 
-    const sizeMin = min(sizeValues) ?? 0;
-    const sizeMax = max(sizeValues) ?? 1;
+    const explicitDomain = sizeEnc?.scale?.domain as [number, number] | undefined;
+    const [sizeMin, sizeMax] = explicitDomain ?? [min(sizeValues) ?? 0, max(sizeValues) ?? 1];
 
-    sizeScale = scaleSqrt()
-      .domain([sizeMin, sizeMax])
-      .range([MIN_BUBBLE_RADIUS, MAX_BUBBLE_RADIUS]);
+    const explicitRange = sizeEnc?.scale?.range as [number, number] | undefined;
+    const [radiusMin, radiusMax] = explicitRange ?? [MIN_BUBBLE_RADIUS, MAX_BUBBLE_RADIUS];
+
+    sizeScale = scaleSqrt().domain([sizeMin, sizeMax]).range([radiusMin, radiusMax]).clamp(true);
   }
 
   const marks: PointMark[] = [];

package/src/charts/scatter/index.ts

@@ -23,11 +23,16 @@ export const scatterRenderer: ChartRenderer = (spec, scales, chartArea, strategy
   const pointMarks = computeScatterMarks(spec, scales, chartArea, strategy);
   const marks: Mark[] = [...pointMarks];
 
-  // Add trend line if there are enough points
-  const trendLine = computeTrendLine(pointMarks);
-  if (trendLine) {
-    // Trend line goes behind points
-    marks.unshift(trendLine);
+  // Regression trend line renders by default but is opt-out via
+  // `mark: { type: 'point', trendline: false }`. Rendering it unconditionally
+  // competed with author-drawn reference lines (e.g. a manual x=y diagonal),
+  // so a chart could show two diagonals.
+  if (spec.markDef?.trendline !== false) {
+    const trendLine = computeTrendLine(pointMarks);
+    if (trendLine) {
+      // Trend line goes behind points
+      marks.unshift(trendLine);
+    }
   }
 
   return marks;