pv拆线图完成

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');",
 	};

nodejs/.babelrc

@@ -1,7 +1,6 @@
 {
   "plugins": [
     "transform-runtime",
-    "recharts",
     ["import", { libraryName: "antd", style: "css" }]
   ]
 }

nodejs/package.json

@@ -22,14 +22,14 @@
     "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",
     "babel-preset-react": "6.23.0",
     "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",

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)))
+    };
+}

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}<br/>' + 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 (
+            <div style={style} ref="chart"></div>
+        )
+    }
+}

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';
 
 
 

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 {
                         <Col span={12}>
                             <div className="index-box">
                                 <div className="index-box-title">平台访客</div>
+                                <div className="index-box-chart">
+                                    <LineChart title="PV" xName="date" yName="pv" data={systemIndex.recentPV}></LineChart>
+                                </div>
                             </div>
                         </Col>
                         <Col span={12}>

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,14 +12,21 @@ let initState = {
     	name        : softwareConfig.name,
     	version     : softwareConfig.version,
     	officialURL : softwareConfig.officialURL
-    }
+    },
+    recentPV: []
 };
 
 export default (state = initState, action) => {
 	switch (action.type) {
 		case REQUEST_SYSTEM_INDEX: {
 			return state;
 		}
+		case REQUEST_RECENT_PV: {
+			return {
+				...state,
+				recentPV: action.recentPV
+			};
+		}
 		default: {
 			return state
 		}

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;