Commit 587b3eeb authored by Vladimir Kiryakov's avatar Vladimir Kiryakov
Browse files

added chart overlay

parent bb6ba754
......@@ -6,13 +6,14 @@ import 'c3/c3.css';
import classNames from "classnames";
import moment from 'moment';
import _ from 'lodash';
import TextOverlay from '../../../UIKit/components/Overlay/TextOverlay';
class Chart extends Component {
static propTypes = {
className: PropTypes.string,
accelXYZB: PropTypes.array
accelXYZB: PropTypes.array,
isConnected: PropTypes.bool
};
static defaultProps = {
......@@ -25,7 +26,7 @@ class Chart extends Component {
}
render() {
const {className, accelXYZB} = this.props;
const {className, accelXYZB, isConnected} = this.props;
const data = {
x: 'timestamp',
y: 'timestamp',
......@@ -58,12 +59,14 @@ class Chart extends Component {
};
return (
<div className={classNames('text-muted', className)}>
<label>Accelerometer</label>
<C3Chart key={Math.random()} data={data} size={{
height: 240
}} transition={transition} axis={axis} point={point}/>
</div>
<TextOverlay showLoader={!isConnected} text="MQTT is not connected" >
<div className={classNames('text-muted', className)}>
<label>Accelerometer</label>
<C3Chart key={Math.random()} data={data} size={{
height: 240
}} transition={transition} axis={axis} point={point}/>
</div>
</TextOverlay>
);
}
......
......@@ -5,7 +5,7 @@ import classNames from 'classnames'
import {Field, reduxForm} from 'redux-form'
import {Collapse} from 'reactstrap';
import config from '../../../../config'
import LoadOverlay from '../../../UIKit/components/LoadOverlay';
import LoaderOverlay from '../../../UIKit/components/Overlay/LoaderOverlay';
const SubscribeToTopic = ({
......@@ -39,7 +39,7 @@ const SubscribeToTopic = ({
return (
<LoadOverlay showLoader={isConnectInProcess}>
<LoaderOverlay showLoader={isConnectInProcess}>
<div className={classNames('text-muted', className)}>
<button type="button" className="btn btn-link"
onClick={toggleMqttForm}>{displayForm ? 'Hide Subscribe form' : 'Show Subscribe form'}</button>
......@@ -87,7 +87,7 @@ const SubscribeToTopic = ({
</Collapse>
<Field name="displayType" component={renderDisplayType}/>
</div>
</LoadOverlay>
</LoaderOverlay>
);
};
......
......@@ -6,7 +6,8 @@ import Chart from '../../components/Chart';
const mapStateToProps = ({mqtt}) => {
return ({
accelXYZB: mqtt.accelXYZB
accelXYZB: mqtt.accelXYZB,
isConnected: mqtt.isConnected
})
};
......
......@@ -2,25 +2,17 @@ import React from 'react';
import PropTypes from 'prop-types'
import styled from 'styled-components';
import Spinner from '../Spinner';
import Overlay from './Overlay';
const Overlay = styled.div`
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
z-index: 2;
cursor: not-allowed;
`;
const LoadOverlay = ({className, showLoader, children}) => (
const LoaderOverlay = ({className, showLoader, children}) => (
<div className={className}>
{showLoader ? <Overlay><Spinner/></Overlay> : null}
{children}
</div>
);
LoadOverlay.propTypes = {
LoaderOverlay.propTypes = {
showLoader: PropTypes.bool,
className: PropTypes.string,
children: PropTypes.oneOfType([
......@@ -30,6 +22,6 @@ LoadOverlay.propTypes = {
};
export default styled(LoadOverlay)`
export default styled(LoaderOverlay)`
position: relative;
`
import React from 'react';
import styled from 'styled-components';
const Overlay = styled.div`
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
z-index: 2;
cursor: not-allowed;
`;
export default Overlay;
\ No newline at end of file
import React from 'react';
import PropTypes from 'prop-types'
import styled from 'styled-components';
import Overlay from './Overlay';
const CenteredText = styled.div`
position: absolute;
top: 50%;
left: 50%;
z-index: 99;
cursor: not-allowed;
user-select: none;
opacity: 0.5;
`;
const TextOverlay = ({className, showLoader, children, text}) => (
<div className={className}>
{showLoader ? <Overlay><CenteredText className="text-muted">{text}</CenteredText></Overlay> : null}
{children}
</div>
);
TextOverlay.propTypes = {
showLoader: PropTypes.bool,
className: PropTypes.string,
text: PropTypes.string,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
])
};
export default styled(TextOverlay)`
position: relative;
`
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