@opendata-ai/openchart-engine 7.2.4 → 7.3.0

package/package.json

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

package/src/__tests__/__snapshots__/compile-snapshot.test.ts.snap

@@ -37,8 +37,8 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
   "annotations": [],
   "area": {
     "height": 296.1,
-    "width": 541.73,
-    "x": 35.269999999999996,
+    "width": 540.058,
+    "x": 36.942,
     "y": 60.9,
   },
   "axes": {
@@ -48,6 +48,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
         "x": 577,
         "y": 357,
       },
+      "extent": 26,
       "gridlines": [],
       "label": undefined,
       "labelFlush": undefined,
@@ -63,7 +64,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
       "offset": undefined,
       "orient": undefined,
       "start": {
-        "x": 35.269999999999996,
+        "x": 36.942,
         "y": 357,
       },
       "tickAngle": undefined,
@@ -80,17 +81,17 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
       "ticks": [
         {
           "label": "0",
-          "position": 35.269999999999996,
+          "position": 36.942,
           "value": 0,
         },
         {
           "label": "20",
-          "position": 251.96200000000002,
+          "position": 252.9652,
           "value": 20,
         },
         {
           "label": "40",
-          "position": 468.654,
+          "position": 468.9884,
           "value": 40,
         },
       ],
@@ -99,7 +100,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
     "y": {
       "domainLine": undefined,
       "end": {
-        "x": 35.269999999999996,
+        "x": 36.942,
         "y": 357,
       },
       "gridlines": [
@@ -130,7 +131,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
       "offset": undefined,
       "orient": undefined,
       "start": {
-        "x": 35.269999999999996,
+        "x": 36.942,
         "y": 60.9,
       },
       "tickAngle": undefined,
@@ -165,6 +166,7 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
     },
   },
   "chrome": {
+    "bottomAnchorY": 383,
     "bottomHeight": 0,
     "title": {
       "maxWidth": 561,
@@ -236,13 +238,13 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
         },
         "text": "10",
         "visible": true,
-        "x": 137.616,
+        "x": 138.9536,
         "y": 297.33805970149257,
       },
       "orient": "horizontal",
       "type": "rect",
-      "width": 108.34600000000002,
-      "x": 35.269999999999996,
+      "width": 108.01159999999999,
+      "x": 36.942,
       "y": 268.6119402985075,
     },
     {
@@ -269,13 +271,13 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
         },
         "text": "25",
         "visible": true,
-        "x": 300.135,
+        "x": 300.971,
         "y": 208.95000000000002,
       },
       "orient": "horizontal",
       "type": "rect",
