Skip to main content

StatGroup

StatGroup

A responsive grid of stat cards for a KPI row

Tags: chart stat kpi layout dashboard reporting

View Demo

The StatGroup lays out StatCard components in a responsive grid: one column on small screens, growing to the chosen number of columns at wider breakpoints. Give it a label to expose the cards as a named group to assistive technology.

Svelte only (@classic-homes/charts-svelte); React support is pending.

Import​

<script>
  import { StatGroup, StatCard } from '@classic-homes/charts-svelte';
</script>

Basic Usage​

<script>
  import { StatGroup, StatCard } from '@classic-homes/charts-svelte';
</script>

<StatGroup label="Key metrics" columns={4}>
  <StatCard label="Closings YTD" value={412} delta={{ previous: 368 }} />
  <StatCard label="Backlog" value={214} delta={{ previous: 198 }} />
  <StatCard
    label="Avg cycle time"
    value={112}
    valueFormat="days"
    delta={{ previous: 121, goodWhen: 'down' }}
  />
  <StatCard label="Cancellation rate" value={0.064} valueFormat="percent" />
</StatGroup>

Props​

Prop Type Default Description
columns 2 | 3 | 4 | 5 | 6 4 Columns at the widest breakpoint (2 from sm; 3–4 from lg; 5–6 from xl)
label string - Accessible name for the group, e.g. 'Key metrics'; sets role="group"
children Snippet required The stat cards
class string - Custom CSS class

Data Structure​

// StatGroup takes no data; its children are StatCard components
interface StatGroupProps {
  columns?: 2 | 3 | 4 | 5 | 6;
  label?: string;
  class?: string;
  children: Snippet;
}

Examples​

Three Columns from Records​

<StatGroup label="Community summary" columns={3}>
  {#each communities as community}
    <StatCard
      label={community.name}
      value={community.closings}
      delta={{ previous: community.closingsLastYear, label: 'vs last year' }}
      trend={community.monthlyClosings}
      trendVariant="bar"
    />
  {/each}
</StatGroup>

Six-Up Dashboard Row​

<StatGroup label="Operations" columns={6}>
  <StatCard label="Starts" value={58} />
  <StatCard label="Under construction" value={311} />
  <StatCard label="Closings" value={47} />
  <StatCard label="Avg cycle time" value={112} valueFormat="days" />
  <StatCard label="Open warranty" value={86} />
  <StatCard label="Margin" value={0.218} valueFormat="percent" />
</StatGroup>

Accessibility​

  • With label, the grid has role="group" and that aria-label
  • Cards keep source order at every breakpoint, so reading order matches visual order
On this page