@opendata-ai/openchart-engine 7.4.0 → 7.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opendata-ai/openchart-engine",
-  "version": "7.4.0",
+  "version": "7.5.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.0",
+    "@opendata-ai/openchart-core": "7.5.0",
     "d3-array": "^3.2.0",
     "d3-format": "^3.1.2",
     "d3-interpolate": "^3.0.0",

package/src/__tests__/legend.test.ts

@@ -548,4 +548,58 @@ describe('computeLegend', () => {
       expect(legend.rowHeight).toBeGreaterThan(0);
     });
   });
+
+  describe('rows missing the color field', () => {
+    // A layered spec flattens every layer's rows into `spec.data`, but the
+    // color encoding belongs to one layer. Rows from sibling layers (e.g. a
+    // diagonal reference-line) have no value for the color field and must not
+    // manufacture a phantom "undefined" legend entry.
+    it('ignores rows whose color field is undefined', () => {
+      const spec: NormalizedChartSpec = {
+        ...specWithColor,
+        data: [
+          { date: '2020', value: 10, country: 'US' },
+          { date: '2021', value: 20, country: 'UK' },
+          // rule-layer rows: no `country` field
+          { date: '2020', value: 0 },
+          { date: '2022', value: 40 },
+        ],
+      };
+      const legend = computeLegend(spec, fullStrategy, theme, chartArea);
+      expect(legend.entries.map((e) => e.label)).toEqual(['US', 'UK']);
+    });
+
+    it('keeps an explicit color domain authoritative despite phantom rows', () => {
+      const spec: NormalizedChartSpec = {
+        ...specWithColor,
+        data: [
+          { date: '2020', value: 10, tier: 'One F from takeover' },
+          { date: '2021', value: 20, tier: 'One year behind' },
+          { date: '2022', value: 30, tier: 'Other D/F campus' },
+          // diagonal reference-line layer, no `tier`
+          { date: '2020', value: 0 },
+          { date: '2022', value: 40 },
+        ],
+        encoding: {
+          x: { field: 'date', type: 'temporal' },
+          y: { field: 'value', type: 'quantitative' },
+          color: {
+            field: 'tier',
+            type: 'nominal',
+            scale: {
+              domain: ['One F from takeover', 'One year behind', 'Other D/F campus'],
+              range: ['#fb7185', '#f59e0b', '#64748b'],
+            },
+          },
+        },
+      };
+      const legend = computeLegend(spec, fullStrategy, theme, chartArea);
+      expect(legend.entries.map((e) => e.label)).toEqual([
+        'One F from takeover',
+        'One year behind',
+        'Other D/F campus',
+      ]);
+      expect(legend.entries).toHaveLength(3);
+    });
+  });
 });

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

@@ -179,6 +179,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', () => {

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/legend/compute.ts

@@ -144,7 +144,15 @@ function extractColorEntries(spec: NormalizedChartSpec, theme: ResolvedTheme): L
   // Sequential (quantitative) color doesn't produce discrete legend entries
   if (colorEnc.type === 'quantitative') return [];
 
-  const dataValues = [...new Set(spec.data.map((d) => String(d[colorEnc.field])))];
+  // Rows missing the color field (e.g. a sibling layer in a layered spec whose
+  // marks don't participate in the color encoding) must not manufacture a legend
+  // category. Without this guard, `String(undefined)` seeds a phantom "undefined"
+  // entry and — with an explicit domain — appends it past the authored entries.
+  const dataValues = [
+    ...new Set(
+      spec.data.filter((d) => d[colorEnc.field] != null).map((d) => String(d[colorEnc.field])),
+    ),
+  ];
   const explicitDomain = colorEnc.scale?.domain as string[] | undefined;
   const explicitRange = colorEnc.scale?.range as string[] | undefined;
   const palette = explicitRange ?? theme.colors.categorical;