-      "width": 270.865,
-      "x": 35.269999999999996,
+      "width": 270.029,
+      "x": 36.942,
       "y": 180.22388059701493,
     },
     {
@@ -302,13 +304,13 @@ exports[`compileChart snapshot (Step 7 oracle) > clipped-domain bar chart (data
         },
         "text": "40",
         "visible": true,
-        "x": 462.654,
+        "x": 462.9884,
         "y": 120.56194029850745,
       },
       "orient": "horizontal",
       "type": "rect",
-      "width": 433.384,
-      "x": 35.269999999999996,
+      "width": 432.0464,
+      "x": 36.942,
       "y": 91.83582089552237,
     },
   ],
@@ -582,7 +584,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
   "annotations": [],
   "area": {
     "height": 305.4,
-    "width": 631.899,
+    "width": 625.76115,
     "x": 26,
     "y": 105.2,
   },
@@ -711,6 +713,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
     },
   },
   "chrome": {
+    "bottomAnchorY": 436.59999999999997,
     "bottomHeight": 43.4,
     "source": {
       "maxWidth": 755,
@@ -768,8 +771,8 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
   "endpointLabels": {
     "bounds": {
       "height": 305.4,
-      "width": 45.561,
-      "x": 675.899,
+      "width": 48.95985,
+      "x": 669.76115,
       "y": 105.2,
     },
     "entries": [
@@ -781,12 +784,12 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         ],
         "labelY": 105.2,
         "marker": {
-          "dataX": 657.899,
+          "dataX": 651.76115,
           "fill": "transparent",
           "radius": 4,
           "stroke": "#06b6d4",
           "strokeWidth": 2,
-          "x": 661.899,
+          "x": 655.76115,
           "y": 105.2,
         },
         "seriesKey": "US",
@@ -801,12 +804,12 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         ],
         "labelY": 139.95,
         "marker": {
-          "dataX": 657.899,
+          "dataX": 651.76115,
           "fill": "transparent",
           "radius": 4,
           "stroke": "#ee4a73",
           "strokeWidth": 2,
-          "x": 661.899,
+          "x": 655.76115,
           "y": 143.375,
         },
         "seriesKey": "UK",
@@ -821,12 +824,12 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         ],
         "labelY": 236.12999999999997,
         "marker": {
-          "dataX": 657.899,
+          "dataX": 651.76115,
           "fill": "transparent",
           "radius": 4,
           "stroke": "#00b054",
           "strokeWidth": 2,
-          "x": 661.899,
+          "x": 655.76115,
           "y": 242.62999999999997,
         },
         "seriesKey": "FR",
@@ -841,12 +844,12 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
         ],
         "labelY": 190.32,
         "marker": {
-          "dataX": 657.899,
+          "dataX": 651.76115,
           "fill": "transparent",
           "radius": 4,
           "stroke": "#a46bf5",
           "strokeWidth": 2,
-          "x": 661.899,
+          "x": 655.76115,
           "y": 196.82,
         },
         "seriesKey": "DE",
@@ -876,8 +879,8 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
   "legend": {
     "bounds": {
       "height": 85.2,
-      "width": 46.54,
-      "x": 665.899,
+      "width": 49.278999999999996,
+      "x": 659.76115,
       "y": 105.2,
     },
     "entries": [
@@ -907,6 +910,40 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
       },
     ],
     "entryGap": 4,
+    "entryPositions": [
+      {
+        "labelX": 677.76115,
+        "labelY": 111.2,
+        "row": 0,
+        "width": 37.278999999999996,
+        "x": 659.76115,
+        "y": 105.2,
+      },
+      {
+        "labelX": 677.76115,
+        "labelY": 129.5,
+        "row": 1,
+        "width": 37.278999999999996,
+        "x": 659.76115,
+        "y": 123.5,
+      },
+      {
+        "labelX": 677.76115,
+        "labelY": 147.8,
+        "row": 2,
+        "width": 36.663,
+        "x": 659.76115,
+        "y": 141.8,
+      },
+      {
+        "labelX": 677.76115,
+        "labelY": 166.10000000000002,
+        "row": 3,
+        "width": 37.278999999999996,
+        "x": 659.76115,
+        "y": 160.10000000000002,
+      },
+    ],
     "labelStyle": {
       "fill": "#09090b",
       "fontFamily": ""Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif",
@@ -915,6 +952,7 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
       "lineHeight": 1.3,
     },
     "position": "right",
+    "rowHeight": 18.3,
     "swatchChipFill": "rgba(0,0,0,0.04)",
     "swatchGap": 6,
     "swatchSize": 12,
@@ -991,19 +1029,19 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
             ],
             "title": "2021",
           },
-          "x": 657.899,
+          "x": 651.76115,
           "y": 105.2,
         },
       ],
       "opacity": undefined,
-      "path": "M47,334.25L657.899,105.2",
+      "path": "M47,334.25L651.761,105.2",
       "points": [
         {
           "x": 47,
           "y": 334.25,
         },
         {
-          "x": 657.899,
+          "x": 651.76115,
           "y": 105.2,
         },
       ],
@@ -1083,19 +1121,19 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
             ],
             "title": "2021",
           },
-          "x": 657.899,
+          "x": 651.76115,
           "y": 143.375,
         },
       ],
       "opacity": undefined,
-      "path": "M47,296.075L657.899,143.375",
+      "path": "M47,296.075L651.761,143.375",
       "points": [
         {
           "x": 47,
           "y": 296.075,
         },
         {
-          "x": 657.899,
+          "x": 651.76115,
           "y": 143.375,
         },
       ],
@@ -1175,19 +1213,19 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
             ],
             "title": "2021",
           },
-          "x": 657.899,
+          "x": 651.76115,
           "y": 242.62999999999997,
         },
       ],
       "opacity": undefined,
-      "path": "M47,349.52L657.899,242.63",
+      "path": "M47,349.52L651.761,242.63",
       "points": [
         {
           "x": 47,
           "y": 349.52000000000004,
         },
         {
-          "x": 657.899,
+          "x": 651.76115,
           "y": 242.62999999999997,
         },
       ],
@@ -1267,19 +1305,19 @@ exports[`compileChart snapshot (Step 7 oracle) > legend-heavy multi-series line
             ],
             "title": "2021",
           },
-          "x": 657.899,
+          "x": 651.76115,
           "y": 196.82,
         },
       ],
       "opacity": undefined,
-      "path": "M47,318.98L657.899,196.82",
+      "path": "M47,318.98L651.761,196.82",
       "points": [
         {
           "x": 47,
           "y": 318.97999999999996,
         },
         {
-          "x": 657.899,
+          "x": 651.76115,
           "y": 196.82,
         },
       ],
