CwStatCard

Displays statistical summaries (min / avg / max) with a visual range bar, current reading, and current-vs-average delta.

Default (expandable)

Temperature

25.3°C 1°C
18.2 24.5 32.7
Min Avg Max
Click to expand

Humidity

72% 4%
35 68.4 92
Min Avg Max
Click to expand

CO₂

4,583ppm 3,963ppm
380 620 1200
Min Avg Max
Click to expand

Custom accent colour

Light Intensity

620lux 200lux
0 420 850
Min Avg Max
Click to expand

Soil Moisture

72% 4%
35 68.4 92
Min Avg Max
Click to expand

VPD

25.3kPa 1kPa
18.2 24.5 32.7
Min Avg Max
Click to expand

Non-expandable

Quick Glance

10 30 50
Min Avg Max

CO₂ Summary

4,583ppm 3,963ppm
380 620 1200
Min Avg Max

Current vs average

Above Average

45°C 15°C
10 30 50
Min Avg Max
Click to expand

Below Average

15°C -15°C
10 30 50
Min Avg Max
Click to expand

At Average

30°C 0°C
10 30 50
Min Avg Max
Click to expand
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 Copy code 
<CwStatCard
	title="Humidity"
	stats={humidityStats}
	unit="%"
	accentColor="var(--cw-info-500)"
/>
Non-expandable Copy code 
<CwStatCard
	title="Light Intensity"
	stats={lightStats}
	unit="lux"
	expandable={false}
/>

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 1°C
18.2 24.5 32.7
最小 平均 最大
クリックで展開

湿度

72% 4%
35 68.4 92
最小 平均 最大
クリックで展開

CO₂

4,583ppm 3,963ppm
380 620 1200
最小 平均 最大
クリックで展開
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: '平均',
		clickToExpand: 'クリックで展開',
		clickToCollapse: 'クリックで折りたたむ',
	};
</script>

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