From c09cc8ea5b0a1aea273ae85afa805580ac25750d Mon Sep 17 00:00:00 2001 From: Roberto Arruda Date: Tue, 31 Mar 2020 02:45:03 -0400 Subject: [PATCH] docs: Translate pt-br (#606) * docs: Translate Landingpage /pt-br/README.md * docs: Translate Guide /pt-br/guide/README.md * docs: Translate API Reference /pt-br/api/README.md * docs: Tranlate ./vuepress/config.js update pt-br --- docs/.vuepress/config.js | 15 +- docs/guide/README.md | 3 +- docs/pt-br/README.md | 18 +- docs/pt-br/api/README.md | 128 ++++++++++ docs/pt-br/guide/README.md | 482 +++++++++++++++++++++++++++++++++++++ 5 files changed, 631 insertions(+), 15 deletions(-) diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 531e6fe9..085bee46 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -91,13 +91,18 @@ module.exports = { }, }, '/pt-br/': { - selectText: 'Languages', + selectText: 'Linguas', label: 'Português do Brasil', - editLinkText: 'Edit this page on GitHub', + 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: "New content is available.", - buttonText: "Refresh" + message: "Novo conteúdo está disponível.", + buttonText: "Atualizar" } }, }, @@ -147,7 +152,7 @@ module.exports = { '/pt-br/': { lang: 'pt-br', title: '📈 vue-chartjs', - description: '⚡ Easy and beautiful charts with Chart.js and Vue.js' + description: '⚡ Gráficos bonitos e fácil com Chart.js e Vue.js' }, '/fr-fr/': { lang: 'fr-fr', diff --git a/docs/guide/README.md b/docs/guide/README.md index cb817764..0f4f7455 100644 --- a/docs/guide/README.md +++ b/docs/guide/README.md @@ -12,11 +12,12 @@ It abstracts the basic logic but exposes the Chart.js object to give you maximal ### 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 can have full control over the versioning of `Chart.js`. +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 ``` + ```bash npm install vue-chartjs chart.js --save ``` diff --git a/docs/pt-br/README.md b/docs/pt-br/README.md index 877e567f..cb1afcc0 100644 --- a/docs/pt-br/README.md +++ b/docs/pt-br/README.md @@ -1,14 +1,14 @@ --- home: true heroImage: /vue-chartjs.png -actionText: Get Started → -actionLink: /guide/ +actionText: Começar → +actionLink: /pt-br/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 +- title: Fácil + details: Fácil para ambos, iniciantes e profissionais 🙌 +- title: Extensível + details: Simples de usar, fácil de estender 💪 +- title: Poderoso + details: Com todo o poder do chart.js 💯 +footer: MIT Licenciado | Copyright © 2018-presente Jakub Juszczak --- diff --git a/docs/pt-br/api/README.md b/docs/pt-br/api/README.md index e69de29b..e014c471 100644 --- a/docs/pt-br/api/README.md +++ b/docs/pt-br/api/README.md @@ -0,0 +1,128 @@ +# Referência de codificação + +## Props + +Existem alguns props básicas definidas nos componentes fornecidos pelo `vue-chartjs`. Porque você os `estende`, eles são _invisíveis_, mas você pode substituí-los: + +| Prop | Descrição | +| ----------- | ------------------------------------------------------- | +| width | largura do gráfico | +| height | altura do gráfico | +| chart-id | Id da tela | +| css-classes | String com classes css para a div circundante | +| styles | Objeto com estilos css para o div contêiner circundante | +| plugins | Array com plugins chartjs | + +## Eventos + +Se o mixin `reactiveData` ou `reactiveProp` estiver anexado, os seguintes eventos serão emitidos: + +| Evento | Descrição | +| ---------------- | ------------------------------------------------------------------- | +| `chart:render` | se o mixin executar um renderizador completo | +| `chart:destroy` | se o mixin excluir a instância do objeto de gráfico | +| `chart:update` | se o mixin executar uma atualização em vez de uma nova renderização | +| `labels:update` | se novos labals foram definidos | +| `xlabels:update` | se novos xLabels foram definidos | +| `ylabels:update` | se novos yLabels foram definidos | + +## Métodos Globais + +Os métodos globais precisam ser importados. + +### generateChart + +- **Tipo:** `Function` +- **Argumentos**: `chart-id`, `chart-type` +- **Uso:** + +```js +import { generateChart } from "vue-chartjs"; +// O primeiro argumento é o ID do gráfico, depois o tipo de gráfico. +const CustomLine = generateChart("custom-line", "LineWithLine"); +``` + +## Métodos de instância + +Os métodos de instância podem ser usados ​​dentro do componente do gráfico. + +### generateLegend() + +Função auxiliar para gerar uma legenda HTML. + +- **Tipo:** `Function` +- **Argumentos**: `none` +- **Uso:** + +```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 + +No Chart.js, você pode definir plugins globais e embutidos. Os plug-ins globais estão funcionando sem problemas com o `vue-chartjs` como descrito no [Chart.js docs](http://www.chartjs.org/docs/latest/developers/plugins.html). + +Se você deseja adicionar plug-ins embutidos, `vue-chartjs` expõe um método auxiliar chamado `addPlugin()` +Você deve chamar `addPlugin()` antes do método `renderChart()`. + +- **Tipo:** `Function` +- **Argumentos**: `Array` de Plugins +- **Uso:** + +```js +mounted () { + this.addPlugin({ + id: 'my-plugin', + beforeInit: function (chart) { + ... + } + }) +} +``` + +### renderChart() + +Cria uma instância Chart.js e renderiza o gráfico. + +- **Tipo:** `Function` +- **Argumentos**: `Chart Data`, `Chart Options` +- **Uso:** + +```js +mounted () { + this.renderChart({ + labels: ['January', 'February'], + datasets: [ + { + label: 'Data One', + backgroundColor: '#f87979', + data: [40, 20] + } + ]}, + { + responsive: true + } + ) +} +``` + +## Objeto Chart.js + +Você pode acessar o objeto Chart.js dentro do componente do gráfico com `this.$data._chart` + +## Canvas + +Você pode acessar canvas com `this.$refs.canvas` diff --git a/docs/pt-br/guide/README.md b/docs/pt-br/guide/README.md index e69de29b..a699e81e 100644 --- a/docs/pt-br/guide/README.md +++ b/docs/pt-br/guide/README.md @@ -0,0 +1,482 @@ +# Começando + +**vue-chartjs** é um pacote para [Chart.js](https://github.com/chartjs/Chart.js) no Vue. Com ele você pode criar facilmente componentes de ​gráficos reutilizáveis. + +## Introdução + +`vue-chartjs` permite você usar Chart.js sem muito aborrecimento dentro do Vue. É perfeito para pessoas que precisam de gráficos simples em funcionamento o mais rápido possível. + +Abstrai a lógica básica, mas expõe o objeto Chart.js para oferecer a máxima flexibilidade. + +## Instalação + +### NPM + +Você pode instalar o `vue-chartjs` através do `npm` ou `yarn`. No entanto, você também precisa adicionar o `chart.js` como uma dependência ao seu projeto, porque o `Chart.js` é um parDeDependência. Dessa forma, você tem total controle sobre o versionamento do `Chart.js`. + +```bash +npm install vue-chartjs chart.js --save +``` + +```bash +yarn add vue-chartjs chart.js +``` + +::: tip Dica +Se você estiver utilizando vue 1.x por favor use a tag `legacy`. No entanto, a versão 1 do Vue não é mais mantida. + +`yarn add vue-chartjs@legacy` +::: + +### Navegador + +Você também pode usar `vue-chartjs` diretamente no navegador via CDN. +Primeiro, adicione o script do `Chart.js`, e depois adicione o script `vue-chartjs`. + +```html + + +``` + +## Integração + +Todo tipo de gráfico disponível em `Chart.js` é exportado como um componente nomeado e pode ser importado como tal. Esses componentes são componentes normais do Vue, no entanto, você precisa estendê-lo com `extend`. + +A ideia por trás do `vue-chartjs` é fornecer componentes fáceis de usar, com máxima flexibilidade e extensibilidade. Para alcançar isto, você precisa criar o seu próprio _Componente de gráfico_ e estendê-lo com os componentes `vue-chartjs` fornecidos. + +Dessa forma, os métodos e a lógica nos componentes do gráfico são mesclados no seu próprio componente de gráfico. + +## Criando seu primeiro Gráfico + +primeiro, você precisa importar o gráfico base e estendê-lo. Isso oferece mais flexibilidade ao trabalhar com dados diferentes. Você pode encapsular seus componentes e usar objetos para passar dados, ou você pode inseri-los diretamente dentro do componente. No entanto, seu componente não é reutilizável dessa maneira. + +Você pode importar o pacote inteiro ou cada módulo individualmente. Então, você precisa usar `extends:` ou `mixins:[]`. Depois, no gancho `mounted()`, chame `this.renderChart()`. Isso criará sua instância do gráfico. + +```js{1,4,6} +import { Bar } from "vue-chartjs"; + +export default { + extends: Bar, + mounted() { + this.renderChart(data, options); + } +}; +``` + +:::tip Dica +Você pode usar `extends: Bar` ou `mixins: [Bar]` +::: + +O método `this.renderChart()` é fornecido pelo componente `Bar` e aceita dois parâmetros: ambos são `objetos`. O primeiro são os dados do gráfico, e o segundo é um objeto de opções. + +Confira o oficial [Chart.js docs](http://www.chartjs.org/docs/latest/#creating-a-chart) para ver a estrutura do objeto que você precisa fornecer. + +### Componentes de arquivo único do Vue + +A maioria dos exemplos nos documentos é baseada em arquivos JavaScript e não em arquivos `.vue`. Isso ocorre porque, principalmente, você precisará apenas do bloco ` + + +``` + +::: danger A tag template não pode ser mesclada +Não inclua a tag `