Scatter Plot
Transactions by time of day and amount, cut into quarters by dashed guides at the averages, with a switch that narrows it to one category.
Usage
import { ScatterPlot } from '@wdzyi/ui';
<ScatterPlot
title='Spending'
points={[
{ id: 't1', label: 'Coffee', time: 8.25, amount: 3.6, category: 'Food' },
{ id: 't2', label: 'Rail', time: 17.75, amount: 18.4, category: 'Travel' },
{ id: 't3', label: 'Books', time: 16.2, amount: 12.99, category: 'Shops' },
]}
/>Part of @wdzyi/ui. See setup to install it, or copy the code above.
Props
- pointsScatterPlotPoint[]
- A square each: an id of its own, a label for its tooltip, the time in hours from midnight, so 13.5 is half past one, its amount and its category.
- titlestring
- Heads the card.
- categoriesstring[] = each in the points
- The switch’s categories, after All, in the order given. An empty list leaves the switch out.
- category, onCategoryChangestring, (category: string) => void = 'All'
- The category shown. Leave it out and the switch keeps its own.
- valuenumber = the total showing
- The big number, which counts to each new total.
- change, changeLabelnumber, string
- How far the big number moved, as a fraction, then quieter words beside it. The words go when the card is narrow.
- format, formatAxis(value: number) => string = pounds and pence
- How an amount reads in the big number and the tooltip, and on the axis, where it’s compact.
- heightnumber = 200
- The plot’s height in px. In a card with a height of its own, the plot fills what’s left.
Notes
- The square nearest the pointer is the one in hand, so nobody has to land on six pixels. It’s cut from the foil, and the rest step back.
- The dashed guides sit at the average time and amount, and their values take the place of any axis labels they’d touch. A new category slides them to its own averages.
- Narrowing to a category fades out the squares that leave and eases the amount axis to fit what’s left. The times hold still, so nothing jumps sideways.
- The squares arrive left to right the first time it’s seen. The arrow keys walk through the day a transaction at a time, each one read out, and with reduced motion everything appears at once.
- Values are sample data.