CropWatch User Interface

CwVPDChart

A real VPD chart is a room-climate matrix. It plots temperature against relative humidity, uses agriculture-style low-to-high VPD coloring, and overlays the active grow-program target inside that grid.

Interactive room-climate control

Pick a crop program, then change room temperature and RH. The chart recalculates the full matrix, keeps the familiar blue-to-green-to-red VPD palette intact, and shows whether the selected target band is being hit.

Room temperature 27.0°C / 81°F Relative humidity 60% RH

Derived room VPD 1.43 kPa

Generative steering favors a firmer VPD window during flower set.

1.43 kPa room VPD · 27°C / 60% RH

Target 1.00–1.30 kPa · steer back to band

Vapor pressure deficit heatmap by temperature and relative humidity
°C	35%	40%	45%	50%	55%	60%	65%	70%	75%	80%	85%	90%	95%
17	1.26	1.16	1.07	0.97	0.87	0.78	0.68	0.58	0.48	0.39	0.29	0.19	0.10
18	1.34	1.24	1.14	1.03	0.93	0.83	0.72	0.62	0.52	0.41	0.31	0.21	0.10
19	1.43	1.32	1.21	1.10	0.99	0.88	0.77	0.66	0.55	0.44	0.33	0.22	0.11
20	1.52	1.40	1.29	1.17	1.05	0.94	0.82	0.70	0.58	0.47	0.35	0.23	0.12
21	1.62	1.49	1.37	1.24	1.12	0.99	0.87	0.75	0.62	0.50	0.37	0.25	0.12
22	1.72	1.59	1.45	1.32	1.19	1.06	0.93	0.79	0.66	0.53	0.40	0.26	0.13
23	1.83	1.69	1.55	1.40	1.26	1.12	0.98	0.84	0.70	0.56	0.42	0.28	0.14
24	1.94	1.79	1.64	1.49	1.34	1.19	1.04	0.90	0.75	0.60	0.45	0.30	0.15
25	2.06	1.90	1.74	1.58	1.43	1.27	1.11	0.95	0.79	0.63	0.48	0.32	0.16
26	2.18	2.02	1.85	1.68	1.51	1.34	1.18	1.01	0.84	0.67	0.50	0.34	0.17
27	2.32	2.14	1.96	1.78	1.60	1.43	1.25	1.07	0.89	0.71	0.53	0.36	0.18
28	2.46	2.27	2.08	1.89	1.70	1.51	1.32	1.13	0.94	0.76	0.57	0.38	0.19
29	2.60	2.40	2.20	2.00	1.80	1.60	1.40	1.20	1.00	0.80	0.60	0.40	0.20
30	2.76	2.55	2.33	2.12	1.91	1.70	1.49	1.27	1.06	0.85	0.64	0.42	0.21
31	2.92	2.70	2.47	2.25	2.02	1.80	1.57	1.35	1.12	0.90	0.67	0.45	0.22
32	3.09	2.85	2.62	2.38	2.14	1.90	1.66	1.43	1.19	0.95	0.71	0.48	0.24
33	3.27	3.02	2.77	2.52	2.26	2.01	1.76	1.51	1.26	1.01	0.75	0.50	0.25
34	3.46	3.19	2.93	2.66	2.39	2.13	1.86	1.60	1.33	1.06	0.80	0.53	0.27
35	3.65	3.37	3.09	2.81	2.53	2.25	1.97	1.69	1.41	1.12	0.84	0.56	0.28

Custom grow-program bands

Override the default program references when your crop strategy uses different steering bands, while keeping the same production-style heatmap colors underneath.

1.76 kPa room VPD · 29°C / 56% RH

Target 1.15–1.45 kPa · steer back to band

