Added echarts
This commit is contained in:
poojaKarande13
Родитель
6c0ef25350
Коммит
e34189771c
|
|
@ -19,6 +19,15 @@ In this experiment we will plot data from Kafka onto Fusion charts.
|
|||
|
||||
### Architecture
|
||||
|
||||
npm start
|
||||
|
||||
Start Confluent
|
||||
|
||||
./bin/confluent start
|
||||
|
||||
node producer.js
|
||||
|
||||
node consumer.js
|
||||
|
||||
### References
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ io.on('connection', (socket) => {
|
|||
var buf = new Buffer(message.value, "binary");
|
||||
var decodedMessage = JSON.parse(buf.toString());
|
||||
io.sockets.emit('broadcast',decodedMessage);
|
||||
console.log(decodedMessage);
|
||||
//console.log(decodedMessage);
|
||||
});
|
||||
|
||||
consumer.on("error", function(err) {
|
||||
|
|
|
|||
|
|
@ -3,12 +3,17 @@
|
|||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^3.9.1",
|
||||
"echarts": "4.2.0-rc.2",
|
||||
"echarts-for-react": "^2.0.15-beta.0",
|
||||
"es5-ext": "^0.10.46",
|
||||
"fusioncharts": "^3.13.2-sr.1",
|
||||
"kafka-node": "3.0.1",
|
||||
"mina": "^1.0.9",
|
||||
"react": "^16.6.3",
|
||||
"react-dom": "^16.6.3",
|
||||
"react-fusioncharts": "^2.0.7",
|
||||
"react-scripts": "2.1.1",
|
||||
"react-scripts": "^2.1.3",
|
||||
"serve": "^10.1.1",
|
||||
"socket.io": "^2.1.1"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const KafkaService = {
|
|||
};
|
||||
|
||||
const buffer = new Buffer.from(JSON.stringify(event));
|
||||
console.log(event);
|
||||
//console.log(event);
|
||||
// Create a new payload
|
||||
const record = [
|
||||
{
|
||||
|
|
@ -43,4 +43,4 @@ setInterval(() => {
|
|||
KafkaService.sendRecord({data: Math.random()});
|
||||
count = count + 1;
|
||||
|
||||
}, 100);
|
||||
}, 1000);
|
||||
|
|
|
|||
|
|
@ -1,47 +1,114 @@
|
|||
import React, { Component } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import ReactFC from 'react-fusioncharts';
|
||||
import { subscribeToKafkaSocket } from './loadData';
|
||||
import ReactEcharts from 'echarts-for-react';
|
||||
import Grid from '@material-ui/core/Grid';
|
||||
|
||||
class Chart extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
subscribeToKafkaSocket((err, event) => {
|
||||
console.log(event);
|
||||
var data = this.state.data;
|
||||
var data1 = this.state.data1;
|
||||
if (data.length > 50) {
|
||||
data.shift();
|
||||
data1.shift();
|
||||
}
|
||||
data1.push({
|
||||
name: (new Date(event.timestamp)).toLocaleString('en-US'),
|
||||
value: [
|
||||
(new Date(event.timestamp)),
|
||||
Number.parseFloat(event.data).toPrecision(2)
|
||||
]
|
||||
})
|
||||
data.push({
|
||||
"label": (new Date(event.timestamp)).toLocaleString('en-US'),
|
||||
"label": (new Date(event.timestamp)).toLocaleString('en-US').split(' ')[1] + " PM",
|
||||
"value": event.data
|
||||
})
|
||||
this.setState({data})
|
||||
this.setState({data: data, data1: data1})
|
||||
}, 'tcde9abaa2');
|
||||
}
|
||||
|
||||
state = {
|
||||
data: []
|
||||
data: [],
|
||||
data1: []
|
||||
};
|
||||
|
||||
|
||||
render () {
|
||||
console.log('event');
|
||||
var chartOptions = {
|
||||
title: {
|
||||
text: 'E charts'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
formatter: function (params) {
|
||||
params = params[0];
|
||||
var date = new Date(params.name);
|
||||
return date.getDate() + '/' + (date.getMonth() + 1) + '/' + date.getFullYear() + ' : ' + params.value[1];
|
||||
},
|
||||
axisPointer: {
|
||||
animation: false
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data:['Energy']
|
||||
},
|
||||
xAxis : {
|
||||
type : 'time',
|
||||
name: 'Time',
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
yAxis : {
|
||||
type : 'value',
|
||||
name: 'Output Active Power (kW)',
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
series : [
|
||||
{
|
||||
name:'a',
|
||||
type: 'line',
|
||||
showSymbol: false,
|
||||
hoverAnimation: false,
|
||||
data: this.state.data1
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
var chartConfigs = {
|
||||
type: 'line',
|
||||
width: 600,
|
||||
height: 400,
|
||||
width: 700,
|
||||
dataFormat: 'json',
|
||||
dataSource: {
|
||||
"chart": {
|
||||
"caption": "Output active power from solar plant",
|
||||
"caption": "Fusion Charts",
|
||||
"xAxisName": "Time",
|
||||
"yAxisName": "Output Active Power (kW)",
|
||||
"theme": "fusion"
|
||||
"theme": "fusion",
|
||||
"labelDisplay": "Auto",
|
||||
"useEllipsesWhenOverflow":"0"
|
||||
},
|
||||
"data": this.state.data
|
||||
},
|
||||
};
|
||||
return <ReactFC {...chartConfigs} />;
|
||||
|
||||
return (<div style={{ padding: 20 }}>
|
||||
<div style={{padding: '20px', 'textAlign': 'center'}} >
|
||||
{"Output active power from solar plant"}
|
||||
</div>
|
||||
<Grid container spacing={40}>
|
||||
|
||||
<ReactFC width='700' {...chartConfigs} />
|
||||
<ReactEcharts
|
||||
option={chartOptions}
|
||||
style={{width: '700px'}}
|
||||
className='react_for_echarts' />
|
||||
</Grid>
|
||||
</div>);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, { Component } from 'react';
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import './index.css';
|
||||
import Chart from './Chart';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,117 @@
|
|||
// In production, we register a service worker to serve assets from local cache.
|
||||
|
||||
// This lets the app load faster on subsequent visits in production, and gives
|
||||
// it offline capabilities. However, it also means that developers (and users)
|
||||
// will only see deployed updates on the "N+1" visit to a page, since previously
|
||||
// cached resources are updated in the background.
|
||||
|
||||
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
|
||||
// This link also includes instructions on opting out of this behavior.
|
||||
|
||||
const isLocalhost = Boolean(
|
||||
window.location.hostname === 'localhost' ||
|
||||
// [::1] is the IPv6 localhost address.
|
||||
window.location.hostname === '[::1]' ||
|
||||
// 127.0.0.1/8 is considered localhost for IPv4.
|
||||
window.location.hostname.match(
|
||||
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
|
||||
)
|
||||
);
|
||||
|
||||
export default function register() {
|
||||
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
|
||||
// The URL constructor is available in all browsers that support SW.
|
||||
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
|
||||
if (publicUrl.origin !== window.location.origin) {
|
||||
// Our service worker won't work if PUBLIC_URL is on a different origin
|
||||
// from what our page is served on. This might happen if a CDN is used to
|
||||
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
|
||||
return;
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
|
||||
|
||||
if (isLocalhost) {
|
||||
// This is running on localhost. Lets check if a service worker still exists or not.
|
||||
checkValidServiceWorker(swUrl);
|
||||
|
||||
// Add some additional logging to localhost, pointing developers to the
|
||||
// service worker/PWA documentation.
|
||||
navigator.serviceWorker.ready.then(() => {
|
||||
console.log(
|
||||
'This web app is being served cache-first by a service ' +
|
||||
'worker. To learn more, visit https://goo.gl/SC7cgQ'
|
||||
);
|
||||
});
|
||||
} else {
|
||||
// Is not local host. Just register service worker
|
||||
registerValidSW(swUrl);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function registerValidSW(swUrl) {
|
||||
navigator.serviceWorker
|
||||
.register(swUrl)
|
||||
.then(registration => {
|
||||
registration.onupdatefound = () => {
|
||||
const installingWorker = registration.installing;
|
||||
installingWorker.onstatechange = () => {
|
||||
if (installingWorker.state === 'installed') {
|
||||
if (navigator.serviceWorker.controller) {
|
||||
// At this point, the old content will have been purged and
|
||||
// the fresh content will have been added to the cache.
|
||||
// It's the perfect time to display a "New content is
|
||||
// available; please refresh." message in your web app.
|
||||
console.log('New content is available; please refresh.');
|
||||
} else {
|
||||
// At this point, everything has been precached.
|
||||
// It's the perfect time to display a
|
||||
// "Content is cached for offline use." message.
|
||||
console.log('Content is cached for offline use.');
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
})
|
||||
.catch(error => {
|
||||
console.error('Error during service worker registration:', error);
|
||||
});
|
||||
}
|
||||
|
||||
function checkValidServiceWorker(swUrl) {
|
||||
// Check if the service worker can be found. If it can't reload the page.
|
||||
fetch(swUrl)
|
||||
.then(response => {
|
||||
// Ensure service worker exists, and that we really are getting a JS file.
|
||||
if (
|
||||
response.status === 404 ||
|
||||
response.headers.get('content-type').indexOf('javascript') === -1
|
||||
) {
|
||||
// No service worker found. Probably a different app. Reload the page.
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister().then(() => {
|
||||
window.location.reload();
|
||||
});
|
||||
});
|
||||
} else {
|
||||
// Service worker found. Proceed as normal.
|
||||
registerValidSW(swUrl);
|
||||
}
|
||||
})
|
||||
.catch(() => {
|
||||
console.log(
|
||||
'No internet connection found. App is running in offline mode.'
|
||||
);
|
||||
});
|
||||
}
|
||||
|
||||
export function unregister() {
|
||||
if ('serviceWorker' in navigator) {
|
||||
navigator.serviceWorker.ready.then(registration => {
|
||||
registration.unregister();
|
||||
});
|
||||
}
|
||||
}
|
||||
Загрузка…
Ссылка в новой задаче