Display pageviews React chart

README.md

@@ -39,7 +39,7 @@ or single run:
 
 To get code coverage metrics run:
 
-    docker-compose run --rm node yarn test -- --coverage
+    docker-compose run --rm node yarn test --coverage
 
 A detailed HTML report will be generated in the [coverage/lcov-report](coverage/lcov-report) directory.
 

package.json

@@ -13,6 +13,7 @@
     "react-router-dom": "^4.2.2",
     "react-scripts": "1.1.0",
     "react-test-renderer": "^16.2.0",
+    "recharts": "^1.0.0-beta.10",
     "redux": "^3.7.2",
     "redux-mock-store": "^1.5.1",
     "redux-thunk": "^2.2.0"

src/Application.jsx

@@ -9,6 +9,7 @@ import {createStore, applyMiddleware, compose} from 'redux';
 import keenReducer from './reducers/keen';
 import thunk from 'redux-thunk';
 import Explorer from "./components/Explorer";
+import Chart from "./containers/Chart";
 
 class Application {
   static createServices(dependencies) {
@@ -68,6 +69,7 @@ const ApplicationComponent = ({services, store}) => (
         <Switch>
           <Route path="/dashboard" render={() => <Dashboard/>}/>
           <Route path="/explorer" render={() => <Explorer keen={services.keen}/>}/>
+          <Route path="/chart" component={Chart}/>}/>
           <Route path="/about" render={() => <Page title="About"/>}/>
           <Route path="/contact" render={() => <Page title="Contact"/>}/>
           <Route path="/" render={() => <Page title="Welcome"/>}/>

src/components/Chart.jsx

@@ -0,0 +1,52 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {AreaChart, Area, XAxis, YAxis, Tooltip, Legend} from 'recharts';
+import Layout from "./Layout";
+
+export default class Chart extends Component {
+  static colors = [
+    {stroke: '#8884d8', fill: '#8884d8'},
+    {stroke: '#82ca9d', fill: '#82ca9d'},
+  ];
+
+  static color(index) {
+    return Chart.colors[index] || {stroke: '#ffc658', fill: '#ffc658'};
+  }
+
+  componentDidMount() {
+    this.props.keenQuery();
+  }
+
+  seriesNames() {
+    if (this.props.data && this.props.data.length > 0) {
+      return Object.keys(this.props.data[0]).filter((key) => {
+        return key !== 'dateTime';
+      })
+    }
+
+    return [];
+  }
+
+  areas() {
+    return this.seriesNames().map((seriesName, index) => {
+      return <Area type="linear" stackId="1" key={index} dataKey={seriesName} {...Chart.color(index)} />
+    });
+  }
+
+  render() {
+    return (
+      <AreaChart width={600} height={400} data={this.props.data}>
+        <Legend verticalAlign="top"/>
+        <XAxis dataKey="dateTime"/>
+        <YAxis/>
+        <Tooltip/>
+        {this.areas()}
+      </AreaChart>
+    )
+  }
+}
+
+Chart.propTypes = {
+  keenQuery: PropTypes.func.isRequired,
+  data: PropTypes.array
+};

src/components/Chart.spec.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Chart from './Chart';
+import renderer from 'react-test-renderer';
+import {chartData} from '../fixtures';
+
+describe('Chart', () => {
+  it('renders empty chart when no data', () => {
+    const chart = renderer.create(<Chart keenQuery={() => null}/>).toJSON();
+    expect(chart).toMatchSnapshot();
+  });
+
+  it('renders area chart', () => {
+    const chart = renderer.create(<Chart data={chartData} keenQuery={() => null}/>).toJSON();
+    expect(chart).toMatchSnapshot();
+  });
+});

src/components/Navigation.jsx

@@ -10,6 +10,7 @@ const Navigation = () => (
             <li><Link to="/">Home</Link></li>
             <li><Link to="/dashboard">Dashboard</Link></li>
             <li><Link to="/explorer">Explorer</Link></li>
+            <li><Link to="/chart">Chart</Link></li>
             <li><Link to="/about">About</Link></li>
             <li><Link to="/contact">Contact</Link></li>
           </ul>

src/components/Navigation.spec.jsx

@@ -6,6 +6,6 @@ import { shallow } from 'enzyme';
 describe('Navigation', () => {
   it('should display 3 links', () => {
     const navigation = shallow(<Navigation/>);
-    expect(navigation.find(Link)).toHaveLength(5);
+    expect(navigation.find(Link)).toHaveLength(6);
   });
 });