feat(chart): Add bar chart for downloads per year chart

As it is working better for the default 1 year preselection then the line chart.

Author: apertureless

src/components/BarChart.vue

@@ -0,0 +1,128 @@
+<script>
+  import { HorizontalBar } from 'vue-chartjs'
+
+  export default {
+    extends: HorizontalBar,
+    props: {
+      chartData: {
+        type: Array | Object,
+        required: false
+      },
+      chartLabels: {
+        type: Array,
+        required: true
+      }
+    },
+    data () {
+      return {
+        gradient: null,
+        options: {
+          showScale: true,
+          scales: {
+            yAxes: [{
+              ticks: {
+                beginAtZero: false
+
+              },
+              gridLines: {
+                display: true,
+                color: '#EEF0F4',
+                borderDash: [5, 15]
+              },
+              categoryPercentage: 1,
+              barPercentage: 0.4
+            }],
+            xAxes: [ {
+              ticks: {
+                callback: (value, index, values) => {
+                  return this.formatNumber(value)
+                }
+              },
+              gridLines: {
+                display: true,
+                color: '#EEF0F4',
+                borderDash: [5, 15]
+              }
+            }]
+          },
+          tooltips: {
+            backgroundColor: '#4F5565',
+            titleFontStyle: 'normal',
+            titleFontSize: 18,
+            bodyFontFamily: "'Proxima Nova', sans-serif",
+            cornerRadius: 3,
+            bodyFontColor: '#20C4C8',
+            bodyFontSize: 14,
+            xPadding: 14,
+            yPadding: 14,
+            displayColors: false,
+            mode: 'index',
+            intersect: false,
+            callbacks: {
+              title: tooltipItem => {
+                return `🗓 ${tooltipItem[0].xLabel}`
+              },
+              label: (tooltipItem, data) => {
+                let dataset = data.datasets[tooltipItem.datasetIndex]
+                let currentValue = dataset.data[tooltipItem.index]
+                return `📦 ${currentValue.toLocaleString()}`
+              }
+            }
+          },
+          legend: {
+            display: false
+          },
+          responsive: true,
+          maintainAspectRatio: false
+        }
+      }
+    },
+    mounted () {
+      this.gradient = this.$refs.canvas
+        .getContext('2d')
+        .createLinearGradient(0, 0, 0, 450)
+
+      this.gradient.addColorStop(0, 'rgba(52, 217, 221, 0.6)')
+      this.gradient.addColorStop(0.5, 'rgba(52, 217, 221, 0.25)')
+      this.gradient.addColorStop(1, 'rgba(52, 217, 221, 0)')
+
+      this.renderChart({
+        labels: this.chartLabels,
+        datasets: [
+          {
+            label: 'downloads',
+            borderColor: '#249EBF',
+            pointBackgroundColor: 'rgba(0,0,0,0)',
+            pointBorderColor: 'rgba(0,0,0,0)',
+            pointHoverBorderColor: '#249EBF',
+            pointHoverBackgroundColor: '#fff',
+            pointHoverRadius: 4,
+            pointHitRadius: 10,
+            pointHoverBorderWidth: 1,
+            borderWidth: 1,
+            backgroundColor: this.gradient,
+            hoverBackgroundColor: this.gradient,
+            data: this.chartData
+          }
+        ]
+      }, this.options)
+    },
+    methods: {
+      formatNumber (num) {
+        let numString = Math.round(num).toString()
+        let numberFormatMapping = [[6, 'm'], [3, 'k']]
+        for (let [numberOfDigits, replacement] of numberFormatMapping) {
+          if (numString.length > numberOfDigits) {
+            let decimal = ''
+            if (numString[numString.length - numberOfDigits] !== '0') {
+              decimal = '.' + numString[numString.length - numberOfDigits]
+            }
+            numString = numString.substr(0, numString.length - numberOfDigits) + decimal + replacement
+            break
+          }
+        }
+        return numString
+      }
+    }
+  }
+</script>

src/pages/Start.vue

@@ -76,7 +76,7 @@
           <hr>
         </div>
         <div class="Chart__content">
-          <line-chart v-if="loaded" :chart-data="downloadsYear" :chart-labels="labelsYear"></line-chart>
+          <bar-chart v-if="loaded" :chart-data="downloadsYear" :chart-labels="labelsYear"></bar-chart>
         </div>
       </div>
     </div>
@@ -88,6 +88,7 @@
   import Datepicker from 'vuejs-datepicker'
 
   import LineChart from '@/components/LineChart'
+  import BarChart from '@/components/BarChart'
   import PackageInfo from '@/components/PackageInfo'
 
   import {
@@ -103,6 +104,7 @@
   export default {
     components: {
       LineChart,
+      BarChart,
       PackageInfo,
       Datepicker
     },