Nova versão v3.13 foi lançada hoje! Esta versão vem com 4 novos recursos, 2 correções de bugs e melhorias de ferramentas.

Para obter informações detalhadas sobre o lançamento, confira a nota de lançamento:
https://github.com/naver/billboard.js/releases/tag/3.13.0

O que há de novo?

Gráfico área-passo-intervalo

Os tipos de intervalo são úteis para visualizar “valores de intervalo” a partir do valor da linha de base. A partir desta versão forneceremos um novo tipo de “etapa” para a variação.

Demonstração: https://naver.github.io/billboard.js/demo/#Chart.FunnelChart

import bb, {areaStepRange} from "billboard";

bb.generate({
  data: {
    columns: [
     ["data1", [70, 40, 30],
     [155, 130, 115],
     [160, 135, 120],
     [200, 120, 110],
     [95, 50, 40],
     [199, 160, 125]
    ]],
    type: areaStepRange()
  }
});

Melhoria na renderização de regiões

Para renderizar algum intervalo com linha tracejada, a opção data.regions é usada. Mas a forma de renderizar linhas tracejadas, feita combinando vários comandos de caminho, conforme as linhas tracejadas precisavam ser.

Na captura de tela do exemplo acima, são necessários vários comandos de caminho para desenhar linhas tracejadas.

## Comando de caminho múltiplo M5,232L95,136M99,139L104,142 M109,145L114,149 ... M L M L ... ## Comando de caminho único M4,232,136L139,192L206,23L274,164L341,108

## Multiple path command
M5,232L95,136M99,139L104,142 M109,145L114,149 ... M L M L ...

## Single path command
M4,232,136L139,192L206,23L274,164L341,108

Essa abordagem causou alguns problemas de renderização(#1, #2) e tentamos melhorar isso de forma nativa.

Em vez de desenhar linhas tracejadas com comandos de caminho, passamos para renderizar usando a propriedade de estilo Stroke-dasharray.

Antes: comando de caminho/Depois: acidente vascular cerebral-dasharray

Demonstração: https://naver.github.io/billboard.js/demo/#Chart.LineChartWithRegions

Na interação com zoom, o desempenho do quadro de animação foi melhorado de 84ms →

5ms!

Ao atualizar para 3.12, obterá o benefício sem nenhuma alteração de código.

legend.format: forneça o ID dos dados originais

Quando a opção data.names for especificada, os nomes dos dados de exibição serão diferentes dos nomes originais (id).

{ dados: { nomes: { // fará com que data1 e data2 sejam exibidos em valores diferentes. data1: "Nome detalhado", data2: "Nome detalhado" }, colunas: [ ["dados1", 71,4], ["dados2", 10] ] } }

## Multiple path command
M5,232L95,136M99,139L104,142 M109,145L114,149 ... M L M L ...

## Single path command
M4,232,136L139,192L206,23L274,164L341,108

Neste caso, o retorno de chamada legend.format receberá o valor substituído de data.names, em vez do id original.

dados: { nomes: { // fará com que data1 e data2 sejam exibidos em valores diferentes. data1: "Nome detalhado", data2: "Nome detalhado" }, } lenda: { formato: função(id) { // id será 'Nome detalhado' e 'Nome detalhado' } }

## Multiple path command
M5,232L95,136M99,139L104,142 M109,145L114,149 ... M L M L ...

## Single path command
M4,232,136L139,192L206,23L274,164L341,108

A partir desta versão forneceremos o valor original do ‘id’ com os nomes substituídos.

dados: { nomes: { // fará com que data1 e data2 sejam exibidos em valores diferentes. data1: "Nome detalhado", data2: "Nome detalhado" }, } lenda: { formato: função(id, dataId) { // id será 'Nome detalhado' e 'Nome detalhado' //dataId será 'data1' e 'data2' } }

## Multiple path command
M5,232L95,136M99,139L104,142 M109,145L114,149 ... M L M L ...

## Single path command
M4,232,136L139,192L206,23L274,164L341,108

Demonstração: https://naver.github.io/billboard.js/demo/#Legend.LegendFormat

retorno de chamada bar.width

Anteriormente, bar.width era possível especificar o valor absoluto ou o valor da proporção. absoluto não pode refletir o redimensionamento do gráfico dinamicamente e a proporção pode refletir com alguma limitação.

A forma como a proporção é calculada é baseada na equação abaixo.

x Intervalo de escala do eixo * proporção

## Multiple path command
M5,232L95,136M99,139L104,142 M109,145L114,149 ... M L M L ...

## Single path command
M4,232,136L139,192L206,23L274,164L341,108

Por exemplo, se o gráfico tiver largura de 500px, com contagem de ticks de 5 x eixo, o intervalo será aproximadamente 100px.

Neste caso, se bar.ratio=0.5 for especificado, a equação será a seguinte e a largura da barra será 49,9px.

100(o valor exato é 99,8) * 0,5 = 49,9

## Multiple path command
M5,232L95,136M99,139L104,142 M109,145L114,149 ... M L M L ...

## Single path command
M4,232,136L139,192L206,23L274,164L341,108

Para dar mais controle ao ajustar o valor da largura da barra, melhoraremos a opção bar.width para aceitar uma função de retorno de chamada com parâmetros úteis.

Demonstração: https://naver.github.io/billboard.js/demo/#BarChartOptions.BarWidth

bar: { largura: função(largura, alvoNum, maxDataCount) { // - largura: largura da área do gráfico // - targetNum: número de alvos // - maxDataCount: contagem máxima de dados entre alvos } }

## Multiple path command
M5,232L95,136M99,139L104,142 M109,145L114,149 ... M L M L ...

## Single path command
M4,232,136L139,192L206,23L274,164L341,108

Mais uma coisa, atualização na estrutura de teste

Adotamos o Karma Mocha para nossa estrutura de teste e foi uma ótima experiência manter a estabilidade do billboard.js.

Infelizmente, o Karma anunciou a descontinuação e precisávamos migrar algumas outras estruturas de teste modernas para manter a biblioteca estável e seguindo o ecossistema moderno.

Depois de algumas pesquisas, decidimos mudar para o vitest. Migramos com sucesso nesta versão e os testes locais foram aprimorados em até 63%!

Forme mais detalhes, confira https://github.com/naver/billboard.js/pull/3866

Fechando

Isso é tudo que temos para este lançamento e obrigado por ficar ligado!