Skip to content

Commit 4b363b3

Browse files
aperturelessapertureless
authored
Merge pull request #213 from tesarwijaya/id-docs
Add id docs readme support
2 parents b46d193 + a659391 commit 4b363b3

File tree

2 files changed

+361
-1
lines changed

2 files changed

+361
-1
lines changed

‎docs/config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ const langs = [
55
{title: '日本語', path: '/ja/', matchPath: /^\/ja/},
66
{title: 'Português do Brasil', path: '/pt-br/', matchPath: /^\/pt-br/},
77
{title: '中文(简体)', path: '/zh-cn/', matchPath: /^\/zh-cn/},
8-
{title: 'Русский', path: '/ru/', matchPath: /^\/ru/}
8+
{title: 'Русский', path: '/ru/', matchPath: /^\/ru/},
9+
{title: 'Bahasa Indonesia', path: '/id/', matchPath: /^\/ru/}
910
]
1011

1112
docute.init({

‎docs/id/README.md‎

Lines changed: 359 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,359 @@
1+
---
2+
search: id
3+
---
4+
5+
# vue-chartjs
6+
**vue-chartjs** adalah wrapper [Chart.js](https://github.com/chartjs/Chart.js) dalam vue. Kamu dapat dengan mudah membuat komponen chart reusable.
7+
8+
## Pengenalan
9+
`vue-chartjs` memungkinkan kamu untuk menggunakan chart.js tanpa usaha lebih didalam vue. Sempurna untuk orang-orang yang membutuhkan bagan/chart simpel dengan cepat.
10+
11+
Flexibel karena langsung menampilkan objek chart.js.
12+
13+
14+
## Instalasi
15+
Jika kamu menggunakan Vue.js 2+:
16+
17+
`yarn add vue-chartjs chart.js`
18+
19+
Jika menggunakan vue 1.x gunakan tag `legacy`. versi vue 1 sudah tidak diurus lagi.
20+
21+
`yarn add vue-chartjs@legacy`
22+
23+
## Mulai Cepat
24+
25+
Kamu perlu untuk meng-import base chart dan meng-extend-nya. Dengan cara ini akan lebih fleksibel ketika bekerja dengan data yang berbeda.
26+
Kamu dapat melakukan enkapsulasi komponen-komponen dan menggunakan props untuk menyampaikan data atau bisa juga dengan menginputkan langsung didalam komponen. Namun komponenmu tidak reuseable.
27+
28+
Kamu bisa meng-import seluruh package atau modul-modul terpisah.
29+
30+
```javascript
31+
// CommitChart.js
32+
import { Bar } from 'vue-chartjs'
33+
34+
export default Bar.extend({
35+
mounted () {
36+
// Overwriting base render method with actual data.
37+
this.renderChart(data, options)
38+
}
39+
})
40+
```
41+
42+
Kamu dapat melewatkan dua argumen pada `renderChart()`:
43+
44+
- Objek Data
45+
- Objek Opsi
46+
47+
### Data object
48+
49+
Objek data:
50+
51+
```javascript
52+
{
53+
labels: ['January', 'February'],
54+
datasets: [
55+
{
56+
label: 'GitHub Commits',
57+
backgroundColor: '#f87979',
58+
data: [40, 20]
59+
}
60+
]
61+
}
62+
```
63+
64+
Untuk keterangan lebih lanjut dapat dilihat di dokumentasi [Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data).
65+
66+
## Props
67+
68+
Terdapat beberapa props standar yang didefinisikan didalam BaseChart. Karena menggunakan `extend()`, props-props tersebut *tidak terlihat*, Namun kamu tetap bisa menulis ulang:
69+
70+
| Prop | Description |
71+
|---|---|
72+
| width | lebar chart |
73+
| height | tinggi chart |
74+
| chart-id | id canvas |
75+
| css-classes | String dengan kelas css mengelilingi div |
76+
| styles | Objek dengan style css mengelilingi div |
77+
78+
## Contoh
79+
80+
Berikut adalah beberapa contoh penggunaan
81+
82+
### Chart dengan props
83+
84+
Kamu dapat membuat props data dan opsi untuk melewatkan data pada chart.
85+
86+
```javascript
87+
// LineChart.js
88+
import { Line } from 'vue-chartjs'
89+
90+
export default Line.extend({
91+
props: ['data', 'options'],
92+
mounted () {
93+
this.renderChart(this.data, this.options)
94+
}
95+
})
96+
```
97+
98+
Setelah kamu menambahkannya kamu dapat menggunakannya seperti biasa:
99+
100+
```html
101+
<line-chart :data="{your data object}" :options="{your options}"></line-chart>
102+
```
103+
104+
Jika kamu ingin mengatur tinggi dan lebar:
105+
106+
```html
107+
<line-chart
108+
:data="{your data object}"
109+
:options="{responsive: false, maintainAspectRatio: false}"
110+
:width="400"
111+
:height="200"
112+
>
113+
</line-chart>
114+
```
115+
116+
<p class="warning">
117+
Perlu diingat, kamu perlu untuk mengatur `responsive: false` agaar dapat mengatur `width` dan `height`.
118+
</p>
119+
120+
### Chart dengan data lokal
121+
122+
```javascript
123+
import {Bar} from 'vue-chartjs'
124+
125+
export default Bar.extend({
126+
data () {
127+
return {
128+
datacollection: {
129+
labels: ['January', 'February'],
130+
datasets: [
131+
{
132+
label: 'Data One',
133+
backgroundColor: '#f87979',
134+
data: [40, 20]
135+
}
136+
]
137+
}
138+
}
139+
},
140+
mounted () {
141+
this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
142+
}
143+
})
144+
```
145+
146+
### Reusable Komponen
147+
148+
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.
149+
150+
## Reactive Data
151+
152+
Chart.js tidak menyediakan live update jika kamu mengubah datasets. Akan tetapi `vue-chartjs` menyediakan 2 mixins untuk melakukannya.
153+
154+
- `reactiveProp`
155+
- `reactiveData`
156+
157+
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.
158+
159+
`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.
160+
161+
```javascript
162+
data () {
163+
return {
164+
chartData: null
165+
}
166+
}
167+
```
168+
169+
### Contoh
170+
171+
**LineChart.js**
172+
```javascript
173+
import { Line, mixins } from 'vue-chartjs'
174+
const { reactiveProp } = mixins
175+
176+
export default Line.extend({
177+
mixins: [reactiveProp],
178+
props: ['options'],
179+
mounted () {
180+
// this.chartData is created in the mixin.
181+
// If you want to pass options please create a local options object
182+
this.renderChart(this.chartData, this.options)
183+
}
184+
})
185+
```
186+
187+
**RandomChart.vue**
188+
189+
```javascript
190+
<template>
191+
<div class="small">
192+
<line-chart :chart-data="datacollection"></line-chart>
193+
<button @click="fillData()">Randomize</button>
194+
</div>
195+
</template>
196+
197+
<script>
198+
import LineChart from './LineChart.js'
199+
200+
export default {
201+
components: {
202+
LineChart
203+
},
204+
data () {
205+
return {
206+
datacollection: null
207+
}
208+
},
209+
mounted () {
210+
this.fillData()
211+
},
212+
methods: {
213+
fillData () {
214+
this.datacollection = {
215+
labels: [this.getRandomInt(), this.getRandomInt()],
216+
datasets: [
217+
{
218+
label: 'Data One',
219+
backgroundColor: '#f87979',
220+
data: [this.getRandomInt(), this.getRandomInt()]
221+
}, {
222+
label: 'Data One',
223+
backgroundColor: '#f87979',
224+
data: [this.getRandomInt(), this.getRandomInt()]
225+
}
226+
]
227+
}
228+
},
229+
getRandomInt () {
230+
return Math.floor(Math.random() * (50 - 5 + 1)) + 5
231+
}
232+
}
233+
}
234+
</script>
235+
236+
<style>
237+
.small {
238+
max-width: 600px;
239+
margin: 150px auto;
240+
}
241+
</style>
242+
```
243+
244+
<p class="warning">
245+
⚠ Perhatian: jika kamu memutasi data didalam komponen parent dan melewatkannya pada child komponen chart perlu diingat batasan javascript.
246+
Info lebih lanjut [issue#44](https://github.com/apertureless/vue-chartjs/issues/44)
247+
</p>
248+
249+
### Batasan
250+
<ul>
251+
<li>[Caveats](https://vuejs.org/v2/guide/list.html#Caveats)</li>
252+
<li>[Change-Detection-Caveats](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)</li>
253+
<li>[vm.$watch](https://vuejs.org/v2/api/#vm-watch)</li>
254+
</ul>
255+
256+
## Objek Chart.js
257+
258+
Suatu ketika kamu membutuhkan kontrol chart.js. Kamu dapat mengaksesnya dengan `this._chart`
259+
260+
## Inline plugins
261+
262+
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)
263+
264+
If you want to add inline plugins, `vue-chartjs` exposes a helper method called `addPlugin()`
265+
You should call `addPlugin()` before the `renderChart()` method.
266+
Jika kamu ingin menambahkan plugin inline, `vue-chartjs` menyediakan method helper `addPlugin()` kamu harus memanggil `addPlugin()` sebelum method `renderChart()`.
267+
268+
### Contoh
269+
270+
```javascript
271+
mounted () {
272+
this.addPlugin({
273+
id: 'my-plugin',
274+
beforeInit: function (chart) {
275+
....
276+
}
277+
})
278+
}
279+
```
280+
281+
## Charts yang Tersedia
282+
283+
### Bar Chart
284+
<p class="tip">
285+
Terdapat dua versi bar chart. `{Bar}` dan `{HorizontalBar}`
286+
</p>
287+
288+
![Bar](assets/bar.png)
289+
### Line Chart
290+
291+
![Line](assets/line.png)
292+
293+
### Doughnut
294+
295+
![Doughnut](assets/doughnut.png)
296+
297+
### Pie
298+
299+
![Pie](assets/pie.png)
300+
301+
### Radar
302+
303+
![Pie](assets/radar.png)
304+
305+
### Polar Area
306+
307+
![Pie](assets/polar.png)
308+
309+
### Bubble
310+
311+
![Bubble](assets/bubble.png)
312+
313+
### Scatter
314+
315+
This chart has a different data structure then the others. Right now the reactive Mixins are not working for this chart type.
316+
Chart ini memiliki struktur data yang berbeda dengan yang lainnya. Untuk sekarang reactive mixins tidak dapat bekerja pada tipe chart ini.
317+
318+
![Scatter](assets/scatter.png)
319+
320+
321+
## Penjelasan Build
322+
Terdapat tiga jenis titik entri. Tergantung setup mana yang kamu gunakan. Dependensi-dependensi telah di-bundle atau require sebagai peerDependency.
323+
324+
- Browser
325+
- Browserify / Webpack 1
326+
- Webpack 2
327+
328+
329+
| Build | Chart.js | Vue.js |
330+
|---|---|---|
331+
| vue-chartjs.full.js | Bundled | Bundled |
332+
| vue-chartjs.full.min.js | Bundled | Bundled |
333+
| vue-chartjs.js | peerDependency | peerDependency |
334+
| vue-chartjs.min.js | peerDependency | peerDependency |
335+
| es/index* | peerDependency | peerDependency |
336+
337+
### Browser
338+
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.
339+
340+
341+
### Browserify / Webpack 1
342+
343+
Jika kamu menggunakan GUlp, Browserify atau Webpack 1 entri yang digunakan adalah `vue-chartjs.js` dimana telah di__transpile__ dan di__bundle__ UMD Module.
344+
345+
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.
346+
347+
### Webpack 2
348+
Jika kamu menggunakan Webpack 2 secara otomatis akan menggunakan titik entri `jsnext:main` / `module`. Di `es/index.js`
349+
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.
350+
351+
## Sumber-sumber
352+
353+
Kamu dapat menemukan sumber-sumber seperti tutrial bagaimana cara untuk menggunakan `vue-chartjs`
354+
355+
- [Using vue-chartjs with WordPress](https://medium.com/@apertureless/wordpress-vue-and-chart-js-6b61493e289f)
356+
- [Create stunning Charts with Vue and Chart.js](https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a)
357+
- [Let’s Build a Web App with Vue, Chart.js and an API Part I](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-544eb81c4b44)
358+
- [Let’s Build a Web App with Vue, Chart.js and an API Part II](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-part-ii-39781b1d5acf)
359+
- [Build a realtime chart with VueJS and Pusher](https://blog.pusher.com/build-realtime-chart-with-vuejs-pusher/)

0 commit comments

Comments
 (0)