griff-react

High-performance charting of time series with dynamic data in mind. Using the power of React to render, with event-handling and maths by d3.

griff-react introduces the concept of dynamic data loading for displaying complex time series. You provide a loader function which is in charge of fetching the data given input parameters. For instance, if the current domain is 1 year, you might want to fetch daily aggregates instead of the raw process values.

Slack

Join us on Slack at cognite-community.slack.com. (Get invited to join the Slack workspace here)

Storybook & demo

Our tip-of-tree Storybook can be found on griff-master.surge.sh

Test locally

git clone https://github.com/cognitedata/griff-react
yarn
yarn storybook #starts the stories

Usage

yarn add @cognite/griff-react

or

npm i @cognite/griff-react

See examples in stories/index.js

Concepts

DataProvider

The outermost component in the hierarchy. The DataProvider is in charge of handling the data for all the other components. It uses React's new context API to expose the properties sent.

DataProvider.propTypes = {
  xDomain: PropTypes.arrayOf(PropTypes.number).isRequired,
  updateInterval: PropTypes.number,
  yAccessor: PropTypes.func,
  xAccessor: PropTypes.func,
  yAxisWidth: PropTypes.number,
  pointsPerSeries: PropTypes.number,
  children: PropTypes.node.isRequired,
  defaultLoader: PropTypes.func,
  series: seriesPropType.isRequired,
};

The series prop type is

export const singleSeriePropType = PropTypes.shape({
  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
  color: PropTypes.string,
  hidden: PropTypes.bool,
  strokeWidth: PropTypes.number,
  drawPoints: PropTypes.bool,
  loader: PropTypes.func,
  step: PropTypes.bool,
  xAccessor: PropTypes.func,
  yAccessor: PropTypes.func,
  yDomain: PropTypes.arrayOf(PropTypes.number.isRequired),
});

The data loader

The thing that separates this library with other libraries is the concept of the data loader. The data loader is a function that gets called by the DataProvider with information about the current state of the chart as well as the reason why it's called. The different reasons are

MOUNTED, // First render of the chart
INTERVAL, // If you specify an update interval, it will be called every n seconds
NEW_LOADER, // The loader function changed
NEW_DOMAIN, // The outer domain changed,
NEW_SUBDOMAIN, // The user zoomed to a new subdomain.
UPDATE_POINTS_PER_SERIES, // The pointsPerSeries prop has changed

The simplest loader simply delivers static data and would look like this:

const randomData = () => {
  // generate random data
  return data;
};

const loader = ({ id, oldSeries, reason }) => {
  if (reason === 'MOUNTED') {
    // Get data from somewhere, the DataProvider has mounted
    return data;
  }
  return oldSeries.data;
};

The loader will override the series if same keys are provided properties sent to the DataProvider..

Branches

Active development happens on the master branch -- changes here will be published as a prerelease of the N+1 release. As of this writing, master will eventually become the 0.3.0 release, so its version in package.json is 0.3.0-0.

When it is time cut the 0.3.0 release, a 0.3 branch will be created, and package.json's version field will have the prerelease portion removed. Then master's package.json will be given a version of 0.4.0-0.

Changes to older versions will need to be merged into release branches as well as the master branch, unless it is a specific fix, relevant to only that version.

Publishing

To publish versions, run yarn release. This will determine the correct version number, publish the release, and then push the new tag to GitHub.