billboard.js 3.10 release: point radialGradient, new theme and improved stability.

New 3.10 release 🥳 🎉 out today! This release comes with 6 new features, 21 bug fixes and improvements.

For the detailed release info, please checkout the release note:
https://github.com/naver/billboard.js/releases/tag/3.10.0

What's New?

Radial gradient for point

Radial gradient option can be applied to circle points and will provide an alternative to visualize points in different way.

Demo: https://naver.github.io/billboard.js/demo/#Point.RadialGradientPoint

Simply turning on the option with default gradient value, or can customize(for more info checkout the link)by your own value.

point: {
  // apply radial gradient with default value
  radialGradient: true,

  // or apply radial gradient with customized value
  radialGradient: {
     cx: 0.5,
     cy: 0.5,
     r: 0.5,
     stops: [
       [0.3, "#fff", 0.8],
       [0.6, function(id) { return id === "data1" ? this.color(id) : "green"; }, 0.35],
       [1, null, 1]
     ]
  }
}

New ‘modern’ theme

New theme “modern” added to this release. Like other themes, will provide pre-designed styles which can be used as a starter of your project or just use as is.

The colors patterns and styles of main UI elements are as follows.

If wants check all the themes appearances, checkout:
https://github.com/naver/billboard.js/wiki/Themes

To see work in action, simply go to example page and select modern theme from the select box.

subchart API

This newly added API can control programmatically the selection range of subchart.

Demo: https://naver.github.io/billboard.js/release/latest/doc/Chart.html#subchart

const chart = bb.generate({ ... });

// select subchart selection giving domain range
chart.subchart([2, 5]);

// reset subchart selection
chart.subchart.reset();

The use is simple and straight forward. Specify the domarin range of current chart and subchart will reflect it.

regions.label

This option will make add label text to the regions.

Demo: https://naver.github.io/billboard.js/demo/#Region.RegionLabel

regions: [
  {
    ...
    label: {
       text: "Regions 1",
       x: 50,  // position relative of the initial x coordinate
       y: 50,  // position relative of the initial y coordinate
       color: "red",  // color string
       rotated: true.  // make text to show in vertical or horizontal
    },
    ...
  }
]

The below screenshot shows 3 different regions with label text, applied with options.

Provide y coordinate for tooltip position

Previously, x coordinate was provide to facilitate updating tooltip position, but not for y coordinate.

The reason was unlike the x coodinate, providing y coordinate needed consider which value y coordinate will base on. For eg., if the chart visualizing stacked bar or multiple series of data, which value should take for y coordinate?

It can’t be determined programmatically, so for single data will provide y coordinate value, but for multiple data will provide a helper function which user can get necessity coordinate from.

Demo: https://naver.github.io/billboard.js/demo/#Tooltip.TooltipPosition

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 (the value is given for axis based chart type only)
         //   yAxis: Current y Axis position value or function(the value is given for axis based chart type only)
         // }

         // yAxis will work differently per data lenghts
         // - a) Single data: `yAxis` will return `number` value
         // - b) Multiple data: `yAxis` will return a function with property value

         // a) Single data:
         // Get y coordinate
         pos.yAxis; // y axis coordinate value of current data point

         // b) Multiple data:
         // Get y coordinate of value 500, where 'data1' scales(y or y2).
         // When 'data.axes' option is used, data can bound to different axes.
         // - when "data.axes={data1: 'y'}", wil return y value from y axis scale.
         // - when "data.axes={data1: 'y2'}", wil return y value from y2 axis scale.
         pos.yAxis(500, "data1"); // will return y coordinate value of data1

         pos.yAxis(500); // get y coordinate with value of 500, using y axis scale
         pos.yAxis(500, null, "y2"); // get y coordinate with value of 500, using y2 axis scale

         return {
           top: 0,
           left: 0
         }
     }
}

With provided y coordinate value, can make tooltip to be positioned at the center of each data point’s position.

Also for x coordinate, will return with the left y axis margin(if has), so don’t need to add anymore.

TableView plugin: nullString option

When data contains nullish value, TableView plugin couldn’t handle it properly rendering broken table.

From this release, new enhancement option added to TableView plugin, where can set replacement string(default is ‘-’) value for nullish value.

Thanks the contribution from https://github.com/RobinDeeCee

 const chart = bb.generate({
  data: {
    columns: [
       ["x", "2012", "2013", "2014", "2015", "2016"],
       ["data1", null, 2380, null, 1238, 1500],
       ["data2", 500, 120, 100, 200, 840, 935],
       ["data3", 1223, null, null, 300, 250],
       ["data4", null, 2135, 1020, 1138, 2119],
       ["data5", 1223, 2310, 1210, 2220, 1238]
    ],
    plugins: [
       new bb.plugin.tableview({
        ...
        nullString: "N/A"
       }),
    ]
 });

The above data will be rendered as follows. Note that nullish datas are replaced by given N/A string.

Improvements

Padding adjustment

padding option usually used to adjust chart size, and where providing different modes(like ‘fit’ or setting false to letting only shape to be visualized) with pixel unit control.

But, with different combination of the option padding wasn’t consistent and accurate.

To improve this issue, we worked to make padding to be applied in a consistent way.

Also wrote a documentation to facilitate how padding option will be applied in each circumstances.

• Understanding padding

Boosting test coverage up to 90%

Stability is our concerns always. But how to make the library functioning as is with newly added features and constant code changes?

The basic strategy is enforcing the test code to cover previous bug situation and different option combination.

So, for that we decided increase the coverage of the codebase. Previously, the coverage was stayed as 90%+, but narrowing down for files, there were some files staying 70~80%.

This can be problematic and were potential cause of degrading the stability.

We put hard work to improve this, and we ended up reaching each files having 90%+ of the test coverage!

Type	tag/3.9.3	After (as of 30th, Aug)	Diff
Statements	94.69% (9,235/9,752)	97.57% (9,499/9,753)	+2.88%
Branches	86.28% (5,682/6,585)	90.37% (5,981/6,618)	+4.09%
Functions	94.99% (1,499/1,578)	97.71% (1,541/1,577)	+2.72%
Lines	94.69% (7,513/7,934)	97.67% (7,724/7,908)	+2.98%
Coverage	90.859%	94.348%	+3.489%

If you’re curious about it, check more details from below link:
https://github.com/naver/billboard.js/issues/3332#issuecomment-1709308119

Closing

We’re growing slow, but steady. Thanks for all the interests showing to us.
We’ll comeback with more enhancements as usual. So, stay tune!