Compare commits
136 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
030ba0c035 | ||
|
|
ab3321001b | ||
|
|
0f6e04cd5e | ||
|
|
cc869c979d | ||
|
|
8b6afd1e70 | ||
|
|
43363fc2ae | ||
|
|
29d1ca3428 | ||
|
|
2e737e9394 | ||
|
|
5da4b6165e | ||
|
|
1f522e7fd2 | ||
|
|
8324f2c578 | ||
|
|
ac09ae744e | ||
|
|
39d0b4b95c | ||
|
|
dbce4d7c2c | ||
|
|
d49b06f92a | ||
|
|
5cc8f0a878 | ||
|
|
b762d400d2 | ||
|
|
ceb5988e1c | ||
|
|
d60c63edbb | ||
|
|
da6789d4ba | ||
|
|
9a780d9922 | ||
|
|
be6f3956cf | ||
|
|
aeee51dfc8 | ||
|
|
92c05b838c | ||
|
|
4be1e8f9da | ||
|
|
3e641ce620 | ||
|
|
fae16ff894 | ||
|
|
c325e573a2 | ||
|
|
78c212f116 | ||
|
|
3e1b5afe7e | ||
|
|
47c1543e6c | ||
|
|
25d3766687 | ||
|
|
1c1ad3c146 | ||
|
|
2791e8ed61 | ||
|
|
06cb7e79f6 | ||
|
|
6211d034e6 | ||
|
|
f32d989334 | ||
|
|
ba11190e39 | ||
|
|
7234292a49 | ||
|
|
c91fee9a1a | ||
|
|
7e7e5d0028 | ||
|
|
2ab4cacf12 | ||
|
|
227f698647 | ||
|
|
8d893eb8b2 | ||
|
|
1b527e9c67 | ||
|
|
3103d5acd9 | ||
|
|
2c8d1169e8 | ||
|
|
6ac651e55a | ||
|
|
129a52e4d7 | ||
|
|
11015b4080 | ||
|
|
56edbf2bd4 | ||
|
|
77c63d4dd4 | ||
|
|
14cb2f9e62 | ||
|
|
9e6b407a1e | ||
|
|
94dcc0fd0e | ||
|
|
cb51f2a187 | ||
|
|
770ff26be4 | ||
|
|
13e783c29d | ||
|
|
b0b8d88794 | ||
|
|
dc8e198f10 | ||
|
|
348de825bf | ||
|
|
87fb35749e | ||
|
|
0f697a2bc5 | ||
|
|
8c670775f5 | ||
|
|
d6ff509dc0 | ||
|
|
94ce9f9b96 | ||
|
|
5fcf1eb79c | ||
|
|
50f5aed6d5 | ||
|
|
2573f438ac | ||
|
|
a982fde310 | ||
|
|
2894a1d64c | ||
|
|
a00fd1c7a1 | ||
|
|
db3bef1bae | ||
|
|
acc8904c54 | ||
|
|
e7c1158c25 | ||
|
|
8e305d8c46 | ||
|
|
3fc76050f6 | ||
|
|
e2a8f3ca3c | ||
|
|
3ecd0c8908 | ||
|
|
1c2bf08111 | ||
|
|
d6a53a6bd6 | ||
|
|
6913312be9 | ||
|
|
e0fb6ec8f3 | ||
|
|
2a5512ab9a | ||
|
|
71e032db7d | ||
|
|
818559f829 | ||
|
|
374d978577 | ||
|
|
fe85d47b61 | ||
|
|
447223cbef | ||
|
|
504c0b1d91 | ||
|
|
8795e456f1 | ||
|
|
a71429e146 | ||
|
|
90f2ffd63c | ||
|
|
ea1f943933 | ||
|
|
7367ea115d | ||
|
|
eec2c402b6 | ||
|
|
9bd7712f3e | ||
|
|
fcaa3dee91 | ||
|
|
1bb567e074 | ||
|
|
e38e208532 | ||
|
|
9238f1c8cd | ||
|
|
37d9a6f21f | ||
|
|
26dea95644 | ||
|
|
6baa5d097b | ||
|
|
d735af866a | ||
|
|
c24dc84e2f | ||
|
|
d3f7058685 | ||
|
|
6bdda62c62 | ||
|
|
491b2514cd | ||
|
|
819b96b06a | ||
|
|
ada0fab17c | ||
|
|
1a22bae5ba | ||
|
|
d849706b9a | ||
|
|
ad0e0de561 | ||
|
|
3da3fccc11 | ||
|
|
562539a3a5 | ||
|
|
6d8513ff75 | ||
|
|
7953e14479 | ||
|
|
f58c1f5fd8 | ||
|
|
e57c4b1bfd | ||
|
|
720d159704 | ||
|
|
412f1f7b81 | ||
|
|
42fbddd793 | ||
|
|
1c76fdeff9 | ||
|
|
e8379c71ec | ||
|
|
6bbb438237 | ||
|
|
0c96745681 | ||
|
|
b5beff4670 | ||
|
|
6ef85af85a | ||
|
|
6fcf7c17b3 | ||
|
|
2f74998231 | ||
|
|
8306116322 | ||
|
|
938b8f389f | ||
|
|
dca9956568 | ||
|
|
eb457b4de2 | ||
|
|
9ab63c9f22 |
6
.github/ISSUE_TEMPLATE.md
vendored
@@ -9,6 +9,6 @@
|
||||
|
||||
|
||||
### Environment
|
||||
- OS: Write here
|
||||
- NPM Version: Write here
|
||||
|
||||
- vue.js version: <version here>
|
||||
- vue-chart.js version: <version here>
|
||||
- npm version: <version here>
|
||||
|
||||
2
.gitignore
vendored
@@ -4,3 +4,5 @@ npm-debug.log
|
||||
selenium-debug.log
|
||||
test/unit/coverage
|
||||
test/e2e/reports
|
||||
dist/
|
||||
es/
|
||||
|
||||
214
CHANGELOG.md
@@ -1,12 +1,220 @@
|
||||
# Change Log
|
||||
|
||||
## [Unreleased](https://github.com/apertureless/vue-chartjs/tree/HEAD)
|
||||
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.5...HEAD)
|
||||
## [v2.6.4](https://github.com/apertureless/vue-chartjs/tree/v2.6.4) (2017-06-04)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.3...v2.6.4)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Transition leave-active-class not working [\#117](https://github.com/apertureless/vue-chartjs/issues/117)
|
||||
- chartOptions reactivity [\#116](https://github.com/apertureless/vue-chartjs/issues/116)
|
||||
- Cannot switch off legend [\#114](https://github.com/apertureless/vue-chartjs/issues/114)
|
||||
- run error on my mac pro [\#113](https://github.com/apertureless/vue-chartjs/issues/113)
|
||||
- Update install instructions in docs [\#112](https://github.com/apertureless/vue-chartjs/issues/112)
|
||||
- Typo in docs [\#111](https://github.com/apertureless/vue-chartjs/issues/111)
|
||||
- Charts are given a fixed width, even when they are set to be responsive [\#108](https://github.com/apertureless/vue-chartjs/issues/108)
|
||||
- Use Reactive Data with \<script\> version of vue-chartjs [\#107](https://github.com/apertureless/vue-chartjs/issues/107)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- Fix typo in docs [\#115](https://github.com/apertureless/vue-chartjs/pull/115) ([euledge](https://github.com/euledge))
|
||||
- :memo: Add pt-br readme support [\#110](https://github.com/apertureless/vue-chartjs/pull/110) ([kimuraz](https://github.com/kimuraz))
|
||||
- Fix reactive mixins animation re-rendering issue. [\#109](https://github.com/apertureless/vue-chartjs/pull/109) ([MuseofMoose](https://github.com/MuseofMoose))
|
||||
|
||||
## [v2.6.3](https://github.com/apertureless/vue-chartjs/tree/v2.6.3) (2017-05-14)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.2...v2.6.3)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Reactivity of Options [\#106](https://github.com/apertureless/vue-chartjs/issues/106)
|
||||
- Do not use built-in or reserved HTML elements as component id: MenuItem [\#104](https://github.com/apertureless/vue-chartjs/issues/104)
|
||||
- Is it possible to use with axios? [\#103](https://github.com/apertureless/vue-chartjs/issues/103)
|
||||
- How to change momentjs locale for time scale? [\#101](https://github.com/apertureless/vue-chartjs/issues/101)
|
||||
- It seems that the reactiveProp couldn't let the chart update itself [\#99](https://github.com/apertureless/vue-chartjs/issues/99)
|
||||
- Why do I need both vue-chartjs chart.js? [\#98](https://github.com/apertureless/vue-chartjs/issues/98)
|
||||
- vue-chartjs not working with lodash-webpack-plugin installed [\#97](https://github.com/apertureless/vue-chartjs/issues/97)
|
||||
- multi lines with same options [\#95](https://github.com/apertureless/vue-chartjs/issues/95)
|
||||
- Zoom And Pan Options in Vue Charts [\#94](https://github.com/apertureless/vue-chartjs/issues/94)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- Update README.md [\#105](https://github.com/apertureless/vue-chartjs/pull/105) ([guilherfp](https://github.com/guilherfp))
|
||||
- translated README.md into Japanese [\#102](https://github.com/apertureless/vue-chartjs/pull/102) ([euledge](https://github.com/euledge))
|
||||
- add CDNJS version badge in README.md [\#100](https://github.com/apertureless/vue-chartjs/pull/100) ([extend1994](https://github.com/extend1994))
|
||||
|
||||
## [v2.6.2](https://github.com/apertureless/vue-chartjs/tree/v2.6.2) (2017-04-29)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.1...v2.6.2)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- ⬆️ Update dev dependencies [\#96](https://github.com/apertureless/vue-chartjs/pull/96) ([apertureless](https://github.com/apertureless))
|
||||
|
||||
## [v2.6.1](https://github.com/apertureless/vue-chartjs/tree/v2.6.1) (2017-04-21)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.0...v2.6.1)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Not understanding options [\#93](https://github.com/apertureless/vue-chartjs/issues/93)
|
||||
- A Gotcha on component creation. [\#92](https://github.com/apertureless/vue-chartjs/issues/92)
|
||||
- Error when building: 'This dependency was not found: chartjs' [\#91](https://github.com/apertureless/vue-chartjs/issues/91)
|
||||
- Chart does not render inside conditional [\#90](https://github.com/apertureless/vue-chartjs/issues/90)
|
||||
- Unable to add to material-vue layout [\#87](https://github.com/apertureless/vue-chartjs/issues/87)
|
||||
|
||||
## [v2.6.0](https://github.com/apertureless/vue-chartjs/tree/v2.6.0) (2017-04-09)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.0-rc1...v2.6.0)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- how to export to image or pdf [\#89](https://github.com/apertureless/vue-chartjs/issues/89)
|
||||
- 🙏🏻 Testing 2.6.0-rc1 [\#88](https://github.com/apertureless/vue-chartjs/issues/88)
|
||||
- Adding annotation plugin functionality [\#86](https://github.com/apertureless/vue-chartjs/issues/86)
|
||||
|
||||
## [v2.6.0-rc1](https://github.com/apertureless/vue-chartjs/tree/v2.6.0-rc1) (2017-04-05)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.6...v2.6.0-rc1)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Overwrite prop [\#85](https://github.com/apertureless/vue-chartjs/issues/85)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- Update release build to not include externals. [\#84](https://github.com/apertureless/vue-chartjs/pull/84) ([gcoguiec](https://github.com/gcoguiec))
|
||||
|
||||
## [v2.5.6](https://github.com/apertureless/vue-chartjs/tree/v2.5.6) (2017-03-29)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.5...v2.5.6)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Can not render two lines at the same time [\#83](https://github.com/apertureless/vue-chartjs/issues/83)
|
||||
- Suggestion: Chart not re-rendering on window resize [\#82](https://github.com/apertureless/vue-chartjs/issues/82)
|
||||
- How can you change legend label colour? [\#81](https://github.com/apertureless/vue-chartjs/issues/81)
|
||||
- Doughnut with text in the middle [\#80](https://github.com/apertureless/vue-chartjs/issues/80)
|
||||
- Set chart width without affecting labels [\#79](https://github.com/apertureless/vue-chartjs/issues/79)
|
||||
- Loading data from server and displaying [\#78](https://github.com/apertureless/vue-chartjs/issues/78)
|
||||
- Why separate .js files in the examples? [\#77](https://github.com/apertureless/vue-chartjs/issues/77)
|
||||
- An in-range update of vue is breaking the build 🚨 [\#76](https://github.com/apertureless/vue-chartjs/issues/76)
|
||||
- An in-range update of vue-template-compiler is breaking the build 🚨 [\#75](https://github.com/apertureless/vue-chartjs/issues/75)
|
||||
- Uncaught TypeError: Cannot read property 'chartId' of undefined [\#74](https://github.com/apertureless/vue-chartjs/issues/74)
|
||||
- TypeError: child.\_updateFromParent is not a function [\#72](https://github.com/apertureless/vue-chartjs/issues/72)
|
||||
- Styling componement's surrounding \<div\> [\#70](https://github.com/apertureless/vue-chartjs/issues/70)
|
||||
|
||||
## [v2.5.5](https://github.com/apertureless/vue-chartjs/tree/v2.5.5) (2017-03-24)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.4...v2.5.5)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Access chartjs methods [\#71](https://github.com/apertureless/vue-chartjs/issues/71)
|
||||
- Pass Reactive data into Scatterplot [\#69](https://github.com/apertureless/vue-chartjs/issues/69)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- Removed -s flag from yarn command in docs [\#73](https://github.com/apertureless/vue-chartjs/pull/73) ([mika76](https://github.com/mika76))
|
||||
|
||||
## [v2.5.4](https://github.com/apertureless/vue-chartjs/tree/v2.5.4) (2017-03-19)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.3...v2.5.4)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- An in-range update of eslint-config-standard is breaking the build 🚨 [\#68](https://github.com/apertureless/vue-chartjs/issues/68)
|
||||
- Using data from vuex to populate a line graph [\#67](https://github.com/apertureless/vue-chartjs/issues/67)
|
||||
- How to use without babel/webpack? [\#66](https://github.com/apertureless/vue-chartjs/issues/66)
|
||||
- The vue-chartjs/src entry point is still creating a new vue instance. [\#55](https://github.com/apertureless/vue-chartjs/issues/55)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- Update dependencies to enable Greenkeeper 🌴 [\#65](https://github.com/apertureless/vue-chartjs/pull/65) ([greenkeeper[bot]](https://github.com/apps/greenkeeper))
|
||||
|
||||
## [v2.5.3](https://github.com/apertureless/vue-chartjs/tree/v2.5.3) (2017-03-17)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.2...v2.5.3)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Cannot modify styling using options [\#60](https://github.com/apertureless/vue-chartjs/issues/60)
|
||||
|
||||
## [v2.5.2](https://github.com/apertureless/vue-chartjs/tree/v2.5.2) (2017-03-14)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.1...v2.5.2)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- TypeError: child.\_updateFromParent is not a function [\#62](https://github.com/apertureless/vue-chartjs/issues/62)
|
||||
- child.\_updateFromParent is not a function [\#59](https://github.com/apertureless/vue-chartjs/issues/59)
|
||||
- dependency was not found [\#58](https://github.com/apertureless/vue-chartjs/issues/58)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- Develop [\#63](https://github.com/apertureless/vue-chartjs/pull/63) ([apertureless](https://github.com/apertureless))
|
||||
- Fix typo for legacy tag [\#61](https://github.com/apertureless/vue-chartjs/pull/61) ([kylestev](https://github.com/kylestev))
|
||||
|
||||
## [v2.5.1](https://github.com/apertureless/vue-chartjs/tree/v2.5.1) (2017-03-11)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.0...v2.5.1)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Lines are looking weird. [\#57](https://github.com/apertureless/vue-chartjs/issues/57)
|
||||
- Working with objects [\#48](https://github.com/apertureless/vue-chartjs/issues/48)
|
||||
- Mixins don't seem to trigger a refresh of the chart [\#44](https://github.com/apertureless/vue-chartjs/issues/44)
|
||||
|
||||
## [v2.5.0](https://github.com/apertureless/vue-chartjs/tree/v2.5.0) (2017-03-08)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.4.1...v2.5.0)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- UglifyJs is not happy with versions after 2.3.8 [\#54](https://github.com/apertureless/vue-chartjs/issues/54)
|
||||
- Why "main" in Package.json is "src/index.js" and not "dist/vue-chartjs.js" [\#53](https://github.com/apertureless/vue-chartjs/issues/53)
|
||||
- Adding static data and dynamic data at the same time. [\#52](https://github.com/apertureless/vue-chartjs/issues/52)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- separate HorizontalBar component added [\#56](https://github.com/apertureless/vue-chartjs/pull/56) ([imbashamba](https://github.com/imbashamba))
|
||||
|
||||
## [v2.4.1](https://github.com/apertureless/vue-chartjs/tree/v2.4.1) (2017-03-04)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.4.0...v2.4.1)
|
||||
|
||||
## [v2.4.0](https://github.com/apertureless/vue-chartjs/tree/v2.4.0) (2017-03-03)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.9...v2.4.0)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- Added browserify support [\#51](https://github.com/apertureless/vue-chartjs/pull/51) ([craigh411](https://github.com/craigh411))
|
||||
|
||||
## [v2.3.9](https://github.com/apertureless/vue-chartjs/tree/v2.3.9) (2017-03-01)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.8...v2.3.9)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Add src folder to package.json "files" and make main "src/index.js" [\#49](https://github.com/apertureless/vue-chartjs/issues/49)
|
||||
- Unable to refresh [\#41](https://github.com/apertureless/vue-chartjs/issues/41)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- 🐛 Fix \#49 [\#50](https://github.com/apertureless/vue-chartjs/pull/50) ([apertureless](https://github.com/apertureless))
|
||||
|
||||
## [v2.3.8](https://github.com/apertureless/vue-chartjs/tree/v2.3.8) (2017-03-01)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.6...v2.3.8)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Colors of dynamically added bars in bar graph are the default color instead of specified color [\#42](https://github.com/apertureless/vue-chartjs/issues/42)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- Feature/documentation [\#47](https://github.com/apertureless/vue-chartjs/pull/47) ([apertureless](https://github.com/apertureless))
|
||||
- ⬆️ Update dependencies [\#46](https://github.com/apertureless/vue-chartjs/pull/46) ([apertureless](https://github.com/apertureless))
|
||||
- 📝 Update github issue template [\#45](https://github.com/apertureless/vue-chartjs/pull/45) ([apertureless](https://github.com/apertureless))
|
||||
|
||||
## [v2.3.6](https://github.com/apertureless/vue-chartjs/tree/v2.3.6) (2017-02-22)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.5...v2.3.6)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Please update1.1.3 chartjs to 2.5.0 [\#40](https://github.com/apertureless/vue-chartjs/issues/40)
|
||||
- Vue-chartjs components creating a second Vue runtime [\#39](https://github.com/apertureless/vue-chartjs/issues/39)
|
||||
- Since last update bar chart will no longer stack [\#38](https://github.com/apertureless/vue-chartjs/issues/38)
|
||||
- barchart 如何横向显示条形图 [\#37](https://github.com/apertureless/vue-chartjs/issues/37)
|
||||
- Animation with reactivity [\#34](https://github.com/apertureless/vue-chartjs/issues/34)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- 🐛 Fix reactiveMixins issue \#42 [\#43](https://github.com/apertureless/vue-chartjs/pull/43) ([apertureless](https://github.com/apertureless))
|
||||
|
||||
## [v2.3.5](https://github.com/apertureless/vue-chartjs/tree/v2.3.5) (2017-02-14)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.4...v2.3.5)
|
||||
|
||||
60
README.md
@@ -6,16 +6,19 @@
|
||||
[](https://codecov.io/gh/apertureless/vue-chartjs)
|
||||
[](https://travis-ci.org/apertureless/vue-chartjs)
|
||||
[](http://packagequality.com/#?package=vue-chartjs)
|
||||
[](https://www.npmjs.com/package/vue-chartjs)
|
||||
[](https://www.npmjs.com/package/vue-chartjs)
|
||||
[](https://gitter.im/vue-chartjs/Lobby)
|
||||
[](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
|
||||
[](https://cdnjs.com/libraries/vue-chartjs)
|
||||
|
||||
# vue-chartjs
|
||||
|
||||
**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in vue. You can easily create reuseable chart components.
|
||||
|
||||
## Demo
|
||||
## Demo & Docs
|
||||
|
||||
[Demo](https://apertureless.github.io/vue-chartjs/)
|
||||
- 📺 [Demo](http://demo.vue-chartjs.org/)
|
||||
- 📖 [Docs](http://www.vue-chartjs.org/)
|
||||
|
||||
### Compatibility
|
||||
|
||||
@@ -30,7 +33,45 @@ If you're looking for v1 check this [branch](https://github.com/apertureless/vue
|
||||
|
||||
## Install
|
||||
|
||||
Simply run `npm install vue-chartjs`
|
||||
Simply run `yarn add vue-chartjs chart.js`
|
||||
|
||||
Or if you want to use it directly in the browser add
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/vue-chartjs@2.6.0/dist/vue-chartjs.full.min.js"></script>
|
||||
```
|
||||
to your scripts. See [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
|
||||
|
||||
## Explanation of Different Builds
|
||||
There are three different entry points. It depends on which build setup do you have. The dependencies are bundled or required as a 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
|
||||
You can use `vue-chartjs` directly in the browser without any build setup. Like in this [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). For this case, please use the `vue-chartjs.full.min.js` which is the minified version. It has Vue.js and Chart.js bundled into it. And bundled to a UMD Module. So you only need that one file.
|
||||
|
||||
|
||||
### Browserify / Webpack 1
|
||||
|
||||
If you're using Gulp, Browserify or Webpack 1 the entry is `vue-chartjs.js` which is __transpiled__ and __bundled__ UMD Module.
|
||||
|
||||
However Vue.js and Chart.js are `deerDependencies` so you have to install them seperately. In most projects you will have `Vue.js` already installed anyways. This way, you can have different versions of Vue.js and Chart.js then in this package.
|
||||
|
||||
### Webpack 2
|
||||
If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
|
||||
It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way you three shaking will work. Like in the bundled version, `Vue.js` and `Chart.js` are `peerDependencies` and need to be installed.
|
||||
|
||||
|
||||
## How to use
|
||||
|
||||
@@ -81,7 +122,7 @@ You can overwrite the default chart options. Just pass the options object as a s
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
props: ["data", "options"],
|
||||
props: ['data', 'options'],
|
||||
mounted () {
|
||||
this.renderChart(this.data, this.options)
|
||||
}
|
||||
@@ -116,6 +157,7 @@ However you can simply implement this by your own or use one of the two mixins w
|
||||
Both are included in the `mixins` module.
|
||||
|
||||
The mixins automatically create `chartData` as a prop or data. And add a watcher. If data has changed, the chart will update.
|
||||
However keep in mind the limitations of vue and javascript for mutations on arrays and objects. More info [here](http://vue-chartjs.org/#/home?id=reactive-data)
|
||||
|
||||
```javascript
|
||||
// MonthlyIncome.js
|
||||
@@ -123,7 +165,7 @@ import { Line, mixins } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
mixins: [mixins.reactiveProp],
|
||||
props: ["chartData", "options"],
|
||||
props: ['chartData', 'options'],
|
||||
mounted () {
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
@@ -141,7 +183,7 @@ import VueCharts from 'vue-chartjs'
|
||||
|
||||
export default VueCharts.Line.extend({
|
||||
mixins: [VueCharts.mixins.reactiveProp],
|
||||
props: ["chartData", "options"],
|
||||
props: ['chartData', 'options'],
|
||||
mounted () {
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
@@ -154,7 +196,7 @@ import { Line, mixins } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
mixins: [mixins.reactiveProp],
|
||||
props: ["chartData", "options"],
|
||||
props: ['chartData', 'options'],
|
||||
mounted () {
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
@@ -168,7 +210,7 @@ const { reactiveProp } = mixins
|
||||
|
||||
export default Line.extend({
|
||||
mixins: [reactiveProp],
|
||||
props: ["chartData", "options"],
|
||||
props: ['chartData', 'options'],
|
||||
mounted () {
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
|
||||
BIN
assets/bar.png
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 95 KiB |
|
Before Width: | Height: | Size: 82 KiB After Width: | Height: | Size: 83 KiB |
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 91 KiB |
BIN
assets/line.png
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 125 KiB |
BIN
assets/pie.png
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 97 KiB |
BIN
assets/polar.png
|
Before Width: | Height: | Size: 140 KiB After Width: | Height: | Size: 200 KiB |
BIN
assets/radar.png
|
Before Width: | Height: | Size: 148 KiB After Width: | Height: | Size: 180 KiB |
@@ -5,7 +5,7 @@ var projectRoot = path.resolve(__dirname, '../')
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
app: './src/index.js'
|
||||
app: './src/main.js'
|
||||
},
|
||||
output: {
|
||||
path: config.build.assetsRoot,
|
||||
|
||||
92
build/webpack.release.full.js
Normal file
@@ -0,0 +1,92 @@
|
||||
var vue = require('vue-loader')
|
||||
var path = require('path')
|
||||
var webpack = require("webpack")
|
||||
var ExtractTextPlugin = require("extract-text-webpack-plugin")
|
||||
var projectRoot = path.resolve(__dirname, '../')
|
||||
var cssLoader = ExtractTextPlugin.extract('style-loader', 'css-loader')
|
||||
const npmCfg = require('../package.json');
|
||||
|
||||
var banner = [
|
||||
npmCfg.name + ' v' + npmCfg.version,
|
||||
'(c) ' + (new Date().getFullYear()) + ' ' + npmCfg.author,
|
||||
npmCfg.homepage
|
||||
].join('\n')
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
'vue-chartjs': './src/index.js'
|
||||
},
|
||||
output: {
|
||||
filename: './dist/[name].full.js',
|
||||
library: 'VueChartJs',
|
||||
libraryTarget: 'umd',
|
||||
umdNamedDefine: true
|
||||
},
|
||||
module: {
|
||||
preLoaders: [
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'eslint',
|
||||
include: projectRoot,
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'eslint',
|
||||
include: projectRoot,
|
||||
exclude: /node_modules/
|
||||
}
|
||||
],
|
||||
loaders: [
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue'
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
exclude: /node_modules/,
|
||||
loader: 'babel'
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
loader: cssLoader
|
||||
},
|
||||
{
|
||||
test: /\.s[a|c]ss$/,
|
||||
loader: ExtractTextPlugin.extract('style-loader','css-loader!sass-loader')
|
||||
},
|
||||
{
|
||||
test: /\.json$/, loader: 'json'
|
||||
}
|
||||
]
|
||||
},
|
||||
eslint: {
|
||||
formatter: require('eslint-friendly-formatter')
|
||||
},
|
||||
babel: {
|
||||
presets: ['es2015'],
|
||||
plugins: ['transform-runtime']
|
||||
},
|
||||
plugins: [
|
||||
new webpack.BannerPlugin(banner)
|
||||
]
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
|
||||
delete module.exports.devtool
|
||||
module.exports.plugins = [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.OccurenceOrderPlugin()
|
||||
// new ExtractTextPlugin('build.css')
|
||||
]
|
||||
}
|
||||
18
build/webpack.release.full.min.js
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
var config = require('./webpack.release.full.js')
|
||||
var webpack = require('webpack')
|
||||
|
||||
config.output.filename = config.output.filename.replace(/\.js$/, '.min.js')
|
||||
|
||||
delete config.devtool
|
||||
|
||||
config.plugins = [
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
sourceMap: false,
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.OccurenceOrderPlugin()
|
||||
]
|
||||
|
||||
module.exports = config
|
||||
@@ -4,6 +4,13 @@ var webpack = require("webpack")
|
||||
var ExtractTextPlugin = require("extract-text-webpack-plugin")
|
||||
var projectRoot = path.resolve(__dirname, '../')
|
||||
var cssLoader = ExtractTextPlugin.extract('style-loader', 'css-loader')
|
||||
const npmCfg = require('../package.json');
|
||||
|
||||
var banner = [
|
||||
npmCfg.name + ' v' + npmCfg.version,
|
||||
'(c) ' + (new Date().getFullYear()) + ' ' + npmCfg.author,
|
||||
npmCfg.homepage
|
||||
].join('\n')
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
@@ -12,7 +19,12 @@ module.exports = {
|
||||
output: {
|
||||
filename: './dist/[name].js',
|
||||
library: 'VueChartJs',
|
||||
libraryTarget: 'umd'
|
||||
libraryTarget: 'umd',
|
||||
umdNamedDefine: true
|
||||
},
|
||||
externals: {
|
||||
'vue': 'vue',
|
||||
'chart.js': 'chart.js'
|
||||
},
|
||||
module: {
|
||||
preLoaders: [
|
||||
@@ -46,6 +58,9 @@ module.exports = {
|
||||
{
|
||||
test: /\.s[a|c]ss$/,
|
||||
loader: ExtractTextPlugin.extract('style-loader','css-loader!sass-loader')
|
||||
},
|
||||
{
|
||||
test: /\.json$/, loader: 'json'
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -55,7 +70,10 @@ module.exports = {
|
||||
babel: {
|
||||
presets: ['es2015'],
|
||||
plugins: ['transform-runtime']
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
new webpack.BannerPlugin(banner)
|
||||
]
|
||||
}
|
||||
|
||||
if (process.env.NODE_ENV === 'production') {
|
||||
|
||||
18
build/webpack.release.min.js
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
var config = require('./webpack.release.js')
|
||||
var webpack = require('webpack')
|
||||
|
||||
config.output.filename = config.output.filename.replace(/\.js$/, '.min.js')
|
||||
|
||||
delete config.devtool
|
||||
|
||||
config.plugins = [
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
sourceMap: false,
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.OccurenceOrderPlugin()
|
||||
]
|
||||
|
||||
module.exports = config
|
||||
43099
dist/vue-chartjs.js
vendored
1
docs/CNAME
Normal file
@@ -0,0 +1 @@
|
||||
vue-chartjs.org
|
||||
319
docs/README.md
Normal file
@@ -0,0 +1,319 @@
|
||||
---
|
||||
search: en
|
||||
---
|
||||
|
||||
# vue-chartjs
|
||||
**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in vue. You can easily create reuseable chart components.
|
||||
|
||||
## Introduction
|
||||
`vue-chartjs` let you use chart.js without much hassle inside vue. It's perfect for people who need simple charts up and running as fast as possible.
|
||||
|
||||
It abstracts the basic logic but exposes the chart.js object to give you the most possible flexibility.
|
||||
|
||||
## Installation
|
||||
If you are working with Vue.js 2+ simple run:
|
||||
|
||||
`yarn add vue-chartjs chart.js`
|
||||
|
||||
If you are using vue 1.x please use the `legacy` tag. However the vue 1 version is not maintained anymore.
|
||||
|
||||
`yarn add vue-chartjs@legacy`
|
||||
|
||||
## Quick Start
|
||||
|
||||
You need to import the base chart and extend it. This gives much more flexibility when working with different data.
|
||||
You can encapsulate your components and use props to pass data or you can directly imput them inside the component. However this way, your component is not reuseable.
|
||||
|
||||
You can import the whole package or each module individual.
|
||||
|
||||
```javascript
|
||||
// CommitChart.js
|
||||
import { Bar } from 'vue-chartjs'
|
||||
|
||||
export default Bar.extend({
|
||||
mounted () {
|
||||
// Overwriting base render method with actual data.
|
||||
this.renderChart(data, options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
You can pass the `renderChart()` method, two arguments:
|
||||
|
||||
- Data object
|
||||
- Options object
|
||||
|
||||
### Data object
|
||||
|
||||
The data object looks like this:
|
||||
|
||||
```javascript
|
||||
{
|
||||
labels: ['January', 'February'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'GitHub Commits',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
For more information take a look at the [Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data) docs.
|
||||
|
||||
## Props
|
||||
|
||||
There are some basic props defined in the BaseCharts. Because you `extend()` them, they are *invisible*, but you can overwrite them:
|
||||
|
||||
| Prop | Description |
|
||||
|---|---|
|
||||
| width | chart width |
|
||||
| height | chart height |
|
||||
| chart-id | id of the canvas |
|
||||
|
||||
|
||||
## Examples
|
||||
|
||||
Here are some exmaples
|
||||
|
||||
### Chart with props
|
||||
|
||||
You can create the data and options props to pass data to the chart.
|
||||
|
||||
```javascript
|
||||
// LineChart.js
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
props: ['data', 'options'],
|
||||
mounted () {
|
||||
this.renderChart(this.data, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
After you add your component you can use it:
|
||||
|
||||
```html
|
||||
<line-chart :data="{your data object}" :options="{your options}"></line-chart>
|
||||
```
|
||||
|
||||
If you want to overwrite the width and height:
|
||||
|
||||
```html
|
||||
<line-chart
|
||||
:data="{your data object}"
|
||||
:options="{responsive: false, maintainAspectRatio: false}"
|
||||
:width="400"
|
||||
:height="200"
|
||||
>
|
||||
</line-chart>
|
||||
```
|
||||
|
||||
<p class="warning">
|
||||
Please keep in mind, that you have to set `responsive: false` to be able to set a fix `width` and `height`.
|
||||
</p>
|
||||
|
||||
### Chart with local data
|
||||
|
||||
```javascript
|
||||
import {Bar} from 'vue-chartjs'
|
||||
|
||||
export default Bar.extend({
|
||||
data () {
|
||||
return {
|
||||
datacollection: {
|
||||
labels: ['January', 'February'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Data One',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
mounted () {
|
||||
this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### Reusebale Components
|
||||
|
||||
If you want to keep your chart components reuseable, it's the best to add a wrapper to them. This way the chart component is only responsable for the pure data representation and the wrapper component for the logic behind it. There are many different usecases and it is different if you're running a Single Page Application or integrate it in for example laravel.
|
||||
|
||||
## Reactive Data
|
||||
|
||||
Chart.js does not provide a live update if you change the datasets. However `vue-chartjs` provides two mixins to achive this.
|
||||
|
||||
- `reactiveProp`
|
||||
- `reactiveData`
|
||||
|
||||
Both mixins to actually the same. Most of the time you will use `reactiveProp`. It extends the logic of your chart component and automatically creates a prop names `chartData` and add a `vue watch` on this prop. On data change, it will either call `update()` if only the data inside the datasets has changed or `renderChart()` if new datasets were added.
|
||||
|
||||
`reactiveData` simply creates a local chartData variable which is not a prop! And add a watcher.
|
||||
This is only usefull, if you need single purpose charts and make an API call inside your chart component.
|
||||
|
||||
```javascript
|
||||
data () {
|
||||
return {
|
||||
chartData: null
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example
|
||||
|
||||
**LineChart.js**
|
||||
```javascript
|
||||
import { Line, mixins } from 'vue-chartjs'
|
||||
const { reactiveProp } = mixins
|
||||
|
||||
export default Line.extend({
|
||||
mixins: [reactiveProp],
|
||||
props: ['options'],
|
||||
mounted () {
|
||||
// this.chartData is created in the mixin
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
**RandomChart.vue**
|
||||
|
||||
```javascript
|
||||
<template>
|
||||
<div class="small">
|
||||
<line-chart :chart-data="datacollection"></line-chart>
|
||||
<button @click="fillData()">Randomize</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LineChart from './LineChart.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LineChart
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
datacollection: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.fillData()
|
||||
},
|
||||
methods: {
|
||||
fillData () {
|
||||
this.datacollection = {
|
||||
labels: [this.getRandomInt(), this.getRandomInt()],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Data One',
|
||||
backgroundColor: '#f87979',
|
||||
data: [this.getRandomInt(), this.getRandomInt()]
|
||||
}, {
|
||||
label: 'Data One',
|
||||
backgroundColor: '#f87979',
|
||||
data: [this.getRandomInt(), this.getRandomInt()]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
getRandomInt () {
|
||||
return Math.floor(Math.random() * (50 - 5 + 1)) + 5
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.small {
|
||||
max-width: 600px;
|
||||
margin: 150px auto;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
<p class="warning">
|
||||
⚠ Attention: If you mutate your data in a parent component and pass it to your child chart component keep in mind the javascript limitiations.
|
||||
More info in this [issue#44](https://github.com/apertureless/vue-chartjs/issues/44)
|
||||
</p>
|
||||
|
||||
### Limitations
|
||||
<ul>
|
||||
<li>[Caveats](https://vuejs.org/v2/guide/list.html#Caveats)</li>
|
||||
<li>[Change-Detection-Caveats](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)</li>
|
||||
<li>[vm.$watch](https://vuejs.org/v2/api/#vm-watch)</li>
|
||||
</ul>
|
||||
|
||||
## Chart.js object
|
||||
|
||||
Sometimes you need more control over chart.js. Thats why you can access the chart.js instance over `this._chart`
|
||||
|
||||
## Available Charts
|
||||
|
||||
### Bar Chart
|
||||
<p class="tip">
|
||||
There are two versions of the Bar chart. `{Bar}` and `{HorizontalBar}`
|
||||
</p>
|
||||
|
||||

|
||||
### Line Chart
|
||||
|
||||

|
||||
|
||||
### Doughnut
|
||||
|
||||

|
||||
|
||||
### Pie
|
||||
|
||||

|
||||
|
||||
### Radar
|
||||
|
||||

|
||||
|
||||
### Polar Area
|
||||
|
||||

|
||||
|
||||
### Bubble
|
||||
|
||||

|
||||
|
||||
|
||||
## Explanation of Different Builds
|
||||
There are three different entry points. It depends on which build setup do you have. The dependencies are bundled or required as a 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
|
||||
You can use `vue-chartjs` directly in the browser without any build setup. Like in this [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). For this case, please use the `vue-chartjs.full.min.js` which is the minified version. It has Vue.js and Chart.js bundled into it. And bundled to a UMD Module. So you only need that one file.
|
||||
|
||||
|
||||
### Browserify / Webpack 1
|
||||
|
||||
If you're using Gulp, Browserify or Webpack 1 the entry is `vue-chartjs.js` which is __transpiled__ and __bundled__ UMD Module.
|
||||
|
||||
However Vue.js and Chart.js are `peerDependencies` so you have to install them seperately. In most projects you will have `Vue.js` already installed anyways. This way, you can have different versions of Vue.js and Chart.js then in this package.
|
||||
|
||||
### Webpack 2
|
||||
If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
|
||||
It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way your tree shaking will work. Like in the bundled version, `Vue.js` and `Chart.js` are `peerDependencies` and need to be installed.
|
||||
78
docs/_landing.html
Normal file
@@ -0,0 +1,78 @@
|
||||
<h1>📈 vue-chartjs</h1>
|
||||
|
||||
<h2>⚡ Easy and beautiful charts with Chart.js and Vue.js</h2>
|
||||
|
||||
<ul class="features">
|
||||
<li>Easy for both beginners and pros 🙌</li>
|
||||
<li>Simple to use, easy to extend 💪</li>
|
||||
<li>With the full power of chart.js 💯</li>
|
||||
</ul>
|
||||
|
||||
<div class="landing-buttons">
|
||||
<a class="landing-button" target="_blank" href="https://github.com/apertureless/vue-chartjs">
|
||||
GitHub
|
||||
</button>
|
||||
|
||||
<a class="landing-button" router-link="/home">
|
||||
Docs
|
||||
</a>
|
||||
|
||||
<a class="landing-button" target="_blank" href="http://demo.vue-chartjs.org/">
|
||||
Demo
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
h1 {
|
||||
margin: 0;
|
||||
margin-top: -50px;
|
||||
font-weight: normal;
|
||||
font-size: 40px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
h2 {
|
||||
margin-top: 20px;
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
.landing {
|
||||
padding: 10px;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-ms-flex-direction: column;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
.features {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 60px;
|
||||
font-size: 16px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
.landing-button {
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 33px;
|
||||
padding: 10px 30px;
|
||||
background-color: white;
|
||||
display: inline-block;
|
||||
margin-right: 20px;
|
||||
color: #333;
|
||||
}
|
||||
.landing-button:hover {
|
||||
border-color: #42b983;
|
||||
color: #42b983;
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
BIN
docs/assets/bar.png
Normal file
|
After Width: | Height: | Size: 95 KiB |
BIN
docs/assets/bubble.png
Normal file
|
After Width: | Height: | Size: 83 KiB |
BIN
docs/assets/doughnut.png
Normal file
|
After Width: | Height: | Size: 91 KiB |
BIN
docs/assets/line.png
Normal file
|
After Width: | Height: | Size: 125 KiB |
BIN
docs/assets/logo.png
Normal file
|
After Width: | Height: | Size: 6.7 KiB |
BIN
docs/assets/pie.png
Normal file
|
After Width: | Height: | Size: 97 KiB |
BIN
docs/assets/polar.png
Normal file
|
After Width: | Height: | Size: 200 KiB |
BIN
docs/assets/radar.png
Normal file
|
After Width: | Height: | Size: 180 KiB |
BIN
docs/assets/vue-chartjs.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
1
docs/assets/vue-chartjs.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><defs><linearGradient id="a" x1="100%" x2="0%" y1="4.18%" y2="65.116%"><stop stop-color="#FAFAFA" offset="0%"/><stop stop-color="#D9D9D9" offset="100%"/></linearGradient><linearGradient id="b" x1="108.208%" x2="5.433%" y1="12.265%" y2="86.92%"><stop stop-color="#FAFAFA" offset="0%"/><stop stop-color="#D9D9D9" offset="100%"/></linearGradient></defs><g fill="none"><path fill="#fff" stroke="#EBEBEB" stroke-width="8.456" d="M128.744 13l99.745 57.46v114.921l-99.745 57.46-99.744-57.46v-114.921z"/><path fill="url(#a)" d="M129 17.941l90.395 51.432-4.057 117.675-86.903 4.653z"/><path fill="url(#b)" d="M129 17.814l-90.961 51.559-3.191 113.538 93.587 8.79z"/><path fill="#41B883" d="M32.955 72.755l95.789 54.681v110.49l-95.789-54.681z"/><path fill="#35495E" d="M224.48 71.627l-95.789 55.809v110.49l95.789-54.681z"/><path fill="#596F85" d="M224.48 71.627l-95.789 55.809v-7.892l88.445-51.299z"/><path fill="#61D09F" d="M32.955 72.755l95.789 54.681v-7.892l-89.575-50.171z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
46
docs/config.js
Normal file
@@ -0,0 +1,46 @@
|
||||
const langs = [
|
||||
{title: 'English', path: '/home', matchPath: /^\/(home|changelog)/},
|
||||
{title: 'Deutsch', path: '/de/', matchPath: /^\/de/},
|
||||
{title: '日本語', path: '/ja/', matchPath: /^\/ja/},
|
||||
{title: 'Português do Brasil', path: '/pt-br/', matchPath: /^\/pt-br/}
|
||||
]
|
||||
|
||||
docute.init({
|
||||
title: 'vue-chartjs docs',
|
||||
landing: true,
|
||||
landing: '_landing.html',
|
||||
repo: 'apertureless/vue-chartjs',
|
||||
twitter: 'apertureless',
|
||||
tocVisibleDepth: 2,
|
||||
'edit-link': 'https://github.com/apertureless/vue-chartjs/blob/master/docs',
|
||||
nav: {
|
||||
default: [
|
||||
{
|
||||
title: 'Home', path: '/home'
|
||||
},
|
||||
{
|
||||
title: 'Changelog', path: '/changelog', source: 'https://raw.githubusercontent.com/apertureless/vue-chartjs/develop/CHANGELOG.md'
|
||||
},
|
||||
{
|
||||
title: 'Languages', type: 'dropdown', items: langs
|
||||
}
|
||||
],
|
||||
'de': [
|
||||
{
|
||||
title: 'Startseite', path: '/de/'
|
||||
}
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
evanyou(),
|
||||
docsearch({
|
||||
apiKey: 'b3544f7387612693644777553675d56a',
|
||||
indexName: 'vue-chartjs',
|
||||
// algolia docsearch allows you to search with tag filter
|
||||
tags: ['en', 'de', 'ja', 'pt-br'],
|
||||
// this plugin does require a url too
|
||||
// where docsearch fetches contents
|
||||
url: 'https://vue-chartjs.org'
|
||||
})
|
||||
],
|
||||
})
|
||||
311
docs/de/README.md
Normal file
@@ -0,0 +1,311 @@
|
||||
---
|
||||
search: de
|
||||
---
|
||||
|
||||
# vue-chartjs
|
||||
**vue-chartjs** ist ein Wrapper für [Chart.js](https://github.com/chartjs/Chart.js) in vue. Man kann einfach wiederverwendbare Chart Components erstellen.
|
||||
|
||||
## Einleitung
|
||||
`vue-chartjs` let you use chart.js without much hassle inside vue. It's perfect for people who need simple charts up and running as fast as possible.
|
||||
|
||||
It abstracts the basic logic but exposes the chart.js object to give you the most possible flexibility.
|
||||
|
||||
## Installation
|
||||
If you are working with Vue.js 2+ simple run:
|
||||
|
||||
`yarn add vue-chartjs chart.js`
|
||||
|
||||
If you are using vue 1.x please use the `legacy` tag. However the vue 1 version is not maintained anymore.
|
||||
|
||||
`yarn add vue-chartjs@legacy`
|
||||
|
||||
## Schnellstart
|
||||
|
||||
You need to import the base chart and extend it. This gives much more flexibility when working with different data.
|
||||
You can encapsulate your components and use props to pass data or you can directly imput them inside the component. However this way, your component is not reuseable.
|
||||
|
||||
You can import the whole package or each module individual.
|
||||
|
||||
```javascript
|
||||
// CommitChart.js
|
||||
import { Bar } from 'vue-chartjs'
|
||||
|
||||
export default Bar.extend({
|
||||
mounted () {
|
||||
// Overwriting base render method with actual data.
|
||||
this.renderChart(data, options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
You can pass the `renderChart()` method, two arguments:
|
||||
|
||||
- Data object
|
||||
- Options object
|
||||
|
||||
### Data object
|
||||
|
||||
The data object looks like this:
|
||||
|
||||
```javascript
|
||||
{
|
||||
labels: ['January', 'February'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'GitHub Commits',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
For more information take a look at the [Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data) docs.
|
||||
|
||||
## Props
|
||||
|
||||
There are some basic props defined in the BaseCharts. Because you `extend()` them, they are *invisible*, but you can overwrite them:
|
||||
|
||||
| Prop | Description |
|
||||
|---|---|
|
||||
| width | chart width |
|
||||
| height | chart height |
|
||||
| chart-id | id of the canvas |
|
||||
|
||||
|
||||
## Examples
|
||||
|
||||
Here are some exmaples
|
||||
|
||||
### Chart with props
|
||||
|
||||
You can create the data and options props to pass data to the chart.
|
||||
|
||||
```javascript
|
||||
// LineChart.js
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
props: ['data', 'options'],
|
||||
mounted () {
|
||||
this.renderChart(this.data, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
After you add your component you can use it:
|
||||
|
||||
```html
|
||||
<line-chart :data="{your data object}" :options="{your options}"></line-chart>
|
||||
```
|
||||
|
||||
If you want to overwrite the width and height:
|
||||
|
||||
```html
|
||||
<line-chart
|
||||
:data="{your data object}"
|
||||
:options="{responsive: false, maintainAspectRatio: false}"
|
||||
:width="400"
|
||||
:height="200"
|
||||
>
|
||||
</line-chart>
|
||||
```
|
||||
|
||||
<p class="warning">
|
||||
Please keep in mind, that you have to set `responsive: false` to be able to set a fix `width` and `height.
|
||||
</p>
|
||||
|
||||
### Chart with local data
|
||||
|
||||
```javascript
|
||||
import {Bar} from 'vue-chartjs'
|
||||
|
||||
export default Bar.extend({
|
||||
data () {
|
||||
return {
|
||||
datacollection: {
|
||||
labels: ['January', 'February'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Data One',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### Reusebale Components
|
||||
|
||||
If you want to keep your chart components reuseable, it's the best to add a wrapper to them. This way the chart component is only responsable for the pure data representation and the wrapper component for the logic behind it. There are many different usecases and it is different if you're running a Single Page Application or integrate it in for example laravel.
|
||||
|
||||
## Reactive Data
|
||||
|
||||
Chart.js does not provide a live update if you change the datasets. However `vue-chartjs` provides two mixins to achive this.
|
||||
|
||||
- `reactiveProp`
|
||||
- `reactiveData`
|
||||
|
||||
Both mixins to actually the same. Most of the time you will use `reactiveProp`. It extends the logic of your chart component and automatically creates a prop names `chartData` and add a `vue watch` on this prop. On data change, it will either call `update()` if only the data inside the datasets has changed or `renderChart()` if new datasets were added.
|
||||
|
||||
`reactiveData` simply creates a local chartData variable which is not a prop! And add a watcher.
|
||||
This is only usefull, if you need single purpose charts and make an API call inside your chart component.
|
||||
|
||||
```javascript
|
||||
data () {
|
||||
return {
|
||||
chartData: null
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example
|
||||
|
||||
**LineChart.js**
|
||||
```javascript
|
||||
import { Line, mixins } from 'vue-chartjs'
|
||||
const { reactiveProp } = mixins
|
||||
|
||||
export default Line.extend({
|
||||
mixins: [reactiveProp],
|
||||
props: ['options'],
|
||||
mounted () {
|
||||
// this.chartData is created in the mixin
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
**RandomChart.vue**
|
||||
|
||||
```javascript
|
||||
<template>
|
||||
<div class="small">
|
||||
<line-chart :chart-data="datacollection"></line-chart>
|
||||
<button @click="fillData()">Randomize</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LineChart from './LineChart.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LineChart
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
datacollection: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.fillData()
|
||||
},
|
||||
methods: {
|
||||
fillData () {
|
||||
this.datacollection = {
|
||||
labels: [this.getRandomInt(), this.getRandomInt()],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Data One',
|
||||
backgroundColor: '#f87979',
|
||||
data: [this.getRandomInt(), this.getRandomInt()]
|
||||
}, {
|
||||
label: 'Data One',
|
||||
backgroundColor: '#f87979',
|
||||
data: [this.getRandomInt(), this.getRandomInt()]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
getRandomInt () {
|
||||
return Math.floor(Math.random() * (50 - 5 + 1)) + 5
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.small {
|
||||
max-width: 600px;
|
||||
margin: 150px auto;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
<p class="warning">
|
||||
⚠ Attention: If you mutate your data in a parent component and pass it to your child chart component keep in mind the javascript limitiations.
|
||||
More info in this [issue#44](https://github.com/apertureless/vue-chartjs/issues/44)
|
||||
</p>
|
||||
|
||||
### Limitations
|
||||
<ul>
|
||||
<li>[Caveats](https://vuejs.org/v2/guide/list.html#Caveats)</li>
|
||||
<li>[Change-Detection-Caveats](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)</li>
|
||||
<li>[vm.$watch](https://vuejs.org/v2/api/#vm-watch)</li>
|
||||
</ul>
|
||||
|
||||
## Chart.js object
|
||||
|
||||
Sometimes you need more control over chart.js. Thats why you can access the chart.js instance over `this._chart`
|
||||
|
||||
## Available Charts
|
||||
|
||||
### Bar Chart
|
||||
<p class="tip">
|
||||
There are two versions of the Bar chart. `{Bar}` and `{HorizontalBar}`
|
||||
</p>
|
||||
|
||||

|
||||
### Line Chart
|
||||
|
||||

|
||||
|
||||
### Doughnut
|
||||
|
||||

|
||||
|
||||
### Pie
|
||||
|
||||

|
||||
|
||||
### Radar
|
||||
|
||||

|
||||
|
||||
### Polar Area
|
||||
|
||||

|
||||
|
||||
### Bubble
|
||||
|
||||

|
||||
|
||||
## Webpack, Browserify and dist files.
|
||||
|
||||
If you use `import VueCharts from 'vue-chartjs'` you will mostly import the UMD build of vue-chart.js
|
||||
This is because of compatibility reasons. This approach however has a downside: vue.js and chart.js are bundled into the file.
|
||||
And you end up with two vue instances.
|
||||
|
||||
If you're using webpack 2 or rollup however, it will automatically import the transpiled ES sources.
|
||||
If you know what you're doing you can import directly from the transpiled es sources:
|
||||
|
||||
```
|
||||
import { Line } from 'vue-chartjs/es'
|
||||
```
|
||||
|
||||
### Browserify
|
||||
|
||||
In order for a browserify user to transpile the code, they would need to install `babelify` and `babel-preset-es2015` and add a .babelrc file in the root of their project with the following code:
|
||||
|
||||
```
|
||||
{
|
||||
"presets": ["es2015"]
|
||||
}
|
||||
```
|
||||
22
docs/dist/vue-chartjs.js
vendored
1
docs/dist/vue-chartjs.js.map
vendored
@@ -1,13 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>📊 Vue-ChartJs</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<app></app>
|
||||
</div>
|
||||
<script src="dist/vue-chartjs.js"></script>
|
||||
</body>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
|
||||
<title>vue-chartjs doc</title>
|
||||
<link rel="stylesheet" href="https://unpkg.com/docute@2/dist/docute.css">
|
||||
</head>
|
||||
<body>
|
||||
<!-- don't remove this part start -->
|
||||
<div id="app"></div>
|
||||
<script src="https://unpkg.com/docute-evanyou"></script>
|
||||
<script src="https://unpkg.com/docute/dist/docute.js"></script>
|
||||
<script src="https://unpkg.com/docute/plugins/docsearch.js"></script>
|
||||
<script src="./config.js"></script>
|
||||
<!-- don't remove this part end -->
|
||||
|
||||
<!-- Google Analytics -->
|
||||
<script>
|
||||
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
|
||||
ga('create', 'UA-92766713-1', 'auto');
|
||||
ga('send', 'pageview');
|
||||
docute.router.afterEach(function (to) {
|
||||
ga('set', 'page', to.fullPath);
|
||||
ga('send', 'pageview');
|
||||
});
|
||||
</script>
|
||||
<script async src='https://www.google-analytics.com/analytics.js'></script>
|
||||
<!-- End Google Analytics -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
318
docs/ja/README.md
Normal file
@@ -0,0 +1,318 @@
|
||||
---
|
||||
search: ja
|
||||
---
|
||||
|
||||
# vue-chartjs
|
||||
**vue-chartjs** は [Chart.js](https://github.com/chartjs/Chart.js) をvueで使用するためのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。
|
||||
|
||||
## イントロ
|
||||
`vue-chartjs` vueの中であまり面倒なくchart.jsを使うことができます。 シンプルなチャートをできるだけ早く実行したいという人に最適です。
|
||||
|
||||
chart.jsの基本ロジックを抽象化していますが、公開されたchart.jsのオブジェクト使用して柔軟にカスタマイズできます。
|
||||
|
||||
## インストール
|
||||
Vue.jsの Version2以上を使用している場合は簡単にインストールできます。:
|
||||
|
||||
`yarn add vue-chartjs chart.js`
|
||||
|
||||
Vue.jsの Version 1.xを使用している場合は`legacy`タグを使用してください。しかし、vueのバージョン1はもうメンテナンスされません。
|
||||
|
||||
`yarn add vue-chartjs@legacy`
|
||||
|
||||
## クイックスタート
|
||||
|
||||
BaseChartをインポートしてextendします。
|
||||
|
||||
異なるデータのチャートを表示するときに柔軟性が大幅に向上します。
|
||||
コンポーネントをカプセル化し、プロパティをコンポーネントのデータに渡したり、コンポーネント内に直接データを記述することができます。ただし直接データを記述した場合はコンポーネントの再利用ができません。
|
||||
|
||||
パッケージ全体またはモジュールごとに個別にインポートすることができます。
|
||||
|
||||
```javascript
|
||||
// CommitChart.js
|
||||
import { Bar } from 'vue-chartjs'
|
||||
|
||||
export default Bar.extend({
|
||||
mounted () {
|
||||
// Overwriting base render method with actual data.
|
||||
this.renderChart(data, options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
renderChart()メソッドに2つの引数を渡すことができます:
|
||||
|
||||
- Data object
|
||||
- Options object
|
||||
|
||||
### データオブジェクト
|
||||
|
||||
データオブジェクトは、次のようになります。:
|
||||
|
||||
```javascript
|
||||
{
|
||||
labels: ['January', 'February'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'GitHub Commits',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20]
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
詳細については、[Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data) のドキュメントをご覧ください。
|
||||
## プロパティ
|
||||
|
||||
BaseChartsには基本プロパティがいくつか定義されています。 extendされたときにそれらは明示的に表示されていませんが、使用するときに上書きして設定することができます。
|
||||
|
||||
| プロパティ | 説明 |
|
||||
|---|---|
|
||||
| width | chartの表示幅 |
|
||||
| height | chartの表示高さ |
|
||||
| chart-id | canvas要素のid |
|
||||
|
||||
|
||||
## 実装例
|
||||
|
||||
いくつか例を記載します。
|
||||
|
||||
### プロパティの利用
|
||||
|
||||
dataとoptionsプロパティを作成して、チャートにデータを渡すことが出来ます。
|
||||
|
||||
```javascript
|
||||
// LineChart.js
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
props: ['data', 'options'],
|
||||
mounted () {
|
||||
this.renderChart(this.data, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
コンポーネントに追加して、使用することができます。
|
||||
|
||||
```html
|
||||
<line-chart :data="{your data object}" :options="{your options}"></line-chart>
|
||||
```
|
||||
|
||||
幅と高さを上書きする場合:
|
||||
|
||||
```html
|
||||
<line-chart
|
||||
:data="{your data object}"
|
||||
:options="{responsive: false, maintainAspectRatio: false}"
|
||||
:width="400"
|
||||
:height="200"
|
||||
>
|
||||
</line-chart>
|
||||
```
|
||||
|
||||
<p class="warning">
|
||||
`width` と `height` を反映させるためには、 `responsive:false` を設定しなければならないことに注意してください。
|
||||
</p>
|
||||
|
||||
### コンポーネント内のローカルデータを使用する場合
|
||||
|
||||
```javascript
|
||||
import {Bar} from 'vue-chartjs'
|
||||
|
||||
export default Bar.extend({
|
||||
data () {
|
||||
return {
|
||||
datacollection: {
|
||||
labels: ['January', 'February'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Data One',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
mounted () {
|
||||
this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### コンポーネントの再利用
|
||||
|
||||
チャートコンポーネントを再利用可能にしたい場合は、ラッパーを使用することをお勧めします。このようにすると、チャートコンポーネントはデータ表示とロジックを含むラッパーコンポーネントに対してのみ応答可能です。単一ページアプリケーションを実行している場合や、laravelで統合されている場合は、異なった方法があります。
|
||||
|
||||
|
||||
## リアクティブデータ
|
||||
|
||||
Chart.js はデータセットを変更したときのライブアップデートを提供していません。`vue-chartjs` ではこれを実現するために2つのミックスインを提供します。
|
||||
|
||||
- `reactiveProp`
|
||||
- `reactiveData`
|
||||
|
||||
この2つのミックスインは実際には同じものです。 ほとんどの場合 `reactiveProp` を使用します。これはチャートコンポーネントのロジックを拡張し、自動的に `chartData` という名前のプロパティを追加し、さらにこのプロパティに対して `vue watch` を追加します。 データの更新に対して、データセット内のデータのみが変更されたときには `update()` を呼び出し、新しいデータセットが追加された場合は `renderChart()` が呼び出されます。
|
||||
|
||||
`reactiveData` は単純に(プロパティではない!!)ローカルの chartData 変数を追加し、ウォッチャーを追加します。
|
||||
単一の目的のチャートのみ必要でチャートコンポーネント内でAPI呼び出しを行うときのみ有用です。
|
||||
|
||||
```javascript
|
||||
data () {
|
||||
return {
|
||||
chartData: null
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 例
|
||||
|
||||
**LineChart.js**
|
||||
```javascript
|
||||
import { Line, mixins } from 'vue-chartjs'
|
||||
const { reactiveProp } = mixins
|
||||
|
||||
export default Line.extend({
|
||||
mixins: [reactiveProp],
|
||||
props: ['options'],
|
||||
mounted () {
|
||||
// this.chartData is created in the mixin
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
**RandomChart.vue**
|
||||
|
||||
```javascript
|
||||
<template>
|
||||
<div class="small">
|
||||
<line-chart :chart-data="datacollection"></line-chart>
|
||||
<button @click="fillData()">Randomize</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LineChart from './LineChart.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
LineChart
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
datacollection: null
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.fillData()
|
||||
},
|
||||
methods: {
|
||||
fillData () {
|
||||
this.datacollection = {
|
||||
labels: [this.getRandomInt(), this.getRandomInt()],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Data One',
|
||||
backgroundColor: '#f87979',
|
||||
data: [this.getRandomInt(), this.getRandomInt()]
|
||||
}, {
|
||||
label: 'Data One',
|
||||
backgroundColor: '#f87979',
|
||||
data: [this.getRandomInt(), this.getRandomInt()]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
getRandomInt () {
|
||||
return Math.floor(Math.random() * (50 - 5 + 1)) + 5
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.small {
|
||||
max-width: 600px;
|
||||
margin: 150px auto;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
<p class="warning">
|
||||
⚠ 注意:親コンポーネントでデータを変更し、それを子チャートコンポーネントに渡す場合は、JavaScriptの制限事項に注意してください。
|
||||
この問題の詳細 [issue#44](https://github.com/apertureless/vue-chartjs/issues/44)
|
||||
</p>
|
||||
|
||||
### 制限事項
|
||||
<ul>
|
||||
<li>[注意事項](https://jp.vuejs.org/v2/guide/list.html#注意事項)</li>
|
||||
<li>[変更検出の注意事項](https://jp.vuejs.org/v2/guide/reactivity.html#変更検出の注意事項)</li>
|
||||
<li>[vm.$watch](https://jp.vuejs.org/v2/api/#vm-watch)</li>
|
||||
</ul>
|
||||
|
||||
## Chart.js オブジェクト
|
||||
|
||||
場合によっては、chart.jsをより詳細に制御する必要があります。Chart.jsインスタンスには `this._chart` を使ってアクセスします。
|
||||
|
||||
## 利用可能なグラフ
|
||||
|
||||
### 棒グラフ
|
||||
<p class="tip">
|
||||
棒グラフには `{Bar}` と `{HorizontalBar}` の2つのバージョンがあります。
|
||||
</p>
|
||||
|
||||

|
||||
### 折れ線グラフ
|
||||
|
||||

|
||||
|
||||
### ドーナツチャート
|
||||
|
||||

|
||||
|
||||
### パイチャート
|
||||
|
||||

|
||||
|
||||
### レーダーチャート
|
||||
|
||||

|
||||
|
||||
### 鶏頭図
|
||||
|
||||

|
||||
|
||||
### バブルチャート
|
||||
|
||||

|
||||
|
||||
|
||||
## ビルド方法の違い
|
||||
あなたが使用するビルドツールに依存した3つの異なるエントリーポイントがあります。 依存するライブラリは一緒にバンドルされているか、または 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 |
|
||||
|
||||
### ブラウザー
|
||||
`vue-chartjs` をビルドツールを使用せず直接ブラウザー内で使用します。 例 [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010) このケースでは縮小版の `vue-chartjs.full.min.js` を使用します。これにはVue.js と Chart.js が 含まれていて、UMD Module として定義されています。従ってあなたはただ一つのファイルしか必要としません。
|
||||
|
||||
### Browserify / Webpack 1
|
||||
Gulp、BrowserifyまたはWebpackのバージョン1を使用している場合は、__トランスパイル__ され UMD Moduleとして __バンドル__ された `vue-chartjs.js` を使用します。
|
||||
|
||||
Vue.jsとChart.jsは `peerDependencies` なので別にインストールする必要があります。ほとんどのプロジェクトでは、Vue.jsはすでにインストールされているでしょう。この方法では、このパッケージと異なるバージョンのVue.jsとChart.jsを持つことができます。
|
||||
|
||||
### Webpack 2
|
||||
Webpack 2を使用している場合、 `jsnext:main` または `module` に`es/index.js` を指定します。 ソースファイルは __トランスパイル__ されます。またmoduleには __バンドル__ されません。このようにすると `tree shaking` が動作します。バンドル版のように、`peerDependencies` で指定された `Vue.js` と `Chart.js` はインストールする必要があります。
|
||||
284
docs/pt-br/README.md
Normal file
@@ -0,0 +1,284 @@
|
||||
<div align="center">
|
||||
<img width="256" heigth="256" src="/assets/vue-chartjs.png" alt="vue-chartjs logo">
|
||||
</div>
|
||||
|
||||
[](https://badge.fury.io/js/vue-chartjs)
|
||||
[](https://codecov.io/gh/apertureless/vue-chartjs)
|
||||
[](https://travis-ci.org/apertureless/vue-chartjs)
|
||||
[](http://packagequality.com/#?package=vue-chartjs)
|
||||
[](https://www.npmjs.com/package/vue-chartjs)
|
||||
[](https://gitter.im/vue-chartjs/Lobby)
|
||||
[](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
|
||||
[](https://cdnjs.com/libraries/vue-chartjs)
|
||||
|
||||
# vue-chartjs
|
||||
|
||||
**vue-chartjs** é um wrapper para o [Chart.js](https://github.com/chartjs/Chart.js) no vue. Você pode criar gráficos reutilizáveis facilmente.
|
||||
|
||||
## Demo & Docs
|
||||
|
||||
- 📺 [Demo](http://demo.vue-chartjs.org/)
|
||||
- 📖 [Docs](http://www.vue-chartjs.org/)
|
||||
|
||||
### Compatibilidade
|
||||
|
||||
- v1 later `@legacy`
|
||||
- Vue.js 1.x
|
||||
- v2 later
|
||||
- Vue.js 2.x
|
||||
|
||||
Após a release final do vue.js 2, você também instala por padrão o vue-chartjs v2 pelo npm.
|
||||
Não é mas necessária a tag @next. Se você quiser a versão v1, você precisa definir a versão ou usar uma tag legada.
|
||||
Se está procurando pela versão v1, dê uma olhada nessa [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.1.3)
|
||||
|
||||
## Instalação
|
||||
|
||||
Simplemente execute `yarn add vue-chartjs chart.js`
|
||||
|
||||
Ou se quiser utilizar diretamente no browser, adicione
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/vue-chartjs@2.6.0/dist/vue-chartjs.full.min.js"></script>
|
||||
```
|
||||
em seus scripts. Veja [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
|
||||
|
||||
## Explicação das diferentes builds
|
||||
|
||||
Existem três diferentes pontos de entrada (entry points). Isso depende da configuração de build que você possui. As dependências são empacotadas (bundled) ou requisitadas como 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
|
||||
Você pode usar o `vue-chartjs` diretamente no seu browser sem qualquer configuração de build. Como em [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). Nesse caso, use `vue-chartjs.full.min.js` que é a versão minificada. Esse arquivo contém o Vue.js e o Chart.js inseridos nele. E são And empacotados (bundled) em um módulo UMD. Então você precisa somente desse arquivo.
|
||||
|
||||
|
||||
### Browserify / Webpack 1
|
||||
|
||||
Se você estiver usando Gulb, Browserify ou Webpack 1 a opção é `vue-chartjs.js`, que é __transpiled__ e __bundled__ no modelo UMD.
|
||||
|
||||
Porém, Vue.js e Chart.js são `peerDependencies`, então você precisa instalá-los seperadamente. Na maioria dos projetos você terá o `Vue.js` instalado de qualquer maneira. Dessa forma, você pode ter diferentes versões do Vue.js e do Chart.j nesse pacote.
|
||||
|
||||
|
||||
### Webpack 2
|
||||
Se você está usando o Webpack 2, ele automaticamente usará a opção `jsnext:main` / `module`. Que é `es/index.js`, uma versão do código do es __transpiled__. Não é __bundled__ em módulo algum. Dessa forma, seu [tree shaking](https://webpack.js.org/guides/tree-shaking/) funcionará. Como na versão bundled, o `Vue.js` e o `Chart.js` são `peerDependencies` e precisam ser instalados.
|
||||
|
||||
## Como usar
|
||||
|
||||
Você precisa importar a classe de gráficos básica e extendê-la. Isso garante muito mais flexibilidade quando se está trabalhando com dados diferentes. Você pode passar dados via props ou vue-resource.
|
||||
|
||||
Você pode importar todo o pacote ou cada módulo individualmente.
|
||||
|
||||
```javascript
|
||||
import VueCharts from 'vue-chartjs'
|
||||
import { Bar, Line } from 'vue-chartjs'
|
||||
```
|
||||
|
||||
Apenas crie seu próprio componente.
|
||||
|
||||
```javascript
|
||||
// CommitChart.js
|
||||
import { Bar } from 'vue-chartjs'
|
||||
|
||||
export default Bar.extend({
|
||||
mounted () {
|
||||
// Overwriting base render method with actual data.
|
||||
this.renderChart({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'GitHub Commits',
|
||||
backgroundColor: '#f87979',
|
||||
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
|
||||
}
|
||||
]
|
||||
})
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Então, simplesmente importe e use seu próprio componente extendido como um componente vue.
|
||||
|
||||
```javascript
|
||||
import CommitChart from 'path/to/component/CommitChart'
|
||||
```
|
||||
|
||||
## Another Example with options
|
||||
|
||||
Você pode sobreescrever as options (opções) padrão do gráfico. Basta passar o objeto options como segundo parâmetro do método de renderização.
|
||||
|
||||
```javascript
|
||||
// MonthlyIncome.js
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
props: ["data", "options"],
|
||||
mounted () {
|
||||
this.renderChart(this.data, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Use isso no seu componente vue
|
||||
|
||||
```javascript
|
||||
import MonthlyIncome from 'path/to/component/MonthlyIncome'
|
||||
|
||||
<template>
|
||||
<monthly-income :data={....} />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: { MonthlyIncome },
|
||||
....
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## Reactivity (Reatividade)
|
||||
|
||||
O Chart.js não atualiza nem re-renderiza o gráfico se novos dados são passados.
|
||||
Porém, você pode implementar isso por si só ou usar um dos dois mixins inclusos.
|
||||
|
||||
- `reactiveProp`
|
||||
- `reactiveData`
|
||||
|
||||
Ambos estão incluídos no módulo de `mixins`.
|
||||
|
||||
Os mixins criam automaticamente o `chartData` como um prop ou como um data. E adiciona um watcher. Se os dados mudarem, o gráfico será atualizado. Mas matenha em mente as limitações do vue e do javascript para as mutations(mutações) em vetores e objetos. Mais informações [aqui](http://vue-chartjs.org/#/home?id=reactive-data)
|
||||
|
||||
|
||||
```javascript
|
||||
// MonthlyIncome.js
|
||||
import { Line, mixins } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
mixins: [mixins.reactiveProp],
|
||||
props: ["chartData", "options"],
|
||||
mounted () {
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
### Módulo de Mixins
|
||||
O módulo de `mixins` está incluído no módulo do `VueCharts` e como módulo separado.
|
||||
Algumas maneiras de importá-los:
|
||||
|
||||
```javascript
|
||||
// Load complete module with all charts
|
||||
import VueCharts from 'vue-chartjs'
|
||||
|
||||
export default VueCharts.Line.extend({
|
||||
mixins: [VueCharts.mixins.reactiveProp],
|
||||
props: ["chartData", "options"],
|
||||
mounted () {
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
```javascript
|
||||
// Load speperate modules
|
||||
import { Line, mixins } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
mixins: [mixins.reactiveProp],
|
||||
props: ["chartData", "options"],
|
||||
mounted () {
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
```javascript
|
||||
// Load speperate modules with destructure assign
|
||||
import { Line, mixins } from 'vue-chartjs'
|
||||
const { reactiveProp } = mixins
|
||||
|
||||
export default Line.extend({
|
||||
mixins: [reactiveProp],
|
||||
props: ["chartData", "options"],
|
||||
mounted () {
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Gráficos disponíveis
|
||||
|
||||
### Gráfico de Barra
|
||||
|
||||

|
||||
|
||||
### Gráfico de Linha
|
||||
|
||||

|
||||
|
||||
### Donut
|
||||
|
||||

|
||||
|
||||
### Pizza
|
||||
|
||||

|
||||
|
||||
### Radar
|
||||
|
||||

|
||||
|
||||
### Área Polar
|
||||
|
||||

|
||||
|
||||
### Bolha
|
||||
|
||||

|
||||
|
||||
## Configurações de Build
|
||||
|
||||
``` bash
|
||||
# Instala as dependências
|
||||
npm install
|
||||
|
||||
# roda o servidor com hot reload at localhost:8080
|
||||
npm run dev
|
||||
|
||||
# build para produção com minificação
|
||||
npm run build
|
||||
|
||||
# roda testes unitários
|
||||
npm run unit
|
||||
|
||||
# roda testes e2e
|
||||
npm run e2e
|
||||
|
||||
# roda todos os teste
|
||||
npm test
|
||||
```
|
||||
|
||||
Para informações detalhadas de como as coisas funcionam, confira o [guia](http://vuejs-templates.github.io/webpack/) e [documentação do vue-loader](http://vuejs.github.io/vue-loader).
|
||||
|
||||
## Contribuindo
|
||||
|
||||
1. Faça um fork o projeto ( https://github.com/apertureless/vue-chartjs/fork )
|
||||
2. Crie uma branch da sua feature (`git checkout -b my-new-feature`)
|
||||
3. Faça o commit das suas modificações (`git commit -am 'Add some feature'`)
|
||||
4. Faça o push da branch (`git push origin my-new-feature`)
|
||||
5. Crie uma nova requisição de pull
|
||||
|
||||
## License
|
||||
|
||||
Esse software é distribuído sob a licença [MIT license](LICENSE.txt).
|
||||
157
package.json
@@ -1,12 +1,34 @@
|
||||
{
|
||||
"name": "vue-chartjs",
|
||||
"version": "2.3.6",
|
||||
"version": "2.6.5",
|
||||
"description": "vue.js wrapper for chart.js",
|
||||
"author": "Jakub Juszczak <jakub@nextindex.de>",
|
||||
"author": "Jakub Juszczak <jakub@posteo.de>",
|
||||
"homepage": "http://vue-chartjs.org",
|
||||
"license": "MIT",
|
||||
"contributors": [
|
||||
{
|
||||
"name": "Thorsten Lünborg",
|
||||
"web": "https://github.com/LinusBorg"
|
||||
},
|
||||
{
|
||||
"name": "Juan Carlos Alonso",
|
||||
"web": "https://github.com/jcalonso"
|
||||
}
|
||||
],
|
||||
"maintainers": [
|
||||
{
|
||||
"name": "Jakub Juszczak",
|
||||
"email": "jakub@posteo.de",
|
||||
"web": "http://www.jakubjuszczak.de"
|
||||
}
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+ssh://git@github.com:apertureless/vue-chartjs.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "https://github.com/apertureless/vue-chartjs/issues"
|
||||
},
|
||||
"keywords": [
|
||||
"ChartJs",
|
||||
"Vue",
|
||||
@@ -15,77 +37,116 @@
|
||||
"Charts"
|
||||
],
|
||||
"main": "dist/vue-chartjs.js",
|
||||
"unpkg": "dist/vue-chartjs.full.min.js",
|
||||
"module": "es/index.js",
|
||||
"jsnext:main": "es/index.js",
|
||||
"files": [
|
||||
"src",
|
||||
"dist",
|
||||
"es"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "node build/dev-server.js",
|
||||
"build": "node build/build.js",
|
||||
"build": "yarn run release && yarn run build:es",
|
||||
"build:es": "cross-env BABEL_ENV=es babel src --out-dir es",
|
||||
"unit": "karma start test/unit/karma.conf.js --single-run",
|
||||
"e2e": "node test/e2e/runner.js",
|
||||
"test": "npm run unit",
|
||||
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
|
||||
"release": "webpack --progress --hide-modules --config ./build/webpack.release.js"
|
||||
"release": "webpack --progress --hide-modules --config ./build/webpack.release.js && NODE_ENV=production webpack --progress --hide-modules --config ./build/webpack.release.min.js && webpack --progress --hide-modules --config ./build/webpack.release.full.js && NODE_ENV=production webpack --progress --hide-modules --config ./build/webpack.release.full.min.js",
|
||||
"prepublish": "yarn run lint && yarn run test && yarn run build"
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-runtime": "^6.11.6",
|
||||
"chart.js": "^2.5.0",
|
||||
"vue": "^2.1.10"
|
||||
"lodash": "^4.17.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"chart.js": "^2.6.0",
|
||||
"vue": "^2.3.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.10.4",
|
||||
"babel-loader": "^6.0.0",
|
||||
"babel-plugin-transform-runtime": "^6.12.0",
|
||||
"babel-preset-es2015": "^6.0.0",
|
||||
"babel-preset-stage-2": "^6.0.0",
|
||||
"babel-cli": "^6.24.1",
|
||||
"babel-core": "^6.25.0",
|
||||
"babel-loader": "^7.0.0",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-preset-es2015": "^6.24.1",
|
||||
"babel-preset-stage-2": "^6.24.1",
|
||||
"babel-runtime": "^6.23.0",
|
||||
"chai": "^3.5.0",
|
||||
"chromedriver": "^2.21.2",
|
||||
"chart.js": "^2.6.0",
|
||||
"chromedriver": "^2.28.0",
|
||||
"connect-history-api-fallback": "^1.1.0",
|
||||
"cross-spawn": "^5.0.1",
|
||||
"css-loader": "^0.26.1",
|
||||
"eslint": "^3.7.1",
|
||||
"eslint-config-standard": "^6.2.0",
|
||||
"eslint-friendly-formatter": "^2.0.5",
|
||||
"eslint-loader": "^1.3.0",
|
||||
"eslint-plugin-html": "^1.3.0",
|
||||
"eslint-plugin-promise": "^3.4.0",
|
||||
"eslint-plugin-standard": "^2.0.1",
|
||||
"cross-env": "^3.2.4",
|
||||
"cross-spawn": "^5.1.0",
|
||||
"css-loader": "^0.28.0",
|
||||
"eslint": "^3.19.0",
|
||||
"eslint-config-standard": "^10.2.1",
|
||||
"eslint-friendly-formatter": "^2.0.7",
|
||||
"eslint-loader": "^1.7.1",
|
||||
"eslint-plugin-html": "^2.0.1",
|
||||
"eslint-plugin-import": "^2.2.0",
|
||||
"eslint-plugin-node": "^4.2.2",
|
||||
"eslint-plugin-promise": "^3.5.0",
|
||||
"eslint-plugin-standard": "^3.0.1",
|
||||
"eventsource-polyfill": "^0.9.6",
|
||||
"express": "^4.13.3",
|
||||
"express": "^4.15.2",
|
||||
"extract-text-webpack-plugin": "^1.0.1",
|
||||
"file-loader": "^0.9.0",
|
||||
"file-loader": "^0.10.1",
|
||||
"function-bind": "^1.0.2",
|
||||
"html-webpack-plugin": "^2.8.1",
|
||||
"http-proxy-middleware": "^0.17.2",
|
||||
"inject-loader": "^3.0.0-beta2",
|
||||
"html-webpack-plugin": "^2.28.0",
|
||||
"http-proxy-middleware": "^0.17.4",
|
||||
"inject-loader": "^3.0.0",
|
||||
"isparta-loader": "^2.0.0",
|
||||
"jasmine-core": "^2.5.2",
|
||||
"json-loader": "^0.5.4",
|
||||
"karma": "^1.3.0",
|
||||
"karma": "^1.5.0",
|
||||
"karma-coverage": "^1.1.1",
|
||||
"karma-jasmine": "^1.0.2",
|
||||
"karma-mocha": "^1.2.0",
|
||||
"karma-phantomjs-launcher": "^1.0.0",
|
||||
"karma-phantomjs-launcher": "^1.0.4",
|
||||
"karma-sinon-chai": "^1.2.0",
|
||||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-spec-reporter": "0.0.26",
|
||||
"karma-webpack": "^1.7.0",
|
||||
"lodash": "^4.17.4",
|
||||
"lolex": "^1.4.0",
|
||||
"karma-spec-reporter": "0.0.30",
|
||||
"karma-webpack": "1.8.1",
|
||||
"lolex": "^1.6.0",
|
||||
"mocha": "^3.1.0",
|
||||
"nightwatch": "^0.9.8",
|
||||
"ora": "^0.3.0",
|
||||
"nightwatch": "^0.9.14",
|
||||
"ora": "^1.2.0",
|
||||
"phantomjs-prebuilt": "^2.1.13",
|
||||
"selenium-server": "^3.0.1",
|
||||
"shelljs": "^0.7.4",
|
||||
"sinon": "^1.17.3",
|
||||
"sinon-chai": "^2.8.0",
|
||||
"url-loader": "^0.5.7",
|
||||
"vue-hot-reload-api": "^2.0.6",
|
||||
"vue-html-loader": "^1.2.3",
|
||||
"vue-loader": "^10.0.2",
|
||||
"vue-style-loader": "^1.0.0",
|
||||
"vue-template-compiler": "^2.1.10",
|
||||
"selenium-server": "^3.3.1",
|
||||
"shelljs": "^0.7.7",
|
||||
"sinon": "^2.1.0",
|
||||
"sinon-chai": "^2.9.0",
|
||||
"url-loader": "^0.5.8",
|
||||
"vue": "^2.3.4",
|
||||
"vue-hot-reload-api": "^2.1.0",
|
||||
"vue-html-loader": "^1.2.4",
|
||||
"vue-loader": "^12.2.1",
|
||||
"vue-style-loader": "^3.0.1",
|
||||
"vue-template-compiler": "^2.3.4",
|
||||
"webpack": "^1.13.2",
|
||||
"webpack-dev-middleware": "^1.4.0",
|
||||
"webpack-hot-middleware": "^2.6.0",
|
||||
"webpack-merge": "^1.1.1"
|
||||
"webpack-dev-middleware": "^1.10.1",
|
||||
"webpack-hot-middleware": "^2.17.1",
|
||||
"webpack-merge": "1.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
},
|
||||
"babel": {
|
||||
"presets": [
|
||||
"es2015"
|
||||
]
|
||||
},
|
||||
"browserify": {
|
||||
"transform": [
|
||||
"babelify"
|
||||
]
|
||||
},
|
||||
"greenkeeper": {
|
||||
"ignore": [
|
||||
"extract-text-webpack-plugin",
|
||||
"karma-webpack",
|
||||
"webpack",
|
||||
"webpack-merge"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -61,11 +61,11 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
methods: {
|
||||
renderChart (data, options, type) {
|
||||
renderChart (data, options) {
|
||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||
this._chart = new Chart(
|
||||
this.$refs.canvas.getContext('2d'), {
|
||||
type: type || 'bar',
|
||||
type: 'bar',
|
||||
data: data,
|
||||
options: chartOptions
|
||||
}
|
||||
|
||||
79
src/BaseCharts/HorizontalBar.js
Normal file
@@ -0,0 +1,79 @@
|
||||
import Vue from 'vue'
|
||||
import Chart from 'chart.js'
|
||||
import { mergeOptions } from '../helpers/options'
|
||||
|
||||
export default Vue.extend({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
'div',
|
||||
[
|
||||
createElement(
|
||||
'canvas', {
|
||||
attrs: {
|
||||
id: this.chartId,
|
||||
width: this.width,
|
||||
height: this.height
|
||||
},
|
||||
ref: 'canvas'
|
||||
}
|
||||
)
|
||||
]
|
||||
)
|
||||
},
|
||||
|
||||
props: {
|
||||
chartId: {
|
||||
default: 'horizontalbar-chart',
|
||||
type: String
|
||||
},
|
||||
width: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
height: {
|
||||
default: 400,
|
||||
type: Number
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
defaultOptions: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
},
|
||||
gridLines: {
|
||||
display: false
|
||||
}
|
||||
}],
|
||||
xAxes: [ {
|
||||
gridLines: {
|
||||
display: false
|
||||
},
|
||||
categoryPercentage: 0.5,
|
||||
barPercentage: 0.2
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
renderChart (data, options, type) {
|
||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||
this._chart = new Chart(
|
||||
this.$refs.canvas.getContext('2d'), {
|
||||
type: 'horizontalBar',
|
||||
data: data,
|
||||
options: chartOptions
|
||||
}
|
||||
)
|
||||
this._chart.generateLegend()
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this._chart.destroy()
|
||||
}
|
||||
})
|
||||
16
src/examples/HorizontalBarExample.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import HorizontalBarChart from '../BaseCharts/HorizontalBar'
|
||||
|
||||
export default HorizontalBarChart.extend({
|
||||
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})
|
||||
}
|
||||
})
|
||||
@@ -1,4 +1,5 @@
|
||||
import Bar from './BaseCharts/Bar'
|
||||
import HorizontalBar from './BaseCharts/HorizontalBar'
|
||||
import Doughnut from './BaseCharts/Doughnut'
|
||||
import Line from './BaseCharts/Line'
|
||||
import Pie from './BaseCharts/Pie'
|
||||
@@ -6,9 +7,12 @@ import PolarArea from './BaseCharts/PolarArea'
|
||||
import Radar from './BaseCharts/Radar'
|
||||
import Bubble from './BaseCharts/Bubble'
|
||||
import mixins from './mixins/index.js'
|
||||
import npmCfg from '../package.json'
|
||||
|
||||
const VueCharts = {
|
||||
version: npmCfg.version,
|
||||
Bar,
|
||||
HorizontalBar,
|
||||
Doughnut,
|
||||
Line,
|
||||
Pie,
|
||||
@@ -23,6 +27,7 @@ export default VueCharts
|
||||
export {
|
||||
VueCharts,
|
||||
Bar,
|
||||
HorizontalBar,
|
||||
Doughnut,
|
||||
Line,
|
||||
Pie,
|
||||
|
||||
9
src/main.js
Normal file
@@ -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')
|
||||
@@ -26,7 +26,26 @@ module.exports = {
|
||||
// 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) => {
|
||||
chart.data.datasets[i] = dataset
|
||||
// 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]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
chart.data.labels = newData.labels
|
||||
|
||||
@@ -4,7 +4,6 @@ module.exports = {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
'chartData': {
|
||||
handler (newData, oldData) {
|
||||
@@ -27,7 +26,26 @@ module.exports = {
|
||||
// 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) => {
|
||||
chart.data.datasets[i] = dataset
|
||||
// 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]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
chart.data.labels = newData.labels
|
||||
|
||||
@@ -6,5 +6,8 @@
|
||||
"expect": true,
|
||||
"jasmine": true,
|
||||
"sinon": true
|
||||
},
|
||||
"rules": {
|
||||
"no-unused-expressions": 0
|
||||
}
|
||||
}
|
||||
|
||||
64
test/unit/specs/HorizontalBar.spec.js
Normal file
@@ -0,0 +1,64 @@
|
||||
import Vue from 'vue'
|
||||
import HorizontalBarChart from 'src/examples/HorizontalBarExample'
|
||||
|
||||
describe('HorizontalBarChart', () => {
|
||||
let el
|
||||
|
||||
beforeEach(() => {
|
||||
el = document.createElement('div')
|
||||
})
|
||||
|
||||
it('should render a canvas', () => {
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
HorizontalBarChart
|
||||
)
|
||||
},
|
||||
components: { HorizontalBarChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$el.querySelector('#horizontalbar-chart')).not.to.be.an('undefined')
|
||||
expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
|
||||
expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
|
||||
expect(vm.$el.querySelector('canvas')).to.exist
|
||||
})
|
||||
|
||||
it('should change id based on prop', () => {
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
HorizontalBarChart, {
|
||||
props: {
|
||||
chartId: 'horizontalbarchartprop'
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
components: { HorizontalBarChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$el.querySelector('#horizontalbarchartprop')).not.to.be.an('undefined')
|
||||
})
|
||||
|
||||
it('should destroy chart instance', (done) => {
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
HorizontalBarChart
|
||||
)
|
||||
},
|
||||
components: { HorizontalBarChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
|
||||
|
||||
vm.$destroy()
|
||||
|
||||
vm.$nextTick(() => {
|
||||
vm.$forceUpdate()
|
||||
expect(vm.$children[0]._chart.chart.ctx).to.be.null
|
||||
done()
|
||||
})
|
||||
})
|
||||
})
|
||||