Download Latest Version
v1.2.4.tar.gz (165.1 kB)
Get an email when there's a new version of React Trend
| Name | Modified | Size | Downloads / Week |
|---|---|---|---|
| Parent folder | |||
| README.md | 2017-03-10 | 1.3 kB | |
| v1.2.3.tar.gz | 2017-03-10 | 100.8 kB | |
| v1.2.3.zip | 2017-03-10 | 130.3 kB | |
| Totals: 3 Items | 232.4 kB | 0 | |
Fix bug with single-value Trends coloured by gradients
v1.2.2 fixed an issue with single-value Trends, but I was only testing it with single-colour Trends, not ones with gradients.
Technical details
It turns out a quirk of the default objectBoundingBox gradient space is that paths that are 0px tall cannot have gradients applied. Even if the stroke of the path means that it's 10px of actual screen-space, the shape itself has no height dimension, and the stroke property is rendered invalid.
An alternate approach would have been to switch gradient spaces to userSpaceOnUse, but this had the adverse effect of changing how all gradients are applied.
While we could have specified to apply the gradient space conditionally on the values, this limits us in the future for tweening between data sets. Better to have a single rule for all data values.
The hacky solution we settled on was to apply a very slight (0.0001) offset to the first data point, when all data points are equal. This has no effect on how it is rendered, because it is far too small of a different to be visible, but it's enough to circumvent the SVG spec's rule about objectBoundingBox gradient spaces.
More info: https://svgwg.org/svg2-draft/pservers.html#LinearGradientElement
