node_modules

node_modules/vue-chartjs/src/BaseCharts.js

@@ -0,0 +1,110 @@
+import Chart from 'chart.js'
+
+export function generateChart (chartId, chartType) {
+  return {
+    render: function (createElement) {
+      return createElement(
+        'div', {
+          style: this.styles,
+          class: this.cssClasses
+        },
+        [
+          createElement(
+            'canvas', {
+              attrs: {
+                id: this.chartId,
+                width: this.width,
+                height: this.height
+              },
+              ref: 'canvas'
+            }
+          )
+        ]
+      )
+    },
+
+    props: {
+      chartId: {
+        default: chartId,
+        type: String
+      },
+      width: {
+        default: 400,
+        type: Number
+      },
+      height: {
+        default: 400,
+        type: Number
+      },
+      cssClasses: {
+        type: String,
+        default: ''
+      },
+      styles: {
+        type: Object
+      },
+      plugins: {
+        type: Array,
+        default () {
+          return []
+        }
+      }
+    },
+
+    data () {
+      return {
+        _chart: null,
+        _plugins: this.plugins
+      }
+    },
+
+    methods: {
+      addPlugin (plugin) {
+        this.$data._plugins.push(plugin)
+      },
+      generateLegend () {
+        if (this.$data._chart) {
+          return this.$data._chart.generateLegend()
+        }
+      },
+      renderChart (data, options) {
+        if (this.$data._chart) this.$data._chart.destroy()
+        this.$data._chart = new Chart(
+          this.$refs.canvas.getContext('2d'), {
+            type: chartType,
+            data: data,
+            options: options,
+            plugins: this.$data._plugins
+          }
+        )
+      }
+    },
+    beforeDestroy () {
+      if (this.$data._chart) {
+        this.$data._chart.destroy()
+      }
+    }
+  }
+}
+
+export const Bar = generateChart('bar-chart', 'bar')
+export const HorizontalBar = generateChart('horizontalbar-chart', 'horizontalBar')
+export const Doughnut = generateChart('doughnut-chart', 'doughnut')
+export const Line = generateChart('line-chart', 'line')
+export const Pie = generateChart('pie-chart', 'pie')
+export const PolarArea = generateChart('polar-chart', 'polarArea')
+export const Radar = generateChart('radar-chart', 'radar')
+export const Bubble = generateChart('bubble-chart', 'bubble')
+export const Scatter = generateChart('scatter-chart', 'scatter')
+
+export default {
+  Bar,
+  HorizontalBar,
+  Doughnut,
+  Line,
+  Pie,
+  PolarArea,
+  Radar,
+  Bubble,
+  Scatter
+}

