Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/graphieros/tiny-spark. An elegant, reactive and responsive sparkline chart solution without dependency. tiny-spark.graphieros.com
chart sparkline universal
Something went wrong. Try again.
2.0 kB · 64 lines
TypeScript
at main
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364import { ELEMENT_DATASET, TINY_SPARK } from "../types";import { getCharts, createChart, hasDataset, createUid, nextTick } from "./lib";
export function render() { const charts = getCharts(); if (!charts.length) return;
(Array.from(charts) as TINY_SPARK[]).forEach(chart => {
if(!chart.dataset.id) { const uid = createUid() chart.setAttribute('data-id', uid) }
const spark = chart as TINY_SPARK; CHECK(spark); spark.__renderCount = 0; RENDER(spark);
nextTick().then(() => { const resizeObserver = new ResizeObserver((entries) => { entries.forEach(() => RENDER(spark)); }); if (spark.parentElement) { resizeObserver.observe(spark.parentElement); } const mutationObserver = new MutationObserver((mutations) => { for(const mutation of mutations) { if ( mutation.type === 'attributes' && mutation.attributeName && Object.values(ELEMENT_DATASET).includes(mutation.attributeName as ELEMENT_DATASET) ) { RENDER(spark); break; } } }); mutationObserver.observe(spark, { attributes: true }); }); });}
function RENDER(chart: TINY_SPARK) { if (hasDataset(chart, 'set')) { createChart(chart, chart.__renderCount < 2); } chart.__renderCount += 1;}
function CHECK(chart: TINY_SPARK) { if (!chart.dataset.set) { console.error( `Tiny-spark exception:\n\n[data-set] data attribute is missing.\n` + `Provide an array of numbers, for example:\n\n data-set="[1, 2, 3]"` ); }}
export function tinyFormat(arr: number[] | string[]) { return JSON.stringify(arr);}