React Trend Versions Save

Switch to standalone prop-types package.

In compliance with React 15.5 (and in preparation for React 16), we've switched to the new dedicated prop-types package.

Thanks to @psicotropicos for their work in this release :)

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

Add support for same-value lines

Fixes a bug where same-value datasets (eg. [0, 0, 0, 0, 0]) would crash.

The fix assumes that if all values are the same, the line will run along the bottom of the available space. This is not an ideal fix for all cases; a future version will allow for greater customization. See the discussion in #9 for more information.

Special thanks to @Mattasher for discovering this bug!

Fix bug with multiple trends not able to have unique gradient props.

When using multiple <Trend> components on the same page, a bug was preventing each one from receiving different gradient props. This release ensures that multiple trends can co-exist without sharing a gradient.

Special thanks to @Fenwil for spotting and opening an issue :)

Support data as value objects, in addition to values.

In v1.1.x, the data prop was only accepted as an array of numbers:

<Trend data={[1, 2, 3]} />

This version allows you to pass an array of objects that contain the values:

<Trend data={[{ value: 1 }, { value: 2 }, { value: 3 }]} />

This is not inherently useful as is (although it may be convenient if your data happens to already be in this form factor). It's a precursor to some cool things we'd like to do, such as providing tooltips when hovering over points.

More Documentation Tweaks

Several small fixes for documentation:

• Removed duplicate 'padding' section (thanks @TheSharpieOne!)
• Re-styled the header
• Set the image URLs to be direct, so they show up on NPM
• Reduced the size of the GitHub/Twitter spark line examples.

No code changes. Publishing a patch version only so that the README propagates to NPM.

File sizes after gzip:

  umd/react-trend.js      5.7 KB
  umd/react-trend.min.js  2.63 KB

Minor CI and documentation tweaks

Integrated CI and code-coverage, added badges to the README, updated a bunch of the copy to be clearer.

This is a silly release, but AFAIK this is the only way to publish updates to the README to NPM.

Initial Release!

While this isn't the first version published to NPM, it's the first version that has the initial set of features completed, and has been tested in an external application.

This initial version includes:

• The ability to draw trend lines when supplied with an array of data points
• auto-draw animation on mount (but not on update or dismount)
• smoothing to reduce the harshness of edges. Uses a 'rounded corners' approach instead of a true curve approach.
• gradients with an unlimited number of colours. Restricted to vertical-only.