tiny-spark 1.0.0 → 1.2.0

package/README.md

@@ -44,12 +44,18 @@ Render a line chart:
     data-id="myId"
     data-type="line"
     data-curve="true"
+    data-cut-null="false"
     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-gradient-from="#FF0000"
+    data-gradient-to="#FFAA00"
+    data-temperature-colors="['#00FF00', '#FF0000']"
+    data-gradient-from-opacity="1"
+    data-gradient-to-opacity="1"
     data-line-thickness="4"
     data-plot-color="#2A2A2A"
     data-plot-radius="2"
@@ -79,6 +85,10 @@ Render a bar chart:
     data-responsive
     data-animation="true"
     data-line-thickness="4"
+    data-gradient-from="#FF0000"
+    data-gradient-to="#FFAA00"
+    data-gradient-from-opacity="1"
+    data-gradient-to-opacity="1"
     data-plot-color="#2A2A2A"
     data-number-locale="en-US"
     data-number-rounding="2"

package/dist/tiny-spark.es.js

@@ -1,262 +1,275 @@
-const R = "http://www.w3.org/2000/svg";
-var Q = /* @__PURE__ */ ((t) => (t.BAR = "bar", t.LINE = "line", t))(Q || {}), b = /* @__PURE__ */ ((t) => (t.ANIMATION = "animation", t.AREA_COLOR = "areaColor", t.CURVE = "curve", t.DATES = "dates", t.ID = "id", 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.HIDE_PLOTS_ABOVE = "hidePlotsAbove", t.SHOW_LAST_VALUE = "showLastValue", t.LAST_VALUE_FONT_SIZE = "lastValueFontSize", t.LAST_VALUE_COLOR = "lastValueColor", t.TYPE = "type", t.TOOLTIP_SMOOTHING = "tooltipSmoothing", t.CUT_NULL = "cutNull", t))(b || {}), T = /* @__PURE__ */ ((t) => (t.ANIMATION = "data-animation", t.AREA_COLOR = "data-area-color", t.CURVE = "data-curve", t.DATES = "data-dates", t.ID = "data-id", t.INDICATOR_COLOR = "data-indicator-color", t.INDICATOR_WIDTH = "data-indicator-width", t.LINE_COLOR = "data-line-color", t.LINE_THICKNESS = "data-line-thickness", t.NUMBER_LOCALE = "data-number-locale", t.NUMBER_ROUNDING = "data-number-rounding", t.NUMBER_SHOW_ON = "data-number-show-on", t.PLOT_COLOR = "data-plot-color", t.PLOT_RADIUS = "data-plot-radius", t.SET = "data-set", t.HIDE_PLOTS_ABOVE = "data-hide-plots-above", t.SHOW_LAST_VALUE = "data-show-last-value", t.LAST_VALUE_FONT_SIZE = "data-last-value-font-size", t.LAST_VALUE_COLOR = "data-last-value-color", t.TYPE = "data-type", t.TOOLTIP_SMOOTHING = "data-tooltip-smoothing", t.CUT_NULL = "data-cut-null", t))(T || {});
-const rt = "1.0.0", at = {
-  version: rt
+const A = "http://www.w3.org/2000/svg";
+var ot = /* @__PURE__ */ ((t) => (t.BAR = "bar", t.LINE = "line", t))(ot || {}), g = /* @__PURE__ */ ((t) => (t.ANIMATION = "animation", t.AREA_COLOR = "areaColor", t.CURVE = "curve", t.DATES = "dates", t.ID = "id", 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.HIDE_PLOTS_ABOVE = "hidePlotsAbove", t.SHOW_LAST_VALUE = "showLastValue", t.LAST_VALUE_FONT_SIZE = "lastValueFontSize", t.LAST_VALUE_COLOR = "lastValueColor", t.TYPE = "type", t.TOOLTIP_SMOOTHING = "tooltipSmoothing", t.CUT_NULL = "cutNull", t.GRADIENT_FROM = "gradientFrom", t.GRADIENT_TO = "gradientTo", t.GRADIENT_FROM_OPACITY = "gradientFromOpacity", t.GRADIENT_TO_OPACITY = "gradientToOpacity", t.TEMPERATURE_COLORS = "temperatureColors", t))(g || {}), H = /* @__PURE__ */ ((t) => (t.ANIMATION = "data-animation", t.AREA_COLOR = "data-area-color", t.CURVE = "data-curve", t.DATES = "data-dates", t.ID = "data-id", t.INDICATOR_COLOR = "data-indicator-color", t.INDICATOR_WIDTH = "data-indicator-width", t.LINE_COLOR = "data-line-color", t.LINE_THICKNESS = "data-line-thickness", t.NUMBER_LOCALE = "data-number-locale", t.NUMBER_ROUNDING = "data-number-rounding", t.NUMBER_SHOW_ON = "data-number-show-on", t.PLOT_COLOR = "data-plot-color", t.PLOT_RADIUS = "data-plot-radius", t.SET = "data-set", t.HIDE_PLOTS_ABOVE = "data-hide-plots-above", t.SHOW_LAST_VALUE = "data-show-last-value", t.LAST_VALUE_FONT_SIZE = "data-last-value-font-size", t.LAST_VALUE_COLOR = "data-last-value-color", t.TYPE = "data-type", t.TOOLTIP_SMOOTHING = "data-tooltip-smoothing", t.CUT_NULL = "data-cut-null", t.GRADIENT_FROM = "data-gradient-from", t.GRADIENT_TO = "data-gradient-to", t.GRADIENT_FROM_OPACITY = "data-gradient-from-opacity", t.GRADIENT_TO_OPACITY = "data-gradient-to-opacity", t.TEMPERATURE_COLORS = "data-temperature-colors", t))(H || {});
+const ft = "1.2.0", gt = {
+  version: ft
 };
-function lt(t) {
-  const { width: i, height: n } = t.parentElement.getBoundingClientRect(), s = { width: 300, height: 100 }, r = String(h(t, b.SHOW_LAST_VALUE, "false")) === "true", e = nt(t), d = e && e.length ? e.at(-1) : null;
-  let o = 0;
-  if (!(t.dataset.type && t.dataset.type === "bar") && r && ![null, void 0].includes(d)) {
-    const l = Number(String(h(t, b.NUMBER_ROUNDING, 0)));
-    o = 6 + d.toFixed(l).length * (Number(h(t, b.LAST_VALUE_FONT_SIZE, 12)) / 2);
+function mt(t) {
+  const { width: r, height: n } = t.parentElement.getBoundingClientRect(), o = { width: 300, height: 100 }, s = String(f(t, g.SHOW_LAST_VALUE, "false")) === "true", e = at(t), c = e && e.length ? e.at(-1) : null;
+  let i = 0;
+  if (!(t.dataset.type && t.dataset.type === "bar") && s && ![null, void 0].includes(c)) {
+    const u = Number(String(f(t, g.NUMBER_ROUNDING, 0)));
+    i = 6 + c.toFixed(u).length * (Number(f(t, g.LAST_VALUE_FONT_SIZE, 12)) / 2);
   }
-  const a = `0 0 ${(i || s.width) + o} ${n || s.height}`, g = document.createElementNS(R, "svg"), v = t.dataset.id;
-  g.id = v, g.setAttribute("viewBox", a), g.style.width = "100%", g.style.height = "100%";
-  const u = document.createElementNS(R, "desc");
-  return u.setAttribute("aria-hidden", "true"), u.innerHTML = `Composed with tiny-spark v${at.version}`, g.appendChild(u), {
-    svg: g,
-    svgId: v,
-    width: i || s.width,
-    height: n || s.height,
+  const a = `0 0 ${(r || o.width) + i} ${n || o.height}`, y = document.createElementNS(A, "svg"), _ = t.dataset.id;
+  y.id = _, y.setAttribute("viewBox", a), y.style.width = "100%", y.style.height = "100%";
+  const d = document.createElementNS(A, "desc");
+  return d.setAttribute("aria-hidden", "true"), d.innerHTML = `Composed with tiny-spark v${gt.version}`, y.appendChild(d), {
+    svg: y,
+    svgId: _,
+    width: r || o.width,
+    height: n || o.height,
     viewBox: a
   };
 }
-function L(t, i = 0) {
-  return isNaN(t) ? i : t;
+function C(t, r = 0) {
+  return isNaN(t) ? r : t;
 }
-function z(t) {
-  let i = [];
+function et(t) {
+  let r = [];
   for (let n = 0; n < t.length; n += 1)
-    i.push(`${L(t[n].x)},${L(t[n].y)} `);
-  return i.join(" ").trim();
+    r.push(`${C(t[n].x)},${C(t[n].y)} `);
+  return r.join(" ").trim();
 }
-function D(t) {
+function nt(t) {
   if (t.length < 2) return "0,0";
-  const i = t.length - 1, n = [`${L(t[0].x)},${L(t[0].y)}`], s = [], r = [], e = [], d = [];
-  for (let o = 0; o < i; o += 1)
-    s[o] = t[o + 1].x - t[o].x, r[o] = t[o + 1].y - t[o].y, e[o] = r[o] / s[o];
-  d[0] = e[0], d[i] = e[i - 1];
-  for (let o = 1; o < i; o += 1)
-    if (e[o - 1] * e[o] <= 0)
-      d[o] = 0;
+  const r = t.length - 1, n = [`${C(t[0].x)},${C(t[0].y)}`], o = [], s = [], e = [], c = [];
+  for (let i = 0; i < r; i += 1)
+    o[i] = t[i + 1].x - t[i].x, s[i] = t[i + 1].y - t[i].y, e[i] = s[i] / o[i];
+  c[0] = e[0], c[r] = e[r - 1];
+  for (let i = 1; i < r; i += 1)
+    if (e[i - 1] * e[i] <= 0)
+      c[i] = 0;
     else {
-      const f = 2 * e[o - 1] * e[o] / (e[o - 1] + e[o]);
-      d[o] = f;
+      const m = 2 * e[i - 1] * e[i] / (e[i - 1] + e[i]);
+      c[i] = m;
     }
-  for (let o = 0; o < i; o += 1) {
-    const f = t[o].x, N = t[o].y, a = t[o + 1].x, g = t[o + 1].y, v = d[o], u = d[o + 1], l = f + (a - f) / 3, C = N + v * (a - f) / 3, $ = a - (a - f) / 3, _ = g - u * (a - f) / 3;
-    n.push(`C ${L(l)},${L(C)} ${L($)},${L(_)} ${L(a)},${L(g)}`);
+  for (let i = 0; i < r; i += 1) {
+    const m = t[i].x, O = t[i].y, a = t[i + 1].x, y = t[i + 1].y, _ = c[i], d = c[i + 1], u = m + (a - m) / 3, I = O + _ * (a - m) / 3, $ = a - (a - m) / 3, F = y - d * (a - m) / 3;
+    n.push(`C ${C(u)},${C(I)} ${C($)},${C(F)} ${C(a)},${C(y)}`);
   }
   return n.join(" ");
 }
-function ut(t) {
-  const i = [];
+function yt(t) {
+  const r = [];
   let n = [];
-  for (const s of t)
-    s.v == null || Number.isNaN(s.x) || Number.isNaN(s.y) ? (n.length > 1 && i.push(n), n = []) : n.push(s);
-  return n.length > 1 && i.push(n), i;
+  for (const o of t)
+    o.v == null || Number.isNaN(o.x) || Number.isNaN(o.y) ? (n.length > 1 && r.push(n), n = []) : n.push(o);
+  return n.length > 1 && r.push(n), r;
 }
-function ct(t) {
-  const i = ut(t);
-  if (!i.length) return "";
+function ht(t) {
+  const r = yt(t);
+  if (!r.length) return "";
   let n = "";
-  for (const [s, r] of i.entries()) {
-    if (r.length < 2) continue;
-    const e = r.length - 1, d = [], o = [], f = [], N = [];
+  for (const [o, s] of r.entries()) {
+    if (s.length < 2) continue;
+    const e = s.length - 1, c = [], i = [], m = [], O = [];
     for (let a = 0; a < e; a += 1)
-      d[a] = r[a + 1].x - r[a].x, o[a] = r[a + 1].y - r[a].y, f[a] = o[a] / d[a];
-    N[0] = f[0], N[e] = f[e - 1];
+      c[a] = s[a + 1].x - s[a].x, i[a] = s[a + 1].y - s[a].y, m[a] = i[a] / c[a];
+    O[0] = m[0], O[e] = m[e - 1];
     for (let a = 1; a < e; a += 1)
-      if (f[a - 1] * f[a] <= 0)
-        N[a] = 0;
+      if (m[a - 1] * m[a] <= 0)
+        O[a] = 0;
       else {
-        const g = 2 * f[a - 1] * f[a] / (f[a - 1] + f[a]);
-        N[a] = g;
+        const y = 2 * m[a - 1] * m[a] / (m[a - 1] + m[a]);
+        O[a] = y;
       }
-    n += `${s === 0 ? "" : "M"}${L(r[0].x)},${L(r[0].y)} `;
+    n += `${o === 0 ? "" : "M"}${C(s[0].x)},${C(s[0].y)} `;
     for (let a = 0; a < e; a += 1) {
-      const g = r[a].x, v = r[a].y, u = r[a + 1].x, l = r[a + 1].y, C = N[a], $ = N[a + 1], _ = g + (u - g) / 3, k = v + C * (u - g) / 3, I = u - (u - g) / 3, P = l - $ * (u - g) / 3;
-      n += `C${L(_)},${L(k)} ${L(I)},${L(P)} ${L(u)},${L(l)} `;
+      const y = s[a].x, _ = s[a].y, d = s[a + 1].x, u = s[a + 1].y, I = O[a], $ = O[a + 1], F = y + (d - y) / 3, k = _ + I * (d - y) / 3, L = d - (d - y) / 3, w = u - $ * (d - y) / 3;
+      n += `C${C(F)},${C(k)} ${C(L)},${C(w)} ${C(d)},${C(u)} `;
     }
   }
   return n.trim();
 }
-function dt(t) {
-  let i = "", n = !1;
-  const s = (r) => r.v != null && Number.isFinite(r.x) && Number.isFinite(r.y);
-  for (let r = 0; r < t.length; r++) {
-    const e = t[r];
-    if (!s(e))
+function bt(t) {
+  let r = "", n = !1;
+  const o = (s) => s.v != null && Number.isFinite(s.x) && Number.isFinite(s.y);
+  for (let s = 0; s < t.length; s++) {
+    const e = t[s];
+    if (!o(e))
       continue;
-    const d = `${L(e.x)},${L(e.y)}`;
+    const c = `${C(e.x)},${C(e.y)}`;
     if (!n)
-      i += d, n = !0;
+      r += c, n = !0;
     else {
-      const o = t[r - 1], f = s(o) ? "L" : "M";
-      i += `${f}${d}`;
+      const i = t[s - 1], m = o(i) ? "L" : "M";
+      r += `${m}${c}`;
     }
-    i += " ";
+    r += " ";
   }
-  return i.trim();
+  return r.trim();
 }
-function ft(t) {
-  const i = [];
+function Nt(t) {
+  const r = [];
   let n = [];
-  for (const s of t)
-    !s || s.v == null || Number.isNaN(s.x) || Number.isNaN(s.y) ? (n.length && i.push(n), n = []) : n.push(s);
-  return n.length && i.push(n), i;
+  for (const o of t)
+    !o || o.v == null || Number.isNaN(o.x) || Number.isNaN(o.y) ? (n.length && r.push(n), n = []) : n.push(o);
+  return n.length && r.push(n), r;
 }
-function gt(t, i) {
+function Ot(t, r) {
   if (!t[0]) return [-10, -10, "", -10, -10].toString();
-  const n = ft(t);
-  return n.length ? n.map((s) => {
-    const r = { x: s[0].x, y: i }, e = { x: s.at(-1)?.x, y: i }, d = [];
-    return s.forEach((o) => {
-      d.push(`${o.x},${o.y} `);
-    }), [r.x, r.y, ...d, e.x, e.y].toString();
+  const n = Nt(t);
+  return n.length ? n.map((o) => {
+    const s = { x: o[0].x, y: r }, e = { x: o.at(-1)?.x, y: r }, c = [];
+    return o.forEach((i) => {
+      c.push(`${i.x},${i.y} `);
+    }), [s.x, s.y, ...c, e.x, e.y].toString();
   }).join(";") : "";
 }
-function yt(t, i, n = !1, s = !0) {
-  function r(d) {
-    const o = [];
-    let f = [];
-    for (const N of d)
-      !N || N.v == null || Number.isNaN(N.x) || Number.isNaN(N.y) ? (f.length > 1 && o.push(f), f = []) : f.push(N);
-    return f.length > 1 && o.push(f), o;
+function St(t, r, n = !1, o = !0) {
+  function s(c) {
+    const i = [];
+    let m = [];
+    for (const O of c)
+      !O || O.v == null || Number.isNaN(O.x) || Number.isNaN(O.y) ? (m.length > 1 && i.push(m), m = []) : m.push(O);
+    return m.length > 1 && i.push(m), i;
   }
-  return (n ? r(t) : [t]).map((d) => {
-    if (d.length < 2) return "";
-    const o = d.length - 1, f = [], N = [], a = [], g = [];
-    for (let u = 0; u < o; u += 1)
-      f[u] = d[u + 1].x - d[u].x, N[u] = d[u + 1].y - d[u].y, a[u] = N[u] / f[u];
-    g[0] = a[0], g[o] = a[o - 1];
-    for (let u = 1; u < o; u += 1)
-      if (a[u - 1] * a[u] <= 0)
-        g[u] = 0;
+  return (n ? s(t) : [t]).map((c) => {
+    if (c.length < 2) return "";
+    const i = c.length - 1, m = [], O = [], a = [], y = [];
+    for (let d = 0; d < i; d += 1)
+      m[d] = c[d + 1].x - c[d].x, O[d] = c[d + 1].y - c[d].y, a[d] = O[d] / m[d];
+    y[0] = a[0], y[i] = a[i - 1];
+    for (let d = 1; d < i; d += 1)
+      if (a[d - 1] * a[d] <= 0)
+        y[d] = 0;
       else {
-        const l = 2 * a[u - 1] * a[u] / (a[u - 1] + a[u]);
-        g[u] = l;
+        const u = 2 * a[d - 1] * a[d] / (a[d - 1] + a[d]);
+        y[d] = u;
       }
-    let v = `M${d[0].x},${i}`;
-    v += ` L${d[0].x},${d[0].y}`;
-    for (let u = 0; u < o; u += 1) {
-      const l = d[u].x, C = d[u].y, $ = d[u + 1].x, _ = d[u + 1].y, k = g[u], I = g[u + 1], P = l + ($ - l) / 3, X = C + k * ($ - l) / 3, p = $ - ($ - l) / 3, M = _ - I * ($ - l) / 3;
-      v += ` C${P},${X} ${p},${M} ${$},${_}`;
+    let _ = `M${c[0].x},${r}`;
+    _ += ` L${c[0].x},${c[0].y}`;
+    for (let d = 0; d < i; d += 1) {
+      const u = c[d].x, I = c[d].y, $ = c[d + 1].x, F = c[d + 1].y, k = y[d], L = y[d + 1], w = u + ($ - u) / 3, B = I + k * ($ - u) / 3, N = $ - ($ - u) / 3, Y = F - L * ($ - u) / 3;
+      _ += ` C${w},${B} ${N},${Y} ${$},${F}`;
     }
-    return v += ` L${d[o].x},${i} ${s ? "Z" : ""}`, v;
+    return _ += ` L${c[i].x},${r} ${o ? "Z" : ""}`, _;
   }).filter(Boolean);
 }
-function ht(t, i = 1e3, n) {
+function xt(t, r = 1e3, n) {
   t.style.opacity = "1";
-  const s = t.getTotalLength();
-  t.style.strokeDasharray = String(s), t.style.strokeDashoffset = String(s), t.getBoundingClientRect(), t.style.transition = `stroke-dashoffset ${i}ms ease-in-out`, t.style.strokeDashoffset = "0", t.addEventListener("transitionend", function r() {
-    t.style.transition = "", t.removeEventListener("transitionend", r), n && n();
+  const o = t.getTotalLength();
+  t.style.strokeDasharray = String(o), t.style.strokeDashoffset = String(o), t.getBoundingClientRect(), t.style.transition = `stroke-dashoffset ${r}ms ease-in-out`, t.style.strokeDashoffset = "0", t.addEventListener("transitionend", function s() {
+    t.style.transition = "", t.removeEventListener("transitionend", s), n && n();
   });
 }
-function pt(t, i, n = 1e3) {
-  i.style.opacity = "1";
-  const s = i.getBBox(), r = s.width, e = document.createElementNS("http://www.w3.org/2000/svg", "clipPath"), d = "clip-" + Math.random().toString(36).substr(2, 9);
-  e.setAttribute("id", d);
-  const o = document.createElementNS("http://www.w3.org/2000/svg", "rect");
-  o.setAttribute("x", s.x.toString()), o.setAttribute("y", s.y.toString()), o.setAttribute("width", "0"), o.setAttribute("height", s.height.toString()), e.appendChild(o);
-  let f = t.querySelector("defs");
-  f || (f = document.createElementNS("http://www.w3.org/2000/svg", "defs"), t.insertBefore(f, t.firstChild)), f.appendChild(e), i.setAttribute("clip-path", `url(#${d})`), o.style.transition = `width ${n}ms ease-out`, o.getBoundingClientRect(), o.setAttribute("width", r.toString()), o.addEventListener("transitionend", function N() {
-    i.removeAttribute("clip-path"), e.parentNode && e.parentNode.removeChild(e), o.removeEventListener("transitionend", N);
+function Ct(t, r, n = 1e3) {
+  r.style.opacity = "1";
+  const o = r.getBBox(), s = o.width, e = document.createElementNS("http://www.w3.org/2000/svg", "clipPath"), c = "clip-" + Math.random().toString(36).substr(2, 9);
+  e.setAttribute("id", c);
+  const i = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  i.setAttribute("x", o.x.toString()), i.setAttribute("y", o.y.toString()), i.setAttribute("width", "0"), i.setAttribute("height", o.height.toString()), e.appendChild(i);
+  let m = t.querySelector("defs");
+  m || (m = document.createElementNS("http://www.w3.org/2000/svg", "defs"), t.insertBefore(m, t.firstChild)), m.appendChild(e), r.setAttribute("clip-path", `url(#${c})`), i.style.transition = `width ${n}ms ease-out`, i.getBoundingClientRect(), i.setAttribute("width", s.toString()), i.addEventListener("transitionend", function O() {
+    r.removeAttribute("clip-path"), e.parentNode && e.parentNode.removeChild(e), i.removeEventListener("transitionend", O);
   });
 }
-function mt() {
+function At() {
   return document.querySelectorAll(".tiny-spark");
 }
-function tt(t, i) {
-  return Object.keys(t.dataset).includes(i);
+function st(t, r) {
+  return Object.keys(t.dataset).includes(r);
 }
-function h(t, i, n) {
-  return tt(t, i) ? t.dataset[i] : n;
+function f(t, r, n) {
+  return st(t, r) ? t.dataset[r] : n;
 }
-function bt(t) {
+function It(t) {
   if (!t) return {
     color: "#1A1A1A",
     backgroundColor: "#FFFFFF"
   };
-  const i = window.getComputedStyle(t), n = i.getPropertyValue("color") || "#1A1A1A", s = i.getPropertyValue("background-color"), r = i.getPropertyValue("background");
-  return { color: n, backgroundColor: s || r || "#FFFFFF" };
+  const r = window.getComputedStyle(t), n = r.getPropertyValue("color") || "#1A1A1A", o = r.getPropertyValue("background-color"), s = r.getPropertyValue("background");
+  return { color: n, backgroundColor: o || s || "#FFFFFF" };
 }
-function et() {
+function W() {
   return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(t) {
-    const i = Math.random() * 16 | 0;
-    return (t == "x" ? i : i & 3 | 8).toString(16);
+    const r = Math.random() * 16 | 0;
+    return (t == "x" ? r : r & 3 | 8).toString(16);
   });
 }
-function nt(t) {
-  const i = t.getAttribute("data-set");
-  if (!i) return [];
-  const n = i.replace(/,(?=,)/g, ",null").replace(/\[,/g, "[null,").replace(/,\]/g, ",null]");
+function at(t) {
+  const r = t.getAttribute(H.SET);
+  if (!r) return [];
+  const n = r.replace(/,(?=,)/g, ",null").replace(/\[,/g, "[null,").replace(/,\]/g, ",null]");
   try {
-    const s = JSON.parse(n);
-    return Array.isArray(s) && s.every((r) => typeof r == "number" || [null, void 0].includes(r)) ? s : (console.warn("data-set is not an array of numbers."), []);
-  } catch (s) {
-    return console.error("Error parsing data-set:", s), [];
+    const o = JSON.parse(n);
+    return Array.isArray(o) && o.every((s) => typeof s == "number" || [null, void 0].includes(s)) ? o : (console.warn("data-set is not an array of numbers."), []);
+  } catch (o) {
+    return console.error("Error parsing data-set:", o), [];
   }
 }
-function Nt(t) {
-  const i = t.getAttribute("data-dates");
-  if (!i) return [];
+function _t(t, r) {
+  return r <= 1 ? "0%" : `${t * 100 / (r - 1)}%`;
+}
+function $t(t) {
+  const r = t.getAttribute(H.DATES);
+  if (!r) return [];
   try {
-    const n = JSON.parse(i);
-    return Array.isArray(n) && n.every((s) => typeof s == "string") ? n : (console.warn("data-dates is not an array of strings"), []);
+    const n = JSON.parse(r.replaceAll("'", '"'));
+    return Array.isArray(n) && n.every((o) => typeof o == "string") ? n : (console.warn("data-dates is not an array of strings"), []);
   } catch (n) {
     return console.error("Error parsing data-dates", n), [];
   }
 }
-function E(t) {
+function Lt(t) {
+  const r = t.getAttribute(H.TEMPERATURE_COLORS);
+  if (!r) return [];
+  try {
+    const n = JSON.parse(r.replaceAll("'", '"'));
+    return Array.isArray(n) && n.every((o) => typeof o == "string") ? n : (console.warn("data-temperature-colors is not an array of strings"), []);
+  } catch (n) {
+    return console.error("Error parsing data-temperature-colors", n), [];
+  }
+}
+function rt(t) {
   return {
     min: Math.min(...t),
     max: Math.max(...t)
   };
 }
-function it() {
+function lt() {
   return new Promise((t) => setTimeout(t, 0));
 }
-function ot(t, i) {
-  const n = String(h(t, b.NUMBER_LOCALE, navigator.language || "en-US")), s = Number(String(h(t, b.NUMBER_ROUNDING, 0)));
-  return i.toLocaleString(n, {
+function ut(t, r) {
+  const n = String(f(t, g.NUMBER_LOCALE, navigator.language || "en-US")), o = Number(String(f(t, g.NUMBER_ROUNDING, 0)));
+  return r.toLocaleString(n, {
     useGrouping: !0,
-    minimumFractionDigits: s,
-    maximumFractionDigits: s
+    minimumFractionDigits: o,
+    maximumFractionDigits: o
   });
 }
-function St(t, i, n) {
+function Rt(t, r, n) {
   if (!t.createSVGPoint || !t.getScreenCTM)
-    throw new Error("Your browser does not support SVG coordinate transformation.");
-  const s = t.getScreenCTM();
-  if (!s)
-    throw new Error("Cannot obtain the screen CTM.");
-  const r = t.createSVGPoint();
-  r.x = i, r.y = n;
-  const e = r.matrixTransform(s);
+    return console.error("Your browser does not support SVG coordinate transformation."), { x: 0, y: 0 };
+  const o = t.getScreenCTM();
+  if (!o)
+    return console.error("Cannot obtain the screen CTM."), { x: 0, y: 0 };
+  const s = t.createSVGPoint();
+  s.x = r, s.y = n;
+  const e = s.matrixTransform(o);
   return { x: e.x, y: e.y };
 }
-const K = {};
-function J(t, i, n, s, r) {
-  let e = K[s];
-  if (!r) {
+const J = {};
+function it(t, r, n, o, s) {
+  let e = J[o];
+  if (!s) {
     e && (cancelAnimationFrame(e.frameId), e.frameId = null, e.tool.style.opacity = "0");
     return;
   }
-  const d = i.dataset.type === Q.BAR, { x: o, y: f } = St(
+  const c = r.dataset.type === ot.BAR, { x: i, y: m } = Rt(
     t,
     n.x,
-    d && !n.isPositive ? n.bar.y : n.y
+    c && !n.isPositive ? n.bar.y : n.y
   );
   if (!e) {
-    const l = document.createElement("div");
-    l.classList.add("tiny-spark-tooltip"), l.setAttribute("id", `tooltip_${s}`), l.setAttribute("role", "tooltip"), l.setAttribute("aria-live", "polite"), l.style.position = "fixed", l.style.pointerEvents = "none", l.style.opacity = "0", l.style.willChange = "top, left", document.body.appendChild(l), e = K[s] = {
+    const u = document.createElement("div");
+    u.classList.add("tiny-spark-tooltip"), u.setAttribute("id", `tooltip_${o}`), u.setAttribute("role", "tooltip"), u.setAttribute("aria-live", "polite"), u.style.position = "fixed", u.style.pointerEvents = "none", u.style.opacity = "0", u.style.willChange = "top, left", document.body.appendChild(u), e = J[o] = {
       targetX: 0,
       targetY: 0,
       displayX: 0,
       displayY: 0,
       frameId: null,
-      tool: l,
+      tool: u,
       width: 0,
       height: 0,
       hasSnapped: !1
@@ -264,149 +277,198 @@ function J(t, i, n, s, r) {
   }
   e.tool.setAttribute("aria-hidden", "false"), e.tool.innerHTML = `
     <div class="tiny-spark-tooltip-content">
-      ${n.d ? `${n.d}: ` : ""}${[null, void 0].includes(n.v) ? "-" : ot(i, Number(n.v))}
+      ${n.d ? `${n.d}: ` : ""}${[null, void 0].includes(n.v) ? "-" : ut(r, Number(n.v))}
     </div>
   `;
-  const { width: N, height: a } = e.tool.getBoundingClientRect();
-  e.width = N, e.height = a;
-  const g = Number(h(i, b.PLOT_RADIUS, 3));
-  if (e.targetX = o - e.width / 2, e.targetY = f - e.height - g * 1.5, !e.hasSnapped) {
+  const { width: O, height: a } = e.tool.getBoundingClientRect();
+  e.width = O, e.height = a;
+  const y = Number(f(r, g.PLOT_RADIUS, 3));
+  if (e.targetX = i - e.width / 2, e.targetY = m - e.height - y * 1.5, !e.hasSnapped) {
     e.displayX = e.targetX, e.displayY = e.targetY, e.tool.style.left = `${e.displayX}px`, e.tool.style.top = `${e.displayY}px`, e.tool.style.opacity = "1", e.hasSnapped = !0;
     return;
   }
-  const v = Number(h(i, b.TOOLTIP_SMOOTHING, 1)) / 10;
-  function u() {
-    e.displayX += (e.targetX - e.displayX) * v, e.displayY += (e.targetY - e.displayY) * v, e.tool.style.left = `${Math.round(e.displayX)}px`, e.tool.style.top = `${Math.round(e.displayY)}px`, e.tool.style.opacity = "1", e.frameId = requestAnimationFrame(u);
+  const _ = Number(f(r, g.TOOLTIP_SMOOTHING, 1)) / 10;
+  function d() {
+    e.displayX += (e.targetX - e.displayX) * _, e.displayY += (e.targetY - e.displayY) * _, e.tool.style.left = `${Math.round(e.displayX)}px`, e.tool.style.top = `${Math.round(e.displayY)}px`, e.tool.style.opacity = "1", e.frameId = requestAnimationFrame(d);
   }
-  e.frameId == null && u();
+  e.frameId == null && d();
+}
+function q({ id: t, colorStart: r, colorEnd: n, opacityStart: o, opacityEnd: s }) {
+  const e = document.createElementNS(A, "linearGradient");
+  e.setAttribute("id", t), e.setAttribute("x1", "0"), e.setAttribute("x2", "0"), e.setAttribute("y1", "0"), e.setAttribute("y2", "1");
+  const c = document.createElementNS(A, "stop");
+  c.setAttribute("offset", "0%"), c.setAttribute("stop-color", r), c.setAttribute("stop-opacity", String(o));
+  const i = document.createElementNS(A, "stop");
+  return i.setAttribute("offset", "100%"), i.setAttribute("stop-color", n), i.setAttribute("stop-opacity", String(s)), [c, i].forEach((m) => {
+    e.appendChild(m);
+  }), e;
 }
-function xt(t) {
+function vt(t) {
   t.innerHTML = "";
 }
-function Ot(t, i) {
+function Ft(t, r) {
   const n = t.dataset.type && t.dataset.type === "bar";
-  let s = i;
-  xt(t);
-  const { svg: r, svgId: e, width: d, height: o, viewBox: f } = lt(t), { color: N, backgroundColor: a } = bt(t), g = { T: 12, R: 12, B: 12, L: 12 }, v = et(), u = String(h(t, b.SHOW_LAST_VALUE, "false")) === "true", l = {
-    left: g.L,
-    top: g.T,
-    width: d - g.L - g.R,
-    height: o - g.T - g.B,
-    bottom: o - g.B
-  }, C = nt(t), { min: $ } = E(C), _ = C.map((c) => [null, void 0].includes(c) ? c : c + ($ < 0 ? Math.abs($) : 0)), { max: k } = E(_);
-  let I = l.width / (C.length - 1) === 1 / 0 ? l.width : l.width / (C.length - 1);
+  let o = r;
+  vt(t);
+  const { svg: s, svgId: e, width: c, height: i, viewBox: m } = mt(t), { color: O, backgroundColor: a } = It(t), y = { T: 12, R: 12, B: 12, L: 12 }, _ = W(), d = String(f(t, g.SHOW_LAST_VALUE, "false")) === "true", u = {
+    left: y.L,
+    top: y.T,
+    width: c - y.L - y.R,
+    height: i - y.T - y.B,
+    bottom: i - y.B
+  }, I = at(t), { min: $ } = rt(I), F = I.map((l) => [null, void 0].includes(l) ? l : l + ($ < 0 ? Math.abs($) : 0)), { max: k } = rt(F);
+  let L = u.width / (I.length - 1) === 1 / 0 ? u.width : u.width / (I.length - 1);
   if (n) {
-    const [c, S, y, m] = f.split(" ");
-    r.setAttribute("viewBox", `${Number(c) - I / 2} ${S} ${Number(y) + I} ${m}`);
+    const [l, h, b, p] = m.split(" ");
+    s.setAttribute("viewBox", `${Number(l) - L / 2} ${h} ${Number(b) + L} ${p}`);
   }
-  const P = !C.some((c) => c >= 0), X = Nt(t), p = _.map((c, S) => {
-    const y = {
-      w: _.length === 1 ? I / 2 : 0,
-      h: _.length === 1 ? l.height / 2 : 0
-    }, m = l.left + I * S + y.w, O = (1 - (c || 0) / k) * l.height + y.h + g.T, U = (1 - ($ < 0 ? Math.abs($) : 0) / k) * l.height + g.T + y.h, G = C[S] >= 0;
+  const w = !I.some((l) => l >= 0), B = $t(t), N = F.map((l, h) => {
+    const b = {
+      w: F.length === 1 ? L / 2 : 0,
+      h: F.length === 1 ? u.height / 2 : 0
+    }, p = u.left + L * h + b.w, S = (1 - (l || 0) / k) * u.height + b.h + y.T, E = (1 - ($ < 0 ? Math.abs($) : 0) / k) * u.height + y.T + b.h, G = I[h] >= 0;
     return {
-      y: P && C.length === 1 ? l.top + l.height / 2 : O,
-      x: m,
-      v: C[S],
-      d: X[S] || null,
+      y: w && I.length === 1 ? u.top + u.height / 2 : S,
+      x: p,
+      v: I[h],
+      d: B[h] || null,
       isPositive: G,
       bar: {
-        x: m - I / 2,
-        y: C.length === 1 ? l.top : G ? O : P ? l.top : U,
-        h: C.length === 1 ? l.height : G ? U - O : P && C.length === 0 ? l.height : isNaN(O - U) ? 0 : O - U,
-        w: I
+        x: p - L / 2,
+        y: I.length === 1 ? u.top : G ? S : w ? u.top : E,
+        h: I.length === 1 ? u.height : G ? E - S : w && I.length === 0 ? u.height : isNaN(S - E) ? 0 : S - E,
+        w: L
       }
     };
   });
-  function M() {
-    const c = document.createElementNS(R, "path");
-    return c.classList.add("tiny-spark-line-area"), c;
+  function Y() {
+    const l = document.createElementNS(A, "path");
+    return l.classList.add("tiny-spark-line-area"), l;
+  }
+  function ct(l) {
+    const h = document.createElementNS(A, "defs");
+    return h.appendChild(q({
+      id: l,
+      colorStart: String(f(t, g.GRADIENT_FROM, "#FFFFFF")),
+      colorEnd: String(f(t, g.GRADIENT_TO, "#FFFFFF")),
+      opacityStart: Math.max(0, Math.min(1, Number(f(t, g.GRADIENT_FROM_OPACITY, 1)))),
+      opacityEnd: Math.max(0, Math.min(1, Number(f(t, g.GRADIENT_TO_OPACITY, 1))))
+    })), h;
+  }
+  function dt(l) {
+    const h = document.createElementNS(A, "defs");
+    return h.appendChild(q({
+      id: `pos_${l}`,
+      colorStart: String(f(t, g.GRADIENT_FROM, "#FFFFFF")),
+      colorEnd: String(f(t, g.GRADIENT_TO, "#FFFFFF")),
+      opacityStart: Math.max(0, Math.min(1, Number(f(t, g.GRADIENT_FROM_OPACITY, 1)))),
+      opacityEnd: Math.max(0, Math.min(1, Number(f(t, g.GRADIENT_TO_OPACITY, 1))))
+    })), h.appendChild(q({
+      id: `neg_${l}`,
+      colorStart: String(f(t, g.GRADIENT_TO, "#FFFFFF")),
+      colorEnd: String(f(t, g.GRADIENT_FROM, "#FFFFFF")),
+      opacityStart: Math.max(0, Math.min(1, Number(f(t, g.GRADIENT_TO_OPACITY, 1)))),
+      opacityEnd: Math.max(0, Math.min(1, Number(f(t, g.GRADIENT_FROM_OPACITY, 1))))
+    })), h;
   }
-  const w = [...p].map((c) => [null, void 0, 1 / 0, -1 / 0, NaN, "NaN"].includes(c.v) ? { ...c, v: null } : c), j = t.getAttribute("data-animation"), A = document.createElementNS(R, "path");
-  A.classList.add("tiny-spark-line-path");
-  const V = M(), F = [];
-  n || (!t.dataset.curve || t.dataset.curve === "true" ? !t.dataset.cutNull || t.dataset.cutNull === "false" ? A.setAttribute("d", `M ${D(w)}`) : A.setAttribute("d", `M ${ct(w)}`) : !t.dataset.cutNull || t.dataset.cutNull === "false" ? A.setAttribute("d", `M ${z(w)}`) : A.setAttribute("d", `M ${dt(w)}`), A.setAttribute("fill", "none"), A.setAttribute("stroke", String(h(t, b.LINE_COLOR, N))), A.setAttribute("stroke-width", String(h(t, b.LINE_THICKNESS, 2))), A.setAttribute("stroke-linecap", "round"), j === "true" && s && (A.style.opacity = "0", V.style.opacity = "0"), p.length && (!t.dataset.curve || t.dataset.curve === "true" ? !t.dataset.cutNull || t.dataset.cutNull === "false" ? V.setAttribute("d", `M ${w[0].x},${l.bottom} ${D(w)} L ${w.at(-1).x},${l.bottom} Z`) : yt(w, l.bottom, !0, !0).forEach((S) => {
-    const y = M();
-    y.setAttribute("d", S), y.setAttribute("fill", String(h(t, b.AREA_COLOR, "transparent"))), F.push(y);
-  }) : !t.dataset.cutNull || t.dataset.cutNull === "false" ? V.setAttribute("d", `M ${w[0].x},${l.bottom} ${z(w)} L ${w.at(-1).x},${l.bottom} Z`) : gt(w, l.bottom).split(";").forEach((S) => {
-    const y = M();
-    y.setAttribute("d", `M ${S} Z`), y.setAttribute("fill", String(h(t, b.AREA_COLOR, "transparent"))), F.push(y);
-  })), V.setAttribute("fill", String(h(t, b.AREA_COLOR, "transparent"))), p.length > 1 && (F.length ? F.forEach((c) => {
-    r.appendChild(c);
-  }) : r.appendChild(V), r.appendChild(A)));
-  const Y = [];
-  p.forEach((c, S) => {
-    const y = document.createElementNS(R, "line");
-    y.classList.add("tiny-spark-indicator"), y.setAttribute("id", `indicator_${e}_${S}`), y.setAttribute("x1", String(l.left + (p.length === 1 ? l.width / 2 : S * I))), y.setAttribute("x2", String(l.left + (p.length === 1 ? l.width / 2 : S * I))), y.setAttribute("y1", String(l.top)), y.setAttribute("y2", String(l.bottom)), y.setAttribute("stroke", String(h(t, b.INDICATOR_COLOR, "#1A1A1A"))), y.setAttribute("stroke-width", String(h(t, b.INDICATOR_WIDTH, "1"))), y.setAttribute("stroke-linecap", "round"), y.style.pointerEvents = "none", y.style.opacity = "0", Y.push(y), r.appendChild(y);
+  const v = [...N].map((l) => [null, void 0, 1 / 0, -1 / 0, NaN, "NaN"].includes(l.v) ? { ...l, v: null } : l), Q = t.getAttribute("data-animation"), R = document.createElementNS(A, "path");
+  R.classList.add("tiny-spark-line-path");
+  const P = Y(), U = [], V = !!f(t, g.GRADIENT_FROM, "") && !!f(t, g.GRADIENT_TO, ""), M = W();
+  if (!n) {
+    !t.dataset.curve || t.dataset.curve === "true" ? !t.dataset.cutNull || t.dataset.cutNull === "false" ? R.setAttribute("d", `M ${nt(v)}`) : R.setAttribute("d", `M ${ht(v)}`) : !t.dataset.cutNull || t.dataset.cutNull === "false" ? R.setAttribute("d", `M ${et(v)}`) : R.setAttribute("d", `M ${bt(v)}`), R.setAttribute("fill", "none");
+    const l = Lt(t);
+    if (l.length) {
+      const h = W(), b = document.createElementNS(A, "defs"), p = document.createElementNS(A, "linearGradient");
+      p.setAttribute("gradientTransform", "rotate(90)"), p.setAttribute("id", h), l.forEach((S, E) => {
+        const G = document.createElementNS(A, "stop");
+        G.setAttribute("offset", _t(E, l.length)), G.setAttribute("stop-color", S), p.appendChild(G);
+      }), b.appendChild(p), s.prepend(b), R.setAttribute("stroke", `url(#${h})`);
+    } else
+      R.setAttribute("stroke", String(f(t, g.LINE_COLOR, O)));
+    R.setAttribute("stroke-width", String(f(t, g.LINE_THICKNESS, 2))), R.setAttribute("stroke-linecap", "round"), Q === "true" && o && (R.style.opacity = "0", P.style.opacity = "0"), V && s.appendChild(ct(M)), N.length && (!t.dataset.curve || t.dataset.curve === "true" ? !t.dataset.cutNull || t.dataset.cutNull === "false" ? P.setAttribute("d", `M ${v[0].x},${u.bottom} ${nt(v)} L ${v.at(-1).x},${u.bottom} Z`) : St(v, u.bottom, !0, !0).forEach((b) => {
+      const p = Y();
+      p.setAttribute("d", b), V ? p.setAttribute("fill", `url(#${M})`) : p.setAttribute("fill", String(f(t, g.AREA_COLOR, "transparent"))), U.push(p);
+    }) : !t.dataset.cutNull || t.dataset.cutNull === "false" ? P.setAttribute("d", `M ${v[0].x},${u.bottom} ${et(v)} L ${v.at(-1).x},${u.bottom} Z`) : Ot(v, u.bottom).split(";").forEach((b) => {
+      const p = Y();
+      p.setAttribute("d", `M ${b} Z`), V ? p.setAttribute("fill", `url(#${M})`) : p.setAttribute("fill", String(f(t, g.AREA_COLOR, "transparent"))), U.push(p);
+    })), V ? P.setAttribute("fill", `url(#${M})`) : P.setAttribute("fill", String(f(t, g.AREA_COLOR, "transparent"))), N.length > 1 && (U.length ? U.forEach((h) => {
+      s.appendChild(h);
+    }) : s.appendChild(P), s.appendChild(R));
+  }
+  const Z = [];
+  N.forEach((l, h) => {
+    const b = document.createElementNS(A, "line");
+    b.classList.add("tiny-spark-indicator"), b.setAttribute("id", `indicator_${e}_${h}`), b.setAttribute("x1", String(u.left + (N.length === 1 ? u.width / 2 : h * L))), b.setAttribute("x2", String(u.left + (N.length === 1 ? u.width / 2 : h * L))), b.setAttribute("y1", String(u.top)), b.setAttribute("y2", String(u.bottom)), b.setAttribute("stroke", String(f(t, g.INDICATOR_COLOR, "#1A1A1A"))), b.setAttribute("stroke-width", String(f(t, g.INDICATOR_WIDTH, "1"))), b.setAttribute("stroke-linecap", "round"), b.style.pointerEvents = "none", b.style.opacity = "0", Z.push(b), s.appendChild(b);
   });
-  let H = [], W = [];
-  const q = Number(String(h(t, b.PLOT_RADIUS, 0))) > 0, st = !String(h(t, b.HIDE_PLOTS_ABOVE, "")) || p.length <= Number(String(h(t, b.HIDE_PLOTS_ABOVE, 0))), B = q && st;
-  n && p.forEach(({ bar: c, v: S }, y) => {
-    if (![null, void 0].includes(S)) {
-      const m = document.createElementNS(R, "rect");
-      m.classList.add("tiny-spark-datapoint-bar"), m.setAttribute("x", String(c.x)), m.setAttribute("y", String(c.y)), m.setAttribute("width", String(c.w)), m.setAttribute("height", String(c.h)), m.setAttribute("fill", String(h(t, b.PLOT_COLOR, String(h(t, "lineColor", N))))), m.style.opacity = p.length === 1 ? "1" : "0", m.style.transition = `opacity ${y * (1e3 * 2 / p.length)}ms ease-in`, W.push(m), r.appendChild(m);
+  let D = [], K = [];
+  const T = Number(String(f(t, g.PLOT_RADIUS, 0))) > 0, pt = !String(f(t, g.HIDE_PLOTS_ABOVE, "")) || N.length <= Number(String(f(t, g.HIDE_PLOTS_ABOVE, 0))), j = T && pt, X = document.createElementNS(A, "g");
+  n && (V && s.appendChild(dt(M)), N.forEach(({ bar: l, v: h }, b) => {
+    if (![null, void 0].includes(h)) {
+      const p = document.createElementNS(A, "rect");
+      p.classList.add("tiny-spark-datapoint-bar"), p.setAttribute("x", String(l.x)), p.setAttribute("y", String(l.y)), p.setAttribute("width", String(l.w)), p.setAttribute("height", String(l.h)), V ? h >= 0 ? p.setAttribute("fill", `url(#pos_${M})`) : p.setAttribute("fill", `url(#neg_${M})`) : p.setAttribute("fill", String(f(t, g.PLOT_COLOR, String(f(t, "lineColor", O))))), p.style.opacity = N.length === 1 ? "1" : "0", p.style.transition = `opacity ${b * (1e3 * 2 / N.length)}ms ease-in`, K.push(p), X.appendChild(p);
     }
-  }), q && !n && p.forEach(({ x: c, y: S, v: y }, m) => {
-    if (![null, void 0].includes(y)) {
-      const O = document.createElementNS(R, "circle");
-      O.classList.add("tiny-spark-datapoint-circle"), O.classList.add(`circle-${e}`), O.setAttribute("id", `circle_${e}_${m}`), O.setAttribute("cx", String(c || 0)), O.setAttribute("cy", String(S || 0)), O.setAttribute("r", String(h(t, b.PLOT_RADIUS, 3))), O.setAttribute("fill", String(h(t, b.PLOT_COLOR, String(h(t, "lineColor", N))))), O.setAttribute("stroke", a), O.style.opacity = p.length === 1 ? "1" : "0", O.style.transition = `opacity ${m * (1e3 * 2 / p.length)}ms ease-in`, O.style.pointerEvents = "none", H.push(O), B && r.appendChild(O);
+  }), s.appendChild(X)), T && !n && (N.forEach(({ x: l, y: h, v: b }, p) => {
+    if (![null, void 0].includes(b)) {
+      const S = document.createElementNS(A, "circle");
+      S.classList.add("tiny-spark-datapoint-circle"), S.classList.add(`circle-${e}`), S.setAttribute("id", `circle_${e}_${p}`), S.setAttribute("cx", String(l || 0)), S.setAttribute("cy", String(h || 0)), S.setAttribute("r", String(f(t, g.PLOT_RADIUS, 3))), S.setAttribute("fill", String(f(t, g.PLOT_COLOR, String(f(t, "lineColor", O))))), S.setAttribute("stroke", a), S.style.opacity = N.length === 1 ? "1" : "0", S.style.transition = `opacity ${p * (1e3 * 2 / N.length)}ms ease-in`, S.style.pointerEvents = "none", D.push(S), j && X.appendChild(S);
     }
-  });
+  }), s.appendChild(X));
   let x = null;
-  if (u && p.length && p.at(-1)) {
-    const c = Number(h(t, b.LAST_VALUE_FONT_SIZE, 12));
-    x = document.createElementNS(R, "text"), x.classList.add("tiny-spark-last-value"), x.setAttribute("id", v), n ? (x.setAttribute("x", String(p.at(-1).x + Number(h(t, b.LINE_THICKNESS, 2)))), x.setAttribute("y", p.at(-1)?.isPositive ? String(p.at(-1).y - c / 3) : String(p.at(-1).bar.y + p.at(-1).bar.h + c)), x.setAttribute("text-anchor", "middle")) : (x.setAttribute("x", String(p.at(-1).x + 6 + Number(h(t, b.LINE_THICKNESS, 2)))), x.setAttribute("y", String(p.at(-1).y + c / 3)), x.setAttribute("text-anchor", "start")), x.setAttribute("font-size", String(c) + "px"), x.setAttribute("fill", String(h(t, b.LAST_VALUE_COLOR, String(h(t, b.INDICATOR_COLOR, "#1A1A1A"))))), x.innerHTML = ot(t, Number(p.at(-1).v)), x.style.opacity = p.length === 1 ? "1" : "0", r.appendChild(x);
+  if (d && N.length && N.at(-1)) {
+    const l = Number(f(t, g.LAST_VALUE_FONT_SIZE, 12));
+    x = document.createElementNS(A, "text"), x.classList.add("tiny-spark-last-value"), x.setAttribute("id", _), n ? (x.setAttribute("x", String(N.at(-1).x + Number(f(t, g.LINE_THICKNESS, 2)))), x.setAttribute("y", N.at(-1)?.isPositive ? String(N.at(-1).y - l / 3) : String(N.at(-1).bar.y + N.at(-1).bar.h + l)), x.setAttribute("text-anchor", "middle")) : (x.setAttribute("x", String(N.at(-1).x + 6 + Number(f(t, g.LINE_THICKNESS, 2)))), x.setAttribute("y", String(N.at(-1).y + l / 3)), x.setAttribute("text-anchor", "start")), x.setAttribute("font-size", String(l) + "px"), x.setAttribute("fill", String(f(t, g.LAST_VALUE_COLOR, String(f(t, g.INDICATOR_COLOR, "#1A1A1A"))))), x.innerHTML = ut(t, Number(N.at(-1).v)), x.style.opacity = N.length === 1 ? "1" : "0", s.appendChild(x);
   }
-  p.forEach((c, S) => {
-    const y = H[S], m = document.createElementNS(R, "rect");
-    m.classList.add("tiny-spark-tooltip-trap"), m.setAttribute("x", `${p.length === 1 ? 0 : l.left + S * I - I / 2}`), m.setAttribute("y", `${l.top}`), m.setAttribute("height", `${l.height}`), m.setAttribute("width", `${I}`), m.setAttribute("fill", "transparent"), m.setAttribute("aria-describedby", `tooltip_${e}`), m.addEventListener("mouseenter", () => {
-      J(r, t, c, e, !0), B ? document.getElementById(`circle_${e}_${S}`)?.setAttribute("r", String(Number(h(t, b.PLOT_RADIUS, 3)) * 1.5)) : r.appendChild(y), Y[S].style.opacity = "1", u && x && (S === p.length - 1 ? x.style.opacity = "0" : x.style.opacity = "1");
-    }), m.addEventListener("mouseout", () => {
-      J(r, t, c, e, !1), B ? document.getElementById(`circle_${e}_${S}`)?.setAttribute("r", String(Number(h(t, b.PLOT_RADIUS, 3)))) : y.remove(), Y.forEach((O) => O.style.opacity = "0"), u && x && (x.style.opacity = "1");
-    }), r.appendChild(m);
-  }), j === "true" && s ? it().then(() => {
-    H.forEach((c) => {
-      c.style.opacity = "1";
-    }), W.forEach((c) => {
-      c.style.opacity = "1";
-    }), ht(A, 1e3, () => {
+  const tt = document.createElementNS(A, "g");
+  N.forEach((l, h) => {
+    const b = D[h], p = document.createElementNS(A, "rect");
+    p.classList.add("tiny-spark-tooltip-trap"), p.setAttribute("x", `${N.length === 1 ? 0 : u.left + h * L - L / 2}`), p.setAttribute("y", `${u.top}`), p.setAttribute("height", `${u.height}`), p.setAttribute("width", `${L}`), p.setAttribute("fill", "transparent"), p.setAttribute("aria-describedby", `tooltip_${e}`), p.addEventListener("mouseenter", () => {
+      it(s, t, l, e, !0), j ? document.getElementById(`circle_${e}_${h}`)?.setAttribute("r", String(Number(f(t, g.PLOT_RADIUS, 3)) * 1.5)) : s.appendChild(b), Z[h].style.opacity = "1", d && x && (h === N.length - 1 ? x.style.opacity = "0" : x.style.opacity = "1");
+    }), p.addEventListener("mouseout", () => {
+      it(s, t, l, e, !1), j ? document.getElementById(`circle_${e}_${h}`)?.setAttribute("r", String(Number(f(t, g.PLOT_RADIUS, 3)))) : b.remove(), Z.forEach((S) => S.style.opacity = "0"), d && x && (x.style.opacity = "1");
+    }), tt.appendChild(p);
+  }), s.appendChild(tt), Q === "true" && o ? lt().then(() => {
+    D.forEach((l) => {
+      l.style.opacity = "1";
+    }), K.forEach((l) => {
+      l.style.opacity = "1";
+    }), xt(R, 1e3, () => {
       x && (x.style.opacity = "1");
-    }), pt(r, V);
-  }) : (H.forEach((c) => {
-    c.style.opacity = "1";
-  }), W.forEach((c) => {
-    c.style.opacity = "1";
-  }), x && (x.style.opacity = "1")), t.appendChild(r), t.addEventListener("mouseleave", () => {
-    const c = K[e];
-    c && (cancelAnimationFrame(c.frameId), c.frameId = null, c.tool.style.opacity = "0", c.hasSnapped = !1);
+    }), Ct(s, P);
+  }) : (D.forEach((l) => {
+    l.style.opacity = "1";
+  }), K.forEach((l) => {
+    l.style.opacity = "1";
+  }), x && (x.style.opacity = "1")), t.appendChild(s), t.addEventListener("mouseleave", () => {
+    const l = J[e];
+    l && (cancelAnimationFrame(l.frameId), l.frameId = null, l.tool.style.opacity = "0", l.hasSnapped = !1);
   });
 }
-function Ct() {
-  const t = mt();
-  t.length && Array.from(t).forEach((i) => {
-    if (!i.dataset.id) {
-      const s = et();
-      i.setAttribute("data-id", s);
+function Pt() {
+  const t = At();
+  t.length && Array.from(t).forEach((r) => {
+    if (!r.dataset.id) {
+      const o = W();
+      r.setAttribute("data-id", o);
     }
-    const n = i;
-    Lt(n), n.__renderCount = 0, Z(n), it().then(() => {
-      const s = new ResizeObserver((e) => {
-        e.forEach(() => Z(n));
+    const n = r;
+    wt(n), n.__renderCount = 0, z(n), lt().then(() => {
+      const o = new ResizeObserver((e) => {
+        e.forEach(() => z(n));
       });
-      n.parentElement && s.observe(n.parentElement), new MutationObserver((e) => {
-        for (const d of e)
-          if (d.type === "attributes" && d.attributeName && Object.values(T).includes(d.attributeName)) {
-            Z(n);
+      n.parentElement && o.observe(n.parentElement), new MutationObserver((e) => {
+        for (const c of e)
+          if (c.type === "attributes" && c.attributeName && Object.values(H).includes(c.attributeName)) {
+            z(n);
             break;
           }
       }).observe(n, { attributes: !0 });
     });
   });
 }
-function Z(t) {
-  tt(t, "set") && Ot(t, t.__renderCount < 2), t.__renderCount += 1;
+function z(t) {
+  st(t, "set") && Ft(t, t.__renderCount < 2), t.__renderCount += 1;
 }
-function Lt(t) {
+function wt(t) {
   t.dataset.set || console.error(
     `Tiny-spark exception:
 
@@ -416,10 +478,10 @@ Provide an array of numbers, for example:
  data-set="[1, 2, 3]"`
   );
 }
-function vt(t) {
+function Mt(t) {
   return JSON.stringify(t);
 }
 export {
-  Ct as render,
-  vt as tinyFormat
+  Pt as render,
+  Mt as tinyFormat
 };

package/dist/tiny-spark.umd.js

@@ -1,10 +1,10 @@
-(function(P,w){typeof exports=="object"&&typeof module<"u"?w(exports):typeof define=="function"&&define.amd?define(["exports"],w):(P=typeof globalThis<"u"?globalThis:P||self,w(P.TinySpark={}))})(this,function(P){"use strict";const w="http://www.w3.org/2000/svg";var q=(t=>(t.BAR="bar",t.LINE="line",t))(q||{}),h=(t=>(t.ANIMATION="animation",t.AREA_COLOR="areaColor",t.CURVE="curve",t.DATES="dates",t.ID="id",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.HIDE_PLOTS_ABOVE="hidePlotsAbove",t.SHOW_LAST_VALUE="showLastValue",t.LAST_VALUE_FONT_SIZE="lastValueFontSize",t.LAST_VALUE_COLOR="lastValueColor",t.TYPE="type",t.TOOLTIP_SMOOTHING="tooltipSmoothing",t.CUT_NULL="cutNull",t))(h||{}),z=(t=>(t.ANIMATION="data-animation",t.AREA_COLOR="data-area-color",t.CURVE="data-curve",t.DATES="data-dates",t.ID="data-id",t.INDICATOR_COLOR="data-indicator-color",t.INDICATOR_WIDTH="data-indicator-width",t.LINE_COLOR="data-line-color",t.LINE_THICKNESS="data-line-thickness",t.NUMBER_LOCALE="data-number-locale",t.NUMBER_ROUNDING="data-number-rounding",t.NUMBER_SHOW_ON="data-number-show-on",t.PLOT_COLOR="data-plot-color",t.PLOT_RADIUS="data-plot-radius",t.SET="data-set",t.HIDE_PLOTS_ABOVE="data-hide-plots-above",t.SHOW_LAST_VALUE="data-show-last-value",t.LAST_VALUE_FONT_SIZE="data-last-value-font-size",t.LAST_VALUE_COLOR="data-last-value-color",t.TYPE="data-type",t.TOOLTIP_SMOOTHING="data-tooltip-smoothing",t.CUT_NULL="data-cut-null",t))(z||{});const rt={version:"1.0.0"};function at(t){const{width:i,height:n}=t.parentElement.getBoundingClientRect(),s={width:300,height:100},r=String(p(t,h.SHOW_LAST_VALUE,"false"))==="true",e=T(t),d=e&&e.length?e.at(-1):null;let o=0;if(!(t.dataset.type&&t.dataset.type==="bar")&&r&&![null,void 0].includes(d)){const l=Number(String(p(t,h.NUMBER_ROUNDING,0)));o=6+d.toFixed(l).length*(Number(p(t,h.LAST_VALUE_FONT_SIZE,12))/2)}const a=`0 0 ${(i||s.width)+o} ${n||s.height}`,g=document.createElementNS(w,"svg"),v=t.dataset.id;g.id=v,g.setAttribute("viewBox",a),g.style.width="100%",g.style.height="100%";const u=document.createElementNS(w,"desc");return u.setAttribute("aria-hidden","true"),u.innerHTML=`Composed with tiny-spark v${rt.version}`,g.appendChild(u),{svg:g,svgId:v,width:i||s.width,height:n||s.height,viewBox:a}}function L(t,i=0){return isNaN(t)?i:t}function D(t){let i=[];for(let n=0;n<t.length;n+=1)i.push(`${L(t[n].x)},${L(t[n].y)} `);return i.join(" ").trim()}function E(t){if(t.length<2)return"0,0";const i=t.length-1,n=[`${L(t[0].x)},${L(t[0].y)}`],s=[],r=[],e=[],d=[];for(let o=0;o<i;o+=1)s[o]=t[o+1].x-t[o].x,r[o]=t[o+1].y-t[o].y,e[o]=r[o]/s[o];d[0]=e[0],d[i]=e[i-1];for(let o=1;o<i;o+=1)if(e[o-1]*e[o]<=0)d[o]=0;else{const f=2*e[o-1]*e[o]/(e[o-1]+e[o]);d[o]=f}for(let o=0;o<i;o+=1){const f=t[o].x,S=t[o].y,a=t[o+1].x,g=t[o+1].y,v=d[o],u=d[o+1],l=f+(a-f)/3,C=S+v*(a-f)/3,$=a-(a-f)/3,R=g-u*(a-f)/3;n.push(`C ${L(l)},${L(C)} ${L($)},${L(R)} ${L(a)},${L(g)}`)}return n.join(" ")}function lt(t){const i=[];let n=[];for(const s of t)s.v==null||Number.isNaN(s.x)||Number.isNaN(s.y)?(n.length>1&&i.push(n),n=[]):n.push(s);return n.length>1&&i.push(n),i}function ut(t){const i=lt(t);if(!i.length)return"";let n="";for(const[s,r]of i.entries()){if(r.length<2)continue;const e=r.length-1,d=[],o=[],f=[],S=[];for(let a=0;a<e;a+=1)d[a]=r[a+1].x-r[a].x,o[a]=r[a+1].y-r[a].y,f[a]=o[a]/d[a];S[0]=f[0],S[e]=f[e-1];for(let a=1;a<e;a+=1)if(f[a-1]*f[a]<=0)S[a]=0;else{const g=2*f[a-1]*f[a]/(f[a-1]+f[a]);S[a]=g}n+=`${s===0?"":"M"}${L(r[0].x)},${L(r[0].y)} `;for(let a=0;a<e;a+=1){const g=r[a].x,v=r[a].y,u=r[a+1].x,l=r[a+1].y,C=S[a],$=S[a+1],R=g+(u-g)/3,V=v+C*(u-g)/3,I=u-(u-g)/3,k=l-$*(u-g)/3;n+=`C${L(R)},${L(V)} ${L(I)},${L(k)} ${L(u)},${L(l)} `}}return n.trim()}function ct(t){let i="",n=!1;const s=r=>r.v!=null&&Number.isFinite(r.x)&&Number.isFinite(r.y);for(let r=0;r<t.length;r++){const e=t[r];if(!s(e))continue;const d=`${L(e.x)},${L(e.y)}`;if(!n)i+=d,n=!0;else{const o=t[r-1],f=s(o)?"L":"M";i+=`${f}${d}`}i+=" "}return i.trim()}function dt(t){const i=[];let n=[];for(const s of t)!s||s.v==null||Number.isNaN(s.x)||Number.isNaN(s.y)?(n.length&&i.push(n),n=[]):n.push(s);return n.length&&i.push(n),i}function ft(t,i){if(!t[0])return[-10,-10,"",-10,-10].toString();const n=dt(t);return n.length?n.map(s=>{const r={x:s[0].x,y:i},e={x:s.at(-1)?.x,y:i},d=[];return s.forEach(o=>{d.push(`${o.x},${o.y} `)}),[r.x,r.y,...d,e.x,e.y].toString()}).join(";"):""}function gt(t,i,n=!1,s=!0){function r(d){const o=[];let f=[];for(const S of d)!S||S.v==null||Number.isNaN(S.x)||Number.isNaN(S.y)?(f.length>1&&o.push(f),f=[]):f.push(S);return f.length>1&&o.push(f),o}return(n?r(t):[t]).map(d=>{if(d.length<2)return"";const o=d.length-1,f=[],S=[],a=[],g=[];for(let u=0;u<o;u+=1)f[u]=d[u+1].x-d[u].x,S[u]=d[u+1].y-d[u].y,a[u]=S[u]/f[u];g[0]=a[0],g[o]=a[o-1];for(let u=1;u<o;u+=1)if(a[u-1]*a[u]<=0)g[u]=0;else{const l=2*a[u-1]*a[u]/(a[u-1]+a[u]);g[u]=l}let v=`M${d[0].x},${i}`;v+=` L${d[0].x},${d[0].y}`;for(let u=0;u<o;u+=1){const l=d[u].x,C=d[u].y,$=d[u+1].x,R=d[u+1].y,V=g[u],I=g[u+1],k=l+($-l)/3,B=C+V*($-l)/3,m=$-($-l)/3,F=R-I*($-l)/3;v+=` C${k},${B} ${m},${F} ${$},${R}`}return v+=` L${d[o].x},${i} ${s?"Z":""}`,v}).filter(Boolean)}function yt(t,i=1e3,n){t.style.opacity="1";const s=t.getTotalLength();t.style.strokeDasharray=String(s),t.style.strokeDashoffset=String(s),t.getBoundingClientRect(),t.style.transition=`stroke-dashoffset ${i}ms ease-in-out`,t.style.strokeDashoffset="0",t.addEventListener("transitionend",function r(){t.style.transition="",t.removeEventListener("transitionend",r),n&&n()})}function pt(t,i,n=1e3){i.style.opacity="1";const s=i.getBBox(),r=s.width,e=document.createElementNS("http://www.w3.org/2000/svg","clipPath"),d="clip-"+Math.random().toString(36).substr(2,9);e.setAttribute("id",d);const o=document.createElementNS("http://www.w3.org/2000/svg","rect");o.setAttribute("x",s.x.toString()),o.setAttribute("y",s.y.toString()),o.setAttribute("width","0"),o.setAttribute("height",s.height.toString()),e.appendChild(o);let f=t.querySelector("defs");f||(f=document.createElementNS("http://www.w3.org/2000/svg","defs"),t.insertBefore(f,t.firstChild)),f.appendChild(e),i.setAttribute("clip-path",`url(#${d})`),o.style.transition=`width ${n}ms ease-out`,o.getBoundingClientRect(),o.setAttribute("width",r.toString()),o.addEventListener("transitionend",function S(){i.removeAttribute("clip-path"),e.parentNode&&e.parentNode.removeChild(e),o.removeEventListener("transitionend",S)})}function ht(){return document.querySelectorAll(".tiny-spark")}function J(t,i){return Object.keys(t.dataset).includes(i)}function p(t,i,n){return J(t,i)?t.dataset[i]:n}function mt(t){if(!t)return{color:"#1A1A1A",backgroundColor:"#FFFFFF"};const i=window.getComputedStyle(t),n=i.getPropertyValue("color")||"#1A1A1A",s=i.getPropertyValue("background-color"),r=i.getPropertyValue("background");return{color:n,backgroundColor:s||r||"#FFFFFF"}}function Q(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(t){const i=Math.random()*16|0;return(t=="x"?i:i&3|8).toString(16)})}function T(t){const i=t.getAttribute("data-set");if(!i)return[];const n=i.replace(/,(?=,)/g,",null").replace(/\[,/g,"[null,").replace(/,\]/g,",null]");try{const s=JSON.parse(n);return Array.isArray(s)&&s.every(r=>typeof r=="number"||[null,void 0].includes(r))?s:(console.warn("data-set is not an array of numbers."),[])}catch(s){return console.error("Error parsing data-set:",s),[]}}function bt(t){const i=t.getAttribute("data-dates");if(!i)return[];try{const n=JSON.parse(i);return Array.isArray(n)&&n.every(s=>typeof s=="string")?n:(console.warn("data-dates is not an array of strings"),[])}catch(n){return console.error("Error parsing data-dates",n),[]}}function tt(t){return{min:Math.min(...t),max:Math.max(...t)}}function et(){return new Promise(t=>setTimeout(t,0))}function nt(t,i){const n=String(p(t,h.NUMBER_LOCALE,navigator.language||"en-US")),s=Number(String(p(t,h.NUMBER_ROUNDING,0)));return i.toLocaleString(n,{useGrouping:!0,minimumFractionDigits:s,maximumFractionDigits:s})}function St(t,i,n){if(!t.createSVGPoint||!t.getScreenCTM)throw new Error("Your browser does not support SVG coordinate transformation.");const s=t.getScreenCTM();if(!s)throw new Error("Cannot obtain the screen CTM.");const r=t.createSVGPoint();r.x=i,r.y=n;const e=r.matrixTransform(s);return{x:e.x,y:e.y}}const Y={};function it(t,i,n,s,r){let e=Y[s];if(!r){e&&(cancelAnimationFrame(e.frameId),e.frameId=null,e.tool.style.opacity="0");return}const d=i.dataset.type===q.BAR,{x:o,y:f}=St(t,n.x,d&&!n.isPositive?n.bar.y:n.y);if(!e){const l=document.createElement("div");l.classList.add("tiny-spark-tooltip"),l.setAttribute("id",`tooltip_${s}`),l.setAttribute("role","tooltip"),l.setAttribute("aria-live","polite"),l.style.position="fixed",l.style.pointerEvents="none",l.style.opacity="0",l.style.willChange="top, left",document.body.appendChild(l),e=Y[s]={targetX:0,targetY:0,displayX:0,displayY:0,frameId:null,tool:l,width:0,height:0,hasSnapped:!1}}e.tool.setAttribute("aria-hidden","false"),e.tool.innerHTML=`
+(function(w,x){typeof exports=="object"&&typeof module<"u"?x(exports):typeof define=="function"&&define.amd?define(["exports"],x):(w=typeof globalThis<"u"?globalThis:w||self,x(w.TinySpark={}))})(this,function(w){"use strict";const x="http://www.w3.org/2000/svg";var T=(t=>(t.BAR="bar",t.LINE="line",t))(T||{}),m=(t=>(t.ANIMATION="animation",t.AREA_COLOR="areaColor",t.CURVE="curve",t.DATES="dates",t.ID="id",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.HIDE_PLOTS_ABOVE="hidePlotsAbove",t.SHOW_LAST_VALUE="showLastValue",t.LAST_VALUE_FONT_SIZE="lastValueFontSize",t.LAST_VALUE_COLOR="lastValueColor",t.TYPE="type",t.TOOLTIP_SMOOTHING="tooltipSmoothing",t.CUT_NULL="cutNull",t.GRADIENT_FROM="gradientFrom",t.GRADIENT_TO="gradientTo",t.GRADIENT_FROM_OPACITY="gradientFromOpacity",t.GRADIENT_TO_OPACITY="gradientToOpacity",t.TEMPERATURE_COLORS="temperatureColors",t))(m||{}),H=(t=>(t.ANIMATION="data-animation",t.AREA_COLOR="data-area-color",t.CURVE="data-curve",t.DATES="data-dates",t.ID="data-id",t.INDICATOR_COLOR="data-indicator-color",t.INDICATOR_WIDTH="data-indicator-width",t.LINE_COLOR="data-line-color",t.LINE_THICKNESS="data-line-thickness",t.NUMBER_LOCALE="data-number-locale",t.NUMBER_ROUNDING="data-number-rounding",t.NUMBER_SHOW_ON="data-number-show-on",t.PLOT_COLOR="data-plot-color",t.PLOT_RADIUS="data-plot-radius",t.SET="data-set",t.HIDE_PLOTS_ABOVE="data-hide-plots-above",t.SHOW_LAST_VALUE="data-show-last-value",t.LAST_VALUE_FONT_SIZE="data-last-value-font-size",t.LAST_VALUE_COLOR="data-last-value-color",t.TYPE="data-type",t.TOOLTIP_SMOOTHING="data-tooltip-smoothing",t.CUT_NULL="data-cut-null",t.GRADIENT_FROM="data-gradient-from",t.GRADIENT_TO="data-gradient-to",t.GRADIENT_FROM_OPACITY="data-gradient-from-opacity",t.GRADIENT_TO_OPACITY="data-gradient-to-opacity",t.TEMPERATURE_COLORS="data-temperature-colors",t))(H||{});const dt={version:"1.2.0"};function ft(t){const{width:r,height:n}=t.parentElement.getBoundingClientRect(),o={width:300,height:100},s=String(p(t,m.SHOW_LAST_VALUE,"false"))==="true",e=rt(t),c=e&&e.length?e.at(-1):null;let i=0;if(!(t.dataset.type&&t.dataset.type==="bar")&&s&&![null,void 0].includes(c)){const u=Number(String(p(t,m.NUMBER_ROUNDING,0)));i=6+c.toFixed(u).length*(Number(p(t,m.LAST_VALUE_FONT_SIZE,12))/2)}const a=`0 0 ${(r||o.width)+i} ${n||o.height}`,y=document.createElementNS(x,"svg"),_=t.dataset.id;y.id=_,y.setAttribute("viewBox",a),y.style.width="100%",y.style.height="100%";const d=document.createElementNS(x,"desc");return d.setAttribute("aria-hidden","true"),d.innerHTML=`Composed with tiny-spark v${dt.version}`,y.appendChild(d),{svg:y,svgId:_,width:r||o.width,height:n||o.height,viewBox:a}}function A(t,r=0){return isNaN(t)?r:t}function tt(t){let r=[];for(let n=0;n<t.length;n+=1)r.push(`${A(t[n].x)},${A(t[n].y)} `);return r.join(" ").trim()}function et(t){if(t.length<2)return"0,0";const r=t.length-1,n=[`${A(t[0].x)},${A(t[0].y)}`],o=[],s=[],e=[],c=[];for(let i=0;i<r;i+=1)o[i]=t[i+1].x-t[i].x,s[i]=t[i+1].y-t[i].y,e[i]=s[i]/o[i];c[0]=e[0],c[r]=e[r-1];for(let i=1;i<r;i+=1)if(e[i-1]*e[i]<=0)c[i]=0;else{const g=2*e[i-1]*e[i]/(e[i-1]+e[i]);c[i]=g}for(let i=0;i<r;i+=1){const g=t[i].x,N=t[i].y,a=t[i+1].x,y=t[i+1].y,_=c[i],d=c[i+1],u=g+(a-g)/3,I=N+_*(a-g)/3,$=a-(a-g)/3,F=y-d*(a-g)/3;n.push(`C ${A(u)},${A(I)} ${A($)},${A(F)} ${A(a)},${A(y)}`)}return n.join(" ")}function pt(t){const r=[];let n=[];for(const o of t)o.v==null||Number.isNaN(o.x)||Number.isNaN(o.y)?(n.length>1&&r.push(n),n=[]):n.push(o);return n.length>1&&r.push(n),r}function mt(t){const r=pt(t);if(!r.length)return"";let n="";for(const[o,s]of r.entries()){if(s.length<2)continue;const e=s.length-1,c=[],i=[],g=[],N=[];for(let a=0;a<e;a+=1)c[a]=s[a+1].x-s[a].x,i[a]=s[a+1].y-s[a].y,g[a]=i[a]/c[a];N[0]=g[0],N[e]=g[e-1];for(let a=1;a<e;a+=1)if(g[a-1]*g[a]<=0)N[a]=0;else{const y=2*g[a-1]*g[a]/(g[a-1]+g[a]);N[a]=y}n+=`${o===0?"":"M"}${A(s[0].x)},${A(s[0].y)} `;for(let a=0;a<e;a+=1){const y=s[a].x,_=s[a].y,d=s[a+1].x,u=s[a+1].y,I=N[a],$=N[a+1],F=y+(d-y)/3,V=_+I*(d-y)/3,L=d-(d-y)/3,P=u-$*(d-y)/3;n+=`C${A(F)},${A(V)} ${A(L)},${A(P)} ${A(d)},${A(u)} `}}return n.trim()}function gt(t){let r="",n=!1;const o=s=>s.v!=null&&Number.isFinite(s.x)&&Number.isFinite(s.y);for(let s=0;s<t.length;s++){const e=t[s];if(!o(e))continue;const c=`${A(e.x)},${A(e.y)}`;if(!n)r+=c,n=!0;else{const i=t[s-1],g=o(i)?"L":"M";r+=`${g}${c}`}r+=" "}return r.trim()}function yt(t){const r=[];let n=[];for(const o of t)!o||o.v==null||Number.isNaN(o.x)||Number.isNaN(o.y)?(n.length&&r.push(n),n=[]):n.push(o);return n.length&&r.push(n),r}function ht(t,r){if(!t[0])return[-10,-10,"",-10,-10].toString();const n=yt(t);return n.length?n.map(o=>{const s={x:o[0].x,y:r},e={x:o.at(-1)?.x,y:r},c=[];return o.forEach(i=>{c.push(`${i.x},${i.y} `)}),[s.x,s.y,...c,e.x,e.y].toString()}).join(";"):""}function bt(t,r,n=!1,o=!0){function s(c){const i=[];let g=[];for(const N of c)!N||N.v==null||Number.isNaN(N.x)||Number.isNaN(N.y)?(g.length>1&&i.push(g),g=[]):g.push(N);return g.length>1&&i.push(g),i}return(n?s(t):[t]).map(c=>{if(c.length<2)return"";const i=c.length-1,g=[],N=[],a=[],y=[];for(let d=0;d<i;d+=1)g[d]=c[d+1].x-c[d].x,N[d]=c[d+1].y-c[d].y,a[d]=N[d]/g[d];y[0]=a[0],y[i]=a[i-1];for(let d=1;d<i;d+=1)if(a[d-1]*a[d]<=0)y[d]=0;else{const u=2*a[d-1]*a[d]/(a[d-1]+a[d]);y[d]=u}let _=`M${c[0].x},${r}`;_+=` L${c[0].x},${c[0].y}`;for(let d=0;d<i;d+=1){const u=c[d].x,I=c[d].y,$=c[d+1].x,F=c[d+1].y,V=y[d],L=y[d+1],P=u+($-u)/3,q=I+V*($-u)/3,O=$-($-u)/3,U=F-L*($-u)/3;_+=` C${P},${q} ${O},${U} ${$},${F}`}return _+=` L${c[i].x},${r} ${o?"Z":""}`,_}).filter(Boolean)}function Ot(t,r=1e3,n){t.style.opacity="1";const o=t.getTotalLength();t.style.strokeDasharray=String(o),t.style.strokeDashoffset=String(o),t.getBoundingClientRect(),t.style.transition=`stroke-dashoffset ${r}ms ease-in-out`,t.style.strokeDashoffset="0",t.addEventListener("transitionend",function s(){t.style.transition="",t.removeEventListener("transitionend",s),n&&n()})}function Nt(t,r,n=1e3){r.style.opacity="1";const o=r.getBBox(),s=o.width,e=document.createElementNS("http://www.w3.org/2000/svg","clipPath"),c="clip-"+Math.random().toString(36).substr(2,9);e.setAttribute("id",c);const i=document.createElementNS("http://www.w3.org/2000/svg","rect");i.setAttribute("x",o.x.toString()),i.setAttribute("y",o.y.toString()),i.setAttribute("width","0"),i.setAttribute("height",o.height.toString()),e.appendChild(i);let g=t.querySelector("defs");g||(g=document.createElementNS("http://www.w3.org/2000/svg","defs"),t.insertBefore(g,t.firstChild)),g.appendChild(e),r.setAttribute("clip-path",`url(#${c})`),i.style.transition=`width ${n}ms ease-out`,i.getBoundingClientRect(),i.setAttribute("width",s.toString()),i.addEventListener("transitionend",function N(){r.removeAttribute("clip-path"),e.parentNode&&e.parentNode.removeChild(e),i.removeEventListener("transitionend",N)})}function St(){return document.querySelectorAll(".tiny-spark")}function nt(t,r){return Object.keys(t.dataset).includes(r)}function p(t,r,n){return nt(t,r)?t.dataset[r]:n}function xt(t){if(!t)return{color:"#1A1A1A",backgroundColor:"#FFFFFF"};const r=window.getComputedStyle(t),n=r.getPropertyValue("color")||"#1A1A1A",o=r.getPropertyValue("background-color"),s=r.getPropertyValue("background");return{color:n,backgroundColor:o||s||"#FFFFFF"}}function D(){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 rt(t){const r=t.getAttribute(H.SET);if(!r)return[];const n=r.replace(/,(?=,)/g,",null").replace(/\[,/g,"[null,").replace(/,\]/g,",null]");try{const o=JSON.parse(n);return Array.isArray(o)&&o.every(s=>typeof s=="number"||[null,void 0].includes(s))?o:(console.warn("data-set is not an array of numbers."),[])}catch(o){return console.error("Error parsing data-set:",o),[]}}function Ct(t,r){return r<=1?"0%":`${t*100/(r-1)}%`}function At(t){const r=t.getAttribute(H.DATES);if(!r)return[];try{const n=JSON.parse(r.replaceAll("'",'"'));return Array.isArray(n)&&n.every(o=>typeof o=="string")?n:(console.warn("data-dates is not an array of strings"),[])}catch(n){return console.error("Error parsing data-dates",n),[]}}function It(t){const r=t.getAttribute(H.TEMPERATURE_COLORS);if(!r)return[];try{const n=JSON.parse(r.replaceAll("'",'"'));return Array.isArray(n)&&n.every(o=>typeof o=="string")?n:(console.warn("data-temperature-colors is not an array of strings"),[])}catch(n){return console.error("Error parsing data-temperature-colors",n),[]}}function it(t){return{min:Math.min(...t),max:Math.max(...t)}}function ot(){return new Promise(t=>setTimeout(t,0))}function st(t,r){const n=String(p(t,m.NUMBER_LOCALE,navigator.language||"en-US")),o=Number(String(p(t,m.NUMBER_ROUNDING,0)));return r.toLocaleString(n,{useGrouping:!0,minimumFractionDigits:o,maximumFractionDigits:o})}function _t(t,r,n){if(!t.createSVGPoint||!t.getScreenCTM)return console.error("Your browser does not support SVG coordinate transformation."),{x:0,y:0};const o=t.getScreenCTM();if(!o)return console.error("Cannot obtain the screen CTM."),{x:0,y:0};const s=t.createSVGPoint();s.x=r,s.y=n;const e=s.matrixTransform(o);return{x:e.x,y:e.y}}const Z={};function at(t,r,n,o,s){let e=Z[o];if(!s){e&&(cancelAnimationFrame(e.frameId),e.frameId=null,e.tool.style.opacity="0");return}const c=r.dataset.type===T.BAR,{x:i,y:g}=_t(t,n.x,c&&!n.isPositive?n.bar.y:n.y);if(!e){const u=document.createElement("div");u.classList.add("tiny-spark-tooltip"),u.setAttribute("id",`tooltip_${o}`),u.setAttribute("role","tooltip"),u.setAttribute("aria-live","polite"),u.style.position="fixed",u.style.pointerEvents="none",u.style.opacity="0",u.style.willChange="top, left",document.body.appendChild(u),e=Z[o]={targetX:0,targetY:0,displayX:0,displayY:0,frameId:null,tool:u,width:0,height:0,hasSnapped:!1}}e.tool.setAttribute("aria-hidden","false"),e.tool.innerHTML=`
     <div class="tiny-spark-tooltip-content">
-      ${n.d?`${n.d}: `:""}${[null,void 0].includes(n.v)?"-":nt(i,Number(n.v))}
+      ${n.d?`${n.d}: `:""}${[null,void 0].includes(n.v)?"-":st(r,Number(n.v))}
     </div>
-  `;const{width:S,height:a}=e.tool.getBoundingClientRect();e.width=S,e.height=a;const g=Number(p(i,h.PLOT_RADIUS,3));if(e.targetX=o-e.width/2,e.targetY=f-e.height-g*1.5,!e.hasSnapped){e.displayX=e.targetX,e.displayY=e.targetY,e.tool.style.left=`${e.displayX}px`,e.tool.style.top=`${e.displayY}px`,e.tool.style.opacity="1",e.hasSnapped=!0;return}const v=Number(p(i,h.TOOLTIP_SMOOTHING,1))/10;function u(){e.displayX+=(e.targetX-e.displayX)*v,e.displayY+=(e.targetY-e.displayY)*v,e.tool.style.left=`${Math.round(e.displayX)}px`,e.tool.style.top=`${Math.round(e.displayY)}px`,e.tool.style.opacity="1",e.frameId=requestAnimationFrame(u)}e.frameId==null&&u()}function Nt(t){t.innerHTML=""}function Ot(t,i){const n=t.dataset.type&&t.dataset.type==="bar";let s=i;Nt(t);const{svg:r,svgId:e,width:d,height:o,viewBox:f}=at(t),{color:S,backgroundColor:a}=mt(t),g={T:12,R:12,B:12,L:12},v=Q(),u=String(p(t,h.SHOW_LAST_VALUE,"false"))==="true",l={left:g.L,top:g.T,width:d-g.L-g.R,height:o-g.T-g.B,bottom:o-g.B},C=T(t),{min:$}=tt(C),R=C.map(c=>[null,void 0].includes(c)?c:c+($<0?Math.abs($):0)),{max:V}=tt(R);let I=l.width/(C.length-1)===1/0?l.width:l.width/(C.length-1);if(n){const[c,N,y,b]=f.split(" ");r.setAttribute("viewBox",`${Number(c)-I/2} ${N} ${Number(y)+I} ${b}`)}const k=!C.some(c=>c>=0),B=bt(t),m=R.map((c,N)=>{const y={w:R.length===1?I/2:0,h:R.length===1?l.height/2:0},b=l.left+I*N+y.w,x=(1-(c||0)/V)*l.height+y.h+g.T,X=(1-($<0?Math.abs($):0)/V)*l.height+g.T+y.h,K=C[N]>=0;return{y:k&&C.length===1?l.top+l.height/2:x,x:b,v:C[N],d:B[N]||null,isPositive:K,bar:{x:b-I/2,y:C.length===1?l.top:K?x:k?l.top:X,h:C.length===1?l.height:K?X-x:k&&C.length===0?l.height:isNaN(x-X)?0:x-X,w:I}}});function F(){const c=document.createElementNS(w,"path");return c.classList.add("tiny-spark-line-area"),c}const A=[...m].map(c=>[null,void 0,1/0,-1/0,NaN,"NaN"].includes(c.v)?{...c,v:null}:c),ot=t.getAttribute("data-animation"),_=document.createElementNS(w,"path");_.classList.add("tiny-spark-line-path");const M=F(),H=[];n||(!t.dataset.curve||t.dataset.curve==="true"?!t.dataset.cutNull||t.dataset.cutNull==="false"?_.setAttribute("d",`M ${E(A)}`):_.setAttribute("d",`M ${ut(A)}`):!t.dataset.cutNull||t.dataset.cutNull==="false"?_.setAttribute("d",`M ${D(A)}`):_.setAttribute("d",`M ${ct(A)}`),_.setAttribute("fill","none"),_.setAttribute("stroke",String(p(t,h.LINE_COLOR,S))),_.setAttribute("stroke-width",String(p(t,h.LINE_THICKNESS,2))),_.setAttribute("stroke-linecap","round"),ot==="true"&&s&&(_.style.opacity="0",M.style.opacity="0"),m.length&&(!t.dataset.curve||t.dataset.curve==="true"?!t.dataset.cutNull||t.dataset.cutNull==="false"?M.setAttribute("d",`M ${A[0].x},${l.bottom} ${E(A)} L ${A.at(-1).x},${l.bottom} Z`):gt(A,l.bottom,!0,!0).forEach(N=>{const y=F();y.setAttribute("d",N),y.setAttribute("fill",String(p(t,h.AREA_COLOR,"transparent"))),H.push(y)}):!t.dataset.cutNull||t.dataset.cutNull==="false"?M.setAttribute("d",`M ${A[0].x},${l.bottom} ${D(A)} L ${A.at(-1).x},${l.bottom} Z`):ft(A,l.bottom).split(";").forEach(N=>{const y=F();y.setAttribute("d",`M ${N} Z`),y.setAttribute("fill",String(p(t,h.AREA_COLOR,"transparent"))),H.push(y)})),M.setAttribute("fill",String(p(t,h.AREA_COLOR,"transparent"))),m.length>1&&(H.length?H.forEach(c=>{r.appendChild(c)}):r.appendChild(M),r.appendChild(_)));const G=[];m.forEach((c,N)=>{const y=document.createElementNS(w,"line");y.classList.add("tiny-spark-indicator"),y.setAttribute("id",`indicator_${e}_${N}`),y.setAttribute("x1",String(l.left+(m.length===1?l.width/2:N*I))),y.setAttribute("x2",String(l.left+(m.length===1?l.width/2:N*I))),y.setAttribute("y1",String(l.top)),y.setAttribute("y2",String(l.bottom)),y.setAttribute("stroke",String(p(t,h.INDICATOR_COLOR,"#1A1A1A"))),y.setAttribute("stroke-width",String(p(t,h.INDICATOR_WIDTH,"1"))),y.setAttribute("stroke-linecap","round"),y.style.pointerEvents="none",y.style.opacity="0",G.push(y),r.appendChild(y)});let U=[],Z=[];const st=Number(String(p(t,h.PLOT_RADIUS,0)))>0,vt=!String(p(t,h.HIDE_PLOTS_ABOVE,""))||m.length<=Number(String(p(t,h.HIDE_PLOTS_ABOVE,0))),j=st&&vt;n&&m.forEach(({bar:c,v:N},y)=>{if(![null,void 0].includes(N)){const b=document.createElementNS(w,"rect");b.classList.add("tiny-spark-datapoint-bar"),b.setAttribute("x",String(c.x)),b.setAttribute("y",String(c.y)),b.setAttribute("width",String(c.w)),b.setAttribute("height",String(c.h)),b.setAttribute("fill",String(p(t,h.PLOT_COLOR,String(p(t,"lineColor",S))))),b.style.opacity=m.length===1?"1":"0",b.style.transition=`opacity ${y*(1e3*2/m.length)}ms ease-in`,Z.push(b),r.appendChild(b)}}),st&&!n&&m.forEach(({x:c,y:N,v:y},b)=>{if(![null,void 0].includes(y)){const x=document.createElementNS(w,"circle");x.classList.add("tiny-spark-datapoint-circle"),x.classList.add(`circle-${e}`),x.setAttribute("id",`circle_${e}_${b}`),x.setAttribute("cx",String(c||0)),x.setAttribute("cy",String(N||0)),x.setAttribute("r",String(p(t,h.PLOT_RADIUS,3))),x.setAttribute("fill",String(p(t,h.PLOT_COLOR,String(p(t,"lineColor",S))))),x.setAttribute("stroke",a),x.style.opacity=m.length===1?"1":"0",x.style.transition=`opacity ${b*(1e3*2/m.length)}ms ease-in`,x.style.pointerEvents="none",U.push(x),j&&r.appendChild(x)}});let O=null;if(u&&m.length&&m.at(-1)){const c=Number(p(t,h.LAST_VALUE_FONT_SIZE,12));O=document.createElementNS(w,"text"),O.classList.add("tiny-spark-last-value"),O.setAttribute("id",v),n?(O.setAttribute("x",String(m.at(-1).x+Number(p(t,h.LINE_THICKNESS,2)))),O.setAttribute("y",m.at(-1)?.isPositive?String(m.at(-1).y-c/3):String(m.at(-1).bar.y+m.at(-1).bar.h+c)),O.setAttribute("text-anchor","middle")):(O.setAttribute("x",String(m.at(-1).x+6+Number(p(t,h.LINE_THICKNESS,2)))),O.setAttribute("y",String(m.at(-1).y+c/3)),O.setAttribute("text-anchor","start")),O.setAttribute("font-size",String(c)+"px"),O.setAttribute("fill",String(p(t,h.LAST_VALUE_COLOR,String(p(t,h.INDICATOR_COLOR,"#1A1A1A"))))),O.innerHTML=nt(t,Number(m.at(-1).v)),O.style.opacity=m.length===1?"1":"0",r.appendChild(O)}m.forEach((c,N)=>{const y=U[N],b=document.createElementNS(w,"rect");b.classList.add("tiny-spark-tooltip-trap"),b.setAttribute("x",`${m.length===1?0:l.left+N*I-I/2}`),b.setAttribute("y",`${l.top}`),b.setAttribute("height",`${l.height}`),b.setAttribute("width",`${I}`),b.setAttribute("fill","transparent"),b.setAttribute("aria-describedby",`tooltip_${e}`),b.addEventListener("mouseenter",()=>{it(r,t,c,e,!0),j?document.getElementById(`circle_${e}_${N}`)?.setAttribute("r",String(Number(p(t,h.PLOT_RADIUS,3))*1.5)):r.appendChild(y),G[N].style.opacity="1",u&&O&&(N===m.length-1?O.style.opacity="0":O.style.opacity="1")}),b.addEventListener("mouseout",()=>{it(r,t,c,e,!1),j?document.getElementById(`circle_${e}_${N}`)?.setAttribute("r",String(Number(p(t,h.PLOT_RADIUS,3)))):y.remove(),G.forEach(x=>x.style.opacity="0"),u&&O&&(O.style.opacity="1")}),r.appendChild(b)}),ot==="true"&&s?et().then(()=>{U.forEach(c=>{c.style.opacity="1"}),Z.forEach(c=>{c.style.opacity="1"}),yt(_,1e3,()=>{O&&(O.style.opacity="1")}),pt(r,M)}):(U.forEach(c=>{c.style.opacity="1"}),Z.forEach(c=>{c.style.opacity="1"}),O&&(O.style.opacity="1")),t.appendChild(r),t.addEventListener("mouseleave",()=>{const c=Y[e];c&&(cancelAnimationFrame(c.frameId),c.frameId=null,c.tool.style.opacity="0",c.hasSnapped=!1)})}function xt(){const t=ht();t.length&&Array.from(t).forEach(i=>{if(!i.dataset.id){const s=Q();i.setAttribute("data-id",s)}const n=i;Lt(n),n.__renderCount=0,W(n),et().then(()=>{const s=new ResizeObserver(e=>{e.forEach(()=>W(n))});n.parentElement&&s.observe(n.parentElement),new MutationObserver(e=>{for(const d of e)if(d.type==="attributes"&&d.attributeName&&Object.values(z).includes(d.attributeName)){W(n);break}}).observe(n,{attributes:!0})})})}function W(t){J(t,"set")&&Ot(t,t.__renderCount<2),t.__renderCount+=1}function Lt(t){t.dataset.set||console.error(`Tiny-spark exception:
+  `;const{width:N,height:a}=e.tool.getBoundingClientRect();e.width=N,e.height=a;const y=Number(p(r,m.PLOT_RADIUS,3));if(e.targetX=i-e.width/2,e.targetY=g-e.height-y*1.5,!e.hasSnapped){e.displayX=e.targetX,e.displayY=e.targetY,e.tool.style.left=`${e.displayX}px`,e.tool.style.top=`${e.displayY}px`,e.tool.style.opacity="1",e.hasSnapped=!0;return}const _=Number(p(r,m.TOOLTIP_SMOOTHING,1))/10;function d(){e.displayX+=(e.targetX-e.displayX)*_,e.displayY+=(e.targetY-e.displayY)*_,e.tool.style.left=`${Math.round(e.displayX)}px`,e.tool.style.top=`${Math.round(e.displayY)}px`,e.tool.style.opacity="1",e.frameId=requestAnimationFrame(d)}e.frameId==null&&d()}function j({id:t,colorStart:r,colorEnd:n,opacityStart:o,opacityEnd:s}){const e=document.createElementNS(x,"linearGradient");e.setAttribute("id",t),e.setAttribute("x1","0"),e.setAttribute("x2","0"),e.setAttribute("y1","0"),e.setAttribute("y2","1");const c=document.createElementNS(x,"stop");c.setAttribute("offset","0%"),c.setAttribute("stop-color",r),c.setAttribute("stop-opacity",String(o));const i=document.createElementNS(x,"stop");return i.setAttribute("offset","100%"),i.setAttribute("stop-color",n),i.setAttribute("stop-opacity",String(s)),[c,i].forEach(g=>{e.appendChild(g)}),e}function $t(t){t.innerHTML=""}function Lt(t,r){const n=t.dataset.type&&t.dataset.type==="bar";let o=r;$t(t);const{svg:s,svgId:e,width:c,height:i,viewBox:g}=ft(t),{color:N,backgroundColor:a}=xt(t),y={T:12,R:12,B:12,L:12},_=D(),d=String(p(t,m.SHOW_LAST_VALUE,"false"))==="true",u={left:y.L,top:y.T,width:c-y.L-y.R,height:i-y.T-y.B,bottom:i-y.B},I=rt(t),{min:$}=it(I),F=I.map(l=>[null,void 0].includes(l)?l:l+($<0?Math.abs($):0)),{max:V}=it(F);let L=u.width/(I.length-1)===1/0?u.width:u.width/(I.length-1);if(n){const[l,h,b,f]=g.split(" ");s.setAttribute("viewBox",`${Number(l)-L/2} ${h} ${Number(b)+L} ${f}`)}const P=!I.some(l=>l>=0),q=At(t),O=F.map((l,h)=>{const b={w:F.length===1?L/2:0,h:F.length===1?u.height/2:0},f=u.left+L*h+b.w,S=(1-(l||0)/V)*u.height+b.h+y.T,Y=(1-($<0?Math.abs($):0)/V)*u.height+y.T+b.h,k=I[h]>=0;return{y:P&&I.length===1?u.top+u.height/2:S,x:f,v:I[h],d:q[h]||null,isPositive:k,bar:{x:f-L/2,y:I.length===1?u.top:k?S:P?u.top:Y,h:I.length===1?u.height:k?Y-S:P&&I.length===0?u.height:isNaN(S-Y)?0:S-Y,w:L}}});function U(){const l=document.createElementNS(x,"path");return l.classList.add("tiny-spark-line-area"),l}function wt(l){const h=document.createElementNS(x,"defs");return h.appendChild(j({id:l,colorStart:String(p(t,m.GRADIENT_FROM,"#FFFFFF")),colorEnd:String(p(t,m.GRADIENT_TO,"#FFFFFF")),opacityStart:Math.max(0,Math.min(1,Number(p(t,m.GRADIENT_FROM_OPACITY,1)))),opacityEnd:Math.max(0,Math.min(1,Number(p(t,m.GRADIENT_TO_OPACITY,1))))})),h}function Pt(l){const h=document.createElementNS(x,"defs");return h.appendChild(j({id:`pos_${l}`,colorStart:String(p(t,m.GRADIENT_FROM,"#FFFFFF")),colorEnd:String(p(t,m.GRADIENT_TO,"#FFFFFF")),opacityStart:Math.max(0,Math.min(1,Number(p(t,m.GRADIENT_FROM_OPACITY,1)))),opacityEnd:Math.max(0,Math.min(1,Number(p(t,m.GRADIENT_TO_OPACITY,1))))})),h.appendChild(j({id:`neg_${l}`,colorStart:String(p(t,m.GRADIENT_TO,"#FFFFFF")),colorEnd:String(p(t,m.GRADIENT_FROM,"#FFFFFF")),opacityStart:Math.max(0,Math.min(1,Number(p(t,m.GRADIENT_TO_OPACITY,1)))),opacityEnd:Math.max(0,Math.min(1,Number(p(t,m.GRADIENT_FROM_OPACITY,1))))})),h}const R=[...O].map(l=>[null,void 0,1/0,-1/0,NaN,"NaN"].includes(l.v)?{...l,v:null}:l),lt=t.getAttribute("data-animation"),v=document.createElementNS(x,"path");v.classList.add("tiny-spark-line-path");const M=U(),X=[],E=!!p(t,m.GRADIENT_FROM,"")&&!!p(t,m.GRADIENT_TO,""),G=D();if(!n){!t.dataset.curve||t.dataset.curve==="true"?!t.dataset.cutNull||t.dataset.cutNull==="false"?v.setAttribute("d",`M ${et(R)}`):v.setAttribute("d",`M ${mt(R)}`):!t.dataset.cutNull||t.dataset.cutNull==="false"?v.setAttribute("d",`M ${tt(R)}`):v.setAttribute("d",`M ${gt(R)}`),v.setAttribute("fill","none");const l=It(t);if(l.length){const h=D(),b=document.createElementNS(x,"defs"),f=document.createElementNS(x,"linearGradient");f.setAttribute("gradientTransform","rotate(90)"),f.setAttribute("id",h),l.forEach((S,Y)=>{const k=document.createElementNS(x,"stop");k.setAttribute("offset",Ct(Y,l.length)),k.setAttribute("stop-color",S),f.appendChild(k)}),b.appendChild(f),s.prepend(b),v.setAttribute("stroke",`url(#${h})`)}else v.setAttribute("stroke",String(p(t,m.LINE_COLOR,N)));v.setAttribute("stroke-width",String(p(t,m.LINE_THICKNESS,2))),v.setAttribute("stroke-linecap","round"),lt==="true"&&o&&(v.style.opacity="0",M.style.opacity="0"),E&&s.appendChild(wt(G)),O.length&&(!t.dataset.curve||t.dataset.curve==="true"?!t.dataset.cutNull||t.dataset.cutNull==="false"?M.setAttribute("d",`M ${R[0].x},${u.bottom} ${et(R)} L ${R.at(-1).x},${u.bottom} Z`):bt(R,u.bottom,!0,!0).forEach(b=>{const f=U();f.setAttribute("d",b),E?f.setAttribute("fill",`url(#${G})`):f.setAttribute("fill",String(p(t,m.AREA_COLOR,"transparent"))),X.push(f)}):!t.dataset.cutNull||t.dataset.cutNull==="false"?M.setAttribute("d",`M ${R[0].x},${u.bottom} ${tt(R)} L ${R.at(-1).x},${u.bottom} Z`):ht(R,u.bottom).split(";").forEach(b=>{const f=U();f.setAttribute("d",`M ${b} Z`),E?f.setAttribute("fill",`url(#${G})`):f.setAttribute("fill",String(p(t,m.AREA_COLOR,"transparent"))),X.push(f)})),E?M.setAttribute("fill",`url(#${G})`):M.setAttribute("fill",String(p(t,m.AREA_COLOR,"transparent"))),O.length>1&&(X.length?X.forEach(h=>{s.appendChild(h)}):s.appendChild(M),s.appendChild(v))}const z=[];O.forEach((l,h)=>{const b=document.createElementNS(x,"line");b.classList.add("tiny-spark-indicator"),b.setAttribute("id",`indicator_${e}_${h}`),b.setAttribute("x1",String(u.left+(O.length===1?u.width/2:h*L))),b.setAttribute("x2",String(u.left+(O.length===1?u.width/2:h*L))),b.setAttribute("y1",String(u.top)),b.setAttribute("y2",String(u.bottom)),b.setAttribute("stroke",String(p(t,m.INDICATOR_COLOR,"#1A1A1A"))),b.setAttribute("stroke-width",String(p(t,m.INDICATOR_WIDTH,"1"))),b.setAttribute("stroke-linecap","round"),b.style.pointerEvents="none",b.style.opacity="0",z.push(b),s.appendChild(b)});let W=[],J=[];const ut=Number(String(p(t,m.PLOT_RADIUS,0)))>0,Mt=!String(p(t,m.HIDE_PLOTS_ABOVE,""))||O.length<=Number(String(p(t,m.HIDE_PLOTS_ABOVE,0))),Q=ut&&Mt,B=document.createElementNS(x,"g");n&&(E&&s.appendChild(Pt(G)),O.forEach(({bar:l,v:h},b)=>{if(![null,void 0].includes(h)){const f=document.createElementNS(x,"rect");f.classList.add("tiny-spark-datapoint-bar"),f.setAttribute("x",String(l.x)),f.setAttribute("y",String(l.y)),f.setAttribute("width",String(l.w)),f.setAttribute("height",String(l.h)),E?h>=0?f.setAttribute("fill",`url(#pos_${G})`):f.setAttribute("fill",`url(#neg_${G})`):f.setAttribute("fill",String(p(t,m.PLOT_COLOR,String(p(t,"lineColor",N))))),f.style.opacity=O.length===1?"1":"0",f.style.transition=`opacity ${b*(1e3*2/O.length)}ms ease-in`,J.push(f),B.appendChild(f)}}),s.appendChild(B)),ut&&!n&&(O.forEach(({x:l,y:h,v:b},f)=>{if(![null,void 0].includes(b)){const S=document.createElementNS(x,"circle");S.classList.add("tiny-spark-datapoint-circle"),S.classList.add(`circle-${e}`),S.setAttribute("id",`circle_${e}_${f}`),S.setAttribute("cx",String(l||0)),S.setAttribute("cy",String(h||0)),S.setAttribute("r",String(p(t,m.PLOT_RADIUS,3))),S.setAttribute("fill",String(p(t,m.PLOT_COLOR,String(p(t,"lineColor",N))))),S.setAttribute("stroke",a),S.style.opacity=O.length===1?"1":"0",S.style.transition=`opacity ${f*(1e3*2/O.length)}ms ease-in`,S.style.pointerEvents="none",W.push(S),Q&&B.appendChild(S)}}),s.appendChild(B));let C=null;if(d&&O.length&&O.at(-1)){const l=Number(p(t,m.LAST_VALUE_FONT_SIZE,12));C=document.createElementNS(x,"text"),C.classList.add("tiny-spark-last-value"),C.setAttribute("id",_),n?(C.setAttribute("x",String(O.at(-1).x+Number(p(t,m.LINE_THICKNESS,2)))),C.setAttribute("y",O.at(-1)?.isPositive?String(O.at(-1).y-l/3):String(O.at(-1).bar.y+O.at(-1).bar.h+l)),C.setAttribute("text-anchor","middle")):(C.setAttribute("x",String(O.at(-1).x+6+Number(p(t,m.LINE_THICKNESS,2)))),C.setAttribute("y",String(O.at(-1).y+l/3)),C.setAttribute("text-anchor","start")),C.setAttribute("font-size",String(l)+"px"),C.setAttribute("fill",String(p(t,m.LAST_VALUE_COLOR,String(p(t,m.INDICATOR_COLOR,"#1A1A1A"))))),C.innerHTML=st(t,Number(O.at(-1).v)),C.style.opacity=O.length===1?"1":"0",s.appendChild(C)}const ct=document.createElementNS(x,"g");O.forEach((l,h)=>{const b=W[h],f=document.createElementNS(x,"rect");f.classList.add("tiny-spark-tooltip-trap"),f.setAttribute("x",`${O.length===1?0:u.left+h*L-L/2}`),f.setAttribute("y",`${u.top}`),f.setAttribute("height",`${u.height}`),f.setAttribute("width",`${L}`),f.setAttribute("fill","transparent"),f.setAttribute("aria-describedby",`tooltip_${e}`),f.addEventListener("mouseenter",()=>{at(s,t,l,e,!0),Q?document.getElementById(`circle_${e}_${h}`)?.setAttribute("r",String(Number(p(t,m.PLOT_RADIUS,3))*1.5)):s.appendChild(b),z[h].style.opacity="1",d&&C&&(h===O.length-1?C.style.opacity="0":C.style.opacity="1")}),f.addEventListener("mouseout",()=>{at(s,t,l,e,!1),Q?document.getElementById(`circle_${e}_${h}`)?.setAttribute("r",String(Number(p(t,m.PLOT_RADIUS,3)))):b.remove(),z.forEach(S=>S.style.opacity="0"),d&&C&&(C.style.opacity="1")}),ct.appendChild(f)}),s.appendChild(ct),lt==="true"&&o?ot().then(()=>{W.forEach(l=>{l.style.opacity="1"}),J.forEach(l=>{l.style.opacity="1"}),Ot(v,1e3,()=>{C&&(C.style.opacity="1")}),Nt(s,M)}):(W.forEach(l=>{l.style.opacity="1"}),J.forEach(l=>{l.style.opacity="1"}),C&&(C.style.opacity="1")),t.appendChild(s),t.addEventListener("mouseleave",()=>{const l=Z[e];l&&(cancelAnimationFrame(l.frameId),l.frameId=null,l.tool.style.opacity="0",l.hasSnapped=!1)})}function vt(){const t=St();t.length&&Array.from(t).forEach(r=>{if(!r.dataset.id){const o=D();r.setAttribute("data-id",o)}const n=r;Rt(n),n.__renderCount=0,K(n),ot().then(()=>{const o=new ResizeObserver(e=>{e.forEach(()=>K(n))});n.parentElement&&o.observe(n.parentElement),new MutationObserver(e=>{for(const c of e)if(c.type==="attributes"&&c.attributeName&&Object.values(H).includes(c.attributeName)){K(n);break}}).observe(n,{attributes:!0})})})}function K(t){nt(t,"set")&&Lt(t,t.__renderCount<2),t.__renderCount+=1}function Rt(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]"`)}function Ct(t){return JSON.stringify(t)}P.render=xt,P.tinyFormat=Ct,Object.defineProperty(P,Symbol.toStringTag,{value:"Module"})});
+ data-set="[1, 2, 3]"`)}function Ft(t){return JSON.stringify(t)}w.render=vt,w.tinyFormat=Ft,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiny-spark",
   "private": false,
-  "version": "1.0.0",
+  "version": "1.2.0",
   "type": "module",
   "description": "An elegant, reactive and responsive sparkline chart solution without dependency.",
   "author": "Alec Lloyd Probert",
@@ -30,6 +30,6 @@
   "devDependencies": {
     "@types/node": "^24.0.8",
     "typescript": "~5.8.3",
-    "vite": "^7.1.7"
+    "vite": "^7.2.2"
   }
 }