billboard.js 2.1.0 release: Another big step for performance improvement & more!
This release comes with 6 new features added & 12 bug fixes.
For the detailed release info, please checkout the release note:
https://github.com/naver/billboard.js/releases/tag/2.1.0
What’s New?
Interaction improvement
The root cause of performance bottleneck
Previously for each dataset based on x Axis, an event receiver node <rect class=' bb-event-rect'> is generated to handle user's event.
But when needs to render big amount of dataset, this is the main root cause of performance bottleneck.
Aside of the node length, each <rect> nodes got updated(positions and sizes) on every resize to make handle user’s event correctly.
So, getting rid these event handling approach, will definitely make a huge performance improvements.
The starting point is making to generate only one single <rect> element work as event receiver.
Reduced node generation
Prior v2.1.0, event <rect> elements are generated relatively of the x Axis ticks. That means, if there're 1k x Axis tick, it will generate 1k <rect> nodes.
Whereas v2.1.0, will generate a single <rect> element not based on the x Axis tick.
Interaction responsive tests
Note that in real use case scenario, will work more faster than the below benchmark test, but for test purpose opening the devtool will add some throttling on execution.
Used 1000 x 5 matrix sample dataset for the test and opened FPS meter to visualize frames per second.
a) Tooltip response
The below sample renders 1k ticks. And it shows a clear differences of the response performance when do a mousemove interaction to visualize tooltip for each tick.
For multiple <rect> node structure, the tooltip isn’t responding immediately following the mouse cursor’s position, whereas the single <rect> node structure’s response is close to an immediate response.
b) Resizing response
As described above, for each resizing action <rect> element’s dimension needed to be updated according the chart get resized.
Is logical to think what will be more performant. Updating 1k length node elements vs a single node element.
The result shows clearly on how chart react from the resizing.
There’s no need to update any of your code. Just upgrade your billboard.js to v2.1, and you’ll get the performance benefit!
New Theme: datalab
The beneficial for SVG based rendering is giving a flexibility for styling and handling each chart element if the library doesn’t fit on you.
billboard.js introduce Theme styling option staring v1.6. And from this release added new ‘datalab’ theme to give another out of box styling option.
Checkout from the demo page by selecting datalab theme from the top-left selectbox to see in action.
For all themes color pattern and some screenshot, checkout:
https://github.com/naver/billboard.js/wiki/Themes
axis.y2.type
Each axes, except y2, has option to define axis type (indexed, log or timeseries).
v2 brings new axis.y2.type option to make aligned with other axes, and adding another more option for customization.
Demo: https://naver.github.io/billboard.js/demo/#Axis.LogScales
axis: {
x | y | y2: {
type: "category" | "indexed" | "log" | "timeseries"
}
}The screenshot below, shows y Axis with log type, y2 with indexed and x with log type.
log scale to handle 0(zero) value
From the support of the log type axis(since v2) based on the logarithmic rules, 0 can't be expressed in axis values, because log 0 is undefined.
But, in majority of real use cases, the real datas are expressed with natural numbers including 0.
By using bi-symmetric log transformation, this can be improved to handle 0(zero).
This update will applied automatically without any option value changes.
area.front
When area type is used, the related node is generated in follow stacking orders: <g class='bb-lines'> → <g class='bb-areas'> → <g class='bb-circles'>
The new area.front option will let control the stacking order between lines and areas.
area: {
front: true | false
}- area.front=true (default):
<g class='bb-lines'>→<g class='bb-areas'>→<g class='bb-circles'> - area.front=false
<g class='bb-areas'>→<g class='bb-lines'>→<g class='bb-circles'>
So, what this option could do? Well, in most cases it can be used to adjust detailed styling as follows.
.bb-area {opacity: 1;}
.bb-line {stroke: red !important;}.bb-circle {
stroke: #000 !important;
fill: #000 !important;
}
When above styles applied, it needs to bring line element to the front of area to make a clear visible rendering.
The left side screenshot shows when line is positioned behind the area, and the right side shows when line is positioned over the area.
Plugin class for JS/TS
Due to the codebase migration from JS based to TS, every source code is written in TS.
For those relayed on writing own Plugin code based on JS, this can be problematic and hassle.
To get rid this, simply added JS version of Plugin class file and included it to the distribution npm package.
If you need to write own plugin, just import the JS version by:
import Plugin from "billboard.js/src/plugin/Plugin.js";What’s Next?
Since the first release in 2017, the download numbers gradually increased. Is not a “bloating” growth, but I’m glad to see more users each day. Thanks all the communities for this 😍 ~!
The next release is expected to be on Dec, and as always trying adding new excited features & improvements where can be beneficial to all.
Hope you stay safe from the COVID-19 😷, healthy and well.
See you until next release!
