DliCard

Daily Light Integral card for agricultural dashboards. It presents DLI as a daily total against a crop target band, with optional daily bars for recent history.

Crop target range

Choose a crop program and adjust today's accumulated DLI. The marker clamps to the scale, while the numeric value remains the true reading.

DLI Today

Target for Tomato: 20–30 mol/m²/day

Status: Good

24.3 mol/m²/day

Daily history

7 days
DliCard example Copy code 
<script lang="ts">
	import { DliCard } from '@cropwatchdevelopment/cwui';

	const history = [
		{ date: "2026-05-23", value: 18.2 },
		{ date: "2026-05-24", value: 21.5 },
		{ date: "2026-05-25", value: 26.1 },
		{ date: "2026-05-26", value: 24.7 },
		{ date: "2026-05-27", value: 15.9 },
		{ date: "2026-05-28", value: 28.4 },
		{ date: "2026-05-29", value: 30.2 }
	];
</script>

<DliCard
	value={24.3}
	targetMin={20}
	targetMax={30}
	max={40}
	cropName="Tomato"
	history={history}
/>

Compact status cards

Compact mode keeps the same target-range visualization for dense dashboard grids.

Very low

Target for Tomato: 20–30 mol/m²/day

Status: Very low

8 mol/m²/day

Low

Target for Tomato: 20–30 mol/m²/day

Status: Low

15 mol/m²/day

Slightly low

Target for Tomato: 20–30 mol/m²/day

Status: Slightly low

18 mol/m²/day

Good

Target for Tomato: 20–30 mol/m²/day

Status: Good

24.3 mol/m²/day

High

Target for Tomato: 20–30 mol/m²/day

Status: High

34 mol/m²/day

Very high

Target for Tomato: 20–30 mol/m²/day

Status: Very high

39 mol/m²/day

Without history

Omit history when the dashboard tile only needs today's accumulated DLI.

DLI Today

Target for Tomato: 20–30 mol/m²/day

Status: Very high

42.6 mol/m²/day

Unavailable sensor state

Pass localized copy to noData when a sensor or reading is not available.

DLI Today

Target for Tomato: 20–30 mol/m²/day

Status: Very low

0 mol/m²/day

Daily history

7 days

The current sensor is not available on your device

Documentation Upgrade

Start here

DliCard displays Daily Light Integral as a daily accumulated crop-light metric. It uses a horizontal target-range bar for today and optional daily bars for historical DLI totals.

How to think about it

  1. Use crop target values Pass `targetMin` and `targetMax` for the crop program so operators can see whether today is inside the expected DLI band.
  2. Keep the scale explicit Use the default `max={40}` for common greenhouse views, or set `max` when crops or rooms need a different comparison scale.
  3. Use bars for history DLI is a daily total, so the optional `history` prop renders one bar per day instead of a line chart or instant gauge.

Props and callbacks

The visual marker is clamped between 0 and `max`, but the card still displays the true numeric `value` when it exceeds the scale.

APITypeDetails
value Required
numberToday's DLI in mol/m²/day.
targetMin Required
numberLower edge of the crop target range.
targetMax Required
numberUpper edge of the crop target range.
max

Default: 40

numberMaximum value for the horizontal scale.
cropName
stringOptional crop label used in the target text.
title

Default: 'DLI Today'

stringCard title.
unit

Default: 'mol/m²/day'

stringUnit label displayed with the value and target.
showStatus

Default: true

booleanShows the visible status label.
history
DliHistoryPoint[]Optional daily DLI history rendered as bars.
compact

Default: false

booleanReduces card spacing for dense dashboard grids.
noData
string | booleanWhen present, blurs the card 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.

Tomato DLI card with history

Use this for a dashboard tile that shows today and the past week.

Tomato DLI card with history Copy code 
<script lang="ts">
	import { DliCard } from '@cropwatchdevelopment/cwui';

	const history = [
		{ date: "2026-05-23", value: 18.2 },
		{ date: "2026-05-24", value: 21.5 },
		{ date: "2026-05-25", value: 26.1 },
		{ date: "2026-05-26", value: 24.7 },
		{ date: "2026-05-27", value: 15.9 },
		{ date: "2026-05-28", value: 28.4 },
		{ date: "2026-05-29", value: 30.2 }
	];
</script>

<DliCard
	value={24.3}
	targetMin={20}
	targetMax={30}
	max={40}
	cropName="Tomato"
	history={history}
/>
Compact card

Use compact mode in dashboard grids where multiple crops or zones sit side by side.

Compact card Copy code 
<DliCard
	title="North bay DLI"
	value={18.4}
	targetMin={18}
	targetMax={26}
	cropName="Pepper"
	compact
/>
Custom scale and unit label

Override `max` and `unit` when upstream data uses a different display convention.

Custom scale and unit label Copy code 
<DliCard
	value={42.6}
	targetMin={20}
	targetMax={30}
	max={50}
	cropName="Tomato"
	unit="mol m-2 day-1"
/>
Unavailable sensor state

Pass localized copy to `noData` when the current reading is not available.

Unavailable sensor state Copy code 
<DliCard
	value={0}
	noData="The current sensor is not available on your device"
	targetMin={20}
	targetMax={30}
	max={40}
	cropName="Tomato"
/>