Releases: graphieros/savyg
sparkline chart
Added a sparkline chart:
import { chartSparkline } from savyg;
chartSparkline({
dataset: {
values: number[],
name: string,
periods?: string[],
color?: string,
},
parent: HTMLElement,
options: {
...
}
})
Improved documentation & more
1. Improved documentation
Chart options documentation is now visible on hover in your IDE
2. Reliability
Charts won't break anymore if user passes data as strings
Improved donut chart
-
arcs are now a filled shape instead of just a path, allowing to use a border. New chart option:
donutBorderWidth: number
-
dataLabels can be either a text element, or a div inside a foreignObject, allowing further customizations. New chart option:
dataLabelsAsDivs : boolean; // true will display dataLabels as divs inside foreignObjects
Added updateData exposed method
Calling updateData will redraw the chart with a new dataset, keeping previously set options, parent and callbacks.
Available on all charts (chartXy, chartDonut, chartGauge)
The chart must be built with a variable declaration in the first place:
let myXyChart = chartXy({...})
To call the updateData method, the variable must be reassigned:
myXyChart = myXyChart.updateData(myNewDataset)
Better uuid generation & improved callbacks
- Better uuid generation for svg & html elements
- Neater returned data from donut callbacks
Added chart callbacks
On xy and donut charts, callbacks can be passed to emit selected data on click or hover:
chartXy
chartXy({
dataset: [],
options: {},
parent: myDiv,
callbacks: {
onClickLegend: clickLegend,
onHoverLegend: hoverLegend,
onClickPeriod: clickPeriod,
onHoverPeriod: hoverPeriod
}
})
function clickLegend(item) {
console.log(item)
}
function hoverLegend(item) {
console.log(item)
}
function clickPeriod(item) {
console.log(item)
}
function hoverPeriod(item) {
console.log(item)
}
chartDonut
chartDonut({
dataset: [],
options: {},
parent: myDiv,
callbacks: {
onClickArc: clickArc,
onHoverArc: hoverArc,
onClickLegend: clickLegend,
onHoverLegend: hoverLegend
}
})
function clickArc(item) {
console.log(item)
}
function hoverArc(item) {
console.log(item)
}
function clickLegend(item) {
console.log(item)
}
function hoverLegend(item) {
console.log(item)
}
Improved donut labels
Better control of dataLabels.
Added the following chart options:
dataLabelsOffset
: numberdataLabelsLineOffset
: numberhideLabelUnderPercentage
: numberdonutRadiusRatio
: number
Added arrow element
Easy api to create an arrow to include in an existing svg:
import { arrow } from "savyg"
arrow({
options: {
x1: 0,
y1: 0,
x2: 30,
y2: 30,
marker: "end", // "start" | "end" | "both"
size: 10,
// + all other options from the line element (stroke-width, stroke-linecap, stroke... and so on)
},
parent: document.querySelector("#mySvg")
})
Better uids
Replaced elements id generation with window.crypto instead of Math.random
Refresh feature & more
Prior to this version, charts only returned the svg element.
Since v1.1.3, charts all return a refresh function that can be used to handle reactivity.
Return values of all charts:
chartXy:
{
chart: SVGElement,
refresh: (parentElement: HTMLElement) => SVGElement
}
chartDonut:
{
chart: SVGElement,
refresh: (parentElement: HTMLElement) => SVGElement,
arcs: {
pathElement: SVGPathElement,
name: string,
color: string,
uid: string,
value: number,
percentage: number
}
}
chartGauge:
{
chart: SVGElement,
refresh: (parentElement: HTMLElement) => SVGElement
arcs: {
pathElement: SVGPathElement,
color: string
}
}
Refresh functions can be called once the chart is already mounted:
let myDonutChart = chartDonut({
dataset,
options,
parent: myDiv
})
// Refresh can be called whenever data changes, and the chart needs to be redrawn:
myDonutChart = myDonutChart.refresh(myDiv)
New functions available:
findArcAtMidpoint
findArcAtMidpoint(pathElement: SVGPathElement): Coordinates
Returns x and y coordinates of the center of an arc. This is very useful if you want to create your own labels on a donut, or add an extra label on only one arc of the gauge. You can also combine this function with the following one:
offsetFromCenterPoint
offsetFromCenterPoint({
initX: number,
initY: number,
centerX: number,
centerY: number,
offset: number
}): Coordinates
Returns x and y coordinates perfectly offset. This is awesome if you need to trace a line from the center of an arc to anywhere your label will be, and also calculate further coordinates for a text label, or a foreignObject containing wtf you need.
setTextAnchorFromCenterPoint
setTextAnchorFromCenterPoint({
x: number,
centerX: number,
middleRange = 0
}) : "start" | "middle" | "end"
Returns a text-anchor value based on the x coordinate of a label, the x center reference, and a middleRange size, where "middle" will be returned. This was useful af when making the donut.