tiny-spark 0.2.1 → 0.2.2
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 +44 -45
- package/dist/tiny-spark.umd.js +4 -4
- package/package.json +1 -1
package/dist/tiny-spark.es.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
const L = "http://www.w3.org/2000/svg";
|
|
2
|
-
var
|
|
3
|
-
function
|
|
4
|
-
const { width: r, height: e } = t.parentElement.getBoundingClientRect(), o = { width: 300, height: 100 }, a = `0 0 ${r || o.width} ${e || o.height}`, i = document.createElementNS(L, "svg"), u =
|
|
2
|
+
var V = /* @__PURE__ */ ((t) => (t.BAR = "data-bar", t.LINE = "data-line", t.SET = "data-set", t.RESPONSIVE = "data-responsive", t))(V || {}), b = /* @__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))(b || {});
|
|
3
|
+
function G(t) {
|
|
4
|
+
const { width: r, height: e } = t.parentElement.getBoundingClientRect(), o = { width: 300, height: 100 }, a = `0 0 ${r || o.width} ${e || o.height}`, i = document.createElementNS(L, "svg"), u = X();
|
|
5
5
|
return i.id = u, i.setAttribute("viewBox", a), i.style.width = "100%", i.style.height = "100%", {
|
|
6
6
|
svg: i,
|
|
7
7
|
svgId: u,
|
|
@@ -32,19 +32,19 @@ function P(t) {
|
|
|
32
32
|
u[n] = d;
|
|
33
33
|
}
|
|
34
34
|
for (let n = 0; n < r; n += 1) {
|
|
35
|
-
const d = t[n].x, g = t[n].y, c = t[n + 1].x,
|
|
36
|
-
e.push(`C ${S(
|
|
35
|
+
const d = t[n].x, g = t[n].y, c = t[n + 1].x, C = t[n + 1].y, $ = u[n], O = u[n + 1], E = d + (c - d) / 3, N = g + $ * (c - d) / 3, k = c - (c - d) / 3, m = C - O * (c - d) / 3;
|
|
36
|
+
e.push(`C ${S(E)},${S(N)} ${S(k)},${S(m)} ${S(c)},${S(C)}`);
|
|
37
37
|
}
|
|
38
38
|
return e.join(" ");
|
|
39
39
|
}
|
|
40
|
-
function
|
|
40
|
+
function U(t, r = 1e3) {
|
|
41
41
|
t.style.opacity = "1";
|
|
42
42
|
const e = t.getTotalLength();
|
|
43
43
|
t.style.strokeDasharray = String(e), t.style.strokeDashoffset = String(e), t.getBoundingClientRect(), t.style.transition = `stroke-dashoffset ${r}ms ease-in-out`, t.style.strokeDashoffset = "0", t.addEventListener("transitionend", function o() {
|
|
44
44
|
t.style.transition = "", t.removeEventListener("transitionend", o);
|
|
45
45
|
});
|
|
46
46
|
}
|
|
47
|
-
function
|
|
47
|
+
function W(t, r, e = 1e3) {
|
|
48
48
|
r.style.opacity = "1";
|
|
49
49
|
const o = r.getBBox(), a = o.width, i = document.createElementNS("http://www.w3.org/2000/svg", "clipPath"), u = "clip-" + Math.random().toString(36).substr(2, 9);
|
|
50
50
|
i.setAttribute("id", u);
|
|
@@ -55,26 +55,26 @@ function j(t, r, e = 1e3) {
|
|
|
55
55
|
r.removeAttribute("clip-path"), i.parentNode && i.parentNode.removeChild(i), n.removeEventListener("transitionend", g);
|
|
56
56
|
});
|
|
57
57
|
}
|
|
58
|
-
function
|
|
58
|
+
function j() {
|
|
59
59
|
return document.querySelectorAll(".tiny-spark");
|
|
60
60
|
}
|
|
61
|
-
function
|
|
61
|
+
function B(t, r) {
|
|
62
62
|
return Object.keys(t.dataset).includes(r);
|
|
63
63
|
}
|
|
64
64
|
function h(t, r, e) {
|
|
65
|
-
return
|
|
65
|
+
return B(t, r) ? t.dataset[r] : e;
|
|
66
66
|
}
|
|
67
|
-
function
|
|
67
|
+
function q(t, r) {
|
|
68
68
|
const e = new MutationObserver((o) => {
|
|
69
69
|
for (const a of o)
|
|
70
|
-
if (a.type === "attributes" && a.attributeName && Object.values(
|
|
70
|
+
if (a.type === "attributes" && a.attributeName && Object.values(V).includes(a.attributeName)) {
|
|
71
71
|
r();
|
|
72
72
|
break;
|
|
73
73
|
}
|
|
74
74
|
});
|
|
75
75
|
return e.observe(t, { attributes: !0 }), e;
|
|
76
76
|
}
|
|
77
|
-
function
|
|
77
|
+
function K(t) {
|
|
78
78
|
if (!t) return {
|
|
79
79
|
color: "#1A1A1A",
|
|
80
80
|
backgroundColor: "#FFFFFF"
|
|
@@ -82,13 +82,13 @@ function X(t) {
|
|
|
82
82
|
const r = window.getComputedStyle(t), e = r.getPropertyValue("color") || "#1A1A1A", o = r.getPropertyValue("background-color"), a = r.getPropertyValue("background");
|
|
83
83
|
return { color: e, backgroundColor: o || a || "#FFFFFF" };
|
|
84
84
|
}
|
|
85
|
-
function
|
|
85
|
+
function X() {
|
|
86
86
|
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(t) {
|
|
87
87
|
const r = Math.random() * 16 | 0;
|
|
88
88
|
return (t == "x" ? r : r & 3 | 8).toString(16);
|
|
89
89
|
});
|
|
90
90
|
}
|
|
91
|
-
function
|
|
91
|
+
function Y(t) {
|
|
92
92
|
const r = t.getAttribute("data-set");
|
|
93
93
|
if (!r) return [];
|
|
94
94
|
try {
|
|
@@ -98,7 +98,7 @@ function z(t) {
|
|
|
98
98
|
return console.error("Error parsing data-set:", e), [];
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
|
-
function
|
|
101
|
+
function z(t) {
|
|
102
102
|
const r = t.getAttribute("data-dates");
|
|
103
103
|
if (!r) return [];
|
|
104
104
|
try {
|
|
@@ -114,10 +114,10 @@ function D(t) {
|
|
|
114
114
|
max: Math.max(...t)
|
|
115
115
|
};
|
|
116
116
|
}
|
|
117
|
-
function
|
|
117
|
+
function H() {
|
|
118
118
|
return new Promise((t) => setTimeout(t, 0));
|
|
119
119
|
}
|
|
120
|
-
function
|
|
120
|
+
function J(t, r) {
|
|
121
121
|
const e = String(h(t, b.NUMBER_LOCALE, navigator.language || "en-US")), o = Number(String(h(t, b.NUMBER_ROUNDING, 0)));
|
|
122
122
|
return r.toLocaleString(e, {
|
|
123
123
|
useGrouping: !0,
|
|
@@ -125,7 +125,7 @@ function Z(t, r) {
|
|
|
125
125
|
maximumFractionDigits: o
|
|
126
126
|
});
|
|
127
127
|
}
|
|
128
|
-
function
|
|
128
|
+
function Z(t, r, e) {
|
|
129
129
|
if (!t.createSVGPoint || !t.getScreenCTM)
|
|
130
130
|
throw new Error("Your browser does not support SVG coordinate transformation.");
|
|
131
131
|
const o = t.getScreenCTM();
|
|
@@ -137,48 +137,48 @@ function Q(t, r, e) {
|
|
|
137
137
|
return { x: i.x, y: i.y };
|
|
138
138
|
}
|
|
139
139
|
function F(t, r, e, o, a) {
|
|
140
|
-
if (
|
|
141
|
-
const { x: i, y: u } =
|
|
140
|
+
if (Q(o), !a) return;
|
|
141
|
+
const { x: i, y: u } = Z(t, e.x, e.y), n = document.createElement("div");
|
|
142
142
|
n.classList.add("tiny-spark-tooltip"), n.setAttribute("id", `tooltip_${o}`), n.style.pointerEvents = "none", n.style.position = "fixed", n.style.top = u + "px", n.style.left = i + "px", n.style.width = "fit-content", n.innerHTML = `
|
|
143
|
-
<div class="tiny-spark-tooltip-content">${e.d ? `${e.d}: ` : ""}${[null, void 0].includes(e.v) ? "-" :
|
|
144
|
-
`, document.body.appendChild(n),
|
|
143
|
+
<div class="tiny-spark-tooltip-content">${e.d ? `${e.d}: ` : ""}${[null, void 0].includes(e.v) ? "-" : J(r, Number(e.v))}</div>
|
|
144
|
+
`, document.body.appendChild(n), H().then(() => {
|
|
145
145
|
const { width: d, height: g } = n.getBoundingClientRect();
|
|
146
146
|
n.style.left = `${i - d / 2}px`, n.style.top = `${u - g - Number(String(Number(h(r, b.PLOT_RADIUS, 3)) * 1.5))}px`;
|
|
147
147
|
});
|
|
148
148
|
}
|
|
149
|
-
function
|
|
149
|
+
function Q(t) {
|
|
150
150
|
const r = document.getElementById(`tooltip_${t}`);
|
|
151
151
|
r == null || r.remove();
|
|
152
152
|
}
|
|
153
|
-
function
|
|
153
|
+
function T(t) {
|
|
154
154
|
t.innerHTML = "";
|
|
155
155
|
}
|
|
156
|
-
function
|
|
156
|
+
function tt(t, r) {
|
|
157
157
|
let e = r;
|
|
158
|
-
|
|
159
|
-
const { svg: o, svgId: a, width: i, height: u } =
|
|
158
|
+
T(t);
|
|
159
|
+
const { svg: o, svgId: a, width: i, height: u } = G(t), { color: n, backgroundColor: d } = K(t), g = { T: 12, R: 12, B: 12, L: 12 }, c = {
|
|
160
160
|
left: g.L,
|
|
161
161
|
top: g.T,
|
|
162
162
|
width: i - g.L - g.R,
|
|
163
163
|
height: u - g.T - g.B,
|
|
164
164
|
bottom: u - g.B
|
|
165
|
-
},
|
|
165
|
+
}, C = Y(t), { min: $ } = D(C), O = C.map((l) => [null, void 0].includes(l) ? l : l + ($ < 0 ? Math.abs($) : 0)), { max: E } = D(O), N = c.width / (C.length - 1) === 1 / 0 ? c.width : c.width / (C.length - 1), k = z(t), m = O.map((l, y) => {
|
|
166
166
|
const s = {
|
|
167
167
|
w: O.length === 1 ? N / 2 : 0,
|
|
168
168
|
h: O.length === 1 ? c.height / 2 : 0
|
|
169
169
|
};
|
|
170
170
|
return {
|
|
171
|
-
y: (1 - (l || 0) /
|
|
171
|
+
y: (1 - (l || 0) / E) * c.height + g.T + s.h,
|
|
172
172
|
x: c.left + N * y + s.w,
|
|
173
173
|
v: l,
|
|
174
174
|
d: k[y] || null
|
|
175
175
|
};
|
|
176
176
|
}), v = [...m].filter(({ v: l }) => ![null, void 0].includes(l)), p = document.createElementNS(L, "path");
|
|
177
177
|
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(h(t, b.LINE_COLOR, n))), p.setAttribute("stroke-width", String(h(t, b.LINE_THICKNESS, 2))), p.setAttribute("stroke-linecap", "round");
|
|
178
|
-
const
|
|
179
|
-
|
|
178
|
+
const w = document.createElementNS(L, "path");
|
|
179
|
+
w.classList.add("tiny-spark-line-area");
|
|
180
180
|
const _ = t.getAttribute("data-animation");
|
|
181
|
-
_ === "true" && e && (p.style.opacity = "0",
|
|
181
|
+
_ === "true" && e && (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(h(t, b.AREA_COLOR, "transparent"))), m.length > 1 && (o.appendChild(w), o.appendChild(p));
|
|
182
182
|
const I = [];
|
|
183
183
|
m.forEach((l, y) => {
|
|
184
184
|
const s = document.createElementNS(L, "line");
|
|
@@ -201,33 +201,33 @@ function et(t, r) {
|
|
|
201
201
|
const x = document.getElementById(`circle_${a}_${y}`);
|
|
202
202
|
x == null || x.setAttribute("r", String(Number(h(t, b.PLOT_RADIUS, 3)))), I.forEach((f) => f.style.opacity = "0");
|
|
203
203
|
}), o.appendChild(s);
|
|
204
|
-
}), _ === "true" && e ?
|
|
204
|
+
}), _ === "true" && e ? H().then(() => {
|
|
205
205
|
R.forEach((l) => {
|
|
206
206
|
l.style.opacity = "1";
|
|
207
|
-
}),
|
|
207
|
+
}), U(p), W(o, w);
|
|
208
208
|
}) : R.forEach((l) => {
|
|
209
209
|
l.style.opacity = "1";
|
|
210
210
|
}), t.appendChild(o);
|
|
211
211
|
}
|
|
212
|
-
function
|
|
213
|
-
const t =
|
|
212
|
+
function nt() {
|
|
213
|
+
const t = j();
|
|
214
214
|
t.length && Array.from(t).forEach((r) => {
|
|
215
215
|
const e = r;
|
|
216
|
-
|
|
216
|
+
et(e), e.__renderCount = 0, A(e), q(e, () => A(e));
|
|
217
217
|
const o = new ResizeObserver((i) => {
|
|
218
|
-
i.forEach(() =>
|
|
218
|
+
i.forEach(() => A(e));
|
|
219
219
|
});
|
|
220
220
|
e.parentElement && o.observe(e.parentElement), new MutationObserver((i) => {
|
|
221
221
|
i.forEach((u) => {
|
|
222
|
-
u.type === "attributes" && u.attributeName && u.attributeName.startsWith("data-") &&
|
|
222
|
+
u.type === "attributes" && u.attributeName && u.attributeName.startsWith("data-") && A(e);
|
|
223
223
|
});
|
|
224
224
|
}).observe(e, { attributes: !0 });
|
|
225
225
|
});
|
|
226
226
|
}
|
|
227
|
-
function
|
|
228
|
-
|
|
227
|
+
function A(t) {
|
|
228
|
+
B(t, "set") && tt(t, t.__renderCount < 2), t.__renderCount += 1;
|
|
229
229
|
}
|
|
230
|
-
function
|
|
230
|
+
function et(t) {
|
|
231
231
|
t.dataset.set || console.error(
|
|
232
232
|
`Tiny-spark exception:
|
|
233
233
|
|
|
@@ -237,7 +237,6 @@ Provide an array of numbers, for example:
|
|
|
237
237
|
data-set="[1, 2, 3]"`
|
|
238
238
|
);
|
|
239
239
|
}
|
|
240
|
-
document.readyState === "loading" ? window.addEventListener("load", V) : V();
|
|
241
240
|
export {
|
|
242
|
-
|
|
241
|
+
nt as render
|
|
243
242
|
};
|
package/dist/tiny-spark.umd.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
(function(L,m){typeof exports=="object"&&typeof module<"u"?m(exports):typeof define=="function"&&define.amd?define(["exports"],m):(L=typeof globalThis<"u"?globalThis:L||self,m(L.TinySpark={}))})(this,function(L){"use strict";const m="http://www.w3.org/2000/svg";var
|
|
2
|
-
<div class="tiny-spark-tooltip-content">${e.d?`${e.d}: `:""}${[null,void 0].includes(e.v)?"-":
|
|
3
|
-
`,document.body.appendChild(n),
|
|
1
|
+
(function(L,m){typeof exports=="object"&&typeof module<"u"?m(exports):typeof define=="function"&&define.amd?define(["exports"],m):(L=typeof globalThis<"u"?globalThis:L||self,m(L.TinySpark={}))})(this,function(L){"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:r,height:e}=t.parentElement.getBoundingClientRect(),o={width:300,height:100},a=`0 0 ${r||o.width} ${e||o.height}`,i=document.createElementNS(m,"svg"),u=Y();return i.id=u,i.setAttribute("viewBox",a),i.style.width="100%",i.style.height="100%",{svg:i,svgId:u,width:r||o.width,height:e||o.height}}function x(t,r=0){return isNaN(t)?r:t}function P(t){let r=[];for(let e=0;e<t.length;e+=1)r.push(`${x(t[e].x)},${x(t[e].y)} `);return r.join(" ").trim()}function D(t){if(t.length<1)return"0,0";const r=t.length-1,e=[`${x(t[0].x)},${x(t[0].y)}`],o=[],a=[],i=[],u=[];for(let n=0;n<r;n+=1)o[n]=t[n+1].x-t[n].x,a[n]=t[n+1].y-t[n].y,i[n]=a[n]/o[n];u[0]=i[0],u[r]=i[r-1];for(let n=1;n<r;n+=1)if(i[n-1]*i[n]<=0)u[n]=0;else{const d=2*i[n-1]*i[n]/(i[n-1]+i[n]);u[n]=d}for(let n=0;n<r;n+=1){const d=t[n].x,h=t[n].y,c=t[n+1].x,w=t[n+1].y,E=u[n],$=u[n+1],k=d+(c-d)/3,v=h+E*(c-d)/3,I=c-(c-d)/3,p=w-$*(c-d)/3;e.push(`C ${x(k)},${x(v)} ${x(I)},${x(p)} ${x(c)},${x(w)}`)}return e.join(" ")}function j(t,r=1e3){t.style.opacity="1";const e=t.getTotalLength();t.style.strokeDasharray=String(e),t.style.strokeDashoffset=String(e),t.getBoundingClientRect(),t.style.transition=`stroke-dashoffset ${r}ms ease-in-out`,t.style.strokeDashoffset="0",t.addEventListener("transitionend",function o(){t.style.transition="",t.removeEventListener("transitionend",o)})}function W(t,r,e=1e3){r.style.opacity="1";const o=r.getBBox(),a=o.width,i=document.createElementNS("http://www.w3.org/2000/svg","clipPath"),u="clip-"+Math.random().toString(36).substr(2,9);i.setAttribute("id",u);const n=document.createElementNS("http://www.w3.org/2000/svg","rect");n.setAttribute("x",o.x.toString()),n.setAttribute("y",o.y.toString()),n.setAttribute("width","0"),n.setAttribute("height",o.height.toString()),i.appendChild(n);let d=t.querySelector("defs");d||(d=document.createElementNS("http://www.w3.org/2000/svg","defs"),t.insertBefore(d,t.firstChild)),d.appendChild(i),r.setAttribute("clip-path",`url(#${u})`),n.style.transition=`width ${e}ms ease-out`,n.getBoundingClientRect(),n.setAttribute("width",a.toString()),n.addEventListener("transitionend",function h(){r.removeAttribute("clip-path"),i.parentNode&&i.parentNode.removeChild(i),n.removeEventListener("transitionend",h)})}function q(){return document.querySelectorAll(".tiny-spark")}function F(t,r){return Object.keys(t.dataset).includes(r)}function f(t,r,e){return F(t,r)?t.dataset[r]:e}function K(t,r){const e=new MutationObserver(o=>{for(const a of o)if(a.type==="attributes"&&a.attributeName&&Object.values(_).includes(a.attributeName)){r();break}});return e.observe(t,{attributes:!0}),e}function X(t){if(!t)return{color:"#1A1A1A",backgroundColor:"#FFFFFF"};const r=window.getComputedStyle(t),e=r.getPropertyValue("color")||"#1A1A1A",o=r.getPropertyValue("background-color"),a=r.getPropertyValue("background");return{color:e,backgroundColor:o||a||"#FFFFFF"}}function Y(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(t){const r=Math.random()*16|0;return(t=="x"?r:r&3|8).toString(16)})}function z(t){const r=t.getAttribute("data-set");if(!r)return[];try{const e=JSON.parse(r);return Array.isArray(e)&&e.every(o=>typeof o=="number"||[null,void 0].includes(o))?e:(console.warn("data-set is not an array of numbers."),[])}catch(e){return console.error("Error parsing data-set:",e),[]}}function J(t){const r=t.getAttribute("data-dates");if(!r)return[];try{const e=JSON.parse(r);return Array.isArray(e)&&e.every(o=>typeof o=="string")?e:(console.warn("data-dates is not an array of strings"),[])}catch(e){return console.error("Error parsing data-dates",e),[]}}function V(t){return{min:Math.min(...t),max:Math.max(...t)}}function B(){return new Promise(t=>setTimeout(t,0))}function Z(t,r){const e=String(f(t,g.NUMBER_LOCALE,navigator.language||"en-US")),o=Number(String(f(t,g.NUMBER_ROUNDING,0)));return r.toLocaleString(e,{useGrouping:!0,minimumFractionDigits:o,maximumFractionDigits:o})}function Q(t,r,e){if(!t.createSVGPoint||!t.getScreenCTM)throw new Error("Your browser does not support SVG coordinate transformation.");const o=t.getScreenCTM();if(!o)throw new Error("Cannot obtain the screen CTM.");const a=t.createSVGPoint();a.x=r,a.y=e;const i=a.matrixTransform(o);return{x:i.x,y:i.y}}function H(t,r,e,o,a){if(T(o),!a)return;const{x:i,y:u}=Q(t,e.x,e.y),n=document.createElement("div");n.classList.add("tiny-spark-tooltip"),n.setAttribute("id",`tooltip_${o}`),n.style.pointerEvents="none",n.style.position="fixed",n.style.top=u+"px",n.style.left=i+"px",n.style.width="fit-content",n.innerHTML=`
|
|
2
|
+
<div class="tiny-spark-tooltip-content">${e.d?`${e.d}: `:""}${[null,void 0].includes(e.v)?"-":Z(r,Number(e.v))}</div>
|
|
3
|
+
`,document.body.appendChild(n),B().then(()=>{const{width:d,height:h}=n.getBoundingClientRect();n.style.left=`${i-d/2}px`,n.style.top=`${u-h-Number(String(Number(f(r,g.PLOT_RADIUS,3))*1.5))}px`})}function T(t){const r=document.getElementById(`tooltip_${t}`);r==null||r.remove()}function tt(t){t.innerHTML=""}function et(t,r){let e=r;tt(t);const{svg:o,svgId:a,width:i,height:u}=U(t),{color:n,backgroundColor:d}=X(t),h={T:12,R:12,B:12,L:12},c={left:h.L,top:h.T,width:i-h.L-h.R,height:u-h.T-h.B,bottom:u-h.B},w=z(t),{min:E}=V(w),$=w.map(l=>[null,void 0].includes(l)?l:l+(E<0?Math.abs(E):0)),{max:k}=V($),v=c.width/(w.length-1)===1/0?c.width:c.width/(w.length-1),I=J(t),p=$.map((l,y)=>{const s={w:$.length===1?v/2:0,h:$.length===1?c.height/2:0};return{y:(1-(l||0)/k)*c.height+h.T+s.h,x:c.left+v*y+s.w,v:l,d:I[y]||null}}),C=[...p].filter(({v:l})=>![null,void 0].includes(l)),S=document.createElementNS(m,"path");S.classList.add("tiny-spark-line-path"),!t.dataset.curve||t.dataset.curve==="true"?S.setAttribute("d",`M ${D(C)}`):S.setAttribute("d",`M ${P(C)}`),S.setAttribute("fill","none"),S.setAttribute("stroke",String(f(t,g.LINE_COLOR,n))),S.setAttribute("stroke-width",String(f(t,g.LINE_THICKNESS,2))),S.setAttribute("stroke-linecap","round");const O=document.createElementNS(m,"path");O.classList.add("tiny-spark-line-area");const G=t.getAttribute("data-animation");G==="true"&&e&&(S.style.opacity="0",O.style.opacity="0"),p.length&&(!t.dataset.curve||t.dataset.curve==="true"?O.setAttribute("d",`M ${C[0].x},${c.bottom} ${D(C)} L ${C.at(-1).x},${c.bottom} Z`):O.setAttribute("d",`M ${C[0].x},${c.bottom} ${P(C)} L ${C.at(-1).x},${c.bottom} Z`)),O.setAttribute("fill",String(f(t,g.AREA_COLOR,"transparent"))),p.length>1&&(o.appendChild(O),o.appendChild(S));const M=[];p.forEach((l,y)=>{const s=document.createElementNS(m,"line");s.classList.add("tiny-spark-indicator"),s.setAttribute("id",`indicator_${a}_${y}`),s.setAttribute("x1",String(c.left+(p.length===1?c.width/2:y*v))),s.setAttribute("x2",String(c.left+(p.length===1?c.width/2:y*v))),s.setAttribute("y1",String(c.top)),s.setAttribute("y2",String(c.bottom)),s.setAttribute("stroke",String(f(t,g.INDICATOR_COLOR,"#1A1A1A"))),s.setAttribute("stroke-width",String(f(t,g.INDICATOR_WIDTH,"1"))),s.setAttribute("stroke-linecap","round"),s.style.pointerEvents="none",s.style.opacity="0",M.push(s),o.appendChild(s)});let R=[];Number(String(f(t,g.PLOT_RADIUS,0)))>0&&p.forEach(({x:l,y,v:s},N)=>{if(![null,void 0].includes(s)){const b=document.createElementNS(m,"circle");b.classList.add("tiny-spark-datapoint-circle"),b.classList.add(`circle-${a}`),b.setAttribute("id",`circle_${a}_${N}`),b.setAttribute("cx",String(l||0)),b.setAttribute("cy",String(y||0)),b.setAttribute("r",String(f(t,g.PLOT_RADIUS,3))),b.setAttribute("fill",String(f(t,g.PLOT_COLOR,String(f(t,"lineColor",n))))),b.setAttribute("stroke",d),b.style.opacity="0",b.style.transition=`opacity ${N*(1e3*2/p.length)}ms ease-in`,o.appendChild(b),R.push(b)}}),p.forEach((l,y)=>{const s=document.createElementNS(m,"rect");s.classList.add("tiny-spark-tooltip-trap"),s.setAttribute("x",`${p.length===1?0:c.left+y*v-v/2}`),s.setAttribute("y",`${c.top}`),s.setAttribute("height",`${c.height}`),s.setAttribute("width",`${v}`),s.setAttribute("fill","transparent"),s.addEventListener("mouseenter",()=>{H(o,t,l,a,!0);const N=document.getElementById(`circle_${a}_${y}`);N==null||N.setAttribute("r",String(Number(f(t,g.PLOT_RADIUS,3))*1.5)),M[y].style.opacity="1"}),s.addEventListener("mouseout",()=>{H(o,t,l,a,!1);const N=document.getElementById(`circle_${a}_${y}`);N==null||N.setAttribute("r",String(Number(f(t,g.PLOT_RADIUS,3)))),M.forEach(b=>b.style.opacity="0")}),o.appendChild(s)}),G==="true"&&e?B().then(()=>{R.forEach(l=>{l.style.opacity="1"}),j(S),W(o,O)}):R.forEach(l=>{l.style.opacity="1"}),t.appendChild(o)}function nt(){const t=q();t.length&&Array.from(t).forEach(r=>{const e=r;rt(e),e.__renderCount=0,A(e),K(e,()=>A(e));const o=new ResizeObserver(i=>{i.forEach(()=>A(e))});e.parentElement&&o.observe(e.parentElement),new MutationObserver(i=>{i.forEach(u=>{u.type==="attributes"&&u.attributeName&&u.attributeName.startsWith("data-")&&A(e)})}).observe(e,{attributes:!0})})}function A(t){F(t,"set")&&et(t,t.__renderCount<2),t.__renderCount+=1}function rt(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:
|
|
7
7
|
|
|
8
|
-
data-set="[1, 2, 3]"`)}
|
|
8
|
+
data-set="[1, 2, 3]"`)}L.render=nt,Object.defineProperty(L,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED