Build / Molecules

StatTile

molecule
play-fn

A single headline metric.

Used on the dashboard for at-a-glance figures and on the analytics page as the summary row above the drill-down.

import { StatTile } from '@meetcard/deck'

Example

<StatTile label="Connections captured" value="1,284" caption="last 30 days" trend={{ direction: 'up', label: '12% vs. previous 30 days' }} />

Stories

Every preview below is the real component, rendered in this page from the same story Storybook runs. The width control resizes each preview's container; CSS media queries still follow the browser window, so breakpoint behaviour is worth checking in Storybook.

Default

Source

const Default = () => <div style={{ maxWidth: 260 }}>
    <StatTile label="Connections captured" value="1,284" caption="last 30 days" />
</div>;

Rising. The direction is spelled out, not left to colour.

Rising

Source

const Rising = () => <div style={{ maxWidth: 260 }}>
    <StatTile
        label="Connections captured"
        value="1,284"
        caption="last 30 days"
        trend={{ direction: 'up', label: '12% vs. previous 30 days' }} />
</div>;

Falling. The direction is spelled out, not left to colour.

Falling

Source

const Falling = () => <div style={{ maxWidth: 260 }}>
    <StatTile
        label="Connections captured"
        value="1,284"
        caption="last 30 days"
        trend={{ direction: 'down', label: '8% vs. previous 30 days' }} />
</div>;

A rise is not always good. Sync failures rising is bad, so positiveDirection decides the tone rather than the arrow alone.

Rising Is Bad

Source

const RisingIsBad = () => <div style={{ maxWidth: 260 }}>
    <StatTile
        label="CRM sync failures"
        value="17"
        caption="last 30 days"
        positiveDirection="down"
        trend={{ direction: 'up', label: '5 more than last month' }} />
</div>;

Unchanged. Flat is a result too, and it reads as one.

Flat

Source

const Flat = () => <div style={{ maxWidth: 260 }}>
    <StatTile
        label="Connections captured"
        value="1,284"
        caption="last 30 days"
        trend={{ direction: 'flat', label: 'No change' }} />
</div>;

The dashboard's headline row.

Dashboard Row

Source

const DashboardRow = () => (
  <div
    style={{
      display: 'grid',
      gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
      gap: 16,
    }}
  >
    <StatTile
      label="Connections captured"
      value="1,284"
      caption="last 30 days"
      trend={{ direction: 'up', label: '12%' }}
    />
    <StatTile
      label="Follow-up completion"
      value="68%"
      trend={{ direction: 'up', label: '4 pts' }}
    />
    <StatTile
      label="Meetings booked"
      value="94"
      trend={{ direction: 'flat', label: 'No change' }}
    />
    <StatTile
      label="CRM sync failures"
      value="3"
      positiveDirection="down"
      trend={{ direction: 'down', label: '9 fewer' }}
    />
  </div>
);

Props

Prop	Type	Default	Description
`label`required	`ReactNode`	—	What is being measured, e.g. "Connections captured".
`value`required	`ReactNode`	—	The headline figure. Pre-formatted by the caller.
`caption`	`ReactNode`	—	Period or qualifier, e.g. "last 30 days".
`positiveDirection`	`'up' \| 'down' \| 'flat'`	`'up'`	Whether a rise is good. Follow-up completion rising is good; sync failures rising is not — so the tone cannot be inferred from direction.
`trend`	`{ direction: TrendDirection; label: string }`	—	Change versus the previous period. `direction` carries the meaning for screen readers and via an arrow glyph, so it never rests on color alone.

Also accepts everything from HTMLAttributes, so id, data-* and event handlers pass straight through.