@opendata-ai/openchart-engine 6.9.0 → 6.11.0

package/src/charts/text/index.ts

@@ -7,6 +7,7 @@
  */
 
 import type { Encoding, Mark, MarkAria, TextMarkLayout } from '@opendata-ai/openchart-core';
+import { getRepresentativeColor } from '@opendata-ai/openchart-core';
 
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
@@ -52,9 +53,11 @@ export function computeTextMarks(
     const text = String(row[textChannel.field] ?? '');
     if (!text) continue;
 
-    const color = colorField
-      ? getColor(scales, String(row[colorField] ?? '__default__'))
-      : getColor(scales, '__default__');
+    const color = getRepresentativeColor(
+      colorField
+        ? getColor(scales, String(row[colorField] ?? '__default__'))
+        : getColor(scales, '__default__'),
+    );
 
     const fontSize = sizeEncoding
       ? Math.max(8, Math.min(48, Number(row[sizeEncoding.field]) || 12))

package/src/charts/tick/index.ts

@@ -7,6 +7,7 @@
  */
 
 import type { Encoding, Mark, MarkAria, Rect, TickMarkLayout } from '@opendata-ai/openchart-core';
+import { getRepresentativeColor } from '@opendata-ai/openchart-core';
 
 import type { NormalizedChartSpec } from '../../compiler/types';
 import type { ResolvedScales } from '../../layout/scales';
@@ -48,9 +49,11 @@ export function computeTickMarks(
     const yVal = scaleValue(scales.y.scale, scales.y.type, row[yChannel.field]);
     if (xVal == null || yVal == null) continue;
 
-    const color = colorField
-      ? getColor(scales, String(row[colorField] ?? '__default__'))
-      : getColor(scales, '__default__');
+    const color = getRepresentativeColor(
+      colorField
+        ? getColor(scales, String(row[colorField] ?? '__default__'))
+        : getColor(scales, '__default__'),
+    );
 
     const aria: MarkAria = {
       label: `${row[xChannel.field]}, ${row[yChannel.field]}`,

package/src/charts/utils.ts

@@ -5,7 +5,7 @@
  * data grouping, color lookup, and shared constants.
  */
 
-import type { DataRow } from '@opendata-ai/openchart-core';
+import type { DataRow, GradientDef } from '@opendata-ai/openchart-core';
 import type { ScaleBand, ScaleLinear, ScalePoint, ScaleTime } from 'd3-scale';
 import type { D3Scale, ResolvedScales } from '../layout/scales';
 
@@ -143,7 +143,7 @@ export function getColor(
   key: string,
   _index?: number,
   fallback: string = DEFAULT_COLOR,
-): string {
+): string | GradientDef {
   if (scales.color && key !== '__default__') {
     const colorScale = scales.color.scale as (v: string) => string;
     return colorScale(key);
@@ -159,7 +159,7 @@ export function getSequentialColor(
   scales: ResolvedScales,
   value: number,
   fallback: string = DEFAULT_COLOR,
-): string {
+): string | GradientDef {
   if (scales.color?.type === 'sequential') {
     const colorScale = scales.color.scale as unknown as (v: number) => string;
     return colorScale(value);

package/src/compile.ts

@@ -386,8 +386,9 @@ export function compileChart(spec: unknown, options: CompileOptions): ChartLayou
     }
   }
 
-  // Set default color for single-series charts (no color encoding)
-  scales.defaultColor = theme.colors.categorical[0];
+  // Set default color for single-series charts. If the user set a fill on the mark def
+  // (string or gradient), that takes priority over the theme's first categorical color.
+  scales.defaultColor = chartSpec.markDef.fill ?? theme.colors.categorical[0];
 
   // Arc charts (pie/donut) don't use axes or gridlines
   const isRadial = chartSpec.markType === 'arc';

package/src/layout/scales.ts

@@ -99,8 +99,8 @@ export interface ResolvedScales {
   y?: ResolvedScale;
   color?: ResolvedScale;
   size?: ResolvedScale;
-  /** Default color for single-series charts (first categorical palette color). */
-  defaultColor?: string;
+  /** Default color for single-series charts (first categorical palette color or markDef.fill gradient). */
+  defaultColor?: string | import('@opendata-ai/openchart-core').GradientDef;
 }
 
 // ---------------------------------------------------------------------------
@@ -622,7 +622,13 @@ export function computeScales(
     // For stacked bars, the x-domain needs the max category sum, not max individual value.
     // Without this, stacked bars would clip past the chart area.
     let xData = data;
-    if (spec.markType === 'bar' && encoding.color && encoding.x.type === 'quantitative') {
+    const xStackDisabled = encoding.x.stack === null || encoding.x.stack === false;
+    if (
+      spec.markType === 'bar' &&
+      encoding.color &&
+      encoding.x.type === 'quantitative' &&
+      !xStackDisabled
+    ) {
       const yField = encoding.y?.field;
       const xField = encoding.x.field;
       if (yField) {
@@ -660,10 +666,12 @@ export function computeScales(
       spec.markType === 'bar' &&
       (encoding.x?.type === 'nominal' || encoding.x?.type === 'ordinal') &&
       encoding.y.type === 'quantitative';
+    const yStackDisabled = encoding.y.stack === null || encoding.y.stack === false;
     if (
       (isVerticalBar || spec.markType === 'area') &&
       encoding.color &&
-      encoding.y.type === 'quantitative'
+      encoding.y.type === 'quantitative' &&
+      !yStackDisabled
     ) {
       const xField = encoding.x?.field;
       const yField = encoding.y.field;

package/src/tooltips/compute.ts

@@ -19,7 +19,12 @@ import type {
   TooltipContent,
   TooltipField,
 } from '@opendata-ai/openchart-core';
-import { buildTemporalFormatter, formatDate, formatNumber } from '@opendata-ai/openchart-core';
+import {
+  buildTemporalFormatter,
+  formatDate,
+  formatNumber,
+  getRepresentativeColor,
+} from '@opendata-ai/openchart-core';
 import { format as d3Format } from 'd3-format';
 
 import type { NormalizedChartSpec } from '../compiler/types';
@@ -155,7 +160,7 @@ function tooltipsForPoint(
   markIndex: number,
 ): Array<[string, TooltipContent]> {
   const title = getTooltipTitle(mark.data, encoding);
-  const fields = buildFields(mark.data, encoding, mark.fill);
+  const fields = buildFields(mark.data, encoding, getRepresentativeColor(mark.fill));
 
   return [[`point-${markIndex}`, { title, fields }]];
 }
@@ -166,7 +171,7 @@ function tooltipsForRect(
   markIndex: number,
 ): Array<[string, TooltipContent]> {
   const title = getTooltipTitle(mark.data, encoding);
-  const fields = buildFields(mark.data, encoding, mark.fill);
+  const fields = buildFields(mark.data, encoding, getRepresentativeColor(mark.fill));
 
   return [[`rect-${markIndex}`, { title, fields }]];
 }
@@ -187,14 +192,14 @@ function tooltipsForArc(
       fields.push({
         label: categoryName,
         value: formatValue(row[encoding.y.field], encoding.y.type, encoding.y.axis?.format),
-        color: mark.fill,
+        color: getRepresentativeColor(mark.fill),
       });
     }
   } else if (encoding.y) {
     fields.push({
       label: encoding.y.field,
       value: formatValue(row[encoding.y.field], encoding.y.type, encoding.y.axis?.format),
-      color: mark.fill,
+      color: getRepresentativeColor(mark.fill),
     });
   }
 
@@ -214,7 +219,7 @@ function tooltipsForArea(
     for (const dp of mark.dataPoints) {
       dp.tooltip = {
         title: getTooltipTitle(dp.datum, encoding),
-        fields: buildFields(dp.datum, encoding, mark.fill),
+        fields: buildFields(dp.datum, encoding, getRepresentativeColor(mark.fill)),
       };
     }
   }