Functional Weave
Code in TypeScript

charts.sparkline@1.0.0

README.md

1,460 bytes · view raw

# charts.sparkline

A sparkline is a word-sized line chart: no axes, no labels, just the shape of
a series and a dot on its latest value. `sparkline(values, width, height,
padding)` returns the SVG path and where to put that dot, fitted into a box.

- Values are spaced evenly from `padding` to `width - padding`. The lowest
  value is drawn at the bottom of the padded box and the highest at the top,
  so the line always uses the full height (a sparkline shows shape, not
  magnitude; put the number beside it if magnitude matters).
- `null` is a gap: the line breaks there and resumes after it. A value on its
  own between gaps is drawn as a dot (`M x,y Z`, which a round line cap shows),
  as d3 does.
- The end marker is the last value that is not a gap. With no values at all
  the path is `""` and the end is `null`.
- A flat series (every value equal) is drawn along the middle of the box
  rather than dividing by a zero range. A single value sits at the right-hand
  end, where the latest value of a sparkline belongs.
- Coordinates go through `charts.scale` (6 places) and `charts.shape`'s
  linePath, which rounds them to 2 places and prints them without exponents,
  so the path string is identical in every language. The end marker is
  rounded to 2 places the same way.

`padding` keeps the stroke and the dot from being clipped at the box's edge;
about half the dot's diameter is usual. A box with no room left inside its
padding is an error.