Carlos deArtola monogramCARLOS DE ARTOLA
APPENDIX D

Figure

Chart first; the value is a mono data label. Numbered because figures in a section are a sequence. Never a giant numeral.

HANDLE
figure
LIVES IN
src/components/OutcomeMarks.jsx (Figure)
USED ON
Outcome, Evidence
PROPS
no · value · label · mark · hero
EXAMPLE
LIVE

As it renders.

  1. FIG. 01INDEXED TO 100
    10062BEFOREAFTER-38
    38%

    fewer support calls after the new flow shipped

  2. FIG. 02SECONDS
    90 s
    0306090120
    ~90s

    to complete a decision end to end

  3. FIG. 03NAMED
    5

    surfaces shipped

CODE
COPY AND PASTE

How it is called.

JSX
import { Figure } from '../components/OutcomeMarks.jsx'

<ol className="grid grid-cols-1 md:grid-cols-3 gap-x-8 gap-y-8">
  <Figure no={1} hero value="~90s" label="to complete a draw decision"
    mark={{ kind: 'scale', value: 90, max: 120, unit: 's', ticks: [0, 30, 60, 90, 120] }} />
  <Figure no={2} value="38%" label="fewer payment-status support calls"
    mark={{ kind: 'slope', after: 62, caption: 'SUPPORT CALLS, INDEXED' }} />
</ol>
RULES

What must stay true.

Chart first; the value is a mono data label. Numbered because figures in a section are a sequence. Never a giant numeral.