Merge branch 'next' into develop

* next: 📝 Update CHANGELOG 💎 Release new version 2.1.0 ✨ Add travis config 🐛 Fix tests ✨ Add chartId as prop and fix width and height props ✨ Add bubble-chart example ✅ Add tests ✨ Add chart type Bubble Move examples into src for better testing 📝 Update README 💎 Release new version 2.0.0-alpha Add vue 2.0 build files 📝 Update README ⬆️ Update dependency chartjs to 2.2.1 Update examples ⬆️ Update dependency vue 2.0 Change deprecated v-el to ref Change render() method name to renderChart # Conflicts: # CHANGELOG.md # dist/vue-chartjs.js # dist/vue-chartjs.js.map # package.json # src/BaseCharts/Bar.js # src/BaseCharts/Bubble.js # src/BaseCharts/Doughnut.js # src/BaseCharts/Line.js # src/BaseCharts/Pie.js # src/BaseCharts/PolarArea.js # src/BaseCharts/Radar.js # src/examples/App.vue # src/examples/BubbleExample.js # test/unit/specs/Bar.spec.js # test/unit/specs/Bubble.spec.js # test/unit/specs/Doughnut.spec.js # test/unit/specs/Line.spec.js # test/unit/specs/Pie.spec.js # test/unit/specs/PolarArea.spec.js # test/unit/specs/Radar.spec.js
2025-10-29 18:00:20 +00:00 · 2016-10-02 09:16:45 +02:00
parent b8e7ce11de 7d256e6492
commit 1be5149bde
29 changed files with 218 additions and 102 deletions
--- a/src/BaseCharts/Bar.js
+++ b/src/BaseCharts/Bar.js
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
  template: `
    <div>
-      <canvas id="{{chartId}}" width="{{width}}" height="{{height}}" v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  `,

@@ -49,11 +49,11 @@ export default Vue.extend({
  },

  methods: {
-    render (data, options) {
+    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)

      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
          type: 'bar',
          data: data,
          options: chartOptions
--- a/src/BaseCharts/Bubble.js
+++ b/src/BaseCharts/Bubble.js
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
  template: `
    <div>
-      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  `,

@@ -27,16 +27,33 @@ export default Vue.extend({
  data () {
    return {
      defaultOptions: {
+        scales: {
+          yAxes: [{
+            ticks: {
+              beginAtZero: true
+            },
+            gridLines: {
+              display: false
+            }
+          }],
+          xAxes: [ {
+            gridLines: {
+              display: false
+            },
+            categoryPercentage: 0.5,
+            barPercentage: 0.2
+          }]
+        }
      }
    }
  },

  methods: {
-    render (data, options) {
+    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)

      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
          type: 'bubble',
          data: data,
          options: chartOptions
--- a/src/BaseCharts/Doughnut.js
+++ b/src/BaseCharts/Doughnut.js
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
  template: `
    <div>
-      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  `,

@@ -32,11 +32,11 @@ export default Vue.extend({
  },

  methods: {
-    render (data, options) {
+    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)

      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
          type: 'doughnut',
          data: data,
          options: chartOptions
--- a/src/BaseCharts/Line.js
+++ b/src/BaseCharts/Line.js
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
  template: `
    <div>
-      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  `,

@@ -47,11 +47,11 @@ export default Vue.extend({
  },

  methods: {
-    render (data, options) {
+    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)

      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
          type: 'line',
          data: data,
          options: chartOptions
--- a/src/BaseCharts/Pie.js
+++ b/src/BaseCharts/Pie.js
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
  template: `
    <div>
-      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  `,

@@ -32,11 +32,11 @@ export default Vue.extend({
  },

  methods: {
-    render (data, options) {
+    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)

      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
          type: 'pie',
          data: data,
          options: chartOptions
--- a/src/BaseCharts/PolarArea.js
+++ b/src/BaseCharts/PolarArea.js
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
  template: `
    <div>
-      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  `,

@@ -32,11 +32,11 @@ export default Vue.extend({
  },

  methods: {
-    render (data, options) {
+    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)

      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
          type: 'polarArea',
          data: data,
          options: chartOptions
--- a/src/BaseCharts/Radar.js
+++ b/src/BaseCharts/Radar.js
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
  template: `
    <div>
-      <canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
+      <canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
    </div>
  `,

@@ -32,11 +32,11 @@ export default Vue.extend({
  },

  methods: {
-    render (data, options) {
+    renderChart (data, options) {
      let chartOptions = mergeOptions(this.defaultOptions, options)

      this._chart = new Chart(
-        this.$els.canvas.getContext('2d'), {
+        this.$refs.canvas.getContext('2d'), {
          type: 'radar',
          data: data,
          options: chartOptions
--- a/src/examples/App.vue
+++ b/src/examples/App.vue
@@ -20,15 +20,7 @@
  import BubbleExample from './BubbleExample'

  export default {
-    components: {
-      BarExample,
-      LineExample,
-      DoughnutExample,
-      PieExample,
-      RadarExample,
-      PolarAreaExample,
-      BubbleExample
-    }
+    components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample, PolarAreaExample, BubbleExample }
  }
 </script>

--- a/src/examples/BarExample.js
+++ b/src/examples/BarExample.js
@@ -1,8 +1,8 @@
 import BarChart from '../BaseCharts/Bar'

 export default BarChart.extend({
-  ready () {
-    this.render({
+  mounted () {
+    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      datasets: [
        {
--- a/src/examples/BubbleExample.js
+++ b/src/examples/BubbleExample.js
@@ -1,8 +1,8 @@
 import BubbleChart from '../BaseCharts/Bubble'

 export default BubbleChart.extend({
-  ready () {
-    this.render({
+  mounted () {
+    this.renderChart({
      datasets: [
        {
          label: 'Data One',
--- a/src/examples/DoughnutExample.js
+++ b/src/examples/DoughnutExample.js
@@ -1,8 +1,8 @@
 import DoughnutChart from '../BaseCharts/Doughnut'

 export default DoughnutChart.extend({
-  ready () {
-    this.render({
+  mounted () {
+    this.renderChart({
      labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
      datasets: [
        {
--- a/src/examples/LineExample.js
+++ b/src/examples/LineExample.js
@@ -1,8 +1,8 @@
 import LineChart from '../BaseCharts/Line'

 export default LineChart.extend({
-  ready () {
-    this.render({
+  mounted () {
+    this.renderChart({
      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
      datasets: [
        {
--- a/src/examples/PieExample.js
+++ b/src/examples/PieExample.js
@@ -1,8 +1,8 @@
 import PieChart from '../BaseCharts/Pie'

 export default PieChart.extend({
-  ready () {
-    this.render({
+  mounted () {
+    this.renderChart({
      labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
      datasets: [
        {
--- a/src/examples/PolarAreaExample.js
+++ b/src/examples/PolarAreaExample.js
@@ -1,8 +1,8 @@
 import PolarAreaChart from '../BaseCharts/PolarArea'

 export default PolarAreaChart.extend({
-  ready () {
-    this.render({
+  mounted () {
+    this.renderChart({
      labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
      datasets: [
        {
--- a/src/examples/RadarExample.js
+++ b/src/examples/RadarExample.js
@@ -1,8 +1,8 @@
 import RadarChart from '../BaseCharts/Radar'

 export default RadarChart.extend({
-  ready () {
-    this.render({
+  mounted () {
+    this.renderChart({
      labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
      datasets: [
        {