Zgna
/
forgeplus-react
forked from Gitlink/forgeplus-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

所有图表的前后端交互

This commit is contained in:
qyzh 2021-06-09 11:03:22 +08:00
parent 25e768f5af
commit b03d8c2f07
6 changed files with 185 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/forge/users/Infos.js
View File

@ -409,7 +409,7 @@ class Infos extends Component {
</div>
)}
{current_user && user && user.login == current_user.login && (
{current_user && user && user.login == current_user.login && current_user.admin &&(
<div className="bgcF">
<ul className="list-l-Menu">

72
src/forge/users/sponsor/SponsorManagement.js
View File

@ -44,28 +44,67 @@ class SponsorManagement extends Component{
is_sponsor: false,
sponsors: undefined,
displayList: undefined,
chartsData: {income:[], outcome:[]},
};
}
changeCategory = (cate) => {
if(cate.target.value === "chart"){
this.setState({
category: cate.target.value,
page: 1,
});
}
else{
this.setState({
category: cate.target.value,
page: 1,
}, ()=>{this.get_sponsors();});
}
}, ()=>{
if(this.state.category === "chart")
this.get_chart_data();
else
this.get_sponsors();
});
// if(cate.target.value === "chart"){
// this.setState({
// category: cate.target.value,
// page: 1,
// });
// }
// else{
// this.setState({
// category: cate.target.value,
// page: 1,
// }, ()=>{this.get_sponsors();});
// }
};
componentDidMount = () => {
this.get_sponsors();
}
get_chart_data = () => {
this.setState({
isSpin: true
})
let url = `/wallets/balance_chart.json`;
const {current_user} = this.props;
let user_id = current_user && current_user.user_id;
if (current_user){
axios.get(url, {
params: {
id: user_id,
sponsor: true,
}})
.then((result) => {
this.setState({
chartsData: result.data,
isSpin: false,
})
})
.catch((error) => {
console.log(error);
this.setState({
isSpin: false,
});
});
}
};
get_sponsors = ()=>{
const user_id = this.props.current_user.user_id;
@ -170,12 +209,17 @@ class SponsorManagement extends Component{
this.setState({
is_sponsor: check_is_sponsor,
page: 1,
}, ()=>{this.get_sponsors()});
}, ()=>{
if(this.state.category === "chart")
this.get_chart_data();
else
this.get_sponsors();
});
}
render() {
const { current_user, user } = this.props;
const { category , is_sponsor, sponsors, displayList} = this.state;
const { category , is_sponsor, sponsors, displayList, chartsData} = this.state;
const {isSpin, total, search, limit, page }= this.state;
// console.log(displayList);
const sponsorList = displayList && displayList.length > 0 ?
@ -191,10 +235,10 @@ class SponsorManagement extends Component{
<Nodata _html={`暂时没有数据`} />
const chartComponent = <div>
<p>赞助{this.state.is_sponsor?"支出":"收入"}图</p>
<SponsorBarCharts is_sponsor={this.state.is_sponsor}></SponsorBarCharts>
<p>七天内赞助{this.state.is_sponsor?"支出":"收入"}图</p>
<SponsorPieCharts is_sponsor={this.state.is_sponsor}></SponsorPieCharts>
<SponsorBarCharts is_sponsor={this.state.is_sponsor} data={chartsData}></SponsorBarCharts>
{/* <p>七天内赞助{this.state.is_sponsor?"支出":"收入"}图</p>
<SponsorPieCharts is_sponsor={this.state.is_sponsor}></SponsorPieCharts> */}
</div>
const displayComponent = category==="chart"?chartComponent

79
src/forge/users/sponsor/charts/coinChangeCharts.js
View File

@ -3,28 +3,28 @@ import {XYPlot, VerticalBarSeries, VerticalGridLines, HorizontalGridLines, XAxis
// import DiscreteColorLegend from 'legends/discrete-color-legend';
import "./style.scss";
const ONE_DAY = 86400000;
const d = new Date().getTime()-ONE_DAY*7;
// 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 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 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},
@ -36,32 +36,39 @@ class CoinChangeCharts extends Component {
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, 9]}>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis style={{
<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}
}}/>
<YAxis style={{
line: {stroke: '#ADDDE1'},
ticks: {stroke: '#ADDDE1'},
text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}
} }/>
<VerticalBarSeries data={data} />
<VerticalBarSeries data={data2} />
<VerticalBarSeries data={chartsData.income} />
<VerticalBarSeries data={chartsData.outcome} />
</XYPlot>
</XYPlot>
</div>
);
}

