Merge pull request #90 from rkpattnaik780/github-downloads

Navigate to relevant URL on clicking a component statistic

Author: sarthak-sehgal

src/components/Component.vue

@@ -76,7 +76,7 @@
 			<div id="stats" class="section">
 				<div class="title">Stats</div>
 				<div id="statsContent" class="content">
-					<component-stat v-for="stat in stats" :key="stat.id" :propName="stat.prop" :imageURL="stat.image" :propValue="stat.value" />
+					<component-stat v-for="stat in stats" :key="stat.id" :propName="stat.prop" :imageURL="stat.image" :propValue="stat.value" :statURL="stat.url"/>
 				</div>
 			</div>
 			<div id="contributors" class="section">
@@ -221,7 +221,8 @@ A watcher has been added to the component to render the details dynamically when
 						{
 							prop: 'commits',
 							image: require('../assets/component/commit.png'),
-							value: details.commits
+							value: details.commits,
+							url : details.github_url
 						},
 						{
 							prop: 'version',

src/components/ComponentStat.vue

@@ -1,7 +1,9 @@
 <template>
 	<div id="stat">
-		<img :src="imageURL" :alt="propName" />
-		<span>{{ propValue }} {{ propName }}</span>
+		<a :href="statURL" :v-if="statURL" target="_blank">
+			<img :src="imageURL" :alt="propName" />
+		  <span>{{ propValue }} {{ propName }}</span>
+		</a>
 	</div>
 </template>
 <script>
@@ -36,6 +38,10 @@ export default {
 			required: true,
 			default: '',
 			note: 'Statistic of the property (a numerical in most cases).'
+		},
+		statURL: {
+			required: true,
+			note: 'Other links relevant to the stat'
 		}
 	}
 };
@@ -54,4 +60,17 @@ export default {
 		text-align: center;
 	}
 }
+
+#stat a {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	img {
+		height: 50px;
+		margin: 10px;
+	}
+	span {
+		text-align: center;
+	}
+}
 </style>