tiny-spark 0.3.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/tiny-spark.es.js +30 -30
- package/dist/tiny-spark.umd.js +3 -3
- package/package.json +2 -2
package/dist/tiny-spark.es.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
const I = "http://www.w3.org/2000/svg";
|
|
2
2
|
var f = /* @__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))(f || {}), G = /* @__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))(G || {});
|
|
3
3
|
function K(t) {
|
|
4
|
-
const { width: r, height: n } = t.parentElement.getBoundingClientRect(), o = { width: 300, height: 100 }, a = `0 0 ${r || o.width} ${n || o.height}`, i = document.createElementNS(I, "svg"),
|
|
5
|
-
return i.id =
|
|
4
|
+
const { width: r, height: n } = t.parentElement.getBoundingClientRect(), o = { width: 300, height: 100 }, a = `0 0 ${r || o.width} ${n || o.height}`, i = document.createElementNS(I, "svg"), l = t.dataset.id;
|
|
5
|
+
return i.id = l, i.setAttribute("viewBox", a), i.style.width = "100%", i.style.height = "100%", {
|
|
6
6
|
svg: i,
|
|
7
|
-
svgId:
|
|
7
|
+
svgId: l,
|
|
8
8
|
width: r || o.width,
|
|
9
9
|
height: n || o.height
|
|
10
10
|
};
|
|
@@ -20,19 +20,19 @@ function V(t) {
|
|
|
20
20
|
}
|
|
21
21
|
function B(t) {
|
|
22
22
|
if (t.length < 1) return "0,0";
|
|
23
|
-
const r = t.length - 1, n = [`${x(t[0].x)},${x(t[0].y)}`], o = [], a = [], i = [],
|
|
23
|
+
const r = t.length - 1, n = [`${x(t[0].x)},${x(t[0].y)}`], o = [], a = [], i = [], l = [];
|
|
24
24
|
for (let e = 0; e < r; e += 1)
|
|
25
25
|
o[e] = t[e + 1].x - t[e].x, a[e] = t[e + 1].y - t[e].y, i[e] = a[e] / o[e];
|
|
26
|
-
|
|
26
|
+
l[0] = i[0], l[r] = i[r - 1];
|
|
27
27
|
for (let e = 1; e < r; e += 1)
|
|
28
28
|
if (i[e - 1] * i[e] <= 0)
|
|
29
|
-
|
|
29
|
+
l[e] = 0;
|
|
30
30
|
else {
|
|
31
31
|
const g = 2 * i[e - 1] * i[e] / (i[e - 1] + i[e]);
|
|
32
|
-
|
|
32
|
+
l[e] = g;
|
|
33
33
|
}
|
|
34
34
|
for (let e = 0; e < r; e += 1) {
|
|
35
|
-
const g = t[e].x, m = t[e].y, s = t[e + 1].x, N = t[e + 1].y, L =
|
|
35
|
+
const g = t[e].x, m = t[e].y, s = t[e + 1].x, N = t[e + 1].y, L = l[e], v = l[e + 1], R = g + (s - g) / 3, S = m + L * (s - g) / 3, k = s - (s - g) / 3, p = N - v * (s - g) / 3;
|
|
36
36
|
n.push(`C ${x(R)},${x(S)} ${x(k)},${x(p)} ${x(s)},${x(N)}`);
|
|
37
37
|
}
|
|
38
38
|
return n.join(" ");
|
|
@@ -46,12 +46,12 @@ function q(t, r = 1e3) {
|
|
|
46
46
|
}
|
|
47
47
|
function J(t, r, n = 1e3) {
|
|
48
48
|
r.style.opacity = "1";
|
|
49
|
-
const o = r.getBBox(), a = o.width, i = document.createElementNS("http://www.w3.org/2000/svg", "clipPath"),
|
|
50
|
-
i.setAttribute("id",
|
|
49
|
+
const o = r.getBBox(), a = o.width, i = document.createElementNS("http://www.w3.org/2000/svg", "clipPath"), l = "clip-" + Math.random().toString(36).substr(2, 9);
|
|
50
|
+
i.setAttribute("id", l);
|
|
51
51
|
const e = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
|
52
52
|
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);
|
|
53
53
|
let g = t.querySelector("defs");
|
|
54
|
-
g || (g = document.createElementNS("http://www.w3.org/2000/svg", "defs"), t.insertBefore(g, t.firstChild)), g.appendChild(i), r.setAttribute("clip-path", `url(#${
|
|
54
|
+
g || (g = document.createElementNS("http://www.w3.org/2000/svg", "defs"), t.insertBefore(g, t.firstChild)), g.appendChild(i), r.setAttribute("clip-path", `url(#${l})`), e.style.transition = `width ${n}ms ease-out`, e.getBoundingClientRect(), e.setAttribute("width", a.toString()), e.addEventListener("transitionend", function m() {
|
|
55
55
|
r.removeAttribute("clip-path"), i.parentNode && i.parentNode.removeChild(i), e.removeEventListener("transitionend", m);
|
|
56
56
|
});
|
|
57
57
|
}
|
|
@@ -88,7 +88,7 @@ function Z(t) {
|
|
|
88
88
|
return console.error("Error parsing data-set:", n), [];
|
|
89
89
|
}
|
|
90
90
|
}
|
|
91
|
-
function
|
|
91
|
+
function E(t) {
|
|
92
92
|
const r = t.getAttribute("data-dates");
|
|
93
93
|
if (!r) return [];
|
|
94
94
|
try {
|
|
@@ -107,7 +107,7 @@ function D(t) {
|
|
|
107
107
|
function M() {
|
|
108
108
|
return new Promise((t) => setTimeout(t, 0));
|
|
109
109
|
}
|
|
110
|
-
function
|
|
110
|
+
function Q(t, r) {
|
|
111
111
|
const n = String(h(t, f.NUMBER_LOCALE, navigator.language || "en-US")), o = Number(String(h(t, f.NUMBER_ROUNDING, 0)));
|
|
112
112
|
return r.toLocaleString(n, {
|
|
113
113
|
useGrouping: !0,
|
|
@@ -128,12 +128,12 @@ function T(t, r, n) {
|
|
|
128
128
|
}
|
|
129
129
|
function U(t, r, n, o, a) {
|
|
130
130
|
if (tt(o), !a) return;
|
|
131
|
-
const { x: i, y:
|
|
132
|
-
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 =
|
|
133
|
-
<div class="tiny-spark-tooltip-content">${n.d ? `${n.d}: ` : ""}${[null, void 0].includes(n.v) ? "-" :
|
|
131
|
+
const { x: i, y: l } = T(t, n.x, n.y), e = document.createElement("div");
|
|
132
|
+
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 = l + "px", e.style.left = i + "px", e.style.width = "fit-content", e.innerHTML = `
|
|
133
|
+
<div class="tiny-spark-tooltip-content">${n.d ? `${n.d}: ` : ""}${[null, void 0].includes(n.v) ? "-" : Q(r, Number(n.v))}</div>
|
|
134
134
|
`, document.body.appendChild(e), M().then(() => {
|
|
135
135
|
const { width: g, height: m } = e.getBoundingClientRect();
|
|
136
|
-
e.style.left = `${i - g / 2}px`, e.style.top = `${
|
|
136
|
+
e.style.left = `${i - g / 2}px`, e.style.top = `${l - m - Number(String(Number(h(r, f.PLOT_RADIUS, 3)) * 1.5))}px`;
|
|
137
137
|
}).then(() => {
|
|
138
138
|
e.style.opacity = "1";
|
|
139
139
|
});
|
|
@@ -148,13 +148,13 @@ function et(t) {
|
|
|
148
148
|
function nt(t, r) {
|
|
149
149
|
let n = r;
|
|
150
150
|
et(t);
|
|
151
|
-
const { svg: o, svgId: a, width: i, height:
|
|
151
|
+
const { svg: o, svgId: a, width: i, height: l } = K(t), { color: e, backgroundColor: g } = Y(t), m = { T: 12, R: 12, B: 12, L: 12 }, s = {
|
|
152
152
|
left: m.L,
|
|
153
153
|
top: m.T,
|
|
154
154
|
width: i - m.L - m.R,
|
|
155
|
-
height:
|
|
156
|
-
bottom:
|
|
157
|
-
}, N = Z(t), { min: L } = D(N), v = N.map((u) => [null, void 0].includes(u) ? u : u + (L < 0 ? Math.abs(L) : 0)), { max: R } = D(v), S = s.width / (N.length - 1) === 1 / 0 ? s.width : s.width / (N.length - 1), k =
|
|
155
|
+
height: l - m.T - m.B,
|
|
156
|
+
bottom: l - m.B
|
|
157
|
+
}, N = Z(t), { min: L } = D(N), v = N.map((u) => [null, void 0].includes(u) ? u : u + (L < 0 ? Math.abs(L) : 0)), { max: R } = D(v), S = s.width / (N.length - 1) === 1 / 0 ? s.width : s.width / (N.length - 1), k = E(t), p = v.map((u, y) => {
|
|
158
158
|
const d = {
|
|
159
159
|
w: v.length === 1 ? S / 2 : 0,
|
|
160
160
|
h: v.length === 1 ? s.height / 2 : 0
|
|
@@ -180,25 +180,25 @@ function nt(t, r) {
|
|
|
180
180
|
const H = Number(String(h(t, f.PLOT_RADIUS, 0))) > 0, j = !String(h(t, f.HIDE_PLOTS_ABOVE, "")) || p.length <= Number(String(h(t, f.HIDE_PLOTS_ABOVE, 0))), _ = H && j;
|
|
181
181
|
H && p.forEach(({ x: u, y, v: d }, b) => {
|
|
182
182
|
if (![null, void 0].includes(d)) {
|
|
183
|
-
const
|
|
184
|
-
|
|
183
|
+
const c = document.createElementNS(I, "circle");
|
|
184
|
+
c.classList.add("tiny-spark-datapoint-circle"), c.classList.add(`circle-${a}`), c.setAttribute("id", `circle_${a}_${b}`), c.setAttribute("cx", String(u || 0)), c.setAttribute("cy", String(y || 0)), c.setAttribute("r", String(h(t, f.PLOT_RADIUS, 3))), c.setAttribute("fill", String(h(t, f.PLOT_COLOR, String(h(t, "lineColor", e))))), c.setAttribute("stroke", g), c.style.opacity = "0", c.style.transition = `opacity ${b * (1e3 * 2 / p.length)}ms ease-in`, c.style.pointerEvents = "none", $.push(c), _ && o.appendChild(c);
|
|
185
185
|
}
|
|
186
186
|
}), p.forEach((u, y) => {
|
|
187
187
|
const d = $[y], b = document.createElementNS(I, "rect");
|
|
188
188
|
b.classList.add("tiny-spark-tooltip-trap"), b.setAttribute("x", `${p.length === 1 ? 0 : s.left + y * S - S / 2}`), b.setAttribute("y", `${s.top}`), b.setAttribute("height", `${s.height}`), b.setAttribute("width", `${S}`), b.setAttribute("fill", "transparent"), b.addEventListener("mouseenter", () => {
|
|
189
189
|
if (U(o, t, u, a, !0), _) {
|
|
190
|
-
const
|
|
191
|
-
|
|
190
|
+
const c = document.getElementById(`circle_${a}_${y}`);
|
|
191
|
+
c == null || c.setAttribute("r", String(Number(h(t, f.PLOT_RADIUS, 3)) * 1.5));
|
|
192
192
|
} else
|
|
193
193
|
o.appendChild(d);
|
|
194
194
|
P[y].style.opacity = "1";
|
|
195
195
|
}), b.addEventListener("mouseout", () => {
|
|
196
196
|
if (U(o, t, u, a, !1), _) {
|
|
197
|
-
const
|
|
198
|
-
|
|
197
|
+
const c = document.getElementById(`circle_${a}_${y}`);
|
|
198
|
+
c == null || c.setAttribute("r", String(Number(h(t, f.PLOT_RADIUS, 3))));
|
|
199
199
|
} else
|
|
200
200
|
d.remove();
|
|
201
|
-
P.forEach((
|
|
201
|
+
P.forEach((c) => c.style.opacity = "0");
|
|
202
202
|
}), o.appendChild(b);
|
|
203
203
|
}), F === "true" && n ? M().then(() => {
|
|
204
204
|
$.forEach((u) => {
|
|
@@ -221,8 +221,8 @@ function ot() {
|
|
|
221
221
|
i.forEach(() => A(n));
|
|
222
222
|
});
|
|
223
223
|
n.parentElement && o.observe(n.parentElement), new MutationObserver((i) => {
|
|
224
|
-
for (const
|
|
225
|
-
if (
|
|
224
|
+
for (const l of i)
|
|
225
|
+
if (l.type === "attributes" && l.attributeName && Object.values(G).includes(l.attributeName)) {
|
|
226
226
|
A(n);
|
|
227
227
|
break;
|
|
228
228
|
}
|
package/dist/tiny-spark.umd.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
(function(w,O){typeof exports=="object"&&typeof module<"u"?O(exports):typeof define=="function"&&define.amd?define(["exports"],O):(w=typeof globalThis<"u"?globalThis:w||self,O(w.TinySpark={}))})(this,function(w){"use strict";const O="http://www.w3.org/2000/svg";var g=(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))(g||{}),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))(H||{});function K(t){const{width:r,height:n}=t.parentElement.getBoundingClientRect(),o={width:300,height:100},a=`0 0 ${r||o.width} ${n||o.height}`,i=document.createElementNS(O,"svg"),
|
|
2
|
-
<div class="tiny-spark-tooltip-content">${n.d?`${n.d}: `:""}${[null,void 0].includes(n.v)?"-":
|
|
3
|
-
`,document.body.appendChild(e),k().then(()=>{const{width:h,height:y}=e.getBoundingClientRect();e.style.left=`${i-h/2}px`,e.style.top=`${
|
|
1
|
+
(function(w,O){typeof exports=="object"&&typeof module<"u"?O(exports):typeof define=="function"&&define.amd?define(["exports"],O):(w=typeof globalThis<"u"?globalThis:w||self,O(w.TinySpark={}))})(this,function(w){"use strict";const O="http://www.w3.org/2000/svg";var g=(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))(g||{}),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))(H||{});function K(t){const{width:r,height:n}=t.parentElement.getBoundingClientRect(),o={width:300,height:100},a=`0 0 ${r||o.width} ${n||o.height}`,i=document.createElementNS(O,"svg"),l=t.dataset.id;return i.id=l,i.setAttribute("viewBox",a),i.style.width="100%",i.style.height="100%",{svg:i,svgId:l,width:r||o.width,height:n||o.height}}function x(t,r=0){return isNaN(t)?r:t}function V(t){let r=[];for(let n=0;n<t.length;n+=1)r.push(`${x(t[n].x)},${x(t[n].y)} `);return r.join(" ").trim()}function B(t){if(t.length<1)return"0,0";const r=t.length-1,n=[`${x(t[0].x)},${x(t[0].y)}`],o=[],a=[],i=[],l=[];for(let e=0;e<r;e+=1)o[e]=t[e+1].x-t[e].x,a[e]=t[e+1].y-t[e].y,i[e]=a[e]/o[e];l[0]=i[0],l[r]=i[r-1];for(let e=1;e<r;e+=1)if(i[e-1]*i[e]<=0)l[e]=0;else{const h=2*i[e-1]*i[e]/(i[e-1]+i[e]);l[e]=h}for(let e=0;e<r;e+=1){const h=t[e].x,y=t[e].y,s=t[e+1].x,v=t[e+1].y,$=l[e],L=l[e+1],_=h+(s-h)/3,C=y+$*(s-h)/3,A=s-(s-h)/3,p=v-L*(s-h)/3;n.push(`C ${x(_)},${x(C)} ${x(A)},${x(p)} ${x(s)},${x(v)}`)}return n.join(" ")}function q(t,r=1e3){t.style.opacity="1";const n=t.getTotalLength();t.style.strokeDasharray=String(n),t.style.strokeDashoffset=String(n),t.getBoundingClientRect(),t.style.transition=`stroke-dashoffset ${r}ms ease-in-out`,t.style.strokeDashoffset="0",t.addEventListener("transitionend",function o(){t.style.transition="",t.removeEventListener("transitionend",o)})}function J(t,r,n=1e3){r.style.opacity="1";const o=r.getBBox(),a=o.width,i=document.createElementNS("http://www.w3.org/2000/svg","clipPath"),l="clip-"+Math.random().toString(36).substr(2,9);i.setAttribute("id",l);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 h=t.querySelector("defs");h||(h=document.createElementNS("http://www.w3.org/2000/svg","defs"),t.insertBefore(h,t.firstChild)),h.appendChild(i),r.setAttribute("clip-path",`url(#${l})`),e.style.transition=`width ${n}ms ease-out`,e.getBoundingClientRect(),e.setAttribute("width",a.toString()),e.addEventListener("transitionend",function y(){r.removeAttribute("clip-path"),i.parentNode&&i.parentNode.removeChild(i),e.removeEventListener("transitionend",y)})}function X(){return document.querySelectorAll(".tiny-spark")}function D(t,r){return Object.keys(t.dataset).includes(r)}function f(t,r,n){return D(t,r)?t.dataset[r]:n}function Y(t){if(!t)return{color:"#1A1A1A",backgroundColor:"#FFFFFF"};const r=window.getComputedStyle(t),n=r.getPropertyValue("color")||"#1A1A1A",o=r.getPropertyValue("background-color"),a=r.getPropertyValue("background");return{color:n,backgroundColor:o||a||"#FFFFFF"}}function z(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(t){const r=Math.random()*16|0;return(t=="x"?r:r&3|8).toString(16)})}function Z(t){const r=t.getAttribute("data-set");if(!r)return[];try{const n=JSON.parse(r);return Array.isArray(n)&&n.every(o=>typeof o=="number"||[null,void 0].includes(o))?n:(console.warn("data-set is not an array of numbers."),[])}catch(n){return console.error("Error parsing data-set:",n),[]}}function E(t){const r=t.getAttribute("data-dates");if(!r)return[];try{const n=JSON.parse(r);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 U(t){return{min:Math.min(...t),max:Math.max(...t)}}function k(){return new Promise(t=>setTimeout(t,0))}function Q(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:o,maximumFractionDigits:o})}function T(t,r,n){if(!t.createSVGPoint||!t.getScreenCTM)throw new Error("Your browser does not support SVG coordinate transformation.");const o=t.getScreenCTM();if(!o)throw new Error("Cannot obtain the screen CTM.");const a=t.createSVGPoint();a.x=r,a.y=n;const i=a.matrixTransform(o);return{x:i.x,y:i.y}}function G(t,r,n,o,a){if(tt(o),!a)return;const{x:i,y:l}=T(t,n.x,n.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=l+"px",e.style.left=i+"px",e.style.width="fit-content",e.innerHTML=`
|
|
2
|
+
<div class="tiny-spark-tooltip-content">${n.d?`${n.d}: `:""}${[null,void 0].includes(n.v)?"-":Q(r,Number(n.v))}</div>
|
|
3
|
+
`,document.body.appendChild(e),k().then(()=>{const{width:h,height:y}=e.getBoundingClientRect();e.style.left=`${i-h/2}px`,e.style.top=`${l-y-Number(String(Number(f(r,g.PLOT_RADIUS,3))*1.5))}px`}).then(()=>{e.style.opacity="1"})}function tt(t){const r=document.getElementById(`tooltip_${t}`);r==null||r.remove()}function et(t){t.innerHTML=""}function nt(t,r){let n=r;et(t);const{svg:o,svgId:a,width:i,height:l}=K(t),{color:e,backgroundColor:h}=Y(t),y={T:12,R:12,B:12,L:12},s={left:y.L,top:y.T,width:i-y.L-y.R,height:l-y.T-y.B,bottom:l-y.B},v=Z(t),{min:$}=U(v),L=v.map(u=>[null,void 0].includes(u)?u:u+($<0?Math.abs($):0)),{max:_}=U(L),C=s.width/(v.length-1)===1/0?s.width:s.width/(v.length-1),A=E(t),p=L.map((u,m)=>{const d={w:L.length===1?C/2:0,h:L.length===1?s.height/2:0};return{y:(1-(u||0)/_)*s.height+y.T+d.h,x:s.left+C*m+d.w,v:u,d:A[m]||null}}),N=[...p].filter(({v:u})=>![null,void 0].includes(u)),S=document.createElementNS(O,"path");S.classList.add("tiny-spark-line-path"),!t.dataset.curve||t.dataset.curve==="true"?S.setAttribute("d",`M ${B(N)}`):S.setAttribute("d",`M ${V(N)}`),S.setAttribute("fill","none"),S.setAttribute("stroke",String(f(t,g.LINE_COLOR,e))),S.setAttribute("stroke-width",String(f(t,g.LINE_THICKNESS,2))),S.setAttribute("stroke-linecap","round");const I=document.createElementNS(O,"path");I.classList.add("tiny-spark-line-area");const W=t.getAttribute("data-animation");W==="true"&&n&&(S.style.opacity="0",I.style.opacity="0"),p.length&&(!t.dataset.curve||t.dataset.curve==="true"?I.setAttribute("d",`M ${N[0].x},${s.bottom} ${B(N)} L ${N.at(-1).x},${s.bottom} Z`):I.setAttribute("d",`M ${N[0].x},${s.bottom} ${V(N)} L ${N.at(-1).x},${s.bottom} Z`)),I.setAttribute("fill",String(f(t,g.AREA_COLOR,"transparent"))),p.length>1&&(o.appendChild(I),o.appendChild(S));const M=[];p.forEach((u,m)=>{const d=document.createElementNS(O,"line");d.classList.add("tiny-spark-indicator"),d.setAttribute("id",`indicator_${a}_${m}`),d.setAttribute("x1",String(s.left+(p.length===1?s.width/2:m*C))),d.setAttribute("x2",String(s.left+(p.length===1?s.width/2:m*C))),d.setAttribute("y1",String(s.top)),d.setAttribute("y2",String(s.bottom)),d.setAttribute("stroke",String(f(t,g.INDICATOR_COLOR,"#1A1A1A"))),d.setAttribute("stroke-width",String(f(t,g.INDICATOR_WIDTH,"1"))),d.setAttribute("stroke-linecap","round"),d.style.pointerEvents="none",d.style.opacity="0",M.push(d),o.appendChild(d)});let R=[];const j=Number(String(f(t,g.PLOT_RADIUS,0)))>0,st=!String(f(t,g.HIDE_PLOTS_ABOVE,""))||p.length<=Number(String(f(t,g.HIDE_PLOTS_ABOVE,0))),F=j&&st;j&&p.forEach(({x:u,y:m,v:d},b)=>{if(![null,void 0].includes(d)){const c=document.createElementNS(O,"circle");c.classList.add("tiny-spark-datapoint-circle"),c.classList.add(`circle-${a}`),c.setAttribute("id",`circle_${a}_${b}`),c.setAttribute("cx",String(u||0)),c.setAttribute("cy",String(m||0)),c.setAttribute("r",String(f(t,g.PLOT_RADIUS,3))),c.setAttribute("fill",String(f(t,g.PLOT_COLOR,String(f(t,"lineColor",e))))),c.setAttribute("stroke",h),c.style.opacity="0",c.style.transition=`opacity ${b*(1e3*2/p.length)}ms ease-in`,c.style.pointerEvents="none",R.push(c),F&&o.appendChild(c)}}),p.forEach((u,m)=>{const d=R[m],b=document.createElementNS(O,"rect");b.classList.add("tiny-spark-tooltip-trap"),b.setAttribute("x",`${p.length===1?0:s.left+m*C-C/2}`),b.setAttribute("y",`${s.top}`),b.setAttribute("height",`${s.height}`),b.setAttribute("width",`${C}`),b.setAttribute("fill","transparent"),b.addEventListener("mouseenter",()=>{if(G(o,t,u,a,!0),F){const c=document.getElementById(`circle_${a}_${m}`);c==null||c.setAttribute("r",String(Number(f(t,g.PLOT_RADIUS,3))*1.5))}else o.appendChild(d);M[m].style.opacity="1"}),b.addEventListener("mouseout",()=>{if(G(o,t,u,a,!1),F){const c=document.getElementById(`circle_${a}_${m}`);c==null||c.setAttribute("r",String(Number(f(t,g.PLOT_RADIUS,3))))}else d.remove();M.forEach(c=>c.style.opacity="0")}),o.appendChild(b)}),W==="true"&&n?k().then(()=>{R.forEach(u=>{u.style.opacity="1"}),q(S),J(o,I)}):R.forEach(u=>{u.style.opacity="1"}),t.appendChild(o)}function rt(){const t=X();t.length&&Array.from(t).forEach(r=>{if(!r.dataset.id){const o=z();r.setAttribute("data-id",o)}const n=r;ot(n),n.__renderCount=0,P(n),k().then(()=>{const o=new ResizeObserver(i=>{i.forEach(()=>P(n))});n.parentElement&&o.observe(n.parentElement),new MutationObserver(i=>{for(const l of i)if(l.type==="attributes"&&l.attributeName&&Object.values(H).includes(l.attributeName)){P(n);break}}).observe(n,{attributes:!0})})})}function P(t){D(t,"set")&&nt(t,t.__renderCount<2),t.__renderCount+=1}function ot(t){t.dataset.set||console.error(`Tiny-spark exception:
|
|
4
4
|
|
|
5
5
|
[data-set] data attribute is missing.
|
|
6
6
|
Provide an array of numbers, for example:
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "tiny-spark",
|
|
3
3
|
"private": false,
|
|
4
|
-
"version": "0.3.
|
|
4
|
+
"version": "0.3.1",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"description": "An elegant, reactive and responsive sparkline chart solution without dependency.",
|
|
7
7
|
"author": "Alec Lloyd Probert",
|
|
@@ -30,6 +30,6 @@
|
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"@types/node": "^22.13.13",
|
|
32
32
|
"typescript": "~5.7.2",
|
|
33
|
-
"vite": "^6.2.
|
|
33
|
+
"vite": "^6.2.6"
|
|
34
34
|
}
|
|
35
35
|
}
|