Added fusion chart

consumer.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var kafka = require('kafka-node');
+var Consumer = kafka.Consumer;
+var Offset = kafka.Offset;
+var Client = kafka.Client;
+var argv = require('optimist').argv;
+var topic = argv.topic || 'streaming-data';
+
+var client = new Client('localhost:2181');
+var topics = [{ topic: topic, partition: 1 }, { topic: topic, partition: 0 }];
+var options = { autoCommit: false, fetchMaxWaitMs: 1000, fetchMaxBytes: 1024 * 1024 };
+
+var consumer = new Consumer(client, topics, options);
+var offset = new Offset(client);
+
+consumer.on('message', function (message) {
+  console.log(message);
+});
+
+consumer.on('error', function (err) {
+  console.log('error', err);
+});
+
+/*
+* If consumer get `offsetOutOfRange` event, fetch data from the smallest(oldest) offset
+*/
+consumer.on('offsetOutOfRange', function (topic) {
+  topic.maxNum = 2;
+  offset.fetch([topic], function (err, offsets) {
+    if (err) {
+      return console.error(err);
+    }
+    var min = Math.min.apply(null, offsets[topic.topic][topic.partition]);
+    consumer.setOffset(topic.topic, topic.partition, min);
+  });
+});

package.json

@@ -3,9 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "fusioncharts": "^3.13.2-sr.1",
     "react": "^16.6.3",
     "react-dom": "^16.6.3",
-    "react-scripts": "2.1.1"
+    "react-fusioncharts": "^2.0.7",
+    "react-scripts": "2.1.1",
+    "socket.io": "^2.1.1",
+    "kafka-node": "3.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

server.js

@@ -0,0 +1,14 @@
+const io = require('socket.io')();
+io.on('connection', (client) => {
+  client.on('subscribeToTopic', (interval) => {
+    console.log('client is subscribing to timer with unit key ', interval);
+    setInterval(() => {
+      client.emit('timer', Math.random());
+      }, interval);
+  });
+});
+
+
+const port = 8000;
+io.listen(port);
+console.log('listening on port ', port);

src/Chart.js

@@ -0,0 +1,50 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+import ReactFC from 'react-fusioncharts';
+import { subscribeToKafkaSocket } from './loadData';
+
+class Chart extends Component {
+  constructor(props) {
+    super(props);
+    subscribeToKafkaSocket((err, value) => {
+      var data = this.state.data;
+      if (data.length > 20) {
+        data.shift();
+      }
+      data.push({
+        "label": new Date(),
+        "value": value
+      })
+      this.setState({data})
+    });
+  }
+
+
+  state = {
+    data: []
+  };
+
+  render () {
+    var chartConfigs = {
+      type: 'line',
+      width: 600,
+      height: 400,
+      dataFormat: 'json',
+      dataSource: {
+      "chart": {
+        "caption": "Countries With Most Oil Reserves [2017-18]",
+        "subCaption": "In MMbbl = One Million barrels",
+        "xAxisName": "Country",
+        "yAxisName": "Reserves (MMbbl)",
+        "numberSuffix": "K",
+        "theme": "fusion"
+      },
+      "data": this.state.data
+    },
+  };
+    return <ReactFC {...chartConfigs} />;
+  }
+}
+
+export default Chart;

src/home.js

@@ -0,0 +1,80 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+import FusionCharts from 'fusioncharts';
+import Charts from 'fusioncharts/fusioncharts.charts';
+import ReactFC from 'react-fusioncharts';
+import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
+
+
+ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);
+
+const chartConfigs = {
+  type: 'column2d',
+  width: 600,
+  height: 400,
+  dataFormat: 'json',
+  dataSource: {
+  "chart": {
+    "caption": "Countries With Most Oil Reserves [2017-18]",
+    "subCaption": "In MMbbl = One Million barrels",
+    "xAxisName": "Country",
+    "yAxisName": "Reserves (MMbbl)",
+    "numberSuffix": "K",
+    "theme": "fusion"
+  },
+  "data": [
+    {
+      "label": "Venezuela",
+      "value": "290"
+    },
+    {
+      "label": "Saudi",
+      "value": "260"
+    },
+    {
+      "label": "Canada",
+      "value": "180"
+    },
+    {
+      "label": "Iran",
+      "value": "140"
+    },
+    {
+      "label": "Russia",
+      "value": "115"
+    },
+    {
+      "label": "UAE",
+      "value": "100"
+    },
+    {
+      "label": "US",
+      "value": "30"
+    },
+    {
+      "label": "China",
+      "value": "30"
+    }
+  ]
+},
+};
+
+class Chart extends Component {
+  render () {
+    return <ReactFC {...chartConfigs} />;
+  }
+}
+
+ReactDOM.render(
+  <Chart />,
+  document.getElementById('root'),
+);
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: http://bit.ly/CRA-PWA
+serviceWorker.unregister();

src/index.js

@@ -1,10 +1,19 @@
-import React from 'react';
+import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
+import Chart from './Chart';
 import * as serviceWorker from './serviceWorker';
 
-ReactDOM.render(<App />, document.getElementById('root'));
+import FusionCharts from 'fusioncharts';
+import Charts from 'fusioncharts/fusioncharts.charts';
+import ReactFC from 'react-fusioncharts';
+import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
+
+
+ReactFC.fcRoot(FusionCharts, Charts, FusionTheme);
+
+ReactDOM.render(<Chart />, document.getElementById('root'));
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.

src/loadData.js

@@ -0,0 +1,7 @@
+import openSocket from 'socket.io-client';
+const  socket = openSocket('http://localhost:8000');
+function subscribeToKafkaSocket(cb) {
+  socket.on('timer', timestamp => cb(null, timestamp));
+  socket.emit('subscribeToTopic', 1000);
+}
+export { subscribeToKafkaSocket };