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

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

@ -1,8 +1,8 @@
import * as React from 'react';
import { Button } from 'semantic-ui-react';
import { Button, Label } from 'semantic-ui-react';
import {
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';
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) => {
if (data.active) {
console.log(data.payload[0].payload.user);
if (data.active && data.payload) {
return (
<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>{`Nice : ${data.payload[0].payload.nice}`}</p>
<p>{`System : ${data.payload[0].payload.system}`}</p>
@ -66,32 +61,41 @@ export class Metric extends React.Component<Props, State> {
return null;
}
public render(): JSX.Element {
const chartData = [
{ name: 'Used', value: 80, fill: '#8884d8', unit: '%' },
{ name: 'Free', value: 20, fill: '#82ca9d', unit: '%' },
];
return (
<div>
<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' />
<YAxis />
<YAxis type='number' domain={[0, 100]} unit='%' />
{/* <CartesianGrid stroke='#ccc' /> */}
<CartesianGrid strokeDasharray='5 5' />
<Tooltip content={this.showTooltipData.bind(this)} />
<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>
<LineChart 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' />
<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' />
<ReferenceLine y={9000} label='Warning' stroke='red' />
<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>
<BarChart syncId='anyId' width={800} height={250} data={this.state.data}>
@ -101,29 +105,41 @@ export class Metric extends React.Component<Props, State> {
<Tooltip />
<Legend />
<Bar dataKey='user' fill='#8884d8' unit='jiffies' />
<Bar dataKey='idle' fill='#82ca9d' unit='jiffies'/>
<Bar dataKey='idle' fill='#82ca9d' unit='jiffies' />
</BarChart>
<BarChart syncId='anyId' width={800} height={250} data={this.state.data}>
<ComposedChart width={800} height={400} data={this.state.data}>
<XAxis dataKey='id' />
<YAxis />
<CartesianGrid strokeDasharray='3 3' />
<CartesianGrid stroke='#f5f5f5' />
<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>
<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' />
<Line dataKey='nice' type='monotone' stroke='#ff7300' unit='jiffies' />
</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>
);
}
}