§Ẏagr

Yagr é um renderizador de gráficos HTML5 Canvas de alta performance baseado em uPlot. Ele oferece recursos de alto nível para gráficos uPlot.

§Funcionalidades

• Linhas, áreas, colunas e pontos como tipos de visualização. Configurável por série
• Tooltip de legenda configurável
• Eixos com opções extras para precisão de nível decimal
• Escalas com funções de intervalo e transformações configuráveis
• Linhas e bandas de plotagem. Camada de desenho configurável
• Gráficos responsivos (requer ResizeObserver)
• Suporte de alto nível para áreas/colunas empilhadas
• Marcadores configuráveis
• Tema Claro/Escuro
• Normalização de dados
• Configuração de retículos, marcadores de cursor e snapping
• Typescript
• Localização
• Variáveis CSS em nomes de cores
• Legenda inline paginada
• Tratamento de erros e hooks estendidos
• Alinhamento e interpolação de dados para dados ausentes
• Atualizações em tempo real

§Documentação

§Início Rápido

npm i @gravity-ui/yagr

§Módulo NPM

import Yagr from '@gravity-ui/yagr';

new Yagr(document.body, {
    timeline: [1, 2, 3, 4, 5],
    series: [
        {
            data: [1, 2, 3, 4, 5],
            color: 'red',
        },
        {
            data: [2, 3, 1, 4, 5],
            color: 'green',
        },
    ],
});

§Tag Script

<script src="https://unpkg.com/@gravity-ui/yagr/dist/yagr.iife.min.js"></script>
<script>
    new Yagr(document.body, {
        timeline: [1, 2, 3, 4, 5],
        series: [
            {
                data: [1, 2, 3, 4, 5],
                color: 'red',
            },
            {
                data: [2, 3, 1, 4, 5],
                color: 'green',
            },
        ],
    });
</script>

§Exemplos

Precisa de algo específico? Yagr apresenta alguns exemplos úteis na pasta demo/examples. Como iniciá-los com a versão atual:

1. Clone o repositório.
2. Instale as dependências npm i.
3. Execute npm run build.
4. Execute npx http-server ..
5. Abra os exemplos no navegador de acordo com a saída do http-server.