billboard.js 3.2 release: Sparkline, TableView Plugins & more!
Excited to share the new 3.2 release!. This release comes with 8 new features added & 13 bug fixes.
For the detailed release info, please checkout the release note:
https://github.com/naver/billboard.js/releases/tag/3.2.0
What’s New?
axis.x.padding.unit
To make chart shape area have some padding to each side was possible, but the value wasn’t treated as pixel. The padding value was based on the x Axis type format, which means, when x Axis type is “timeseries”, the padding should be based on time value, and so on for other formats.
For example, giving left/right padding value to 1, in indexed axis type, will make a padding space based on the current chart tick space.
axis: {
x: {
padding: {
left: 1, // 1 equivalent as current chart's tick space
right: 1
}
}
}
This approach make some complication, spacing shape based on the design guidelines, where all elements spacing based on pixel unit.
From this release, to facilitate padding in more easy way, introduced pixel unit. Simply add unit:'px' and done.
axis: {
x: {
padding: {
left: 100,
right: 50,
unit: "px"
}
}
}With the above option, will make left has 100px padding, and right has 50px padding.
Error logging enhancement
As of ESM module introduced since v2, it needed load and specify shape modules correctly. If not specified, will throw error with required method isn't a function. (Ref. #2299)
Uncaught TypeError: $$.generatePoint is not a function
at ChartInternal.push../node_modules/billboard.js/dist/billboard.esm.js.ChartInternal.initParams (billboard.esm.js:7782)
at ChartInternal.push../node_modules/billboard.js/dist/billboard.esm.js.ChartInternal.init (billboard.esm.js:7727)
at new Chart (billboard.esm.js:9310)
at Object.generate (billboard.esm.js:19681)
at chart3 ([name].js:146)This was problematic for user to figure out the cause, because the error log implies facing a bug, rather notifying to import corresponding module.
To get rid, enhance error logging for ESM import. By throwing error and give more informative message when module isn’t specified or load correctly.
line.step.tooltipMatch
The new tooltipMatch option for step types, will make tooltip appearance attached to the corresponding x tick’s position.
For example, when the option tooltipMatch=false, the tooltip appears in a near position, when the mouse pointer approaches.
line: {
step: {
type: "step-after",
tooltipMatch: false
}
}
when tooltipMatch=true, tooltip will appear when the mouse pointer is positioned over each tick position.
line: {
step: {
type: "step-after",
tooltipMatch: true
}
}
Thanks @ebencollins for the contribution on this feature!
Dual CJS/ESM package support
CommonJS style and ESM where used to export modules within the package. This was some kind of band aid solution, because the standard way is exporting as ESM.
Currently, all modern browsers and runtime(Node.js), supports ESM natively, removing the necessity to bundle CJS. But the ecosystem third parties aren’t prepared yet for complete transition to ESM.
The main dependent D3.js already transitioned to pure ESM, and the dependent libraries are forced to follow that, so as the billboard.js.
To support both CJS/ESM environment, providing “Dual CommonJS/ESM” is a savior for us.
// package.json
{
"name": "billboard.js",
...
"type": "module",
"exports": {
".": {
"import": "./dist-esm/billboard.js",
"require": "./dist/billboard.pkgd.js"
},
"./dist/plugin/*": {
"import": "./dist-esm/plugin/*.js",
"require": "./dist/plugin/pkgd/*.js"
},
"./dist/*": "./dist/*"
},
}From the user perspective, there’s no need to make any changes. Simply import billboard.js modules as usual.
Sparkline Plugin
Sparkline plugin will make to generate multiple tiny charts from the single generation.
Demo: https://naver.github.io/billboard.js/demo/#Plugins.Sparkline
Generate the chart with multiple data series, and specify the use of sparkline plugin.
bb.generate({
size: {
width: 150,
height: 50
},
data: {
columns: [
["data1", 130, 200, 150, 140, 160, 150],
["data2", 200, 130, 90, 240, 130, 220],
["data3", 300, 200, 160, 400, 250, 250],
...
],
},
plugins: [
new bb.plugin.sparkline({
selector: ".sparkline" // specify sparkline holder
})
]
});TableView Plugin
The new TableView plugin will generate table view from the given chart data series. It provides some simple options to control the visibility of the tables.
Demo: https://naver.github.io/billboard.js/demo/#Plugins.TableView
bb.generate({
...
plugins: [
new bb.plugin.tableview({
selector: "#my-table-view",
categoryTitle: "Year",
categoryFormat: function(v) {
// do some transformation
...
return v;
},
class: "my-class-name",
style: true,
title: "My Data List",
updateOnToggle: false
}),
]
});subchart.x.tick.format
Allows for the subchart x axis tick format to be different from the x axis tick format of the primary chart.
If the option isn’t specified, it defaults to using the same format as the x axis.
subchart: {
show: true,
axis: {
x: {
tick: {
format: "%Y-%m-%d"
}
}
}
},The above option, will make subchart x axis’ tick text appear differently than the main x axis’ tick text.
Thanks @ebencollins for the contribution on this feature!
Facilitate control tooltip position
Pass position object argument to tooltip.position callback to facilitate tooltip position value control.
tooltip: {
position: function(data, width, height, element, pos) {
// data: [{x, index, id, name, value}, ...]
// width: Tooltip width
// height: Tooltip height
// element: Tooltip event bound element
// pos: {
// x: Current mouse event x position,
// y: Current mouse event y position,
// xAxis: Current x Axis position
// }
return {
top: pox.y,
left: pox.xAxis
}
}
}Make consist transitions
To control transition, transition.duration option is used specifying the corresponding duration value. But this didn’t applied on every occasions.
Because, from the codebase transition weren’t applied correctly at all. To remove the inconsistency, refactored across whole codebase where transition applies.
As a result, we could made to have consistent transition as follows.
What’s Next?
The planned next and last release for 2021 will be Dec. As always, we will be working to implement and enhance new functionality to bring ease data visualization on web platform.
Stay tuned for the next release!
See ya~ 😃
