AreaSeries
Import from @pibbl/core/viz. AreaSeries<D>(props: AreaSeriesProps<D>): PibblNode
adds scale-derived closed geometry to ordinary Canvas fill. It owns one batched
core Path. Compose LineSeries for the observed outline; layout, clipping,
annotations, and inspection stay application-owned.
Required inputs are data, x, y, xScale, yScale, and baseline.
Data is a readonly array or signal of an array. Accessors follow
LineSeries: a numeric field key or callback
(datum, index, data) => number | null | undefined. Both named scales must be
continuous (linear, UTC, log, or symlog). The finite numeric baseline is required
and maps through the y scale; log baselines must be positive. No implicit zero,
clamping, sorting, aggregation, or clipping occurs.
defined? runs before accessors. Excluded, missing, and nonfinite coordinates
split runs. Empty and isolated single-point runs draw no area. A run follows
observations in authored order, then closes from its last x to the baseline and
back to its first x. Duplicate x values produce vertical segments; baseline
crossings and reversed domains/ranges retain that geometry. Self-intersections
use Canvas’s nonzero fill rule. These are geometric fills, not integrals or
additional observations. Query the original observations for inspection.
baseline, data, whole style, and direct style fields accept signals. Reads in
accessors track the component; replace arrays to update. No subscriptions or
resources survive removal/disposal. style.fill defaults to #2563eb,
style.opacity to 0.2, and style.cursor is optional. Opacity must be finite
between 0 and 1; fill uses core paint values. No stroke or per-row styling is
accepted. Invalid arrays/styles throw TypeError; invalid baseline/opacity or
scale mapping throws RangeError; unknown/mismatched scales follow scale errors.
Normal core event props and pointer participation apply to the whole filled
Path. It participates by default; use pointerEvents="none" for decorative fill
under an inspection target. Gaps do not acquire filled hit geometry. Coordinates
are local logical pixels after mapping; core transforms and explicit Clip apply
normally. No margins or minimum layout size are allocated by the series.
Try the NOAA area example: change the reference baseline, deliberately omit June, and inspect with touch or keyboard. The fill is distance above that reference, not cumulative emissions.
Optional curve accepts the named step or monotone definitions;
omission and "linear" retain straight segments.
API details from source
Section titled “API details from source”
AreaSeries
Section titled “AreaSeries”Draws each contiguous observed run as a filled polygon closed to an explicit baseline.
Missing, non-finite, and excluded coordinates split runs. A lone observation has no area.
The component owns one ordinary Path target, so event participation follows the
standard Path defaults; callers may wrap it in Clip when clipping is needed.
AreaSeries: <D>({ data: dataInput, x: xInput, y: yInput, xScale: xId, yScale: yId, baseline: baselineInput, defined, curve, style: styleInput, ...eventProps }: AreaSeriesProps<D>) => JSX.ElementRelated API: AreaSeries, AreaSeriesProps, JSX.
Parameters
Section titled “Parameters”props— Data, coordinate accessors, continuous scales, baseline, and presentation.
Returns
Section titled “Returns”A Pibbl path node containing all drawable area runs.
Throws
Section titled “Throws”When data is not an array, the baseline is not finite, or presentation is invalid.
See also
Section titled “See also”View source — packages/core/src/features/viz/lib/area-series.tsx:105
AreaSeriesProps
Section titled “AreaSeriesProps”Authored inputs for AreaSeries.
The data, coordinate accessors, scales, and defined predicate use the same
contract as LineSeriesProps. Each contiguous run of at least two
valid observations is closed to baseline in data space.
interface AreaSeriesProps<D> extends PibblEventHandlers, PibblEventParticipationOptionsRelated API: AreaSeriesProps, PibblEventHandlers, PibblEventParticipationOptions.
See also
Section titled “See also”View source — packages/core/src/features/viz/lib/area-series.tsx:47
Properties and methods
Section titled “Properties and methods”
data
readonly data: SignalValue<readonly D[]>Related API: SignalValue.
Application data supplied directly or through a signal.
View source — packages/core/src/features/viz/lib/area-series.tsx:50
x
readonly x: LineAccessor<D>Related API: LineAccessor.
Property key or callback extracting the horizontal coordinate.
View source — packages/core/src/features/viz/lib/area-series.tsx:52
y
readonly y: LineAccessor<D>Related API: LineAccessor.
Property key or callback extracting the vertical coordinate.
View source — packages/core/src/features/viz/lib/area-series.tsx:54
xScale
readonly xScale: ScaleIdRelated API: ScaleId.
Continuous scale used to map horizontal data coordinates.
View source — packages/core/src/features/viz/lib/area-series.tsx:56
yScale
readonly yScale: ScaleIdRelated API: ScaleId.
Continuous scale used to map vertical data coordinates and baseline.
View source — packages/core/src/features/viz/lib/area-series.tsx:58
defined (optional)
readonly defined?: ((datum: D, index: number, data: readonly D[]) => boolean) | undefinedSelects records that participate in an observed run.
View source — packages/core/src/features/viz/lib/area-series.tsx:60
curve (optional)
readonly curve?: LineCurve | undefinedRelated API: LineCurve.
Curve used to connect successive observed samples.
View source — packages/core/src/features/viz/lib/area-series.tsx:62
baseline
readonly baseline: SignalValue<number>Related API: SignalValue.
Finite data-space value to which each observed run closes.
View source — packages/core/src/features/viz/lib/area-series.tsx:64
style (optional)
readonly style?: SignalValue<Readonly<{ readonly fill?: SignalValue<FillStyle | undefined>; readonly opacity?: SignalValue<number | undefined>; readonly cursor?: SignalValue<string | undefined>; }>> | undefinedRelated API: SignalValue, FillStyle, opacity.
Shared area presentation. Individual datum styling is not supported.
View source — packages/core/src/features/viz/lib/area-series.tsx:66
pointerEvents (optional)
readonly pointerEvents?: PibblPointerEvents | undefinedRelated API: PibblPointerEvents.
Whether this content participates in pointer targeting. See PibblPointerEvents.
AreaSeriesStyle
Section titled “AreaSeriesStyle”Presentation properties for an AreaSeries.
interface AreaSeriesStyleRelated API: AreaSeriesStyle.
See also
Section titled “See also”View source — packages/core/src/features/viz/lib/area-series.tsx:28
Properties and methods
Section titled “Properties and methods”
fill (optional)
readonly fill?: FillStyle | undefinedRelated API: FillStyle.
Paint used for the area interior.
View source — packages/core/src/features/viz/lib/area-series.tsx:30
opacity (optional)
readonly opacity?: number | undefinedRelated API: opacity.
Opacity of the painted area, from zero through one.
View source — packages/core/src/features/viz/lib/area-series.tsx:32
cursor (optional)
readonly cursor?: string | undefinedCursor shown while the area target owns pointer presentation.
View source — packages/core/src/features/viz/lib/area-series.tsx:34
Implementation guidance for agents
Section titled “Implementation guidance for agents”Read the Data visualization companion for ownership, adaptation, failure modes, and verification. Agent start provides the version-selection workflow.
Complete minimal examples
Section titled “Complete minimal examples”- Area and gaps: Fill runs to an explicit reference baseline. Plain source
Documentation version
Section titled “Documentation version”Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.