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

chart t est

Browse Source
This commit is contained in:
insanity 2017-09-14 18:14:21 +09:00
parent 612c9c68b4
commit 8d938d6861
1 changed files with 44 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/ts/@overflow/metric/react/components/Metric.tsx
View File

@ -1,8 +1,8 @@
import * as React from 'react'; import * as React from 'react';
import { Button } from 'semantic-ui-react'; import { Button, Label } from 'semantic-ui-react';
import { import {
BarChart, Bar, XAxis, YAxis, ZAxis, Cell, CartesianGrid, Tooltip, Legend, LineChart, Line, BarChart, Bar, XAxis, YAxis, ZAxis, Cell, CartesianGrid, Tooltip, Legend, LineChart, Line,
ResponsiveContainer, AreaChart, Area, PieChart, Pie, ResponsiveContainer, AreaChart, Area, PieChart, Pie, ReferenceLine, Brush, ComposedChart,
} from 'recharts'; } from 'recharts';
export interface StateProps { export interface StateProps {
@ -46,16 +46,11 @@ export class Metric extends React.Component<Props, State> {
}); });
} }
private tooltipPayload(): Array<any> {
return [{ name: '05-01', value: 12, unit: '%' }];
}
private showTooltipData = (data: any) => { private showTooltipData = (data: any) => {
if (data.active) { if (data.active && data.payload) {
console.log(data.payload[0].payload.user);
return ( return (
<div style={{ backgroundColor: 'white', opacity: 0.7, border: '1px solid black', padding: '4px' }}> <div style={{ backgroundColor: 'white', opacity: 0.7, border: '1px solid black', padding: '4px' }}>
<p>{`Total Usage : ${data.payload[0].value}%`}</p> <p><b>{`Total Usage : ${data.payload[0].value}%`}</b></p>
<p>{`User : ${data.payload[0].payload.user}`}</p> <p>{`User : ${data.payload[0].payload.user}`}</p>
<p>{`Nice : ${data.payload[0].payload.nice}`}</p> <p>{`Nice : ${data.payload[0].payload.nice}`}</p>
<p>{`System : ${data.payload[0].payload.system}`}</p> <p>{`System : ${data.payload[0].payload.system}`}</p>
@ -66,20 +61,28 @@ export class Metric extends React.Component<Props, State> {
return null; return null;
} }
public render(): JSX.Element { public render(): JSX.Element {
const chartData = [
{ name: 'Used', value: 80, fill: '#8884d8', unit: '%' },
{ name: 'Free', value: 20, fill: '#82ca9d', unit: '%' },
];
return ( return (
<div> <div>
<AreaChart syncId='anyId' width={800} height={300} <AreaChart syncId='anyId' width={800} height={300}
data={this.state.data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} > data={this.state.data} margin={{ top: 5, right: 30, left: 20, bottom: 5 }} >
<XAxis dataKey='id' /> <XAxis dataKey='id' />
<YAxis /> <YAxis type='number' domain={[0, 100]} unit='%' />
{/* <CartesianGrid stroke='#ccc' /> */} {/* <CartesianGrid stroke='#ccc' /> */}
<CartesianGrid strokeDasharray='5 5' /> <CartesianGrid strokeDasharray='5 5' />
<Tooltip content={this.showTooltipData.bind(this)} /> <Tooltip content={this.showTooltipData.bind(this)} />
<Legend /> <Legend />
<Area type='monotone' dataKey='usage' stroke='#8884d8' unit='%' name='Usage' /> <Area type='monotone' dataKey='usage' stroke='#8884d8' fill='#82ca9d' unit='%' name='Usage' activeDot={{ r: 7 }} />
<Brush startIndex={3} height={30} />
</AreaChart> </AreaChart>
<LineChart syncId='anyId' width={800} height={300} <LineChart syncId='anyId' width={800} height={300}
@ -90,8 +93,9 @@ export class Metric extends React.Component<Props, State> {
<CartesianGrid strokeDasharray='3 3' /> <CartesianGrid strokeDasharray='3 3' />
<Tooltip /> <Tooltip />
<Legend /> <Legend />
<Line type='monotone' dataKey='user' stroke='#8884d8' unit='jiffies' /> <ReferenceLine y={9000} label='Warning' stroke='red' />
<Line type='monotone' dataKey='idle' stroke='#42454a' unit='jiffies' /> <Line type='monotone' dataKey='user' stroke='#8884d8' unit='jiffies' activeDot={{ r: 8 }} />
<Line type='monotone' dataKey='idle' stroke='#42454a' unit='jiffies' activeDot={{ r: 8 }} />
</LineChart> </LineChart>
<BarChart syncId='anyId' width={800} height={250} data={this.state.data}> <BarChart syncId='anyId' width={800} height={250} data={this.state.data}>
@ -104,26 +108,38 @@ export class Metric extends React.Component<Props, State> {
<Bar dataKey='idle' fill='#82ca9d' unit='jiffies' /> <Bar dataKey='idle' fill='#82ca9d' unit='jiffies' />
</BarChart> </BarChart>
<BarChart syncId='anyId' width={800} height={250} data={this.state.data}> <ComposedChart width={800} height={400} data={this.state.data}>
<XAxis dataKey='id' /> <XAxis dataKey='id' />
<YAxis /> <YAxis />
<CartesianGrid strokeDasharray='3 3' /> <CartesianGrid stroke='#f5f5f5' />
<Tooltip /> <Tooltip />
<Legend /> <Legend />
<Bar dataKey='user' fill='#ffc658' unit='jiffies' stackId='mixed' /> <Bar dataKey='user' fill='#ffc658' unit='jiffies' stackId='mixed' />
<Bar dataKey='idle' fill='#82ca9d' unit='jiffies' stackId='mixed' /> <Bar dataKey='idle' fill='#82ca9d' unit='jiffies' stackId='mixed' />
<Bar dataKey='nice' fill='#98ca41' unit='jiffies' stackId='mixed' /> <Bar dataKey='nice' fill='#98ca41' unit='jiffies' stackId='mixed' />
<Bar dataKey='system' fill='#81da9d' unit='jiffies' stackId='mixed'/> <Line dataKey='nice' type='monotone' stroke='#ff7300' unit='jiffies' />
</BarChart> </ComposedChart>
<PieChart width={800} height={400}>
<text fontSize='20px' x='50%' y='50%' dy={8} textAnchor='middle' fill='#8884d8'>
{chartData[0].value}%
</text>
<Pie data={chartData}
cx='50%'
cy='50%'
outerRadius={80}
innerRadius={60}
startAngle={90}
endAngle={-270}
/>
</PieChart>
{/* <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> </div>
); );
} }
} }