npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2019 – Ryan Hefner

react-trend

v1.2.5

Published

react-trend React component

Downloads

11,382

Readme

React Trend

React Trend


npm travis travis



Graphing tools are often complex, abstract, and heavy. They require domain-specific knowledge, and a significant time investment.

While building rich data visualizations for an analytics app, this is a necessary cost. But what if you just need a spark line that shows a trend?

For example, here's how GitHub shows activity on a repo:

Here's how Twitter displays your recent analytics:

These are very simple and elegant visualizations, and they should not require a bloated graphing library to produce.

React Trend is a concrete component that does 1 thing, and does it well: generate these trending graphs.

Demo

Check out the React Trend playground.

Features

  • Simple. Integrate in seconds.
  • Scalable. Uses SVG for sharp, scalable graphs. Will fill the parent container, or you can provide a fixed size.
  • Beautiful. Built-in gradient support, and customizable smoothing.
  • Animatable. Support for on-mount animations where the trend graph draws from left to right.
  • Tiny. Zero-dependency, gzips to <3kb.

Installation

$ yarn add react-trend

# Alternatively:
$ npm i -S react-trend

UMD builds are also available via CDN:

UMD build exposes the component as Trend.

Quickstart

import Trend from 'react-trend';

const MyComponent = () => (
  <Trend data={[0, 10, 5, 22, 3.6, 11]} />
);

// That's it!
// You can, of course, customize it. Check out the API Reference below.
// Be sure to check out `autoDraw`, `gradient`, and `smoothing`.

API Reference

SVG Props

By default, all properties not recognized by React Trend will be delegated to the SVG. The line inherits these properties if none of its own override them.

This means that, among other properties, you can use:

  • stroke to set a solid colour,
  • strokeWidth to change the default line thickness,
  • strokeOpacity to create a transparent line,
  • strokeLinecap/strokeLinejoin to control the edges of your line,
  • strokeDasharray to create a dashed line, and
  • strokeDashoffset to control where the dashes start.

autoDraw

TypeRequiredDefault
Booleanfalse

Allow the line to draw itself on mount. Set to true to enable, and customize using autoDrawDuration and autoDrawEasing.

NOTE: This property uses strokeDasharray and strokeDashoffset under the hood to perform the animation. Because of this, any values you provide for those properties will be ignored.

Example
<Trend
  data={data}
  autoDraw
  autoDrawDuration={3000}
  autoDrawEasing="ease-in"
/>

autoDrawDuration

TypeRequiredDefault
Number2000

The amount of time, in milliseconds, that the autoDraw animation should span.

This prop has no effect if autoDraw isn't set to true.

Example
<Trend
  data={data}
  autoDraw
  autoDrawDuration={3000}
  autoDrawEasing="ease-in"
/>

autoDrawEasing

TypeRequiredDefault
Stringease

The easing function to use for the autoDraw animation. Accepts any transition timing function within the CSS spec (eg. linear, ease, ease-in, cubic-bezier...).

This prop has no effect if autoDraw isn't set to true.

Example
<Trend
  data={data}
  autoDraw
  autoDrawDuration={3000}
  autoDrawEasing="ease-in"
/>

data

TypeRequiredDefault
Number|Objectundefined

The data accepted by React Trend is incredibly simple: An array of y-axis values to graph.

React Trend takes care of normalization, so don't worry about ensuring the data is in a specific range.

This does mean that all data points will be evenly-spaced. If you have irregularly-spaced data, it will not be properly represented.

As of v1.2.0, you may supply an array of data objects with a value property.

Example
<Trend data={[120, 149, 193.4, 200, 92]} />
<Trend data={[{ value: 4 }, { value: 6 }, { value: 8 }]} />

gradient

TypeRequiredDefault
Stringundefined

React Trend supports vertical gradients. It accepts an array of 2+ colour values, and will fade evenly between them from the bottom up.

Colour can be specified as any SVG-supported format (named, rgb, hex, etc).

Example
<Trend gradient={['#0FF', '#F0F', '#FF0']} />

height

TypeRequiredDefault
Numberundefined

Set an explicit height for your SVG. By default it ensures a 1:4 aspect ratio with the width, and the width expands to fill the container.

Note that in most cases it is sufficient to leave this blank, and just control the size of the parent container.

Example
<Trend width={200} height={200} />

padding

TypeRequiredDefault
Number8

If you set a very large strokeWidth on your line, you may notice that it gets "cropped" towards the edges. This is because SVGs don't support overflow.

By increasing this number, you expand the space around the line, so that very thick lines aren't cropped.

In most cases you don't need to touch this value.

Example
<Trend strokeWidth={20} padding={18} />

radius

TypeRequiredDefault
Number10

When using smoothing, you may wish to control the amount of curve around each point. For example, a 0 radius is equivalent to not having any smoothing at all, where an impossibly-large number like 10000 will ensure that each peak is as curved as it can possibly be.

This prop has no effect if smooth isn't set to true.

Example
<Trend smooth radius={20} strokeWidth={4} />

smooth

TypeRequiredDefault
Booleanfalse

Smooth allows the peaks to be 'rounded' out so that the line has no jagged edges.

By tweaking the radius prop, you can use this as a subtle prop to tone down the sharpness, or you can set a very high radius to create a snake-like line.

Example
<Trend smooth radius={20} strokeWidth={4} />

width

TypeRequiredDefault
Numberundefined

Set an explicit width for your SVG. By default it ensures a 1:4 aspect ratio with the height, expanding to fill the width of the container.

Note that in most cases it is sufficient to leave this blank, and just control the width of the parent container.

Example
<Trend width={200} height={200} />