tiny-spark 0.2.7 → 0.2.8-beta.1

package/dist/react/TinySparkChart.js

@@ -0,0 +1,533 @@
+import mt, { useRef as bt, useEffect as gt } from "react";
+var U = { exports: {} }, Y = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var et;
+function pt() {
+  if (et) return Y;
+  et = 1;
+  var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
+  function s(o, a, i) {
+    var d = null;
+    if (i !== void 0 && (d = "" + i), a.key !== void 0 && (d = "" + a.key), "key" in a) {
+      i = {};
+      for (var r in a)
+        r !== "key" && (i[r] = a[r]);
+    } else i = a;
+    return a = i.ref, {
+      $$typeof: t,
+      type: o,
+      key: d,
+      ref: a !== void 0 ? a : null,
+      props: i
+    };
+  }
+  return Y.Fragment = n, Y.jsx = s, Y.jsxs = s, Y;
+}
+var V = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var rt;
+function ht() {
+  return rt || (rt = 1, process.env.NODE_ENV !== "production" && function() {
+    function t(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === u ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case w:
+          return "Fragment";
+        case v:
+          return "Profiler";
+        case M:
+          return "StrictMode";
+        case W:
+          return "Suspense";
+        case F:
+          return "SuspenseList";
+        case E:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case j:
+            return "Portal";
+          case O:
+            return (e.displayName || "Context") + ".Provider";
+          case N:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case $:
+            var c = e.render;
+            return e = e.displayName, e || (e = c.displayName || c.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case D:
+            return c = e.displayName || null, c !== null ? c : t(e.type) || "Memo";
+          case m:
+            c = e._payload, e = e._init;
+            try {
+              return t(e(c));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function n(e) {
+      return "" + e;
+    }
+    function s(e) {
+      try {
+        n(e);
+        var c = !1;
+      } catch {
+        c = !0;
+      }
+      if (c) {
+        c = console;
+        var f = c.error, h = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return f.call(
+          c,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          h
+        ), n(e);
+      }
+    }
+    function o(e) {
+      if (e === w) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === m)
+        return "<...>";
+      try {
+        var c = t(e);
+        return c ? "<" + c + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function a() {
+      var e = S.A;
+      return e === null ? null : e.getOwner();
+    }
+    function i() {
+      return Error("react-stack-top-frame");
+    }
+    function d(e) {
+      if (g.call(e, "key")) {
+        var c = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (c && c.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function r(e, c) {
+      function f() {
+        X || (X = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          c
+        ));
+      }
+      f.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: f,
+        configurable: !0
+      });
+    }
+    function b() {
+      var e = t(this.type);
+      return Z[e] || (Z[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function p(e, c, f, h, L, k, B, H) {
+      return f = k.ref, e = {
+        $$typeof: P,
+        type: e,
+        key: c,
+        props: k,
+        _owner: L
+      }, (f !== void 0 ? f : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: b
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: B
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: H
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function l(e, c, f, h, L, k, B, H) {
+      var y = c.children;
+      if (y !== void 0)
+        if (h)
+          if (dt(y)) {
+            for (h = 0; h < y.length; h++)
+              _(y[h]);
+            Object.freeze && Object.freeze(y);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else _(y);
+      if (g.call(c, "key")) {
+        y = t(e);
+        var T = Object.keys(c).filter(function(ft) {
+          return ft !== "key";
+        });
+        h = 0 < T.length ? "{key: someKey, " + T.join(": ..., ") + ": ...}" : "{key: someKey}", tt[y + h] || (T = 0 < T.length ? "{" + T.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          h,
+          y,
+          T,
+          y
+        ), tt[y + h] = !0);
+      }
+      if (y = null, f !== void 0 && (s(f), y = "" + f), d(c) && (s(c.key), y = "" + c.key), "key" in c) {
+        f = {};
+        for (var J in c)
+          J !== "key" && (f[J] = c[J]);
+      } else f = c;
+      return y && r(
+        f,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), p(
+        e,
+        y,
+        k,
+        L,
+        a(),
+        f,
+        B,
+        H
+      );
+    }
+    function _(e) {
+      typeof e == "object" && e !== null && e.$$typeof === P && e._store && (e._store.validated = 1);
+    }
+    var A = mt, P = Symbol.for("react.transitional.element"), j = Symbol.for("react.portal"), w = Symbol.for("react.fragment"), M = Symbol.for("react.strict_mode"), v = Symbol.for("react.profiler"), N = Symbol.for("react.consumer"), O = Symbol.for("react.context"), $ = Symbol.for("react.forward_ref"), W = Symbol.for("react.suspense"), F = Symbol.for("react.suspense_list"), D = Symbol.for("react.memo"), m = Symbol.for("react.lazy"), E = Symbol.for("react.activity"), u = Symbol.for("react.client.reference"), S = A.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, g = Object.prototype.hasOwnProperty, dt = Array.isArray, q = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    A = {
+      "react-stack-bottom-frame": function(e) {
+        return e();
+      }
+    };
+    var X, Z = {}, K = A["react-stack-bottom-frame"].bind(
+      A,
+      i
+    )(), Q = q(o(i)), tt = {};
+    V.Fragment = w, V.jsx = function(e, c, f, h, L) {
+      var k = 1e4 > S.recentlyCreatedOwnerStacks++;
+      return l(
+        e,
+        c,
+        f,
+        !1,
+        h,
+        L,
+        k ? Error("react-stack-top-frame") : K,
+        k ? q(o(e)) : Q
+      );
+    }, V.jsxs = function(e, c, f, h, L) {
+      var k = 1e4 > S.recentlyCreatedOwnerStacks++;
+      return l(
+        e,
+        c,
+        f,
+        !0,
+        h,
+        L,
+        k ? Error("react-stack-top-frame") : K,
+        k ? q(o(e)) : Q
+      );
+    };
+  }()), V;
+}
+var nt;
+function yt() {
+  return nt || (nt = 1, process.env.NODE_ENV === "production" ? U.exports = pt() : U.exports = ht()), U.exports;
+}
+var Et = yt();
+const I = "http://www.w3.org/2000/svg", z = 1e3;
+var ct = /* @__PURE__ */ ((t) => (t.BAR = "data-bar", t.LINE = "data-line", t.SET = "data-set", t.RESPONSIVE = "data-responsive", t))(ct || {}), R = /* @__PURE__ */ ((t) => (t.ANIMATION = "animation", t.AREA_COLOR = "areaColor", t.CURVE = "curve", t.DATES = "dates", t.INDICATOR_COLOR = "indicatorColor", t.INDICATOR_WIDTH = "indicatorWidth", t.LINE_COLOR = "lineColor", t.LINE_THICKNESS = "lineThickness", t.NUMBER_LOCALE = "numberLocale", t.NUMBER_ROUNDING = "numberRounding", t.NUMBER_SHOW_ON = "numberShowOn", t.PLOT_COLOR = "plotColor", t.PLOT_RADIUS = "plotRadius", t.SET = "set", t))(R || {});
+function vt(t) {
+  const { width: n, height: s } = t.parentElement.getBoundingClientRect(), o = { width: 300, height: 100 }, a = `0 0 ${n || o.width} ${s || o.height}`, i = document.createElementNS(I, "svg"), d = t.dataset.id;
+  return i.id = d, i.setAttribute("viewBox", a), i.style.width = "100%", i.style.height = "100%", {
+    svg: i,
+    svgId: d,
+    width: n || o.width,
+    height: s || o.height
+  };
+}
+function C(t, n = 0) {
+  return isNaN(t) ? n : t;
+}
+function ot(t) {
+  let n = [];
+  for (let s = 0; s < t.length; s += 1)
+    n.push(`${C(t[s].x)},${C(t[s].y)} `);
+  return n.join(" ").trim();
+}
+function st(t) {
+  if (t.length < 1) return "0,0";
+  const n = t.length - 1, s = [`${C(t[0].x)},${C(t[0].y)}`], o = [], a = [], i = [], d = [];
+  for (let r = 0; r < n; r += 1)
+    o[r] = t[r + 1].x - t[r].x, a[r] = t[r + 1].y - t[r].y, i[r] = a[r] / o[r];
+  d[0] = i[0], d[n] = i[n - 1];
+  for (let r = 1; r < n; r += 1)
+    if (i[r - 1] * i[r] <= 0)
+      d[r] = 0;
+    else {
+      const b = 2 * i[r - 1] * i[r] / (i[r - 1] + i[r]);
+      d[r] = b;
+    }
+  for (let r = 0; r < n; r += 1) {
+    const b = t[r].x, p = t[r].y, l = t[r + 1].x, _ = t[r + 1].y, A = d[r], P = d[r + 1], j = b + (l - b) / 3, w = p + A * (l - b) / 3, M = l - (l - b) / 3, v = _ - P * (l - b) / 3;
+    s.push(`C ${C(j)},${C(w)} ${C(M)},${C(v)} ${C(l)},${C(_)}`);
+  }
+  return s.join(" ");
+}
+function St(t, n = z) {
+  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 ${n}ms ease-in-out`, t.style.strokeDashoffset = "0", t.addEventListener("transitionend", function o() {
+    t.style.transition = "", t.removeEventListener("transitionend", o);
+  });
+}
+function xt(t, n, s = z) {
+  n.style.opacity = "1";
+  const o = n.getBBox(), a = o.width, i = document.createElementNS("http://www.w3.org/2000/svg", "clipPath"), d = "clip-" + Math.random().toString(36).substr(2, 9);
+  i.setAttribute("id", d);
+  const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
+  r.setAttribute("x", o.x.toString()), r.setAttribute("y", o.y.toString()), r.setAttribute("width", "0"), r.setAttribute("height", o.height.toString()), i.appendChild(r);
+  let b = t.querySelector("defs");
+  b || (b = document.createElementNS("http://www.w3.org/2000/svg", "defs"), t.insertBefore(b, t.firstChild)), b.appendChild(i), n.setAttribute("clip-path", `url(#${d})`), r.style.transition = `width ${s}ms ease-out`, r.getBoundingClientRect(), r.setAttribute("width", a.toString()), r.addEventListener("transitionend", function p() {
+    n.removeAttribute("clip-path"), i.parentNode && i.parentNode.removeChild(i), r.removeEventListener("transitionend", p);
+  });
+}
+function Rt() {
+  return document.querySelectorAll(".tiny-spark");
+}
+function ut(t, n) {
+  return Object.keys(t.dataset).includes(n);
+}
+function x(t, n, s) {
+  return ut(t, n) ? t.dataset[n] : s;
+}
+function wt(t, n) {
+  const s = new MutationObserver((o) => {
+    for (const a of o)
+      if (a.type === "attributes" && a.attributeName && Object.values(ct).includes(a.attributeName)) {
+        n();
+        break;
+      }
+  });
+  return s.observe(t, { attributes: !0 }), s;
+}
+function Ot(t) {
+  if (!t) return {
+    color: "#1A1A1A",
+    backgroundColor: "#FFFFFF"
+  };
+  const n = window.getComputedStyle(t), s = n.getPropertyValue("color") || "#1A1A1A", o = n.getPropertyValue("background-color"), a = n.getPropertyValue("background");
+  return { color: s, backgroundColor: o || a || "#FFFFFF" };
+}
+function _t() {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(t) {
+    const n = Math.random() * 16 | 0;
+    return (t == "x" ? n : n & 3 | 8).toString(16);
+  });
+}
+function Nt(t) {
+  const n = t.getAttribute("data-set");
+  if (!n) return [];
+  try {
+    const s = JSON.parse(n);
+    return Array.isArray(s) && s.every((o) => typeof o == "number" || [null, void 0].includes(o)) ? s : (console.warn("data-set is not an array of numbers."), []);
+  } catch (s) {
+    return console.error("Error parsing data-set:", s), [];
+  }
+}
+function kt(t) {
+  const n = t.getAttribute("data-dates");
+  if (!n) return [];
+  try {
+    const s = JSON.parse(n);
+    return Array.isArray(s) && s.every((o) => typeof o == "string") ? s : (console.warn("data-dates is not an array of strings"), []);
+  } catch (s) {
+    return console.error("Error parsing data-dates", s), [];
+  }
+}
+function it(t) {
+  return {
+    min: Math.min(...t),
+    max: Math.max(...t)
+  };
+}
+function lt() {
+  return new Promise((t) => setTimeout(t, 0));
+}
+function Ct(t, n) {
+  const s = String(x(t, R.NUMBER_LOCALE, navigator.language || "en-US")), o = Number(String(x(t, R.NUMBER_ROUNDING, 0)));
+  return n.toLocaleString(s, {
+    useGrouping: !0,
+    minimumFractionDigits: o,
+    maximumFractionDigits: o
+  });
+}
+function At(t, n, s) {
+  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 = n, a.y = s;
+  const i = a.matrixTransform(o);
+  return { x: i.x, y: i.y };
+}
+function at(t, n, s, o, a) {
+  if (Pt(o), !a) return;
+  const { x: i, y: d } = At(t, s.x, s.y), r = document.createElement("div");
+  r.style.opacity = "0", r.classList.add("tiny-spark-tooltip"), r.setAttribute("id", `tooltip_${o}`), r.style.pointerEvents = "none", r.style.position = "fixed", r.style.top = d + "px", r.style.left = i + "px", r.style.width = "fit-content", r.innerHTML = `
+    <div class="tiny-spark-tooltip-content">${s.d ? `${s.d}: ` : ""}${[null, void 0].includes(s.v) ? "-" : Ct(n, Number(s.v))}</div>
+  `, document.body.appendChild(r), lt().then(() => {
+    const { width: b, height: p } = r.getBoundingClientRect();
+    r.style.left = `${i - b / 2}px`, r.style.top = `${d - p - Number(String(Number(x(n, R.PLOT_RADIUS, 3)) * 1.5))}px`;
+  }).then(() => {
+    r.style.opacity = "1";
+  });
+}
+function Pt(t) {
+  const n = document.getElementById(`tooltip_${t}`);
+  n == null || n.remove();
+}
+function $t(t) {
+  t.innerHTML = "";
+}
+function Lt(t, n) {
+  let s = n;
+  $t(t);
+  const { svg: o, svgId: a, width: i, height: d } = vt(t), { color: r, backgroundColor: b } = Ot(t), p = { T: 12, R: 12, B: 12, L: 12 }, l = {
+    left: p.L,
+    top: p.T,
+    width: i - p.L - p.R,
+    height: d - p.T - p.B,
+    bottom: d - p.B
+  }, _ = Nt(t), { min: A } = it(_), P = _.map((m) => [null, void 0].includes(m) ? m : m + (A < 0 ? Math.abs(A) : 0)), { max: j } = it(P), w = l.width / (_.length - 1) === 1 / 0 ? l.width : l.width / (_.length - 1), M = kt(t), v = P.map((m, E) => {
+    const u = {
+      w: P.length === 1 ? w / 2 : 0,
+      h: P.length === 1 ? l.height / 2 : 0
+    };
+    return {
+      y: (1 - (m || 0) / j) * l.height + p.T + u.h,
+      x: l.left + w * E + u.w,
+      v: m,
+      d: M[E] || null
+    };
+  }), N = [...v].filter(({ v: m }) => ![null, void 0].includes(m)), O = document.createElementNS(I, "path");
+  O.classList.add("tiny-spark-line-path"), !t.dataset.curve || t.dataset.curve === "true" ? O.setAttribute("d", `M ${st(N)}`) : O.setAttribute("d", `M ${ot(N)}`), O.setAttribute("fill", "none"), O.setAttribute("stroke", String(x(t, R.LINE_COLOR, r))), O.setAttribute("stroke-width", String(x(t, R.LINE_THICKNESS, 2))), O.setAttribute("stroke-linecap", "round");
+  const $ = document.createElementNS(I, "path");
+  $.classList.add("tiny-spark-line-area");
+  const W = t.getAttribute("data-animation");
+  W === "true" && s && (O.style.opacity = "0", $.style.opacity = "0"), v.length && (!t.dataset.curve || t.dataset.curve === "true" ? $.setAttribute("d", `M ${N[0].x},${l.bottom} ${st(N)} L ${N.at(-1).x},${l.bottom} Z`) : $.setAttribute("d", `M ${N[0].x},${l.bottom} ${ot(N)} L ${N.at(-1).x},${l.bottom} Z`)), $.setAttribute("fill", String(x(t, R.AREA_COLOR, "transparent"))), v.length > 1 && (o.appendChild($), o.appendChild(O));
+  const F = [];
+  v.forEach((m, E) => {
+    const u = document.createElementNS(I, "line");
+    u.classList.add("tiny-spark-indicator"), u.setAttribute("id", `indicator_${a}_${E}`), u.setAttribute("x1", String(l.left + (v.length === 1 ? l.width / 2 : E * w))), u.setAttribute("x2", String(l.left + (v.length === 1 ? l.width / 2 : E * w))), u.setAttribute("y1", String(l.top)), u.setAttribute("y2", String(l.bottom)), u.setAttribute("stroke", String(x(t, R.INDICATOR_COLOR, "#1A1A1A"))), u.setAttribute("stroke-width", String(x(t, R.INDICATOR_WIDTH, "1"))), u.setAttribute("stroke-linecap", "round"), u.style.pointerEvents = "none", u.style.opacity = "0", F.push(u), o.appendChild(u);
+  });
+  let D = [];
+  Number(String(x(t, R.PLOT_RADIUS, 0))) > 0 && v.forEach(({ x: m, y: E, v: u }, S) => {
+    if (![null, void 0].includes(u)) {
+      const g = document.createElementNS(I, "circle");
+      g.classList.add("tiny-spark-datapoint-circle"), g.classList.add(`circle-${a}`), g.setAttribute("id", `circle_${a}_${S}`), g.setAttribute("cx", String(m || 0)), g.setAttribute("cy", String(E || 0)), g.setAttribute("r", String(x(t, R.PLOT_RADIUS, 3))), g.setAttribute("fill", String(x(t, R.PLOT_COLOR, String(x(t, "lineColor", r))))), g.setAttribute("stroke", b), g.style.opacity = "0", g.style.transition = `opacity ${S * (z * 2 / v.length)}ms ease-in`, o.appendChild(g), D.push(g);
+    }
+  }), v.forEach((m, E) => {
+    const u = document.createElementNS(I, "rect");
+    u.classList.add("tiny-spark-tooltip-trap"), u.setAttribute("x", `${v.length === 1 ? 0 : l.left + E * w - w / 2}`), u.setAttribute("y", `${l.top}`), u.setAttribute("height", `${l.height}`), u.setAttribute("width", `${w}`), u.setAttribute("fill", "transparent"), u.addEventListener("mouseenter", () => {
+      at(o, t, m, a, !0);
+      const S = document.getElementById(`circle_${a}_${E}`);
+      S == null || S.setAttribute("r", String(Number(x(t, R.PLOT_RADIUS, 3)) * 1.5)), F[E].style.opacity = "1";
+    }), u.addEventListener("mouseout", () => {
+      at(o, t, m, a, !1);
+      const S = document.getElementById(`circle_${a}_${E}`);
+      S == null || S.setAttribute("r", String(Number(x(t, R.PLOT_RADIUS, 3)))), F.forEach((g) => g.style.opacity = "0");
+    }), o.appendChild(u);
+  }), W === "true" && s ? lt().then(() => {
+    D.forEach((m) => {
+      m.style.opacity = "1";
+    }), St(O), xt(o, $);
+  }) : D.forEach((m) => {
+    m.style.opacity = "1";
+  }), t.appendChild(o);
+}
+function Tt() {
+  const t = Rt();
+  t.length && Array.from(t).forEach((n) => {
+    const s = _t();
+    n.setAttribute("data-id", s);
+    const o = n;
+    It(o), o.__renderCount = 0, G(o), wt(o, () => G(o));
+    const a = new ResizeObserver((d) => {
+      d.forEach(() => G(o));
+    });
+    o.parentElement && a.observe(o.parentElement), new MutationObserver((d) => {
+      d.forEach((r) => {
+        r.type === "attributes" && r.attributeName && r.attributeName.startsWith("data-") && G(o);
+      });
+    }).observe(o, { attributes: !0 });
+  });
+}
+function G(t) {
+  ut(t, "set") && Lt(t, t.__renderCount < 2), t.__renderCount += 1;
+}
+function It(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]"`
+  );
+}
+const Mt = (t) => {
+  const n = bt(null);
+  return gt(() => {
+    n.current && Tt();
+  }, []), /* @__PURE__ */ Et.jsx("div", { ref: n, className: "tiny-spark", ...t });
+};
+export {
+  Mt as TinySparkChart
+};

package/dist/tiny-spark.es.js

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

package/dist/tiny-spark.umd.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tiny-spark",
   "private": false,
-  "version": "0.2.7",
+  "version": "0.2.8-beta.1",
   "type": "module",
   "description": "An elegant, reactive and responsive sparkline chart solution without dependency.",
   "author": "Alec Lloyd Probert",
@@ -21,14 +21,28 @@
   "homepage": "https://tiny-spark.graphieros.com/",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build"
+    "build": "tsc && vite build --config vite.config.core.js && vite build --config vite.config.react.js"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/tiny-spark.es.js",
+      "require": "./dist/tiny-spark.umd.js"
+    },
+    "./react": {
+      "import": "./dist/react/TinySparkChart.js",
+      "default": "./dist/react/TinySparkChart.js"
+    }
   },
   "files": [
     "dist"
   ],
   "devDependencies": {
     "@types/node": "^22.13.13",
+    "@types/react": "^19.0.12",
     "typescript": "~5.7.2",
     "vite": "^6.2.3"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
   }
 }