From b6dac7d896ad959bde98127bbe370f44087dc5df Mon Sep 17 00:00:00 2001 From: insanity Date: Wed, 13 Sep 2017 18:59:53 +0900 Subject: [PATCH] chart test --- package.json | 6 +- .../@overflow/app/views/layout/AppLayout.tsx | 3 +- .../@overflow/app/views/layout/LeftMenu.tsx | 2 +- src/ts/@overflow/app/views/metric/Metric.tsx | 20 +++ src/ts/@overflow/metric/react/Metric.tsx | 23 ++++ .../metric/react/components/Metric.tsx | 129 ++++++++++++++++++ 6 files changed, 179 insertions(+), 4 deletions(-) create mode 100644 src/ts/@overflow/metric/react/Metric.tsx create mode 100644 src/ts/@overflow/metric/react/components/Metric.tsx diff --git a/package.json b/package.json index 858a68d..542c154 100644 --- a/package.json +++ b/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": [ diff --git a/src/ts/@overflow/app/views/layout/AppLayout.tsx b/src/ts/@overflow/app/views/layout/AppLayout.tsx index 5312d3d..09706d7 100644 --- a/src/ts/@overflow/app/views/layout/AppLayout.tsx +++ b/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 { } @@ -50,6 +50,7 @@ export class AppLayout extends React.Component { + diff --git a/src/ts/@overflow/app/views/layout/LeftMenu.tsx b/src/ts/@overflow/app/views/layout/LeftMenu.tsx index 397652e..f9d0b24 100644 --- a/src/ts/@overflow/app/views/layout/LeftMenu.tsx +++ b/src/ts/@overflow/app/views/layout/LeftMenu.tsx @@ -107,7 +107,7 @@ class LeftMenu extends React.Component {
- + this.props.onChangeUrl('/metrics')}>
diff --git a/src/ts/@overflow/app/views/metric/Metric.tsx b/src/ts/@overflow/app/views/metric/Metric.tsx index e69de29..424259b 100644 --- a/src/ts/@overflow/app/views/metric/Metric.tsx +++ b/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, object> { + + public constructor(props?: RouteComponentProps, context?: object) { + super(props, context); + } + + public render(): JSX.Element { + return ( +
+ +
+ ); + } +} + +export default Metric; diff --git a/src/ts/@overflow/metric/react/Metric.tsx b/src/ts/@overflow/metric/react/Metric.tsx new file mode 100644 index 0000000..a13ffb0 --- /dev/null +++ b/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): DispatchProps { + return { + + }; +} + +export default connect(mapStateToProps, mapDispatchToProps)(Metric); diff --git a/src/ts/@overflow/metric/react/components/Metric.tsx b/src/ts/@overflow/metric/react/components/Metric.tsx new file mode 100644 index 0000000..2a8855a --- /dev/null +++ b/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 { + + 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 { + return [{ name: '05-01', value: 12, unit: '%' }]; + } + + private showTooltipData = (data: any) => { + if (data.active) { + console.log(data.payload[0].payload.user); + return ( +
+

{`Total Usage : ${data.payload[0].value}%`}

+

{`User : ${data.payload[0].payload.user}`}

+

{`Nice : ${data.payload[0].payload.nice}`}

+

{`System : ${data.payload[0].payload.system}`}

+

{`Idle : ${data.payload[0].payload.idle}`}

+
+ ); + } + return null; + } + + public render(): JSX.Element { + + return ( +
+ + + + + {/* */} + + + + + + + + + + {/* */} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {/* + + + + ; */} +
+ ); + } + +} +