Add PageViewChart to fetch data and pass on to generic line chart component

src/components/routes/AdminDashboard.vue

@@ -3,7 +3,7 @@
 		<h1 style='margin: 0.5rem 1rem;'>Dashboard</h1>
 		<div class='admin_dashboard__row'>
 			<div class='admin_dashboard__card admin_dashboard__card--3'>
-				<line-chart background='#f39c12' point='rgb(255, 237, 127)' tooltip='page view'></line-chart>
+				<page-views-chart></page-views-chart>
 				<div class='admin_dashboard__card__title'>Page views over the past week</div>
 			</div>
 			<div class='admin_dashboard__card admin_dashboard__card--2'>
@@ -21,7 +21,7 @@
 				<div class='admin_dashboard__card__title'>Top threads by page views today</div>
 			</div>
 			<div class='admin_dashboard__card admin_dashboard__card--3'>
-				<line-chart background='#84dec0' point='#1da8ce' tooltip='new user'></line-chart>
+				<line-chart background='#84dec0' point='#1da8ce' tooltip='new user' :points='[]'></line-chart>
 				<div class='admin_dashboard__card__title'>New users over the past week</div>
 			</div>
 			<div class='admin_dashboard__card admin_dashboard__card--2 admin_dashboard__card--hidden'></div>
@@ -33,6 +33,7 @@
 <script>
 	import NewPosts from '../widgets/NewPosts'
 	import LineChart from '../widgets/LineChart'
+	import PageViewsChart from '../widgets/PageViewsChart'
 	import CategoriesChart from '../widgets/CategoriesChart'
 	import TopPosts from '../widgets/TopPosts'
 
@@ -41,6 +42,7 @@
 		components: {
 			NewPosts,
 			LineChart,
+			PageViewsChart,
 			CategoriesChart,
 			TopPosts
 		},

src/components/widgets/LineChart.vue

@@ -7,8 +7,10 @@
 			class='widgets__line_chart__tooltip'
 			:class='{ "widgets__line_chart__tooltip--show": tooltipShow }'
 			:style='{ "left": tooltipX, "top": tooltipY }'
+
+			v-if='points.length'
 		>
-			{{data[tooltipItem].pageViews}} {{data[tooltipItem].pageViews | pluralize(tooltip) }}
+			{{points[tooltipItem].pageViews}} {{points[tooltipItem].pageViews | pluralize(tooltip) }}
 		</div>
 		<svg>
 			<g
@@ -53,19 +55,9 @@
 
 	export default {
 		name: 'LineChart',
-		props: ['point', 'background', 'tooltip'],
+		props: ['point', 'background', 'tooltip', 'points'],
 		components: { LoadingIcon },
 		data () {
-			let data = [
-				{ pageViews: Math.floor(Math.random() * 100), date: new Date(2017, 5, 26) },
-				{ pageViews: Math.floor(Math.random() * 100), date: new Date(2017, 5, 27) },
-				{ pageViews: Math.floor(Math.random() * 100), date: new Date(2017, 5, 28) },
-				{ pageViews: Math.floor(Math.random() * 100), date: new Date(2017, 5, 29) },
-				{ pageViews: Math.floor(Math.random() * 100), date: new Date(2017, 5, 30) },
-				{ pageViews: Math.floor(Math.random() * 100), date: new Date(2017, 6, 1) },
-				{ pageViews: Math.floor(Math.random() * 100), date: new Date(2017, 6, 2) }
-			]
-
 			let x = d3
 				.scaleTime()
 				.domain([0, 0])
@@ -86,7 +78,7 @@
 				tooltipShow: false,
 				tooltipItem: 0,
 
-				data, x, y,
+				x, y,
 			}
 		},
 		methods: {
@@ -95,7 +87,7 @@
 
 				this.x = d3
 					.scaleTime()
-					.domain([this.data[0].date, this.data.slice(-1)[0].date])
+					.domain([this.points[0].date, this.points.slice(-1)[0].date])
 					.range([this.padding * 4, width])
 			},
 			setYFunc () {
@@ -103,15 +95,17 @@
 
 				this.y = d3
 					.scaleLinear()
-					.domain([d3.max(this.data.map(d => d.pageViews)), 0])
+					.domain([d3.max(this.points.map(d => d.pageViews)), 0])
 					.range([this.padding*1.5, height - this.padding/2])
 			},
 			updateFuncs () {
+				if(!this.points.length) return
+
 				this.setXFunc()
 				this.setYFunc()
 			
 				d3.select(this.$refs.y_axis).call(d3.axisLeft(this.y.nice()))
-				d3.select(this.$refs.x_axis).call(d3.axisBottom(this.x).tickSize(0).ticks(this.data.length))
+				d3.select(this.$refs.x_axis).call(d3.axisBottom(this.x).tickSize(0).ticks(this.points.length))
 			},
 			showTooltip (e, i) {
 				this.tooltipShow = true
@@ -131,25 +125,25 @@
 					.x(d => this.x(d.date))
 					.y(d => this.y(d.pageViews))
 
-				return line(this.data)
+				return line(this.points)
 			},
 			circles () {
-				return this.data.map(d => {
+				return this.points.map(d => {
 					return { x: this.x(d.date), y: this.y(d.pageViews) }
 				})
 			}
 		},
 		mounted () {
-			this.updateFuncs()
-
 			window.addEventListener('resize', this.updateFuncs)
-
-			setTimeout(() => {
-				this.loading = false;
-			}, Math.random()*3000)
 		},
 		destroyed () {
 			window.removeEventListener('resize', this.updateFuncs)
+		},
+		watch: {
+			points () {
+				this.loading = false
+				this.updateFuncs()
+			}
 		}
 	}
 </script>

src/components/widgets/PageViewsChart.vue

@@ -0,0 +1,36 @@
+<template>
+	<line-chart
+		background='#f39c12'
+		point='rgb(255, 237, 127)'
+		tooltip='page view'
+		:points='points'
+	></line-chart>
+</template>
+
+<script>
+	import LineChart from './LineChart'
+
+	import AjaxErrorHandler from '../../assets/js/errorHandler'
+
+	export default {
+		name: 'PageViewsChart',
+		components: { LineChart },
+		data () {
+			return {
+				points: []
+			}
+		},
+		mounted () {
+			this.axios
+				.get('/api/v1/log/page-views')
+				.then(res => {
+					this.points = res.data.map(d => {
+						d.date = new Date(d.date)
+
+						return d
+					})
+				})
+				.catch(AjaxErrorHandler(this.$store))
+		}
+	}
+</script>