@opendata-ai/openchart-engine 3.0.0 → 6.1.0

package/src/charts/line/__tests__/mark-options.test.ts

@@ -0,0 +1,175 @@
+import type { LayoutStrategy, LineMark, PointMark, Rect } from '@opendata-ai/openchart-core';
+import { describe, expect, it } from 'vitest';
+import type { NormalizedChartSpec } from '../../../compiler/types';
+import { computeScales } from '../../../layout/scales';
+import { computeLineMarks } from '../compute';
+
+// ---------------------------------------------------------------------------
+// Shared fixtures
+// ---------------------------------------------------------------------------
+
+const chartArea: Rect = { x: 50, y: 20, width: 500, height: 300 };
+
+const fullStrategy: LayoutStrategy = {
+  labelMode: 'all',
+  legendPosition: 'right',
+  annotationPosition: 'inline',
+  axisLabelDensity: 'full',
+};
+
+function makeSpec(markDef: NormalizedChartSpec['markDef']): NormalizedChartSpec {
+  return {
+    markType: 'line',
+    markDef,
+    data: [
+      { date: '2020-01-01', value: 10 },
+      { date: '2021-01-01', value: 40 },
+      { date: '2022-01-01', value: 30 },
+    ],
+    encoding: {
+      x: { field: 'date', type: 'temporal' },
+      y: { field: 'value', type: 'quantitative' },
+    },
+    chrome: {},
+    annotations: [],
+    responsive: true,
+    theme: {},
+    darkMode: 'off',
+    labels: { density: 'auto', format: '' },
+    hiddenSeries: [],
+    seriesStyles: {},
+  };
+}
+
+// ---------------------------------------------------------------------------
+// markDef.point controls PointMark emission
+// ---------------------------------------------------------------------------
+
+describe('markDef.point controls PointMark emission', () => {
+  it('does not emit PointMark when point is undefined (default)', () => {
+    const spec = makeSpec({ type: 'line' });
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+    const lineMarks = marks.filter((m) => m.type === 'line');
+    const pointMarks = marks.filter((m) => m.type === 'point');
+
+    expect(lineMarks.length).toBeGreaterThan(0);
+    expect(pointMarks.length).toBe(0);
+  });
+
+  it('does not emit PointMark when point is false', () => {
+    const spec = makeSpec({ type: 'line', point: false });
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+    const pointMarks = marks.filter((m) => m.type === 'point');
+    expect(pointMarks.length).toBe(0);
+  });
+
+  it('emits visible PointMark when point is true', () => {
+    const spec = makeSpec({ type: 'line', point: true });
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+    const pointMarks = marks.filter((m) => m.type === 'point') as PointMark[];
+    expect(pointMarks.length).toBe(3); // One per data point
+
+    // Points should have a non-zero radius (visible)
+    for (const p of pointMarks) {
+      expect(p.r).toBeGreaterThan(0);
+    }
+  });
+
+  it('emits transparent PointMark when point is "transparent"', () => {
+    const spec = makeSpec({ type: 'line', point: 'transparent' });
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+    const pointMarks = marks.filter((m) => m.type === 'point') as PointMark[];
+    expect(pointMarks.length).toBe(3);
+
+    // Transparent points have zero radius and zero opacity
+    for (const p of pointMarks) {
+      expect(p.r).toBe(0);
+      expect(p.fillOpacity).toBe(0);
+    }
+  });
+});
+
+// ---------------------------------------------------------------------------
+// dataPoints on LineMark
+// ---------------------------------------------------------------------------
+
+describe('LineMark.dataPoints', () => {
+  it('populates dataPoints with pixel coordinates and original data', () => {
+    const spec = makeSpec({ type: 'line' });
+    const scales = computeScales(spec, chartArea, spec.data);
+    const marks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+
+    const lineMarks = marks.filter((m) => m.type === 'line') as LineMark[];
+    expect(lineMarks.length).toBe(1);
+
+    const lineMark = lineMarks[0];
+    expect(lineMark.dataPoints).toBeDefined();
+    expect(lineMark.dataPoints!.length).toBe(3);
+
+    for (const dp of lineMark.dataPoints!) {
+      expect(typeof dp.x).toBe('number');
+      expect(typeof dp.y).toBe('number');
+      expect(dp.datum).toBeDefined();
+      expect(dp.datum.date).toBeDefined();
+      expect(dp.datum.value).toBeDefined();
+    }
+  });
+});
+
+// ---------------------------------------------------------------------------
+// markDef.interpolate affects line path computation
+// ---------------------------------------------------------------------------
+
+describe('markDef.interpolate affects line generation', () => {
+  it('produces different paths for different interpolation modes', () => {
+    const defaultSpec = makeSpec({ type: 'line' });
+    const linearSpec = makeSpec({ type: 'line', interpolate: 'linear' });
+    const stepSpec = makeSpec({ type: 'line', interpolate: 'step' });
+
+    const defaultScales = computeScales(defaultSpec, chartArea, defaultSpec.data);
+    const linearScales = computeScales(linearSpec, chartArea, linearSpec.data);
+    const stepScales = computeScales(stepSpec, chartArea, stepSpec.data);
+
+    const defaultMarks = computeLineMarks(defaultSpec, defaultScales, chartArea, fullStrategy);
+    const linearMarks = computeLineMarks(linearSpec, linearScales, chartArea, fullStrategy);
+    const stepMarks = computeLineMarks(stepSpec, stepScales, chartArea, fullStrategy);
+
+    const defaultLine = defaultMarks.find((m) => m.type === 'line') as LineMark;
+    const linearLine = linearMarks.find((m) => m.type === 'line') as LineMark;
+    const stepLine = stepMarks.find((m) => m.type === 'line') as LineMark;
+
+    // Default (monotone) and linear should produce different paths
+    expect(defaultLine.path).not.toBe(linearLine.path);
+    // Linear and step should produce different paths
+    expect(linearLine.path).not.toBe(stepLine.path);
+    // All paths should be non-empty
+    expect(defaultLine.path!.length).toBeGreaterThan(0);
+    expect(linearLine.path!.length).toBeGreaterThan(0);
+    expect(stepLine.path!.length).toBeGreaterThan(0);
+  });
+
+  it('uses monotone interpolation by default', () => {
+    const spec = makeSpec({ type: 'line' });
+    const monotoneSpec = makeSpec({ type: 'line', interpolate: 'monotone' });
+
+    const scales = computeScales(spec, chartArea, spec.data);
+    const monotoneScales = computeScales(monotoneSpec, chartArea, monotoneSpec.data);
+
+    const defaultMarks = computeLineMarks(spec, scales, chartArea, fullStrategy);
+    const monotoneMarks = computeLineMarks(monotoneSpec, monotoneScales, chartArea, fullStrategy);
+
+    const defaultLine = defaultMarks.find((m) => m.type === 'line') as LineMark;
+    const monotoneLine = monotoneMarks.find((m) => m.type === 'line') as LineMark;
+
+    // Default and explicit monotone should produce the same path
+    expect(defaultLine.path).toBe(monotoneLine.path);
+  });
+});

