Commit 5547fbab authored by Vladimir Kiryakov's avatar Vladimir Kiryakov
Browse files

fix chart direction

parent 289b3901
module.exports = { module.exports = {
debug: false, debug: false,
mqttTopic: process.env.REACT_APP_MQTT_TOPIC, mqttTopic: process.env.REACT_APP_MQTT_TOPIC || '/gateway/localhost.localdomain/sensors',
mqttUrl: process.env.REACT_APP_MQTT_URL, mqttUrl: process.env.REACT_APP_MQTT_URL || 'ws://broker.mqttdashboard.com:8000/mqtt',
}; };
\ No newline at end of file
...@@ -7,7 +7,6 @@ import Router from './Router'; ...@@ -7,7 +7,6 @@ import Router from './Router';
import registerServiceWorker from './registerServiceWorker'; import registerServiceWorker from './registerServiceWorker';
import 'bootstrap/dist/css/bootstrap.css'; import 'bootstrap/dist/css/bootstrap.css';
import './styles'; import './styles';
import mqtt from 'mqtt';
const store = configureStore(); const store = configureStore();
...@@ -15,22 +14,3 @@ const store = configureStore(); ...@@ -15,22 +14,3 @@ const store = configureStore();
registerServiceWorker(); registerServiceWorker();
render(<Router store={store}/>, document.getElementById('root')); render(<Router store={store}/>, document.getElementById('root'));
// debugger
// const client = mqtt.connect('ws://iot.eclipse.org:80/ws')
//
// client.on('connect', function () {
// // debugger
// client.subscribe('/gateway/#')
// client.publish('presence', 'OK')
// });
//
// client.on('message', function (topic, message) {
// // debugger
// // message is Buffer
// // dispatch(disconnected());
//
// console.error(topic)
// console.error(message)
// // client.end()
// });
// //
...@@ -18,7 +18,7 @@ const mqttMiddleware = (function () { ...@@ -18,7 +18,7 @@ const mqttMiddleware = (function () {
if (interval) clearInterval(interval); if (interval) clearInterval(interval);
interval = setInterval(() => { interval = setInterval(() => {
if (messages.length) { if (messages.length) {
// if (config.debug) console.log('MQTT: dispatch batch update'); if (config.debug) console.log('MQTT: dispatch batch update');
store.dispatch(pushMessages(messages)); store.dispatch(pushMessages(messages));
messages = []; messages = [];
} }
...@@ -34,40 +34,25 @@ const mqttMiddleware = (function () { ...@@ -34,40 +34,25 @@ const mqttMiddleware = (function () {
reconnectPeriod = action.payload.reconnectPeriod; reconnectPeriod = action.payload.reconnectPeriod;
client = mqtt.connect(url, {reconnectPeriod}); client = mqtt.connect(url, {reconnectPeriod});
client.on('connect', () => { client.on('connect', () => {
// if (config.debug) console.log('MQTT: client connected'); if (config.debug) console.log('MQTT: client connected');
store.dispatch(connected()); store.dispatch(connected());
client.subscribe(topic); client.subscribe(topic);
client.publish(topic, '{}');
setTimeout(() => { setTimeout(() => {
client.end(); client.end();
}, 270000); // 4.5 minutes }, 270000); // 4.5 minutes
}); });
client.on('close', () => { client.on('close', () => {
// if (config.debug) console.log('MQTT: client disconnected'); if (config.debug) console.log('MQTT: client disconnected');
client.end(); client.end();
store.dispatch(disconnected()); store.dispatch(disconnected());
}); });
client.on('message', (msgTopic, msg) => { client.on('message', (msgTopic, msg) => {
const message = decoder.decode(msg); const message = decoder.decode(msg);
// if (config.debug) console.info('MQTT: Message recieved.\nTopic: %s\nPayload: %s', topic, message); if (config.debug) console.info('MQTT: Message recieved.\nTopic: %s\nPayload: %s', topic, message);
if (_.isEqual(topic, msgTopic)) { if (_.isEqual(topic, msgTopic)) {
messages.push({topic, message: message, timestamp: new Date().getTime()}); messages.push({topic, message: message, timestamp: new Date().getTime()});
} }
setTimeout(() => {
client.publish(topic, `
{
"accel": {
"x":${Math.random()},
"y":${Math.random()},
"z":${Math.random()}
},
"button": false,
"timestamp": 2123243234434
}
`);
}, 1000)
}); });
break; break;
default: default:
......
...@@ -9,11 +9,6 @@ import _ from "lodash"; ...@@ -9,11 +9,6 @@ import _ from "lodash";
class Chart extends Component { class Chart extends Component {
constructor(props) {
super(props);
this.chart = null;
}
static propTypes = { static propTypes = {
className: PropTypes.string, className: PropTypes.string,
children: PropTypes.oneOfType([ children: PropTypes.oneOfType([
...@@ -26,31 +21,16 @@ class Chart extends Component { ...@@ -26,31 +21,16 @@ class Chart extends Component {
messages: [] messages: []
}; };
shouldComponentUpdate(nextProps, nextState) {
const {accelXYZ} = nextProps;
_.attempt(() => this.chart.flow({
columns: accelXYZ,
length: 0,
duration: 0
}), {});
return false;
}
render() { render() {
const {className} = this.props; const {className, accelXYZ} = this.props;
const data = { const data = {
columns: [ columns: accelXYZ,
['x'], type: 'line'
['y'],
['z']
],
type: 'line',
}; };
return ( return (
<div className={className}> <div className={className}>
<C3Chart ref={(el) => this.chart = el.chart} data={data} size={{ <C3Chart key={Math.random()} data={data} size={{
height: 240 height: 240
}}/> }}/>
</div> </div>
...@@ -64,7 +44,7 @@ export default styled(Chart)` ...@@ -64,7 +44,7 @@ export default styled(Chart)`
overflow-y: auto; overflow-y: auto;
max-height: 400px; max-height: 400px;
>.c3 { > .c3 {
overflow: hidden; overflow: hidden;
} }
` `
...@@ -92,7 +92,7 @@ SubscribeToTopic.propTypes = { ...@@ -92,7 +92,7 @@ SubscribeToTopic.propTypes = {
reconnectPeriod: PropTypes.number, reconnectPeriod: PropTypes.number,
topic: PropTypes.string, topic: PropTypes.string,
url: PropTypes.string, url: PropTypes.string,
maxMessageCapture: PropTypes.number, maxMessageCapture: PropTypes.string,
displayType: PropTypes.string, displayType: PropTypes.string,
displayForm: PropTypes.bool, displayForm: PropTypes.bool,
toggleMqttForm: PropTypes.func toggleMqttForm: PropTypes.func
...@@ -104,7 +104,7 @@ export default styled(reduxForm({ ...@@ -104,7 +104,7 @@ export default styled(reduxForm({
initialValues: { initialValues: {
url: config.mqttUrl, url: config.mqttUrl,
topic: config.mqttTopic, topic: config.mqttTopic,
maxMessageCapture: 10, maxMessageCapture: '10',
displayType: 'string' displayType: 'string'
} }
})(SubscribeToTopic))` })(SubscribeToTopic))`
......
...@@ -21,7 +21,7 @@ export default (state = { ...@@ -21,7 +21,7 @@ export default (state = {
messages: [action.payload.message, ...state.messages] messages: [action.payload.message, ...state.messages]
}; };
case MQTT_PUSH_MESSAGES: case MQTT_PUSH_MESSAGES:
const newAccelXYZ = action.payload.messages.reduce((res, i) => { const newAccelXYZData = action.payload.messages.reduce((res, i) => {
const obj = _.attempt(() => JSON.parse(i.message), {}); const obj = _.attempt(() => JSON.parse(i.message), {});
const x = _.get(obj, 'accel.x'); const x = _.get(obj, 'accel.x');
const y = _.get(obj, 'accel.y'); const y = _.get(obj, 'accel.y');
...@@ -30,11 +30,19 @@ export default (state = { ...@@ -30,11 +30,19 @@ export default (state = {
if (y) res[1].push(y); if (y) res[1].push(y);
if (z) res[2].push(z); if (z) res[2].push(z);
return res; return res;
}, [['x'], ['y'], ['z']]); }, [[], [], []]);
const newAccelXYZ =
[
[...state.accelXYZ[0], ...newAccelXYZData[0]],
[...state.accelXYZ[1], ...newAccelXYZData[1]],
[...state.accelXYZ[2], ...newAccelXYZData[2]]
].map((i) => i.length > action.payload.maxMessageCapture ? i.slice(i.length - action.payload.maxMessageCapture, i.length) : i);
return { return {
...state, ...state,
messages: [...action.payload.messages, ...state.messages].slice(0, action.payload.maxMessageCapture), messages: [...action.payload.messages, ...state.messages].slice(0, action.payload.maxMessageCapture),
accelXYZ: [...state.accelXYZ, ...newAccelXYZ] accelXYZ: newAccelXYZ
}; };
case MQTT_CONNECTED: case MQTT_CONNECTED:
return { return {
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment