v0.59.0
Changed
-
FunnelChartis drawn as one ribbon across the card, and reads in three places. The stack
of full-width blocks with a row of text laid over each had two faults, and they had the same
root. A stage's fill and the label on it resolve to the same token family, so wherever the shape
reached under a row the text vanished into it — and the first stage of a funnel is a hundred
percent of itself, so it always reached. And the name, the count and the conversion shared one
line, which makes that line as wide as all three: on a phone the name was the one that gave way,
and a reader was left with "Checkout st…" against a number.So the stages now divide the width between them and the shape is a single ribbon symmetrical
about the centre line — each band as tall as its value where it starts and the next stage's
where it ends, sides curved so consecutive bands meet flush and the run reads as one narrowing
channel rather than a row of separate shapes. Each band is drawn concentrically, from a wide
faint ring to a tight near-solid core, which gives the edge a falloff and leaves a low-opacity
band for text to sit on. Stages grow out of the centre line one after another, in the order they
happen. The readings split three ways: the count above the band, the name below it, and the
conversion in a filled pill on the band itself — the one reading that sits over the shape, so it
is punched out of its own background and stays legible whatever the fill is doing underneath. -
FunnelChart.Legendis a row per stage. Names down one column, numbers down another. The
stages are a sequence and a wrapped centred line loses that — the order is only implied by the
order the names happen to be read in, and a long one breaks across lines that no longer align.
layout="inline"keeps the old arrangement where the names are short enough for it.
Removed
FunnelChart'salignandcornerRadius. A ribbon has no leading edge to hang off and no
corners to turn;edgeschooses between curved sides and straight diagonals instead.FunnelChart'sorientation. It shipped with a vertical run for one release and the layout
was carrying the design: down the screen a stage is a row, so its count and its name compete with
the shape for the same width, and both the shape and the names come off worse. Across the card a
stage is a column and each reading has that column to itself.
Migration
stageHeightis nowstageSize, and is optional — left unset the stages divide the card's
width between them, which is what a run across a card almost always wants.crossSizeis nowheight: how deep the ribbon tapers, the one measurement a set of counts
cannot supply.- Keep stage names short. A stage gets a column of the card's width, so five across a phone is
about seventy points each. - New:
layersfor the depth of the halo,edgesfor curved or straight sides,staggerDelay
for the wait between one stage arriving and the next.