tiny-spark 0.1.0-alpha.0

package/LICENCE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 ALEC LLOYD PROBERT
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,40 @@
+# tiny-spark
+
+[![npm](https://img.shields.io/npm/v/tiny-spark)](https://github.com/graphieros/tiny-spark)
+[![GitHub issues](https://img.shields.io/github/issues/graphieros/tiny-spark)](https://github.com/graphieros/tiny-spark/issues)
+[![License](https://img.shields.io/badge/license-MIT-green)](https://github.com/graphieros/tiny-spark?tab=MIT-1-ov-file#readme)
+[![npm](https://img.shields.io/npm/dt/tiny-spark)](https://github.com/graphieros/tiny-spark)
+
+An elegant, reactive and responsive sparkline chart solution without dependency.
+
+## Installation
+
+```
+npm i tiny-spark
+```
+
+## Usage
+
+Just set up a div with a "tiny-spark" class, with a few data attributes to configure the chart.
+
+```html
+<div style="width: 100%">
+  <div
+    class="tiny-spark"
+    data-curve="true"
+    data-set="[1, 2, 3, 5, 8, 13]"
+    data-dates='["01-2026", "02-2026", "03-2026", "04-2026", "05-2026", "06-2026"]'
+    data-responsive
+    data-animation="true"
+    data-line-color="#4A4A4A"
+    data-area-color="#1A1A1A10"
+    data-line-thickness="4"
+    data-plot-color="#2A2A2A"
+    data-plot-radius="2"
+    data-number-locale="en-US"
+    data-number-rounding="2"
+    data-indicator-color="#1A1A1A"
+    data-indicator-width="1"
+  ></div>
+</div>
+```

package/dist/tiny-spark.es.js

@@ -0,0 +1,234 @@
+const O = "http://www.w3.org/2000/svg";
+var F = /* @__PURE__ */ ((t) => (t.BAR = "data-bar", t.LINE = "data-line", t.SET = "data-set", t.RESPONSIVE = "data-responsive", t))(F || {}), h = /* @__PURE__ */ ((t) => (t.ANIMATION = "animation", t.AREA_COLOR = "areaColor", t.CURVE = "curve", t.DATES = "dates", t.INDICATOR_COLOR = "indicatorColor", t.INDICATOR_WIDTH = "indicatorWidth", t.LINE_COLOR = "lineColor", t.LINE_THICKNESS = "lineThickness", t.NUMBER_LOCALE = "numberLocale", t.NUMBER_ROUNDING = "numberRounding", t.NUMBER_SHOW_ON = "numberShowOn", t.PLOT_COLOR = "plotColor", t.PLOT_RADIUS = "plotRadius", t.SET = "set", t))(h || {});
+function G(t) {
+  const { width: r, height: e } = t.parentElement.getBoundingClientRect(), o = { width: 300, height: 100 }, a = `0 0 ${r || o.width} ${e || o.height}`, i = document.createElementNS(O, "svg"), u = X();
+  return i.id = u, i.setAttribute("viewBox", a), i.style.width = "100%", i.style.height = "100%", {
+    svg: i,
+    svgId: u,
+    width: r || o.width,
+    height: e || o.height
+  };
+}
+function x(t, r = 0) {
+  return isNaN(t) ? r : t;
+}
+function M(t) {
+  let r = [];
+  for (let e = 0; e < t.length; e += 1)
+    r.push(`${x(t[e].x)},${x(t[e].y)} `);
+  return r.join(" ").trim();
+}
+function R(t) {
+  if (t.length < 1) return "0,0";
+  const r = t.length - 1, e = [`${x(t[0].x)},${x(t[0].y)}`], o = [], a = [], i = [], u = [];
+  for (let n = 0; n < r; n += 1)
+    o[n] = t[n + 1].x - t[n].x, a[n] = t[n + 1].y - t[n].y, i[n] = a[n] / o[n];
+  u[0] = i[0], u[r] = i[r - 1];
+  for (let n = 1; n < r; n += 1)
+    if (i[n - 1] * i[n] <= 0)
+      u[n] = 0;
+    else {
+      const d = 2 * i[n - 1] * i[n] / (i[n - 1] + i[n]);
+      u[n] = d;
+    }
+  for (let n = 0; n < r; n += 1) {
+    const d = t[n].x, g = t[n].y, c = t[n + 1].x, C = t[n + 1].y, A = u[n], v = u[n + 1], $ = d + (c - d) / 3, S = g + A * (c - d) / 3, I = c - (c - d) / 3, y = C - v * (c - d) / 3;
+    e.push(`C ${x($)},${x(S)} ${x(I)},${x(y)} ${x(c)},${x(C)}`);
+  }
+  return e.join(" ");
+}
+function U(t, r = 1e3) {
+  const e = t.getTotalLength();
+  t.style.strokeDasharray = String(e), t.style.strokeDashoffset = String(e), t.getBoundingClientRect(), t.style.transition = `stroke-dashoffset ${r}ms ease-in-out`, t.style.strokeDashoffset = "0", t.addEventListener("transitionend", function o() {
+    t.style.transition = "", t.removeEventListener("transitionend", o);
+  });
+}
+function W(t, r, e = 1e3) {
+  const o = r.getBBox(), a = o.width, i = document.createElementNS("http://www.w3.org/2000/svg", "clipPath"), u = "clip-" + Math.random().toString(36).substr(2, 9);
+  i.setAttribute("id", u);
+  const n = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  n.setAttribute("x", o.x.toString()), n.setAttribute("y", o.y.toString()), n.setAttribute("width", "0"), n.setAttribute("height", o.height.toString()), i.appendChild(n);
+  let d = t.querySelector("defs");
+  d || (d = document.createElementNS("http://www.w3.org/2000/svg", "defs"), t.insertBefore(d, t.firstChild)), d.appendChild(i), r.setAttribute("clip-path", `url(#${u})`), n.style.transition = `width ${e}ms ease-out`, n.getBoundingClientRect(), n.setAttribute("width", a.toString()), n.addEventListener("transitionend", function g() {
+    r.removeAttribute("clip-path"), i.parentNode && i.parentNode.removeChild(i), n.removeEventListener("transitionend", g);
+  });
+}
+function j() {
+  return document.querySelectorAll(".tiny-spark");
+}
+function V(t, r) {
+  return Object.keys(t.dataset).includes(r);
+}
+function b(t, r, e) {
+  return V(t, r) ? t.dataset[r] : e;
+}
+function q(t, r) {
+  const e = new MutationObserver((o) => {
+    for (const a of o)
+      if (a.type === "attributes" && a.attributeName && Object.values(F).includes(a.attributeName)) {
+        r();
+        break;
+      }
+  });
+  return e.observe(t, { attributes: !0 }), e;
+}
+function K(t) {
+  if (!t) return {
+    color: "#1A1A1A",
+    backgroundColor: "#FFFFFF"
+  };
+  const r = window.getComputedStyle(t), e = r.getPropertyValue("color") || "#1A1A1A", o = r.getPropertyValue("background-color"), a = r.getPropertyValue("background");
+  return { color: e, backgroundColor: o || a || "#FFFFFF" };
+}
+function X() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(t) {
+    const r = Math.random() * 16 | 0;
+    return (t == "x" ? r : r & 3 | 8).toString(16);
+  });
+}
+function Y(t) {
+  const r = t.getAttribute("data-set");
+  if (!r) return [];
+  try {
+    const e = JSON.parse(r);
+    return Array.isArray(e) && e.every((o) => typeof o == "number" || [null, void 0].includes(o)) ? e : (console.warn("data-set is not an array of numbers."), []);
+  } catch (e) {
+    return console.error("Error parsing data-set:", e), [];
+  }
+}
+function J(t) {
+  const r = t.getAttribute("data-dates");
+  if (!r) return [];
+  try {
+    const e = JSON.parse(r);
+    return Array.isArray(e) && e.every((o) => typeof o == "string") ? e : (console.warn("data-dates is not an array of strings"), []);
+  } catch (e) {
+    return console.error("Error parsing data-dates", e), [];
+  }
+}
+function P(t) {
+  return {
+    min: Math.min(...t),
+    max: Math.max(...t)
+  };
+}
+function B() {
+  return new Promise((t) => setTimeout(t, 0));
+}
+function Z(t, r) {
+  const e = String(b(t, h.NUMBER_LOCALE, navigator.language || "en-US")), o = Number(String(b(t, h.NUMBER_ROUNDING, 0)));
+  return r.toLocaleString(e, {
+    useGrouping: !0,
+    minimumFractionDigits: o,
+    maximumFractionDigits: o
+  });
+}
+function z(t, r, e) {
+  if (!t.createSVGPoint || !t.getScreenCTM)
+    throw new Error("Your browser does not support SVG coordinate transformation.");
+  const o = t.getScreenCTM();
+  if (!o)
+    throw new Error("Cannot obtain the screen CTM.");
+  const a = t.createSVGPoint();
+  a.x = r, a.y = e;
+  const i = a.matrixTransform(o);
+  return { x: i.x, y: i.y };
+}
+function D(t, r, e, o, a) {
+  if (Q(o), !a) return;
+  const { x: i, y: u } = z(t, e.x, e.y), n = document.createElement("div");
+  n.classList.add("tiny-spark-tooltip"), n.setAttribute("id", `tooltip_${o}`), n.style.pointerEvents = "none", n.style.position = "fixed", n.style.top = u + "px", n.style.left = i + "px", n.style.width = "fit-content", n.innerHTML = `
+    <div class="tiny-spark-tooltip-content">${e.d ? `${e.d}: ` : ""}${[null, void 0].includes(e.v) ? "-" : Z(r, Number(e.v))}</div>
+  `, document.body.appendChild(n), B().then(() => {
+    const { width: d, height: g } = n.getBoundingClientRect();
+    n.style.left = `${i - d / 2}px`, n.style.top = `${u - g - Number(String(Number(b(r, h.PLOT_RADIUS, 3)) * 1.5))}px`;
+  });
+}
+function Q(t) {
+  const r = document.getElementById(`tooltip_${t}`);
+  r == null || r.remove();
+}
+function T(t) {
+  t.innerHTML = "";
+}
+function tt(t, r) {
+  let e = r;
+  T(t);
+  const { svg: o, svgId: a, width: i, height: u } = G(t), { color: n, backgroundColor: d } = K(t), g = { T: 12, R: 12, B: 12, L: 12 }, c = {
+    left: g.L,
+    top: g.T,
+    width: i - g.L - g.R,
+    height: u - g.T - g.B,
+    bottom: u - g.B
+  }, C = Y(t), { min: A } = P(C), v = C.map((l) => [null, void 0].includes(l) ? l : l + (A < 0 ? Math.abs(A) : 0)), { max: $ } = P(v), S = c.width / (C.length - 1) === 1 / 0 ? c.width : c.width / (C.length - 1), I = J(t), y = v.map((l, m) => {
+    const s = {
+      w: v.length === 1 ? S / 2 : 0,
+      h: v.length === 1 ? c.height / 2 : 0
+    };
+    return {
+      y: (1 - (l || 0) / $) * c.height + g.T + s.h,
+      x: c.left + S * m + s.w,
+      v: l,
+      d: I[m] || null
+    };
+  }), w = [...y].filter(({ v: l }) => ![null, void 0].includes(l)), N = document.createElementNS(O, "path");
+  N.classList.add("tiny-spark-line-path"), !t.dataset.curve || t.dataset.curve === "true" ? N.setAttribute("d", `M ${R(w)}`) : N.setAttribute("d", `M ${M(w)}`), N.setAttribute("fill", "none"), N.setAttribute("stroke", String(b(t, h.LINE_COLOR, n))), N.setAttribute("stroke-width", String(b(t, h.LINE_THICKNESS, 2))), N.setAttribute("stroke-linecap", "round");
+  const L = document.createElementNS(O, "path");
+  L.classList.add("tiny-spark-line-area"), y.length && (!t.dataset.curve || t.dataset.curve === "true" ? L.setAttribute("d", `M ${w[0].x},${c.bottom} ${R(w)} L ${w.at(-1).x},${c.bottom} Z`) : L.setAttribute("d", `M ${w[0].x},${c.bottom} ${M(w)} L ${w.at(-1).x},${c.bottom} Z`)), L.setAttribute("fill", String(b(t, h.AREA_COLOR, "transparent"))), y.length > 1 && (o.appendChild(L), o.appendChild(N));
+  const H = t.getAttribute("data-animation"), k = [];
+  y.forEach((l, m) => {
+    const s = document.createElementNS(O, "line");
+    s.classList.add("tiny-spark-indicator"), s.setAttribute("id", `indicator_${a}_${m}`), s.setAttribute("x1", String(c.left + (y.length === 1 ? c.width / 2 : m * S))), s.setAttribute("x2", String(c.left + (y.length === 1 ? c.width / 2 : m * S))), s.setAttribute("y1", String(c.top)), s.setAttribute("y2", String(c.bottom)), s.setAttribute("stroke", String(b(t, h.INDICATOR_COLOR, "#1A1A1A"))), s.setAttribute("stroke-width", String(b(t, h.INDICATOR_WIDTH, "1"))), s.setAttribute("stroke-linecap", "round"), s.style.pointerEvents = "none", s.style.opacity = "0", k.push(s), o.appendChild(s);
+  });
+  let _ = [];
+  Number(String(b(t, h.PLOT_RADIUS, 0))) > 0 && y.forEach(({ x: l, y: m, v: s }, p) => {
+    if (![null, void 0].includes(s)) {
+      const f = document.createElementNS(O, "circle");
+      f.classList.add("tiny-spark-datapoint-circle"), f.classList.add(`circle-${a}`), f.setAttribute("id", `circle_${a}_${p}`), f.setAttribute("cx", String(l)), f.setAttribute("cy", String(m)), f.setAttribute("r", String(b(t, h.PLOT_RADIUS, 3))), f.setAttribute("fill", String(b(t, h.PLOT_COLOR, String(b(t, "lineColor", n))))), f.setAttribute("stroke", d), f.style.transition = `opacity ${p * (1e3 * 2 / y.length)}ms ease-in`, f.style.opacity = "0", o.appendChild(f), _.push(f);
+    }
+  }), y.forEach((l, m) => {
+    const s = document.createElementNS(O, "rect");
+    s.classList.add("tiny-spark-tooltip-trap"), s.setAttribute("x", `${y.length === 1 ? 0 : c.left + m * S - S / 2}`), s.setAttribute("y", `${c.top}`), s.setAttribute("height", `${c.height}`), s.setAttribute("width", `${S}`), s.setAttribute("fill", "transparent"), s.addEventListener("mouseenter", () => {
+      D(o, t, l, a, !0);
+      const p = document.getElementById(`circle_${a}_${m}`);
+      p == null || p.setAttribute("r", String(Number(b(t, h.PLOT_RADIUS, 3)) * 1.5)), k[m].style.opacity = "1";
+    }), s.addEventListener("mouseout", () => {
+      D(o, t, l, a, !1);
+      const p = document.getElementById(`circle_${a}_${m}`);
+      p == null || p.setAttribute("r", String(Number(b(t, h.PLOT_RADIUS, 3)))), k.forEach((f) => f.style.opacity = "0");
+    }), o.appendChild(s);
+  }), H === "true" && e ? B().then(() => {
+    _.forEach((l) => {
+      l.style.opacity = "1";
+    }), U(N), W(o, L);
+  }) : _.forEach((l) => {
+    l.style.opacity = "1";
+  }), t.appendChild(o);
+}
+(function() {
+  window.addEventListener("load", () => {
+    const r = j();
+    r.length && Array.from(r).forEach((e) => {
+      et(e), e.__renderCount = 0, E(e), q(e, () => E(e)), new ResizeObserver((i) => {
+        i.forEach((u) => {
+          E(e);
+        });
+      }).observe(e.parentElement), new MutationObserver((i) => {
+        i.forEach((u) => {
+          u.type === "attributes" && u.attributeName && u.attributeName.startsWith("data-") && E(e);
+        });
+      }).observe(e, { attributes: !0 });
+    });
+  });
+})();
+function E(t) {
+  t.__renderCount += 1, V(t, "set") && tt(t, t.__renderCount < 3);
+}
+function et(t) {
+  t.dataset.set || console.error(`Tiny-spark exception:
+
+ [data-set] data attribute is missing.
+ Provide an array of numbers, for example:
+
+ data-set="[1, 2, 3]"`);
+}

package/dist/tiny-spark.umd.js

@@ -0,0 +1,8 @@
+(function(S){typeof define=="function"&&define.amd?define(S):S()})(function(){"use strict";const S="http://www.w3.org/2000/svg";var M=(t=>(t.BAR="data-bar",t.LINE="data-line",t.SET="data-set",t.RESPONSIVE="data-responsive",t))(M||{}),g=(t=>(t.ANIMATION="animation",t.AREA_COLOR="areaColor",t.CURVE="curve",t.DATES="dates",t.INDICATOR_COLOR="indicatorColor",t.INDICATOR_WIDTH="indicatorWidth",t.LINE_COLOR="lineColor",t.LINE_THICKNESS="lineThickness",t.NUMBER_LOCALE="numberLocale",t.NUMBER_ROUNDING="numberRounding",t.NUMBER_SHOW_ON="numberShowOn",t.PLOT_COLOR="plotColor",t.PLOT_RADIUS="plotRadius",t.SET="set",t))(g||{});function H(t){const{width:r,height:e}=t.parentElement.getBoundingClientRect(),o={width:300,height:100},a=`0 0 ${r||o.width} ${e||o.height}`,i=document.createElementNS(S,"svg"),u=K();return i.id=u,i.setAttribute("viewBox",a),i.style.width="100%",i.style.height="100%",{svg:i,svgId:u,width:r||o.width,height:e||o.height}}function y(t,r=0){return isNaN(t)?r:t}function R(t){let r=[];for(let e=0;e<t.length;e+=1)r.push(`${y(t[e].x)},${y(t[e].y)} `);return r.join(" ").trim()}function P(t){if(t.length<1)return"0,0";const r=t.length-1,e=[`${y(t[0].x)},${y(t[0].y)}`],o=[],a=[],i=[],u=[];for(let n=0;n<r;n+=1)o[n]=t[n+1].x-t[n].x,a[n]=t[n+1].y-t[n].y,i[n]=a[n]/o[n];u[0]=i[0],u[r]=i[r-1];for(let n=1;n<r;n+=1)if(i[n-1]*i[n]<=0)u[n]=0;else{const d=2*i[n-1]*i[n]/(i[n-1]+i[n]);u[n]=d}for(let n=0;n<r;n+=1){const d=t[n].x,m=t[n].y,c=t[n+1].x,v=t[n+1].y,E=u[n],L=u[n+1],$=d+(c-d)/3,N=m+E*(c-d)/3,I=c-(c-d)/3,p=v-L*(c-d)/3;e.push(`C ${y($)},${y(N)} ${y(I)},${y(p)} ${y(c)},${y(v)}`)}return e.join(" ")}function G(t,r=1e3){const e=t.getTotalLength();t.style.strokeDasharray=String(e),t.style.strokeDashoffset=String(e),t.getBoundingClientRect(),t.style.transition=`stroke-dashoffset ${r}ms ease-in-out`,t.style.strokeDashoffset="0",t.addEventListener("transitionend",function o(){t.style.transition="",t.removeEventListener("transitionend",o)})}function U(t,r,e=1e3){const o=r.getBBox(),a=o.width,i=document.createElementNS("http://www.w3.org/2000/svg","clipPath"),u="clip-"+Math.random().toString(36).substr(2,9);i.setAttribute("id",u);const n=document.createElementNS("http://www.w3.org/2000/svg","rect");n.setAttribute("x",o.x.toString()),n.setAttribute("y",o.y.toString()),n.setAttribute("width","0"),n.setAttribute("height",o.height.toString()),i.appendChild(n);let d=t.querySelector("defs");d||(d=document.createElementNS("http://www.w3.org/2000/svg","defs"),t.insertBefore(d,t.firstChild)),d.appendChild(i),r.setAttribute("clip-path",`url(#${u})`),n.style.transition=`width ${e}ms ease-out`,n.getBoundingClientRect(),n.setAttribute("width",a.toString()),n.addEventListener("transitionend",function m(){r.removeAttribute("clip-path"),i.parentNode&&i.parentNode.removeChild(i),n.removeEventListener("transitionend",m)})}function W(){return document.querySelectorAll(".tiny-spark")}function D(t,r){return Object.keys(t.dataset).includes(r)}function f(t,r,e){return D(t,r)?t.dataset[r]:e}function j(t,r){const e=new MutationObserver(o=>{for(const a of o)if(a.type==="attributes"&&a.attributeName&&Object.values(M).includes(a.attributeName)){r();break}});return e.observe(t,{attributes:!0}),e}function q(t){if(!t)return{color:"#1A1A1A",backgroundColor:"#FFFFFF"};const r=window.getComputedStyle(t),e=r.getPropertyValue("color")||"#1A1A1A",o=r.getPropertyValue("background-color"),a=r.getPropertyValue("background");return{color:e,backgroundColor:o||a||"#FFFFFF"}}function K(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(t){const r=Math.random()*16|0;return(t=="x"?r:r&3|8).toString(16)})}function X(t){const r=t.getAttribute("data-set");if(!r)return[];try{const e=JSON.parse(r);return Array.isArray(e)&&e.every(o=>typeof o=="number"||[null,void 0].includes(o))?e:(console.warn("data-set is not an array of numbers."),[])}catch(e){return console.error("Error parsing data-set:",e),[]}}function Y(t){const r=t.getAttribute("data-dates");if(!r)return[];try{const e=JSON.parse(r);return Array.isArray(e)&&e.every(o=>typeof o=="string")?e:(console.warn("data-dates is not an array of strings"),[])}catch(e){return console.error("Error parsing data-dates",e),[]}}function F(t){return{min:Math.min(...t),max:Math.max(...t)}}function V(){return new Promise(t=>setTimeout(t,0))}function J(t,r){const e=String(f(t,g.NUMBER_LOCALE,navigator.language||"en-US")),o=Number(String(f(t,g.NUMBER_ROUNDING,0)));return r.toLocaleString(e,{useGrouping:!0,minimumFractionDigits:o,maximumFractionDigits:o})}function Z(t,r,e){if(!t.createSVGPoint||!t.getScreenCTM)throw new Error("Your browser does not support SVG coordinate transformation.");const o=t.getScreenCTM();if(!o)throw new Error("Cannot obtain the screen CTM.");const a=t.createSVGPoint();a.x=r,a.y=e;const i=a.matrixTransform(o);return{x:i.x,y:i.y}}function B(t,r,e,o,a){if(z(o),!a)return;const{x:i,y:u}=Z(t,e.x,e.y),n=document.createElement("div");n.classList.add("tiny-spark-tooltip"),n.setAttribute("id",`tooltip_${o}`),n.style.pointerEvents="none",n.style.position="fixed",n.style.top=u+"px",n.style.left=i+"px",n.style.width="fit-content",n.innerHTML=`
+    <div class="tiny-spark-tooltip-content">${e.d?`${e.d}: `:""}${[null,void 0].includes(e.v)?"-":J(r,Number(e.v))}</div>
+  `,document.body.appendChild(n),V().then(()=>{const{width:d,height:m}=n.getBoundingClientRect();n.style.left=`${i-d/2}px`,n.style.top=`${u-m-Number(String(Number(f(r,g.PLOT_RADIUS,3))*1.5))}px`})}function z(t){const r=document.getElementById(`tooltip_${t}`);r==null||r.remove()}function Q(t){t.innerHTML=""}function T(t,r){let e=r;Q(t);const{svg:o,svgId:a,width:i,height:u}=H(t),{color:n,backgroundColor:d}=q(t),m={T:12,R:12,B:12,L:12},c={left:m.L,top:m.T,width:i-m.L-m.R,height:u-m.T-m.B,bottom:u-m.B},v=X(t),{min:E}=F(v),L=v.map(l=>[null,void 0].includes(l)?l:l+(E<0?Math.abs(E):0)),{max:$}=F(L),N=c.width/(v.length-1)===1/0?c.width:c.width/(v.length-1),I=Y(t),p=L.map((l,h)=>{const s={w:L.length===1?N/2:0,h:L.length===1?c.height/2:0};return{y:(1-(l||0)/$)*c.height+m.T+s.h,x:c.left+N*h+s.w,v:l,d:I[h]||null}}),C=[...p].filter(({v:l})=>![null,void 0].includes(l)),w=document.createElementNS(S,"path");w.classList.add("tiny-spark-line-path"),!t.dataset.curve||t.dataset.curve==="true"?w.setAttribute("d",`M ${P(C)}`):w.setAttribute("d",`M ${R(C)}`),w.setAttribute("fill","none"),w.setAttribute("stroke",String(f(t,g.LINE_COLOR,n))),w.setAttribute("stroke-width",String(f(t,g.LINE_THICKNESS,2))),w.setAttribute("stroke-linecap","round");const O=document.createElementNS(S,"path");O.classList.add("tiny-spark-line-area"),p.length&&(!t.dataset.curve||t.dataset.curve==="true"?O.setAttribute("d",`M ${C[0].x},${c.bottom} ${P(C)} L ${C.at(-1).x},${c.bottom} Z`):O.setAttribute("d",`M ${C[0].x},${c.bottom} ${R(C)} L ${C.at(-1).x},${c.bottom} Z`)),O.setAttribute("fill",String(f(t,g.AREA_COLOR,"transparent"))),p.length>1&&(o.appendChild(O),o.appendChild(w));const et=t.getAttribute("data-animation"),k=[];p.forEach((l,h)=>{const s=document.createElementNS(S,"line");s.classList.add("tiny-spark-indicator"),s.setAttribute("id",`indicator_${a}_${h}`),s.setAttribute("x1",String(c.left+(p.length===1?c.width/2:h*N))),s.setAttribute("x2",String(c.left+(p.length===1?c.width/2:h*N))),s.setAttribute("y1",String(c.top)),s.setAttribute("y2",String(c.bottom)),s.setAttribute("stroke",String(f(t,g.INDICATOR_COLOR,"#1A1A1A"))),s.setAttribute("stroke-width",String(f(t,g.INDICATOR_WIDTH,"1"))),s.setAttribute("stroke-linecap","round"),s.style.pointerEvents="none",s.style.opacity="0",k.push(s),o.appendChild(s)});let _=[];Number(String(f(t,g.PLOT_RADIUS,0)))>0&&p.forEach(({x:l,y:h,v:s},x)=>{if(![null,void 0].includes(s)){const b=document.createElementNS(S,"circle");b.classList.add("tiny-spark-datapoint-circle"),b.classList.add(`circle-${a}`),b.setAttribute("id",`circle_${a}_${x}`),b.setAttribute("cx",String(l)),b.setAttribute("cy",String(h)),b.setAttribute("r",String(f(t,g.PLOT_RADIUS,3))),b.setAttribute("fill",String(f(t,g.PLOT_COLOR,String(f(t,"lineColor",n))))),b.setAttribute("stroke",d),b.style.transition=`opacity ${x*(1e3*2/p.length)}ms ease-in`,b.style.opacity="0",o.appendChild(b),_.push(b)}}),p.forEach((l,h)=>{const s=document.createElementNS(S,"rect");s.classList.add("tiny-spark-tooltip-trap"),s.setAttribute("x",`${p.length===1?0:c.left+h*N-N/2}`),s.setAttribute("y",`${c.top}`),s.setAttribute("height",`${c.height}`),s.setAttribute("width",`${N}`),s.setAttribute("fill","transparent"),s.addEventListener("mouseenter",()=>{B(o,t,l,a,!0);const x=document.getElementById(`circle_${a}_${h}`);x==null||x.setAttribute("r",String(Number(f(t,g.PLOT_RADIUS,3))*1.5)),k[h].style.opacity="1"}),s.addEventListener("mouseout",()=>{B(o,t,l,a,!1);const x=document.getElementById(`circle_${a}_${h}`);x==null||x.setAttribute("r",String(Number(f(t,g.PLOT_RADIUS,3)))),k.forEach(b=>b.style.opacity="0")}),o.appendChild(s)}),et==="true"&&e?V().then(()=>{_.forEach(l=>{l.style.opacity="1"}),G(w),U(o,O)}):_.forEach(l=>{l.style.opacity="1"}),t.appendChild(o)}(function(){window.addEventListener("load",()=>{const r=W();r.length&&Array.from(r).forEach(e=>{tt(e),e.__renderCount=0,A(e),j(e,()=>A(e)),new ResizeObserver(i=>{i.forEach(u=>{A(e)})}).observe(e.parentElement),new MutationObserver(i=>{i.forEach(u=>{u.type==="attributes"&&u.attributeName&&u.attributeName.startsWith("data-")&&A(e)})}).observe(e,{attributes:!0})})})})();function A(t){t.__renderCount+=1,D(t,"set")&&T(t,t.__renderCount<3)}function tt(t){t.dataset.set||console.error(`Tiny-spark exception:
+
+ [data-set] data attribute is missing.
+ Provide an array of numbers, for example:
+
+ data-set="[1, 2, 3]"`)}});

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/index.html

@@ -0,0 +1,32 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+
+    <!-- <div
+      data-line
+      data-curve="true"
+      data-animation="true"
+      data-line-color="#4A4A4A"
+      data-area-color="#1A1A1A10"
+      data-line-thickness="4"
+      data-responsive
+      data-plot-color="#2A2A2A"
+      data-plot-radius="3"
+      data-number-locale="en-US"
+      data-number-rounding="2"
+      data-indicator-color="#1A1A1A"
+      data-indicator-width="1"
+      data-set="[1, 2, 3]"
+    ></div> -->
+
+    <script type="module" src="/src/main.ts"></script>
+    <!-- <script type="module" src="dist/tiny-spark.umd.js"></script> -->
+  </body>
+</html>

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "tiny-spark",
+  "private": false,
+  "version": "0.1.0-alpha.0",
+  "type": "module",
+  "description": "An elegant, reactive and responsive sparkline chart solution without dependency.",
+  "author": "Alec Lloyd Probert",
+  "main": "dist/tiny-spark.umd.js",
+  "module": "dist/tiny-spark.es.js",
+  "keywords": [
+    "sparkline",
+    "chart",
+    "mini chart",
+    "line"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/graphieros/tiny-spark.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build"
+  },
+  "devDependencies": {
+    "typescript": "~5.7.2",
+    "vite": "^6.2.3"
+  }
+}

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/index.ts

@@ -0,0 +1,49 @@
+import { TINY_SPARK } from "../types"
+import { getCharts, observe, createLineChart, hasDataset } from "./lib"
+
+(function MAIN() {
+
+    window.addEventListener('load', () => {
+        const charts = getCharts();
+        if (!charts.length) return;
+
+        Array.from(charts).forEach((chart) => {
+            CHECK(chart as TINY_SPARK);
+            (chart as TINY_SPARK).__renderCount = 0;
+            RENDER(chart as TINY_SPARK);
+            observe(chart as TINY_SPARK, () => RENDER(chart as TINY_SPARK));
+
+            const spy = new ResizeObserver((entries) => {
+                entries.forEach(_ => {
+                    RENDER(chart as TINY_SPARK);
+                });
+            });
+
+            spy.observe(chart.parentElement!);
+
+            const mutation = new MutationObserver((mutations) => {
+                mutations.forEach(mutation => {
+                    if (
+                        mutation.type === 'attributes' &&
+                        mutation.attributeName &&
+                        mutation.attributeName.startsWith('data-')
+                    ) {
+                        RENDER(chart as TINY_SPARK);
+                    }
+                });
+            });
+            mutation.observe(chart, { attributes: true });
+        });
+    });
+}());
+
+function RENDER(chart: TINY_SPARK) {
+    chart.__renderCount += 1;
+    hasDataset(chart, 'set') && createLineChart(chart, chart.__renderCount < 3);
+}
+
+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]"`)
+    }
+}

package/src/lib.ts

@@ -0,0 +1,334 @@
+import { CHART_TYPE, DATA, TINY_SPARK, POINT, XMLNS, DATA_ATTRIBUTE, ANIMATION_DURATION } from "../types"
+import { animateAreaProgressively, animatePath, createSmoothPath, createStraightPath, SVG } from "./svg";
+
+export function getCharts() {
+  const charts = document.querySelectorAll('.tiny-spark')
+  return charts
+}
+
+export function isChartOfType(element: TINY_SPARK, type: CHART_TYPE) {
+  const attrs = Object.keys(element.dataset)
+  return attrs.includes(type)
+}
+
+export function hasDataset(element: TINY_SPARK, name: string) {
+  const attrs = Object.keys(element.dataset)
+  return attrs.includes(name)
+}
+
+export function getDatasetValue(element: TINY_SPARK, name: string, fallback: number | string) {
+  if (!hasDataset(element, name)) return fallback;
+  return element.dataset[name]
+}
+
+export function observe(element: TINY_SPARK, render: () => void) {
+  const observer = new MutationObserver((mutationsList) => {
+    for (const mutation of mutationsList) {
+      if (
+        mutation.type === 'attributes' &&
+        mutation.attributeName &&
+        Object.values(DATA).includes(mutation.attributeName as DATA)
+      ) {
+        render();
+        break;
+      }
+    }
+  });
+
+  observer.observe(element, { attributes: true });
+  return observer;
+}
+
+export function getElementColors(element: TINY_SPARK) {
+  if (!element) return {
+    color: '#1A1A1A',
+    backgroundColor: '#FFFFFF'
+  };
+  const computedStyle = window.getComputedStyle(element);
+  const color = computedStyle.getPropertyValue('color') || '#1A1A1A';
+  const backgroundColor = computedStyle.getPropertyValue('background-color');
+  const background = computedStyle.getPropertyValue('background');
+  const bg = backgroundColor || background || '#FFFFFF';
+  return { color, backgroundColor: bg };
+}
+
+export function createUid() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'
+    .replace(/[xy]/g, function (c) {
+      const r = Math.random() * 16 | 0,
+        v = c == 'x' ? r : (r & 0x3 | 0x8);
+      return v.toString(16);
+    });
+}
+
+export function parseDataset(chart: TINY_SPARK) {
+  const dataSetStr = chart.getAttribute('data-set');
+  if (!dataSetStr) return [];
+  try {
+    const parsed = JSON.parse(dataSetStr);
+    if (Array.isArray(parsed) && parsed.every(item => typeof item === 'number' || [null, undefined].includes(item))) {
+      return parsed;
+    }
+    console.warn('data-set is not an array of numbers.');
+    return [];
+  } catch (error) {
+    console.error('Error parsing data-set:', error);
+    return [];
+  }
+}
+
+function getDates(chart: TINY_SPARK) {
+  const dates = chart.getAttribute('data-dates');
+  if (!dates) return []
+  try {
+    const parsed = JSON.parse(dates);
+    if (Array.isArray(parsed) && parsed.every(item => typeof item === 'string')) {
+      return parsed;
+    }
+    console.warn('data-dates is not an array of strings');
+    return [];
+  } catch (error) {
+    console.error('Error parsing data-dates', error);
+    return [];
+  }
+}
+
+export function minMax(dataset: number[]) {
+  return {
+    min: Math.min(...dataset),
+    max: Math.max(...dataset)
+  }
+}
+
+export function nextTick() {
+  return new Promise(resolve => setTimeout(resolve, 0));
+}
+
+export function localeNum(chart: TINY_SPARK, num: number) {
+  const locale = String(getDatasetValue(chart, DATA_ATTRIBUTE.NUMBER_LOCALE, navigator.language || 'en-US'));
+  const rounding = Number(String(getDatasetValue(chart, DATA_ATTRIBUTE.NUMBER_ROUNDING, 0)));
+  return num.toLocaleString(locale, {
+    useGrouping: true,
+    minimumFractionDigits: rounding,
+    maximumFractionDigits: rounding
+  });
+}
+
+export function domPlot(svg: SVGSVGElement, svgX: number, svgY: number) {
+  if (!svg.createSVGPoint || !svg.getScreenCTM) {
+    throw new Error("Your browser does not support SVG coordinate transformation.");
+  }
+
+  const screenCTM = svg.getScreenCTM();
+  if (!screenCTM) {
+    throw new Error("Cannot obtain the screen CTM.");
+  }
+
+  const point = svg.createSVGPoint();
+  point.x = svgX;
+  point.y = svgY;
+
+  const domPoint = point.matrixTransform(screenCTM);
+
+  return { x: domPoint.x, y: domPoint.y };
+}
+
+export function tooltip(svg: SVGSVGElement, chart: TINY_SPARK, point: POINT, id: string, show: boolean) {
+  nukeTooltip(id);
+  if (!show) return;
+  const { x, y } = domPlot(svg, point.x, point.y);
+  const tool = document.createElement('div');
+  tool.classList.add('tiny-spark-tooltip');
+  tool.setAttribute('id', `tooltip_${id}`);
+  tool.style.pointerEvents = 'none';
+  tool.style.position = 'fixed';
+  tool.style.top = y + 'px';
+  tool.style.left = x + 'px';
+  tool.style.width = 'fit-content';
+  tool.innerHTML = `
+    <div class="tiny-spark-tooltip-content">${!point.d ? '' : `${point.d}: `}${[null, undefined].includes(point.v as any) ? '-' : localeNum(chart, Number(point.v))}</div>
+  `
+  document.body.appendChild(tool);
+  nextTick().then(() => {
+    const { width, height } = tool.getBoundingClientRect()
+    tool.style.left = `${x - width / 2}px`;
+    tool.style.top = `${y - height - Number(String(Number(getDatasetValue(chart, DATA_ATTRIBUTE.PLOT_RADIUS, 3)) * 1.5))}px`
+  })
+}
+
+export function nukeTooltip(id: string) {
+  const t = document.getElementById(`tooltip_${id}`);
+  t?.remove();
+}
+
+
+/////////////////////////////////////////////////////
+
+function clear(chart: TINY_SPARK) {
+  chart.innerHTML = ''
+}
+
+export function createLineChart(chart: TINY_SPARK, firstTime: boolean) {
+  let animate = firstTime;
+  clear(chart);
+  const { svg, svgId, width, height } = SVG(chart);
+  const { color, backgroundColor } = getElementColors(chart)
+
+  const padding = { T: 12, R: 12, B: 12, L: 12 };
+
+  // DRAWING AREA
+  const area = {
+    left: padding.L,
+    top: padding.T,
+    width: width - padding.L - padding.R,
+    height: height - padding.T - padding.B,
+    bottom: height - padding.B,
+    right: width - padding.R
+  };
+
+  const dataset = parseDataset(chart);
+  const { min: MIN } = minMax(dataset);
+  const positiveDataset = dataset.map(d => {
+    return [null, undefined].includes(d) ? d : d + (MIN < 0 ? Math.abs(MIN) : 0)
+  });
+  const { max } = minMax(positiveDataset);
+  const slot = area.width / (dataset.length - 1) === Infinity ? area.width : area.width / (dataset.length - 1);
+
+  const dates = getDates(chart);
+
+  // DATAPOINTS
+  const allPoints = positiveDataset.map((d, i) => {
+    const uniqueCase = {
+      w: positiveDataset.length === 1 ? slot / 2 : 0,
+      h: positiveDataset.length === 1 ? area.height / 2 : 0
+    }
+    return {
+      y: ((1 - ((d || 0) / max)) * area.height) + padding.T + uniqueCase.h,
+      x: area.left + ((slot * i)) + uniqueCase.w,
+      v: d,
+      d: dates[i] || null
+    }
+  })
+
+  const points = [...allPoints].filter(({ v }) => ![null, undefined].includes(v));
+
+  // PATH & AREA
+  const path = document.createElementNS(XMLNS, 'path');
+  path.classList.add('tiny-spark-line-path');
+
+  if (!chart.dataset.curve || chart.dataset.curve === 'true') {
+    path.setAttribute('d', `M ${createSmoothPath(points)}`);
+  } else {
+    path.setAttribute('d', `M ${createStraightPath(points)}`);
+  }
+
+  path.setAttribute('fill', 'none');
+  path.setAttribute('stroke', String(getDatasetValue(chart, DATA_ATTRIBUTE.LINE_COLOR, color)));
+  path.setAttribute('stroke-width', String(getDatasetValue(chart, DATA_ATTRIBUTE.LINE_THICKNESS, 2)));
+  path.setAttribute('stroke-linecap', 'round');
+
+  const pathArea = document.createElementNS(XMLNS, 'path');
+  pathArea.classList.add('tiny-spark-line-area');
+
+  if (allPoints.length) {
+    if (!chart.dataset.curve || chart.dataset.curve === 'true') {
+      pathArea.setAttribute('d', `M ${points[0].x},${area.bottom} ${createSmoothPath(points)} L ${points.at(-1)!.x},${area.bottom} Z`);
+    } else {
+      pathArea.setAttribute('d', `M ${points[0].x},${area.bottom} ${createStraightPath(points)} L ${points.at(-1)!.x},${area.bottom} Z`);
+    }
+  }
+
+  pathArea.setAttribute('fill', String(getDatasetValue(chart, DATA_ATTRIBUTE.AREA_COLOR, 'transparent')));
+
+  if (allPoints.length > 1) {
+    svg.appendChild(pathArea);
+    svg.appendChild(path);
+  }
+
+
+  const animation = chart.getAttribute('data-animation');
+
+  const indicators: SVGLineElement[] = [];
+
+  // VERTICAL INDICATOR
+  allPoints.forEach((_, i) => {
+    const indicator = document.createElementNS(XMLNS, 'line');
+    indicator.classList.add('tiny-spark-indicator');
+    indicator.setAttribute('id', `indicator_${svgId}_${i}`);
+    indicator.setAttribute('x1', String(area.left + (allPoints.length === 1 ? area.width / 2 : (i * slot))));
+    indicator.setAttribute('x2', String(area.left + (allPoints.length === 1 ? area.width / 2 : (i * slot))));
+    indicator.setAttribute('y1', String(area.top));
+    indicator.setAttribute('y2', String(area.bottom));
+    indicator.setAttribute('stroke', String(getDatasetValue(chart, DATA_ATTRIBUTE.INDICATOR_COLOR, '#1A1A1A')));
+    indicator.setAttribute('stroke-width', String(getDatasetValue(chart, DATA_ATTRIBUTE.INDICATOR_WIDTH, '1')));
+    indicator.setAttribute('stroke-linecap', 'round');
+    indicator.style.pointerEvents = 'none';
+    indicator.style.opacity = '0';
+    indicators.push(indicator);
+    svg.appendChild(indicator);
+  })
+
+  let plots: SVGCircleElement[] = [];
+
+  // PLOTS
+  if (Number(String(getDatasetValue(chart, DATA_ATTRIBUTE.PLOT_RADIUS, 0))) > 0) {
+    allPoints.forEach(({ x, y, v }, i) => {
+      if (![null, undefined].includes(v)) {
+        const circle = document.createElementNS(XMLNS, 'circle');
+        circle.classList.add('tiny-spark-datapoint-circle');
+        circle.classList.add(`circle-${svgId}`);
+        circle.setAttribute('id', `circle_${svgId}_${i}`);
+        circle.setAttribute('cx', String(x));
+        circle.setAttribute('cy', String(y));
+        circle.setAttribute('r', String(getDatasetValue(chart, DATA_ATTRIBUTE.PLOT_RADIUS, 3)));
+        circle.setAttribute('fill', String(getDatasetValue(chart, DATA_ATTRIBUTE.PLOT_COLOR, String(getDatasetValue(chart, 'lineColor', color)))));
+        circle.setAttribute('stroke', backgroundColor);
+        circle.style.transition = `opacity ${i * ((ANIMATION_DURATION * 2) / allPoints.length)}ms ease-in`;
+        circle.style.opacity = '0';
+        svg.appendChild(circle);
+        plots.push(circle);
+      }
+    });
+  }
+
+  // TOOLTIP TRAPS
+  allPoints.forEach((point, i) => {
+    const trap = document.createElementNS(XMLNS, 'rect');
+    trap.classList.add('tiny-spark-tooltip-trap');
+    trap.setAttribute('x', `${allPoints.length === 1 ? 0 : area.left + i * slot - slot / 2}`);
+    trap.setAttribute('y', `${area.top}`);
+    trap.setAttribute('height', `${area.height}`);
+    trap.setAttribute('width', `${slot}`);
+    trap.setAttribute('fill', 'transparent');
+    trap.addEventListener('mouseenter', () => {
+      tooltip(svg, chart, point, svgId, true);
+      const circle = document.getElementById(`circle_${svgId}_${i}`);
+      circle?.setAttribute('r', String(Number(getDatasetValue(chart, DATA_ATTRIBUTE.PLOT_RADIUS, 3)) * 1.5))
+      indicators[i].style.opacity = '1';
+    });
+    trap.addEventListener('mouseout', () => {
+      tooltip(svg, chart, point, svgId, false);
+      const circle = document.getElementById(`circle_${svgId}_${i}`);
+      circle?.setAttribute('r', String(Number(getDatasetValue(chart, DATA_ATTRIBUTE.PLOT_RADIUS, 3))))
+      indicators.forEach(indicator => indicator.style.opacity = '0');
+    });
+    svg.appendChild(trap);
+  });
+
+
+  if (animation === 'true' && animate) {
+    nextTick().then(() => {
+      plots.forEach(circle => {
+        circle.style.opacity = '1'
+      })
+      animatePath(path);
+      animateAreaProgressively(svg as unknown as TINY_SPARK, pathArea);
+    })
+  } else {
+    plots.forEach(circle => {
+      circle.style.opacity = '1'
+    })
+  }
+
+  chart.appendChild(svg);
+}

