Insight Cards

Usage

import { InsightCards } from '@wdzyi/ui';

<InsightCards
  autoplay={6000}
  onAsk={(card) => ask(card.ask)}
  items={[
    {
      id: 'revenue',
      text: 'Revenue is up 14.9% on last quarter.',
      title: 'Revenue a week',
      figure: '$1.46M',
      change: { text: '+$189K', tone: 'add' },
      chart: {
        kind: 'lines',
        labels: weeks,
        series: [
          { name: 'This quarter', values: thisQuarter },
          { name: 'Last quarter', values: lastQuarter },
        ],
        format: (value) => `$${value}K`,
      },
      ask: 'Which plans grew fastest?',
    },
  ]}
/>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

itemsInsightCardsItem[]

The cards. Each has a sentence, a title for its chart, a figure with a change and a note beside it, the chart, and a question to ask next. A chart is lines, with the series that matters first and any others to compare it with; bars, with measures to switch between and a dashed line, such as a budget, for each; or a split of a whole into its parts.

titlestring = 'Insights'

The heading, before the page count.

autoplaynumber

Turns to the next card after this long, in ms. It waits while the pointer or the focus is on it, and stops for good once it’s been used.

onAsk(item: InsightCardsItem) => void

Called with the card whose question was pressed.

Notes

• The charts are drawn by hand in SVG, at their real size in pixels, so lines stay 2px and marks stay square at any width. As a card arrives its lines draw themselves along, bars grow up from the baseline in turn and a split opens across.
• Run the pointer along a chart, or focus it and use the arrow keys, and the legend reads out each line’s value at that point. Until then it shows the latest, or the highest bar. The latest value of the line that matters is marked in foil.
• Each chart is a slider to a screen reader, so every value can be heard as well as seen. The left and right arrows turn the cards, except while a chart has them.
• Under 320px wide, the quieter notes drop away so the figures keep their room.
• With reduced motion, the charts appear drawn and the cards don’t turn by themselves.