mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
Compare commits
3 Commits
v2.6.1
...
release/1.
| Author | SHA1 | Date | |
|---|---|---|---|
|
a25d327b13 | ||
|
|
f57e555d94 | ||
|
|
88d2771175 |
6
.github/ISSUE_TEMPLATE.md
vendored
6
.github/ISSUE_TEMPLATE.md
vendored
@@ -9,6 +9,6 @@
|
||||
|
||||
|
||||
### Environment
|
||||
- vue.js version: <version here>
|
||||
- vue-chart.js version: <version here>
|
||||
- npm version: <version here>
|
||||
- OS: Write here
|
||||
- NPM Version: Write here
|
||||
|
||||
|
||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -4,5 +4,3 @@ npm-debug.log
|
||||
selenium-debug.log
|
||||
test/unit/coverage
|
||||
test/e2e/reports
|
||||
dist/
|
||||
es/
|
||||
|
||||
270
CHANGELOG.md
270
CHANGELOG.md
@@ -1,266 +1,15 @@
|
||||
# Change Log
|
||||
|
||||
## [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/integration/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)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Destory chart instance in reactiveMixins on render [\#35](https://github.com/apertureless/vue-chartjs/issues/35)
|
||||
- Rerendering doughtnut chart not working [\#33](https://github.com/apertureless/vue-chartjs/issues/33)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- 🔨 Change reactiveMixins to fix \#35 [\#36](https://github.com/apertureless/vue-chartjs/pull/36) ([apertureless](https://github.com/apertureless))
|
||||
|
||||
## [v2.3.4](https://github.com/apertureless/vue-chartjs/tree/v2.3.4) (2017-02-11)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.3...v2.3.4)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Update Chart.js docs to include link to vue-chartjs [\#32](https://github.com/apertureless/vue-chartjs/issues/32)
|
||||
- Compatibility with Vue 2.1.10 [\#30](https://github.com/apertureless/vue-chartjs/issues/30)
|
||||
|
||||
## [v2.3.3](https://github.com/apertureless/vue-chartjs/tree/v2.3.3) (2017-01-19)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.2...v2.3.3)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- How to create mixed chart types [\#29](https://github.com/apertureless/vue-chartjs/issues/29)
|
||||
- hello a q about reactivity [\#28](https://github.com/apertureless/vue-chartjs/issues/28)
|
||||
- chart do not render after build [\#26](https://github.com/apertureless/vue-chartjs/issues/26)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- 🐛 Fix \#30 type error [\#31](https://github.com/apertureless/vue-chartjs/pull/31) ([apertureless](https://github.com/apertureless))
|
||||
|
||||
## [v2.3.2](https://github.com/apertureless/vue-chartjs/tree/v2.3.2) (2016-12-23)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.1...v2.3.2)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Content Security Policy [\#22](https://github.com/apertureless/vue-chartjs/issues/22)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- ✨ Add minimal release webpack config [\#27](https://github.com/apertureless/vue-chartjs/pull/27) ([apertureless](https://github.com/apertureless))
|
||||
- 📝 Update README [\#25](https://github.com/apertureless/vue-chartjs/pull/25) ([apertureless](https://github.com/apertureless))
|
||||
|
||||
## [v2.3.1](https://github.com/apertureless/vue-chartjs/tree/v2.3.1) (2016-12-20)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.0...v2.3.1)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Error in rendering [\#21](https://github.com/apertureless/vue-chartjs/issues/21)
|
||||
- Issues after using gulp-- production [\#19](https://github.com/apertureless/vue-chartjs/issues/19)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- ✅ Add tests for chart instance destroying [\#24](https://github.com/apertureless/vue-chartjs/pull/24) ([apertureless](https://github.com/apertureless))
|
||||
- Feature/runtimebuild \#22 [\#23](https://github.com/apertureless/vue-chartjs/pull/23) ([apertureless](https://github.com/apertureless))
|
||||
|
||||
## [v2.3.0](https://github.com/apertureless/vue-chartjs/tree/v2.3.0) (2016-12-17)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.2.1...v2.3.0)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Uncaught TypeError: \_c is not a function [\#20](https://github.com/apertureless/vue-chartjs/issues/20)
|
||||
|
||||
## [v2.2.1](https://github.com/apertureless/vue-chartjs/tree/v2.2.1) (2016-12-07)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.2.0...v2.2.1)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Chart height definition inside the component [\#18](https://github.com/apertureless/vue-chartjs/issues/18)
|
||||
- Uncaught TypeError: Cannot read property 'draw' of null [\#15](https://github.com/apertureless/vue-chartjs/issues/15)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- Update README.md [\#16](https://github.com/apertureless/vue-chartjs/pull/16) ([Ag47](https://github.com/Ag47))
|
||||
|
||||
## [v2.2.0](https://github.com/apertureless/vue-chartjs/tree/v2.2.0) (2016-10-24)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.1.1...v2.2.0)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- The page is blank？ [\#13](https://github.com/apertureless/vue-chartjs/issues/13)
|
||||
- question:syntax with vue-loader [\#12](https://github.com/apertureless/vue-chartjs/issues/12)
|
||||
- Rerender when data has changed [\#10](https://github.com/apertureless/vue-chartjs/issues/10)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- add horizontal bar parameter [\#14](https://github.com/apertureless/vue-chartjs/pull/14) ([wahaha2012](https://github.com/wahaha2012))
|
||||
- WIP Feature/reactive chart data \#11 [\#11](https://github.com/apertureless/vue-chartjs/pull/11) ([apertureless](https://github.com/apertureless))
|
||||
|
||||
## [v2.1.1](https://github.com/apertureless/vue-chartjs/tree/v2.1.1) (2016-10-02)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v.2.1.0...v2.1.1)
|
||||
|
||||
## [v.2.1.0](https://github.com/apertureless/vue-chartjs/tree/v.2.1.0) (2016-09-23)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v1.1.3...v.2.1.0)
|
||||
|
||||
## [v1.1.3](https://github.com/apertureless/vue-chartjs/tree/v1.1.3) (2016-09-08)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.1.2...v1.1.3)
|
||||
|
||||
**Closed issues:**
|
||||
**Implemented enhancements:**
|
||||
|
||||
- Add test [\#1](https://github.com/apertureless/vue-chartjs/issues/1)
|
||||
|
||||
**Fixed bugs:**
|
||||
|
||||
- Passing chart size \(width / height\) as prop doesnt resize the chart [\#8](https://github.com/apertureless/vue-chartjs/issues/8)
|
||||
- Add test [\#1](https://github.com/apertureless/vue-chartjs/issues/1)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
@@ -269,7 +18,7 @@
|
||||
## [1.1.2](https://github.com/apertureless/vue-chartjs/tree/1.1.2) (2016-09-07)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.1.1...1.1.2)
|
||||
|
||||
**Closed issues:**
|
||||
**Implemented enhancements:**
|
||||
|
||||
- Change name of the render method to ensure compatiblity with Vue 2.0 [\#4](https://github.com/apertureless/vue-chartjs/issues/4)
|
||||
|
||||
@@ -279,7 +28,7 @@
|
||||
## [1.1.0](https://github.com/apertureless/vue-chartjs/tree/1.1.0) (2016-08-21)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.0.3...1.1.0)
|
||||
|
||||
**Closed issues:**
|
||||
**Implemented enhancements:**
|
||||
|
||||
- Use Vue.util.mergeOptions to merge default options with user's options [\#5](https://github.com/apertureless/vue-chartjs/issues/5)
|
||||
|
||||
@@ -290,12 +39,9 @@
|
||||
## [1.0.3](https://github.com/apertureless/vue-chartjs/tree/1.0.3) (2016-08-20)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.0.2...1.0.3)
|
||||
|
||||
**Closed issues:**
|
||||
**Implemented enhancements:**
|
||||
|
||||
- Publish on NPM [\#2](https://github.com/apertureless/vue-chartjs/issues/2)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- Properly destroy chartjs objects [\#3](https://github.com/apertureless/vue-chartjs/pull/3) ([LinusBorg](https://github.com/LinusBorg))
|
||||
|
||||
## [1.0.2](https://github.com/apertureless/vue-chartjs/tree/1.0.2) (2016-07-27)
|
||||
|
||||
157
README.md
157
README.md
@@ -1,76 +1,12 @@
|
||||
<div align="center">
|
||||
<img width="256" heigth="256" src="/assets/vue-chartjs.png" alt="vue-chartjs logo">
|
||||
</div>
|
||||
# Vue-ChartJs
|
||||
|
||||
[](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://badge.fury.io/js/vue-chartjs)  [](https://codecov.io/gh/apertureless/vue-chartjs) [](https://travis-ci.org/apertureless/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 & Docs
|
||||
|
||||
- [Demo](http://demo.vue-chartjs.org/)
|
||||
- [Docs](http://www.vue-chartjs.org/)
|
||||
|
||||
### Compatibility
|
||||
|
||||
- v1 later `@legacy`
|
||||
- Vue.js 1.x
|
||||
- v2 later
|
||||
- Vue.js 2.x
|
||||
|
||||
After the final release of vue.js 2, you also get the v2 per default if you install vue-chartjs over npm.
|
||||
No need for the @next tag anymore. If you want the v1 you need to define the version or use the legacy tag.
|
||||
If you're looking for v1 check this [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.1.3)
|
||||
> VueJS wrapper for ChartJs
|
||||
|
||||
## Install
|
||||
|
||||
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.
|
||||
|
||||
Simply run `npm install vue-chartjs@1.1.3`
|
||||
|
||||
## How to use
|
||||
|
||||
@@ -89,10 +25,10 @@ Just create your own component.
|
||||
// CommitChart.js
|
||||
import { Bar } from 'vue-chartjs'
|
||||
|
||||
export default Bar.extend({
|
||||
mounted () {
|
||||
export default BarChart.extend({
|
||||
ready () {
|
||||
// Overwriting base render method with actual data.
|
||||
this.renderChart({
|
||||
this.render({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
datasets: [
|
||||
{
|
||||
@@ -120,10 +56,10 @@ You can overwrite the default chart options. Just pass the options object as a s
|
||||
// MonthlyIncome.js
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
props: ["data", "options"],
|
||||
mounted () {
|
||||
this.renderChart(this.data, this.options)
|
||||
export default LineChart.extend({
|
||||
props: [data, options],
|
||||
ready () {
|
||||
this.render(this.data, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
@@ -145,77 +81,6 @@ export default {
|
||||
</script>
|
||||
```
|
||||
|
||||
## Reactivity
|
||||
|
||||
Chart.js does not update or re-render the chart if new data is passed.
|
||||
However you can simply implement this by your own or use one of the two mixins which are included.
|
||||
|
||||
- `reactiveProp`
|
||||
- `reactiveData`
|
||||
|
||||
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
|
||||
import { Line, mixins } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
mixins: [mixins.reactiveProp],
|
||||
props: ["chartData", "options"],
|
||||
mounted () {
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
})
|
||||
|
||||
```
|
||||
|
||||
### Mixins module
|
||||
The `mixins` module is included in the `VueCharts` module and as a seperate module.
|
||||
Some ways to import them:
|
||||
|
||||
```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)
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## Available Charts
|
||||
|
||||
### Bar Chart
|
||||
|
||||
BIN
assets/bar.png
BIN
assets/bar.png
Binary file not shown.
|
Before Width: | Height: | Size: 95 KiB After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB After Width: | Height: | Size: 82 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 78 KiB |
BIN
assets/line.png
BIN
assets/line.png
Binary file not shown.
|
Before Width: | Height: | Size: 125 KiB After Width: | Height: | Size: 76 KiB |
BIN
assets/pie.png
BIN
assets/pie.png
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 60 KiB |
BIN
assets/polar.png
BIN
assets/polar.png
Binary file not shown.
|
Before Width: | Height: | Size: 200 KiB After Width: | Height: | Size: 140 KiB |
BIN
assets/radar.png
BIN
assets/radar.png
Binary file not shown.
|
Before Width: | Height: | Size: 180 KiB After Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
@@ -1 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -5,7 +5,7 @@ var projectRoot = path.resolve(__dirname, '../')
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
app: './src/main.js'
|
||||
app: './src/index.js'
|
||||
},
|
||||
output: {
|
||||
path: config.build.assetsRoot,
|
||||
@@ -17,7 +17,6 @@ module.exports = {
|
||||
fallback: [path.join(__dirname, '../node_modules')],
|
||||
alias: {
|
||||
'src': path.resolve(__dirname, '../src'),
|
||||
'mixins': path.resolve(__dirname, '../src/mixins'),
|
||||
'BaseCharts': path.resolve(__dirname, '../src/BaseCharts')
|
||||
}
|
||||
},
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
const webpack = require('webpack')
|
||||
const base = require('./webpack.base.conf')
|
||||
const config = require('../config')
|
||||
var env = process.env.NODE_ENV === 'testing'
|
||||
? require('../config/test.env')
|
||||
: config.build.env
|
||||
|
||||
base.entry = {
|
||||
lib: './src/index.js'
|
||||
@@ -22,7 +19,9 @@ var webpackConfig = Object.assign({}, base)
|
||||
webpackConfig.devtool = '#source-map'
|
||||
webpackConfig.plugins = (webpackConfig.plugins || []).concat([
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': env
|
||||
'process.env': {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: { warnings: false }
|
||||
|
||||
@@ -1,92 +0,0 @@
|
||||
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
18
build/webpack.release.full.min.js
vendored
@@ -1,18 +0,0 @@
|
||||
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
|
||||
@@ -1,96 +0,0 @@
|
||||
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].js',
|
||||
library: 'VueChartJs',
|
||||
libraryTarget: 'umd',
|
||||
umdNamedDefine: true
|
||||
},
|
||||
externals: {
|
||||
'vue': 'vue',
|
||||
'chart.js': 'chart.js'
|
||||
},
|
||||
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.min.js
vendored
18
build/webpack.release.min.js
vendored
@@ -1,18 +0,0 @@
|
||||
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
|
||||
34
codecov.yml
34
codecov.yml
@@ -1,34 +0,0 @@
|
||||
codecov:
|
||||
branch: master
|
||||
|
||||
coverage:
|
||||
precision: 2
|
||||
round: down
|
||||
range: "70...100"
|
||||
|
||||
status:
|
||||
project:
|
||||
default:
|
||||
target: auto
|
||||
threshold: null
|
||||
branches: null
|
||||
|
||||
patch:
|
||||
default:
|
||||
target: auto
|
||||
branches: null
|
||||
|
||||
changes:
|
||||
default:
|
||||
branches: null
|
||||
|
||||
ignore:
|
||||
- "tests/*"
|
||||
- "src/examples/*"
|
||||
- "src/mixins/*"
|
||||
|
||||
|
||||
comment:
|
||||
layout: "header, diff, changes, sunburst, uncovered, tree"
|
||||
branches: null
|
||||
behavior: default
|
||||
21
dist/vue-chartjs.js
vendored
Normal file
21
dist/vue-chartjs.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
dist/vue-chartjs.js.map
vendored
2
dist/vue-chartjs.js.map
vendored
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
vue-chartjs.org
|
||||
319
docs/README.md
319
docs/README.md
@@ -1,319 +0,0 @@
|
||||
---
|
||||
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`
|
||||
|
||||
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 `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.
|
||||
@@ -1,78 +0,0 @@
|
||||
<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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 200 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 180 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
@@ -1 +0,0 @@
|
||||
<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>
|
||||
|
Before Width: | Height: | Size: 1.0 KiB |
@@ -1,44 +0,0 @@
|
||||
const langs = [
|
||||
{title: 'English', path: '/home', matchPath: /^\/(home|changelog)/},
|
||||
{title: 'Deutsch', path: '/de/', matchPath: /^\/de/}
|
||||
]
|
||||
|
||||
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'],
|
||||
// this plugin does require a url too
|
||||
// where docsearch fetches contents
|
||||
url: 'https://vue-chartjs.org'
|
||||
})
|
||||
],
|
||||
})
|
||||
@@ -1,311 +0,0 @@
|
||||
---
|
||||
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`
|
||||
|
||||
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"]
|
||||
}
|
||||
```
|
||||
@@ -1,32 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<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>
|
||||
@@ -5,9 +5,7 @@
|
||||
<title>Vue-ChartJs</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<app></app>
|
||||
</div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
167
package.json
167
package.json
@@ -1,34 +1,12 @@
|
||||
{
|
||||
"name": "vue-chartjs",
|
||||
"version": "2.6.1",
|
||||
"description": "vue.js wrapper for chart.js",
|
||||
"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"
|
||||
}
|
||||
],
|
||||
"version": "1.1.5",
|
||||
"description": "Vue wrapper for chart.js",
|
||||
"author": "Jakub Juszczak <jakub@nextindex.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",
|
||||
@@ -37,114 +15,77 @@
|
||||
"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"
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "node build/dev-server.js",
|
||||
"build": "yarn run release && yarn run build:es",
|
||||
"build:es": "cross-env BABEL_ENV=es babel src --out-dir es",
|
||||
"build": "node build/build.js",
|
||||
"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 && 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"
|
||||
"lint": "eslint --ext .js,.vue src test/unit/specs",
|
||||
"prepublish": "node build/build.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"lodash": "^4.17.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"babel-runtime": "^6.0.0",
|
||||
"chart.js": "^2.5.0",
|
||||
"vue": "^2.2.6"
|
||||
"vue": "^1.0.21"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-cli": "^6.24.0",
|
||||
"babel-core": "^6.24.0",
|
||||
"babel-loader": "^6.4.1",
|
||||
"babel-plugin-transform-runtime": "^6.23.0",
|
||||
"babel-preset-es2015": "^6.24.0",
|
||||
"babel-preset-stage-2": "^6.22.0",
|
||||
"babel-runtime": "^6.23.0",
|
||||
"babel-core": "^6.0.0",
|
||||
"babel-loader": "^6.0.0",
|
||||
"babel-plugin-transform-runtime": "^6.0.0",
|
||||
"babel-preset-es2015": "^6.0.0",
|
||||
"babel-preset-stage-2": "^6.0.0",
|
||||
"chai": "^3.5.0",
|
||||
"chart.js": "^2.5.0",
|
||||
"chromedriver": "^2.28.0",
|
||||
"chromedriver": "^2.21.2",
|
||||
"connect-history-api-fallback": "^1.1.0",
|
||||
"cross-env": "^3.2.4",
|
||||
"cross-spawn": "^5.1.0",
|
||||
"css-loader": "^0.27.3",
|
||||
"eslint": "^3.18.0",
|
||||
"eslint-config-standard": "^7.1.0",
|
||||
"eslint-friendly-formatter": "^2.0.7",
|
||||
"eslint-loader": "^1.7.0",
|
||||
"eslint-plugin-html": "^2.0.1",
|
||||
"eslint-plugin-promise": "^3.5.0",
|
||||
"eslint-plugin-standard": "^2.1.1",
|
||||
"cross-spawn": "^2.1.5",
|
||||
"css-loader": "^0.23.0",
|
||||
"eslint": "^2.10.2",
|
||||
"eslint-config-standard": "^5.1.0",
|
||||
"eslint-friendly-formatter": "^2.0.5",
|
||||
"eslint-loader": "^1.3.0",
|
||||
"eslint-plugin-html": "^1.3.0",
|
||||
"eslint-plugin-promise": "^1.0.8",
|
||||
"eslint-plugin-standard": "^1.3.2",
|
||||
"eventsource-polyfill": "^0.9.6",
|
||||
"express": "^4.15.2",
|
||||
"express": "^4.13.3",
|
||||
"extract-text-webpack-plugin": "^1.0.1",
|
||||
"file-loader": "^0.10.1",
|
||||
"file-loader": "^0.8.4",
|
||||
"function-bind": "^1.0.2",
|
||||
"html-webpack-plugin": "^2.28.0",
|
||||
"http-proxy-middleware": "^0.17.4",
|
||||
"inject-loader": "^3.0.0",
|
||||
"html-webpack-plugin": "^2.8.1",
|
||||
"http-proxy-middleware": "^0.12.0",
|
||||
"inject-loader": "^2.0.1",
|
||||
"isparta-loader": "^2.0.0",
|
||||
"jasmine-core": "^2.5.2",
|
||||
"json-loader": "^0.5.4",
|
||||
"karma": "^1.5.0",
|
||||
"karma-coverage": "^1.1.1",
|
||||
"karma-jasmine": "^1.0.2",
|
||||
"karma-mocha": "^1.2.0",
|
||||
"karma-phantomjs-launcher": "^1.0.4",
|
||||
"karma": "^0.13.15",
|
||||
"karma-coverage": "^0.5.5",
|
||||
"karma-mocha": "^0.2.2",
|
||||
"karma-phantomjs-launcher": "^1.0.0",
|
||||
"karma-sinon-chai": "^1.2.0",
|
||||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-spec-reporter": "0.0.30",
|
||||
"karma-webpack": "1.8.1",
|
||||
"lolex": "^1.6.0",
|
||||
"mocha": "^3.1.0",
|
||||
"nightwatch": "^0.9.14",
|
||||
"ora": "^1.2.0",
|
||||
"phantomjs-prebuilt": "^2.1.13",
|
||||
"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.2.6",
|
||||
"vue-hot-reload-api": "^2.0.11",
|
||||
"vue-html-loader": "^1.2.4",
|
||||
"vue-loader": "^11.3.4",
|
||||
"vue-style-loader": "^2.0.5",
|
||||
"vue-template-compiler": "^2.2.6",
|
||||
"webpack": "^1.13.2",
|
||||
"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"
|
||||
]
|
||||
"karma-spec-reporter": "0.0.24",
|
||||
"karma-webpack": "^1.7.0",
|
||||
"lodash": "^4.15.0",
|
||||
"lolex": "^1.4.0",
|
||||
"mocha": "^2.4.5",
|
||||
"nightwatch": "^0.8.18",
|
||||
"ora": "^0.2.0",
|
||||
"phantomjs-prebuilt": "^2.1.3",
|
||||
"selenium-server": "2.53.0",
|
||||
"shelljs": "^0.6.0",
|
||||
"sinon": "^1.17.3",
|
||||
"sinon-chai": "^2.8.0",
|
||||
"url-loader": "^0.5.7",
|
||||
"vue-hot-reload-api": "^1.2.0",
|
||||
"vue-html-loader": "^1.0.0",
|
||||
"vue-loader": "^8.3.0",
|
||||
"vue-style-loader": "^1.0.0",
|
||||
"webpack": "^1.12.2",
|
||||
"webpack-dev-middleware": "^1.4.0",
|
||||
"webpack-hot-middleware": "^2.6.0",
|
||||
"webpack-merge": "^0.8.3"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -3,23 +3,11 @@ 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'
|
||||
}
|
||||
)
|
||||
]
|
||||
)
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<canvas id="{{chartId}}" width="{{width}}" height="{{height}}" v-el:canvas></canvas>
|
||||
</div>
|
||||
`,
|
||||
|
||||
props: {
|
||||
chartId: {
|
||||
@@ -61,10 +49,11 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
methods: {
|
||||
renderChart (data, options) {
|
||||
render (data, options) {
|
||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||
|
||||
this._chart = new Chart(
|
||||
this.$refs.canvas.getContext('2d'), {
|
||||
this.$els.canvas.getContext('2d'), {
|
||||
type: 'bar',
|
||||
data: data,
|
||||
options: chartOptions
|
||||
|
||||
@@ -3,23 +3,11 @@ 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'
|
||||
}
|
||||
)
|
||||
]
|
||||
)
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
|
||||
</div>
|
||||
`,
|
||||
|
||||
props: {
|
||||
chartId: {
|
||||
@@ -39,33 +27,16 @@ export default Vue.extend({
|
||||
data () {
|
||||
return {
|
||||
defaultOptions: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
},
|
||||
gridLines: {
|
||||
display: false
|
||||
}
|
||||
}],
|
||||
xAxes: [ {
|
||||
gridLines: {
|
||||
display: false
|
||||
},
|
||||
categoryPercentage: 0.5,
|
||||
barPercentage: 0.2
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
renderChart (data, options) {
|
||||
render (data, options) {
|
||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||
|
||||
this._chart = new Chart(
|
||||
this.$refs.canvas.getContext('2d'), {
|
||||
this.$els.canvas.getContext('2d'), {
|
||||
type: 'bubble',
|
||||
data: data,
|
||||
options: chartOptions
|
||||
|
||||
@@ -3,23 +3,11 @@ 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'
|
||||
}
|
||||
)
|
||||
]
|
||||
)
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
|
||||
</div>
|
||||
`,
|
||||
|
||||
props: {
|
||||
chartId: {
|
||||
@@ -44,11 +32,11 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
methods: {
|
||||
renderChart (data, options) {
|
||||
render (data, options) {
|
||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||
|
||||
this._chart = new Chart(
|
||||
this.$refs.canvas.getContext('2d'), {
|
||||
this.$els.canvas.getContext('2d'), {
|
||||
type: 'doughnut',
|
||||
data: data,
|
||||
options: chartOptions
|
||||
|
||||
@@ -1,79 +0,0 @@
|
||||
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()
|
||||
}
|
||||
})
|
||||
@@ -3,23 +3,11 @@ 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'
|
||||
}
|
||||
)
|
||||
]
|
||||
)
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
|
||||
</div>
|
||||
`,
|
||||
|
||||
props: {
|
||||
chartId: {
|
||||
@@ -59,11 +47,11 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
methods: {
|
||||
renderChart (data, options) {
|
||||
render (data, options) {
|
||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||
|
||||
this._chart = new Chart(
|
||||
this.$refs.canvas.getContext('2d'), {
|
||||
this.$els.canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: chartOptions
|
||||
|
||||
@@ -3,23 +3,11 @@ 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'
|
||||
}
|
||||
)
|
||||
]
|
||||
)
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
|
||||
</div>
|
||||
`,
|
||||
|
||||
props: {
|
||||
chartId: {
|
||||
@@ -44,11 +32,11 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
methods: {
|
||||
renderChart (data, options) {
|
||||
render (data, options) {
|
||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||
|
||||
this._chart = new Chart(
|
||||
this.$refs.canvas.getContext('2d'), {
|
||||
this.$els.canvas.getContext('2d'), {
|
||||
type: 'pie',
|
||||
data: data,
|
||||
options: chartOptions
|
||||
|
||||
@@ -3,23 +3,11 @@ 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'
|
||||
}
|
||||
)
|
||||
]
|
||||
)
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
|
||||
</div>
|
||||
`,
|
||||
|
||||
props: {
|
||||
chartId: {
|
||||
@@ -44,11 +32,11 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
methods: {
|
||||
renderChart (data, options) {
|
||||
render (data, options) {
|
||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||
|
||||
this._chart = new Chart(
|
||||
this.$refs.canvas.getContext('2d'), {
|
||||
this.$els.canvas.getContext('2d'), {
|
||||
type: 'polarArea',
|
||||
data: data,
|
||||
options: chartOptions
|
||||
|
||||
@@ -3,23 +3,11 @@ 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'
|
||||
}
|
||||
)
|
||||
]
|
||||
)
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
|
||||
</div>
|
||||
`,
|
||||
|
||||
props: {
|
||||
chartId: {
|
||||
@@ -44,11 +32,11 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
methods: {
|
||||
renderChart (data, options) {
|
||||
render (data, options) {
|
||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||
|
||||
this._chart = new Chart(
|
||||
this.$refs.canvas.getContext('2d'), {
|
||||
this.$els.canvas.getContext('2d'), {
|
||||
type: 'radar',
|
||||
data: data,
|
||||
options: chartOptions
|
||||
|
||||
@@ -1,20 +1,11 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<h1 style="text-align:center;margin:40px 0;">Barchart</h1>
|
||||
<bar-example></bar-example>
|
||||
<h1 style="text-align:center;margin:40px 0;">Barchart with reactive mixing for live data</h1>
|
||||
<reactive-example></reactive-example>
|
||||
<h1 style="text-align:center;margin:40px 0;">Linechart</h1>
|
||||
<line-example></line-example>
|
||||
<h1 style="text-align:center;margin:40px 0;">Doughnutchart</h1>
|
||||
<doughnut-example></doughnut-example>
|
||||
<h1 style="text-align:center;margin:40px 0;">Piechart</h1>
|
||||
<pie-example></pie-example>
|
||||
<h1 style="text-align:center;margin:40px 0;">Radarchart</h1>
|
||||
<radar-example></radar-example>
|
||||
<h1 style="text-align:center;margin:40px 0;">Polararea</h1>
|
||||
<polar-area-example></polar-area-example>
|
||||
<h1 style="text-align:center;margin:40px 0;">Bubblechart</h1>
|
||||
<bubble-example></bubble-example>
|
||||
</div>
|
||||
</template>
|
||||
@@ -27,8 +18,6 @@
|
||||
import RadarExample from './RadarExample'
|
||||
import PolarAreaExample from './PolarAreaExample'
|
||||
import BubbleExample from './BubbleExample'
|
||||
import ReactiveExample from './ReactiveExample'
|
||||
import ReactivePropExample from './ReactivePropExample'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -38,9 +27,7 @@
|
||||
PieExample,
|
||||
RadarExample,
|
||||
PolarAreaExample,
|
||||
BubbleExample,
|
||||
ReactiveExample,
|
||||
ReactivePropExample
|
||||
BubbleExample
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import BarChart from '../BaseCharts/Bar'
|
||||
|
||||
export default BarChart.extend({
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
ready () {
|
||||
this.render({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
datasets: [
|
||||
{
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import BubbleChart from '../BaseCharts/Bubble'
|
||||
|
||||
export default BubbleChart.extend({
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
ready () {
|
||||
this.render({
|
||||
datasets: [
|
||||
{
|
||||
label: 'Data One',
|
||||
@@ -47,6 +47,6 @@ export default BubbleChart.extend({
|
||||
]
|
||||
}
|
||||
]
|
||||
}, {responsive: true, maintainAspectRatio: false})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import DoughnutChart from '../BaseCharts/Doughnut'
|
||||
|
||||
export default DoughnutChart.extend({
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
ready () {
|
||||
this.render({
|
||||
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
|
||||
datasets: [
|
||||
{
|
||||
@@ -15,6 +15,6 @@ export default DoughnutChart.extend({
|
||||
data: [40, 20, 80, 10]
|
||||
}
|
||||
]
|
||||
}, {responsive: true, maintainAspectRatio: false})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
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,8 +1,8 @@
|
||||
import LineChart from '../BaseCharts/Line'
|
||||
|
||||
export default LineChart.extend({
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
ready () {
|
||||
this.render({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
@@ -11,6 +11,6 @@ export default LineChart.extend({
|
||||
data: [40, 39, 10, 40, 39, 80, 40]
|
||||
}
|
||||
]
|
||||
}, {responsive: true, maintainAspectRatio: false})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import PieChart from '../BaseCharts/Pie'
|
||||
|
||||
export default PieChart.extend({
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
ready () {
|
||||
this.render({
|
||||
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
|
||||
datasets: [
|
||||
{
|
||||
@@ -15,6 +15,6 @@ export default PieChart.extend({
|
||||
data: [40, 20, 80, 10]
|
||||
}
|
||||
]
|
||||
}, {responsive: true, maintainAspectRatio: false})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import PolarAreaChart from '../BaseCharts/PolarArea'
|
||||
|
||||
export default PolarAreaChart.extend({
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
ready () {
|
||||
this.render({
|
||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||
datasets: [
|
||||
{
|
||||
@@ -24,6 +24,6 @@ export default PolarAreaChart.extend({
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
}, {responsive: true, maintainAspectRatio: false})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import RadarChart from '../BaseCharts/Radar'
|
||||
|
||||
export default RadarChart.extend({
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
ready () {
|
||||
this.render({
|
||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||
datasets: [
|
||||
{
|
||||
@@ -26,6 +26,6 @@ export default RadarChart.extend({
|
||||
data: [28, 48, 40, 19, 96, 27, 100]
|
||||
}
|
||||
]
|
||||
}, {responsive: true, maintainAspectRatio: false})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
import BarChart from '../BaseCharts/Bar'
|
||||
import reactiveData from '../mixins/reactiveData'
|
||||
|
||||
export default BarChart.extend({
|
||||
mixins: [reactiveData],
|
||||
data () {
|
||||
return {
|
||||
chartData: ''
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.fillData()
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
|
||||
|
||||
setInterval(() => {
|
||||
this.fillData()
|
||||
}, 5000)
|
||||
},
|
||||
|
||||
methods: {
|
||||
fillData () {
|
||||
this.chartData = {
|
||||
labels: ['January' + this.getRandomInt(), 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Data One',
|
||||
backgroundColor: '#f87979',
|
||||
data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
getRandomInt () {
|
||||
return Math.floor(Math.random() * (50 - 5 + 1)) + 5
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -1,10 +0,0 @@
|
||||
import BarChart from '../BaseCharts/Bar'
|
||||
import reactiveProp from '../mixins/reactiveProp'
|
||||
|
||||
export default BarChart.extend({
|
||||
mixins: [reactiveProp],
|
||||
|
||||
mounted () {
|
||||
this.renderChart(this.chartData)
|
||||
}
|
||||
})
|
||||
23
src/index.js
23
src/index.js
@@ -1,38 +1,19 @@
|
||||
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'
|
||||
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,
|
||||
PolarArea,
|
||||
Radar,
|
||||
Bubble,
|
||||
mixins
|
||||
Bubble
|
||||
}
|
||||
|
||||
export default VueCharts
|
||||
|
||||
export {
|
||||
VueCharts,
|
||||
Bar,
|
||||
HorizontalBar,
|
||||
Doughnut,
|
||||
Line,
|
||||
Pie,
|
||||
PolarArea,
|
||||
Radar,
|
||||
Bubble,
|
||||
mixins
|
||||
}
|
||||
module.exports = VueCharts
|
||||
|
||||
@@ -1,9 +0,0 @@
|
||||
// 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')
|
||||
@@ -1,7 +0,0 @@
|
||||
import reactiveData from './reactiveData.js'
|
||||
import reactiveProp from './reactiveProp.js'
|
||||
|
||||
export default {
|
||||
reactiveData,
|
||||
reactiveProp
|
||||
}
|
||||
@@ -1,42 +0,0 @@
|
||||
module.exports = {
|
||||
data () {
|
||||
return {
|
||||
chartData: null
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
'chartData': {
|
||||
handler (newData, oldData) {
|
||||
if (oldData) {
|
||||
let chart = this._chart
|
||||
|
||||
// Get new and old DataSet Labels
|
||||
let newDatasetLabels = newData.datasets.map((dataset) => {
|
||||
return dataset.label
|
||||
})
|
||||
|
||||
let oldDatasetLabels = oldData.datasets.map((dataset) => {
|
||||
return dataset.label
|
||||
})
|
||||
|
||||
// Stringify 'em for easier compare
|
||||
const oldLabels = JSON.stringify(oldDatasetLabels)
|
||||
const newLabels = JSON.stringify(newDatasetLabels)
|
||||
|
||||
// Check if Labels are equal and if dataset length is equal
|
||||
if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
|
||||
newData.datasets.forEach((dataset, i) => {
|
||||
chart.data.datasets[i] = dataset
|
||||
})
|
||||
|
||||
chart.data.labels = newData.labels
|
||||
chart.update()
|
||||
} else {
|
||||
chart.destroy()
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
module.exports = {
|
||||
props: {
|
||||
chartData: {
|
||||
required: true
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
'chartData': {
|
||||
handler (newData, oldData) {
|
||||
if (oldData) {
|
||||
let chart = this._chart
|
||||
|
||||
// Get new and old DataSet Labels
|
||||
let newDatasetLabels = newData.datasets.map((dataset) => {
|
||||
return dataset.label
|
||||
})
|
||||
|
||||
let oldDatasetLabels = oldData.datasets.map((dataset) => {
|
||||
return dataset.label
|
||||
})
|
||||
|
||||
// Stringify 'em for easier compare
|
||||
const oldLabels = JSON.stringify(oldDatasetLabels)
|
||||
const newLabels = JSON.stringify(newDatasetLabels)
|
||||
|
||||
// Check if Labels are equal and if dataset length is equal
|
||||
if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
|
||||
newData.datasets.forEach((dataset, i) => {
|
||||
chart.data.datasets[i] = dataset
|
||||
})
|
||||
|
||||
chart.data.labels = newData.labels
|
||||
chart.update()
|
||||
} else {
|
||||
chart.destroy()
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -4,10 +4,6 @@
|
||||
},
|
||||
"globals": {
|
||||
"expect": true,
|
||||
"jasmine": true,
|
||||
"sinon": true
|
||||
},
|
||||
"rules": {
|
||||
"no-unused-expressions": 0
|
||||
}
|
||||
}
|
||||
|
||||
@@ -54,7 +54,7 @@ module.exports = function (config) {
|
||||
// http://karma-runner.github.io/0.13/config/browsers.html
|
||||
// 2. add it to the `browsers` array below.
|
||||
browsers: ['PhantomJS'],
|
||||
frameworks: ['mocha', 'sinon-chai', 'jasmine'],
|
||||
frameworks: ['mocha', 'sinon-chai'],
|
||||
reporters: ['spec', 'coverage'],
|
||||
files: ['./index.js'],
|
||||
preprocessors: {
|
||||
|
||||
@@ -2,63 +2,16 @@ import Vue from 'vue'
|
||||
import BarChart from 'src/examples/BarExample'
|
||||
|
||||
describe('BarChart', () => {
|
||||
let el
|
||||
|
||||
beforeEach(() => {
|
||||
el = document.createElement('div')
|
||||
})
|
||||
|
||||
it('should render a canvas', () => {
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
BarChart
|
||||
)
|
||||
},
|
||||
el: 'body',
|
||||
replace: false,
|
||||
template: '<bar-chart></bar-chart>',
|
||||
components: { BarChart }
|
||||
}).$mount(el)
|
||||
|
||||
})
|
||||
expect(vm.$el.querySelector('#bar-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(
|
||||
BarChart, {
|
||||
props: {
|
||||
chartId: 'barchartprop'
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
components: { BarChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$el.querySelector('#barchartprop')).not.to.be.an('undefined')
|
||||
})
|
||||
|
||||
it('should destroy chart instance', (done) => {
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
BarChart
|
||||
)
|
||||
},
|
||||
components: { BarChart }
|
||||
}).$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()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@@ -2,63 +2,16 @@ import Vue from 'vue'
|
||||
import BubbleChart from 'src/examples/BubbleExample'
|
||||
|
||||
describe('BubbleChart', () => {
|
||||
let el
|
||||
|
||||
beforeEach(() => {
|
||||
el = document.createElement('div')
|
||||
})
|
||||
|
||||
it('should render a canvas', () => {
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
BubbleChart
|
||||
)
|
||||
},
|
||||
el: 'body',
|
||||
replace: false,
|
||||
template: '<bubble-chart></bubble-chart>',
|
||||
components: { BubbleChart }
|
||||
}).$mount(el)
|
||||
|
||||
})
|
||||
expect(vm.$el.querySelector('#bubble-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(
|
||||
BubbleChart, {
|
||||
props: {
|
||||
chartId: 'bubblechartprop'
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
components: { BubbleChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$el.querySelector('#bubblechartprop')).not.to.be.an('undefined')
|
||||
})
|
||||
|
||||
it('should destroy chart instance', (done) => {
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
BubbleChart
|
||||
)
|
||||
},
|
||||
components: { BubbleChart }
|
||||
}).$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()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@@ -2,63 +2,16 @@ import Vue from 'vue'
|
||||
import DoughnutChart from 'src/examples/DoughnutExample'
|
||||
|
||||
describe('DoughnutChart', () => {
|
||||
let el
|
||||
|
||||
beforeEach(() => {
|
||||
el = document.createElement('div')
|
||||
})
|
||||
|
||||
it('should render a canvas', () => {
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
DoughnutChart
|
||||
)
|
||||
},
|
||||
el: 'body',
|
||||
replace: false,
|
||||
template: '<doughnut-chart></doughnut-chart>',
|
||||
components: { DoughnutChart }
|
||||
}).$mount(el)
|
||||
|
||||
})
|
||||
expect(vm.$el.querySelector('#doughnut-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(
|
||||
DoughnutChart, {
|
||||
props: {
|
||||
chartId: 'doughnutchartprop'
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
components: { DoughnutChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$el.querySelector('#doughnutchartprop')).not.to.be.an('undefined')
|
||||
})
|
||||
|
||||
it('should destroy chart instance', (done) => {
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
DoughnutChart
|
||||
)
|
||||
},
|
||||
components: { DoughnutChart }
|
||||
}).$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()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@@ -1,64 +0,0 @@
|
||||
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()
|
||||
})
|
||||
})
|
||||
})
|
||||
@@ -2,63 +2,16 @@ import Vue from 'vue'
|
||||
import LineChart from 'src/examples/LineExample'
|
||||
|
||||
describe('LineChart', () => {
|
||||
let el
|
||||
|
||||
beforeEach(() => {
|
||||
el = document.createElement('div')
|
||||
})
|
||||
|
||||
it('should render a canvas', () => {
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
LineChart
|
||||
)
|
||||
},
|
||||
el: 'body',
|
||||
replace: false,
|
||||
template: '<line-chart></line-chart>',
|
||||
components: { LineChart }
|
||||
}).$mount(el)
|
||||
|
||||
})
|
||||
expect(vm.$el.querySelector('#line-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(
|
||||
LineChart, {
|
||||
props: {
|
||||
chartId: 'linechartprop'
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
components: { LineChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$el.querySelector('#linechartprop')).not.to.be.an('undefined')
|
||||
})
|
||||
|
||||
it('should destroy chart instance', (done) => {
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
LineChart
|
||||
)
|
||||
},
|
||||
components: { LineChart }
|
||||
}).$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()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@@ -2,62 +2,16 @@ import Vue from 'vue'
|
||||
import PieChart from 'src/examples/PieExample'
|
||||
|
||||
describe('PieChart', () => {
|
||||
let el
|
||||
|
||||
beforeEach(() => {
|
||||
el = document.createElement('div')
|
||||
})
|
||||
|
||||
it('should render a canvas', () => {
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
PieChart
|
||||
)
|
||||
},
|
||||
el: 'body',
|
||||
replace: false,
|
||||
template: '<pie-chart></pie-chart>',
|
||||
components: { PieChart }
|
||||
}).$mount(el)
|
||||
|
||||
})
|
||||
expect(vm.$el.querySelector('#pie-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(
|
||||
PieChart, {
|
||||
props: {
|
||||
chartId: 'piechartprop'
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
components: { PieChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$el.querySelector('#piechartprop')).not.to.be.an('undefined')
|
||||
})
|
||||
it('should destroy chart instance', (done) => {
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
PieChart
|
||||
)
|
||||
},
|
||||
components: { PieChart }
|
||||
}).$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()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@@ -2,63 +2,16 @@ import Vue from 'vue'
|
||||
import PolarChart from 'src/examples/PolarAreaExample'
|
||||
|
||||
describe('PolarChart', () => {
|
||||
let el
|
||||
|
||||
beforeEach(() => {
|
||||
el = document.createElement('div')
|
||||
})
|
||||
|
||||
it('should render a canvas', () => {
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
PolarChart
|
||||
)
|
||||
},
|
||||
el: 'body',
|
||||
replace: false,
|
||||
template: '<polar-chart></polar-chart>',
|
||||
components: { PolarChart }
|
||||
}).$mount(el)
|
||||
|
||||
})
|
||||
expect(vm.$el.querySelector('#polar-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(
|
||||
PolarChart, {
|
||||
props: {
|
||||
chartId: 'polarchartprop'
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
components: { PolarChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$el.querySelector('#polarchartprop')).not.to.be.an('undefined')
|
||||
})
|
||||
|
||||
it('should destroy chart instance', (done) => {
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
PolarChart
|
||||
)
|
||||
},
|
||||
components: { PolarChart }
|
||||
}).$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()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@@ -2,62 +2,16 @@ import Vue from 'vue'
|
||||
import RadarChart from 'src/examples/RadarExample'
|
||||
|
||||
describe('RadarChart', () => {
|
||||
let el
|
||||
|
||||
beforeEach(() => {
|
||||
el = document.createElement('div')
|
||||
})
|
||||
|
||||
it('should render a canvas', () => {
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
RadarChart
|
||||
)
|
||||
},
|
||||
el: 'body',
|
||||
replace: false,
|
||||
template: '<radar-chart></radar-chart>',
|
||||
components: { RadarChart }
|
||||
}).$mount(el)
|
||||
|
||||
})
|
||||
expect(vm.$el.querySelector('#radar-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(
|
||||
RadarChart, {
|
||||
props: {
|
||||
chartId: 'rodarchartprop'
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
components: { RadarChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$el.querySelector('#rodarchartprop')).not.to.be.an('undefined')
|
||||
})
|
||||
it('should destroy chart instance', (done) => {
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
RadarChart
|
||||
)
|
||||
},
|
||||
components: { RadarChart }
|
||||
}).$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()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user