New v3.13 launch got here out right this moment! This launch comes with 4 new options, 2 bug fixes and tooling enhancements.
For the detailed launch data, please checkout the discharge word:
https://github.com/naver/billboard.js/releases/tag/3.13.0
Space-step-range chart
Vary varieties are helpful visualize “ranged values” from the baseline worth. From this launch will present new “step” kind to the variation.
Demo: https://naver.github.io/billboard.js/demo/#Chart.FunnelChart
import bb, {areaStepRange} from "billboard";bb.generate({
knowledge: {
columns: [
["data1", [70, 40, 30],
[155, 130, 115],
[160, 135, 120],
[200, 120, 110],
[95, 50, 40],
[199, 160, 125]
]],
kind: areaStepRange()
}
});
Areas rendering enchancment
To render some vary with dashed line, knowledge.areas possibility is used. However the way in which of rendering dashed strains, executed by combining a number of path command as dashed strains wanted to be.
From the above instance screenshot, a number of path command are wanted to attract dashed strains.
## A number of path command
M5,232L95,136M99,139L104,142 M109,145L114,149 ... M L M L ...## Single path command
M4,232,136L139,192L206,23L274,164L341,108
This method induced some rendering points(#1, #2) and we tried to enhance this on native method.
As an alternative of drawing dashed strains with path instructions, we moved to render utilizing stroke-dasharray model property.
Demo: https://naver.github.io/billboard.js/demo/#Chart.LineChartWithRegions
On zoom interplay, animation body efficiency has been improved from 84ms → 5ms!
By updating to three.12, will get the profit with none code adjustments.
legend.format: present unique knowledge id
When knowledge.names possibility is specified, it would make show knowledge names totally different than the unique names(id).
{
knowledge: {
names: {
// will make data1 and data2, displayed in numerous values.
data1: "Detailed Identify",
data2: "Identify Detailed"
},
columns: [
["data1", 71.4],
["data2", 10]
]
}
}
On this case, legend.format callback, will obtain knowledge.names changed worth, as a substitute the unique id.
knowledge: {
names: {
// will make data1 and data2, displayed in numerous values.
data1: "Detailed Identify",
data2: "Identify Detailed"
},
}
legend: {
format: perform(id) {
// id shall be 'Detailed Identify' and 'Identify Detailed'
}
}
From this launch will present unique ‘id’ worth with the changed names.
knowledge: {
names: {
// will make data1 and data2, displayed in numerous values.
data1: "Detailed Identify",
data2: "Identify Detailed"
},
}
legend: {
format: perform(id, dataId) {
// id shall be 'Detailed Identify' and 'Identify Detailed'
// dataId shall be 'data1' and 'data2'
}
}
Demo: https://naver.github.io/billboard.js/demo/#Legend.LegendFormat
bar.width callback
Beforehand, bar.width was potential specify absolute worth or in ratio worth. absolute can’t replicate chart resize dynamically and ratio can replicate with some limitation.
The best way ratio is calculated is predicated on beneath equation.
x Axis tick Interval * ratio
For instance, if chart has width of 500px, with 5 x Axis tick rely, the interval shall be 100px roughly.
On this case, if bar.ratio=0.5 is specified, the equation shall be as follows, and bar’s width shall be 49.9px.
100(precise worth is 99.8) * 0.5 = 49.9
To provide extra management adjusting bar’s width worth, will improve bar.width possibility to simply accept a callback perform with helpful parameters.
Demo: https://naver.github.io/billboard.js/demo/#BarChartOptions.BarWidth
bar: {
width: perform(width, targetsNum, maxDataCount) {
// - width: chart space width
// - targetsNum: variety of targets
// - maxDataCount: most knowledge rely amongst targets
}
}
Another factor, replace on take a look at framework
We adopted Karma + Mocha for our take a look at framework and it was nice expertise to keep up billboard.js to be steady.
Sadly, Karma introduced the deprecation and we wanted emigrate another trendy take a look at frameworks to maintain the library steady and following the fashionable ecosystem.
After some analysis, we determined to maneuver to vitest. We efficiently migrated inside this launch and native testing has been improved as much as 63%!
Type extra particulars, checkout https://github.com/naver/billboard.js/pull/3866
That’s all we now have for this launch and due to keep tuned!
