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.

Target band: 1.0-1.3 kPa
Status: Too dry
Heatmap zone: Dry
Room climate: 27°C at 60% RH
Mapped cell: 27°C / 60% RH
Leaf temp: 26.1°C (-0.9°C vs air)

Heatmap zones

Wet 0.0-0.4 kPa Condensation and pathogen pressure climb quickly.

Humid 0.4-0.8 kPa Low transpiration; common for clones and fresh cuts.

Balanced 0.8-1.0 kPa Comfortable pull for leafy or vegetative rooms.

Optimal 1.0-1.2 kPa Classic production sweet spot for many crop phases.

Firm 1.2-1.4 kPa Useful for generative steering and stronger dry-back.

Dry 1.4-1.6 kPa Irrigation demand rises and stress starts to show.

Stress 1.6+ kPa Excessively dry for most rooms; burn risk increases.

Common program references

Propagation / Early veg 0.0-0.8 kPa

Vegetative steering 0.8-1.2 kPa

Flower / generative 1.2+ kPa

Selected target 1.0-1.3 kPa

Live room marker White ring on the nearest cell

Rows: temperature Columns: relative humidity

The chart follows common grow-room VPD palettes. Blue is wetter, green is healthier, and yellow to red is increasingly dry. Cells inside your target window get an inset outline.

Tomato room VPD. Selected target 1.0-1.3 kPa. Status Too dry. 0.13 kPa above target. Raise RH or back off room temperature to soften the pull.. Current VPD 1.43 kPa. Current zone Dry. Climate 27°C at 60% RH. Nearest chart cell 27°C / 60% RH. Leaf temperature 26.1°C. Leaf offset -0.9°C vs air.
°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

0.13 kPa above target. Raise RH or back off room temperature to soften the pull.

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.

Target band: 1.2-1.5 kPa
Status: Too dry
Heatmap zone: Stress
Room climate: 29°C at 56% RH
Mapped cell: 29°C / 55% RH

Heatmap zones

Wet 0.0-0.4 kPa Condensation and pathogen pressure climb quickly.

Humid 0.4-0.8 kPa Low transpiration; common for clones and fresh cuts.

Balanced 0.8-1.0 kPa Comfortable pull for leafy or vegetative rooms.

Optimal 1.0-1.2 kPa Classic production sweet spot for many crop phases.

Firm 1.2-1.4 kPa Useful for generative steering and stronger dry-back.

Dry 1.4-1.6 kPa Irrigation demand rises and stress starts to show.

Stress 1.6+ kPa Excessively dry for most rooms; burn risk increases.

Program references

Clone / Rooting 0.0-0.8 kPa

Vegetative 0.8-1.2 kPa

Generative 1.2-1.6 kPa

Selected target 1.2-1.5 kPa

Live room marker White ring on the nearest cell

Rows: temperature Columns: relative humidity

The chart follows common grow-room VPD palettes. Blue is wetter, green is healthier, and yellow to red is increasingly dry. Cells inside your target window get an inset outline.

Cannabis room VPD. Selected target 1.2-1.5 kPa. Status Too dry. 0.31 kPa above target. Raise RH or back off room temperature to soften the pull.. Current VPD 1.76 kPa. Current zone Stress. Climate 29°C at 56% RH. Nearest chart cell 29°C / 55% RH.
°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

0.31 kPa above target. Raise RH or back off room temperature to soften the pull.

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

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