node_modules/vue-chartjs/src/examples/App.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="container">
+    <div class="Chart">
+      <h1 style="text-align:center;">Barchart</h1>
+      <bar-example/>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Horizontal Barchart</h1>
+      <horizontal-bar-example/>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Barchart with reactive mixing for live data</h1>
+      <reactive-example/>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Barchart with reactive mixing for live data as props</h1>
+      <reactive-prop-example :chart-data="dataPoints"/>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Linechart</h1>
+      <line-example/>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Doughnutchart</h1>
+      <doughnut-example/>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Piechart</h1>
+      <pie-example/>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Radarchart</h1>
+      <radar-example/>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Polararea</h1>
+      <polar-area-example/>
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Bubblechart</h1>
+      <bubble-example />
+    </div>
+
+    <div class="Chart">
+      <h1 style="text-align:center;">Scatter Chart</h1>
+      <scatter-example />
+    </div>
+    <div class="Chart">
+      <h1 style="text-align:center;">Custom Line Chart</h1>
+      <custom-line />
+    </div>
+  </div>
+</template>
+
+<script>
+  import BarExample from './BarExample'
+  import LineExample from './LineExample'
+  import DoughnutExample from './DoughnutExample'
+  import PieExample from './PieExample'
+  import RadarExample from './RadarExample'
+  import PolarAreaExample from './PolarAreaExample'
+  import BubbleExample from './BubbleExample'
+  import ReactiveExample from './ReactiveExample'
+  import ReactivePropExample from './ReactivePropExample'
+  import ScatterExample from './ScatterExample'
+  import HorizontalBarExample from './HorizontalBarExample'
+  import CustomLine from './CustomExample'
+
+  export default {
+    components: {
+      BarExample,
+      LineExample,
+      DoughnutExample,
+      CustomLine,
+      PieExample,
+      RadarExample,
+      PolarAreaExample,
+      BubbleExample,
+      ReactiveExample,
+      ReactivePropExample,
+      ScatterExample,
+      HorizontalBarExample
+    },
+    data () {
+      return {
+        dataPoints: null,
+        height: 20
+      }
+    },
+    mounted () {
+      setInterval(() => {
+        this.fillData()
+      }, 2000)
+    },
+    methods: {
+      increaseHeight () {
+        this.height += 10
+      },
+      getRandomInt () {
+        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
+      },
+      fillData () {
+        this.dataPoints = {
+          labels: ['January' + this.getRandomInt(), 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+          datasets: [
+            {
+              label: 'Data One',
+              backgroundColor: '#f87979',
+              data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
+            }
+          ]
+        }
+      }
+    },
+    computed: {
+      myStyles () {
+        return {
+          height: `${this.height}px`,
+          position: 'relative'
+        }
+      }
+    }
+  }
+</script>
+
+<style>
+  .container {
+    max-width: 800px;
+    margin: 0 auto;
+  }
+
+  h1 {
+    font-family: 'Helvetica', Arial;
+    color: #464646;
+    text-transform: uppercase;
+    border-bottom: 1px solid #f1f1f1;
+    padding-bottom: 15px;
+    font-size: 28px;
+    margin-top: 0;
+  }
+
+  .Chart {
+    padding: 20px;
+    box-shadow: 0px 0px 20px 2px rgba(0, 0, 0, .4);
+    border-radius: 20px;
+    margin: 50px 0;
+  }
+</style>

node_modules/vue-chartjs/src/examples/BarExample.js

@@ -0,0 +1,17 @@
+import { Bar } from '../BaseCharts'
+
+export default {
+  extends: Bar,
+  mounted () {
+    this.renderChart({
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+      datasets: [
+        {
+          label: 'Data One',
+          backgroundColor: '#f87979',
+          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+        }
+      ]
+    }, {responsive: true, maintainAspectRatio: false})
+  }
+}

node_modules/vue-chartjs/src/examples/BubbleExample.js

@@ -0,0 +1,53 @@
+import { Bubble } from '../BaseCharts'
+
+export default {
+  extends: Bubble,
+  mounted () {
+    this.renderChart({
+      datasets: [
+        {
+          label: 'Data One',
+          backgroundColor: '#f87979',
+          data: [
+            {
+              x: 20,
+              y: 25,
+              r: 5
+            },
+            {
+              x: 40,
+              y: 10,
+              r: 10
+            },
+            {
+              x: 30,
+              y: 22,
+              r: 30
+            }
+          ]
+        },
+        {
+          label: 'Data Two',
+          backgroundColor: '#7C8CF8',
+          data: [
+            {
+              x: 10,
+              y: 30,
+              r: 15
+            },
+            {
+              x: 20,
+              y: 20,
+              r: 10
+            },
+            {
+              x: 15,
+              y: 8,
+              r: 30
+            }
+          ]
+        }
+      ]
+    }, {responsive: true, maintainAspectRatio: false})
+  }
+}

node_modules/vue-chartjs/src/examples/CustomExample.js

@@ -0,0 +1,51 @@
+import Chart from 'chart.js'
+import { generateChart } from '../BaseCharts'
+
+Chart.defaults.LineWithLine = Chart.defaults.line
+Chart.controllers.LineWithLine = Chart.controllers.line.extend({
+  draw: function (ease) {
+    Chart.controllers.line.prototype.draw.call(this, ease)
+
+    if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
+      let activePoint = this.chart.tooltip._active[0]
+      let ctx = this.chart.ctx
+      let x = activePoint.tooltipPosition().x
+      let topY = this.chart.scales['y-axis-0'].top
+      let bottomY = this.chart.scales['y-axis-0'].bottom
+
+      // draw line
+      ctx.save()
+      ctx.beginPath()
+      ctx.moveTo(x, topY)
+      ctx.lineTo(x, bottomY)
+      ctx.lineWidth = 2
+      ctx.strokeStyle = '#07C'
+      ctx.stroke()
+      ctx.restore()
+    }
+  }
+})
+
+const LineWithLine = generateChart('line-with-chart', 'LineWithLine')
+
+export default {
+  extends: LineWithLine,
+  mounted () {
+    this.renderChart({
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+      datasets: [
+        {
+          label: 'Data One',
+          backgroundColor: '#f87979',
+          data: [40, 39, 10, 40, 39, 80, 40]
+        }
+      ]
+    }, {
+      responsive: true,
+      maintainAspectRatio: false,
+      tooltips: {
+        intersect: false
+      }
+    })
+  }
+}