package/src/main.ts

@@ -0,0 +1,33 @@
+import './style.css'
+
+function makeDs(n: number) {
+  let arr = [];
+  for(let i = 0; i < n; i += 1) {
+    arr.push(Math.random());
+  }
+  return arr.toString();
+}
+
+document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
+<div style="width:100%">
+<div 
+  class="tiny-spark" 
+  data-curve="true"
+  data-animation="true"
+  data-line-color="#4A4A4A"
+  data-area-color="#1A1A1A10"
+  data-line-thickness="3"
+  data-responsive
+  data-plot-color="#2A2A2A"
+  data-plot-radius="3"
+  data-number-locale="en-US"
+  data-number-rounding="2"
+  data-indicator-color="#1A1A1A"
+  data-indicator-width="1"
+  data-set="[${makeDs(6)}]"
+  data-dates='["jan", "feb", "mar", "apr", "may", "jun"]'
+>
+</div>
+</div>
+`
+import './index'

package/src/style.css

@@ -0,0 +1,111 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #3178c6aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+.tiny-spark {
+  background-color: #9A9A9A;
+}
+
+#app {
+  width: 100%;
+}
+
+.tiny-spark-tooltip {
+  border-radius: 3px;
+  padding: 0 12px;
+  font-size: 10px;
+  /* display: none; */
+  /* background: red; */
+}

package/src/svg.ts

@@ -0,0 +1,126 @@
+import { TINY_SPARK, POINT, XMLNS, ANIMATION_DURATION } from "../types";
+import { createUid } from "./lib";
+
+export function SVG(chart: TINY_SPARK) {
+    const { width, height } = chart.parentElement!.getBoundingClientRect();
+    const fallback = { width: 300, height: 100 };
+    const viewBox = `0 0 ${width || fallback.width} ${height || fallback.height}`;
+
+    const svg = document.createElementNS(XMLNS, 'svg');
+    const id = createUid();
+    svg.id = id;
+    svg.setAttribute('viewBox', viewBox);
+    svg.style.width = '100%';
+    svg.style.height = '100%';
+
+    return {
+        svg,
+        svgId: id,
+        width: width || fallback.width,
+        height: height || fallback.height
+    }
+}
+
+export function checkNaN(val: number, fallback = 0) {
+    if (isNaN(val)) {
+        return fallback
+    } else {
+        return val
+    }
+}
+
+export function createStraightPath(points: POINT[]) {
+    let arr = [];
+    for (let i = 0; i < points.length; i += 1) {
+        arr.push(`${checkNaN(points[i].x)},${checkNaN(points[i].y)} `)
+    }
+    return arr.join(' ').trim()
+}
+
+export function createSmoothPath(points: POINT[]) {
+    if (points.length < 1) return '0,0';
+
+    const n = points.length - 1;
+    const path = [`${checkNaN(points[0].x)},${checkNaN(points[0].y)}`];
+    const dx = [], dy = [], slopes = [], tangents = [];
+
+    for (let i = 0; i < n; i += 1) {
+        dx[i] = points[i + 1].x - points[i].x;
+        dy[i] = points[i + 1].y - points[i].y;
+        slopes[i] = dy[i] / dx[i];
+    }
+
+    tangents[0] = slopes[0];
+    tangents[n] = slopes[n - 1];
+
+    for (let i = 1; i < n; i += 1) {
+        if (slopes[i - 1] * slopes[i] <= 0) {
+            tangents[i] = 0;
+        } else {
+            const harmonicMean = (2 * slopes[i - 1] * slopes[i]) / (slopes[i - 1] + slopes[i]);
+            tangents[i] = harmonicMean;
+        }
+    }
+
+    for (let i = 0; i < n; i += 1) {
+        const x1 = points[i].x;
+        const y1 = points[i].y;
+        const x2 = points[i + 1].x;
+        const y2 = points[i + 1].y;
+        const m1 = tangents[i];
+        const m2 = tangents[i + 1];
+        const controlX1 = x1 + (x2 - x1) / 3;
+        const controlY1 = y1 + m1 * (x2 - x1) / 3;
+        const controlX2 = x2 - (x2 - x1) / 3;
+        const controlY2 = y2 - m2 * (x2 - x1) / 3;
+
+        path.push(`C ${checkNaN(controlX1)},${checkNaN(controlY1)} ${checkNaN(controlX2)},${checkNaN(controlY2)} ${checkNaN(x2)},${checkNaN(y2)}`);
+    }
+
+    return path.join(' ');
+}
+
+export function animatePath(path: SVGPathElement, duration = ANIMATION_DURATION) {
+    const totalLength = path.getTotalLength();
+    path.style.strokeDasharray = String(totalLength);
+    path.style.strokeDashoffset = String(totalLength);
+    path.getBoundingClientRect();
+    path.style.transition = `stroke-dashoffset ${duration}ms ease-in-out`;
+    path.style.strokeDashoffset = '0';
+    path.addEventListener('transitionend', function handler() {
+        path.style.transition = '';
+        path.removeEventListener('transitionend', handler);
+    });
+}
+
+export function animateAreaProgressively(svg: TINY_SPARK, areaElement: SVGPathElement, duration = ANIMATION_DURATION) {
+    const bbox = areaElement.getBBox();
+    const fullWidth = bbox.width;
+    const clipPath = document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
+    const clipId = "clip-" + Math.random().toString(36).substr(2, 9);
+    clipPath.setAttribute("id", clipId);
+
+    const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+    rect.setAttribute("x", bbox.x.toString());
+    rect.setAttribute("y", bbox.y.toString());
+    rect.setAttribute("width", "0");
+    rect.setAttribute("height", bbox.height.toString());
+    clipPath.appendChild(rect);
+
+    let defs = svg.querySelector("defs");
+    if (!defs) {
+        defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+        svg.insertBefore(defs, svg.firstChild);
+    }
+    defs.appendChild(clipPath);
+    areaElement.setAttribute("clip-path", `url(#${clipId})`);
+    rect.style.transition = `width ${duration}ms ease-out`;
+    rect.getBoundingClientRect();
+    rect.setAttribute("width", fullWidth.toString());
+
+    rect.addEventListener("transitionend", function handler() {
+        areaElement.removeAttribute("clip-path");
+        clipPath.parentNode && clipPath.parentNode.removeChild(clipPath);
+        rect.removeEventListener("transitionend", handler);
+    });
+}

