tiny-spark 0.2.1-beta.2 → 0.2.1-beta.3

package/dist/tiny-spark.es.js

@@ -32,18 +32,20 @@ function M(t) {
       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, w = t[n + 1].y, E = u[n], C = u[n + 1], A = d + (c - d) / 3, S = g + E * (c - d) / 3, k = c - (c - d) / 3, p = w - C * (c - d) / 3;
-    e.push(`C ${x(A)},${x(S)} ${x(k)},${x(p)} ${x(c)},${x(w)}`);
+    const d = t[n].x, g = t[n].y, c = t[n + 1].x, w = t[n + 1].y, E = u[n], C = u[n + 1], A = d + (c - d) / 3, S = g + E * (c - d) / 3, k = c - (c - d) / 3, y = w - C * (c - d) / 3;
+    e.push(`C ${x(A)},${x(S)} ${x(k)},${x(y)} ${x(c)},${x(w)}`);
   }
   return e.join(" ");
 }
 function W(t, r = 1e3) {
+  t.style.opacity = "1";
   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 j(t, r, e = 1e3) {
+  r.style.opacity = "1";
   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");
@@ -160,7 +162,7 @@ function et(t, r) {
     width: i - g.L - g.R,
     height: u - g.T - g.B,
     bottom: u - g.B
-  }, w = z(t), { min: E } = P(w), C = w.map((l) => [null, void 0].includes(l) ? l : l + (E < 0 ? Math.abs(E) : 0)), { max: A } = P(C), S = c.width / (w.length - 1) === 1 / 0 ? c.width : c.width / (w.length - 1), k = J(t), p = C.map((l, m) => {
+  }, w = z(t), { min: E } = P(w), C = w.map((l) => [null, void 0].includes(l) ? l : l + (E < 0 ? Math.abs(E) : 0)), { max: A } = P(C), S = c.width / (w.length - 1) === 1 / 0 ? c.width : c.width / (w.length - 1), k = J(t), y = C.map((l, m) => {
     const s = {
       w: C.length === 1 ? S / 2 : 0,
       h: C.length === 1 ? c.height / 2 : 0
@@ -171,31 +173,31 @@ function et(t, r) {
       v: l,
       d: k[m] || null
     };
-  }), v = [...p].filter(({ v: l }) => ![null, void 0].includes(l)), N = document.createElementNS(L, "path");
+  }), v = [...y].filter(({ v: l }) => ![null, void 0].includes(l)), N = document.createElementNS(L, "path");
   N.classList.add("tiny-spark-line-path"), !t.dataset.curve || t.dataset.curve === "true" ? N.setAttribute("d", `M ${M(v)}`) : N.setAttribute("d", `M ${_(v)}`), N.setAttribute("fill", "none"), N.setAttribute("stroke", String(h(t, b.LINE_COLOR, n))), N.setAttribute("stroke-width", String(h(t, b.LINE_THICKNESS, 2))), N.setAttribute("stroke-linecap", "round");
   const O = document.createElementNS(L, "path");
-  O.classList.add("tiny-spark-line-area"), p.length && (!t.dataset.curve || t.dataset.curve === "true" ? O.setAttribute("d", `M ${v[0].x},${c.bottom} ${M(v)} L ${v.at(-1).x},${c.bottom} Z`) : O.setAttribute("d", `M ${v[0].x},${c.bottom} ${_(v)} L ${v.at(-1).x},${c.bottom} Z`)), O.setAttribute("fill", String(h(t, b.AREA_COLOR, "transparent"))), p.length > 1 && (o.appendChild(O), o.appendChild(N));
+  O.classList.add("tiny-spark-line-area"), y.length && (!t.dataset.curve || t.dataset.curve === "true" ? O.setAttribute("d", `M ${v[0].x},${c.bottom} ${M(v)} L ${v.at(-1).x},${c.bottom} Z`) : O.setAttribute("d", `M ${v[0].x},${c.bottom} ${_(v)} L ${v.at(-1).x},${c.bottom} Z`)), O.setAttribute("fill", String(h(t, b.AREA_COLOR, "transparent"))), y.length > 1 && (o.appendChild(O), o.appendChild(N));
   const G = t.getAttribute("data-animation"), I = [];
-  p.forEach((l, m) => {
+  y.forEach((l, m) => {
     const s = document.createElementNS(L, "line");
-    s.classList.add("tiny-spark-indicator"), s.setAttribute("id", `indicator_${a}_${m}`), s.setAttribute("x1", String(c.left + (p.length === 1 ? c.width / 2 : m * S))), s.setAttribute("x2", String(c.left + (p.length === 1 ? c.width / 2 : m * S))), s.setAttribute("y1", String(c.top)), s.setAttribute("y2", String(c.bottom)), s.setAttribute("stroke", String(h(t, b.INDICATOR_COLOR, "#1A1A1A"))), s.setAttribute("stroke-width", String(h(t, b.INDICATOR_WIDTH, "1"))), s.setAttribute("stroke-linecap", "round"), s.style.pointerEvents = "none", s.style.opacity = "0", I.push(s), o.appendChild(s);
+    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(h(t, b.INDICATOR_COLOR, "#1A1A1A"))), s.setAttribute("stroke-width", String(h(t, b.INDICATOR_WIDTH, "1"))), s.setAttribute("stroke-linecap", "round"), s.style.pointerEvents = "none", s.style.opacity = "0", I.push(s), o.appendChild(s);
   });
   let R = [];
-  Number(String(h(t, b.PLOT_RADIUS, 0))) > 0 && p.forEach(({ x: l, y: m, v: s }, y) => {
+  Number(String(h(t, b.PLOT_RADIUS, 0))) > 0 && y.forEach(({ x: l, y: m, v: s }, p) => {
     if (![null, void 0].includes(s)) {
       const f = document.createElementNS(L, "circle");
-      f.classList.add("tiny-spark-datapoint-circle"), f.classList.add(`circle-${a}`), f.setAttribute("id", `circle_${a}_${y}`), f.setAttribute("cx", String(l || 0)), f.setAttribute("cy", String(m || 0)), f.setAttribute("r", String(h(t, b.PLOT_RADIUS, 3))), f.setAttribute("fill", String(h(t, b.PLOT_COLOR, String(h(t, "lineColor", n))))), f.setAttribute("stroke", d), f.style.transition = `opacity ${y * (1e3 * 2 / p.length)}ms ease-in`, f.style.opacity = "0", o.appendChild(f), R.push(f);
+      f.classList.add("tiny-spark-datapoint-circle"), f.classList.add(`circle-${a}`), f.setAttribute("id", `circle_${a}_${p}`), f.setAttribute("cx", String(l || 0)), f.setAttribute("cy", String(m || 0)), f.setAttribute("r", String(h(t, b.PLOT_RADIUS, 3))), f.setAttribute("fill", String(h(t, b.PLOT_COLOR, String(h(t, "lineColor", n))))), f.setAttribute("stroke", d), f.style.opacity = "0", f.style.transition = `opacity ${p * (1e3 * 2 / y.length)}ms ease-in`, o.appendChild(f), R.push(f);
     }
-  }), p.forEach((l, m) => {
+  }), y.forEach((l, m) => {
     const s = document.createElementNS(L, "rect");
-    s.classList.add("tiny-spark-tooltip-trap"), s.setAttribute("x", `${p.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", () => {
+    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 y = document.getElementById(`circle_${a}_${m}`);
-      y == null || y.setAttribute("r", String(Number(h(t, b.PLOT_RADIUS, 3)) * 1.5)), I[m].style.opacity = "1";
+      const p = document.getElementById(`circle_${a}_${m}`);
+      p == null || p.setAttribute("r", String(Number(h(t, b.PLOT_RADIUS, 3)) * 1.5)), I[m].style.opacity = "1";
     }), s.addEventListener("mouseout", () => {
       D(o, t, l, a, !1);
-      const y = document.getElementById(`circle_${a}_${m}`);
-      y == null || y.setAttribute("r", String(Number(h(t, b.PLOT_RADIUS, 3)))), I.forEach((f) => f.style.opacity = "0");
+      const p = document.getElementById(`circle_${a}_${m}`);
+      p == null || p.setAttribute("r", String(Number(h(t, b.PLOT_RADIUS, 3)))), I.forEach((f) => f.style.opacity = "0");
     }), o.appendChild(s);
   }), G === "true" && e ? H().then(() => {
     R.forEach((l) => {

package/dist/tiny-spark.umd.js

@@ -1,6 +1,6 @@
-(function(O,y){typeof exports=="object"&&typeof module<"u"?y(exports):typeof define=="function"&&define.amd?define(["exports"],y):(O=typeof globalThis<"u"?globalThis:O||self,y(O.TinySpark={}))})(this,function(O){"use strict";const y="http://www.w3.org/2000/svg";var P=(t=>(t.BAR="data-bar",t.LINE="data-line",t.SET="data-set",t.RESPONSIVE="data-responsive",t))(P||{}),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 U(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(y,"svg"),u=Y();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 D(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 F(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,h=t[n].y,c=t[n+1].x,C=t[n+1].y,A=u[n],L=u[n+1],I=d+(c-d)/3,N=h+A*(c-d)/3,M=c-(c-d)/3,p=C-L*(c-d)/3;e.push(`C ${x(I)},${x(N)} ${x(M)},${x(p)} ${x(c)},${x(C)}`)}return e.join(" ")}function j(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 h(){r.removeAttribute("clip-path"),i.parentNode&&i.parentNode.removeChild(i),n.removeEventListener("transitionend",h)})}function q(){return document.querySelectorAll(".tiny-spark")}function V(t,r){return Object.keys(t.dataset).includes(r)}function f(t,r,e){return V(t,r)?t.dataset[r]:e}function K(t,r){const e=new MutationObserver(o=>{for(const a of o)if(a.type==="attributes"&&a.attributeName&&Object.values(P).includes(a.attributeName)){r();break}});return e.observe(t,{attributes:!0}),e}function X(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 Y(){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 z(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 B(t){return{min:Math.min(...t),max:Math.max(...t)}}function H(){return new Promise(t=>setTimeout(t,0))}function Z(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 Q(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 G(t,r,e,o,a){if(T(o),!a)return;const{x:i,y:u}=Q(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=`
+(function(O,y){typeof exports=="object"&&typeof module<"u"?y(exports):typeof define=="function"&&define.amd?define(["exports"],y):(O=typeof globalThis<"u"?globalThis:O||self,y(O.TinySpark={}))})(this,function(O){"use strict";const y="http://www.w3.org/2000/svg";var P=(t=>(t.BAR="data-bar",t.LINE="data-line",t.SET="data-set",t.RESPONSIVE="data-responsive",t))(P||{}),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 U(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(y,"svg"),u=Y();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 D(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 F(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,h=t[n].y,c=t[n+1].x,C=t[n+1].y,A=u[n],L=u[n+1],I=d+(c-d)/3,N=h+A*(c-d)/3,M=c-(c-d)/3,p=C-L*(c-d)/3;e.push(`C ${x(I)},${x(N)} ${x(M)},${x(p)} ${x(c)},${x(C)}`)}return e.join(" ")}function j(t,r=1e3){t.style.opacity="1";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){r.style.opacity="1";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 h(){r.removeAttribute("clip-path"),i.parentNode&&i.parentNode.removeChild(i),n.removeEventListener("transitionend",h)})}function q(){return document.querySelectorAll(".tiny-spark")}function V(t,r){return Object.keys(t.dataset).includes(r)}function f(t,r,e){return V(t,r)?t.dataset[r]:e}function K(t,r){const e=new MutationObserver(o=>{for(const a of o)if(a.type==="attributes"&&a.attributeName&&Object.values(P).includes(a.attributeName)){r();break}});return e.observe(t,{attributes:!0}),e}function X(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 Y(){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 z(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 B(t){return{min:Math.min(...t),max:Math.max(...t)}}function H(){return new Promise(t=>setTimeout(t,0))}function Z(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 Q(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 G(t,r,e,o,a){if(T(o),!a)return;const{x:i,y:u}=Q(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),H().then(()=>{const{width:d,height:h}=n.getBoundingClientRect();n.style.left=`${i-d/2}px`,n.style.top=`${u-h-Number(String(Number(f(r,g.PLOT_RADIUS,3))*1.5))}px`})}function T(t){const r=document.getElementById(`tooltip_${t}`);r==null||r.remove()}function tt(t){t.innerHTML=""}function et(t,r){let e=r;tt(t);const{svg:o,svgId:a,width:i,height:u}=U(t),{color:n,backgroundColor:d}=X(t),h={T:12,R:12,B:12,L:12},c={left:h.L,top:h.T,width:i-h.L-h.R,height:u-h.T-h.B,bottom:u-h.B},C=z(t),{min:A}=B(C),L=C.map(l=>[null,void 0].includes(l)?l:l+(A<0?Math.abs(A):0)),{max:I}=B(L),N=c.width/(C.length-1)===1/0?c.width:c.width/(C.length-1),M=J(t),p=L.map((l,m)=>{const s={w:L.length===1?N/2:0,h:L.length===1?c.height/2:0};return{y:(1-(l||0)/I)*c.height+h.T+s.h,x:c.left+N*m+s.w,v:l,d:M[m]||null}}),w=[...p].filter(({v:l})=>![null,void 0].includes(l)),v=document.createElementNS(y,"path");v.classList.add("tiny-spark-line-path"),!t.dataset.curve||t.dataset.curve==="true"?v.setAttribute("d",`M ${F(w)}`):v.setAttribute("d",`M ${D(w)}`),v.setAttribute("fill","none"),v.setAttribute("stroke",String(f(t,g.LINE_COLOR,n))),v.setAttribute("stroke-width",String(f(t,g.LINE_THICKNESS,2))),v.setAttribute("stroke-linecap","round");const E=document.createElementNS(y,"path");E.classList.add("tiny-spark-line-area"),p.length&&(!t.dataset.curve||t.dataset.curve==="true"?E.setAttribute("d",`M ${w[0].x},${c.bottom} ${F(w)} L ${w.at(-1).x},${c.bottom} Z`):E.setAttribute("d",`M ${w[0].x},${c.bottom} ${D(w)} L ${w.at(-1).x},${c.bottom} Z`)),E.setAttribute("fill",String(f(t,g.AREA_COLOR,"transparent"))),p.length>1&&(o.appendChild(E),o.appendChild(v));const rt=t.getAttribute("data-animation"),R=[];p.forEach((l,m)=>{const s=document.createElementNS(y,"line");s.classList.add("tiny-spark-indicator"),s.setAttribute("id",`indicator_${a}_${m}`),s.setAttribute("x1",String(c.left+(p.length===1?c.width/2:m*N))),s.setAttribute("x2",String(c.left+(p.length===1?c.width/2:m*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",R.push(s),o.appendChild(s)});let _=[];Number(String(f(t,g.PLOT_RADIUS,0)))>0&&p.forEach(({x:l,y:m,v:s},S)=>{if(![null,void 0].includes(s)){const b=document.createElementNS(y,"circle");b.classList.add("tiny-spark-datapoint-circle"),b.classList.add(`circle-${a}`),b.setAttribute("id",`circle_${a}_${S}`),b.setAttribute("cx",String(l||0)),b.setAttribute("cy",String(m||0)),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 ${S*(1e3*2/p.length)}ms ease-in`,b.style.opacity="0",o.appendChild(b),_.push(b)}}),p.forEach((l,m)=>{const s=document.createElementNS(y,"rect");s.classList.add("tiny-spark-tooltip-trap"),s.setAttribute("x",`${p.length===1?0:c.left+m*N-N/2}`),s.setAttribute("y",`${c.top}`),s.setAttribute("height",`${c.height}`),s.setAttribute("width",`${N}`),s.setAttribute("fill","transparent"),s.addEventListener("mouseenter",()=>{G(o,t,l,a,!0);const S=document.getElementById(`circle_${a}_${m}`);S==null||S.setAttribute("r",String(Number(f(t,g.PLOT_RADIUS,3))*1.5)),R[m].style.opacity="1"}),s.addEventListener("mouseout",()=>{G(o,t,l,a,!1);const S=document.getElementById(`circle_${a}_${m}`);S==null||S.setAttribute("r",String(Number(f(t,g.PLOT_RADIUS,3)))),R.forEach(b=>b.style.opacity="0")}),o.appendChild(s)}),rt==="true"&&e?H().then(()=>{_.forEach(l=>{l.style.opacity="1"}),j(v),W(o,E)}):_.forEach(l=>{l.style.opacity="1"}),t.appendChild(o)}function k(){const t=q();t.length&&Array.from(t).forEach(r=>{const e=r;nt(e),e.__renderCount=0,$(e),K(e,()=>$(e));const o=new ResizeObserver(i=>{i.forEach(()=>$(e))});e.parentElement&&o.observe(e.parentElement),new MutationObserver(i=>{i.forEach(u=>{u.type==="attributes"&&u.attributeName&&u.attributeName.startsWith("data-")&&$(e)})}).observe(e,{attributes:!0})})}function $(t){V(t,"set")&&et(t,t.__renderCount<2),t.__renderCount+=1}function nt(t){t.dataset.set||console.error(`Tiny-spark exception:
+  `,document.body.appendChild(n),H().then(()=>{const{width:d,height:h}=n.getBoundingClientRect();n.style.left=`${i-d/2}px`,n.style.top=`${u-h-Number(String(Number(f(r,g.PLOT_RADIUS,3))*1.5))}px`})}function T(t){const r=document.getElementById(`tooltip_${t}`);r==null||r.remove()}function tt(t){t.innerHTML=""}function et(t,r){let e=r;tt(t);const{svg:o,svgId:a,width:i,height:u}=U(t),{color:n,backgroundColor:d}=X(t),h={T:12,R:12,B:12,L:12},c={left:h.L,top:h.T,width:i-h.L-h.R,height:u-h.T-h.B,bottom:u-h.B},C=z(t),{min:A}=B(C),L=C.map(l=>[null,void 0].includes(l)?l:l+(A<0?Math.abs(A):0)),{max:I}=B(L),N=c.width/(C.length-1)===1/0?c.width:c.width/(C.length-1),M=J(t),p=L.map((l,m)=>{const s={w:L.length===1?N/2:0,h:L.length===1?c.height/2:0};return{y:(1-(l||0)/I)*c.height+h.T+s.h,x:c.left+N*m+s.w,v:l,d:M[m]||null}}),w=[...p].filter(({v:l})=>![null,void 0].includes(l)),v=document.createElementNS(y,"path");v.classList.add("tiny-spark-line-path"),!t.dataset.curve||t.dataset.curve==="true"?v.setAttribute("d",`M ${F(w)}`):v.setAttribute("d",`M ${D(w)}`),v.setAttribute("fill","none"),v.setAttribute("stroke",String(f(t,g.LINE_COLOR,n))),v.setAttribute("stroke-width",String(f(t,g.LINE_THICKNESS,2))),v.setAttribute("stroke-linecap","round");const E=document.createElementNS(y,"path");E.classList.add("tiny-spark-line-area"),p.length&&(!t.dataset.curve||t.dataset.curve==="true"?E.setAttribute("d",`M ${w[0].x},${c.bottom} ${F(w)} L ${w.at(-1).x},${c.bottom} Z`):E.setAttribute("d",`M ${w[0].x},${c.bottom} ${D(w)} L ${w.at(-1).x},${c.bottom} Z`)),E.setAttribute("fill",String(f(t,g.AREA_COLOR,"transparent"))),p.length>1&&(o.appendChild(E),o.appendChild(v));const rt=t.getAttribute("data-animation"),R=[];p.forEach((l,m)=>{const s=document.createElementNS(y,"line");s.classList.add("tiny-spark-indicator"),s.setAttribute("id",`indicator_${a}_${m}`),s.setAttribute("x1",String(c.left+(p.length===1?c.width/2:m*N))),s.setAttribute("x2",String(c.left+(p.length===1?c.width/2:m*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",R.push(s),o.appendChild(s)});let _=[];Number(String(f(t,g.PLOT_RADIUS,0)))>0&&p.forEach(({x:l,y:m,v:s},S)=>{if(![null,void 0].includes(s)){const b=document.createElementNS(y,"circle");b.classList.add("tiny-spark-datapoint-circle"),b.classList.add(`circle-${a}`),b.setAttribute("id",`circle_${a}_${S}`),b.setAttribute("cx",String(l||0)),b.setAttribute("cy",String(m||0)),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.opacity="0",b.style.transition=`opacity ${S*(1e3*2/p.length)}ms ease-in`,o.appendChild(b),_.push(b)}}),p.forEach((l,m)=>{const s=document.createElementNS(y,"rect");s.classList.add("tiny-spark-tooltip-trap"),s.setAttribute("x",`${p.length===1?0:c.left+m*N-N/2}`),s.setAttribute("y",`${c.top}`),s.setAttribute("height",`${c.height}`),s.setAttribute("width",`${N}`),s.setAttribute("fill","transparent"),s.addEventListener("mouseenter",()=>{G(o,t,l,a,!0);const S=document.getElementById(`circle_${a}_${m}`);S==null||S.setAttribute("r",String(Number(f(t,g.PLOT_RADIUS,3))*1.5)),R[m].style.opacity="1"}),s.addEventListener("mouseout",()=>{G(o,t,l,a,!1);const S=document.getElementById(`circle_${a}_${m}`);S==null||S.setAttribute("r",String(Number(f(t,g.PLOT_RADIUS,3)))),R.forEach(b=>b.style.opacity="0")}),o.appendChild(s)}),rt==="true"&&e?H().then(()=>{_.forEach(l=>{l.style.opacity="1"}),j(v),W(o,E)}):_.forEach(l=>{l.style.opacity="1"}),t.appendChild(o)}function k(){const t=q();t.length&&Array.from(t).forEach(r=>{const e=r;nt(e),e.__renderCount=0,$(e),K(e,()=>$(e));const o=new ResizeObserver(i=>{i.forEach(()=>$(e))});e.parentElement&&o.observe(e.parentElement),new MutationObserver(i=>{i.forEach(u=>{u.type==="attributes"&&u.attributeName&&u.attributeName.startsWith("data-")&&$(e)})}).observe(e,{attributes:!0})})}function $(t){V(t,"set")&&et(t,t.__renderCount<2),t.__renderCount+=1}function nt(t){t.dataset.set||console.error(`Tiny-spark exception:
 
 [data-set] data attribute is missing.
 Provide an array of numbers, for example:

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiny-spark",
   "private": false,
-  "version": "0.2.1-beta.2",
+  "version": "0.2.1-beta.3",
   "type": "module",
   "description": "An elegant, reactive and responsive sparkline chart solution without dependency.",
   "author": "Alec Lloyd Probert",