¡Hoy salió la nueva versión v3.13! Esta versión incluye 4 funciones nuevas, 2 correcciones de errores y mejoras de herramientas.

Para obtener información detallada sobre la versión, consulte la nota de la versión:
https://github.com/naver/billboard.js/releases/tag/3.13.0

¿Qué hay de nuevo?

Gráfico de área-paso-rango

Los tipos de rango son útiles para visualizar "valores de rango" a partir del valor de referencia. A partir de esta versión se proporcionará un nuevo tipo de "paso" a la variación.

Demostración: 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()
  }
});

Mejora del renderizado de regiones

Para representar un rango con una línea discontinua, se utiliza la opción data.regions. Pero la forma de representar líneas discontinuas, se realiza combinando el comando de ruta múltiple como debían ser las líneas discontinuas.

En la captura de pantalla de ejemplo anterior, se necesitan múltiples comandos de ruta para dibujar líneas discontinuas.

## 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

Este enfoque causó algunos problemas de renderizado (#1, #2) e intentamos mejorarlo de forma nativa.

En lugar de dibujar líneas discontinuas con comandos de ruta, pasamos a renderizar usando la propiedad de estilo trazo-dasharray.

• Antes: comando de ruta/ Después: trazo-dasharray

Demostración: https://naver.github.io/billboard.js/demo/#Chart.LineChartWithRegions

En la interacción de zoom, el rendimiento del cuadro de animación se ha mejorado de 84 ms → 5 ms!

Al actualizar a 3.12, obtendrá el beneficio sin ningún cambio de código.

legend.format: proporciona la identificación de los datos originales
Cuando se especifica la opción data.names, los nombres de los datos mostrados serán diferentes a los nombres originales (id).

{
  data: {
    names: {
      // will make data1 and data2, displayed in different values.
      data1: "Detailed Name",
      data2: "Name Detailed"
    },
    columns: [
       ["data1", 71.4],
       ["data2", 10]
    ]
  }
}

En este caso, la devolución de llamada de legend.format recibirá el valor reemplazado de data.names, en lugar de la identificación original.

data: {
    names: {
      // will make data1 and data2, displayed in different values.
      data1: "Detailed Name",
      data2: "Name Detailed"
    },
}
legend: {
    format: function(id) {
       // id will be 'Detailed Name' and 'Name Detailed'
    }
}

A partir de esta versión se proporcionará el valor "id" original con los nombres reemplazados.

data: {
    names: {
      // will make data1 and data2, displayed in different values.
      data1: "Detailed Name",
      data2: "Name Detailed"
    },
}
legend: {
    format: function(id, dataId) {
        // id will be 'Detailed Name' and 'Name Detailed'
        // dataId will be 'data1' and 'data2'
    }
}

Demostración: https://naver.github.io/billboard.js/demo/#Legend.LegendFormat

devolución de llamada de ancho de barra

Anteriormente, bar.width era posible especificar un valor absoluto o un valor de relación. Absoluto no puede reflejar el cambio de tamaño del gráfico dinámicamente y la proporción puede reflejarse con alguna limitación.

La forma en que se calcula la relación se basa en la siguiente ecuación.

x Axis tick Interval * ratio

Por ejemplo, si el gráfico tiene un ancho de 500 px, con un recuento de 5 ejes x, el intervalo será de 100 px aproximadamente.

En este caso, si se especifica bar.ratio=0.5, la ecuación será la siguiente y el ancho de la barra será 49.9px.

100(exact value is 99.8) * 0.5 = 49.9

Para brindar más control al ajustar el valor del ancho de la barra, se mejorará la opción bar.width para aceptar una función de devolución de llamada con parámetros útiles.

Demostración: https://naver.github.io/billboard.js/demo/#BarChartOptions.BarWidth

bar: {
    width: function(width, targetsNum, maxDataCount) {
         // - width: chart area width
         // - targetsNum: number of targets
         // - maxDataCount: maximum data count among targets
   }
}

Una cosa más, actualice el marco de prueba.

Adoptamos Karma Mocha para nuestro marco de prueba y fue una gran experiencia mantener billboard.js estable.

Lamentablemente, Karma anunció su obsolescencia y necesitábamos migrar algunos otros marcos de prueba modernos para mantener la biblioteca estable y seguir el ecosistema moderno.

Después de investigar un poco, decidimos pasar a vitest. ¡Migramos exitosamente dentro de esta versión y las pruebas locales se mejoraron hasta un 63%!

Forme más detalles, consulte https://github.com/naver/billboard.js/pull/3866

Cierre

¡Eso es todo lo que tenemos para este lanzamiento y gracias por estar atentos!