From 3ef3b22c7f544c96218d8c68d0fd870217341451 Mon Sep 17 00:00:00 2001 From: Jakub Juszczak Date: Sat, 20 Oct 2018 13:19:34 +0200 Subject: [PATCH] chore(docs): Update to vuepress --- docs/.vuepress/config.js | 132 + docs/.vuepress/dist/404.html | 17 + .../dist/assets/css/1.styles.3ac4ce2d.css} | 0 .../dist/assets/css/2.styles.5a2a73d8.css | 1 + .../dist/assets/css/styles.1a764383.css | 1 + .../dist/assets/img/search.83621669.svg | 1 + docs/.vuepress/dist/assets/js/1.3ac4ce2d.js | 1 + docs/.vuepress/dist/assets/js/2.5a2a73d8.js | 1 + docs/.vuepress/dist/assets/js/3.8d1b5fa1.js | 1 + docs/.vuepress/dist/assets/js/app.1a764383.js | 8 + docs/.vuepress/dist/index.html | 17 + .../public}/vue-chartjs.png | Bin .../public}/vue-chartjs.svg | 0 docs/README.md | 403 +- docs/fr-fr/README.md | 377 +- docs/fr-fr/guide/README.md | 0 docs/fr-fr/reference/README.md | 0 docs/guide/README.md | 475 ++ docs/id/README.md | 374 +- docs/id/guide/README.md | 0 docs/id/reference/README.md | 0 docs/ja/README.md | 374 +- docs/ja/guide/README.md | 0 docs/ja/reference/README.md | 0 docs/pt-br/README.md | 305 +- docs/pt-br/guide/README.md | 0 docs/pt-br/reference/README.md | 0 docs/reference/README.md | 128 + docs/ru/README.md | 311 +- docs/ru/guide/README.md | 0 docs/ru/reference/README.md | 0 docs/zh-cn/README.md | 373 +- docs/zh-cn/guide/README.md | 0 docs/zh-cn/reference/README.md | 0 docs_old/.nojekyll | 0 {docs => docs_old}/CNAME | 0 docs_old/README.md | 264 + {docs => docs_old}/_landing.html | 0 {docs => docs_old}/assets/bar.png | Bin {docs => docs_old}/assets/bubble.png | Bin {docs => docs_old}/assets/doughnut.png | Bin {docs => docs_old}/assets/line.png | Bin {docs => docs_old}/assets/logo.png | Bin {docs => docs_old}/assets/pie.png | Bin {docs => docs_old}/assets/polar.png | Bin {docs => docs_old}/assets/radar.png | Bin {docs => docs_old}/assets/scatter.png | Bin docs_old/assets/vue-chartjs.png | Bin 0 -> 16410 bytes docs_old/assets/vue-chartjs.svg | 1 + {docs => docs_old}/config.js | 0 docs_old/fr-fr/README.md | 367 ++ docs_old/id/README.md | 364 ++ {docs => docs_old}/index.html | 0 docs_old/ja/README.md | 364 ++ docs_old/pt-br/README.md | 295 + docs_old/ru/README.md | 301 + docs_old/zh-cn/README.md | 363 ++ package.json | 15 +- yarn.lock | 5547 ++++++++++++++++- 59 files changed, 8669 insertions(+), 2512 deletions(-) create mode 100644 docs/.vuepress/config.js create mode 100644 docs/.vuepress/dist/404.html rename docs/{.nojekyll => .vuepress/dist/assets/css/1.styles.3ac4ce2d.css} (100%) create mode 100644 docs/.vuepress/dist/assets/css/2.styles.5a2a73d8.css create mode 100644 docs/.vuepress/dist/assets/css/styles.1a764383.css create mode 100644 docs/.vuepress/dist/assets/img/search.83621669.svg create mode 100644 docs/.vuepress/dist/assets/js/1.3ac4ce2d.js create mode 100644 docs/.vuepress/dist/assets/js/2.5a2a73d8.js create mode 100644 docs/.vuepress/dist/assets/js/3.8d1b5fa1.js create mode 100644 docs/.vuepress/dist/assets/js/app.1a764383.js create mode 100644 docs/.vuepress/dist/index.html rename docs/{assets => .vuepress/public}/vue-chartjs.png (100%) rename docs/{assets => .vuepress/public}/vue-chartjs.svg (100%) create mode 100644 docs/fr-fr/guide/README.md create mode 100644 docs/fr-fr/reference/README.md create mode 100644 docs/guide/README.md create mode 100644 docs/id/guide/README.md create mode 100644 docs/id/reference/README.md create mode 100644 docs/ja/guide/README.md create mode 100644 docs/ja/reference/README.md create mode 100644 docs/pt-br/guide/README.md create mode 100644 docs/pt-br/reference/README.md create mode 100644 docs/reference/README.md create mode 100644 docs/ru/guide/README.md create mode 100644 docs/ru/reference/README.md create mode 100644 docs/zh-cn/guide/README.md create mode 100644 docs/zh-cn/reference/README.md create mode 100644 docs_old/.nojekyll rename {docs => docs_old}/CNAME (100%) create mode 100644 docs_old/README.md rename {docs => docs_old}/_landing.html (100%) rename {docs => docs_old}/assets/bar.png (100%) rename {docs => docs_old}/assets/bubble.png (100%) rename {docs => docs_old}/assets/doughnut.png (100%) rename {docs => docs_old}/assets/line.png (100%) rename {docs => docs_old}/assets/logo.png (100%) rename {docs => docs_old}/assets/pie.png (100%) rename {docs => docs_old}/assets/polar.png (100%) rename {docs => docs_old}/assets/radar.png (100%) rename {docs => docs_old}/assets/scatter.png (100%) create mode 100644 docs_old/assets/vue-chartjs.png create mode 100644 docs_old/assets/vue-chartjs.svg rename {docs => docs_old}/config.js (100%) create mode 100644 docs_old/fr-fr/README.md create mode 100644 docs_old/id/README.md rename {docs => docs_old}/index.html (100%) create mode 100644 docs_old/ja/README.md create mode 100644 docs_old/pt-br/README.md create mode 100644 docs_old/ru/README.md create mode 100644 docs_old/zh-cn/README.md diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js new file mode 100644 index 00000000..a8168297 --- /dev/null +++ b/docs/.vuepress/config.js @@ -0,0 +1,132 @@ +module.exports = { + title: 'vue-chartjs documentation', + themeConfig: { + nav: [ + { text: 'Home', link: '/' }, + { text: 'Guide', link: '/guide/' }, + { text: 'References', link: '/reference/' } + ], + sidebar: 'auto', + repo: 'apertureless/vue-chartjs', + editLinks: true, + editLinkText: 'Help us improve this page!', + docsDir: 'docs', + docsBranch: 'master', + locales: { + '/': { + selectText: 'Languages', + label: 'English', + editLinkText: 'Edit this page on GitHub', + serviceWorker: { + updatePopup: { + message: "New content is available.", + buttonText: "Refresh" + } + }, + }, + '/zh-cn/': { + selectText: 'Languages', + label: '中文(简体)', + editLinkText: 'Edit this page on GitHub', + serviceWorker: { + updatePopup: { + message: "New content is available.", + buttonText: "Refresh" + } + }, + }, + '/id/': { + selectText: 'Languages', + label: 'Bahasa Indonesia', + editLinkText: 'Edit this page on GitHub', + serviceWorker: { + updatePopup: { + message: "New content is available.", + buttonText: "Refresh" + } + }, + }, + '/ja/': { + selectText: 'Languages', + label: '日本語', + editLinkText: 'Edit this page on GitHub', + serviceWorker: { + updatePopup: { + message: "New content is available.", + buttonText: "Refresh" + } + }, + }, + '/ru/': { + selectText: 'Languages', + label: 'Русский', + editLinkText: 'Edit this page on GitHub', + serviceWorker: { + updatePopup: { + message: "New content is available.", + buttonText: "Refresh" + } + }, + }, + '/pt-br/': { + selectText: 'Languages', + label: 'Português do Brasil', + editLinkText: 'Edit this page on GitHub', + serviceWorker: { + updatePopup: { + message: "New content is available.", + buttonText: "Refresh" + } + }, + }, + '/fr-fr/': { + selectText: 'Languages', + label: 'Français', + editLinkText: 'Edit this page on GitHub', + serviceWorker: { + updatePopup: { + message: "New content is available.", + buttonText: "Refresh" + } + }, + } + } + }, + locales: { + '/': { + lang: 'en-US', + title: '📈 vue-chartjs', + description: '⚡ Easy and beautiful charts with Chart.js and Vue.js' + }, + '/zh-cn/': { + lang: 'zh-CN', + title: '📈 vue-chartjs', + description: '⚡ Easy and beautiful charts with Chart.js and Vue.js' + }, + '/id/': { + lang: 'id', + title: '📈 vue-chartjs', + description: '⚡ Easy and beautiful charts with Chart.js and Vue.js' + }, + '/ja/': { + lang: 'ja', + title: '📈 vue-chartjs', + description: '⚡ Easy and beautiful charts with Chart.js and Vue.js' + }, + '/ru/': { + lang: 'ru', + title: '📈 vue-chartjs', + description: '⚡ Easy and beautiful charts with Chart.js and Vue.js' + }, + '/pt-br/': { + lang: 'pt-br', + title: '📈 vue-chartjs', + description: '⚡ Easy and beautiful charts with Chart.js and Vue.js' + }, + '/fr-fr/': { + lang: 'fr-fr', + title: '📈 vue-chartjs', + description: '⚡ Easy and beautiful charts with Chart.js and Vue.js' + } + } +} diff --git a/docs/.vuepress/dist/404.html b/docs/.vuepress/dist/404.html new file mode 100644 index 00000000..c747af53 --- /dev/null +++ b/docs/.vuepress/dist/404.html @@ -0,0 +1,17 @@ + + + + + + VuePress + + + + + + + +

