# griff-react

> Charting library that relies on React's virtual diffing.

Latest version **0.0.2** (published 2018-01-03) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install griff-react
pnpm add griff-react
yarn add griff-react
bun add griff-react
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2018-01-03 |
| First published | 2018-01-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | msroed |
| Keywords | react-component |

## Links

- npm: https://www.npmjs.com/package/griff-react
- npm.io page: https://npm.io/package/griff-react

## Dependencies (3)

- [d3](https://npm.io/package/d3.md) ^4.12.0
- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [bluebird](https://npm.io/package/bluebird.md) ^3.5.1

## Recent versions

- 0.0.2 (latest) — 2018-01-03

## README

# cognitechart-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.

`react-cognitechart` 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 raw
process value.

A more complex example will come soon.

### Storybook & demo: https://griff.surge.sh

## Test locally

```sh
git clone https://github.com/cognitedata/react-cognitechart
yarn
yarn start
```

Will run the local demo located at /demo/src/index.js

## Usage

See example in demo/src

## Loader

Example loader

```js
const loader = () => {
  const series = {
    1: { color: 'red', data: randomData(), id: 1 },
    2: { color: 'blue', data: randomData(), id: 2 }
  };
  return (domain, subDomain, config, oldSeries, reason) => {
    return series;
  };
};
```

The loader returns a function which the `<DataProvider />` will call whenever it
needs updated information. If your data is static - return `series` and it will
keep the data.

The `reason` parameter is a string describing why the `<DataProvider>` is
calling the function, and is one of the following: `MOUNTED`, `INTERVAL`,
`NEW_LOADER`, `NEW_DOMAIN`, `UPDATE_SUBDOMAIN`.

A simple loader which returns the same series over and over again would simply
be

```js
if (reason === 'NEW_LOADER') {
  return series;
}
return oldSeries;
```

---
_Source: https://npm.io/package/griff-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._