node_modules/vue-chartjs/src/examples/DoughnutExample.js

@@ -0,0 +1,21 @@
+import { Doughnut } from '../BaseCharts'
+
+export default {
+  extends: Doughnut,
+  mounted () {
+    this.renderChart({
+      labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
+      datasets: [
+        {
+          backgroundColor: [
+            '#41B883',
+            '#E46651',
+            '#00D8FF',
+            '#DD1B16'
+          ],
+          data: [40, 20, 80, 10]
+        }
+      ]
+    }, {responsive: true, maintainAspectRatio: false})
+  }
+}

node_modules/vue-chartjs/src/examples/HorizontalBarExample.js

@@ -0,0 +1,17 @@
+import { HorizontalBar } from '../BaseCharts'
+
+export default {
+  extends: HorizontalBar,
+  mounted () {
+    this.renderChart({
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+      datasets: [
+        {
+          label: 'Data One',
+          backgroundColor: '#f87979',
+          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+        }
+      ]
+    }, {responsive: true, maintainAspectRatio: false})
+  }
+}

node_modules/vue-chartjs/src/examples/LineExample.js

@@ -0,0 +1,17 @@
+import { Line } from '../BaseCharts'
+
+export default {
+  extends: Line,
+  mounted () {
+    this.renderChart({
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+      datasets: [
+        {
+          label: 'Data One',
+          backgroundColor: '#f87979',
+          data: [40, 39, 10, 40, 39, 80, 40]
+        }
+      ]
+    }, {responsive: true, maintainAspectRatio: false})
+  }
+}

node_modules/vue-chartjs/src/examples/PieExample.js

@@ -0,0 +1,21 @@
+import { Pie } from '../BaseCharts'
+
+export default {
+  extends: Pie,
+  mounted () {
+    this.renderChart({
+      labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
+      datasets: [
+        {
+          backgroundColor: [
+            '#41B883',
+            '#E46651',
+            '#00D8FF',
+            '#DD1B16'
+          ],
+          data: [40, 20, 80, 10]
+        }
+      ]
+    }, {responsive: true, maintainAspectRatio: false})
+  }
+}

node_modules/vue-chartjs/src/examples/PolarAreaExample.js

@@ -0,0 +1,30 @@
+import { PolarArea } from '../BaseCharts'
+
+export default {
+  extends: PolarArea,
+  mounted () {
+    this.renderChart({
+      labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+      datasets: [
+        {
+          label: 'My First dataset',
+          backgroundColor: 'rgba(179,181,198,0.2)',
+          pointBackgroundColor: 'rgba(179,181,198,1)',
+          pointBorderColor: '#fff',
+          pointHoverBackgroundColor: '#fff',
+          pointHoverBorderColor: 'rgba(179,181,198,1)',
+          data: [65, 59, 90, 81, 56, 55, 40]
+        },
+        {
+          label: 'My Second dataset',
+          backgroundColor: 'rgba(255,99,132,0.2)',
+          pointBackgroundColor: 'rgba(255,99,132,1)',
+          pointBorderColor: '#fff',
+          pointHoverBackgroundColor: '#fff',
+          pointHoverBorderColor: 'rgba(255,99,132,1)',
+          data: [28, 48, 40, 19, 96, 27, 100]
+        }
+      ]
+    }, {responsive: true, maintainAspectRatio: false})
+  }
+}

