Add semanticGradient, downward hist, nodeStyle

[emeeks]

Introduce semanticGradient support and related conversions for AreaChart, add downward histogram direction handling, and expose a per-node nodeStyle overlay for Treemap.

• AreaChart: add SemanticGradientStop type and conversion (semanticGradientToColorStops) that maps user-facing percentages to renderer colorStops; semanticGradient takes precedence over gradientFill and is passed to the renderer.
• RealtimeHistogram: add direction prop ("up"|"down"); implement logic to resolve a flipped value extent for downward histograms (including category bin-summing and padding); wire resolved extent into yExtent and add test.
• Treemap: add nodeStyle prop and compose it with frameProps.nodeStyle and built-in color encoding; ensure primitive stroke/opacity props are applied after composition; pass remaining frameProps through; add test covering composed styles.
• Shared types/hooks: add HoverHighlightMode (boolean | "series") and propagate the type through hooks and streamPropsHelpers; add test for hoverHighlight alias behavior.
• Specs/validation/schema: update CHART_SPECS, VALIDATION_MAP and ai/schema.json with gradientFill, semanticGradient, direction, and nodeStyle metadata.

Also include tests for the new behaviors and small import/utility additions (color opacity helper). These changes enable semantic gradients, mirrored histogram layouts, and more flexible Treemap styling.
This pull request introduces new customization options for chart components, focusing on improved styling and control for Treemap and RealtimeHistogram charts. It adds new props and schema definitions to support per-node styling in Treemap, directional bar growth in RealtimeHistogram (including downward/mirrored histograms), and more flexible hover highlighting. The changes are covered by new and updated tests, and documentation/spec updates are included to reflect the new features.

Add TemporalHistogram; normalize margins & cell-border
Introduce a TemporalHistogram (static-data temporal histogram) and wire it into exports, chart specs, AI schema, and validation map. Normalize partial margin handling across chart components and hooks (use normalizePartialMargin, treat "auto"/null as explicit auto-reservation) and document margin behavior in types and schema. Add a theme CSS variable --semiotic-cell-border (fallback to border) and use it as the Treemap tile stroke default. Improve tooltip handling by normalizing bucket-array hover data for custom tooltips. Also add several tests and small behavior changes: AreaChart/LineChart fallback to areaBy/lineBy when colorBy is omitted, update hooks/tests for legend margin reservation, and various export/index updates.
cbf9b12
ai/componentMetadata.cjs

Key changes:

Treemap Customization:

• Added a nodeStyle prop to Treemap, allowing users to overlay custom styles on top of built-in color encoding for individual nodes. This enables features like hiding the root node or customizing borders without losing default color resolution. [1] [2]
• Updated the Treemap implementation to compose user-provided and frame-provided nodeStyle functions together, merging them with built-in styles. [1] [2]
• Added a test to verify that nodeStyle correctly composes with color encoding.
• Treemap chart spec updated to document the new nodeStyle prop.

RealtimeHistogram Directional Bars:

• Introduced a direction prop ("up" or "down") to RealtimeHistogram, allowing bars to grow downward for mirrored histogram layouts. When set to "down", the value domain is reversed, and explicit valueExtent is also reversed. [1] [2] [3] [4] [5]
• Added utility functions and logic to resolve the correct value domain for downward histograms.
• Added a test to verify that downward histograms flip the value domain as expected.
• RealtimeHistogram chart spec and schema updated to include the new direction prop. [1] [2]

Area/Line Chart Gradient Fills:

• Added gradientFill and semanticGradient properties to the area/line chart schema and chart specs, supporting both renderer-space and user-facing gradient fills. [1] [2]

Hover Highlighting Improvements:

• Extended the hoverHighlight prop to accept "series" as an alias for per-series highlighting, improving compatibility with wrapper libraries. [1] [2] [3] [4]
• Added a test to verify that "series" works as expected for hover highlighting.

Documentation & Spec Updates:

