CropWatch User Interface

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

Target range: 600-1,000 µmol/m²/s
Status: Optimal
DLI today: 18.4 mol/m²/day

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

Current 740 µmol/m²/s

600-1,000 µmol/m²/s

Inside target band

<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.

Target range: 700-1,200 µmol/m²/s
Status: Too high
DLI today: 26.9 mol/m²/day

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

Current 1,380 µmol/m²/s

700-1,200 µmol/m²/s

180 µmol/m²/s above target

Documentation Upgrade

Start here

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.

Copy-paste examples

These snippets intentionally show the full public API surface the live demo relies on.

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"
/>