overflow_backup_2018_0455/overflow_app
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

chart test

Browse Source
This commit is contained in:
insanity 2017-09-13 18:59:53 +09:00
parent 9d2ac4ae8e
commit b6dac7d896
6 changed files with 179 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package.json
View File

@ -67,7 +67,8 @@
"webpack-dashboard": "^0.4.0",
"webpack-dev-server": "^2.5.0",
"webpack-merge": "^4.1.0",
"webpack-visualizer-plugin": "^0.1.11"
"webpack-visualizer-plugin": "^0.1.11",
"@types/recharts":"^0.22.5"
},
"dependencies": {
"auth0-lock": "^10.18.0",
@ -89,7 +90,8 @@
"reflect-metadata": "^0.1.10",
"reselect": "^3.0.1",
"semantic-ui-react": "^0.71.1",
"whatwg-fetch": "^2.0.3"
"whatwg-fetch": "^2.0.3",
"recharts":"^1.0.0-alpha.4"
},
"jest": {
"moduleFileExtensions": [

3
src/ts/@overflow/app/views/layout/AppLayout.tsx
View File

@ -15,7 +15,7 @@ import HistoryList from '../../views/history/List';
import TitleBarContainer from '@overflow/app/views/layout/TitleBarContainer';
import SensorSetup from '../../views/monitoring/sensor/Setup';
import NotificationList from '../../views/notification/Notification';
import Metric from '../../views/metric/Metric';
export interface Props extends RouteComponentProps<any> {
}
@ -50,6 +50,7 @@ export class AppLayout extends React.Component<Props, State> {
<Route exact={true} path={`${this.props.match.url}sensor_setup`} component={SensorSetup}/>
<Route exact={true} path={`${this.props.match.url}sensor_setup/:id`} component={SensorSetup}/>
<Route exact={true} path={`${this.props.match.url}notifications`} component={NotificationList}/>
<Route exact={true} path={`${this.props.match.url}metrics`} component={Metric}/>
<Redirect to='/error/404' />
</Switch>
</Segment>

2
src/ts/@overflow/app/views/layout/LeftMenu.tsx
View File

@ -107,7 +107,7 @@ class LeftMenu extends React.Component<Props, State> {
<Header inverted sub icon='industry' content='Dashboard' />
</Menu.Item>
<Menu.Item name='Metrics' href='/'>
<Menu.Item name='Metrics'onClick={(e) => this.props.onChangeUrl('/metrics')}>
<Header inverted sub icon='tasks' content='Metrics' />
</Menu.Item>

20
src/ts/@overflow/app/views/metric/Metric.tsx
View File

@ -0,0 +1,20 @@
import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import MetricContainer from '@overflow/metric/react/Metric';
class Metric extends React.Component<RouteComponentProps<object>, object> {
public constructor(props?: RouteComponentProps<object>, context?: object) {
super(props, context);
}
public render(): JSX.Element {
return (
<div>
<MetricContainer />
</div>
);
}
}
export default Metric;

23
src/ts/@overflow/metric/react/Metric.tsx Normal file
View File

@ -0,0 +1,23 @@
import { connect, Dispatch } from 'react-redux';
import {
Metric,
StateProps as StateProps,
DispatchProps as DispatchProps,
} from './components/Metric';
import Domain from '@overflow/domain/api/model/Domain';
import { push as routerPush } from 'react-router-redux';
import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest';
export function mapStateToProps(state: any): StateProps {
return {
};
}
export function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
return {
};
}
export default connect(mapStateToProps, mapDispatchToProps)(Metric);

129
src/ts/@overflow/metric/react/components/Metric.tsx Normal file
View File

@ -0,0 +1,129 @@
import * as React from 'react';
import { Button } from 'semantic-ui-react';
import {
BarChart, Bar, XAxis, YAxis, ZAxis, Cell, CartesianGrid, Tooltip, Legend, LineChart, Line,
ResponsiveContainer, AreaChart, Area, PieChart, Pie,
} from 'recharts';
export interface StateProps {
}
export interface DispatchProps {
}
export type Props = StateProps & DispatchProps;
export interface State {
data: any;
}
export class Metric extends React.Component<Props, State> {
private loadInterval: any;
constructor(props: Props, context: State) {
super(props, context);
this.state = {
data: undefined,
};
}
public componentWillMount(): void {
const data = [];
for (let i = 0; i < 10; i++) {
let user = Math.floor(Math.random() * 10000) + 1000;
let nice = Math.floor(Math.random() * 10000) + 1000;
let system = Math.floor(Math.random() * 10000) + 1000;
let idle = Math.floor(Math.random() * 10000) + 1000;
let usage = Math.floor(Math.random() * 100) + 0;
let elem = { 'id': i, 'user': user, 'nice': nice, 'system': system, 'idle': idle, 'usage': usage };
data[i] = elem;
}
this.setState({
data: data,
});
}
private tooltipPayload(): Array<any> {
return [{ name: '05-01', value: 12, unit: '%' }];
}
private showTooltipData = (data: any) => {
if (data.active) {
console.log(data.payload[0].payload.user);
return (
<div style={{ backgroundColor: 'white', opacity: 0.7, border: '1px solid black', padding: '4px' }}>
<p>{`Total Usage : ${data.payload[0].value}%`}</p>
<p>{`User : ${data.payload[0].payload.user}`}</p>
<p>{`Nice : ${data.payload[0].payload.nice}`}</p>
<p>{`System : ${data.payload[0].payload.system}`}</p>
<p>{`Idle : ${data.payload[0].payload.idle}`}</p>
</div>
);
}
return null;
}
public render(): JSX.Element {
return (
<div>
<AreaChart syncId='anyId' width={800} height={300}
data={this.state.data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} >
<XAxis dataKey='id' />
<YAxis />
{/* <CartesianGrid stroke='#ccc' /> */}
<CartesianGrid strokeDasharray='5 5' />
<Tooltip content={this.showTooltipData.bind(this)} />
<Legend />
<Area type='monotone' dataKey='usage' stroke='#8884d8' unit='%' name='Usage' />
</AreaChart>
<LineChart syncId='anyId' width={800} height={300}
data={this.state.data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} >
<XAxis dataKey='id' />
<YAxis />
{/* <CartesianGrid stroke='#ccc' /> */}
<CartesianGrid strokeDasharray='3 3' />
<Tooltip />
<Legend />
<Line type='monotone' dataKey='user' stroke='#8884d8' unit='jiffies' />
<Line type='monotone' dataKey='idle' stroke='#42454a' unit='jiffies' />
</LineChart>
<BarChart syncId='anyId' width={800} height={250} data={this.state.data}>
<XAxis dataKey='id' />
<YAxis />
<CartesianGrid strokeDasharray='3 3' />
<Tooltip />
<Legend />
<Bar dataKey='user' fill='#8884d8' unit='jiffies' />
<Bar dataKey='idle' fill='#82ca9d' unit='jiffies'/>
</BarChart>
<BarChart syncId='anyId' width={800} height={250} data={this.state.data}>
<XAxis dataKey='id' />
<YAxis />
<CartesianGrid strokeDasharray='3 3' />
<Tooltip />
<Legend />
<Bar dataKey='user' fill='#ffc658' unit='jiffies' stackId='mixed'/>
<Bar dataKey='idle' fill='#82ca9d' unit='jiffies' stackId='mixed'/>
<Bar dataKey='nice' fill='#98ca41' unit='jiffies' stackId='mixed'/>
<Bar dataKey='system' fill='#81da9d' unit='jiffies' stackId='mixed'/>
</BarChart>
{/* <PieChart width={730} height={300}>
<Tooltip />
<Pie data={data01} cx='50%' cy='50%' outerRadius={50} fill='#8884d8' />
<Pie data={data02} cx='50%' cy='50%' innerRadius={60} outerRadius={80} fill='#82ca9d' label />
</PieChart>; */}
</div>
);
}
}