CwDliCard

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. Missing readings show "—" instead of a fake zero, and the status and target band hide when no target is configured. (DliCard is still exported as an alias.)

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
CwDliCard example Copy code 
<script lang="ts">
	import { CwDliCard } 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>

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

Missing reading and missing target

A null value renders "—" with no marker or status. Without targetMin/targetMax, the status pill and target band are hidden rather than judging the reading against a 0–0 range.

Awaiting first reading

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

—

No crop target set

24.3 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

—

Daily history

7 days

The current sensor is not available on your device

API

Usage and API reference

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

Default: 3

1 | 2 | 3 | 4 | 5 | 6Heading level used for the title, so the card fits your page outline.
locale
stringBCP 47 locale for number and date formatting. Defaults to the runtime locale.
CwDliCard
componentCw-prefixed alias of `DliCard`. Prefer it in new code.

Copy-paste examples

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

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