Wrappers uPlot

Uma coleção de wrappers para uPlot que permite trabalhar com gráficos de forma declarativa dentro do seu framework favorito.

Índice

• Motivação
• Primeiros passos
• React
• Instalação
• Como usar
• Demo
• Vue.js
• Instalação
• Como usar
• Demo
• Svelte
• Instalação
• Como usar
• Demo
• Documentação

Motivação

Embora já existam vários outros wrappers para uPlot, todos eles possuem uma das seguintes limitações:

• Eles criam a instância do uPlot uma única vez, durante a fase de montagem do componente, e esperam que você gerencie toda a lógica de atualização.
• Eles recriam uma nova instância do uPlot sempre que as props mudam, mesmo que a instância possa ser atualizada para refletir as mudanças.

Em comparação, esta biblioteca tenta ao máximo não recriar a instância do uPlot quando as props mudam. Em vez de recriar, ela tenta usar a API pública do uPlot para mantê-lo atualizado com as props.

Começando

Veja as seções React, Vue.js ou Svelte abaixo, dependendo de qual framework você está usando. Consulte também a documentação da API comum a todos os frameworks.

React

Instalação

Instale o pacote uplot-react com a dependência uplot:

• Usando npm: $ npm install uplot-react uplot
• Usando yarn: $ yarn add uplot-react uplot

Você também precisa ter React 16.8 ou superior instalado em seu projeto.

Como usar

import React from 'react';
import uPlot from 'uplot';
import UplotReact from 'uplot-react';
import 'uplot/dist/uPlot.min.css';
const Chart = () => (
     {}} onDelete={(chart) => {}} />
);

Demonstração

Veja a demonstração ao vivo

Você também pode executar o aplicativo de demonstração localmente:

$ git clone https://github.com/skalinichev/uplot-wrappers.git

$ cd uplot-wrappers && yarn install && yarn run serveReact

Demonstração ReactJS

exemplo simples para começar rapidamente. Demonstração ReactJS

Vue.js

Instalação

Instale o pacote uplot-vue com a dependência uplot:

• Usando npm: $ npm install uplot-vue uplot
• Usando yarn: $ yarn add uplot-vue uplot

Você também precisa instalar o Vue.js no seu projeto (ambas as versões 2.6 e 3.x são suportadas).

Como usar

Usando template

Usando JSX

// Vue.js 2
import Vue from 'vue';
// Vue.js 3
import { createApp } from 'vue';
import uPlot from 'uplot';
import UplotVue from 'uplot-vue';
import 'uplot/dist/uPlot.min.css';
{
    ...,
    render() {
        return (
             {}}
                onCreate={(chart) => {}}
            />
        );
    }
}

Nota: Alterações de propriedades por mutação não são suportadas devido a uma limitação do Vue. Você deve criar uma cópia da propriedade, ou seja, substituí-la, veja um exemplo para entender a ideia geral.

Demonstração

Veja a demonstração ao vivo do Vue.js 2

Você também pode executar o aplicativo de demonstração localmente:

$ git clone https://github.com/skalinichev/uplot-wrappers.git

$ cd uplot-wrappers && yarn install

Vue.js 2:

$ yarn run serveVue

Vue.js 3:

$ yarn run serveVue3

Svelte

Instalação

Instale o pacote uplot-svelte com a dependência uplot:

• Usando npm: $ npm install uplot-svelte uplot
• Usando yarn: $ yarn add uplot-svelte uplot

Você também precisa instalar o Svelte dentro da árvore de seu projeto. O componente UplotSvelte é compatível com projetos Svelte e SvelteKit.

Como usar

Demonstração

Veja o exemplo Exemplo Svelte

Você também pode executar o aplicativo de demonstração localmente:

$ git clone https://github.com/skalinichev/uplot-wrappers.git

$ cd uplot-wrappers && yarn install && yarn run serveSvelte

Documentação

| Parâmetro | Requisito | Descrição | | :-------------: | :---------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | options | obrigatório | Opções para uPlot. Passadas como primeiro argumento para o construtor do uPlot: new uPlot(options) | | data | obrigatório | Dados para uPlot. Passados como segundo argumento para o construtor do uPlot: new uPlot(options, data) | | target | opcional | Elemento html alvo para uPlot. Passado como terceiro argumento para o construtor do uPlot: new uPlot(options, data, target) Um novo elemento div alvo será criado automaticamente se nenhum for passado nas props | | onCreate | opcional | Função de callback, invocada na criação ou recriação da instância do uPlot | | onDelete | opcional | Função de callback, invocada antes da instância do uPlot ser destruída, seja porque as props mudaram tanto que é impossível atualizar o gráfico ou porque o componente está prestes a ser desmontado | | className/class | opcional | Um nome de classe passado para o elemento div alvo criado automaticamente. O nome da classe é ignorado quando a prop 'target' é utilizada. | | resetScales | opcional | Flag que controla se as escalas devem ser redefinidas ao alterar os dados. O padrão é true. |

--- Tranlated By Open Ai Tx | Last indexed: 2025-09-25 ---