@@ -1483,8 +1521,8 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
   "annotations": [],
   "area": {
     "height": 236.3,
-    "width": 535.46,
-    "x": 41.54,
+    "width": 537.768,
+    "x": 39.232,
     "y": 60.9,
   },
   "axes": {
@@ -1494,6 +1532,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
         "x": 577,
         "y": 297.2,
       },
+      "extent": 26,
       "gridlines": [],
       "label": undefined,
       "labelFlush": undefined,
@@ -1509,7 +1548,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
       "offset": undefined,
       "orient": undefined,
       "start": {
-        "x": 41.54,
+        "x": 39.232,
         "y": 297.2,
       },
       "tickAngle": undefined,
@@ -1526,22 +1565,22 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
       "ticks": [
         {
           "label": "A",
-          "position": 124.62862068965518,
+          "position": 122.67875862068962,
           "value": "A",
         },
         {
           "label": "B",
-          "position": 247.7228735632184,
+          "position": 246.30358620689654,
           "value": "B",
         },
         {
           "label": "C",
-          "position": 370.8171264367816,
+          "position": 369.92841379310346,
           "value": "C",
         },
         {
           "label": "D",
-          "position": 493.9113793103449,
+          "position": 493.55324137931035,
           "value": "D",
         },
       ],
@@ -1550,7 +1589,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
     "y": {
       "domainLine": undefined,
       "end": {
-        "x": 41.54,
+        "x": 39.232,
         "y": 297.2,
       },
       "gridlines": [
@@ -1558,18 +1597,34 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
           "major": true,
           "position": 297.2,
         },
+        {
+          "major": true,
+          "position": 263.4428571428572,
+        },
         {
           "major": true,
           "position": 229.68571428571428,
         },
+        {
+          "major": true,
+          "position": 195.92857142857142,
+        },
         {
           "major": true,
           "position": 162.17142857142858,
         },
+        {
+          "major": true,
+          "position": 128.4142857142857,
+        },
         {
           "major": true,
           "position": 94.65714285714287,
         },
+        {
+          "major": true,
+          "position": 60.9,
+        },
       ],
       "label": undefined,
       "labelFlush": undefined,
@@ -1585,7 +1640,7 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
       "offset": undefined,
       "orient": undefined,
       "start": {
-        "x": 41.54,
+        "x": 39.232,
         "y": 60.9,
       },
       "tickAngle": undefined,
@@ -1605,26 +1660,47 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
           "position": 297.2,
           "value": 0,
         },
+        {
+          "label": "10",
+          "position": 263.4428571428572,
+          "value": 10,
+        },
         {
           "label": "20",
           "position": 229.68571428571428,
           "value": 20,
         },
+        {
+          "label": "30",
+          "position": 195.92857142857142,
+          "value": 30,
+        },
         {
           "label": "40",
           "position": 162.17142857142858,
           "value": 40,
         },
+        {
+          "label": "50",
+          "position": 128.4142857142857,
+          "value": 50,
+        },
         {
           "label": "60",
           "position": 94.65714285714287,
           "value": 60,
         },
+        {
+          "label": "70",
+          "position": 60.9,
+          "value": 70,
+        },
       ],
       "titlePadding": undefined,
     },
   },
   "chrome": {
+    "bottomAnchorY": 323.2,
     "bottomHeight": 59.8,
     "byline": {
       "maxWidth": 431,
@@ -1738,13 +1814,13 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
         },
         "text": "30",
         "visible": true,
-        "x": 124.62862068965518,
+        "x": 122.67875862068962,
         "y": 175.92857142857142,
       },
       "orient": "vertical",
       "type": "rect",
-      "width": 80.01126436781611,
-      "x": 84.62298850574712,
+      "width": 80.3561379310345,
+      "x": 82.50068965517238,
       "y": 195.92857142857142,
     },
     {
@@ -1783,13 +1859,13 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
         },
         "text": "55",
         "visible": true,
-        "x": 247.7228735632184,
+        "x": 246.30358620689654,
         "y": 91.53571428571429,
       },
       "orient": "vertical",
       "type": "rect",
-      "width": 80.01126436781611,
-      "x": 207.71724137931034,
+      "width": 80.3561379310345,
+      "x": 206.1255172413793,
       "y": 111.53571428571429,
     },
     {
@@ -1828,13 +1904,13 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
         },
         "text": "70",
         "visible": true,
-        "x": 370.8171264367816,
+        "x": 369.92841379310346,
         "y": 40.9,
       },
       "orient": "vertical",
       "type": "rect",