404

There's nothing here.
Take me home.
+ + + diff --git a/docs/.nojekyll b/docs/.vuepress/dist/assets/css/1.styles.3ac4ce2d.css similarity index 100% rename from docs/.nojekyll rename to docs/.vuepress/dist/assets/css/1.styles.3ac4ce2d.css diff --git a/docs/.vuepress/dist/assets/css/2.styles.5a2a73d8.css b/docs/.vuepress/dist/assets/css/2.styles.5a2a73d8.css new file mode 100644 index 00000000..4cbd7d26 --- /dev/null +++ b/docs/.vuepress/dist/assets/css/2.styles.5a2a73d8.css @@ -0,0 +1 @@ +.badge[data-v-099ab69c]{display:inline-block;font-size:14px;height:18px;line-height:18px;border-radius:3px;padding:0 6px;color:#fff;margin-right:5px;background-color:#42b983}.badge.middle[data-v-099ab69c]{vertical-align:middle}.badge.top[data-v-099ab69c]{vertical-align:top}.badge.green[data-v-099ab69c],.badge.tip[data-v-099ab69c]{background-color:#42b983}.badge.error[data-v-099ab69c]{background-color:#da5961}.badge.warn[data-v-099ab69c],.badge.warning[data-v-099ab69c],.badge.yellow[data-v-099ab69c]{background-color:#e7c000} \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/css/styles.1a764383.css b/docs/.vuepress/dist/assets/css/styles.1a764383.css new file mode 100644 index 00000000..9d2ca394 --- /dev/null +++ b/docs/.vuepress/dist/assets/css/styles.1a764383.css @@ -0,0 +1 @@ +.home{padding:3.6rem 2rem 0;max-width:960px;margin:0 auto}.home .hero{text-align:center}.home .hero img{max-height:280px;display:block;margin:3rem auto 1.5rem}.home .hero h1{font-size:3rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.8rem auto}.home .hero .description{max-width:35rem;font-size:1.6rem;line-height:1.3;color:#6a8bad}.home .hero .action-button{display:inline-block;font-size:1.2rem;color:#fff;background-color:#3eaf7c;padding:.8rem 1.6rem;border-radius:4px;transition:background-color .1s ease;box-sizing:border-box;border-bottom:1px solid #389d70}.home .hero .action-button:hover{background-color:#4abf8a}.home .features{border-top:1px solid #eaecef;padding:1.2rem 0;margin-top:2.5rem;display:flex;flex-wrap:wrap;align-items:flex-start;align-content:stretch;justify-content:space-between}.home .feature{flex-grow:1;flex-basis:30%;max-width:30%}.home .feature h2{font-size:1.4rem;font-weight:500;border-bottom:none;padding-bottom:0;color:#3a5169}.home .feature p{color:#4e6e8e}.home .footer{padding:2.5rem;border-top:1px solid #eaecef;text-align:center;color:#4e6e8e}@media (max-width:719px){.home .features{flex-direction:column}.home .feature{max-width:100%;padding:0 2.5rem}}@media (max-width:419px){.home{padding-left:1.5rem;padding-right:1.5rem}.home .hero img{max-height:210px;margin:2rem auto 1.2rem}.home .hero h1{font-size:2rem}.home .hero .action,.home .hero .description,.home .hero h1{margin:1.2rem auto}.home .hero .description{font-size:1.2rem}.home .hero .action-button{font-size:1rem;padding:.6rem 1.2rem}.home .feature h2{font-size:1.25rem}}.sidebar-button{display:none;width:1.25rem;height:1.25rem;position:absolute;padding:.6rem;top:.6rem;left:1rem}.sidebar-button .icon{display:block;width:1.25rem;height:1.25rem}@media (max-width:719px){.sidebar-button{display:block}}.search-box{display:inline-block;position:relative;margin-right:1rem}.search-box input{cursor:text;width:10rem;color:#4e6e8e;display:inline-block;border:1px solid #cfd4db;border-radius:2rem;font-size:.9rem;line-height:2rem;padding:0 .5rem 0 2rem;outline:none;transition:all .2s ease;background:#fff url(/assets/img/search.83621669.svg) .6rem .5rem no-repeat;background-size:1rem}.search-box input:focus{cursor:auto;border-color:#3eaf7c}.search-box .suggestions{background:#fff;width:20rem;position:absolute;top:1.5rem;border:1px solid #cfd4db;border-radius:6px;padding:.4rem;list-style-type:none}.search-box .suggestions.align-right{right:0}.search-box .suggestion{line-height:1.4;padding:.4rem .6rem;border-radius:4px;cursor:pointer}.search-box .suggestion a{white-space:normal;color:#5d82a6}.search-box .suggestion a .page-title{font-weight:600}.search-box .suggestion a .header{font-size:.9em;margin-left:.25em}.search-box .suggestion.focused{background-color:#f3f4f5}.search-box .suggestion.focused a{color:#3eaf7c}@media (max-width:959px){.search-box input{cursor:pointer;width:0;border-color:transparent;position:relative}.search-box input:focus{cursor:text;left:0;width:10rem}}@media (max-width:959px) and (min-width:719px){.search-box .suggestions{left:0}}@media (max-width:719px){.search-box{margin-right:0}.search-box input{left:1rem}.search-box .suggestions{right:0}}@media (max-width:419px){.search-box .suggestions{width:calc(100vw - 4rem)}.search-box input:focus{width:8rem}}.dropdown-enter,.dropdown-leave-to{height:0!important}.dropdown-wrapper{cursor:pointer}.dropdown-wrapper .dropdown-title{display:block}.dropdown-wrapper .dropdown-title:hover{border-color:transparent}.dropdown-wrapper .dropdown-title .arrow{vertical-align:middle;margin-top:-1px;margin-left:.4rem}.dropdown-wrapper .nav-dropdown .dropdown-item{color:inherit;line-height:1.7rem}.dropdown-wrapper .nav-dropdown .dropdown-item h4{margin:.45rem 0 0;border-top:1px solid #eee;padding:.45rem 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper{padding:0;list-style:none}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem-wrapper .dropdown-subitem{font-size:.9em}.dropdown-wrapper .nav-dropdown .dropdown-item a{display:block;line-height:1.7rem;position:relative;border-bottom:none;font-weight:400;margin-bottom:0;padding:0 1.5rem 0 1.25rem}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active,.dropdown-wrapper .nav-dropdown .dropdown-item a:hover{color:#3eaf7c}.dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{content:"";width:0;height:0;border-left:5px solid #3eaf7c;border-top:3px solid transparent;border-bottom:3px solid transparent;position:absolute;top:calc(50% - 2px);left:9px}.dropdown-wrapper .nav-dropdown .dropdown-item:first-child h4{margin-top:0;padding-top:0;border-top:0}@media (max-width:719px){.dropdown-wrapper.open .dropdown-title{margin-bottom:.5rem}.dropdown-wrapper .nav-dropdown{transition:height .1s ease-out;overflow:hidden}.dropdown-wrapper .nav-dropdown .dropdown-item h4{border-top:0;margin-top:0;padding-top:0}.dropdown-wrapper .nav-dropdown .dropdown-item>a,.dropdown-wrapper .nav-dropdown .dropdown-item h4{font-size:15px;line-height:2rem}.dropdown-wrapper .nav-dropdown .dropdown-item .dropdown-subitem{font-size:14px;padding-left:1rem}}@media (min-width:719px){.dropdown-wrapper{height:1.8rem}.dropdown-wrapper:hover .nav-dropdown{display:block!important}.dropdown-wrapper .dropdown-title .arrow{border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #ccc;border-bottom:0}.dropdown-wrapper .nav-dropdown{display:none;height:auto!important;box-sizing:border-box;max-height:calc(100vh - 2.7rem);overflow-y:auto;position:absolute;top:100%;right:0;background-color:#fff;padding:.6rem 0;border:1px solid #ddd;border-bottom-color:#ccc;text-align:left;border-radius:.25rem;white-space:nowrap;margin:0}}.nav-links{display:inline-block}.nav-links a{line-height:1.4rem;color:inherit}.nav-links a.router-link-active,.nav-links a:hover{color:#3eaf7c}.nav-links .nav-item{position:relative;display:inline-block;margin-left:1.5rem;line-height:2rem}.nav-links .nav-item:first-child{margin-left:0}.nav-links .repo-link{margin-left:1.5rem}@media (max-width:719px){.nav-links .nav-item,.nav-links .repo-link{margin-left:0}}@media (min-width:719px){.nav-links a.router-link-active,.nav-links a:hover{color:#2c3e50}.nav-item>a:not(.external).router-link-active,.nav-item>a:not(.external):hover{margin-bottom:-2px;border-bottom:2px solid #46bd87}}.navbar{padding:.7rem 1.5rem;line-height:2.2rem;position:relative}.navbar a,.navbar img,.navbar span{display:inline-block}.navbar .logo{height:2.2rem;min-width:2.2rem;margin-right:.8rem;vertical-align:top}.navbar .site-name{font-size:1.3rem;font-weight:600;color:#2c3e50;position:relative}.navbar .links{padding-left:1.5rem;box-sizing:border-box;background-color:#fff;white-space:nowrap;font-size:.9rem;position:absolute;right:1.5rem;top:.7rem;display:flex}.navbar .links .search-box{flex:0 0 auto;vertical-align:top}.navbar .links .nav-links{flex:1}@media (max-width:719px){.navbar{padding-left:4rem}.navbar .can-hide{display:none}.navbar .links{padding-left:1.5rem}}.page-edit,.page-nav{max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.page-edit,.page-nav{padding:2rem}}@media (max-width:419px){.page-edit,.page-nav{padding:1.5rem}}.page{padding-bottom:2rem}.page-edit{padding-top:1rem;padding-bottom:1rem;overflow:auto}.page-edit .edit-link{display:inline-block}.page-edit .edit-link a{color:#4e6e8e;margin-right:.25rem}.page-edit .last-updated{float:right;font-size:.9em}.page-edit .last-updated .prefix{font-weight:500;color:#4e6e8e}.page-edit .last-updated .time{font-weight:400;color:#aaa}.page-nav{padding-top:1rem;padding-bottom:0}.page-nav .inner{min-height:2rem;margin-top:0;border-top:1px solid #eaecef;padding-top:1rem;overflow:auto}.page-nav .next{float:right}@media (max-width:719px){.page-edit .edit-link{margin-bottom:.5rem}.page-edit .last-updated{font-size:.8em;float:none;text-align:left}}.sidebar .sidebar-sub-headers{padding-left:1rem;font-size:.95em}a.sidebar-link{font-weight:400;display:inline-block;color:#2c3e50;border-left:.25rem solid transparent;padding:.35rem 1rem .35rem 1.25rem;line-height:1.4;width:100%;box-sizing:border-box}a.sidebar-link:hover{color:#3eaf7c}a.sidebar-link.active{font-weight:600;color:#3eaf7c;border-left-color:#3eaf7c}.sidebar-group a.sidebar-link{padding-left:2rem}.sidebar-sub-headers a.sidebar-link{padding-top:.25rem;padding-bottom:.25rem;border-left:none}.sidebar-sub-headers a.sidebar-link.active{font-weight:500}.sidebar-group:not(.first){margin-top:1em}.sidebar-group .sidebar-group{padding-left:.5em}.sidebar-group:not(.collapsable) .sidebar-heading{cursor:auto;color:inherit}.sidebar-heading{color:#999;transition:color .15s ease;cursor:pointer;font-size:1.1em;font-weight:700;padding:0 1.5rem;margin-top:0;margin-bottom:.5rem}.sidebar-heading.open,.sidebar-heading:hover{color:inherit}.sidebar-heading .arrow{position:relative;top:-.12em;left:.5em}.sidebar-heading:.open .arrow{top:-.18em}.sidebar-group-items{transition:height .1s ease-out;overflow:hidden}.sidebar ul{padding:0;margin:0;list-style-type:none}.sidebar a{display:inline-block}.sidebar .nav-links{display:none;border-bottom:1px solid #eaecef;padding:.5rem 0 .75rem 0}.sidebar .nav-links a{font-weight:600}.sidebar .nav-links .nav-item,.sidebar .nav-links .repo-link{display:block;line-height:1.25rem;font-size:1.1em;padding:.5rem 0 .5rem 1.5rem}.sidebar .sidebar-links{padding:1.5rem 0}@media (max-width:719px){.sidebar .nav-links{display:block}.sidebar .nav-links .dropdown-wrapper .nav-dropdown .dropdown-item a.router-link-active:after{top:calc(1rem - 2px)}.sidebar .sidebar-links{padding:1rem 0}}.sw-update-popup{position:fixed;right:1em;bottom:1em;padding:1em;border:1px solid #3eaf7c;border-radius:3px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.5);text-align:center}.sw-update-popup button{margin-top:.5em;padding:.25em 2em}.sw-update-popup-enter-active,.sw-update-popup-leave-active{transition:opacity .3s,transform .3s}.sw-update-popup-enter,.sw-update-popup-leave-to{opacity:0;transform:translateY(50%) scale(.5)}code[class*=language-],pre[class*=language-]{color:#ccc;background:none;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#2d2d2d}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.block-comment,.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#999}.token.punctuation{color:#ccc}.token.attr-name,.token.deleted,.token.namespace,.token.tag{color:#e2777a}.token.function-name{color:#6196cc}.token.boolean,.token.function,.token.number{color:#f08d49}.token.class-name,.token.constant,.token.property,.token.symbol{color:#f8c555}.token.atrule,.token.builtin,.token.important,.token.keyword,.token.selector{color:#cc99cd}.token.attr-value,.token.char,.token.regex,.token.string,.token.variable{color:#7ec699}.token.entity,.token.operator,.token.url{color:#67cdcc}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.token.inserted{color:green}#nprogress{pointer-events:none}#nprogress .bar{background:#3eaf7c;position:fixed;z-index:1031;top:0;left:0;width:100%;height:2px}#nprogress .peg{display:block;position:absolute;right:0;width:100px;height:100%;box-shadow:0 0 10px #3eaf7c,0 0 5px #3eaf7c;opacity:1;transform:rotate(3deg) translateY(-4px)}#nprogress .spinner{display:block;position:fixed;z-index:1031;top:15px;right:15px}#nprogress .spinner-icon{width:18px;height:18px;box-sizing:border-box;border:2px solid transparent;border-top-color:#3eaf7c;border-left-color:#3eaf7c;border-radius:50%;animation:nprogress-spinner .4s linear infinite}.nprogress-custom-parent{overflow:hidden;position:relative}.nprogress-custom-parent #nprogress .bar,.nprogress-custom-parent #nprogress .spinner{position:absolute}@keyframes nprogress-spinner{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.content code{color:#476582;padding:.25rem .5rem;margin:0;font-size:.85em;background-color:rgba(27,31,35,.05);border-radius:3px}.content pre,.content pre[class*=language-]{line-height:1.4;padding:1.25rem 1.5rem;margin:.85rem 0;background-color:#282c34;border-radius:6px;overflow:auto}.content pre[class*=language-] code,.content pre code{color:#fff;padding:0;background-color:transparent;border-radius:0}div[class*=language-]{position:relative;background-color:#282c34;border-radius:6px}div[class*=language-] .highlight-lines{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;padding-top:1.3rem;position:absolute;top:0;left:0;width:100%;line-height:1.4}div[class*=language-] .highlight-lines .highlighted{background-color:rgba(0,0,0,.66)}div[class*=language-] pre,div[class*=language-] pre[class*=language-]{background:transparent;position:relative;z-index:1}div[class*=language-]:before{position:absolute;z-index:3;top:.8em;right:1em;font-size:.75rem;color:hsla(0,0%,100%,.4)}div[class*=language-]:not(.line-numbers-mode) .line-numbers-wrapper{display:none}div[class*=language-].line-numbers-mode .highlight-lines .highlighted{position:relative}div[class*=language-].line-numbers-mode .highlight-lines .highlighted:before{content:" ";position:absolute;z-index:3;left:0;top:0;display:block;width:3.5rem;height:100%;background-color:rgba(0,0,0,.66)}div[class*=language-].line-numbers-mode pre{padding-left:4.5rem;vertical-align:middle}div[class*=language-].line-numbers-mode .line-numbers-wrapper{position:absolute;top:0;width:3.5rem;text-align:center;color:hsla(0,0%,100%,.3);padding:1.25rem 0;line-height:1.4}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number,div[class*=language-].line-numbers-mode .line-numbers-wrapper br{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}div[class*=language-].line-numbers-mode .line-numbers-wrapper .line-number{position:relative;z-index:4;font-size:.85em}div[class*=language-].line-numbers-mode:after{content:"";position:absolute;z-index:2;top:0;left:0;width:3.5rem;height:100%;border-radius:6px 0 0 6px;border-right:1px solid rgba(0,0,0,.66);background-color:#282c34}div[class~=language-js]:before{content:"js"}div[class~=language-ts]:before{content:"ts"}div[class~=language-html]:before{content:"html"}div[class~=language-md]:before{content:"md"}div[class~=language-vue]:before{content:"vue"}div[class~=language-css]:before{content:"css"}div[class~=language-sass]:before{content:"sass"}div[class~=language-scss]:before{content:"scss"}div[class~=language-less]:before{content:"less"}div[class~=language-stylus]:before{content:"stylus"}div[class~=language-go]:before{content:"go"}div[class~=language-java]:before{content:"java"}div[class~=language-c]:before{content:"c"}div[class~=language-sh]:before{content:"sh"}div[class~=language-yaml]:before{content:"yaml"}div[class~=language-py]:before{content:"py"}div[class~=language-javascript]:before{content:"js"}div[class~=language-typescript]:before{content:"ts"}div[class~=language-markup]:before{content:"html"}div[class~=language-markdown]:before{content:"md"}div[class~=language-json]:before{content:"json"}div[class~=language-ruby]:before{content:"rb"}div[class~=language-python]:before{content:"py"}div[class~=language-bash]:before{content:"sh"}.custom-block .custom-block-title{font-weight:600;margin-bottom:-.4rem}.custom-block.danger,.custom-block.tip,.custom-block.warning{padding:.1rem 1.5rem;border-left-width:.5rem;border-left-style:solid;margin:1rem 0}.custom-block.tip{background-color:#f3f5f7;border-color:#42b983}.custom-block.warning{background-color:rgba(255,229,100,.3);border-color:#e7c000;color:#6b5900}.custom-block.warning .custom-block-title{color:#b29400}.custom-block.warning a{color:#2c3e50}.custom-block.danger{background-color:#ffe6e6;border-color:#c00;color:#4d0000}.custom-block.danger .custom-block-title{color:#900}.custom-block.danger a{color:#2c3e50}.arrow{display:inline-block;width:0;height:0}.arrow.up{border-bottom:6px solid #ccc}.arrow.down,.arrow.up{border-left:4px solid transparent;border-right:4px solid transparent}.arrow.down{border-top:6px solid #ccc}.arrow.right{border-left:6px solid #ccc}.arrow.left,.arrow.right{border-top:4px solid transparent;border-bottom:4px solid transparent}.arrow.left{border-right:6px solid #ccc}.content:not(.custom){max-width:740px;margin:0 auto;padding:2rem 2.5rem}@media (max-width:959px){.content:not(.custom){padding:2rem}}@media (max-width:419px){.content:not(.custom){padding:1.5rem}}.table-of-contents .badge{vertical-align:middle}body,html{padding:0;margin:0}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;color:#2c3e50}.page{padding-left:20rem}.navbar{z-index:20;right:0;height:3.6rem;background-color:#fff;box-sizing:border-box;border-bottom:1px solid #eaecef}.navbar,.sidebar-mask{position:fixed;top:0;left:0}.sidebar-mask{z-index:9;width:100vw;height:100vh;display:none}.sidebar{font-size:15px;background-color:#fff;width:20rem;position:fixed;z-index:10;margin:0;top:3.6rem;left:0;bottom:0;box-sizing:border-box;border-right:1px solid #eaecef;overflow-y:auto}.content:not(.custom)>:first-child{margin-top:3.6rem}.content:not(.custom) a:hover{text-decoration:underline}.content:not(.custom) p.demo{padding:1rem 1.5rem;border:1px solid #ddd;border-radius:4px}.content:not(.custom) img{max-width:100%}.content.custom{padding:0;margin:0}.content.custom img{max-width:100%}a{font-weight:500;text-decoration:none}a,p a code{color:#3eaf7c}p a code{font-weight:400}kbd{background:#eee;border:.15rem solid #ddd;border-bottom:.25rem solid #ddd;border-radius:.15rem;padding:0 .15em}blockquote{font-size:1.2rem;color:#999;border-left:.25rem solid #dfe2e5;margin-left:0;padding-left:1rem}ol,ul{padding-left:1.2em}strong{font-weight:600}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.25}.content:not(.custom)>h1,.content:not(.custom)>h2,.content:not(.custom)>h3,.content:not(.custom)>h4,.content:not(.custom)>h5,.content:not(.custom)>h6{margin-top:-3.1rem;padding-top:4.6rem;margin-bottom:0}.content:not(.custom)>h1:first-child,.content:not(.custom)>h2:first-child,.content:not(.custom)>h3:first-child,.content:not(.custom)>h4:first-child,.content:not(.custom)>h5:first-child,.content:not(.custom)>h6:first-child{margin-top:-1.5rem;margin-bottom:1rem}.content:not(.custom)>h1:first-child+.custom-block,.content:not(.custom)>h1:first-child+p,.content:not(.custom)>h1:first-child+pre,.content:not(.custom)>h2:first-child+.custom-block,.content:not(.custom)>h2:first-child+p,.content:not(.custom)>h2:first-child+pre,.content:not(.custom)>h3:first-child+.custom-block,.content:not(.custom)>h3:first-child+p,.content:not(.custom)>h3:first-child+pre,.content:not(.custom)>h4:first-child+.custom-block,.content:not(.custom)>h4:first-child+p,.content:not(.custom)>h4:first-child+pre,.content:not(.custom)>h5:first-child+.custom-block,.content:not(.custom)>h5:first-child+p,.content:not(.custom)>h5:first-child+pre,.content:not(.custom)>h6:first-child+.custom-block,.content:not(.custom)>h6:first-child+p,.content:not(.custom)>h6:first-child+pre{margin-top:2rem}h1:hover .header-anchor,h2:hover .header-anchor,h3:hover .header-anchor,h4:hover .header-anchor,h5:hover .header-anchor,h6:hover .header-anchor{opacity:1}h1{font-size:2.2rem}h2{font-size:1.65rem;padding-bottom:.3rem;border-bottom:1px solid #eaecef}h3{font-size:1.35rem}a.header-anchor{font-size:.85em;float:left;margin-left:-.87em;padding-right:.23em;margin-top:.125em;opacity:0}a.header-anchor:hover{text-decoration:none}.line-number,code,kbd{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}ol,p,ul{line-height:1.7}hr{border:0;border-top:1px solid #eaecef}table{border-collapse:collapse;margin:1rem 0;display:block;overflow-x:auto}tr{border-top:1px solid #dfe2e5}tr:nth-child(2n){background-color:#f6f8fa}td,th{border:1px solid #dfe2e5;padding:.6em 1em}.custom-layout{padding-top:3.6rem}.theme-container.sidebar-open .sidebar-mask{display:block}.theme-container.no-navbar .content:not(.custom)>h1,.theme-container.no-navbar h2,.theme-container.no-navbar h3,.theme-container.no-navbar h4,.theme-container.no-navbar h5,.theme-container.no-navbar h6{margin-top:1.5rem;padding-top:0}.theme-container.no-navbar .sidebar{top:0}.theme-container.no-navbar .custom-layout{padding-top:0}@media (min-width:720px){.theme-container.no-sidebar .sidebar{display:none}.theme-container.no-sidebar .page{padding-left:0}}@media (max-width:959px){.sidebar{font-size:15px;width:16.4rem}.page{padding-left:16.4rem}}@media (max-width:719px){.sidebar{top:0;padding-top:3.6rem;transform:translateX(-100%);transition:transform .2s ease}.page{padding-left:0}.theme-container.sidebar-open .sidebar{transform:translateX(0)}.theme-container.no-navbar .sidebar{padding-top:0}}@media (max-width:419px){h1{font-size:1.9rem}.content div[class*=language-]{margin:.85rem -1.5rem;border-radius:0}}.icon.outbound{color:#aaa;display:inline-block} \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/img/search.83621669.svg b/docs/.vuepress/dist/assets/img/search.83621669.svg new file mode 100644 index 00000000..03d83913 --- /dev/null +++ b/docs/.vuepress/dist/assets/img/search.83621669.svg @@ -0,0 +1 @@ + diff --git a/docs/.vuepress/dist/assets/js/1.3ac4ce2d.js b/docs/.vuepress/dist/assets/js/1.3ac4ce2d.js new file mode 100644 index 00000000..10068202 --- /dev/null +++ b/docs/.vuepress/dist/assets/js/1.3ac4ce2d.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[1],{144:function(n,w,o){}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/2.5a2a73d8.js b/docs/.vuepress/dist/assets/js/2.5a2a73d8.js new file mode 100644 index 00000000..28201e39 --- /dev/null +++ b/docs/.vuepress/dist/assets/js/2.5a2a73d8.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[2],{142:function(t,e,n){},143:function(t,e,n){"use strict";var a=n(142);n.n(a).a},145:function(t,e,n){"use strict";n.r(e);var a={functional:!0,props:{type:{type:String,default:"tip"},text:String,vertical:{type:String,default:"top"}},render:function(t,e){var n=e.props,a=e.slots;return t("span",{class:["badge",n.type,n.vertical]},n.text||a().default)}},i=(n(143),n(0)),o=Object(i.a)(a,void 0,void 0,!1,null,"099ab69c",null);o.options.__file="Badge.vue";e.default=o.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/3.8d1b5fa1.js b/docs/.vuepress/dist/assets/js/3.8d1b5fa1.js new file mode 100644 index 00000000..3931726c --- /dev/null +++ b/docs/.vuepress/dist/assets/js/3.8d1b5fa1.js @@ -0,0 +1 @@ +(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{146:function(t,e,s){"use strict";s.r(e);var l=s(0),n=Object(l.a)({},function(){this.$createElement;this._self._c;return this._m(0)},[function(){var t=this.$createElement,e=this._self._c||t;return e("div",{staticClass:"content"},[e("h1",{attrs:{id:"hello-world-vp"}},[e("a",{staticClass:"header-anchor",attrs:{href:"#hello-world-vp","aria-hidden":"true"}},[this._v("#")]),this._v(" Hello World VP")])])}],!1,null,null,null);n.options.__file="README.md";e.default=n.exports}}]); \ No newline at end of file diff --git a/docs/.vuepress/dist/assets/js/app.1a764383.js b/docs/.vuepress/dist/assets/js/app.1a764383.js new file mode 100644 index 00000000..d52cc1b4 --- /dev/null +++ b/docs/.vuepress/dist/assets/js/app.1a764383.js @@ -0,0 +1,8 @@ +!function(t){function e(e){for(var n,r,i=e[0],a=e[1],s=0,c=[];s=t.length?(this._t=void 0,o(1)):o(0,"keys"==e?n:"values"==e?t[n]:[n,t[n]])},"values"),i.Arguments=i.Array,r("keys"),r("values"),r("entries")},function(t,e,n){"use strict";var r=n(5);t.exports=function(t,e){return!!t&&r(function(){e?t.call(null,function(){},1):t.call(null)})}},function(t,e,n){"use strict";var r=n(2),o=n(30)(3);r(r.P+r.F*!n(19)([].some,!0),"Array",{some:function(t){return o(this,t,arguments[1])}})},function(t,e){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,e){var n=0,r=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++n+r).toString(36))}},function(t,e,n){var r=n(7).f,o=n(12),i=n(1)("toStringTag");t.exports=function(t,e,n){t&&!o(t=n?t:t.prototype,i)&&r(t,i,{configurable:!0,value:e})}},function(t,e,n){var r=n(2);r(r.S+r.F,"Object",{assign:n(97)})},function(t,e,n){var r=n(75),o=n(60);t.exports=Object.keys||function(t){return r(t,o)}},function(t,e,n){var r=n(58),o=n(14);t.exports=function(t){return r(o(t))}},function(t,e,n){var r=n(14);t.exports=function(t){return Object(r(t))}},function(t,e,n){var r=n(27),o=n(25);n(78)("keys",function(){return function(t){return o(r(t))}})},function(t,e,n){"use strict";var r=n(2),o=n(30)(0),i=n(19)([].forEach,!0);r(r.P+r.F*!i,"Array",{forEach:function(t){return o(this,t,arguments[1])}})},function(t,e,n){var r=n(9),o=n(58),i=n(27),a=n(54),s=n(105);t.exports=function(t,e){var n=1==t,c=2==t,u=3==t,f=4==t,l=6==t,p=5==t||l,h=e||s;return function(e,s,d){for(var v,m,g=i(e),y=o(g),_=r(s,d,3),b=a(y.length),x=0,w=n?h(e,b):c?h(e,0):void 0;b>x;x++)if((p||x in y)&&(m=_(v=y[x],x,g),t))if(n)w[x]=m;else if(m)switch(t){case 3:return!0;case 5:return v;case 6:return x;case 2:w.push(v)}else if(f)return!1;return l?-1:u||f?f:w}}},function(t,e,n){"use strict";var r=n(2),o=n(30)(2);r(r.P+r.F*!n(19)([].filter,!0),"Array",{filter:function(t){return o(this,t,arguments[1])}})},function(t,e,n){"use strict";var r=n(2),o=n(30)(1);r(r.P+r.F*!n(19)([].map,!0),"Array",{map:function(t){return o(this,t,arguments[1])}})},function(t,e,n){n(65)("replace",2,function(t,e,n){return[function(r,o){"use strict";var i=t(this),a=void 0==r?void 0:r[e];return void 0!==a?a.call(r,i,o):n.call(String(i),r,o)},n]})},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){},function(t,e,n){var r,o; +/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress + * @license MIT */void 0===(o="function"==typeof(r=function(){var t={version:"0.2.0"},e=t.settings={minimum:.08,easing:"ease",positionUsing:"",speed:200,trickle:!0,trickleRate:.02,trickleSpeed:800,showSpinner:!0,barSelector:'[role="bar"]',spinnerSelector:'[role="spinner"]',parent:"body",template:'
'};function n(t,e,n){return tn?n:t}function r(t){return 100*(-1+t)}t.configure=function(t){var n,r;for(n in t)void 0!==(r=t[n])&&t.hasOwnProperty(n)&&(e[n]=r);return this},t.status=null,t.set=function(a){var s=t.isStarted();a=n(a,e.minimum,1),t.status=1===a?null:a;var c=t.render(!s),u=c.querySelector(e.barSelector),f=e.speed,l=e.easing;return c.offsetWidth,o(function(n){""===e.positionUsing&&(e.positionUsing=t.getPositioningCSS()),i(u,function(t,n,o){var i;return(i="translate3d"===e.positionUsing?{transform:"translate3d("+r(t)+"%,0,0)"}:"translate"===e.positionUsing?{transform:"translate("+r(t)+"%,0)"}:{"margin-left":r(t)+"%"}).transition="all "+n+"ms "+o,i}(a,f,l)),1===a?(i(c,{transition:"none",opacity:1}),c.offsetWidth,setTimeout(function(){i(c,{transition:"all "+f+"ms linear",opacity:0}),setTimeout(function(){t.remove(),n()},f)},f)):setTimeout(n,f)}),this},t.isStarted=function(){return"number"==typeof t.status},t.start=function(){t.status||t.set(0);var n=function(){setTimeout(function(){t.status&&(t.trickle(),n())},e.trickleSpeed)};return e.trickle&&n(),this},t.done=function(e){return e||t.status?t.inc(.3+.5*Math.random()).set(1):this},t.inc=function(e){var r=t.status;return r?("number"!=typeof e&&(e=(1-r)*n(Math.random()*r,.1,.95)),r=n(r+e,0,.994),t.set(r)):t.start()},t.trickle=function(){return t.inc(Math.random()*e.trickleRate)},function(){var e=0,n=0;t.promise=function(r){return r&&"resolved"!==r.state()?(0===n&&t.start(),e++,n++,r.always(function(){0==--n?(e=0,t.done()):t.set((e-n)/e)}),this):this}}(),t.render=function(n){if(t.isRendered())return document.getElementById("nprogress");s(document.documentElement,"nprogress-busy");var o=document.createElement("div");o.id="nprogress",o.innerHTML=e.template;var a,c=o.querySelector(e.barSelector),u=n?"-100":r(t.status||0),l=document.querySelector(e.parent);return i(c,{transition:"all 0 linear",transform:"translate3d("+u+"%,0,0)"}),e.showSpinner||(a=o.querySelector(e.spinnerSelector))&&f(a),l!=document.body&&s(l,"nprogress-custom-parent"),l.appendChild(o),o},t.remove=function(){c(document.documentElement,"nprogress-busy"),c(document.querySelector(e.parent),"nprogress-custom-parent");var t=document.getElementById("nprogress");t&&f(t)},t.isRendered=function(){return!!document.getElementById("nprogress")},t.getPositioningCSS=function(){var t=document.body.style,e="WebkitTransform"in t?"Webkit":"MozTransform"in t?"Moz":"msTransform"in t?"ms":"OTransform"in t?"O":"";return e+"Perspective"in t?"translate3d":e+"Transform"in t?"translate":"margin"};var o=function(){var t=[];function e(){var n=t.shift();n&&n(e)}return function(n){t.push(n),1==t.length&&e()}}(),i=function(){var t=["Webkit","O","Moz","ms"],e={};function n(n){return n=function(t){return t.replace(/^-ms-/,"ms-").replace(/-([\da-z])/gi,function(t,e){return e.toUpperCase()})}(n),e[n]||(e[n]=function(e){var n=document.body.style;if(e in n)return e;for(var r,o=t.length,i=e.charAt(0).toUpperCase()+e.slice(1);o--;)if((r=t[o]+i)in n)return r;return e}(n))}function r(t,e,r){e=n(e),t.style[e]=r}return function(t,e){var n,o,i=arguments;if(2==i.length)for(n in e)void 0!==(o=e[n])&&e.hasOwnProperty(n)&&r(t,n,o);else r(t,i[1],i[2])}}();function a(t,e){var n="string"==typeof t?t:u(t);return n.indexOf(" "+e+" ")>=0}function s(t,e){var n=u(t),r=n+e;a(n,e)||(t.className=r.substring(1))}function c(t,e){var n,r=u(t);a(t,e)&&(n=r.replace(" "+e+" "," "),t.className=n.substring(1,n.length-1))}function u(t){return(" "+(t.className||"")+" ").replace(/\s+/gi," ")}function f(t){t&&t.parentNode&&t.parentNode.removeChild(t)}return t})?r.call(e,n,e,t):r)||(t.exports=o)},function(t,e,n){var r=n(4),o=n(3).document,i=r(o)&&r(o.createElement);t.exports=function(t){return i?o.createElement(t):{}}},function(t,e){t.exports=function(t,e){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:e}}},function(t,e){t.exports=function(t,e,n,r){if(!(t instanceof e)||void 0!==r&&r in t)throw TypeError(n+": incorrect invocation!");return t}},function(t,e,n){var r=n(9),o=n(89),i=n(90),a=n(8),s=n(54),c=n(91),u={},f={};(e=t.exports=function(t,e,n,l,p){var h,d,v,m,g=p?function(){return t}:c(t),y=r(n,l,e?2:1),_=0;if("function"!=typeof g)throw TypeError(t+" is not iterable!");if(i(g)){for(h=s(t.length);h>_;_++)if((m=e?y(a(d=t[_])[0],d[1]):y(t[_]))===u||m===f)return m}else for(v=g.call(t);!(d=v.next()).done;)if((m=o(v,y,d.value,e))===u||m===f)return m}).BREAK=u,e.RETURN=f},function(t,e,n){var r=n(55),o=Math.min;t.exports=function(t){return t>0?o(r(t),9007199254740991):0}},function(t,e){var n=Math.ceil,r=Math.floor;t.exports=function(t){return isNaN(t=+t)?0:(t>0?r:n)(t)}},function(t,e,n){var r=n(11);t.exports=function(t,e,n){for(var o in e)r(t,o,e[o],n);return t}},function(t,e,n){"use strict";var r=n(3),o=n(7),i=n(6),a=n(1)("species");t.exports=function(t){var e=r[t];i&&e&&!e[a]&&o.f(e,a,{configurable:!0,get:function(){return this}})}},function(t,e,n){var r=n(13);t.exports=Object("z").propertyIsEnumerable(0)?Object:function(t){return"String"==r(t)?t.split(""):Object(t)}},function(t,e,n){var r=n(68)("keys"),o=n(22);t.exports=function(t){return r[t]||(r[t]=o(t))}},function(t,e){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,e,n){var r=n(22)("meta"),o=n(4),i=n(12),a=n(7).f,s=0,c=Object.isExtensible||function(){return!0},u=!n(5)(function(){return c(Object.preventExtensions({}))}),f=function(t){a(t,r,{value:{i:"O"+ ++s,w:{}}})},l=t.exports={KEY:r,NEED:!1,fastKey:function(t,e){if(!o(t))return"symbol"==typeof t?t:("string"==typeof t?"S":"P")+t;if(!i(t,r)){if(!c(t))return"F";if(!e)return"E";f(t)}return t[r].i},getWeak:function(t,e){if(!i(t,r)){if(!c(t))return!0;if(!e)return!1;f(t)}return t[r].w},onFreeze:function(t){return u&&l.NEED&&c(t)&&!i(t,r)&&f(t),t}}},function(t,e,n){"use strict";var r=n(66),o=n(2),i=n(11),a=n(10),s=n(12),c=n(17),u=n(102),f=n(23),l=n(104),p=n(1)("iterator"),h=!([].keys&&"next"in[].keys()),d=function(){return this};t.exports=function(t,e,n,v,m,g,y){u(n,e,v);var _,b,x,w=function(t){if(!h&&t in S)return S[t];switch(t){case"keys":case"values":return function(){return new n(this,t)}}return function(){return new n(this,t)}},C=e+" Iterator",k="values"==m,$=!1,S=t.prototype,O=S[p]||S["@@iterator"]||m&&S[m],E=O||w(m),A=m?k?w("entries"):E:void 0,j="Array"==e&&S.entries||O;if(j&&(x=l(j.call(new t)))!==Object.prototype&&x.next&&(f(x,C,!0),r||s(x,p)||a(x,p,d)),k&&O&&"values"!==O.name&&($=!0,E=function(){return O.call(this)}),r&&!y||!h&&!$&&S[p]||a(S,p,E),c[e]=E,c[C]=d,m)if(_={values:k?E:w("values"),keys:g?E:w("keys"),entries:A},y)for(b in _)b in S||i(S,b,_[b]);else o(o.P+o.F*(h||$),e,_);return _}},function(t,e,n){var r=n(7).f,o=Function.prototype,i=/^\s*function ([^ (]*)/;"name"in o||n(6)&&r(o,"name",{configurable:!0,get:function(){try{return(""+this).match(i)[1]}catch(t){return""}}})},function(t,e,n){"use strict";var r=n(2),o=n(76)(!1),i=[].indexOf,a=!!i&&1/[1].indexOf(1,-0)<0;r(r.P+r.F*(a||!n(19)(i)),"Array",{indexOf:function(t){return a?i.apply(this,arguments)||0:o(this,t,arguments[1])}})},function(t,e,n){"use strict";var r=n(10),o=n(11),i=n(5),a=n(14),s=n(1);t.exports=function(t,e,n){var c=s(t),u=n(a,c,""[t]),f=u[0],l=u[1];i(function(){var e={};return e[c]=function(){return 7},7!=""[t](e)})&&(o(String.prototype,t,f),r(RegExp.prototype,c,2==e?function(t,e){return l.call(t,this,e)}:function(t){return l.call(t,this)}))}},function(t,e){t.exports=!1},function(t,e,n){var r=n(13),o=n(1)("toStringTag"),i="Arguments"==r(function(){return arguments}());t.exports=function(t){var e,n,a;return void 0===t?"Undefined":null===t?"Null":"string"==typeof(n=function(t,e){try{return t[e]}catch(t){}}(e=Object(t),o))?n:i?r(e):"Object"==(a=r(e))&&"function"==typeof e.callee?"Arguments":a}},function(t,e,n){var r=n(3),o=r["__core-js_shared__"]||(r["__core-js_shared__"]={});t.exports=function(t){return o[t]||(o[t]={})}},function(t,e,n){t.exports=!n(6)&&!n(5)(function(){return 7!=Object.defineProperty(n(50)("div"),"a",{get:function(){return 7}}).a})},function(t,e,n){var r=n(4);t.exports=function(t,e){if(!r(t))return t;var n,o;if(e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;if("function"==typeof(n=t.valueOf)&&!r(o=n.call(t)))return o;if(!e&&"function"==typeof(n=t.toString)&&!r(o=n.call(t)))return o;throw TypeError("Can't convert object to primitive value")}},function(t,e,n){var r,o,i,a=n(9),s=n(93),c=n(72),u=n(50),f=n(3),l=f.process,p=f.setImmediate,h=f.clearImmediate,d=f.MessageChannel,v=f.Dispatch,m=0,g={},y=function(){var t=+this;if(g.hasOwnProperty(t)){var e=g[t];delete g[t],e()}},_=function(t){y.call(t.data)};p&&h||(p=function(t){for(var e=[],n=1;arguments.length>n;)e.push(arguments[n++]);return g[++m]=function(){s("function"==typeof t?t:Function(t),e)},r(m),m},h=function(t){delete g[t]},"process"==n(13)(l)?r=function(t){l.nextTick(a(y,t,1))}:v&&v.now?r=function(t){v.now(a(y,t,1))}:d?(i=(o=new d).port2,o.port1.onmessage=_,r=a(i.postMessage,i,1)):f.addEventListener&&"function"==typeof postMessage&&!f.importScripts?(r=function(t){f.postMessage(t+"","*")},f.addEventListener("message",_,!1)):r="onreadystatechange"in u("script")?function(t){c.appendChild(u("script")).onreadystatechange=function(){c.removeChild(this),y.call(t)}}:function(t){setTimeout(a(y,t,1),0)}),t.exports={set:p,clear:h}},function(t,e,n){var r=n(3).document;t.exports=r&&r.documentElement},function(t,e,n){"use strict";var r=n(21);t.exports.f=function(t){return new function(t){var e,n;this.promise=new t(function(t,r){if(void 0!==e||void 0!==n)throw TypeError("Bad Promise constructor");e=t,n=r}),this.resolve=r(e),this.reject=r(n)}(t)}},function(t,e,n){var r=n(1)("iterator"),o=!1;try{var i=[7][r]();i.return=function(){o=!0},Array.from(i,function(){throw 2})}catch(t){}t.exports=function(t,e){if(!e&&!o)return!1;var n=!1;try{var i=[7],a=i[r]();a.next=function(){return{done:n=!0}},i[r]=function(){return a},t(i)}catch(t){}return n}},function(t,e,n){var r=n(12),o=n(26),i=n(76)(!1),a=n(59)("IE_PROTO");t.exports=function(t,e){var n,s=o(t),c=0,u=[];for(n in s)n!=a&&r(s,n)&&u.push(n);for(;e.length>c;)r(s,n=e[c++])&&(~i(u,n)||u.push(n));return u}},function(t,e,n){var r=n(26),o=n(54),i=n(98);t.exports=function(t){return function(e,n,a){var s,c=r(e),u=o(c.length),f=i(a,u);if(t&&n!=n){for(;u>f;)if((s=c[f++])!=s)return!0}else for(;u>f;f++)if((t||f in c)&&c[f]===n)return t||f||0;return!t&&-1}}},function(t,e){e.f={}.propertyIsEnumerable},function(t,e,n){var r=n(2),o=n(16),i=n(5);t.exports=function(t,e){var n=(o.Object||{})[t]||Object[t],a={};a[t]=e(n),r(r.S+r.F*i(function(){n(1)}),"Object",a)}},function(t,e){t.exports=function(t,e){return{value:e,done:!!t}}},function(t,e,n){var r=n(8),o=n(103),i=n(60),a=n(59)("IE_PROTO"),s=function(){},c=function(){var t,e=n(50)("iframe"),r=i.length;for(e.style.display="none",n(72).appendChild(e),e.src="javascript:",(t=e.contentWindow.document).open(),t.write(" + + diff --git a/docs/assets/vue-chartjs.png b/docs/.vuepress/public/vue-chartjs.png similarity index 100% rename from docs/assets/vue-chartjs.png rename to docs/.vuepress/public/vue-chartjs.png diff --git a/docs/assets/vue-chartjs.svg b/docs/.vuepress/public/vue-chartjs.svg similarity index 100% rename from docs/assets/vue-chartjs.svg rename to docs/.vuepress/public/vue-chartjs.svg diff --git a/docs/README.md b/docs/README.md index ff10f386..8b915350 100644 --- a/docs/README.md +++ b/docs/README.md @@ -1,393 +1,14 @@ --- -search: -- "language\:en" +home: true +heroImage: /vue-chartjs.png +actionText: Get Started → +actionLink: /guide/ +features: +- title: Easy + details: Easy for both beginners and pros 🙌 +- title: Extendable + details: Simple to use, easy to extend 💪 +- title: Powerfull + details: With the full power of chart.js 💯 +footer: MIT Licensed | Copyright © 2018-present Jakub Juszczak --- - -# vue-chartjs -**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in Vue. You can easily create reusable chart components. - -## Introduction -`vue-chartjs` lets 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 maximal flexibility. - -## Installation -If you are working with Vue.js 2+ simple run: - -`yarn add vue-chartjs chart.js` - -If you are using vue 1.x please use the `legacy` tag. However the Vue 1 version is not maintained anymore. - -`yarn add vue-chartjs@legacy` - -## Quick Start - -You need to import the base chart and extend it. This gives more flexibility when working with different data. -You can encapsulate your components and use props to pass data or you can input them directly inside the component. However your component is not reusable this way. - -You can import the whole package or each module individual. - -```javascript -// CommitChart.js -import { Bar } from 'vue-chartjs' - -export default { - extends: Bar, - mounted () { - // Overwriting base render method with actual data. - this.renderChart(data, options) - } -} -``` - -You can pass two arguments to the `renderChart()` method: - -- 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 | -| css-classes | String with css classes for the surrounding div | -| styles | Object with css styles for the surrounding div container | -| plugins | Array with chartjs plugins | - -## Legend Generation - -`vue-chartjs` provides a small helper to generate a HTML legend. - -```js -import { Line } from 'vue-chartjs' - -export default { - extends: Line, - props: ['datasets', 'options'] - data: () => ({ - htmlLegend: null - }) - mounted () { - this.renderChart(this.datasets, this.options) - this.htmlLegend = this.generateLegend() - } -} -``` - -## Examples - -Here are some examples - -### Chart with props - -You can create data and options props to pass data to the chart. - -```javascript -// LineChart.js -import { Line } from 'vue-chartjs' - -export default { - extends: Line, - props: ['data', 'options'], - mounted () { - this.renderChart(this.data, this.options) - } -} -``` - -After you add your component you can use it: - -```html - -``` - -If you want to overwrite width and height: - -```html - - -``` - -

- Please keep in mind, that you have to set `responsive: false` to be able to set a fixed `width` and `height`. -

- -### Chart with local data - -```javascript -import {Bar} from 'vue-chartjs' - -export default { - extends: Bar, - data () { - return { - datacollection: { - labels: ['January', 'February'], - datasets: [ - { - label: 'Data One', - backgroundColor: '#f87979', - data: [40, 20] - } - ] - } - } - }, - mounted () { - this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false}) - } -} -``` - -### Reusable Components - -If you want to keep your chart components reusable, it's the best to add a wrapper to them. This way the chart component is only responsible for the pure data representation and the wrapper component for the logic behind it. There are many different use cases 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 achieve this. - -- `reactiveProp` -- `reactiveData` - -Both mixins do actually achieve the same. Most of the time you will use `reactiveProp`. It extends the logic of your chart component and automatically creates a prop named `chartData` and adds 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 adds a watcher. This is only useful, if you need single purpose charts and make an API call inside your chart component. - -```javascript -data () { - return { - chartData: null - } -} -``` - -### Events - -The reactive mixins will emit events if the data changes. You can listen to them with `v:on` on the chart component. Following events are available: - -- `chart:render` - if the mixin performs a complete rerender -- `chart:destroy` - if the mixin deletes the chart object instance -- `chart:update` - if the mixin performs an update instead of a re-render -- `labels:update` - if new labels were set -- `xlabels:update` if new xLabels were set -- `ylabels:update` - if new yLabels were set - - -### Example - -**LineChart.js** -```javascript -import { Line, mixins } from 'vue-chartjs' -const { reactiveProp } = mixins - -export default { - extends: Line, - mixins: [reactiveProp], - props: ['options'], - mounted () { - // this.chartData is created in the mixin. - // If you want to pass options please create a local options object - this.renderChart(this.chartData, this.options) - } -} -``` - -**RandomChart.vue** - -```javascript - - - - - -``` - -

- ⚠ Attention: If you mutate your data in a parent component and pass it to your child chart component keep the javascript limitations in mind. - More info in this [issue#44](https://github.com/apertureless/vue-chartjs/issues/44) -

- -### Limitations -
    -
  • [Caveats](https://vuejs.org/v2/guide/list.html#Caveats)
    • -
  • [Change-Detection-Caveats](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)
    • -
  • [vm.$watch](https://vuejs.org/v2/api/#vm-watch)
    • -
- -## Chart.js object - -Sometimes you need more control over Chart.js. That's why you can access the Chart.js instance over `this.$data._chart`. - -## Inline plugins - -In Chart.js you can define global and inline plugins. Global plugins are working without problems with `vue-chartjs` like in the [Chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html) described. - -If you want to add inline plugins, `vue-chartjs` exposes a helper method called `addPlugin()` -You should call `addPlugin()` before the `renderChart()` method. - -### Example - -```javascript -mounted () { - this.addPlugin({ - id: 'my-plugin', - beforeInit: function (chart) { - .... - } - }) -} -``` -## Custom / New Charts - -Sometimes you need to extend the default Chart.js charts. There are a lot of examples how to extend and modify the default charts. Or you want to create a own chart type. - -In `vue-chartjs` you can do this pretty much the same way. - -```js -// 1. Import Chart.js so you can use the global Chart object -import Chart from 'chart.js' -// 2. Import the `generateChart()` method to create the vue component. -import { generateChart } from 'vue-chartjs' - -// 3. Extend on of the default charts -// http://www.chartjs.org/docs/latest/developers/charts.html -Chart.defaults.LineWithLine = Chart.defaults.line; -Chart.controllers.LineWithLine = Chart.controllers.line.extend({ /* custom magic here */}) - -// 4. Generate the vue-chartjs component -// First argument is the chart-id, second the chart type. -const CustomLine = generateChart('custom-line', 'LineWithLine') - -// 5. Extend the CustomLine Component just like you do with the default vue-chartjs charts. - -export default { - extends: CustomLine, - mounted () { - // .... - } -} -``` - -## Available Charts - -### Bar Chart -

- There are two versions of the Bar chart: `{Bar}` and `{HorizontalBar}` -

- -![Bar](assets/bar.png) -### Line Chart - -![Line](assets/line.png) - -### Doughnut - -![Doughnut](assets/doughnut.png) - -### Pie - -![Pie](assets/pie.png) - -### Radar - -![Pie](assets/radar.png) - -### Polar Area - -![Pie](assets/polar.png) - -### Bubble - -![Bubble](assets/bubble.png) - -### Scatter - -This chart has a different data structure then the others. Right now the reactive mixins are not working for this chart type. - -![Scatter](assets/scatter.png) - -## Resources - -You can find here some resources like tutorials on how to use `vue-chartjs` - -- [Using vue-chartjs with WordPress](https://medium.com/@apertureless/wordpress-vue-and-chart-js-6b61493e289f) -- [Create stunning Charts with Vue and Chart.js](https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a) -- [Let’s Build a Web App with Vue, Chart.js and an API Part I](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-544eb81c4b44) -- [Let’s Build a Web App with Vue, Chart.js and an API Part II](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-part-ii-39781b1d5acf) -- [Build a realtime chart with VueJS and Pusher](https://blog.pusher.com/build-realtime-chart-with-vuejs-pusher/) diff --git a/docs/fr-fr/README.md b/docs/fr-fr/README.md index af0279bc..8b915350 100644 --- a/docs/fr-fr/README.md +++ b/docs/fr-fr/README.md @@ -1,367 +1,14 @@ --- -search: -- "language\:fr-fr" +home: true +heroImage: /vue-chartjs.png +actionText: Get Started → +actionLink: /guide/ +features: +- title: Easy + details: Easy for both beginners and pros 🙌 +- title: Extendable + details: Simple to use, easy to extend 💪 +- title: Powerfull + details: With the full power of chart.js 💯 +footer: MIT Licensed | Copyright © 2018-present Jakub Juszczak --- - -# 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` vous permet d'utiliser chart.js avec vue sans prise de tête. C'est la solution idéale pour ceux qui souhaitent créer des graphes simplement et rapidement. - -La logique interne de chart.js est abstraite, mais l'objet sous-jacent est exposé, de sorte que vous puissiez bénéficier de la plus grande flexibilité possible. - -## Installation -Si vous travaillez avec Vue.js 2+, exécutez simplement : - -`yarn add vue-chartjs chart.js` - -Avec vue 1.x, il vous faudra utiliser le marqueur `legacy`. Notez toutefois que la version 1 de vue n'est plus maintenue à l'heure actuelle. - -`yarn add vue-chartjs@legacy` - -## Démarrage rapide - -Importez l'objet graphe de base afin de l'étendre. Cette façon de faire offre beaucoup plus de flexibilité lorsque plusieurs sources de données sont utilisées. -Il est possible d'encapsuler vos composants et d'utiliser les props pour transmettre les données, ou vous pouvez également les indiquer directement à l'intérieur du composant. Cependant, cette seconde méthode ne créera pas des composants réutilisables. - -Vous pouvez choisir d'importer le package dans son intégralité, ou chaque composant individuellement. - -```javascript -// CommitChart.js -import { Bar } from 'vue-chartjs' - -export default { - extends: Bar, - mounted () { - // Surcharge de la méthode render avec les données. - this.renderChart(data, options) - } -} -``` - -La méthode `renderChart()` prend deux paramètres : - -- un objet de données -- un objet d'options - -### Objet de données - -L'objet de données prend la structure suivante : - -```javascript -{ - labels: ['Janvier', 'Février'], - datasets: [ - { - label: 'Commits sur GitHub', - backgroundColor: '#f87979', - data: [40, 20] - } - ] -} -``` - -Pour plus d'informations, vous pouvez lire la documentation [Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data). - -## Props - -Certains props de base sont définis dans BaseCharts. Grâce à l'héritage de l'opération `extend()`, ceux-ci peuvent être surchargés, bien qu'ils soient *invisibles*. - -| Prop | Description | -|---|---| -| width | largeur du graphe | -| height | hauteur du graphe | -| chart-id | id du canvas | -| css-classes | Chaîne de caractères avec les classes CSS à appliquer à l'élément div parent | -| styles | Object avec les styles CSS à appliquer à l'élément div parent | - -## Exemples - -Voici quelques exemples. - -### Graphe avec props - -Vous pouvez créer les props data et options à transmetttre au graphe. - -```javascript -// LineChart.js -import { Line } from 'vue-chartjs' - -export default { - extends: Line, - props: ['data', 'options'], - mounted () { - this.renderChart(this.data, this.options) - } -} -``` - -Vous pourrez les utiliser après avoir ajouté votre composant : - -```html - -``` - -Si vous souhaitez modifier la hauteur ou la largeur : - -```html - - -``` - -

-Vous devrez préciser `responsive: false` si vous souhaitez appliquer une taille fixe avec `width` et `height`. -

- -### Graphe avec données locales - -```javascript -import {Bar} from 'vue-chartjs' - -export default { - extends: Bar, - data () { - return { - datacollection: { - labels: ['Janvier', 'Février'], - datasets: [ - { - label: 'Data One', - backgroundColor: '#f87979', - data: [40, 20] - } - ] - } - } - }, - mounted () { - this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false}) - } -} -``` - -### Composants réutilisables - -Si vous souhaitez faire en sorte que vos composants restent réutilisables, appliquez un wrapper. De cette manière, le composant graphique est seulement responsable de la représentation de la donnée, alors que le wrapper se charge de la logique derrière elle. Il y a de nombreux cas d'utilisations, et la manière de faire sera différente si vous êtes sur une Application Monopage (SPA) ou si vous intégrez sur du Laravel par exemple. - -## Données en direct - -Chart.js ne fournit pas de mécanisme de mise à jour automatique si jamais vous deviez modifier vos jeux de données. Cependant, `vue-chartjs` met à disposition deux mixins pour cela : - -- `reactiveProp` -- `reactiveData` - -Tous deux réalisent le même travail. La plupart du temps, c'est `reactiveProp` que vous utiliserez. Il reprend la logique de votre composant graphique, et crée automatiquement une prop `chartData` et ajoute une `vue watch` sur celle-ci. Lorsque la donnée change, `update()` sera appelée si c'est seulement le coeur de la donnée qui est modifié, et `renderChart()` si de nouveaux jeux de données ont été ajoutés. - -`reactiveData` crée une variable locale chartData (pas une prop !), et lui ajoute un watcher. -Le seul cas d'utilisation est celui où vous souhaitez un graphe à usage unique, et que vous effectuez des appels API à l'intérieur même du composant. - -```javascript -data () { - return { - chartData: null - } -} -``` - -### Exemple - -**LineChart.js** - -```javascript -import { Line, mixins } from 'vue-chartjs' -const { reactiveProp } = mixins - -export default { - extends: Line, - mixins: [reactiveProp], - props: ['options'], - mounted () { - // this.chartData est créé par le mixin. - // si vous voulez transmettre des options, il faudra créer une variable locale - this.renderChart(this.chartData, this.options) - } -} -``` - -**RandomChart.vue** - -```javascript - - - - - -``` - -

- ⚠ Attention : si vous permutez vos données dans un composant parent puis les transmettez à un composant enfant, gardez à l'esprit les limitations de javascript. - Plus d'infos sur [issue#44](https://github.com/apertureless/vue-chartjs/issues/44). -

- -### Limitations -
    -
  • [Mises en garde](https://vuejs.org/v2/guide/list.html#Caveats)
    • -
  • [Mise en garde sur la détection des modifications](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)
    • -
  • [vm.$watch](https://vuejs.org/v2/api/#vm-watch)
    • -
- -## Objet Chart.js - -Il peut arriver d'avoir besoin de plus de contrôle sur l'objet chart.js. Vous pouvez, à cet effet, accéder à cet objet via `this.$data._chart`. - -## Plugins inline - -Avec Chart.js, vous pouvez définir des pugins globaux ou inline. Les plugins globaux fonctionnent sans souci avec `vue-chartjs`, comme décrit dans la [documentation chart.js](http://www.chartjs.org/docs/latest/developers/plugins.html). - -Si vous désirez ajouter des plugins inline, `vue-chartjs` expose une méthode `addPlugin()`. L'appel à cette méthode doit se faire avant celui de `renderChart()`. - -### Exemple - -```javascript -mounted () { - this.addPlugin({ - id: 'mon-plugin', - beforeInit: function (chart) { - .... - } - }) -} -``` - -## Diagrammes disponibles - -### Colonnes - -

- Il y a deux versions du diagramme colonnes : `{Bar}` et `{HorizontalBar}` -

- -![Colonnes](../assets/bar.png) - -### Ligne - -![Ligne](../assets/line.png) - -### Beignet - -![Beignet](../assets/doughnut.png) - -### Circulaire - -![Circulaire](../assets/pie.png) - -### Radar - -![Radar](../assets/radar.png) - -### Polaire - -![Plaire](../assets/polar.png) - -### Bulles - -![Bulles](../assets/bubble.png) - - -### Nuages de points - -Ce diagramme utilise une structure de données différente des autres. Pour le moment, les mixis de mise à jour de données ne fonctionnent pas avec ce type de graphique. - -![Nuage de points](../assets/scatter.png) - - -## Explications sur les différents builds - -Il y a trois builds différents. Le choix dépend de votre projet. Les dépendances sont soient intégrées, soit marquées comme peerDependency. - -- Browser -- Browserify / Webpack 1 -- Webpack 2 - - -| Build | Chart.js | Vue.js | -|---|---|---| -| vue-chartjs.full.js | Intégré | Intégré | -| vue-chartjs.full.min.js | Intégré | Intégré | -| vue-chartjs.js | peerDependency | peerDependency | -| vue-chartjs.min.js | peerDependency | peerDependency | -| es/index* | peerDependency | peerDependency | - -### Browser - -Vous pouvez utiliser `vue-chartjs` directement depuis votre navigateur sans aucun pré-requis. Comme par exemple sur ce [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). Dans une telle situation, veuillez utiliser `vue-chartjs.full.min.js`, qui est la version compressée. Elle intègre Vue.js et Chart.js, et est bundlée à un module UMD. Donc ce fichier se suffit à lui-même. - - -### Browserify / Webpack 1 - -Si vous utilisez Gulp, Browserify ou Webpack 1, vous devrez prendre `vue-chartjs.js`, qui est __transpilé__ et __bundlé__ comme module UMD. - -Toutefois, Vue.js et Chart.js sont des `peerDependencies`, vous devrez donc les installer séparemment. Dans la plupart des projets, `Vue.js` sera de toute façon déjà installé. De cette manière, vous pouvez utiliser des versions différentes de Vue.js et Chart.js dans un même package. - -### Webpack 2 - -Si vous utilisez Webpack 2, `jsnext:main` / `module` sera automatiquement sélectionné. `es/index.js`est une version es __transpilée__ des sources, et n'est pas __bundlée__ à un module. Ainsi, rien ne devrait bloquer l'élimination de code mort. Comme dans la version bundlée précédente, `Vue.js` et `Chart.js` sont des `peerDependencies` et doivent être installés. - -## Ressources - -Voici une liste de ressources et tutoriels sur comment utiliser `vue-chartjs` : - -- [Using vue-chartjs with WordPress](https://medium.com/@apertureless/wordpress-vue-and-chart-js-6b61493e289f) -- [Create stunning Charts with Vue and Chart.js](https://hackernoon.com/creating-stunning-charts-with-vue-js-and-chart-js-28af584adc0a) -- [Let’s Build a Web App with Vue, Chart.js and an API Part I](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-544eb81c4b44) -- [Let’s Build a Web App with Vue, Chart.js and an API Part II](https://hackernoon.com/lets-build-a-web-app-with-vue-chart-js-and-an-api-part-ii-39781b1d5acf) -- [Build a realtime chart with VueJS and Pusher](https://blog.pusher.com/build-realtime-chart-with-vuejs-pusher/) diff --git a/docs/fr-fr/guide/README.md b/docs/fr-fr/guide/README.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/fr-fr/reference/README.md b/docs/fr-fr/reference/README.md new file mode 100644 index 00000000..e69de29b diff --git a/docs/guide/README.md b/docs/guide/README.md new file mode 100644 index 00000000..31a16c33 --- /dev/null +++ b/docs/guide/README.md @@ -0,0 +1,475 @@ +# Getting Started + +**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in Vue. You can easily create reusable chart components. + +## Introduction + +`vue-chartjs` lets 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 maximal flexibility. + +## Installation + +### NPM + +You can install `vue-chartjs` over `npm`. However you also need to add `chart.js` as a dependency to your project. Because `Chart.js` is a peerDependency. This way you have full control over the versioning of Chart.js + +`yarn add vue-chartjs chart.js` or `npm install vue-chartjs chart.js --save` + +::: tip +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` +::: + +### Browser + +You can also use `vue-chartjs` directly in the browser. +First add the `Chart.js` script and then the `vue-chartjs` script. + +```html + + +``` + +## Integration + +Every chart type that is available in `Chart.js` is exported as a named component and can be imported as such. These components are normal Vue components, however you need to `extend` it. + +The idea behind `vue-chartjs` is to provide easy to use components, with maximum flexibility and extensibility. To achive this, you need to create your own *Chart Component* and extend it with the provided `vue-chartjs` components. + +This way, the methods and logic in the Chart components, get merged into your own chart component. + +## Creating your first Chart + +You need to import the base chart and extend it. This gives more flexibility when working with different data. You can encapsulate your components and use props to pass data or you can input them directly inside the component. However your component is not reusable this way. + +You can import the whole package or each module individual. Then you need either to use `extends:` or `mixins:[]`. And then in the `mounted()` hook, call `this.renderChart()`. This will create your chart instance. + +```js{1,4,6} +import { Bar } from 'vue-chartjs' + +export default { + extends: Bar, + mounted () { + this.renderChart(data, options) + } +} +``` + +:::tip +You can either use `extends: Bar` or `mixins: [Bar]` +::: + +The method `this.renderChart()` is provided by the `Bar` component and is accepting two parameters. Both are `objects`. The first one is your chart data and the second one is an options object. + +Check out the offical [Chart.js docs](http://www.chartjs.org/docs/latest/#creating-a-chart) to see the object structure you need to provide. + +### Vue Single File Components + +Most examples in the docs are based on javascript files and not `.vue` files. This is because you mostly will only need the ` + + +``` + +::: danger Template Tag can not be merged +Do not include the `