16
src/forge/users/sponsor/charts/sponsorBarChart.js
View File

@ -36,8 +36,9 @@ class SponsorBarCharts extends Component {
super(props);
this.state = {
crosshairValues: []
};
}
};
console.log(this.props)
}
componentWillReceiveProps = () => {
this.setState({
@ -46,12 +47,15 @@ class SponsorBarCharts extends Component {
}
render() {
const DATA = this.props.is_sponsor?data2:data;
const chartsData = this.props.is_sponsor?this.props.data.outcome:this.props.data.income;
var max = 0;
for(var i=0; i<chartsData.length; i++){
max = Math.max(max, chartsData[i].y);
}
return (
<div className="App">
{/* <DiscreteColorLegend height={20} width={1300} items={ITEMS} /> */}
<XYPlot animation={true} xType="ordinal" height={400} width= {700} yDomain={[-0.5, 7]}>
<XYPlot animation={true} xType="ordinal" height={400} width= {700} yDomain={[-0.5, max]}>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis style={{
@ -64,7 +68,7 @@ class SponsorBarCharts extends Component {
ticks: {stroke: '#ADDDE1'},
text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}
} }/>
<VerticalBarSeries data={DATA} />
<VerticalBarSeries data={chartsData} />
</XYPlot>
</div>

112
src/forge/users/sponsor/communityData.js
View File

@ -2,51 +2,69 @@ import React, { Component } from 'react';
import {XYPlot, VerticalBarSeries, LineSeries, VerticalGridLines, HorizontalGridLines, XAxis, YAxis, Crosshair, DiscreteColorLegend} from 'react-vis';
// import DiscreteColorLegend from 'legends/discrete-color-legend';
import "./charts/style.scss";
import "../../Main/list.css";
import "../../UsersList/list.css";
import "../../sponsor/sponsor.css";
import "../new_user.css"
import axios from "axios";
import { isSupported } from 'clipboard';
const ONE_DAY = 86400000;
const d = new Date().getTime()-ONE_DAY*7;
const data = [
{x: new Date(d+ONE_DAY).toLocaleDateString(), y: 6},
{x: new Date(d+ONE_DAY*2).toLocaleDateString(), y: 5},
{x: new Date(d+ONE_DAY*3).toLocaleDateString(), y: 3},
{x: new Date(d+ONE_DAY*4).toLocaleDateString(), y: 3},
{x: new Date(d+ONE_DAY*5).toLocaleDateString(), y: 4},
{x: new Date(d+ONE_DAY*6).toLocaleDateString(), y: 5},
{x: new Date(d+ONE_DAY*7).toLocaleDateString(), y: 4},
];
const data2 = [
{x: new Date(d+ONE_DAY).toLocaleDateString(), y: 4},
{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: 2},
{x: new Date(d+ONE_DAY*5).toLocaleDateString(), y: 1},
{x: new Date(d+ONE_DAY*6).toLocaleDateString(), y: 3},
{x: new Date(d+ONE_DAY*7).toLocaleDateString(), y: 2},
];
const data3 = [
{x: new Date(d+ONE_DAY).toLocaleDateString(), y: 6},
{x: new Date(d+ONE_DAY*2).toLocaleDateString(), y: 5},
{x: new Date(d+ONE_DAY*3).toLocaleDateString(), y: 3},
{x: new Date(d+ONE_DAY*4).toLocaleDateString(), y: 3},
{x: new Date(d+ONE_DAY*5).toLocaleDateString(), y: 4},
{x: new Date(d+ONE_DAY*6).toLocaleDateString(), y: 5},
{x: new Date(d+ONE_DAY*7).toLocaleDateString(), y: 4},
];
const ITEMS = [
{title: '资助者数量', strokeWidth: 13},
{title: '受资助人数', strokeWidth: 13},
{title: '资助者数量', strokeWidth: 13}
];
class SponsorDataCharts extends Component {
constructor(props) {
super(props);
this.state = {
crosshairValues: []
crosshairValues: [],
sponsor: [],
sponsored: [],
nums: [],
};
}
}
componentDidMount = () => {
this.get_chart_data();
}
get_chart_data = () => {
this.setState({
isSpin: true
})
let url = `/sponsorships/community_data.json`;
axios.get(url)
.then((result) => {
this.setState({
sponsor: result.data.sponsor,
sponsored: result.data.sponsored,
isSpin: false,
})
})
.catch((error) => {
console.log(error);
this.setState({
isSpin: false,
});
});
url = `/wallets/community_data.json`;
axios.get(url)
.then((result) => {
this.setState({
nums: result.data,
isSpin: false,
})
})
.catch((error) => {
console.log(error);
this.setState({
isSpin: false,
});
});
};
componentWillReceiveProps = () => {
this.setState({
@ -56,14 +74,22 @@ class SponsorDataCharts extends Component {
render() {
// const DATA = this.props.is_sponsor?data2:data;
const {sponsor, sponsored, nums} = this.state;
var max1 = 0;
for(var i=0; i<sponsor.length; i++){
max1 = Math.max(max1, sponsor[i].y, sponsored[i].y);
}
var max2 = 0;
for(var i=0; i<nums.length; i++){
max2 = Math.max(max2, nums[i].y);
}
return (
<div className="App">
<p>平台资助者/受资助人数</p>
<p className="color-grey-3 font-18 task-hide ">平台资助者/受资助人数</p>
<DiscreteColorLegend height={80} width={1300} items={ITEMS} />
<XYPlot
animation={true} xType="ordinal" height={400} width= {700}
yDomain={[0, 6]}
yDomain={[-0.5, max1]}
>
<VerticalGridLines />
<HorizontalGridLines />
@ -77,13 +103,13 @@ class SponsorDataCharts extends Component {
ticks: {stroke: '#ADDDE1'},
text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}
}}/>
<LineSeries data={data} />
<LineSeries data={data2} />
<LineSeries data={sponsor} />
<LineSeries data={sponsored} />
</XYPlot>
<p>平台资助交易数量</p>
<p className="color-grey-3 font-18 task-hide ">平台资助交易数量</p>
<XYPlot
animation={true} xType="ordinal" height={400} width= {700}
yDomain={[0, 6]}
yDomain={[-0.5, max2]}
>
<VerticalGridLines />
<HorizontalGridLines />
@ -97,7 +123,7 @@ class SponsorDataCharts extends Component {
ticks: {stroke: '#ADDDE1'},
text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}
}}/>
<VerticalBarSeries data={data3} />
<VerticalBarSeries data={nums} />
</XYPlot>
</div>
);

9
src/forge/users/sponsor/wallet.js
View File

@ -35,8 +35,7 @@ class Wallet extends Component {
category: "all",
balance: 50,
saerch: undefined,
chartsData1: undefined,
chartsData2: undefined,
chartsData: {income:[], outcome:[]},
};
}
@ -68,7 +67,7 @@ class Wallet extends Component {
}})
.then((result) => {
this.setState({
chartsData1: result.data,
chartsData: result.data,
isSpin: false,
})
})
@ -203,7 +202,7 @@ class Wallet extends Component {
render() {
const { current_user, user } = this.props;
const { category , sort_by, chartsData1 } = this.state;
const { category , sort_by, chartsData } = this.state;
const { displayList, coinChangeList, isSpin, total, search, limit, page, balance} = this.state;
const coinChangeItem = displayList && displayList.length > 0 ?
@ -215,7 +214,7 @@ class Wallet extends Component {
<Nodata _html={`暂时没有项目`} />;
const displayComponent =
category === "charts"? <CoinChangeCharts></CoinChangeCharts>
category === "charts"? <CoinChangeCharts chartsData={chartsData}></CoinChangeCharts>
:
coinChangeItem;