Data Display
Metrics (Charts)
KpiGrid, AreaChartCard, BreakdownCard — dashboard metrics with recharts. Hover highlight across donut and bar list.
KpiGrid
AreaChartCard
Daily active
MAX 97AVG 64.9LAST 97
Installs
MAX 107AVG 74.9LAST 107
BreakdownCard (donut + bar, hover to highlight)
Platforms
Total2.5K
Windows1.2K49%
macOS68027%
Linux32013%
Android1807%
Other954%
Share
Windows
124049%
macOS
68027%
Linux
32013%
Android
1807%
Other
954%
Versions (bar only)
Share
1.2.0
80055%
1.1.0
45031%
1.0.0
20014%
Usage
import { KpiGrid, AreaChartCard, BreakdownCard } from '@pulsesync/uikit'
<KpiGrid values={{ totalInstalls, dau, mau }} labels={...} formatNumber={n => n.toLocaleString()} />
<AreaChartCard title="Daily active" points={series} granularity="day" locale="en" tone="cyan" />
<BreakdownCard title="Platforms" items={items} mode="donut" showBars hoveredKey={hoveredKey} onHoverKeyChange={setHoveredKey} />