package/src/typescript.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/types/index.ts

@@ -0,0 +1,42 @@
+export type TINY_SPARK = HTMLDivElement & {
+    __renderCount: number
+}
+
+export const XMLNS = 'http://www.w3.org/2000/svg'
+export const ANIMATION_DURATION = 1000;
+
+export enum CHART_TYPE {
+    BAR = 'bar',
+    LINE = 'line'
+}
+
+export enum CHART {
+    BAR = `data-${CHART_TYPE.BAR}`,
+    LINE = `data-${CHART_TYPE.LINE}`
+}
+
+export enum DATA {
+    BAR = CHART.BAR,
+    LINE = CHART.LINE,
+    SET = 'data-set',
+    RESPONSIVE = 'data-responsive'
+}
+
+export type POINT = { x: number; y: number, v: number | null | undefined, d: string | null | undefined }
+
+export enum DATA_ATTRIBUTE {
+    ANIMATION = 'animation',
+    AREA_COLOR = 'areaColor',
+    CURVE = 'curve',
+    DATES = 'dates',
+    INDICATOR_COLOR = 'indicatorColor',
+    INDICATOR_WIDTH = 'indicatorWidth',
+    LINE_COLOR = 'lineColor',
+    LINE_THICKNESS = 'lineThickness',
+    NUMBER_LOCALE = 'numberLocale',
+    NUMBER_ROUNDING = 'numberRounding',
+    NUMBER_SHOW_ON = 'numberShowOn',
+    PLOT_COLOR = 'plotColor',
+    PLOT_RADIUS = 'plotRadius',
+    SET = 'set',
+}

package/vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: 'src/index.ts',
+      name: 'tiny-spark',
+      fileName: (format) => `tiny-spark.${format}.js`,
+      formats: ['es', 'umd'],
+    },
+    rollupOptions: {
+      external: [],
+      output: {
+        globals: {}
+      }
+    }
+  }
+})