-      "width": 80.01126436781611,
-      "x": 330.81149425287356,
+      "width": 80.3561379310345,
+      "x": 329.7503448275862,
       "y": 60.9,
     },
     {
@@ -1873,13 +1949,13 @@ exports[`compileChart snapshot (Step 7 oracle) > watermarked column chart with g
         },
         "text": "45",
         "visible": true,
-        "x": 493.9113793103449,
+        "x": 493.55324137931035,
         "y": 125.29285714285712,
       },
       "orient": "vertical",
       "type": "rect",
-      "width": 80.01126436781611,
-      "x": 453.90574712643684,
+      "width": 80.3561379310345,
+      "x": 453.3751724137931,
       "y": 145.29285714285712,
     },
   ],

package/src/__tests__/axes.test.ts

@@ -1,4 +1,4 @@
-import type { AxisTick, LayoutStrategy } from '@opendata-ai/openchart-core';
+import type { AxisTick, Encoding, LayoutStrategy } from '@opendata-ai/openchart-core';
 import { resolveTheme } from '@opendata-ai/openchart-core';
 import { scaleLinear, scaleLog } from 'd3-scale';
 import { describe, expect, it } from 'vitest';
@@ -1057,3 +1057,69 @@ describe('axis tickPosition', () => {
     expect(axes.y!.tickPosition).toBe('gutter');
   });
 });
+
+describe('axis extent and titlePosition', () => {
+  it('emits x-axis extent for a basic line chart', () => {
+    const scales = computeScales(lineSpec, chartArea, lineSpec.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme);
+
+    expect(axes.x!.extent).toBeGreaterThan(0);
+    expect(axes.x!.extent).toBeLessThan(200);
+  });
+
+  it('extent is larger when axis has a title', () => {
+    const specWithTitle: NormalizedChartSpec = {
+      ...lineSpec,
+      encoding: {
+        ...lineSpec.encoding,
+        x: { ...lineSpec.encoding.x, axis: { title: 'Year' } },
+      },
+    };
+    const scales = computeScales(specWithTitle, chartArea, specWithTitle.data);
+    const axesWithTitle = computeAxes(scales, chartArea, fullStrategy, theme);
+
+    const scalesNoTitle = computeScales(lineSpec, chartArea, lineSpec.data);
+    const axesNoTitle = computeAxes(scalesNoTitle, chartArea, fullStrategy, theme);
+
+    expect(axesWithTitle.x!.extent).toBeGreaterThan(axesNoTitle.x!.extent!);
+  });
+
+  it('emits titlePosition for x-axis with title', () => {
+    const specWithTitle: NormalizedChartSpec = {
+      ...lineSpec,
+      encoding: {
+        ...lineSpec.encoding,
+        x: { ...lineSpec.encoding.x, axis: { title: 'Year' } },
+      },
+    };
+    const scales = computeScales(specWithTitle, chartArea, specWithTitle.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme);
+
+    expect(axes.x!.titlePosition).toBeDefined();
+    expect(axes.x!.titlePosition!.x).toBeCloseTo(chartArea.x + chartArea.width / 2, 0);
+    expect(axes.x!.titlePosition!.y).toBeGreaterThan(chartArea.y + chartArea.height);
+  });
+
+  it('emits titlePosition for y-axis with title', () => {
+    const specWithYTitle: NormalizedChartSpec = {
+      ...lineSpec,
+      encoding: {
+        ...lineSpec.encoding,
+        y: { ...lineSpec.encoding.y, axis: { title: 'Value' } },
+      },
+    };
+    const scales = computeScales(specWithYTitle, chartArea, specWithYTitle.data);
+    const axes = computeAxes(scales, chartArea, fullStrategy, theme, undefined, {
+      data: specWithYTitle.data,
+      encoding: specWithYTitle.encoding as Encoding,
+      skipX: false,
+      skipY: false,
+      markType: 'line',
+      totalWidth: 600,
+    });
+
+    expect(axes.y!.titlePosition).toBeDefined();
+    expect(axes.y!.titlePosition!.x).toBeLessThan(chartArea.x);
+    expect(axes.y!.titlePosition!.angle).toBe(-90);
+  });
+});

package/src/__tests__/compile-chart.test.ts

@@ -123,6 +123,12 @@ describe('compileChart', () => {
     expect(layout.chrome.source!.style.fontSize).toBeGreaterThan(0);
   });
 
+  it('emits bottomAnchorY below the chart area', () => {
+    const layout = compileChart(lineSpec, { width: 600, height: 400 });
+    expect(layout.chrome.bottomAnchorY).toBeDefined();
+    expect(layout.chrome.bottomAnchorY).toBeGreaterThanOrEqual(layout.area.y + layout.area.height);
+  });
+
   it('has axes with ticks and valid positions for a line chart', () => {
     const layout = compileChart(lineSpec, { width: 600, height: 400 });