eson/datagod
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

TODO: 1.导出更多的视频数据. 2.修复架构的bug

Browse Source
This commit is contained in:
eson 2020-12-04 19:01:57 +08:00
parent 017ad98a3f
commit 06a9e7be9b
4 changed files with 42 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/Config.js
View File

@ -7,6 +7,7 @@ var config = {
trend_all : `${host}/api/data`,
trend_online: `${host}/api/data/online`, // 在线人数api
count_player: `${host}/api/count/player`, // 在线人数api
count_statement: `${host}/api/count/statement`, // 在线人数api
}
export default config;

8
src/Home.js
View File

@ -42,21 +42,21 @@ class Home extends React.Component {
<Menu theme="dark" mode="inline" defaultSelectedKeys={[window.location.hash ? window.location.hash : "1"]}>
<Menu.Item key="1" icon={<UserOutlined />}>
{/* <Menu.Item key="1" icon={<UserOutlined />}>
nav 1
<HashRouter>
<Link to="/"></Link>
</HashRouter>
</Menu.Item>
</Menu.Item> */}
<Menu.Item key="#/playerduo" icon={<VideoCameraOutlined />}>
playerduo
<HashRouter>
<Link to={{ pathname: "/playerduo" }}></Link>
</HashRouter>
</Menu.Item>
<Menu.Item key="3" icon={<UploadOutlined />}>
{/* <Menu.Item key="3" icon={<UploadOutlined />}>
nav 3
</Menu.Item>
</Menu.Item> */}
</Menu>

44
src/charts/Trend.js
View File

@ -6,24 +6,38 @@ import { Button, DatePicker, Row } from 'antd';
import zhCN from 'antd/es/locale/zh_CN'; // 引入中文包
import {dateFormat, defaultDateFormat, TrendType} from './Base.js';
import config from '../Config.js';
import { convertLegacyProps } from 'antd/lib/button/button';
const { RangePicker } = DatePicker;
class Trend extends React.Component {
// constructor(props) {
// super(props);
// }
static defaultProps = {
datetype: true,
rangetype: true,
}
state = {
data: [],
type: {
current: TrendType.OneDate,
}
};
componentDidMount() {
var now = new Date()
this.selectDate( defaultDateFormat(now) )
console.log(this.props);
if(this.props.datetype) {
var now = new Date()
this.selectDate( defaultDateFormat(now) )
} else if (this.props.rangetype) {
this.selectLately(7)
}
}
getOption(trendtype, data) {
@ -85,14 +99,15 @@ class Trend extends React.Component {
},
yAxis: {
type: 'value',
// boundaryGap: [0, '100%']
padding: [10,0,0,0],
boundaryGap: [0, '100%'],
axisLabel: {
formatter: function (value, index) {
if( typeof value == "number") {
if(value >= 100000000) {
return (value / 10000).toFixed(4) + "亿"
return (value / 100000000).toFixed(4) + "亿"
} else if(value >= 10000) {
return (value / 10000).toFixed(2) + "万"
return (value / 10000).toFixed(3) + "万"
} else {
return value
}
@ -125,6 +140,7 @@ class Trend extends React.Component {
for (var i = 0; i < data.length; i++) {
var d = data[i];
var unit = d.unit;
// var color = colors[i];
if(!d.values) {
continue;
@ -163,6 +179,7 @@ class Trend extends React.Component {
}
option.legend.data.push(d.name);
option.yAxis.name = unit;
var sdata = {
name: d.name,
@ -238,17 +255,16 @@ class Trend extends React.Component {
}
render() {
const { datetype, rangetype } = this.props;
const { data, type } = this.state;
return (
<div style={{height: "100%"}}>
<Row style={{marginLeft: "6%", marginBottom: "10px"}}>
<Button onClick={ () => this.selectDate(defaultDateFormat(new Date()))} >今天</Button>
<Button onClick={ () => {this.selectLately(7);} }>7天</Button>
<Button onClick={ () => {this.selectLately(30);} }>30天</Button>
<DatePicker onChange = {(moment, daterange) => { this.selectDate(daterange); }} size="small" style={{marginLeft: "5px"}} />
<RangePicker onChange = {(moment, daterange) => { this.selectRangeDate(daterange[0], daterange[1]) }} size="small" style={{marginLeft: "5px"}} />
{ (() => { if(datetype) return <Button onClick={ () => this.selectDate(defaultDateFormat(new Date()))} >今天</Button>})() }
{ (() => { if(rangetype) return <Button onClick={ () => {this.selectLately(7);} }>7天</Button> })() }
{ (() => { if(rangetype) return <Button onClick={ () => {this.selectLately(30);} }>30天</Button> })() }
{ (() => { if(datetype) return <DatePicker onChange = {(moment, daterange) => { this.selectDate(daterange); }} size="small" style={{marginLeft: "5px"}} /> } )()}
{ (() => { if(rangetype) return <RangePicker onChange = {(moment, daterange) => { this.selectRangeDate(daterange[0], daterange[1]) }} size="small" style={{marginLeft: "5px"}} /> })() }
</Row>
<ReactEcharts

9
src/pages/playerduo.js
View File

@ -29,7 +29,12 @@ class Playerduo extends React.Component {
return (
<Layout>
<StatisticBoard></StatisticBoard>
<Trend trendurl={config.trend_online}></Trend>
<div style={{marginBottom: 100}}>
<Trend datetype={false} trendurl={config.count_statement}></Trend>
</div >
<div style={{marginBottom: 100}}>
<Trend trendurl={config.trend_online}></Trend>
</div>
</Layout>
)
}
@ -61,7 +66,7 @@ class StatisticBoard extends React.Component {
return (
<Layout style={{padding: 8, width:"100%"}}>
<Row justify="center" gutter={[24,16]} >
{SimpleCard("陪玩者", this.state.player_count)}
{SimpleCard("陪玩者总数", this.state.player_count)}
{/* {SimpleCard("陪玩", 1)} */}
</Row>
</Layout>