Canada-province-chart NPM

Canada Province Chart

npm install canada-province-chart

Data must be encoded against the following province codes:

abroad
na
yt
nt
nu
bc
ab
sk
mb
on
onlessncr
qc
qclessncr
nl
ncr
nb
ns
pe

We call this type ProvCode. Note that the use of onlessncr, qclessncr or ncr cannot be combined with the use of on or qc.

Data must be provided in a Array<{value:number, provCode:ProvCode}> format. Let's call this {value:number, provCode:ProvCode} type Datum

property	required	type	example
data	yes	Array	{ provCode: "ab", value: 200 },{ provCode: "sk", value: 300 }
htmlForLabel	yes	(datum?: Datum, provCode: ProvCode) => html string	(datum, provCode) => datum && `\${datum.value.toFixed(2)}\`
colorScale	yes	(datum?: Datum, provCode: ProvCode) => color string Only SVG-compatible colors, e.g. not hsla	(datum, provCode) => datum ? interpolateBlues(datum.value/MAX_VALUE) : "#ccc"
lang	yes	"en" \| "fr"	"en"
onMouseEnter	no	(datum?: Datum, provCode: ProvCode) => void
onMouseLeave	no	(datum?: Datum, provCode: ProvCode) => void
onClick	no	(datum?: Datum, provCode: ProvCode) => void

You can skip our react layer and call our d3 layer, which has an identical API : CanadaD3Viz(container: HTMLElement, config: Props)

The D3 layer does not partially update markup appropriately when data changes. It's recommended to wipe the container's innerHTML on each re-render (this is what our react layer does).
The react API is very sensitive to prop changes. Make sure you useMemo or useCallback all relevant props or the chart rendering code will be called excessively.
The color-scale, html-label and event callbacks all take (datum: Datum, provCode: ProvCode) as arguments. For regions without data, the first argument will be undefined. The second argument gives you flexibility on how you color, label or respond to events for regions without any corresponding data.
Two special "provinces", Abroad and Not-available are only shown when they have data available.
We don't currently support styling the label containers
We don't support tooltips

2 years ago

2 years ago