when using point.pattern: null data points lead to 'Error: <use> attribute y: Expected length, "NaN".' in ESM module

[jonka-blip]

Description

When lines have null data points (as in "line.connectNull"), the js code throws the Error: attribute y: Expected length, "NaN". This happens if the code gets imported via 'import { bb, line } from "billboard.js/dist/billboard.esm.js"'

a quick fix is to change Line 249 in point.ts to

$$.getYScaleById(id, isSub)($$.getBaseValue(d) || 0);

but I am not sure if this is the appropriate fix

[netil]

Hi @jonka-blip, could you provide reproducible code?

[jonka-blip]

https://github.com/jonka-blip/billboard_issue_2107

[jonka-blip]

The issue gets triggered if a point:pattern for the circle is used. You can see the Error in js console. I am using latest Chrome.
thx

[watnab]

When lines have null data points
point:pattern

var chart = bb.generate({bindto: "#lineChart",
	data: {type: "line",
		columns: [ ["custom_id",1,null] ],
	},
	"point": {
		"pattern": ["<circle cx=\"4\" cy=\"4\" r=\"4\" />"]
	}
});

[watnab]

billboard.js/src/ChartInternal/shape/point.ts

Line 518 in af19370

.attr("y", yPosFn2)

I couldn't see what value yPosFn2 must return when data point is null.

[jonka-blip]

@watnab and why gets the error triggered only if point.pattern is defined? 🤔

[watnab]

why gets the error triggered only if point.pattern is defined

custom may mean "pattern is defined" is defined.

billboard.js/src/ChartInternal/shape/point.ts

Line 504 in af19370

const yPosFn2 = d => yPosFn(d) - height / 2;

• yPosFn2 is defined with yPosFn in custom .
• yPosFn is called even if pattern is not defined.
• It seems yPosFn will return undefined when data value is null.
• yPosFn(d) - height / 2 will be NaN when yPosFn returns undefined.

what value yPosFn2 must return when data point is null.

It may be good yPosFn2 returns undefined when yPosFn returns undefined.

[watnab]

It may be good yPosFn2 returns undefined when yPosFn returns undefined.

undefined will cause Error: attribute y: Expected length, "undefined".

• NaN -> NG
• undefined -> NG
• null -> NG
• 0 -> OK?

[watnab]

My test was wrong. undefined won't cause Error.
"d3.v6.min.js" has code like null == e ? this.removeAttribute(t) : this.setAttribute(t, e).

why gets the error triggered only if point.pattern is defined

The reason may be that null == NaN will return false.

[netil]

Confirmed the issue. It happens to determine custom data points position for nullish data.
I'll do the fix.

BTW, there's no need to use custom data point for <circle cx=\"4\" cy=\"4\" r=\"4\" />.
You can control circle's radius using point.r option.

[jonka-blip]

cool 😎 ❤️