keen/keen-react-charts

A React Component for Keen-Dataviz.js

Keen charts react component

Install with NPM

npm install keen-react-charts --save

Usage

Use this component to create charts from the data received from the Keen's API. Charts expect a results prop of the response from the query or a raw object. All the configuration properties could be passed in props.

Example

import React from 'react';
import ReactDOM from 'react-dom';
import Chart from 'keen-react-charts';
import KeenAnalysis from 'keen-analysis';

import 'keen-dataviz/dist/keen-dataviz.css';
import './styles/style.css';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      type: 'funnel',
      title: 'Actions and purchases',
      labelMapping: {
        pageviews: 'Pageviews',
        banner_visibility: 'Banner visibility',
        banner_clicks: 'Banner clicks',
        signups: 'Signups',
      },
      funnel: {
        lines: false,
        percents: {
          show: true,
        },
        resultValues: false
      },
      renderOnVisible: true
    };
  }

  componentDidMount() {
    const client = new KeenAnalysis({
      projectId: 'YOUR_PROJECT_ID',
      readKey: 'YOUR_READ_KEY'
    })
      .query({
        analysis_type: 'funnel',
        steps: [
          {
            event_collection: 'pageviews',
            actor_property: 'user.uuid',
            timeframe: {
              start: '2019-03-13T00:00:00.000Z',
              end: '2019-08-14T00:00:00.000Z'
            }
          },
          {
            event_collection: 'banner_visibility',
            actor_property: 'user.uuid',
            timeframe: {
              start: '2019-03-13T00:00:00.000Z',
              end: '2019-08-14T00:00:00.000Z'
            }
          },
          {
            event_collection: 'banner_clicks',
            actor_property: 'user.uuid',
            timeframe: {
              start: '2019-03-13T00:00:00.000Z',
              end: '2019-08-14T00:00:00.000Z'
            }
          },
          {
            event_collection: 'signups',
            actor_property: 'user.uuid',
            timeframe: {
              start: '2019-03-13T00:00:00.000Z',
              end: '2019-08-14T00:00:00.000Z'
            }
          }
        ],
      })
      .then((results) => {
        this.setState({
          results,
        });
      });
  }


  render() {
    return (
      <Chart {...this.state} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

Configuration

Charts configurations you can check here: keen-dataviz.js

keen-react-charts's Issues

Can't Dynamically Set Size For Chart

My goal is to let different charts have different sizes. For example, I might have a size prop in my component, and big would mean the chart is rendered bigger.

According to docs of keen-dataviz, It's better to control the size using the CSS of the container HTML element.
(While it's also possible to directly pass in {size: {width:..., height:xxx }}) to c3, it seems to only work for height, and not width.

Except we don't have access to the <div> directly in keen-react-charts.

I have tried adding two classNames through theme, e.g. theme="keen-dataviz my-own-class", but that seems to break the whole chart.

The solution could come in a variety of ways, but here are some I could see:

1. Allow passing in a style prop to <Chart>, which will then be applied on the <div>
2. Allow passing in a size prop to <Chart>, which will then be applied on the <div>
3. Allow passing in multiple classNames as theme to <Chart>, which will then be applied on the <div>
4. Allow passing in a id prop to <Chart>, which will then be applied on the <div>

Keen-Analysis dependency

Right now the keen-analysis is added as a devDependency so in result the user need to install it by his own.