• Updated chart schemas and specs to document new properties and ensure alignment with implementation. [1] [2] [3] [4] [5]

These changes collectively provide more flexibility and control for users customizing chart appearance and behavior.

[Copilot]

Pull request overview

This PR expands Semiotic’s chart customization surface by introducing semantic gradient stops for AreaChart, a "down" direction option for RealtimeHistogram (mirrored histograms), and a composable nodeStyle overlay for Treemap, along with accompanying validation/spec/schema updates and tests.

Changes:

• AreaChart: add semanticGradient (user-percent stops) → converted to renderer gradientFill.colorStops with precedence over gradientFill.
• RealtimeHistogram: add direction: "up" | "down" and compute a flipped yExtent (including stacked/bin-summed max) for downward histograms.
• Treemap: add nodeStyle composition (built-in color encoding + user + frameProps.nodeStyle + primitive props) and update specs/validation/tests.

Reviewed changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/components/charts/xy/AreaChart.tsx	Adds semanticGradient API and conversion to renderer gradientFill.colorStops.
src/components/charts/xy/AreaChart.test.tsx	Tests semanticGradient-to-colorStops conversion and precedence over gradientFill.
src/components/charts/shared/validationMap.ts	Extends validation metadata for gradientFill, semanticGradient, direction, and nodeStyle.
src/components/charts/shared/useChartSetup.ts	Propagates widened hoverHighlight typing into chart setup.
src/components/charts/shared/types.ts	Introduces `HoverHighlightMode = boolean
src/components/charts/shared/streamPropsHelpers.ts	Propagates widened hoverHighlight typing through stream prop helpers.
src/components/charts/shared/hooks.ts	Updates useChartSelection typing to accept HoverHighlightMode.
src/components/charts/shared/hooks.test.ts	Adds coverage for hoverHighlight="series" alias behavior.
src/components/charts/shared/chartSpecs.ts	Documents new props in CHART_SPECS (including Treemap nodeStyle metadata).
src/components/charts/realtime/RealtimeHistogram.tsx	Adds direction support and downward-domain resolution logic.
src/components/charts/realtime/RealtimeHistogram.test.tsx	Adds test ensuring downward histograms flip the y-domain.
src/components/charts/network/Treemap.tsx	Adds nodeStyle overlay composition and ensures primitive props apply after composition.
src/components/charts/network/Treemap.test.tsx	Adds test covering composed Treemap styling behavior.
ai/schema.json	Updates JSON schema for gradientFill, semanticGradient, and histogram direction.

[Copilot]

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.

[Copilot]

Pull request overview

Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.

[Copilot]

Pull request overview

Copilot reviewed 30 out of 30 changed files in this pull request and generated 3 comments.

Comments suppressed due to low confidence (1)

src/components/stream/hoverUtils.ts:46

• buildHoverData is documented (and covered by existing tests) as preserving the raw datum on hover.data, but it now normalizes array-shaped datums to rawDatum[0]. This is a behavior change for hover/click callbacks and can break consumers that rely on bucket/array-shaped hover data. Tooltip-specific normalization can happen at the tooltip layer without changing the core HoverData contract.

  return {
    data: normalizeHoverDatum(rawDatum),
    x,
    y,
    __semioticHoverData: true,
    ...extra,

[Copilot]

Pull request overview

Copilot reviewed 32 out of 32 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

src/components/stream/hoverUtils.ts:46

• buildHoverData now normalizes array-shaped datums to their first entry. This breaks StreamOrdinalFrame’s built-in tooltip behavior for summary charts (boxplot/violin/ridgeline), which relies on hover.data being an array to show item counts / stats (see StreamOrdinalFrame.tsx DefaultOrdinalTooltip’s Array.isArray(d) branch).

Consider keeping hover.data as the raw datum and performing any “array → first datum” normalization only at the HOC tooltip-unwrapping layer (e.g. in Tooltip.normalizeTooltip) so stream-frame consumers that expect arrays keep working.