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

add charts

Browse Source
This commit is contained in:
eson
2020-08-20 19:29:22 +08:00
parent 17362cd7fe
commit c632837767
14 changed files with 517 additions and 194 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/App.js
View File

@@ -5,9 +5,12 @@ import Icon, {
import { Button, Layout, Menu } from 'antd';
import 'antd/dist/antd.css';
import React from 'react';
import ReactDom from 'react-dom';
import './App.less';
import DataTable from './Table';
import ContentTable from './ContentTable';
import DataTableTest from './TableTest';
import CountCharts from './Graph';
const { Header, Content, Footer, Sider } = Layout;
@@ -38,10 +41,15 @@ class App extends React.Component {
</Button>
<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}
defaultOpenKeys={['sub1']}
>
<Menu.Item key="1" icon={<DatabaseFilled/>} >
数据展示
<Menu.Item key="openrec" icon={<DatabaseFilled/>} onClick={(e)=>{ this.refs.ctable.changePlatform( e.key) ; }} >
openrec
</Menu.Item>
<Menu.Item key="twitcasting" icon={<DatabaseFilled/>} onClick={(e)=>{ this.refs.ctable.changePlatform( e.key) ; }} >
twitcasting
</Menu.Item>
<Menu.Item key="twitch" icon={<DatabaseFilled/>} onClick={(e)=>{ this.refs.ctable.changePlatform( e.key) ; }} >
twitch
</Menu.Item>
</Menu>
</Sider>
@@ -53,9 +61,8 @@ class App extends React.Component {
</span>
</Header>
<Content style={{ margin: '0 8px' }}>
<div style={{ padding: 24, background: '#fff', minHeight: 780 }}>
<DataTable ></DataTable >
</div>
{/* <ContentTable ref="ctable" platform={"openrec"}></ContentTable> */}
<CountCharts></CountCharts>
</Content>
<Footer style={{ textAlign: 'center' }}>
Intimate ©2020 Created by eson

21
src/ContentTable.js Normal file
View File

@@ -0,0 +1,21 @@
import React from 'react';
import DataTable from './Table.js';
class ContentTable extends React.Component {
changePlatform(p) {
// this.refs.table.firstPage();
// this.setState({platform: p});
// this.refs.table.setState({platform: p})
this.refs.table.updatePlatform(p);
}
render() {
// const {platform} = this.state;
return (<div style={{ padding: 24, background: '#fff', minHeight: 780 }}>
<DataTable ref="table" ></DataTable >
</div>)
}
}
export default ContentTable;

151
src/Graph.js Normal file
View File

@@ -0,0 +1,151 @@
import React from 'react';
import ReactEcharts from 'echarts-for-react';
import reqwest from 'reqwest';
// function genData(count) {
// var nameList = [
// '赵', '钱', '孙', '李', '周', '吴', '郑', '王', '冯', '陈', '褚', '卫', '蒋', '沈', '韩', '杨', '朱', '秦', '尤', '许', '何', '吕', '施', '张', '孔', '曹', '严', '华', '金', '魏', '陶', '姜', '戚', '谢', '邹', '喻', '柏', '水', '窦', '章', '云', '苏', '潘', '葛', '奚', '范', '彭', '郎', '鲁', '韦', '昌', '马', '苗', '凤', '花', '方', '俞', '任', '袁', '柳', '酆', '鲍', '史', '唐', '费', '廉', '岑', '薛', '雷', '贺', '倪', '汤', '滕', '殷', '罗', '毕', '郝', '邬', '安', '常', '乐', '于', '时', '傅', '皮', '卞', '齐', '康', '伍', '余', '元', '卜', '顾', '孟', '平', '黄', '和', '穆', '萧', '尹', '姚', '邵', '湛', '汪', '祁', '毛', '禹', '狄', '米', '贝', '明', '臧', '计', '伏', '成', '戴', '谈', '宋', '茅', '庞', '熊', '纪', '舒', '屈', '项', '祝', '董', '梁', '杜', '阮', '蓝', '闵', '席', '季', '麻', '强', '贾', '路', '娄', '危'
// ];
// var legendData = [];
// var seriesData = [];
// var selected = {};
// for (var i = 0; i < count; i++) {
// var name = Math.random() > 0.65
// ? makeWord(4, 1) + '·' + makeWord(3, 0)
// : makeWord(2, 1);
// legendData.push(name);
// seriesData.push({
// name: name,
// value: Math.round(Math.random() * 100000)
// });
// selected[name] = i < 6;
// }
// return {
// legendData: legendData,
// seriesData: seriesData,
// selected: selected
// };
// function makeWord(max, min) {
// var nameLen = Math.ceil(Math.random() * max + min);
// var name = [];
// for (var i = 0; i < nameLen; i++) {
// name.push(nameList[Math.round(Math.random() * nameList.length - 1)]);
// }
// return name.join('');
// }
// }
function parseData(cw={}) {
var legendData = [];
var seriesData = [];
var selected = {};
for(var name in cw){
legendData.push(name);
seriesData.push({
name: name,
value: cw[name]
})
selected[name] = false
}
return { legendData: legendData, seriesData: seriesData, selected:selected }
}
const getRandomuserParams = params => {
return {
platform: params.platform,
// ...params,
};
};
class CountCharts extends React.Component {
state = {
platform: "twitch",
data: {}
}
fetch = (params = {}) => {
// console.log(platform);
reqwest({
url: 'http://localhost:5500/tag/count',
method: 'get',
type: 'json',
data: getRandomuserParams(params),
}).then(data => {
var result = JSON.parse(data);
console.log("result", result);
this.setState({
data: parseData(result),
});
});
};
componentDidMount() {
this.fetch(this.state);
}
render() {
// this.fetch(this.state);
const {data} = this.state;
const option = {
title: {
text: '同名数量统计',
subtext: '纯属虚构',
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c} ({d}%)'
},
legend: {
type: 'scroll',
orient: 'vertical',
right: 10,
top: 20,
bottom: 20,
data: data.legendData,
selected: data.selected
},
series: [
{
name: '标签',
type: 'pie',
radius: '55%',
center: ['40%', '50%'],
data: data.seriesData,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
],
};
return ( <div style={{ padding: 24, background: '#fff', minHeight: 780 }} >
<ReactEcharts
option={option}
style={{height: '350px', width: '1000px'}}
className='react_for_echarts' />
</div>
);
}
};
export default CountCharts;

97
src/Table.js
View File

@@ -1,47 +1,40 @@
import React, { useState } from 'react';
import { Table, Input, InputNumber, Popconfirm, Form, Tag } from 'antd';
import reqwest from 'reqwest';
import './Table.less';
import './Table.less';
import { useForm } from 'antd/lib/form/Form';
const columns = [
// {
// title: 'uid',
// dataIndex: 'Uid',
// editable: false,
// width: "7%",
// },
{
title: '平台',
dataIndex: 'Platform',
editable: false,
key: 'Platform',
// width: "8%",
},
{
title: 'userid',
dataIndex: 'UserId',
editable: false,
key: 'UserId',
// width: "7%",
},
{
title: '名称',
dataIndex: 'UserName',
editable: false,
key: 'UserName',
// width: "7%",
},
// {
// title: '直播地址',
// dataIndex: 'LiveUrl',
// editable: false,
// width: "5%",
// },
{
title: '标签',
dataIndex: 'Tags',
editable: false,
render: tags => (
<>
{tags.map( tag => {
{
tags != null ?
tags.map( tag => {
let color = "purple";
if (tag.length < 3) {
color = 'green';
@@ -56,42 +49,27 @@ const columns = [
{tag}
</Tag>
);
})}
}
) : null}
</> )
},
{
title: '粉丝数(关注)',
dataIndex: 'Followers',
key: 'Followers',
width: "8%",
},
{
title: '礼物数(币|钱)',
dataIndex: 'Gratuity',
key: 'Gratuity',
width: "8%",
},
// {
// title: '直播地址',
// dataIndex: 'LiveUrl',
// width: "5%",
// },
// {
// title: '直播标题',
// dataIndex: 'LiveTitle',
// },
// {
// title: '近直播开始时间',
// dataIndex: 'LiveStartTime',
// width: "7%",
// },
// {
// title: '近直播结束时间',
// dataIndex: 'LiveEndTime',
// width: "7%",
// },
{
title: '数据更新时间',
dataIndex: 'UpdateTime',
key: 'UpdateTime',
// width: "7%",
},
];
@@ -112,8 +90,11 @@ const columns = [
class DataTable extends React.Component {
state = {
data: [],
platform: "openrec",
pagination: {
current: 1,
pageSize: 20,
@@ -128,35 +109,53 @@ class DataTable extends React.Component {
{
title: 'uid',
dataIndex: 'Uid',
key: 'Uid',
},
{
title: '直播地址',
dataIndex: 'LiveUrl',
key: 'LiveUrl',
},
{
title: '直播标题',
dataIndex: 'LiveTitle',
key: 'LiveTitle',
},
{
title: '近直播开始时间',
dataIndex: 'LiveStartTime',
key: 'LiveStartTime',
},
{
title: '近直播结束时间',
dataIndex: 'LiveEndTime',
key: 'LiveEndTime',
},
];
var data = [record];
return <Table bordered={true} type="small" columns={ecolumns} dataSource={data} pagination={false} />;
return <Table rowClassName="subtable" size="small" bordered={true} columns={ecolumns} dataSource={data} pagination={false} />;
};
updatePlatform(p) {
const { pagination } = this.state;
pagination.current = 1;
this.setState({platform:p}, ()=>{
this.fetch({
pagination
});
});
}
componentDidMount() {
const { pagination } = this.state;
this.fetch({
pagination
});
const {platform} = this.state;
this.updatePlatform(platform);
}
handleTableChange = (pagination, filters, sorter) => {
console.log(filters, sorter);
// console.log(filters, sorter);
this.fetch({
sortField: sorter.field,
sortOrder: sorter.order,
@@ -167,8 +166,10 @@ class DataTable extends React.Component {
fetch = (params = {}) => {
this.setState({ loading: true });
const {platform} = this.state;
console.log(platform);
reqwest({
url: 'http://localhost:5500/twitcasting/query',
url: 'http://localhost:5500/' + platform + '/query',
method: 'get',
type: 'json',
data: getRandomuserParams(params),
@@ -186,16 +187,12 @@ class DataTable extends React.Component {
};
render() {
const { data, pagination, loading } = this.state;
return (
return (
<Table
bordered={true}
size={"middle"}
// scroll={{ x: "150vh", y:"800" }}
columns={columns}
dataSource={data}

4
src/Table.less
View File

@@ -5,4 +5,8 @@
position: absolute;
top: 100%;
font-size: 12px;
}
.subtable {
background: rgb(220, 233, 231);
}