feat(charts): Add download button to save charts as png

apertureless · apertureless · commit 3ee43ece76a3 · 2018-03-12T18:02:20.000+01:00
diff --git a/src/components/BarChart.vue b/src/components/BarChart.vue
@@ -1,8 +1,10 @@
 <script>
   import { HorizontalBar } from 'vue-chartjs'
+  import Printable from '@/mixins/Printable'
 
   export default {
     extends: HorizontalBar,
+    mixins: [Printable],
     props: {
       chartData: {
         type: Array | Object,
@@ -106,6 +108,10 @@
           }
         ]
       }, this.options)
+
+      setTimeout(() => {
+        this.download()
+      }, 500)
     },
     methods: {
       formatNumber (num) {
diff --git a/src/components/Download.vue b/src/components/Download.vue
@@ -0,0 +1,41 @@
+<template>
+  <a
+    :href="link"
+    :download="name + '.png'"
+    title="Download as PNG"
+    class="Chart__download"
+  >
+    🖨
+  </a>
+</template>
+
+<script>
+  export default {
+    name: 'DownloadButton',
+    props: {
+      name: {
+        type: String,
+        default: 'chart'
+      },
+      link: {
+        type: String,
+        default: ''
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @import "../assets/styles/_variables.scss";
+  .Chart__download {
+    cursor: pointer;
+    border: 1px solid #f1f1f1;
+    border-radius: rem(5);
+    padding: rem(5);
+    text-decoration: none;
+
+    &:hover {
+      border-color: color(robin-egg-blue);
+    }
+  }
+</style>
diff --git a/src/components/LineChart.vue b/src/components/LineChart.vue
@@ -1,8 +1,10 @@
 <script>
   import { Line } from 'vue-chartjs'
+  import Printable from '@/mixins/Printable'
 
   export default {
     extends: Line,
+    mixins: [Printable],
     props: {
       chartData: {
         type: Array | Object,
@@ -100,6 +102,10 @@
           }
         ]
       }, this.options)
+
+      setTimeout(() => {
+        this.download()
+      }, 500)
     },
     methods: {
       formatNumber (num) {
diff --git a/src/mixins/Printable.js b/src/mixins/Printable.js
@@ -0,0 +1,8 @@
+export default {
+  methods: {
+    download () {
+      let image = this.$refs.canvas.toDataURL('image/png')
+      this.$emit('generate', image)
+    }
+  }
+}
diff --git a/src/pages/Start.vue b/src/pages/Start.vue
@@ -10,7 +10,7 @@
           type="search" name="search"
         >
         <button class="Search__button" @click="requestData">Find</button>
-        <span class="Search__icon" @click="toggleSettings()">
+        <span class="Search__icon" @click.prevent="toggleSettings()">
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 54" enable-background="new 0 0 54 54"><path d="M51.22 21h-5.052c-.812 0-1.481-.447-1.792-1.197s-.153-1.54.42-2.114l3.572-3.571c.525-.525.814-1.224.814-1.966 0-.743-.289-1.441-.814-1.967l-4.553-4.553c-1.05-1.05-2.881-1.052-3.933 0l-3.571 3.571c-.574.573-1.366.733-2.114.421-.75-.311-1.197-.98-1.197-1.792v-5.052c0-1.533-1.247-2.78-2.78-2.78h-6.44c-1.533 0-2.78 1.247-2.78 2.78v5.052c0 .812-.447 1.481-1.197 1.792-.748.313-1.54.152-2.114-.421l-3.571-3.571c-1.052-1.052-2.883-1.05-3.933 0l-4.553 4.553c-.525.525-.814 1.224-.814 1.967 0 .742.289 1.44.814 1.966l3.572 3.571c.573.574.73 1.364.42 2.114s-.98 1.197-1.792 1.197h-5.052c-1.533 0-2.78 1.247-2.78 2.78v6.439c0 1.534 1.247 2.781 2.78 2.781h5.052c.812 0 1.481.447 1.792 1.197s.153 1.54-.42 2.114l-3.572 3.571c-.525.525-.814 1.224-.814 1.966 0 .743.289 1.441.814 1.967l4.553 4.553c1.051 1.051 2.881 1.053 3.933 0l3.571-3.572c.574-.573 1.363-.731 2.114-.42.75.311 1.197.98 1.197 1.792v5.052c0 1.533 1.247 2.78 2.78 2.78h6.439c1.533 0 2.78-1.247 2.78-2.78v-5.052c0-.812.447-1.481 1.197-1.792.751-.312 1.54-.153 2.114.42l3.571 3.572c1.052 1.052 2.883 1.05 3.933 0l4.553-4.553c.525-.525.814-1.224.814-1.967 0-.742-.289-1.44-.814-1.966l-3.572-3.571c-.573-.574-.73-1.364-.42-2.114s.981-1.197 1.793-1.197h5.052c1.533 0 2.78-1.247 2.78-2.78v-6.44c0-1.533-1.247-2.78-2.78-2.78zm.78 9.22c0 .43-.35.78-.78.78h-5.052c-1.624 0-3.019.932-3.64 2.432-.622 1.5-.295 3.146.854 4.294l3.572 3.571c.305.305.305.8 0 1.104l-4.553 4.553c-.304.304-.799.306-1.104 0l-3.571-3.572c-1.149-1.149-2.794-1.474-4.294-.854-1.5.621-2.432 2.016-2.432 3.64v5.052c0 .43-.35.78-.78.78h-6.44c-.43 0-.78-.35-.78-.78v-5.052c0-1.624-.932-3.019-2.432-3.64-.503-.209-1.021-.311-1.533-.311-1.014 0-1.997.4-2.761 1.164l-3.571 3.572c-.306.306-.801.304-1.104 0l-4.553-4.553c-.305-.305-.305-.8 0-1.104l3.572-3.571c1.148-1.148 1.476-2.794.854-4.294-.621-1.499-2.016-2.431-3.64-2.431h-5.052c-.43 0-.78-.35-.78-.78v-6.44c0-.43.35-.78.78-.78h5.052c1.624 0 3.019-.932 3.64-2.432.622-1.5.295-3.146-.854-4.294l-3.572-3.571c-.305-.305-.305-.8 0-1.104l4.553-4.553c.304-.305.799-.305 1.104 0l3.571 3.571c1.147 1.147 2.792 1.476 4.294.854 1.5-.62 2.432-2.015 2.432-3.639v-5.052c0-.43.35-.78.78-.78h6.439c.431 0 .781.35.781.78v5.052c0 1.624.932 3.019 2.432 3.64 1.502.622 3.146.294 4.294-.854l3.571-3.571c.306-.305.801-.305 1.104 0l4.553 4.553c.305.305.305.8 0 1.104l-3.572 3.571c-1.148 1.148-1.476 2.794-.854 4.294.621 1.5 2.016 2.432 3.64 2.432h5.052c.43-.001.78.349.78.779v6.44zM27 18c-4.963 0-9 4.037-9 9s4.037 9 9 9 9-4.037 9-9-4.037-9-9-9zm0 16c-3.859 0-7-3.141-7-7s3.141-7 7-7 7 3.141 7 7-3.141 7-7 7z"/>
           </svg>
         </span>
@@ -39,44 +39,48 @@
       </div>
       </div>
 
-      <package-info :package-name="packageName" :total-downloads="totalDownloads" :period="formattedPeriod" v-if="loaded"></package-info>
+      <package-info :package-name="packageName" :total-downloads="totalDownloads" :period="formattedPeriod" v-if="loaded"/>
       <div class="Chart__container" v-if="loaded">
         <div class="Chart__title">
-          Downloads per Day <span>{{ formattedPeriod }}</span>
-          <hr>
+          <h2>Downloads per Day <span>{{ formattedPeriod }}</span></h2>
+          <DownloadButton :name="packageName + '-daily'" :link="dailyPng"/>
         </div>
+        <hr>
         <div class="Chart__content">
-          <line-chart v-if="loaded" :chart-data="downloads" :chart-labels="labels"></line-chart>
+          <line-chart chart-id="line-daily" v-if="loaded" :chart-data="downloads" :chart-labels="labels" @generate="setDailyPng"/>
         </div>
       </div>
 
       <div class="Chart__container" v-if="loaded">
         <div class="Chart__title">
-          Downloads per Week <span>{{ formattedPeriod }}</span>
-          <hr>
+          <h2>Downloads per Week <span>{{ formattedPeriod }}</span></h2>
+          <DownloadButton :name="packageName + '-weekly'" :link="weeklyPng"/>
         </div>
+        <hr>
         <div class="Chart__content">
-          <line-chart v-if="loaded" :chart-data="downloadsWeek" :chart-labels="labelsWeek"></line-chart>
+          <line-chart chart-id="line-weekly" v-if="loaded" :chart-data="downloadsWeek" :chart-labels="labelsWeek" @generate="setWeeklyPng"/>
         </div>
       </div>
 
       <div class="Chart__container" v-if="loaded">
         <div class="Chart__title">
-          Downloads per Month <span>{{ formattedPeriod }}</span>
-          <hr>
+          <h2>Downloads per Month <span>{{ formattedPeriod }}</span></h2>
+          <DownloadButton :name="packageName + '-monthly'" :link="monthlyPng"/>
         </div>
+        <hr>
         <div class="Chart__content">
-          <line-chart v-if="loaded" :chart-data="downloadsMonth" :chart-labels="labelsMonth"></line-chart>
+          <line-chart v-if="loaded" chart-id="line-monthly" :chart-data="downloadsMonth" :chart-labels="labelsMonth" @generate="setMonthlyPng"/>
         </div>
       </div>
 
       <div class="Chart__container" v-if="loaded">
         <div class="Chart__title">
-          Downloads per Year <span>{{ formattedPeriod }}</span>
-          <hr>
+          <h2>Downloads per Year <span>{{ formattedPeriod }}</span></h2>
+          <DownloadButton :name="packageName + '-yearly'" :link="yearlyPng"/>
         </div>
+        <hr>
         <div class="Chart__content">
-          <bar-chart v-if="loaded" :chart-data="downloadsYear" :chart-labels="labelsYear"></bar-chart>
+          <bar-chart v-if="loaded" chart-id="bar-yearly" :chart-data="downloadsYear" :chart-labels="labelsYear" @generate="setYearlyPng"/>
         </div>
       </div>
     </div>
@@ -90,6 +94,7 @@
   import LineChart from '@/components/LineChart'
   import BarChart from '@/components/BarChart'
   import PackageInfo from '@/components/PackageInfo'
+  import DownloadButton from '@/components/Download'
 
   import {
     dateToYear,
@@ -106,7 +111,8 @@
       LineChart,
       BarChart,
       PackageInfo,
-      Datepicker
+      Datepicker,
+      DownloadButton
     },
     metaInfo () {
       return {
@@ -137,7 +143,11 @@
         periodStart: '',
         periodEnd: new Date(),
         rawData: '',
-        totalDownloads: ''
+        totalDownloads: '',
+        dailyPng: null,
+        weeklyPng: null,
+        monthlyPng: null,
+        yearlyPng: null
       }
     },
 
@@ -242,6 +252,19 @@
           eventCategory: 'Settings',
           eventAction: 'toggle'
         })
+      },
+      setDailyPng (payload) {
+        this.dailyPng = payload
+      },
+      setWeeklyPng (payload) {
+        this.weeklyPng = payload
+        console.log('weekly', payload)
+      },
+      setMonthlyPng (payload) {
+        this.monthlyPng = payload
+      },
+      setYearlyPng (payload) {
+        this.yearlyPng = payload
       }
     }
   }
