CwStatCard

Displays statistical summaries (min / avg / max) with a visual range bar, current reading, and current-vs-average delta. The details toggle is a real button with aria-expanded.

Default (expandable)

Temperature

25.3°C +0.8°C Above average Above average
18.2 24.5 32.7
Min Avg Max

Humidity

72% +3.6% Above average Above average
35 68.4 92
Min Avg Max

CO₂

4,583ppm +3,963 ppm Above average Above average
380 620 1,200
Min Avg Max
Basic usage Copy code 
<script lang="ts">
	import { CwStatCard } from '@cropwatchdevelopment/cwui';
	import type { CwStatCardData } from '@cropwatchdevelopment/cwui';

	const stats: CwStatCardData = {
		min: 18.2,
		max: 32.7,
		avg: 24.5,
		median: 24.1,
		stdDev: 3.2,
		count: 288,
		lastReading: 25.3
	};
</script>

<CwStatCard title="Temperature" stats={stats} unit="°C" />

Custom accent colour

The accent colours text, so use a --cw-tone-*-text token to keep contrast in both themes.

Light Intensity

620lux +200 lux Above average Above average
0 420 850
Min Avg Max

Soil Moisture

72% +3.6% Above average Above average
35 68.4 92
Min Avg Max

VPD

25.3kPa +0.8 kPa Above average Above average
18.2 24.5 32.7
Min Avg Max
Custom accent colour Copy code 
<CwStatCard
	title="Humidity"
	stats={humidityStats}
	unit="%"
	accentColor="var(--cw-tone-info-text)"
/>

Non-expandable

Quick Glance

—
10 30 50
Min Avg Max

CO₂ Summary

4,583ppm +3,963 ppm Above average Above average
380 620 1,200
Min Avg Max
Non-expandable Copy code 
<CwStatCard
	title="Light Intensity"
	stats={lightStats}
	unit="lux"
	expandable={false}
/>

Current vs average

Above Average

45°C +15°C Above average Above average
10 30 50
Min Avg Max

Below Average

15°C -15°C Below average Below average
10 30 50
Min Avg Max

Slightly above

30.4°C +0.4°C Above average Above average
10 30 50
Min Avg Max

Loading & heading level

loading shows a skeleton. headingLevel (default 3) sets the title's heading element so cards fit the page outline.

Temperature

Humidity (h4)

72% +3.6% Above average Above average
35 68.4 92
Min Avg Max

Localized labels (i18n)

Pass a labels prop to override any or all display strings. Only the provided keys are replaced; the rest stay English by default.

温度

25.3°C +0.8°C 平均以上 平均以上
18.2 24.5 32.7
最小 平均 最大

湿度

72% +3.6% 平均以上 平均以上
35 68.4 92
最小 平均 最大

CO₂

4,583ppm +3,963 ppm 平均以上 平均以上
380 620 1,200
最小 平均 最大
Localized labels Copy code 
<script lang="ts">
	import { CwStatCard } from '@cropwatchdevelopment/cwui';
	import type { CwStatCardLabels } from '@cropwatchdevelopment/cwui';

	const jaLabels: CwStatCardLabels = {
		min: '最小',
		avg: '平均',
		max: '最大',
		count: '件数',
		median: '中央値',
		stdDev: '標準偏差',
		range: '範囲',
		aboveAvg: '平均以上',
		belowAvg: '平均以下',
		atAvg: '平均',
		showDetails: '詳細を表示',
		hideDetails: '詳細を隠す',
	};
</script>

<CwStatCard title="温度" stats={stats} unit="°C" labels={jaLabels} />
API

Usage and API reference

CwStatCard summarises a series with min, average and max, and can expand to show median, standard deviation, count and range. Values are formatted with the shared number formatter and the unit you pass.

How to think about it

  1. Pass precomputed statistics `stats` takes `min`, `max`, `avg`, `median`, `stdDev`, `count`, `lastReading` and `trend`. Missing values render as "—".
  2. Let people expand for detail With `expandable`, a “Show details” button (a real `<button aria-expanded>`) reveals the extra statistics as a description list.
  3. Keep the accent readable `accentColor` colours the average marker and value. The default uses `--cw-accent-text`, which meets text contrast in both themes.

Props and callbacks

APITypeDetails
title Required
stringCard heading.
stats Required
CwStatCardDataStatistics to display.
unit
stringUnit shown after values, e.g. "°C".
accentColor

Default: var(--cw-accent-text)

stringCSS colour for the average highlight.
expandable

Default: false

booleanAdds the Show/Hide details toggle.
headingLevel

Default: 3

1–6Heading level of the title.
loading

Default: false

booleanShows a skeleton while statistics load.
locale
stringLocale for number formatting.
labels
CwStatCardLabelsOverrides for every visible string, including `showDetails` and `hideDetails`.

Copy-paste examples

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

Temperature summary
Temperature summary Copy code 
<script lang="ts">
	import { CwStatCard } from '@cropwatchdevelopment/cwui';
</script>

<CwStatCard
	title="Greenhouse temperature"
	unit="°C"
	expandable
	stats={{ min: 17.2, avg: 22.8, max: 29.4, median: 22.5, stdDev: 2.9, count: 288 }}
/>