node_modules/vue-chartjs/src/examples/RadarExample.js

@@ -0,0 +1,32 @@
+import { Radar } from '../BaseCharts'
+
+export default {
+  extends: Radar,
+  mounted () {
+    this.renderChart({
+      labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+      datasets: [
+        {
+          label: 'My First dataset',
+          backgroundColor: 'rgba(179,181,198,0.2)',
+          borderColor: 'rgba(179,181,198,1)',
+          pointBackgroundColor: 'rgba(179,181,198,1)',
+          pointBorderColor: '#fff',
+          pointHoverBackgroundColor: '#fff',
+          pointHoverBorderColor: 'rgba(179,181,198,1)',
+          data: [65, 59, 90, 81, 56, 55, 40]
+        },
+        {
+          label: 'My Second dataset',
+          backgroundColor: 'rgba(255,99,132,0.2)',
+          borderColor: 'rgba(255,99,132,1)',
+          pointBackgroundColor: 'rgba(255,99,132,1)',
+          pointBorderColor: '#fff',
+          pointHoverBackgroundColor: '#fff',
+          pointHoverBorderColor: 'rgba(255,99,132,1)',
+          data: [28, 48, 40, 19, 96, 27, 100]
+        }
+      ]
+    }, {responsive: true, maintainAspectRatio: false})
+  }
+}

node_modules/vue-chartjs/src/examples/ReactiveExample.js

@@ -0,0 +1,44 @@
+import { Bar } from '../BaseCharts'
+import { reactiveData } from '../mixins'
+
+export default {
+  extends: Bar,
+  mixins: [reactiveData],
+  data: () => ({
+    chartData: '',
+    options: {
+      responsive: true,
+      maintainAspectRatio: false
+    }
+  }),
+  created () {
+    this.fillData()
+  },
+
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+
+    setInterval(() => {
+      this.fillData()
+    }, 5000)
+  },
+
+  methods: {
+    fillData () {
+      this.chartData = {
+        labels: ['January' + this.getRandomInt(), 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+        datasets: [
+          {
+            label: 'Data One',
+            backgroundColor: '#f87979',
+            data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
+          }
+        ]
+      }
+    },
+
+    getRandomInt () {
+      return Math.floor(Math.random() * (50 - 5 + 1)) + 5
+    }
+  }
+}

node_modules/vue-chartjs/src/examples/ReactivePropExample.js

@@ -0,0 +1,17 @@
+import { Bar } from '../BaseCharts'
+import { reactiveProp } from '../mixins'
+
+export default {
+  extends: Bar,
+  mixins: [reactiveProp],
+  data: () => ({
+    options: {
+      responsive: true,
+      maintainAspectRatio: false
+    }
+  }),
+
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+}

node_modules/vue-chartjs/src/examples/ScatterExample.js

@@ -0,0 +1,53 @@
+import { Scatter } from '../BaseCharts'
+
+export default {
+  extends: Scatter,
+  mounted () {
+    this.renderChart({
+      datasets: [{
+        label: 'Scatter Dataset 1',
+        fill: false,
+        borderColor: '#f87979',
+        backgroundColor: '#f87979',
+        data: [{
+          x: -2,
+          y: 4
+        }, {
+          x: -1,
+          y: 1
+        }, {
+          x: 0,
+          y: 0
+        }, {
+          x: 1,
+          y: 1
+        }, {
+          x: 2,
+          y: 4
+        }]
+      },
+      {
+        label: 'Scatter Dataset 2',
+        fill: false,
+        borderColor: '#7acbf9',
+        backgroundColor: '#7acbf9',
+        data: [{
+          x: -2,
+          y: -4
+        }, {
+          x: -1,
+          y: -1
+        }, {
+          x: 0,
+          y: 1
+        }, {
+          x: 1,
+          y: -1
+        }, {
+          x: 2,
+          y: -4
+        }]
+      }]
+    }, {responsive: true, maintainAspectRatio: false})
+  }
+}

node_modules/vue-chartjs/src/index.js

