fix chart direction

src/config.js

 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

src/index.js

@@ -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()
-//     });
-// //

src/middlewares/mqtt.js

@@ -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:

src/modules/MQTT/components/Chart/index.js

@@ -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;
   }
 `

src/modules/MQTT/components/SubscribeForm/index.js

@@ -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))`

src/reducers/mqtt.js

@@ -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 {