Vapor pressure deficit heatmap by temperature and relative humidity
°C	40%	45%	50%	55%	60%	65%	70%	75%	80%	85%	90%
19	1.32	1.21	1.10	0.99	0.88	0.77	0.66	0.55	0.44	0.33	0.22
20	1.40	1.29	1.17	1.05	0.94	0.82	0.70	0.58	0.47	0.35	0.23
21	1.49	1.37	1.24	1.12	0.99	0.87	0.75	0.62	0.50	0.37	0.25
22	1.59	1.45	1.32	1.19	1.06	0.93	0.79	0.66	0.53	0.40	0.26
23	1.69	1.55	1.40	1.26	1.12	0.98	0.84	0.70	0.56	0.42	0.28
24	1.79	1.64	1.49	1.34	1.19	1.04	0.90	0.75	0.60	0.45	0.30
25	1.90	1.74	1.58	1.43	1.27	1.11	0.95	0.79	0.63	0.48	0.32
26	2.02	1.85	1.68	1.51	1.34	1.18	1.01	0.84	0.67	0.50	0.34
27	2.14	1.96	1.78	1.60	1.43	1.25	1.07	0.89	0.71	0.53	0.36
28	2.27	2.08	1.89	1.70	1.51	1.32	1.13	0.94	0.76	0.57	0.38
29	2.40	2.20	2.00	1.80	1.60	1.40	1.20	1.00	0.80	0.60	0.40
30	2.55	2.33	2.12	1.91	1.70	1.49	1.27	1.06	0.85	0.64	0.42
31	2.70	2.47	2.25	2.02	1.80	1.57	1.35	1.12	0.90	0.67	0.45
32	2.85	2.62	2.38	2.14	1.90	1.66	1.43	1.19	0.95	0.71	0.48
33	3.02	2.77	2.52	2.26	2.01	1.76	1.51	1.26	1.01	0.75	0.50
34	3.19	2.93	2.66	2.39	2.13	1.86	1.60	1.33	1.06	0.80	0.53
35	3.37	3.09	2.81	2.53	2.25	1.97	1.69	1.41	1.12	0.84	0.56

<CwVPDChart
	plant="Tomato"
	growthStage="Flower set"
	targetMin={1.0}
	targetMax={1.3}
	airTemperatureC={27}
	relativeHumidity={60}
	updatedAt={Date.now()}
/>

Documentation Upgrade

Start here

CwVPDChart is a matrix view of climate strategy rather than a single-value gauge. You can drive it from an explicit `current` VPD reading, or let it derive room VPD from temperature and humidity.

How to think about it

Define the target band first `targetMin` and `targetMax` define the desired VPD window and are required regardless of how you supply the live reading.
Choose live reading or derived room state Pass `current` when you already have VPD from upstream data. Otherwise provide temperature and RH so the chart can derive the room VPD.
Customize the matrix only for advanced climate programs Most screens can use the defaults. Reach for `stageBands`, `temperatureValuesC`, `humidityValues`, or `useF` only when the climate program requires them.

Props and callbacks

API	Type	Details
`targetMin` Required	`number`	Lower edge of the target band.
`targetMax` Required	`number`	Upper edge of the target band.
`current`	`number`	Optional direct VPD reading.
`plant` Default: `''`	`string`	Optional crop label.
`growthStage` Default: `''`	`string`	Optional growth-stage label.
`unit` Default: `kPa`	`string`	VPD unit label.
`useF` Default: `false`	`boolean`	Displays temperature headers in Fahrenheit.
`airTemperatureC`	`number`	Room air temperature in Celsius.
`leafTemperatureC`	`number`	Optional leaf temperature in Celsius.
`relativeHumidity`	`number`	Relative humidity percentage.
`updatedAt`	`string \| Date \| number`	Optional timestamp shown in the summary.
`showSummary` Default: `true`	`boolean`	Shows the summary header block.
`showLegend` Default: `true`	`boolean`	Shows the stage-band legend.
`temperatureValuesC`	`number[]`	Custom temperature axis values in Celsius.
`humidityValues`	`number[]`	Custom relative humidity axis values.
`stageBands`	`CwVPDStageBand[]`	Optional custom climate-stage band definitions.
`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".

Copy-paste examples

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

Derived room VPD from temperature and RH

This is the easiest way to use the chart when upstream data is raw room climate data.

<CwVPDChart
	plant="Tomato"
	growthStage="Flower set"
	targetMin={1.0}
	targetMax={1.3}
	airTemperatureC={27}
	leafTemperatureC={26.1}
	relativeHumidity={60}
	updatedAt={Date.now()}
/>

Direct VPD reading with Fahrenheit labels

Use `current` when VPD is already calculated elsewhere and you only want the matrix as context.

<CwVPDChart
	plant="Pepper"
	growthStage="Late fruiting"
	current={1.18}
	targetMin={1.1}
	targetMax={1.4}
	useF
	showLegend={false}
	showSummary={false}
	temperatureValuesC={[18, 20, 22, 24, 26, 28, 30]}
	humidityValues={[40, 50, 60, 70, 80, 90]}
/>

Custom climate stage bands

This pattern is useful when your crop strategy does not match the default stage groupings.

<script lang="ts">
	const stageBands = [
		{ label: 'Clone / Rooting', min: 0, max: 0.75, tone: 'humid' },
		{ label: 'Vegetative', min: 0.75, max: 1.15, tone: 'balanced' },
		{ label: 'Generative', min: 1.15, max: 1.6, tone: 'flower' }
	];
</script>

<CwVPDChart
	plant="Cannabis"
	growthStage="Generative push"
	targetMin={1.15}
	targetMax={1.45}
	airTemperatureC={29}
	relativeHumidity={56}
	stageBands={stageBands}
/>