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

fix chart direction

parent 289b3901
module.exports = {
debug: false,
mqttTopic: process.env.REACT_APP_MQTT_TOPIC,
mqttUrl: process.env.REACT_APP_MQTT_URL,
mqttTopic: process.env.REACT_APP_MQTT_TOPIC || '/gateway/localhost.localdomain/sensors',
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';
import registerServiceWorker from './registerServiceWorker';
import 'bootstrap/dist/css/bootstrap.css';
import './styles';
import mqtt from 'mqtt';
const store = configureStore();
......@@ -15,22 +14,3 @@ const store = configureStore();
registerServiceWorker();
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 () {
if (interval) clearInterval(interval);
interval = setInterval(() => {
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));
messages = [];
}
......@@ -34,40 +34,25 @@ const mqttMiddleware = (function () {
reconnectPeriod = action.payload.reconnectPeriod;
client = mqtt.connect(url, {reconnectPeriod});
client.on('connect', () => {
// if (config.debug) console.log('MQTT: client connected');
if (config.debug) console.log('MQTT: client connected');
store.dispatch(connected());
client.subscribe(topic);
client.publish(topic, '{}');
setTimeout(() => {
client.end();
}, 270000); // 4.5 minutes
});
client.on('close', () => {
// if (config.debug) console.log('MQTT: client disconnected');
if (config.debug) console.log('MQTT: client disconnected');
client.end();
store.dispatch(disconnected());
});
client.on('message', (msgTopic, 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)) {
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;
default:
......
......@@ -9,11 +9,6 @@ import _ from "lodash";
class Chart extends Component {
constructor(props) {
super(props);
this.chart = null;
}
static propTypes = {
className: PropTypes.string,
children: PropTypes.oneOfType([
......@@ -26,31 +21,16 @@ class Chart extends Component {
messages: []
};
shouldComponentUpdate(nextProps, nextState) {
const {accelXYZ} = nextProps;
_.attempt(() => this.chart.flow({
columns: accelXYZ,
length: 0,
duration: 0
}), {});
return false;
}
render() {
const {className} = this.props;
const {className, accelXYZ} = this.props;
const data = {
columns: [
['x'],
['y'],
['z']
],
type: 'line',
columns: accelXYZ,
type: 'line'
};
return (
<div className={className}>
<C3Chart ref={(el) => this.chart = el.chart} data={data} size={{
<C3Chart key={Math.random()} data={data} size={{
height: 240
}}/>
</div>
......@@ -64,7 +44,7 @@ export default styled(Chart)`
overflow-y: auto;
max-height: 400px;
>.c3 {
> .c3 {
overflow: hidden;
}
`
......@@ -92,7 +92,7 @@ SubscribeToTopic.propTypes = {
reconnectPeriod: PropTypes.number,
topic: PropTypes.string,
url: PropTypes.string,
maxMessageCapture: PropTypes.number,
maxMessageCapture: PropTypes.string,
displayType: PropTypes.string,
displayForm: PropTypes.bool,
toggleMqttForm: PropTypes.func
......@@ -104,7 +104,7 @@ export default styled(reduxForm({
initialValues: {
url: config.mqttUrl,
topic: config.mqttTopic,
maxMessageCapture: 10,
maxMessageCapture: '10',
displayType: 'string'
}
})(SubscribeToTopic))`
......
......@@ -21,7 +21,7 @@ export default (state = {
messages: [action.payload.message, ...state.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 x = _.get(obj, 'accel.x');
const y = _.get(obj, 'accel.y');
......@@ -30,11 +30,19 @@ export default (state = {
if (y) res[1].push(y);
if (z) res[2].push(z);
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 {
...state,
messages: [...action.payload.messages, ...state.messages].slice(0, action.payload.maxMessageCapture),
accelXYZ: [...state.accelXYZ, ...newAccelXYZ]
accelXYZ: newAccelXYZ
};
case MQTT_CONNECTED:
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