Rename PageViews component LineChart, add prop for color

src/components/routes/AdminDashboard.vue

@@ -2,22 +2,26 @@
 	<div class='admin_dashboard'>
 		<div class='admin_dashboard__row'>
 			<div class='admin_dashboard__card admin_dashboard__card--3'>
-				<page-views></page-views>
+				<line-chart></line-chart>
 				<div class='admin_dashboard__card__title'>Page views over the past week</div>
 			</div>
 			<div class='admin_dashboard__card admin_dashboard__card--2'>
 				<new-posts></new-posts>
 				<div class='admin_dashboard__card__title'>New posts in the last 24 hours</div>
 			</div>
-			<div class='admin_dashboard__card admin_dashboard__card--2'></div>
+			<div class='admin_dashboard__card admin_dashboard__card--2'>
+				<categories-chart></categories-chart>
+				<div class='admin_dashboard__card__title'>Number of threads by category</div>
+			</div>
 		</div>
 		<div class='admin_dashboard__row'>
+			<div class='admin_dashboard__card admin_dashboard__card--2'>
+			</div>
 			<div class='admin_dashboard__card admin_dashboard__card--3'>
-				<categories-chart></categories-chart>
-				<div class='admin_dashboard__card__title'>Number of threads by category</div>
+				<line-chart color='#84dec0'></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>
-			<div class='admin_dashboard__card admin_dashboard__card--2 admin_dashboard__card--hidden'></div>
 		</div>
 
 	</div>
@@ -25,14 +29,14 @@
 
 <script>
 	import NewPosts from '../widgets/NewPosts'
-	import PageViews from '../widgets/PageViews'
+	import LineChart from '../widgets/LineChart'
 	import CategoriesChart from '../widgets/CategoriesChart'
 
 	export default {
 		name: 'AdminDashboard',
 		components: {
 			NewPosts,
-			PageViews,
+			LineChart,
 			CategoriesChart
 		}
 	}

src/components/widgets/PageViews.vue

@@ -1,11 +1,11 @@
 <template>
-	<div class='widgets__page_views' ref='container'>
-		<div class='widgets__page_views__overlay' :class='{ "widgets__page_views__overlay--show" : loading }'>
+	<div class='widgets__line_chart' ref='container' :style='{ "background-color": color }'>
+		<div class='widgets__line_chart__overlay' :class='{ "widgets__line_chart__overlay--show" : loading }'>
 			<loading-icon></loading-icon>
 		</div>
 		<div
-			class='widgets__page_views__tooltip'
-			:class='{ "widgets__page_views__tooltip--show": tooltipShow }'
+			class='widgets__line_chart__tooltip'
+			:class='{ "widgets__line_chart__tooltip--show": tooltipShow }'
 			:style='{ "left": tooltipX, "top": tooltipY }'
 		>
 			{{data[tooltipItem].pageViews}} {{data[tooltipItem] | pluralize('page view') }}
@@ -13,12 +13,12 @@
 		<svg>
 			<g
 				ref='y_axis'
-				class='widgets__page_views__axis'
+				class='widgets__line_chart__axis'
 				:transform='"translate(" + 3*padding + ",0)"'
 			></g>
 			<g
 				ref='x_axis'
-				class='widgets__page_views__axis widgets__page_views__axis--x'
+				class='widgets__line_chart__axis widgets__line_chart__axis--x'
 				:transform='"translate(0,150)"'
 			></g>
 			<path :d='linePath' fill='none' stroke-width='2' stroke='#fff'></path>
@@ -52,7 +52,8 @@
 	import throttle from 'lodash.throttle'
 
 	export default {
-		name: 'PageViews',
+		name: 'LineChart',
+		props: ['color'],
 		components: { LoadingIcon },
 		data () {
 			let data = [
@@ -151,7 +152,7 @@
 <style lang='scss'>
 	@import '../../assets/scss/variables.scss';
 
-	.widgets__page_views {
+	.widgets__line_chart {
 		background-color: #f39c12;
 		width: 100%;
 		height: 100%;