chart test

package.json

@@ -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": [

src/ts/@overflow/app/views/layout/AppLayout.tsx

@@ -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>

src/ts/@overflow/app/views/layout/LeftMenu.tsx

@@ -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>
 

src/ts/@overflow/app/views/metric/Metric.tsx

@@ -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;

src/ts/@overflow/metric/react/Metric.tsx

@@ -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);

src/ts/@overflow/metric/react/components/Metric.tsx

@@ -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>
+        );
+    }
+
+}
+