sparkline chart

Added a sparkline chart:

import { chartSparkline } from savyg;

chartSparkline({
    dataset: {
        values: number[],
        name: string,
        periods?: string[],
        color?: string,
    },
    parent: HTMLElement,
    options: {
        ...
    }
})

Check out how it's made on the documentation website

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 : number
• dataLabelsLineOffset : number
• hideLabelUnderPercentage : number
• donutRadiusRatio : 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.