Commit 55893b96 authored by Vladimir Kiryakov's avatar Vladimir Kiryakov
Browse files

added button status to chart

parent fe1a958a
......@@ -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>
);
}
......
......@@ -6,7 +6,7 @@ import Chart from '../../components/Chart';
const mapStateToProps = ({mqtt}) => {
return ({
accelXYZ: mqtt.accelXYZ
accelXYZB: mqtt.accelXYZB
})
};
......
......@@ -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 {
......
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