@@ -261,7 +284,7 @@
 
   .content {
     background: color(ghost-white);
-    min-height: calc(100vh - 191px);
+    min-height: calc(100vh - 207px);
   }
 
   .title {
@@ -358,22 +381,31 @@
   .Chart__container {
     border-radius: $base-border-radius;
     background-color: #fff;
-    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.2);
+    box-shadow: 0 15px 30px 0 rgba(0,0,0,.11), 0 5px 15px 0 rgba(0,0,0,.08);
     padding: rem(20) rem(40);
     margin: rem(50) 0;
   }
 
   .Chart__title {
-    color: color(fjord);
-    margin-bottom: rem(40);
-    font-weight: 600;
-    font-size: rem(16);
+    display: flex;
+    flex-direction: row;
+    margin-bottom: rem(20);
+    justify-content: space-between;
 
-    > span {
-      font-weight: 400;
-      color: color(robin-egg-blue);
+    h2 {
+      display: flex;
+      align-items: center;
+      color: color(fjord);
+      margin: 0;
+      font-weight: 600;
       font-size: rem(16);
-      margin-left: rem(25);
+
+      > span {
+        font-weight: 400;
+        color: color(robin-egg-blue);
+        font-size: rem(16);
+        margin-left: rem(25);
+      }
     }
   }
 