package/src/charts/line/area.ts

@@ -8,11 +8,12 @@
 
 import type { AreaMark, DataRow, Encoding, MarkAria, Rect } from '@opendata-ai/openchart-core';
 import type { ScaleLinear } from 'd3-scale';
-import { area, curveMonotoneX, line, stack, stackOffsetNone, stackOrderNone } from 'd3-shape';
+import { area, line, stack, stackOffsetNone, stackOrderNone } from 'd3-shape';
 
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
 import { getColor, scaleValue, sortByField } from '../utils';
+import { resolveCurve } from './curves';
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -42,7 +43,7 @@ function computeSingleArea(
   const baselineY = yScale(Math.min(domain[0], domain[1]));
 
   // Group by color field
-  const colorField = encoding.color?.field;
+  const colorField = encoding.color && 'field' in encoding.color ? encoding.color.field : undefined;
   const groups = new Map<string, DataRow[]>();
 
   if (!colorField) {
@@ -86,12 +87,13 @@ function computeSingleArea(
 
     if (validPoints.length === 0) continue;
 
-    // Build the area path
+    // Build the area path with configured interpolation
+    const curve = resolveCurve(spec.markDef.interpolate);
     const areaGenerator = area<{ x: number; yTop: number; yBottom: number }>()
       .x((d) => d.x)
       .y0((d) => d.yBottom)
       .y1((d) => d.yTop)
-      .curve(curveMonotoneX);
+      .curve(curve);
 
     const pathStr = areaGenerator(validPoints) ?? '';
 
@@ -99,7 +101,7 @@ function computeSingleArea(
     const topLineGenerator = line<{ x: number; yTop: number }>()
       .x((d) => d.x)
       .y((d) => d.yTop)
-      .curve(curveMonotoneX);
+      .curve(curve);
     const topPathStr = topLineGenerator(validPoints) ?? '';
 
     const topPoints = validPoints.map((p) => ({ x: p.x, y: p.yTop }));
@@ -124,6 +126,7 @@ function computeSingleArea(
       strokeWidth: 2,
       seriesKey: seriesKey === '__default__' ? undefined : seriesKey,
       data: validPoints.map((p) => p.row),
+      dataPoints: validPoints.map((p) => ({ x: p.x, y: p.yTop, datum: p.row })),
       aria,
     });
   }
@@ -143,7 +146,7 @@ function computeStackedArea(
   const encoding = spec.encoding as Encoding;
   const xChannel = encoding.x;
   const yChannel = encoding.y;
-  const colorField = encoding.color?.field;
+  const colorField = encoding.color && 'field' in encoding.color ? encoding.color.field : undefined;
 
   if (!xChannel || !yChannel || !scales.x || !scales.y || !colorField) {
     // If no color field, can't stack -- fall back to single area
@@ -225,18 +228,19 @@ function computeStackedArea(
 
     if (validPoints.length === 0) continue;
 
+    const stackCurve = resolveCurve(spec.markDef.interpolate);
     const areaGenerator = area<{ x: number; yTop: number; yBottom: number }>()
       .x((p) => p.x)
       .y0((p) => p.yBottom)
       .y1((p) => p.yTop)
-      .curve(curveMonotoneX);
+      .curve(stackCurve);
 
     const pathStr = areaGenerator(validPoints) ?? '';
 
     const topLineGenerator = line<{ x: number; yTop: number }>()
       .x((p) => p.x)
       .y((p) => p.yTop)
-      .curve(curveMonotoneX);
+      .curve(stackCurve);
     const topPathStr = topLineGenerator(validPoints) ?? '';
 
     const topPoints = validPoints.map((p) => ({ x: p.x, y: p.yTop }));
@@ -261,6 +265,13 @@ function computeStackedArea(
         const xStr = String(d.data.__x__);
         return (rowsByXSeries.get(`${xStr}::${seriesKey}`) ?? d.data) as Record<string, unknown>;
       }),
+      dataPoints: validPoints.map((p, idx) => {
+        const xStr = String(layer[idx]?.data.__x__);
+        const datum = (rowsByXSeries.get(`${xStr}::${seriesKey}`) ??
+          layer[idx]?.data ??
+          {}) as Record<string, unknown>;
+        return { x: p.x, y: p.yTop, datum };
+      }),
       aria,
     });
   }

package/src/charts/line/compute.ts

@@ -16,11 +16,12 @@ import type {
   PointMark,
   Rect,
 } from '@opendata-ai/openchart-core';
-import { curveMonotoneX, line } from 'd3-shape';
+import { line } from 'd3-shape';
 
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
-import { getColor, groupByField, scaleValue, sortByField } from '../utils';
+import { getColor, getSequentialColor, groupByField, scaleValue, sortByField } from '../utils';
+import { resolveCurve } from './curves';
 
 // ---------------------------------------------------------------------------
 // Constants
@@ -57,12 +58,19 @@ export function computeLineMarks(
     return [];
   }
 
-  const colorField = encoding.color?.field;
+  const colorEnc = encoding.color && 'field' in encoding.color ? encoding.color : undefined;
+  const isSequentialColor = colorEnc?.type === 'quantitative';
+  // Sequential color: single series, per-point coloring. Categorical: group by color field.
+  const colorField = isSequentialColor ? undefined : colorEnc?.field;
+  const sequentialColorField = isSequentialColor ? colorEnc.field : undefined;
   const groups = groupByField(spec.data, colorField);
   const marks: (LineMark | PointMark)[] = [];
 
   for (const [seriesKey, rows] of groups) {
-    const color = getColor(scales, seriesKey);
+    // For sequential color, use a mid-range color for the line stroke
+    const color = isSequentialColor
+      ? getSequentialColor(scales, _getMidValue(rows, sequentialColorField!))
+      : getColor(scales, seriesKey);
 
     // Sort rows by x-axis field so lines draw left-to-right
     const sortedRows = sortByField(rows, xChannel.field);
@@ -102,11 +110,12 @@ export function computeLineMarks(
       segments.push(currentSegment);
     }
 
-    // Build the D3 line generator with monotone interpolation
+    // Build the D3 line generator with configured interpolation
+    const curve = resolveCurve(spec.markDef.interpolate);
     const lineGenerator = line<{ x: number; y: number }>()
       .x((d) => d.x)
       .y((d) => d.y)
-      .curve(curveMonotoneX);
+      .curve(curve);
 
     // Combine all segments into a single path string with M/L commands.
     // Each segment starts a new M (moveto) command, creating line breaks
@@ -151,6 +160,7 @@ export function computeLineMarks(
 
     // Create the LineMark with the combined path points.
     // The points array includes all valid points across all segments.
+    // dataPoints carries pixel coordinates + original data for voronoi tooltip overlay.
     const lineMark: LineMark = {
       type: 'line',
       points: allPoints,
@@ -161,32 +171,61 @@ export function computeLineMarks(
       opacity: styleOverride?.opacity,
       seriesKey: seriesStyleKey,
       data: pointsWithData.map((p) => p.row),
+      dataPoints: pointsWithData.map((p) => ({ x: p.x, y: p.y, datum: p.row })),
       aria,
     };
 
     marks.push(lineMark);
 
-    // Create point marks for hover targets (skip if showPoints is false)
-    const showPoints = styleOverride?.showPoints !== false;
-    for (let i = 0; i < pointsWithData.length; i++) {
-      const p = pointsWithData[i];
-      const pointMark: PointMark = {
-        type: 'point',
-        cx: p.x,
-        cy: p.y,
-        r: showPoints ? DEFAULT_POINT_RADIUS : 0,
-        fill: color,
-        stroke: showPoints ? '#ffffff' : 'transparent',
-        strokeWidth: showPoints ? 1.5 : 0,
-        fillOpacity: 0,
-        data: p.row,
-        aria: {
-          label: `Data point: ${xChannel.field}=${String(p.row[xChannel.field])}, ${yChannel.field}=${String(p.row[yChannel.field])}`,
-        },
-      };
-      marks.push(pointMark);
+    // Emit PointMark objects when markDef.point is truthy, or when sequential
+    // color is active (points carry the gradient since SVG paths are single-color).
+    const markPoint = spec.markDef.point;
+    const showPoints = markPoint === true || markPoint === 'transparent' || isSequentialColor;
+
+    if (showPoints) {
+      const isTransparent = markPoint === 'transparent';
+      // Also respect per-series showPoints override
+      const seriesShowPoints = styleOverride?.showPoints !== false;
+
+      for (let i = 0; i < pointsWithData.length; i++) {
+        const p = pointsWithData[i];
+        const visible = seriesShowPoints && !isTransparent;
+        // Sequential color: each point gets colored by its data value
+        let pointColor = color;
+        if (isSequentialColor) {
+          const val = Number(p.row[sequentialColorField!]);
+          pointColor = Number.isFinite(val) ? getSequentialColor(scales, val) : color;
+        }
+        const pointMark: PointMark = {
+          type: 'point',
+          cx: p.x,
+          cy: p.y,
+          r: visible ? DEFAULT_POINT_RADIUS : 0,
+          fill: pointColor,
+          stroke: visible ? '#ffffff' : 'transparent',
+          strokeWidth: visible ? 1.5 : 0,
+          fillOpacity: isTransparent ? 0 : 1,
+          data: p.row,
+          aria: {
+            label: `Data point: ${xChannel.field}=${String(p.row[xChannel.field])}, ${yChannel.field}=${String(p.row[yChannel.field])}`,
+          },
+        };
+        marks.push(pointMark);
+      }
     }
   }
 
   return marks;
 }
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+/** Get the midpoint numeric value of a field across rows (for sequential line stroke). */
+function _getMidValue(rows: DataRow[], field: string): number {
+  const values = rows.map((r) => Number(r[field])).filter(Number.isFinite);
+  if (values.length === 0) return 0;
+  const sorted = values.sort((a, b) => a - b);
+  return sorted[Math.floor(sorted.length / 2)];
+}

package/src/charts/line/curves.ts

@@ -0,0 +1,40 @@
+/**
+ * Curve interpolation mapping.
+ *
+ * Maps Vega-Lite-style interpolation strings to d3-shape curve factories.
+ * Used by both line and area chart computations.
+ */
+
+import type { MarkDef } from '@opendata-ai/openchart-core';
+import type { CurveFactory } from 'd3-shape';
+import {
+  curveBasis,
+  curveCardinal,
+  curveLinear,
+  curveMonotoneX,
+  curveNatural,
+  curveStep,
+  curveStepAfter,
+  curveStepBefore,
+} from 'd3-shape';
+
+/** Map of interpolation string names to d3 curve factories. */
+const CURVE_MAP: Record<NonNullable<MarkDef['interpolate']>, CurveFactory> = {
+  linear: curveLinear,
+  monotone: curveMonotoneX,
+  step: curveStep,
+  'step-before': curveStepBefore,
+  'step-after': curveStepAfter,
+  basis: curveBasis,
+  cardinal: curveCardinal,
+  natural: curveNatural,
+};
+
+/**
+ * Resolve an interpolation string to a d3 curve factory.
+ * Defaults to `curveMonotoneX` when no interpolation is specified.
+ */
+export function resolveCurve(interpolate?: MarkDef['interpolate']): CurveFactory {
+  if (!interpolate) return curveMonotoneX;
+  return CURVE_MAP[interpolate] ?? curveMonotoneX;
+}

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

@@ -20,7 +20,8 @@ const fullStrategy: LayoutStrategy = {
 
 function makeBasicPieSpec(): NormalizedChartSpec {
   return {
-    type: 'pie',
+    markType: 'arc',
+    markDef: { type: 'arc' },
     data: [
       { category: 'A', value: 40 },
       { category: 'B', value: 30 },
@@ -42,7 +43,8 @@ function makeBasicPieSpec(): NormalizedChartSpec {
 
 function makeSmallSlicePieSpec(): NormalizedChartSpec {
   return {
-    type: 'pie',
+    markType: 'arc',
+    markDef: { type: 'arc' },
     data: [
       { category: 'Big', value: 90 },
       { category: 'Medium', value: 7 },
@@ -65,7 +67,8 @@ function makeSmallSlicePieSpec(): NormalizedChartSpec {
 
 function makeDonutSpec(): NormalizedChartSpec {
   return {
-    type: 'donut',
+    markType: 'arc',
+    markDef: { type: 'arc', innerRadius: 0.5 },
     data: [
       { segment: 'Desktop', users: 55 },
       { segment: 'Mobile', users: 35 },
@@ -209,7 +212,8 @@ describe('computePieMarks', () => {
   describe('edge cases', () => {
     it('returns empty array when no value encoding', () => {
       const spec: NormalizedChartSpec = {
-        type: 'pie',
+        markType: 'arc',
+        markDef: { type: 'arc' },
         data: [{ category: 'A' }],
         encoding: {
           color: { field: 'category', type: 'nominal' },
@@ -228,7 +232,8 @@ describe('computePieMarks', () => {
 
     it('returns empty array for empty data', () => {
       const spec: NormalizedChartSpec = {
-        type: 'pie',
+        markType: 'arc',
+        markDef: { type: 'arc' },
         data: [],
         encoding: {
           y: { field: 'value', type: 'quantitative' },

package/src/charts/pie/compute.ts

@@ -107,7 +107,8 @@ export function computePieMarks(
   // For pie/donut charts, we need a value field (typically y or x) and
   // a category field (typically color). The value field provides the slice sizes.
   const valueChannel = encoding.y ?? encoding.x;
-  const categoryField = encoding.color?.field;
+  const categoryField =
+    encoding.color && 'field' in encoding.color ? encoding.color.field : undefined;
 
   if (!valueChannel) return [];
 

package/src/charts/rule/index.ts

@@ -0,0 +1,127 @@
+/**
+ * Rule mark renderer.
+ *
+ * Computes RuleMarkLayout marks from a normalized chart spec.
+ * Rules are line segments, typically used for reference lines as data marks.
+ * Supports x, y, x2, y2 encoding channels for start/end positioning.
+ */
+
+import type { Encoding, Mark, MarkAria, Rect, RuleMarkLayout } from '@opendata-ai/openchart-core';
+
+import type { NormalizedChartSpec } from '../../compiler/types';
+import type { ResolvedScales } from '../../layout/scales';
+import type { ChartRenderer } from '../registry';
+import { getColor, scaleValue } from '../utils';
+
+/**
+ * Compute rule marks from spec data and resolved scales.
+ *
+ * Positioning logic:
+ * - x only: vertical line spanning full chart height
+ * - y only: horizontal line spanning full chart width
+ * - x + x2: horizontal segment at the y position (or spanning full height)
+ * - y + y2: vertical segment at the x position (or spanning full width)
+ * - x + y + x2 + y2: arbitrary line segment
+ */
+export function computeRuleMarks(
+  spec: NormalizedChartSpec,
+  scales: ResolvedScales,
+  chartArea: Rect,
+): RuleMarkLayout[] {
+  const encoding = spec.encoding as Encoding;
+  const xChannel = encoding.x;
+  const yChannel = encoding.y;
+  const x2Channel = encoding.x2;
+  const y2Channel = encoding.y2;
+  const colorEncoding = encoding.color && 'field' in encoding.color ? encoding.color : undefined;
+  const colorField = colorEncoding?.field;
+
+  const marks: RuleMarkLayout[] = [];
+
+  for (const row of spec.data) {
+    let x1 = chartArea.x;
+    let y1 = chartArea.y;
+    let x2 = chartArea.x + chartArea.width;
+    let y2 = chartArea.y + chartArea.height;
+
+    // Resolve x position
+    if (xChannel && scales.x) {
+      const xVal = scaleValue(scales.x.scale, scales.x.type, row[xChannel.field]);
+      if (xVal == null) continue;
+      x1 = xVal;
+      x2 = xVal; // default: vertical line (same x)
+    }
+
+    // Resolve y position
+    if (yChannel && scales.y) {
+      const yVal = scaleValue(scales.y.scale, scales.y.type, row[yChannel.field]);
+      if (yVal == null) continue;
+      y1 = yVal;
+      y2 = yVal; // default: horizontal line (same y)
+    }
+
+    // If x is set but not y, span full height (vertical line)
+    if (xChannel && !yChannel) {
+      y1 = chartArea.y;
+      y2 = chartArea.y + chartArea.height;
+    }
+
+    // If y is set but not x, span full width (horizontal line)
+    if (yChannel && !xChannel) {
+      x1 = chartArea.x;
+      x2 = chartArea.x + chartArea.width;
+    }
+
+    // Resolve x2 if present
+    if (x2Channel && scales.x) {
+      const x2Val = scaleValue(scales.x.scale, scales.x.type, row[x2Channel.field]);
+      if (x2Val != null) x2 = x2Val;
+    }
+
+    // Resolve y2 if present
+    if (y2Channel && scales.y) {
+      const y2Val = scaleValue(scales.y.scale, scales.y.type, row[y2Channel.field]);
+      if (y2Val != null) y2 = y2Val;
+    }
+
+    const color = colorField
+      ? getColor(scales, String(row[colorField] ?? '__default__'))
+      : getColor(scales, '__default__');
+
+    const strokeDashEncoding =
+      encoding.strokeDash && 'field' in encoding.strokeDash ? encoding.strokeDash : undefined;
+    const strokeDasharray = strokeDashEncoding
+      ? String(row[strokeDashEncoding.field] ?? '')
+      : undefined;
+
+    const aria: MarkAria = {
+      label: `Rule from (${Math.round(x1)}, ${Math.round(y1)}) to (${Math.round(x2)}, ${Math.round(y2)})`,
+    };
+
+    marks.push({
+      type: 'rule',
+      x1,
+      y1,
+      x2,
+      y2,
+      stroke: color,
+      strokeWidth: 1,
+      strokeDasharray: strokeDasharray || undefined,
+      opacity:
+        encoding.opacity && 'field' in encoding.opacity
+          ? Math.max(0, Math.min(1, Number(row[encoding.opacity.field]) || 1))
+          : undefined,
+      data: row as Record<string, unknown>,
+      aria,
+    });
+  }
+
+  return marks;
+}
+
+/**
+ * Rule chart renderer.
+ */
+export const ruleRenderer: ChartRenderer = (spec, scales, chartArea, _strategy, _theme) => {
+  return computeRuleMarks(spec, scales, chartArea) as Mark[];
+};