added button status to chart

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

@@ -4,18 +4,15 @@ import styled from 'styled-components';
 import C3Chart from 'react-c3js';
 import 'c3/c3.css';
 import classNames from "classnames";
-import _ from "lodash";
 import moment from 'moment';
+import _ from 'lodash';
 
 
 class Chart extends Component {
 
     static propTypes = {
         className: PropTypes.string,
-        children: PropTypes.oneOfType([
-            PropTypes.arrayOf(PropTypes.node),
-            PropTypes.node
-        ])
+        accelXYZB: PropTypes.array
     };
 
     static defaultProps = {
@@ -28,12 +25,13 @@ class Chart extends Component {
     }
 
     render() {
-        const {className, accelXYZ} = this.props;
+        const {className, accelXYZB} = this.props;
         const data = {
-            x: 'time',
+            x: 'timestamp',
+            y: 'timestamp',
             rows: [
-                ['x', 'y', 'z', 'time'],
-                ...accelXYZ
+                ['x', 'y', 'z', 'timestamp'],
+                ...accelXYZB.map(r => r.slice(0, 4))
             ],
             type: 'line',
 
@@ -48,6 +46,13 @@ class Chart extends Component {
             }
         };
 
+
+        let point = {
+            //show if button pressed
+            show: ({index}) => _.get(accelXYZB, [index, 4]), //button index;
+            r: 5
+        };
+
         const transition = {
             duration: 0
         };
@@ -55,9 +60,9 @@ class Chart extends Component {
         return (
             <div className={classNames('text-muted', className)}>
                 <label>Accelerometer</label>
-                <C3Chart data={data} size={{
+                <C3Chart key={Math.random()} data={data} size={{
                     height: 240
-                }} transition={transition} axis={axis}/>
+                }} transition={transition} axis={axis} point={point}/>
             </div>
         );
     }

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

@@ -6,7 +6,7 @@ import Chart from '../../components/Chart';
 
 const mapStateToProps = ({mqtt}) => {
     return ({
-        accelXYZ: mqtt.accelXYZ
+        accelXYZB: mqtt.accelXYZB
     })
 };
 

src/reducers/mqtt.js

@@ -12,7 +12,7 @@ export default (state = {
     isConnected: false,
     isConnectInProcess: false,
     messages: [],
-    accelXYZ: [],
+    accelXYZB: [],
     displayForm: true
 }, action) => {
     switch (action.type) {
@@ -23,7 +23,7 @@ export default (state = {
             };
         case MQTT_PUSH_MESSAGES:
 
-            const newAccelXYZData = action.payload.messages.map((i) => {
+            const newAccelXYZBData = action.payload.messages.map((i) => {
                 const obj = _.attempt(() => JSON.parse(i.message), {});
                 const x = _.get(obj, 'accel.x');
                 const y = _.get(obj, 'accel.y');
@@ -33,17 +33,18 @@ export default (state = {
                 if (x && y && z) {
                     return [x, y, z, timestamp, button];
                 }
-            }).filter((i) => !_.isNil(i));
+                return [];
+            }).filter((i) => i.length > 0);
 
-            let newAccelXYZ = [...state.accelXYZ, ...newAccelXYZData];
-            newAccelXYZ = newAccelXYZ.length > action.payload.maxMessageCapture
-                ? newAccelXYZ.slice(newAccelXYZ.length - action.payload.maxMessageCapture, newAccelXYZ.length)
-                : newAccelXYZ;
+            let newAccelXYZB = [...state.accelXYZB, ...newAccelXYZBData];
+            newAccelXYZB = newAccelXYZB.length > action.payload.maxMessageCapture
+                ? newAccelXYZB.slice(newAccelXYZB.length - action.payload.maxMessageCapture, newAccelXYZB.length)
+                : newAccelXYZB;
 
             return {
                 ...state,
                 messages: [...action.payload.messages, ...state.messages].slice(0, action.payload.maxMessageCapture),
-                accelXYZ: newAccelXYZ,
+                accelXYZB: newAccelXYZB,
             };
         case MQTT_CONNECT:
             return {