forked from Gitlink/forgeplus-react
78 lines
2.7 KiB
JavaScript
78 lines
2.7 KiB
JavaScript
import React, { Component } from 'react';
|
|
import {XYPlot, VerticalBarSeries, VerticalGridLines, HorizontalGridLines, XAxis, YAxis, Crosshair, DiscreteColorLegend} from 'react-vis';
|
|
// import DiscreteColorLegend from 'legends/discrete-color-legend';
|
|
import "./style.scss";
|
|
|
|
// const ONE_DAY = 86400000;
|
|
// const d = new Date().getTime()-ONE_DAY*7;
|
|
|
|
// const data = [
|
|
// {x: new Date(d+ONE_DAY).toLocaleDateString(), y: 8},
|
|
// {x: new Date(d+ONE_DAY*2).toLocaleDateString(), y: 5},
|
|
// {x: new Date(d+ONE_DAY*3).toLocaleDateString(), y: 4},
|
|
// {x: new Date(d+ONE_DAY*4).toLocaleDateString(), y: 9},
|
|
// {x: new Date(d+ONE_DAY*5).toLocaleDateString(), y: 2},
|
|
// {x: new Date(d+ONE_DAY*6).toLocaleDateString(), y: 7},
|
|
// {x: new Date(d+ONE_DAY*7).toLocaleDateString(), y: 2},
|
|
// ];
|
|
|
|
// const data2 = [
|
|
// {x: new Date(d+ONE_DAY).toLocaleDateString(), y: 2},
|
|
// {x: new Date(d+ONE_DAY*2).toLocaleDateString(), y: 3},
|
|
// {x: new Date(d+ONE_DAY*3).toLocaleDateString(), y: 1},
|
|
// {x: new Date(d+ONE_DAY*4).toLocaleDateString(), y: 5},
|
|
// {x: new Date(d+ONE_DAY*5).toLocaleDateString(), y: 4},
|
|
// {x: new Date(d+ONE_DAY*6).toLocaleDateString(), y: 0},
|
|
// {x: new Date(d+ONE_DAY*7).toLocaleDateString(), y: 2},
|
|
// ];
|
|
|
|
const ITEMS = [
|
|
{title: '收入', strokeWidth: 13},
|
|
{title: '支出', strokeWidth: 13}
|
|
];
|
|
|
|
class CoinChangeCharts extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
crosshairValues: []
|
|
};
|
|
// console.log(this.props);
|
|
}
|
|
|
|
render() {
|
|
const {chartsData} = this.props;
|
|
if(chartsData == undefined){
|
|
return (<div className="App"></div>);
|
|
}
|
|
var max = 0;
|
|
for(var i=0; i<chartsData.income.length; i++){
|
|
max = Math.max(max, chartsData.income[i].y, chartsData.outcome[i].y);
|
|
}
|
|
return (
|
|
<div className="App">
|
|
<DiscreteColorLegend height={80} width={1300} items={ITEMS} />
|
|
<XYPlot xType="ordinal" height={400} width= {700} yDomain={[-0.5, max]}>
|
|
<VerticalGridLines />
|
|
<HorizontalGridLines />
|
|
<XAxis style={{
|
|
line: {stroke: '#ADDDE1'},
|
|
ticks: {stroke: '#ADDDE1'},
|
|
text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}
|
|
}}/>
|
|
<YAxis style={{
|
|
line: {stroke: '#ADDDE1'},
|
|
ticks: {stroke: '#ADDDE1'},
|
|
text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}
|
|
}}/>
|
|
<VerticalBarSeries data={chartsData.income} />
|
|
<VerticalBarSeries data={chartsData.outcome} />
|
|
|
|
</XYPlot>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default CoinChangeCharts;
|