PPFD Chart · CropWatch UI

CwPPFDChart

Horizontal PPFD range gauge for crop lighting targets. It highlights the optimal band and shows whether the current reading is low, optimal, or high at a glance.

Interactive Crop Selection

Pick a crop and drag the simulated sensor reading to see the target range, live marker, and status update in real time.

Sensor PPFD 740 µmol/m²/s

Current PPFD: 740 µmol/m²/s
Target range: 600–1,000
DLI today: 18.4 mol/m²/day

Optimal· Inside target band

Pepper PPFD. Current 740 µmol/m²/s. Target range 600–1,000 µmol/m²/s. Status Optimal. Inside target band. DLI today 18.4 mol/m²/day.

Optimal

740 µmol/m²/s

<CwPPFDChart
	plant="Pepper"
	current={740}
	targetMin={600}
	targetMax={1000}
	dliToday={18.4}
/>

Fixed 0-1600 Scale

Use a fixed horticulture scale when you want direct comparison across crops or facilities.

Current PPFD: 1,380 µmol/m²/s
Target range: 700–1,200
DLI today: 26.9 mol/m²/day

Too high· 180 µmol/m²/s above target

Tomato PPFD. Current 1,380 µmol/m²/s. Target range 700–1,200 µmol/m²/s. Status Too high. 180 µmol/m²/s above target. DLI today 26.9 mol/m²/day.

Optimal

1,380 µmol/m²/s

Loading & missing data

A missing reading shows “—” with no marker or status; missing targets hide the target band and status instead of treating the target as zero.

Current PPFD: —
Target range: —

Loading PPFD

Current PPFD: —
Target range: 700–1,200

Tomato PPFD. Current —. Target range 700–1,200 µmol/m²/s. Status —.

Optimal

No data available

Current PPFD: 640 µmol/m²/s
Target range: —

Unassigned crop PPFD. Current 640 µmol/m²/s. Target range —. Status —.

640 µmol/m²/s

API

Usage and API reference

CwPPFDChart is a focused range gauge for lighting targets. Give it the current PPFD reading plus a target band, and then optionally lock the domain and tick marks for cross-crop comparisons.

How to think about it

Start with current, targetMin, and targetMax Those three values are the minimum set needed to render the gauge and current status.
Add DLI and timestamp when available These fields make the summary more useful, but the chart still works without them.
Lock the domain for side-by-side comparisons When different crops or rooms need direct comparison, provide `domainMin`, `domainMax`, and explicit `ticks`.

Props and callbacks

API	Type	Details
`current` Required	`number`	Current PPFD reading.
`targetMin` Required	`number`	Lower edge of the target band.
`targetMax` Required	`number`	Upper edge of the target band.
`plant` Default: `''`	`string`	Optional crop or cultivar label.
`unit` Default: `umol/m2/s`	`string`	Reading unit label.
`domainMin` Default: `0`	`number`	Lower chart domain.
`domainMax`	`number`	Upper chart domain. Auto-expands when omitted.
`ticks`	`Array<number \| CwPPFDTick>`	Optional explicit tick labels.
`dliToday`	`number`	Optional daily light integral value.
`updatedAt`	`string \| Date \| number`	Optional timestamp displayed in the summary.
`showSummary` Default: `true`	`boolean`	Shows the summary block above the gauge.
`showDelta` Default: `true`	`boolean`	Shows the delta from the target band.
`lowLabel / optimalLabel / highLabel`	`string`	Custom text for the three status ranges.
`noData`	`string \| boolean`	When present, blurs the chart and shows an overlay. Pass localized text, or use the bare `noData` attribute for "No data available".
`loading` Default: `false`	`boolean`	Shows a skeleton chart and sets `aria-busy` while data loads.
`locale`	`string`	BCP 47 locale for number and date formatting. Defaults to the runtime locale.

Copy-paste examples

Each snippet is a complete, working example you can paste into a Svelte 5 component.

Basic crop lighting target

This is the smallest useful configuration.

<CwPPFDChart
	plant="Pepper"
	current={740}
	targetMin={600}
	targetMax={1000}
	dliToday={18.4}
	updatedAt={Date.now()}
/>

Fixed production scale

Lock the domain when users compare multiple crops or rooms side by side.

<CwPPFDChart
	plant="Tomato"
	current={1380}
	targetMin={700}
	targetMax={1200}
	domainMin={0}
	domainMax={1600}
	ticks={[0, 200, 400, 600, 800, 1000, 1200, 1400, 1600]}
	dliToday={26.9}
/>

Compact chart with custom labels

Useful when the surrounding card already provides most of the context.

<CwPPFDChart
	current={180}
	targetMin={250}
	targetMax={400}
	showSummary={false}
	showDelta={false}
	lowLabel="Too dim"
	optimalLabel="Target zone"
	highLabel="Too bright"
/>