0.4.0 • Published 3 years ago
@buckneri/streamchart v0.4.0
streamchart
My take on building a stream chart. The build includes a starter CSS file, and two javascript versions for ES modules and current browsers. No serious attempt has been made towards ie11 compatibility.
Installation
npm i --save @buckneri/streamchart
API
Data frame schema
Receives a JSON object as described below:
{
labels: {
// optional labels for the axes
axis: {
x: string,
y: string
},
// optional field "colors": an array of CSS compatible color values to be applied to the series labels.
// If not supplied, this is generated by the library.
colors: string[],
// these labels should be in the same order as the values found in the series[n].values array
series: string[]
},
// each series member is a point on the x-axis timeline
series: [
{
// this describes the point in time e.g. year "2020" or other valid Javascript date
period: string,
// an array of single numbers relating to each stream at this point in time.
// These are in the same sort order as descriptors in labels.series.
values: number[]
}
]
}
// Example data
{
labels: {
axis: {
x: "year"
}
colors: ["green", "yellow", "purple"]
series: ["apple", "banana", "grape"]
},
series: [
{ period: "1880", values: [241,117,12] },
{ period: "1881", values: [263,112,14] },
{ period: "1882", values: [288,123,15] },
{ period: "1883", values: [287,120,16] }
]
}
Constructor
const streamchart = new Streamchart({
container: document.getElementById("chart"),
data: data,
margin: { bottom: 20, left: 20, right: 20, top: 20 }
});
Events
stream-selected - emitted when user clicks on stream
Methods
streamchart.clearSelection();
// clears selection from chart elements
streamchart.data(nodes, links);
// stores and initialises data
streamchart.destroy();
// self-destruct
streamchart.draw();
// draws chart to DOM
streamchart.toString();
// serialises the internal data
Properties
streamchart.container;
// parent element for chart
streamchart.formatY
// Intl.NumberFormat instance. Default is decimal
streamchart.h;
// height of chart
streamchart.local
// locale for formatting values. Default is en-GB
streamchart.margin;
// defines the border zone around the canvas
streamchart.rh;
// relative height, height - margins
streamchart.rw;
// relative width, width - margins
streamchart.ticksX
// Default is 5. Sets detail level on x axis
streamchart.w;
// width of chart