From 876252173bf11ae4d2589c0d5ff9976fd82fbc01 Mon Sep 17 00:00:00 2001 From: Jakub Juszczak Date: Tue, 20 Mar 2018 21:08:58 +0100 Subject: [PATCH 01/12] fix(reactive-mixins): Add prop type and default value --- src/mixins/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/mixins/index.js b/src/mixins/index.js index 8555d523..85ec49c5 100644 --- a/src/mixins/index.js +++ b/src/mixins/index.js @@ -77,7 +77,9 @@ export const reactiveData = { export const reactiveProp = { props: { chartData: { - required: true + type: Object, + required: true, + default: () => {} } }, watch: { From 8669452651eb984126c9eb2aa9e40b4b888baa90 Mon Sep 17 00:00:00 2001 From: Jakub Juszczak Date: Tue, 20 Mar 2018 21:24:11 +0100 Subject: [PATCH 02/12] wip: Refactor mixin in seperate functions --- src/mixins/index.js | 105 +++++++++++++++++++++++--------------------- 1 file changed, 56 insertions(+), 49 deletions(-) diff --git a/src/mixins/index.js b/src/mixins/index.js index 85ec49c5..658b74d0 100644 --- a/src/mixins/index.js +++ b/src/mixins/index.js @@ -1,67 +1,74 @@ +/* eslint-disable */ + 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 - }) + const chart = this.$data._chart + _checkChanges(newData, oldData, chart) + } else { + _destroyAndRenderChart(chart) +} - let oldDatasetLabels = oldData.datasets.map((dataset) => { - return dataset.label - }) +function _checkChanges (newData, oldData, chart) { + // Get new and old DataSet Labels + let newDatasetLabels = newData.datasets.map((dataset) => { + return dataset.label + }) - // Stringify 'em for easier compare - const oldLabels = JSON.stringify(oldDatasetLabels) - const newLabels = JSON.stringify(newDatasetLabels) + let oldDatasetLabels = oldData.datasets.map((dataset) => { + return dataset.label + }) - // 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) + // Stringify 'em for easier compare + const oldLabels = JSON.stringify(oldDatasetLabels) + const newLabels = JSON.stringify(newDatasetLabels) - // Get keys that aren't present in the new data - const deletionKeys = oldDatasetKeys.filter((key) => { - return key !== '_meta' && newDatasetKeys.indexOf(key) === -1 - }) + // 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) - // Remove outdated key-value pairs - deletionKeys.forEach((deletionKey) => { - delete chart.data.datasets[i][deletionKey] - }) + // Get keys that aren't present in the new data + const deletionKeys = oldDatasetKeys.filter((key) => { + return key !== '_meta' && newDatasetKeys.indexOf(key) === -1 + }) - // 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] - } - } + // Remove outdated key-value pairs + deletionKeys.forEach((deletionKey) => { + delete chart.data.datasets[i][deletionKey] }) - if (newData.hasOwnProperty('labels')) { - chart.data.labels = newData.labels - } - if (newData.hasOwnProperty('xLabels')) { - chart.data.xLabels = newData.xLabels - } - if (newData.hasOwnProperty('yLabels')) { - chart.data.yLabels = newData.yLabels + // 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] + } } - chart.update() - } else { - chart.destroy() - this.renderChart(this.chartData, this.options) + }) + + if (newData.hasOwnProperty('labels')) { + chart.data.labels = newData.labels } - } else { - if (this.$data._chart) { - this.$data._chart.destroy() + if (newData.hasOwnProperty('xLabels')) { + chart.data.xLabels = newData.xLabels + } + if (newData.hasOwnProperty('yLabels')) { + chart.data.yLabels = newData.yLabels } - this.renderChart(this.chartData, this.options) + chart.update() + } else { + _destroyAndRenderChart(chart) } } +function _destroyAndRenderChart (chart) { + if (chart) { + chart.destroy() + } + this.renderChart(this.chartData, this.options) +} + export const reactiveData = { data () { return { @@ -77,7 +84,6 @@ export const reactiveData = { export const reactiveProp = { props: { chartData: { - type: Object, required: true, default: () => {} } @@ -91,3 +97,4 @@ export default { reactiveData, reactiveProp } + From bfa1fb83f97c6dc82342dbe405a328c498076def Mon Sep 17 00:00:00 2001 From: Jakub Juszczak Date: Tue, 20 Mar 2018 21:35:54 +0100 Subject: [PATCH 03/12] Revert "wip: Refactor mixin in seperate functions" This reverts commit 8669452651eb984126c9eb2aa9e40b4b888baa90. --- src/mixins/index.js | 105 +++++++++++++++++++++----------------------- 1 file changed, 49 insertions(+), 56 deletions(-) diff --git a/src/mixins/index.js b/src/mixins/index.js index 658b74d0..85ec49c5 100644 --- a/src/mixins/index.js +++ b/src/mixins/index.js @@ -1,72 +1,65 @@ -/* eslint-disable */ - function dataHandler (newData, oldData) { if (oldData) { - const chart = this.$data._chart - _checkChanges(newData, oldData, chart) - } else { - _destroyAndRenderChart(chart) -} + let chart = this.$data._chart -function _checkChanges (newData, oldData, chart) { - // Get new and old DataSet Labels - let newDatasetLabels = newData.datasets.map((dataset) => { - return dataset.label - }) + // Get new and old DataSet Labels + let newDatasetLabels = newData.datasets.map((dataset) => { + return dataset.label + }) - let oldDatasetLabels = oldData.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) + // 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) + // 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 - }) + // 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] - }) + // 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] + // 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 - } - if (newData.hasOwnProperty('xLabels')) { - chart.data.xLabels = newData.xLabels - } - if (newData.hasOwnProperty('yLabels')) { - chart.data.yLabels = newData.yLabels + if (newData.hasOwnProperty('labels')) { + chart.data.labels = newData.labels + } + if (newData.hasOwnProperty('xLabels')) { + chart.data.xLabels = newData.xLabels + } + if (newData.hasOwnProperty('yLabels')) { + chart.data.yLabels = newData.yLabels + } + chart.update() + } else { + chart.destroy() + this.renderChart(this.chartData, this.options) } - chart.update() } else { - _destroyAndRenderChart(chart) - } -} - -function _destroyAndRenderChart (chart) { - if (chart) { - chart.destroy() + if (this.$data._chart) { + this.$data._chart.destroy() + } + this.renderChart(this.chartData, this.options) } - this.renderChart(this.chartData, this.options) } export const reactiveData = { @@ -84,6 +77,7 @@ export const reactiveData = { export const reactiveProp = { props: { chartData: { + type: Object, required: true, default: () => {} } @@ -97,4 +91,3 @@ export default { reactiveData, reactiveProp } - From 22f7dda06366125f1fedef5624f4265d6677c4b0 Mon Sep 17 00:00:00 2001 From: geomars Date: Sat, 14 Apr 2018 16:11:38 +0700 Subject: [PATCH 04/12] Update and refine Indonesian translation --- docs/id/README.md | 175 ++++++++++++++++++++++------------------------ 1 file changed, 85 insertions(+), 90 deletions(-) diff --git a/docs/id/README.md b/docs/id/README.md index 7b8ed7ed..7f0ba3cd 100644 --- a/docs/id/README.md +++ b/docs/id/README.md @@ -3,29 +3,28 @@ search: id --- # vue-chartjs -**vue-chartjs** adalah wrapper [Chart.js](https://github.com/chartjs/Chart.js) dalam vue. Kamu dapat dengan mudah membuat komponen chart reusable. +**vue-chartjs** adalah pembungkus [Chart.js](https://github.com/chartjs/Chart.js) dalam Vue. Anda dapat dengan mudah membuat komponen grafik yang dapat digunakan kembali. -## Pengenalan -`vue-chartjs` memungkinkan kamu untuk menggunakan chart.js tanpa usaha lebih didalam vue. Sempurna untuk orang-orang yang membutuhkan bagan/chart simpel dengan cepat. - -Flexibel karena langsung menampilkan objek chart.js. +## Pengantar +`vue-chartjs` memungkinkan Anda untuk dapat menggunakan Chart.js tanpa perlu bersusah-payah lagi dengan Vue. Hal ini sangat cocok bagi pengguna yang membutuhkan grafik sederhana dan mampu berfungsi dengan baik dalam waktu singkat. +Ia memisahkan logika dasarnya namun mengekspos obyek Chart.js untuk memberikan Anda fleksibilitas maksimal. ## Instalasi -Jika kamu menggunakan Vue.js 2+: +Jika Anda menggunakan Vue.js 2+ jalankan perintah: `yarn add vue-chartjs chart.js` -Jika menggunakan vue 1.x gunakan tag `legacy`. versi vue 1 sudah tidak diurus lagi. +Jika Anda menggunakan vue 1.x gunakan tag `legacy`. Hal ini disebabkan karena Vue versi 1 sudah tidak dipelihara lagi. `yarn add vue-chartjs@legacy` -## Mulai Cepat +## Petunjuk Praktis -Kamu perlu untuk meng-import base chart dan meng-extend-nya. Dengan cara ini akan lebih fleksibel ketika bekerja dengan data yang berbeda. -Kamu dapat melakukan enkapsulasi komponen-komponen dan menggunakan props untuk menyampaikan data atau bisa juga dengan menginputkan langsung didalam komponen. Namun komponenmu tidak reuseable. +Terlebih dahulu Anda perlu mengimpor grafik dasar kemudian mengembangkannya. Cara ini memberi keleluasaan saat bekerja dengan data yang berbeda. +Anda dapat merangkum beberapa komponen dan menggunakan props untuk mengirimkan data atau Anda bisa memasukkannya secara langsung kedalam komponen. Namun cara yang terakhir ini akan mengakibatkan komponen Anda tidak dapat digunakan lagi. -Kamu bisa meng-import seluruh package atau modul-modul terpisah. +Anda dapat mengimpor seluruh paket secara keseluruhan atau setiap modul secara terpisah. ```javascript // CommitChart.js @@ -40,14 +39,14 @@ export default { } ``` -Kamu dapat melewatkan dua argumen pada `renderChart()`: +Anda dapat memberi dua argumen pada metode `renderChart()`: -- Objek Data -- Objek Opsi +- Obyek Data +- Obyek Pilihan -### Data object +### Obyek data -Objek data: +Berikut ini adalah obyek data: ```javascript { @@ -62,27 +61,27 @@ Objek data: } ``` -Untuk keterangan lebih lanjut dapat dilihat di dokumentasi [Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data). +Keterangan lebih lengkap dapat dilihat pada dokumentasi [Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data). ## Props -Terdapat beberapa props standar yang didefinisikan didalam BaseChart. Karena menggunakan `extend()`, props-props tersebut *tidak terlihat*, Namun kamu tetap bisa menulis ulang: +Terdapat beberapa props standar yang didefinisikan didalam grafik dasar. Karena menggunakan `extend()`, sejumlah props tersebut *tidak terlihat*, namun tetap dapat ditulis ulang: -| Prop | Description | +| Prop | Deskripsi | |---|---| -| width | lebar chart | -| height | tinggi chart | +| width | lebar grafik | +| height | tinggi grafik | | chart-id | id canvas | -| css-classes | String dengan kelas css mengelilingi div | -| styles | Objek dengan style css mengelilingi div | +| css-classes | String dengan kelas css untuk surrounding div | +| styles | Obyek dengan style css untuk surrounding div container | ## Contoh Berikut adalah beberapa contoh penggunaan -### Chart dengan props +### Grafik dengan props -Kamu dapat membuat props data dan opsi untuk melewatkan data pada chart. +Anda dapat membuat props data dan opsi untuk mengirimkan data ke grafik. ```javascript // LineChart.js @@ -97,17 +96,17 @@ export default { } ``` -Setelah kamu menambahkannya kamu dapat menggunakannya seperti biasa: +Setelah menambahkan komponen Anda dapat menggunakannya seperti biasa: ```html - + ``` -Jika kamu ingin mengatur tinggi dan lebar: +Jika Anda ingin mengatur tinggi dan lebar: ```html - Perlu diingat, kamu perlu untuk mengatur `responsive: false` agaar dapat mengatur `width` dan `height`. + Perlu diingat, Anda perlu untuk mengatur `responsive: false` agar dapat mengatur `width` dan `height`.

-### Chart dengan data lokal +### Grafik dengan data lokal ```javascript import {Bar} from 'vue-chartjs' @@ -146,20 +145,20 @@ export default { } ``` -### Reusable Komponen +### Komponen yang Dapat Digunakan Kembali -Jika kamu ingin agar komponen chart reusable, cara paling baik adalah dengan menambahkan sebuah wrapper. Dengan cara ini komponen chart hanya bertanggung jawab dalam representasi data dan wrapper komponen bertanggung jawab dengan logika didalamnya. Banyak kasus-kasus yang berbeda dan juga berbeda jika kamu menjalankan Single Page Application atau mengintegrasikannya pada contoh laravel. +Jika Anda ingin menjaga agar komponen grafik Anda dapat digunakan kembali, cara yang terbaik adalah menambahkan pembungkus pada mereka. Dengan cara ini komponen grafik hanya bertanggung jawab untuk representasi data murni dan komponen pembungkus untuk logika di baliknya. Ada banyak kasus penggunaan yang berbeda dan akan berbeda jika Anda menjalankan single page application atau mengintegrasikannya dalam sebuah framework misalnya laravel. -## Reactive Data +## Data Reaktif -Chart.js tidak menyediakan live update jika kamu mengubah datasets. Akan tetapi `vue-chartjs` menyediakan 2 mixins untuk melakukannya. +Chart.js tidak menyediakan live update jika Anda mengubah dataset. Akan tetapi `vue-chartjs` menyediakan 2 mixin untuk melakukannya. - `reactiveProp` - `reactiveData` -Kedua mixins tersebut sebenarnya sama. `reactiveProp` akan sering digunakan. `reactiveProp` meng-extend logika dari komponen chart dan secara otomatis membuat props `chartData` dan menambahkan `vue watch` dalam props ini. Pada saat data berubah, itu akan memanggil `update()` jika data memiliki datasets atau `renderChart()` jika datasets telah ada sebelumnya. +Kedua mixin tersebut sebenarnya sama. Namun `reactiveProp` akan lebih sering digunakan. `reactiveProp` memperluas logika dari komponen grafik dan secara otomatis membuat props `chartData` serta menambahkan `vue watch` dalam props ini. Pada saat data berubah, `update()` akan dipanggil jika data di dalam dataset telah berubah atau `renderChart()` jika dataset baru ditambahkan. -`reactiveData` secara sederhana membuat variabel lokal chartData dimana itu bukan sebuah props! dan watcher. Hal ini bisa berguna, jika kamu membutuhkan chart tertentu dan melakukan akses API didalam komponen chart. +`reactiveData` secara sederhana membuat variabel lokal chartData dimana sebenarnya itu bukanlah sebuah props dan menambahkan watcher. Hal ini hanya berguna, jika Anda membutuhkan grafik tertentu dan melakukan akses API didalam komponen grafik. ```javascript data () { @@ -246,7 +245,7 @@ export default { ```

- ⚠ Perhatian: jika kamu memutasi data didalam komponen parent dan melewatkannya pada child komponen chart perlu diingat batasan javascript. + ⚠ Perhatian: Jika Anda memutasi data dalam komponen induk dan meneruskannya ke komponen grafik anak, perlu diingat batasan javascript. Info lebih lanjut [issue#44](https://github.com/apertureless/vue-chartjs/issues/44)

@@ -257,17 +256,15 @@ export default {
  • [vm.$watch](https://vuejs.org/v2/api/#vm-watch)
    • -## Objek Chart.js +## Obyek Chart.js -Suatu ketika kamu membutuhkan kontrol chart.js. Kamu dapat mengaksesnya dengan `this.$data._chart` +Suatu ketika Anda membutuhkan kontrol atas Chart.js. Anda dapat mengakses instance Chart.js dengan `this.$data._chart`. -## Inline plugins +## Plugin Inline -Di Chart.js kamu dapat mendefinisikan plugin global dan inline. Plugin global bekerja tanpa masalah dengan `vue-chartjs` seperti yang dijelaskan pada [chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html) +Dalam Chart.js Anda dapat mendefinisikan plugin global dan inline. Plugin global dapat bekerja tanpa masalah dengan `vue-chartjs` seperti yang dijelaskan pada [Chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html). -If you want to add inline plugins, `vue-chartjs` exposes a helper method called `addPlugin()` -You should call `addPlugin()` before the `renderChart()` method. -Jika kamu ingin menambahkan plugin inline, `vue-chartjs` menyediakan method helper `addPlugin()` kamu harus memanggil `addPlugin()` sebelum method `renderChart()`. +Jika Anda ingin menambahkan plugin inline, `vue-chartjs` menyediakan method helper `addPlugin()`. Anda harus memanggil `addPlugin()` sebelum method `renderChart()`. ### Contoh @@ -281,22 +278,52 @@ mounted () { }) } ``` +## Grafik Kustom/Baru + +Kadang-kadang Anda perlu mengembangkan grafik Chart.js default. Terdapat banyak contoh cara mengembangkan dan mengubah grafik default. Atau Anda ingin membuat jenis grafik sendiri. + +Dalam `vue-chartjs` Anda bisa melakukan hal ini dengan cara yang hampir sama. + +```js +// 1. Import Chart.js so you can use the global Chart object +import Chart from 'chart.js' +// 2. Import the `generateChart()` method to create the vue component. +import { generateChart } from 'vue-chartjs' + +// 3. Extend on of the default charts +// http://www.chartjs.org/docs/latest/developers/charts.html +Chart.defaults.LineWithLine = Chart.defaults.line; +Chart.controllers.LineWithLine = Chart.controllers.line.extend({ /* custom magic here */}) + +// 4. Generate the vue-chartjs component +// First argument is the chart-id, second the chart type. +const CustomLine = generateChart('custom-line', 'LineWithLine') + +// 5. Extend the CustomLine Component just like you do with the default vue-chartjs charts. + +export default { + extends: CustomLine, + mounted () { + // .... + } +} +``` -## Charts yang Tersedia +## Grafik yang Tersedia -### Bar Chart +### Grafik Batang

    - Terdapat dua versi bar chart. `{Bar}` dan `{HorizontalBar}` + Terdapat dua versi grafik batang: `{Bar}` dan `{HorizontalBar}`

    -![Bar](assets/bar.png) -### Line Chart +![Batang](assets/bar.png) +### Grafik Garis -![Line](assets/line.png) +![Garis](assets/line.png) -### Doughnut +### Donat -![Doughnut](assets/doughnut.png) +![Donat](assets/doughnut.png) ### Pie @@ -304,11 +331,11 @@ mounted () { ### Radar -![Pie](assets/radar.png) +![Radar](assets/radar.png) ### Polar Area -![Pie](assets/polar.png) +![Polar](assets/polar.png) ### Bubble @@ -316,45 +343,13 @@ mounted () { ### Scatter -This chart has a different data structure then the others. Right now the reactive Mixins are not working for this chart type. -Chart ini memiliki struktur data yang berbeda dengan yang lainnya. Untuk sekarang reactive mixins tidak dapat bekerja pada tipe chart ini. +Grafik ini memiliki struktur data yang berbeda dengan yang lain. Untuk sekarang reactive mixins tidak dapat digunakan pada grafik tipe ini. ![Scatter](assets/scatter.png) +## Sumber acuan -## Penjelasan Build -Terdapat tiga jenis titik entri. Tergantung setup mana yang kamu gunakan. Dependensi-dependensi telah di-bundle atau require sebagai peerDependency. - -- Browser -- Browserify / Webpack 1 -- Webpack 2 - - -| Build | Chart.js | Vue.js | -|---|---|---| -| vue-chartjs.full.js | Bundled | Bundled | -| vue-chartjs.full.min.js | Bundled | Bundled | -| vue-chartjs.js | peerDependency | peerDependency | -| vue-chartjs.min.js | peerDependency | peerDependency | -| es/index* | peerDependency | peerDependency | - -### Browser -Kamu dapat menggunakan `vue-chartjs` secara langsung didalam browser tanpa setup build. Seperti berikut [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). Dalam kasus ini, mohon gunakan `vue-chartjs.full.min.js` yang telah di-minify. Didalamnya terdapat Vue.js dan Chart.js. Dan bundel modul UMD. Jadi kamu hanya membutuhkan satu file saja. - - -### Browserify / Webpack 1 - -Jika kamu menggunakan GUlp, Browserify atau Webpack 1 entri yang digunakan adalah `vue-chartjs.js` dimana telah di__transpile__ dan di__bundle__ UMD Module. - -Bagaimanapun juga Vue.js dan Chart.js adalah `peerDependencies` jadi kamu harus meng-instalnya secara terpisah. Jika kamu telah memiliki `Vue.js` kamu dapat menggunakan versi Vue.js dan Chart.js yang terdapat di-package ini. - -### Webpack 2 -Jika kamu menggunakan Webpack 2 secara otomatis akan menggunakan titik entri `jsnext:main` / `module`. Di `es/index.js` -Di__transpile__ es sumber dari versi ini. Dan tidak di__bundle__ pada modul. Sehingga tree shaking akan bekerja. Sama seperti versi bundle, `Vue.js` dan `Chart.js` adalah `peerDependencies` dan butuh untuk diinstal. - -## Sumber-sumber - -Kamu dapat menemukan sumber-sumber seperti tutrial bagaimana cara untuk menggunakan `vue-chartjs` +Berikut ini adalah beberapa sumber acuan termasuk diantaranya tutorial cara menggunakan `vue-chartjs` - [Using vue-chartjs with WordPress](https://medium.com/@apertureless/wordpress-vue-and-chart-js-6b61493e289f) - [Create stunning Charts with Vue and Chart.js](https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a) From 6457a649cfe2e9bd96f16a75c76d56b42b7e880d Mon Sep 17 00:00:00 2001 From: Jakub Juszczak Date: Thu, 21 Jun 2018 16:42:52 +0200 Subject: [PATCH 05/12] chore(docs): Change CNAME to trigger https --- docs/CNAME | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/CNAME b/docs/CNAME index c915bec1..9907767c 100644 --- a/docs/CNAME +++ b/docs/CNAME @@ -1 +1 @@ -vue-chartjs.org \ No newline at end of file +vue-chartjs.com \ No newline at end of file From d5084ba9428b4b924b6461169eec5b6254052bb8 Mon Sep 17 00:00:00 2001 From: Jakub Juszczak Date: Thu, 21 Jun 2018 16:43:28 +0200 Subject: [PATCH 06/12] chore(docs): Change CNAME to trigger https --- docs/CNAME | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/CNAME b/docs/CNAME index 9907767c..4aafea50 100644 --- a/docs/CNAME +++ b/docs/CNAME @@ -1 +1 @@ -vue-chartjs.com \ No newline at end of file +vue-chartjs.org From bbd8588267a181eceda781d9170c4bc872307397 Mon Sep 17 00:00:00 2001 From: Guillermo Croppi Date: Mon, 24 Sep 2018 16:18:19 -0300 Subject: [PATCH 07/12] chore(documentation): Fix docute version requested from unpkg (Last compatible v3.4.12) (#418) Hi! The documentation is not working, because **docute** version changed and now the module is exported as "Docute" and not "docute" (docute last version is 4 and the documentation is requesting the latest version of docute, but the documentation works with docute 3) So I added the specific version of docute to render the documentation. Hope it helps you! ``` ### Fix or Enhancement? Its a FIX! - [ Ok ] All tests passed ### Environment - OS: Ubuntu 16.0.4 - NPM Version: 6.1.0 ``` --- docs/index.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/index.html b/docs/index.html index 2a0b9c2f..cb4032fd 100644 --- a/docs/index.html +++ b/docs/index.html @@ -6,14 +6,14 @@ vue-chartjs documentation - +
    - - + + From f04a0ec69b8e9ce9962426471759497f907197f0 Mon Sep 17 00:00:00 2001 From: Mattia Trapani Date: Mon, 22 Oct 2018 15:56:11 +0200 Subject: [PATCH 08/12] chore(docs): Add missing commas in example snippet (#423) Just a quick fix in a snippet --- docs/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/README.md b/docs/README.md index ff10f386..ab3aff1e 100644 --- a/docs/README.md +++ b/docs/README.md @@ -86,10 +86,10 @@ import { Line } from 'vue-chartjs' export default { extends: Line, - props: ['datasets', 'options'] + props: ['datasets', 'options'], data: () => ({ htmlLegend: null - }) + }), mounted () { this.renderChart(this.datasets, this.options) this.htmlLegend = this.generateLegend() From 9d370451cb7e7fb9dc7db644d46ee96c8b4e1058 Mon Sep 17 00:00:00 2001 From: Jakub Date: Wed, 7 Nov 2018 11:57:36 +0100 Subject: [PATCH 09/12] Create CNAME --- docs/CNAME | 1 + 1 file changed, 1 insertion(+) create mode 100644 docs/CNAME diff --git a/docs/CNAME b/docs/CNAME new file mode 100644 index 00000000..c915bec1 --- /dev/null +++ b/docs/CNAME @@ -0,0 +1 @@ +vue-chartjs.org \ No newline at end of file From dac8bcf7500a9ce81ec11b2b82ed86546de2c65f Mon Sep 17 00:00:00 2001 From: Romain Cascino Date: Tue, 27 Nov 2018 16:22:20 +0700 Subject: [PATCH 10/12] docs: Fix typo (#440) ### Fix or Enhancement? - [x] All tests passed ### Environment - OS: Write here - NPM Version: Write here --- docs/guide/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guide/README.md b/docs/guide/README.md index 31a16c33..ce7b3952 100644 --- a/docs/guide/README.md +++ b/docs/guide/README.md @@ -256,7 +256,7 @@ watch: { } ``` -## Exampels +## Examples ### Chart with props From acd001b9759d6e990028a8d196aa1a2a27fb1080 Mon Sep 17 00:00:00 2001 From: Timi Omoyeni Date: Tue, 27 Nov 2018 10:23:23 +0100 Subject: [PATCH 11/12] docs: Update README.md (#447) corrected typo in template warning ### Fix or Enhancement? - [ ] All tests passed ### Environment - OS: Write here - NPM Version: Write here --- docs/guide/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/guide/README.md b/docs/guide/README.md index ce7b3952..accb1485 100644 --- a/docs/guide/README.md +++ b/docs/guide/README.md @@ -89,7 +89,7 @@ export default { ``` ::: danger Template Tag can not be merged -Do not include the `