From d7133eedbe408d0e749097aa8273d603f1e330b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E7=8F=85?= Date: Sat, 8 Apr 2017 22:14:02 +0800 Subject: [PATCH] =?UTF-8?q?pv=E6=8B=86=E7=BA=BF=E5=9B=BE=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- go/model/uservisit.go | 2 +- nodejs/.babelrc | 1 - nodejs/package.json | 3 +- .../admin/actions/requestRecentPV.js | 19 +++ .../javascripts/admin/components/LineChart.js | 119 ++++++++++++++++++ .../javascripts/admin/constants/index.js | 1 + .../javascripts/admin/containers/Index.js | 7 ++ .../javascripts/admin/reducers/systemIndex.js | 12 +- nodejs/static/styles/admin/index.css | 5 + 9 files changed, 163 insertions(+), 6 deletions(-) create mode 100644 nodejs/static/javascripts/admin/actions/requestRecentPV.js create mode 100644 nodejs/static/javascripts/admin/components/LineChart.js diff --git a/go/model/uservisit.go b/go/model/uservisit.go index 9068bc34..fa786999 100644 --- a/go/model/uservisit.go +++ b/go/model/uservisit.go @@ -44,7 +44,7 @@ func (userVisit UserVisit) Latest30DayPV() (PVPerDay) { sqlData := before29Date.Format("2006-01-02") sqlArr := []string{ "SELECT count(*) as pv, DATE_FORMAT(visit_time,'%Y-%m-%d') as date", - "FROM user_visit", + "FROM user_visits", "WHERE visit_time >= ?", "GROUP BY DATE_FORMAT(visit_time,'%Y-%m-%d');", }; diff --git a/nodejs/.babelrc b/nodejs/.babelrc index d839278e..6c03feae 100644 --- a/nodejs/.babelrc +++ b/nodejs/.babelrc @@ -1,7 +1,6 @@ { "plugins": [ "transform-runtime", - "recharts", ["import", { libraryName: "antd", style: "css" }] ] } diff --git a/nodejs/package.json b/nodejs/package.json index 9a23ae29..f309c93a 100755 --- a/nodejs/package.json +++ b/nodejs/package.json @@ -22,7 +22,6 @@ "babel-core": "6.24.0", "babel-loader": "6.4.1", "babel-plugin-import": "1.1.1", - "babel-plugin-recharts": "1.1.0", "babel-plugin-transform-runtime": "6.23.0", "babel-polyfill": "6.23.0", "babel-preset-es2015": "6.24.0", @@ -30,6 +29,7 @@ "babel-preset-stage-0": "6.22.0", "bell-on-bundler-error-plugin": "1.0.8", "css-loader": "0.28.0", + "echarts": "3.5.2", "gulp-less": "3.3.0", "gulp-rename": "1.2.2", "gulp-util": "3.0.8", @@ -39,7 +39,6 @@ "react-redux": "5.0.3", "react-router": "3.0.2", "react-router-redux": "4.0.8", - "recharts": "0.22.0", "redux": "3.6.0", "redux-devtools": "3.3.2", "redux-thunk": "2.2.0", diff --git a/nodejs/static/javascripts/admin/actions/requestRecentPV.js b/nodejs/static/javascripts/admin/actions/requestRecentPV.js new file mode 100644 index 00000000..089890e1 --- /dev/null +++ b/nodejs/static/javascripts/admin/actions/requestRecentPV.js @@ -0,0 +1,19 @@ +import { + REQUEST_RECENT_PV +} from '../constants'; + +function receiveRecentPV(json) { + return { + type: REQUEST_RECENT_PV, + recentPV: json.list + }; +} + +export default function() { + return dispatch => { + var url = pageConfig.apiURL + '/admin/visit/pv/latest/30'; + return fetch(url) + .then(response => response.json()) + .then(json => dispatch(receiveRecentPV(json.data))) + }; +} \ No newline at end of file diff --git a/nodejs/static/javascripts/admin/components/LineChart.js b/nodejs/static/javascripts/admin/components/LineChart.js new file mode 100644 index 00000000..716ba46e --- /dev/null +++ b/nodejs/static/javascripts/admin/components/LineChart.js @@ -0,0 +1,119 @@ +import React, { Component } from 'react'; +import echarts from 'echarts'; + +export default class extends React.Component { + constructor(props) { + super(props); + this.state = { + windowWidth: window.innerWidth + }; + this.onResize = this.onResize.bind(this); + this.updateChart = this.updateChart.bind(this); + } + componentDidMount() { + this.updateChart(); + window.addEventListener('resize', this.onResize); + } + componentWillUnmount() { + window.removeEventListener('resize', this.onResize); + } + componentDidUpdate(prevProps, prevState) { + this.updateChart(); + } + onResize() { + if (this.state.windowWidth != window.innerWidth) { + this.setState({ + windowWidth: window.innerWidth + }); + } + } + updateChart() { + var myChart = echarts.init(this.refs.chart); + myChart.setOption(this.getChartOption()); + } + getChartOption() { + let data = this.props.data; + let xName = this.props.xName; + let yName = this.props.yName; + let title = this.props.title; + let xArr = []; + let yArr = []; + for (let i = 0; i < data.length; i++) { + xArr.push(data[i][xName]); + yArr.push(data[i][yName]); + } + return { + title: { + text: title, + left: 'center' + }, + tooltip: { + trigger: 'axis', + axisPointer: { + lineStyle: { + type: 'dashed', + color: '#ddd' + } + }, + formatter: '{b}
' + title + ': {c}' + }, + xAxis: { + type: 'category', + splitLine: {show: false}, + data: xArr, + axisLine: { + lineStyle: { + color: '#ccc', + width: 1 + } + } + }, + grid: { + left: '3%', + right: '4%', + top: '40px', + bottom: '3%', + containLabel: true + }, + yAxis: { + type: 'log', + splitLine: { + lineStyle: { + type: 'dashed', + color: '#ddd' + } + }, + axisLine: { + lineStyle: { + color: '#ccc', + width: 1 + } + } + }, + series: [ + { + type: 'line', + data: yArr, + itemStyle: { + normal: { + color: '#00c184', + lineStyle: { + color: '#00c184', + width: 2 + } + } + } + } + ] + }; + } + render() { + var style = { + width : '100%', + height : '100%' + }; + return ( +
+ ) + } +} \ No newline at end of file diff --git a/nodejs/static/javascripts/admin/constants/index.js b/nodejs/static/javascripts/admin/constants/index.js index cc4e7cdd..b56b277e 100644 --- a/nodejs/static/javascripts/admin/constants/index.js +++ b/nodejs/static/javascripts/admin/constants/index.js @@ -2,6 +2,7 @@ export const REQUEST_SYSTEM_INDEX = 'requestSystemIndex'; export const REQUEST_USER_ANALYZE = 'requestUserAnalyze'; +export const REQUEST_RECENT_PV = 'requestRecentPV'; diff --git a/nodejs/static/javascripts/admin/containers/Index.js b/nodejs/static/javascripts/admin/containers/Index.js index 21580bdd..2f431b2d 100644 --- a/nodejs/static/javascripts/admin/containers/Index.js +++ b/nodejs/static/javascripts/admin/containers/Index.js @@ -1,7 +1,10 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; import { Row, Col } from 'antd'; + +import LineChart from '../components/LineChart'; import requestSystemIndex from '../actions/requestSystemIndex'; +import requestRecentPV from '../actions/requestRecentPV'; import analyze from '../../sdk/analyze'; import '../../../styles/admin/index.css'; @@ -13,6 +16,7 @@ class Index extends Component { componentDidMount() { const { dispatch } = this.props; dispatch(requestSystemIndex()); + dispatch(requestRecentPV()); analyze.pv(); } render() { @@ -58,6 +62,9 @@ class Index extends Component {
平台访客
+
+ +
diff --git a/nodejs/static/javascripts/admin/reducers/systemIndex.js b/nodejs/static/javascripts/admin/reducers/systemIndex.js index f2359269..00058408 100644 --- a/nodejs/static/javascripts/admin/reducers/systemIndex.js +++ b/nodejs/static/javascripts/admin/reducers/systemIndex.js @@ -1,5 +1,6 @@ import { - REQUEST_SYSTEM_INDEX + REQUEST_SYSTEM_INDEX, + REQUEST_RECENT_PV } from '../constants'; let initState = { @@ -11,7 +12,8 @@ let initState = { name : softwareConfig.name, version : softwareConfig.version, officialURL : softwareConfig.officialURL - } + }, + recentPV: [] }; export default (state = initState, action) => { @@ -19,6 +21,12 @@ export default (state = initState, action) => { case REQUEST_SYSTEM_INDEX: { return state; } + case REQUEST_RECENT_PV: { + return { + ...state, + recentPV: action.recentPV + }; + } default: { return state } diff --git a/nodejs/static/styles/admin/index.css b/nodejs/static/styles/admin/index.css index 0ad0c6a9..8d75a6ab 100644 --- a/nodejs/static/styles/admin/index.css +++ b/nodejs/static/styles/admin/index.css @@ -36,6 +36,11 @@ color: #000; } +.index-box-chart { + width: 100%; + height: 330px; +} + .index-platform { border: 1px #108ee9 solid; border-left-width: 4px;