@@ -0,0 +1,46 @@
+import mixins from './mixins/index.js'
+
+import {
+  Bar,
+  HorizontalBar,
+  Doughnut,
+  Line,
+  Pie,
+  PolarArea,
+  Radar,
+  Bubble,
+  Scatter,
+  generateChart
+} from './BaseCharts'
+
+const VueCharts = {
+  Bar,
+  HorizontalBar,
+  Doughnut,
+  Line,
+  Pie,
+  PolarArea,
+  Radar,
+  Bubble,
+  Scatter,
+  mixins,
+  generateChart,
+  render: () => console.error('[vue-chartjs]: This is not a vue component. It is the whole object containing all vue components. Please import the named export or access the components over the dot notation. For more info visit https://vue-chartjs.org/#/home?id=quick-start')
+}
+
+export default VueCharts
+
+export {
+  VueCharts,
+  Bar,
+  HorizontalBar,
+  Doughnut,
+  Line,
+  Pie,
+  PolarArea,
+  Radar,
+  Bubble,
+  Scatter,
+  mixins,
+  generateChart
+}

node_modules/vue-chartjs/src/main.js

@@ -0,0 +1,9 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './examples/App'
+
+/* eslint-disable no-new */
+new Vue({
+  render: h => h(App)
+}).$mount('#app')

node_modules/vue-chartjs/src/mixins/index.js

@@ -0,0 +1,103 @@
+function dataHandler (newData, oldData) {
+  if (oldData) {
+    let chart = this.$data._chart
+
+    // Get new and old DataSet Labels
+    let newDatasetLabels = newData.datasets.map((dataset) => {
+      return dataset.label
+    })
+
+    let oldDatasetLabels = oldData.datasets.map((dataset) => {
+      return dataset.label
+    })
+
+    // Stringify 'em for easier compare
+    const oldLabels = JSON.stringify(oldDatasetLabels)
+    const newLabels = JSON.stringify(newDatasetLabels)
+
+    // Check if Labels are equal and if dataset length is equal
+    if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
+      newData.datasets.forEach((dataset, i) => {
+        // Get new and old dataset keys
+        const oldDatasetKeys = Object.keys(oldData.datasets[i])
+        const newDatasetKeys = Object.keys(dataset)
+
+        // Get keys that aren't present in the new data
+        const deletionKeys = oldDatasetKeys.filter((key) => {
+          return key !== '_meta' && newDatasetKeys.indexOf(key) === -1
+        })
+
+        // Remove outdated key-value pairs
+        deletionKeys.forEach((deletionKey) => {
+          delete chart.data.datasets[i][deletionKey]
+        })
+
+        // Update attributes individually to avoid re-rendering the entire chart
+        for (const attribute in dataset) {
+          if (dataset.hasOwnProperty(attribute)) {
+            chart.data.datasets[i][attribute] = dataset[attribute]
+          }
+        }
+      })
+
+      if (newData.hasOwnProperty('labels')) {
+        chart.data.labels = newData.labels
+        this.$emit('labels:update')
+      }
+      if (newData.hasOwnProperty('xLabels')) {
+        chart.data.xLabels = newData.xLabels
+        this.$emit('xlabels:update')
+      }
+      if (newData.hasOwnProperty('yLabels')) {
+        chart.data.yLabels = newData.yLabels
+        this.$emit('ylabels:update')
+      }
+      chart.update()
+      this.$emit('chart:update')
+    } else {
+      if (chart) {
+        chart.destroy()
+        this.$emit('chart:destroy')
+      }
+      this.renderChart(this.chartData, this.options)
+      this.$emit('chart:render')
+    }
+  } else {
+    if (this.$data._chart) {
+      this.$data._chart.destroy()
+      this.$emit('chart:destroy')
+    }
+    this.renderChart(this.chartData, this.options)
+    this.$emit('chart:render')
+  }
+}
+
+export const reactiveData = {
+  data () {
+    return {
+      chartData: null
+    }
+  },
+
+  watch: {
+    'chartData': dataHandler
+  }
+}
+
+export const reactiveProp = {
+  props: {
+    chartData: {
+      type: Object,
+      required: true,
+      default: () => {}
+    }
+  },
+  watch: {
+    'chartData': dataHandler
+  }
+}
+
+export default {
+  reactiveData,
+  reactiveProp
+}