feat(charts): bar charts

src/components/statistics/charts/Charts.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="charts-page">
+
     <div class="row">
       <div class="col-md-12">
         <widget class="chart-widget"  header-text="Line Chart">
@@ -8,6 +9,19 @@
       </div>
     </div>
 
+    <div class="row">
+      <div class="col-md-6">
+        <widget class="chart-widget"  header-text="Vertical Bar Chart">
+          <vuestic-vertical-bar-chart v-bind:data="verticalBarChartData"></vuestic-vertical-bar-chart>
+        </widget>
+      </div>
+      <div class="col-md-6">
+        <widget class="chart-widget"  header-text="Horizontal Bar Chart">
+          <vuestic-horizontal-bar-chart v-bind:data="horizontalBarChartData"></vuestic-horizontal-bar-chart>
+        </widget>
+      </div>
+    </div>
+
     <div class="row">
       <div class="col-md-12">
         <widget class="chart-widget"  header-text="Bubble Chart">
@@ -40,6 +54,10 @@
   import PieChartData from './vuestic-pie-chart/PieChartData'
   import VuesticDonutChart from './vuestic-donut-chart/VuesticDonutChart.vue'
   import DonutChartData from './vuestic-donut-chart/DonutChartData'
+  import VuesticVerticalBarChart from './vuestic-vertical-bars/VuesticVerticalBarChart.vue'
+  import VerticalBarChartData from './vuestic-vertical-bars/VerticalBarChartData'
+  import VuesticHorizontalBarChart from './vuestic-horizontal-bars/VuesticHorizontalBarChart.vue'
+  import HorizontalBarChartData from './vuestic-horizontal-bars/HorizontalBarChartData'
   import Widget from 'components/common/widget/Widget'
 
   export default {
@@ -49,14 +67,18 @@
       VuesticBubbleChart,
       VuesticLineChart,
       VuesticPieChart,
-      VuesticDonutChart
+      VuesticDonutChart,
+      VuesticVerticalBarChart,
+      VuesticHorizontalBarChart
     },
     data: function () {
       return {
         bubbleChartData: BubbleChartData,
         lineChartData: LineChartData,
         pieChartData: PieChartData,
-        donutChartData: DonutChartData
+        donutChartData: DonutChartData,
+        verticalBarChartData: VerticalBarChartData,
+        horizontalBarChartData: HorizontalBarChartData
       }
     }
   }

src/components/statistics/charts/vuestic-horizontal-bars/HorizontalBarChart.js

@@ -0,0 +1,33 @@
+import {HorizontalBar} from 'vue-chartjs'
+
+export default HorizontalBar.extend({
+  props: ['data', 'options'],
+
+  data () {
+    return {
+      defaultOptions: {
+        legend: {
+          position: 'bottom',
+          labels: {
+            fontColor: '#34495e',
+            fontFamily: 'sans-serif',
+            fontSize: 14,
+            padding: 20,
+            usePointStyle: true
+          }
+        },
+        tooltips: {
+          bodyFontSize: 14,
+          bodyFontFamily: 'sans-serif'
+        },
+        responsive: true,
+        maintainAspectRatio: false
+      }
+    }
+  },
+
+  mounted () {
+    let options = Object.assign({}, this.defaultOptions, this.options)
+    this.renderChart(this.data, options)
+  }
+})

src/components/statistics/charts/vuestic-horizontal-bars/HorizontalBarChartData.js

@@ -0,0 +1,15 @@
+export default {
+  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+  datasets: [
+    {
+      label: 'Vuestic Satisfaction Score',
+      backgroundColor: '#f7cc36',
+      data: [80, 90, 50, 70, 60, 90, 50, 90, 80, 40, 72, 93]
+    },
+    {
+      label: 'Bulma Satisfaction Score',
+      backgroundColor: '#e34a4a',
+      data: [20, 30, 20, 40, 50, 40, 15, 60, 30, 20, 42, 53]
+    }
+  ]
+}

src/components/statistics/charts/vuestic-horizontal-bars/VuesticHorizontalBarChart.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class='donut-chart'>
+    <horizontal-bar-chart :options="options" :data="data"></horizontal-bar-chart>
+  </div>
+</template>
+
+<script>
+  import HorizontalBarChart from './HorizontalBarChart'
+
+  export default {
+    name: 'vuestic-vertical-bar-chart',
+    props: ['data', 'options'],
+    components: {
+      HorizontalBarChart
+    }
+  }
+</script>
+
+<style lang='scss'>
+  @import '../../../../sass/_variables.scss';
+
+  .donut-chart {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    > * {
+      height: 100%;
+      width: 100%;
+    }
+
+    canvas {
+      width: 100%;
+      height: auto;
+    }
+  }
+</style>

src/components/statistics/charts/vuestic-vertical-bars/VerticalBarChart.js

@@ -0,0 +1,33 @@
+import {Bar} from 'vue-chartjs'
+
+export default Bar.extend({
+  props: ['data', 'options'],
+
+  data () {
+    return {
+      defaultOptions: {
+        legend: {
+          position: 'bottom',
+          labels: {
+            fontColor: '#34495e',
+            fontFamily: 'sans-serif',
+            fontSize: 14,
+            padding: 20,
+            usePointStyle: true
+          }
+        },
+        tooltips: {
+          bodyFontSize: 14,
+          bodyFontFamily: 'sans-serif'
+        },
+        responsive: true,
+        maintainAspectRatio: false
+      }
+    }
+  },
+
+  mounted () {
+    let options = Object.assign({}, this.defaultOptions, this.options)
+    this.renderChart(this.data, options)
+  }
+})

src/components/statistics/charts/vuestic-vertical-bars/VerticalBarChartData.js

@@ -0,0 +1,15 @@
+export default {
+  labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+  datasets: [
+    {
+      label: 'USA',
+      backgroundColor: '#4ae387',
+      data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+    },
+    {
+      label: 'USSR',
+      backgroundColor: '#4ab2e3',
+      data: [50, 10, 22, 39, 15, 20, 85, 32, 60, 50, 20, 30]
+    }
+  ]
+}

src/components/statistics/charts/vuestic-vertical-bars/VuesticVerticalBarChart.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class='donut-chart'>
+    <vertical-bar-chart :options="options" :data="data"></vertical-bar-chart>
+  </div>
+</template>
+
+<script>
+  import VerticalBarChart from './VerticalBarChart'
+
+  export default {
+    name: 'vuestic-vertical-bar-chart',
+    props: ['data', 'options'],
+    components: {
+      VerticalBarChart
+    }
+  }
+</script>
+
+<style lang='scss'>
+  @import '../../../../sass/_variables.scss';
+
+  .donut-chart {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    > * {
+      height: 100%;
+      width: 100%;
+    }
+
+    canvas {
+      width: 100%;
+      height: auto;
+    }
+  }
+</style>