diff --git a/.clean-publish b/.clean-publish index c8a9e5b8..b1c46691 100644 --- a/.clean-publish +++ b/.clean-publish @@ -2,5 +2,5 @@ "withoutPublish": true, "tempDir": "package", "fields": ["tsd"], - "files": ["docs"] + "files": ["website"] } diff --git a/README.md b/README.md index a1ceffea..73a0e501 100644 --- a/README.md +++ b/README.md @@ -59,7 +59,7 @@ Need an API to fetch data? Consider [Cube](https://cube.dev/?ref=eco-vue-chartjs ## Docs -- 📖 [v3 Docs](http://vue-chartjs.org/) +- 📖 [Docs](http://vue-chartjs.org/) ## How to use @@ -318,7 +318,7 @@ export default { name: 'DataPage', components: { BarChart } } - ``` In v4, you need to import the component, pass props to it, and use Chart component as a standard Vue component. diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js deleted file mode 100644 index 085bee46..00000000 --- a/docs/.vuepress/config.js +++ /dev/null @@ -1,163 +0,0 @@ -module.exports = { - title: 'vue-chartjs documentation', - themeConfig: { - nav: [ - { text: 'Home', link: '/' }, - { text: 'Guide', link: '/guide/' }, - { text: 'API', link: '/api/' } - ], - sidebar: 'auto', - repo: 'apertureless/vue-chartjs', - editLinks: true, - editLinkText: 'Help us improve this page!', - docsDir: 'docs', - docsBranch: 'master', - serviceWorker: true, - locales: { - '/': { - selectText: 'Languages', - label: 'English', - editLinkText: 'Edit this page on GitHub', - serviceWorker: { - updatePopup: { - message: "New content is available.", - buttonText: "Refresh" - } - }, - }, - '/zh-cn/': { - selectText: '选择语言', - label: '中文(简体)', - sidebar: 'auto', - editLinkText: '在GitHub上编辑本页', - nav: [ - { - text: '指南', - link: '/zh-cn/guide/' - }, - { - text: 'API 参考', - link: '/zh-cn/api/' - } - ], - serviceWorker: { - updatePopup: { - message: "有新内容更新.", - buttonText: "刷新" - } - } - }, - '/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: 'Языки', - label: 'Русский', - editLinkText: 'Редактировать эту страницу на GitHub', - nav: [ - { - text: 'Руководство', - link: '/ru/guide/' - }, - { - text: 'API', - link: '/ru/api/' - } - ], - serviceWorker: { - updatePopup: { - message: "Доступен новый контент.", - buttonText: "Обновить" - } - }, - }, - '/pt-br/': { - selectText: 'Linguas', - label: 'Português do Brasil', - editLinkText: 'Edite esta página no GitHub', - nav: [ - { text: 'Home', link: '/pt-br/' }, - { text: 'Guia', link: '/pt-br/guide/' }, - { text: 'API', link: '/pt-br/api/' } - ], - serviceWorker: { - updatePopup: { - message: "Novo conteúdo está disponível.", - buttonText: "Atualizar" - } - }, - }, - '/fr-fr/': { - selectText: 'Languages', - label: 'Français', - editLinkText: 'Edit this page on GitHub', - serviceWorker: { - updatePopup: { - message: "New content is available.", - buttonText: "Refresh" - } - }, - } - }, - algolia: { - indexName: 'vue-chartjs', - apiKey: 'b3544f7387612693644777553675d56a' - } - }, - 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: '⚡ 使用 Chart.js 和 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: '⚡ Простые и красивые графики с Chart.js и Vue.js' - }, - '/pt-br/': { - lang: 'pt-br', - title: '📈 vue-chartjs', - description: '⚡ Gráficos bonitos e fácil com Chart.js e 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/public/vue-chartjs.svg b/docs/.vuepress/public/vue-chartjs.svg deleted file mode 100644 index 43cd47b4..00000000 --- a/docs/.vuepress/public/vue-chartjs.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/CNAME b/docs/CNAME deleted file mode 100644 index c915bec1..00000000 --- a/docs/CNAME +++ /dev/null @@ -1 +0,0 @@ -vue-chartjs.org \ No newline at end of file diff --git a/docs/README.md b/docs/README.md deleted file mode 100644 index 877e567f..00000000 --- a/docs/README.md +++ /dev/null @@ -1,14 +0,0 @@ ---- -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: Powerful - details: With the full power of chart.js 💯 -footer: MIT Licensed | Copyright © 2018-present Jakub Juszczak ---- diff --git a/docs/api/README.md b/docs/api/README.md deleted file mode 100644 index fa3e62d9..00000000 --- a/docs/api/README.md +++ /dev/null @@ -1,128 +0,0 @@ -# Coding Reference - -## Props - -There are some basic props defined in the components provided by `vue-chartjs`. 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 | - -## Events - -If the `reactiveData` or `reactiveProp` mixin is attached, following events will be emitted: - -| Event | Description| -|---|---| -| `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 | - - -## Global Methods -Global Methods need to be imported. - -### generateChart - -- **Type:** `Function` -- **Arguments**: `chart-id`, `chart-type` -- **Usage:** - -```js -import { generateChart } from 'vue-chartjs' -// First argument is the chart-id, second the chart type. -const CustomLine = generateChart('custom-line', 'LineWithLine') -``` - -## Instance Methods - -Instance methods can be used inside your chart component. - -### generateLegend() - -Helper function to generate a HTML legend. - -- **Type:** `Function` -- **Arguments**: `none` -- **Usage:** - -```js {11} -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() - } -} - -``` - -### addPlugin - -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. - -- **Type:** `Function` -- **Arguments**: `Array` of Plugins -- **Usage:** - -```js -mounted () { - this.addPlugin({ - id: 'my-plugin', - beforeInit: function (chart) { - .... - } - }) -} -``` - -### renderChart() - -Creates a Chart.js instance and renders the chart. - -- **Type:** `Function` -- **Arguments**: `Chart Data`, `Chart Options` -- **Usage:** - -```js -mounted () { - this.renderChart({ - labels: ['January', 'February'], - datasets: [ - { - label: 'Data One', - backgroundColor: '#f87979', - data: [40, 20] - } - ]}, - { - responsive: true - } - ) -} -``` - -## Chart.js Object - -You can access the Chart.js object inside your chart component with `this.$data._chart` - -## Canvas - -You can access the canvas with `this.$refs.canvas` diff --git a/docs/fr-fr/api/README.md b/docs/fr-fr/api/README.md deleted file mode 100644 index e69de29b..00000000 diff --git a/docs/fr-fr/guide/README.md b/docs/fr-fr/guide/README.md deleted file mode 100644 index e69de29b..00000000 diff --git a/docs/guide/README.md b/docs/guide/README.md deleted file mode 100644 index 8ddec6ae..00000000 --- a/docs/guide/README.md +++ /dev/null @@ -1,516 +0,0 @@ -# Getting Started - -**vue-chartjs** is a wrapper for [Chart.js](https://github.com/chartjs/Chart.js) in Vue. It enables you to 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 `yarn` or `npm`. However, you also need to add `chart.js` as a dependency to your project because `Chart.js` is a peerDependency. This way you can have full control over the versioning of `Chart.js`. - -```bash -yarn add vue-chartjs chart.js@2.9.4 -``` - -```bash -npm install vue-chartjs chart.js@2.9.4 -``` - -::: 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 via CDN. -First, add the `Chart.js` script, and then add 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 maximal flexibility and extensibility. To achieve 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 - -First, 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 individually. Then, you need to use either `extends:` or `mixins:[]`. Afterwards, 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 accepts two parameters: both are `objects`. The first one is your chart data, and the second one is an options object. - -Check out the official [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, mostly, you will only need the ` - - -``` - -::: danger Template Tag can not be merged -Do not include the `