Bläddra i källkod

Add props for both point color and background color

sbkwgh 8 år sedan
förälder
incheckning
6604b0298e
2 ändrade filer med 5 tillägg och 6 borttagningar
  1. 2 2
      src/components/routes/AdminDashboard.vue
  2. 3 4
      src/components/widgets/LineChart.vue

+ 2 - 2
src/components/routes/AdminDashboard.vue

@@ -2,7 +2,7 @@
 	<div class='admin_dashboard'>
 		<div class='admin_dashboard__row'>
 			<div class='admin_dashboard__card admin_dashboard__card--3'>
-				<line-chart></line-chart>
+				<line-chart background='#f39c12' point='rgb(255, 237, 127)'></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'>
@@ -20,7 +20,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 color='#84dec0'></line-chart>
+				<line-chart background='#84dec0' point='#1da8ce'></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>

+ 3 - 4
src/components/widgets/LineChart.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class='widgets__line_chart' ref='container' :style='{ "background-color": color }'>
+	<div class='widgets__line_chart' ref='container' :style='{ "background-color": background }'>
 		<div class='widgets__line_chart__overlay' :class='{ "widgets__line_chart__overlay--show" : loading }'>
 			<loading-icon></loading-icon>
 		</div>
@@ -27,7 +27,7 @@
 				:cx='circle.x'
 				:cy='circle.y'
 				r='4'
-				fill='rgb(255, 237, 127)'
+				:fill='point'
 			>
 			</circle>
 			<circle
@@ -53,7 +53,7 @@
 
 	export default {
 		name: 'LineChart',
-		props: ['color'],
+		props: ['point', 'background'],
 		components: { LoadingIcon },
 		data () {
 			let data = [
@@ -154,7 +154,6 @@
 	@import '../../assets/scss/variables.scss';
 
 	.widgets__line_chart {
-		background-color: #f39c12;
 		width: 100%;
 		height: 100%;
 		overflow: hidden;