lucid-ui
Version:
A UI component library from AppNexus.
32 lines (31 loc) • 1.42 kB
JavaScript
import _ from 'lodash';
import React from 'react';
import createClass from 'create-react-class';
import { BarChart, Button, LoadingIndicator } from '../../../index';
const dates = ['2015-01-01', '2015-01-02', '2015-01-03', '2015-01-04'];
const getData = () => _.map(dates, date => ({ x: date, y: _.random(1, 5) }));
export default createClass({
getInitialState: () => ({
isLoading: true,
data: _.map(dates, date => ({ x: date, y: 0 })),
overlayKind: 'dark',
}),
handleKindClick() {
this.setState({
overlayKind: this.state.overlayKind === 'dark' ? 'light' : 'dark',
});
},
componentDidMount() {
setTimeout(() => this.setState({ isLoading: false, data: getData() }), 1000);
},
render() {
const { data, isLoading } = this.state;
return (React.createElement(LoadingIndicator, { isLoading: isLoading, overlayKind: this.state.overlayKind },
React.createElement(Button, { style: { margin: 10 }, onClick: () => {
this.setState({ isLoading: true });
setTimeout(() => this.setState({ isLoading: false, data: getData() }), 2000);
} }, "Get more data"),
React.createElement(Button, { onClick: this.handleKindClick }, "Switch overlay color"),
React.createElement(BarChart, { width: 750, data: data, yAxisTitle: 'Revenue' })));
},
});