tiny-spark 0.2.5 → 0.2.6-beta.0
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 +155 -151
- package/dist/tiny-spark.umd.js +4 -4
- package/package.json +1 -1
package/dist/tiny-spark.es.js
CHANGED
|
@@ -1,235 +1,239 @@
|
|
|
1
|
-
const
|
|
2
|
-
var
|
|
3
|
-
function
|
|
4
|
-
const { width:
|
|
5
|
-
return i.id = u, i.setAttribute("viewBox",
|
|
1
|
+
const A = "http://www.w3.org/2000/svg";
|
|
2
|
+
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 || {});
|
|
3
|
+
function U(t) {
|
|
4
|
+
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;
|
|
5
|
+
return i.id = u, i.setAttribute("viewBox", s), i.style.width = "100%", i.style.height = "100%", {
|
|
6
6
|
svg: i,
|
|
7
7
|
svgId: u,
|
|
8
|
-
width:
|
|
9
|
-
height:
|
|
8
|
+
width: n || o.width,
|
|
9
|
+
height: r || o.height
|
|
10
10
|
};
|
|
11
11
|
}
|
|
12
|
-
function S(t,
|
|
13
|
-
return isNaN(t) ?
|
|
14
|
-
}
|
|
15
|
-
function M(t) {
|
|
16
|
-
let r = [];
|
|
17
|
-
for (let e = 0; e < t.length; e += 1)
|
|
18
|
-
r.push(`${S(t[e].x)},${S(t[e].y)} `);
|
|
19
|
-
return r.join(" ").trim();
|
|
12
|
+
function S(t, n = 0) {
|
|
13
|
+
return isNaN(t) ? n : t;
|
|
20
14
|
}
|
|
21
15
|
function P(t) {
|
|
16
|
+
let n = [];
|
|
17
|
+
for (let r = 0; r < t.length; r += 1)
|
|
18
|
+
n.push(`${S(t[r].x)},${S(t[r].y)} `);
|
|
19
|
+
return n.join(" ").trim();
|
|
20
|
+
}
|
|
21
|
+
function F(t) {
|
|
22
22
|
if (t.length < 1) return "0,0";
|
|
23
|
-
const
|
|
24
|
-
for (let
|
|
25
|
-
o[
|
|
26
|
-
u[0] = i[0], u[
|
|
27
|
-
for (let
|
|
28
|
-
if (i[
|
|
29
|
-
u[
|
|
23
|
+
const n = t.length - 1, r = [`${S(t[0].x)},${S(t[0].y)}`], o = [], s = [], i = [], u = [];
|
|
24
|
+
for (let e = 0; e < n; e += 1)
|
|
25
|
+
o[e] = t[e + 1].x - t[e].x, s[e] = t[e + 1].y - t[e].y, i[e] = s[e] / o[e];
|
|
26
|
+
u[0] = i[0], u[n] = i[n - 1];
|
|
27
|
+
for (let e = 1; e < n; e += 1)
|
|
28
|
+
if (i[e - 1] * i[e] <= 0)
|
|
29
|
+
u[e] = 0;
|
|
30
30
|
else {
|
|
31
|
-
const d = 2 * i[
|
|
32
|
-
u[
|
|
31
|
+
const d = 2 * i[e - 1] * i[e] / (i[e - 1] + i[e]);
|
|
32
|
+
u[e] = d;
|
|
33
33
|
}
|
|
34
|
-
for (let
|
|
35
|
-
const d = t[
|
|
36
|
-
|
|
34
|
+
for (let e = 0; e < n; e += 1) {
|
|
35
|
+
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;
|
|
36
|
+
r.push(`C ${S(L)},${S(k)} ${S(N)},${S(I)} ${S(g)},${S(c)}`);
|
|
37
37
|
}
|
|
38
|
-
return
|
|
38
|
+
return r.join(" ");
|
|
39
39
|
}
|
|
40
|
-
function
|
|
40
|
+
function W(t, n = 1e3) {
|
|
41
41
|
t.style.opacity = "1";
|
|
42
|
-
const
|
|
43
|
-
t.style.strokeDasharray = String(
|
|
42
|
+
const r = t.getTotalLength();
|
|
43
|
+
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() {
|
|
44
44
|
t.style.transition = "", t.removeEventListener("transitionend", o);
|
|
45
45
|
});
|
|
46
46
|
}
|
|
47
|
-
function
|
|
48
|
-
|
|
49
|
-
const o =
|
|
47
|
+
function j(t, n, r = 1e3) {
|
|
48
|
+
n.style.opacity = "1";
|
|
49
|
+
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);
|
|
50
50
|
i.setAttribute("id", u);
|
|
51
|
-
const
|
|
52
|
-
|
|
51
|
+
const e = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
|
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 d = t.querySelector("defs");
|
|
54
|
-
d || (d = document.createElementNS("http://www.w3.org/2000/svg", "defs"), t.insertBefore(d, t.firstChild)), d.appendChild(i),
|
|
55
|
-
|
|
54
|
+
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() {
|
|
55
|
+
n.removeAttribute("clip-path"), i.parentNode && i.parentNode.removeChild(i), e.removeEventListener("transitionend", C);
|
|
56
56
|
});
|
|
57
57
|
}
|
|
58
|
-
function
|
|
58
|
+
function q() {
|
|
59
59
|
return document.querySelectorAll(".tiny-spark");
|
|
60
60
|
}
|
|
61
|
-
function
|
|
62
|
-
return Object.keys(t.dataset).includes(
|
|
61
|
+
function H(t, n) {
|
|
62
|
+
return Object.keys(t.dataset).includes(n);
|
|
63
63
|
}
|
|
64
|
-
function
|
|
65
|
-
return
|
|
64
|
+
function y(t, n, r) {
|
|
65
|
+
return H(t, n) ? t.dataset[n] : r;
|
|
66
66
|
}
|
|
67
|
-
function
|
|
68
|
-
const
|
|
69
|
-
for (const
|
|
70
|
-
if (
|
|
71
|
-
|
|
67
|
+
function J(t, n) {
|
|
68
|
+
const r = new MutationObserver((o) => {
|
|
69
|
+
for (const s of o)
|
|
70
|
+
if (s.type === "attributes" && s.attributeName && Object.values(B).includes(s.attributeName)) {
|
|
71
|
+
n();
|
|
72
72
|
break;
|
|
73
73
|
}
|
|
74
74
|
});
|
|
75
|
-
return
|
|
75
|
+
return r.observe(t, { attributes: !0 }), r;
|
|
76
76
|
}
|
|
77
|
-
function
|
|
77
|
+
function K(t) {
|
|
78
78
|
if (!t) return {
|
|
79
79
|
color: "#1A1A1A",
|
|
80
80
|
backgroundColor: "#FFFFFF"
|
|
81
81
|
};
|
|
82
|
-
const
|
|
83
|
-
return { color:
|
|
82
|
+
const n = window.getComputedStyle(t), r = n.getPropertyValue("color") || "#1A1A1A", o = n.getPropertyValue("background-color"), s = n.getPropertyValue("background");
|
|
83
|
+
return { color: r, backgroundColor: o || s || "#FFFFFF" };
|
|
84
84
|
}
|
|
85
|
-
function
|
|
85
|
+
function X() {
|
|
86
86
|
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(t) {
|
|
87
|
-
const
|
|
88
|
-
return (t == "x" ?
|
|
87
|
+
const n = Math.random() * 16 | 0;
|
|
88
|
+
return (t == "x" ? n : n & 3 | 8).toString(16);
|
|
89
89
|
});
|
|
90
90
|
}
|
|
91
|
-
function
|
|
92
|
-
const
|
|
93
|
-
if (!
|
|
91
|
+
function Y(t) {
|
|
92
|
+
const n = t.getAttribute("data-set");
|
|
93
|
+
if (!n) return [];
|
|
94
94
|
try {
|
|
95
|
-
const
|
|
96
|
-
return Array.isArray(
|
|
97
|
-
} catch (
|
|
98
|
-
return console.error("Error parsing data-set:",
|
|
95
|
+
const r = JSON.parse(n);
|
|
96
|
+
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."), []);
|
|
97
|
+
} catch (r) {
|
|
98
|
+
return console.error("Error parsing data-set:", r), [];
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
|
-
function
|
|
102
|
-
const
|
|
103
|
-
if (!
|
|
101
|
+
function z(t) {
|
|
102
|
+
const n = t.getAttribute("data-dates");
|
|
103
|
+
if (!n) return [];
|
|
104
104
|
try {
|
|
105
|
-
const
|
|
106
|
-
return Array.isArray(
|
|
107
|
-
} catch (
|
|
108
|
-
return console.error("Error parsing data-dates",
|
|
105
|
+
const r = JSON.parse(n);
|
|
106
|
+
return Array.isArray(r) && r.every((o) => typeof o == "string") ? r : (console.warn("data-dates is not an array of strings"), []);
|
|
107
|
+
} catch (r) {
|
|
108
|
+
return console.error("Error parsing data-dates", r), [];
|
|
109
109
|
}
|
|
110
110
|
}
|
|
111
|
-
function
|
|
111
|
+
function D(t) {
|
|
112
112
|
return {
|
|
113
113
|
min: Math.min(...t),
|
|
114
114
|
max: Math.max(...t)
|
|
115
115
|
};
|
|
116
116
|
}
|
|
117
|
-
function
|
|
117
|
+
function G() {
|
|
118
118
|
return new Promise((t) => setTimeout(t, 0));
|
|
119
119
|
}
|
|
120
|
-
function
|
|
121
|
-
const
|
|
122
|
-
return
|
|
120
|
+
function Z(t, n) {
|
|
121
|
+
const r = String(y(t, h.NUMBER_LOCALE, navigator.language || "en-US")), o = Number(String(y(t, h.NUMBER_ROUNDING, 0)));
|
|
122
|
+
return n.toLocaleString(r, {
|
|
123
123
|
useGrouping: !0,
|
|
124
124
|
minimumFractionDigits: o,
|
|
125
125
|
maximumFractionDigits: o
|
|
126
126
|
});
|
|
127
127
|
}
|
|
128
|
-
function
|
|
128
|
+
function Q(t, n, r) {
|
|
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();
|
|
132
132
|
if (!o)
|
|
133
133
|
throw new Error("Cannot obtain the screen CTM.");
|
|
134
|
-
const
|
|
135
|
-
|
|
136
|
-
const i =
|
|
134
|
+
const s = t.createSVGPoint();
|
|
135
|
+
s.x = n, s.y = r;
|
|
136
|
+
const i = s.matrixTransform(o);
|
|
137
137
|
return { x: i.x, y: i.y };
|
|
138
138
|
}
|
|
139
|
-
function
|
|
140
|
-
if (
|
|
141
|
-
const { x: i, y: u } =
|
|
142
|
-
|
|
143
|
-
<div class="tiny-spark-tooltip-content">${
|
|
144
|
-
`, document.body.appendChild(
|
|
145
|
-
const { width: d, height:
|
|
146
|
-
|
|
139
|
+
function V(t, n, r, o, s) {
|
|
140
|
+
if (T(o), !s) return;
|
|
141
|
+
const { x: i, y: u } = Q(t, r.x, r.y), e = document.createElement("div");
|
|
142
|
+
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 = `
|
|
143
|
+
<div class="tiny-spark-tooltip-content">${r.d ? `${r.d}: ` : ""}${[null, void 0].includes(r.v) ? "-" : Z(n, Number(r.v))}</div>
|
|
144
|
+
`, document.body.appendChild(e), G().then(() => {
|
|
145
|
+
const { width: d, height: C } = e.getBoundingClientRect();
|
|
146
|
+
e.style.left = `${i - d / 2}px`, e.style.top = `${u - C - Number(String(Number(y(n, h.PLOT_RADIUS, 3)) * 1.5))}px`;
|
|
147
147
|
}).then(() => {
|
|
148
|
-
|
|
148
|
+
e.style.opacity = "1";
|
|
149
149
|
});
|
|
150
150
|
}
|
|
151
|
-
function Q(t) {
|
|
152
|
-
const r = document.getElementById(`tooltip_${t}`);
|
|
153
|
-
r == null || r.remove();
|
|
154
|
-
}
|
|
155
151
|
function T(t) {
|
|
152
|
+
const n = document.getElementById(`tooltip_${t}`);
|
|
153
|
+
n == null || n.remove();
|
|
154
|
+
}
|
|
155
|
+
function tt(t) {
|
|
156
156
|
t.innerHTML = "";
|
|
157
157
|
}
|
|
158
|
-
function
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
158
|
+
function et(t, n) {
|
|
159
|
+
const r = t.dataset.id;
|
|
160
|
+
console.log({ uid: r });
|
|
161
|
+
let o = n;
|
|
162
|
+
tt(t);
|
|
163
|
+
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 = {
|
|
162
164
|
left: g.L,
|
|
163
165
|
top: g.T,
|
|
164
|
-
width:
|
|
165
|
-
height:
|
|
166
|
-
bottom:
|
|
167
|
-
},
|
|
168
|
-
const
|
|
169
|
-
w:
|
|
170
|
-
h:
|
|
166
|
+
width: u - g.L - g.R,
|
|
167
|
+
height: e - g.T - g.B,
|
|
168
|
+
bottom: e - g.B
|
|
169
|
+
}, 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) => {
|
|
170
|
+
const a = {
|
|
171
|
+
w: L.length === 1 ? N / 2 : 0,
|
|
172
|
+
h: L.length === 1 ? c.height / 2 : 0
|
|
171
173
|
};
|
|
172
174
|
return {
|
|
173
|
-
y: (1 - (l || 0) /
|
|
174
|
-
x: c.left + N * b +
|
|
175
|
+
y: (1 - (l || 0) / k) * c.height + g.T + a.h,
|
|
176
|
+
x: c.left + N * b + a.w,
|
|
175
177
|
v: l,
|
|
176
|
-
d:
|
|
178
|
+
d: I[b] || null
|
|
177
179
|
};
|
|
178
|
-
}), v = [...m].filter(({ v: l }) => ![null, void 0].includes(l)), p = document.createElementNS(
|
|
179
|
-
p.classList.add("tiny-spark-line-path"), !t.dataset.curve || t.dataset.curve === "true" ? p.setAttribute("d", `M ${
|
|
180
|
-
const w = document.createElementNS(
|
|
180
|
+
}), v = [...m].filter(({ v: l }) => ![null, void 0].includes(l)), p = document.createElementNS(A, "path");
|
|
181
|
+
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");
|
|
182
|
+
const w = document.createElementNS(A, "path");
|
|
181
183
|
w.classList.add("tiny-spark-line-area");
|
|
182
|
-
const
|
|
183
|
-
|
|
184
|
-
const
|
|
184
|
+
const M = t.getAttribute("data-animation");
|
|
185
|
+
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));
|
|
186
|
+
const R = [];
|
|
185
187
|
m.forEach((l, b) => {
|
|
186
|
-
const
|
|
187
|
-
|
|
188
|
+
const a = document.createElementNS(A, "line");
|
|
189
|
+
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);
|
|
188
190
|
});
|
|
189
|
-
let
|
|
190
|
-
Number(String(
|
|
191
|
-
if (![null, void 0].includes(
|
|
192
|
-
const f = document.createElementNS(
|
|
193
|
-
f.classList.add("tiny-spark-datapoint-circle"), f.classList.add(`circle-${
|
|
191
|
+
let _ = [];
|
|
192
|
+
Number(String(y(t, h.PLOT_RADIUS, 0))) > 0 && m.forEach(({ x: l, y: b, v: a }, x) => {
|
|
193
|
+
if (![null, void 0].includes(a)) {
|
|
194
|
+
const f = document.createElementNS(A, "circle");
|
|
195
|
+
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);
|
|
194
196
|
}
|
|
195
197
|
}), m.forEach((l, b) => {
|
|
196
|
-
const
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
const x = document.getElementById(`circle_${
|
|
200
|
-
x == null || x.setAttribute("r", String(Number(
|
|
201
|
-
}),
|
|
202
|
-
|
|
203
|
-
const x = document.getElementById(`circle_${
|
|
204
|
-
x == null || x.setAttribute("r", String(Number(
|
|
205
|
-
}),
|
|
206
|
-
}),
|
|
207
|
-
|
|
198
|
+
const a = document.createElementNS(A, "rect");
|
|
199
|
+
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", () => {
|
|
200
|
+
V(s, t, l, i, !0);
|
|
201
|
+
const x = document.getElementById(`circle_${i}_${b}`);
|
|
202
|
+
x == null || x.setAttribute("r", String(Number(y(t, h.PLOT_RADIUS, 3)) * 1.5)), R[b].style.opacity = "1";
|
|
203
|
+
}), a.addEventListener("mouseout", () => {
|
|
204
|
+
V(s, t, l, i, !1);
|
|
205
|
+
const x = document.getElementById(`circle_${i}_${b}`);
|
|
206
|
+
x == null || x.setAttribute("r", String(Number(y(t, h.PLOT_RADIUS, 3)))), R.forEach((f) => f.style.opacity = "0");
|
|
207
|
+
}), s.appendChild(a);
|
|
208
|
+
}), M === "true" && o ? G().then(() => {
|
|
209
|
+
_.forEach((l) => {
|
|
208
210
|
l.style.opacity = "1";
|
|
209
|
-
}),
|
|
210
|
-
}) :
|
|
211
|
+
}), W(p), j(s, w);
|
|
212
|
+
}) : _.forEach((l) => {
|
|
211
213
|
l.style.opacity = "1";
|
|
212
|
-
}), t.appendChild(
|
|
213
|
-
}
|
|
214
|
-
function
|
|
215
|
-
const t =
|
|
216
|
-
t.length && Array.from(t).forEach((
|
|
217
|
-
const
|
|
218
|
-
|
|
219
|
-
const o =
|
|
220
|
-
|
|
214
|
+
}), t.appendChild(s);
|
|
215
|
+
}
|
|
216
|
+
function rt() {
|
|
217
|
+
const t = q();
|
|
218
|
+
t.length && Array.from(t).forEach((n) => {
|
|
219
|
+
const r = X();
|
|
220
|
+
n.setAttribute("data-id", r);
|
|
221
|
+
const o = n;
|
|
222
|
+
nt(o), o.__renderCount = 0, E(o), J(o, () => E(o));
|
|
223
|
+
const s = new ResizeObserver((u) => {
|
|
224
|
+
u.forEach(() => E(o));
|
|
221
225
|
});
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
226
|
+
o.parentElement && s.observe(o.parentElement), new MutationObserver((u) => {
|
|
227
|
+
u.forEach((e) => {
|
|
228
|
+
e.type === "attributes" && e.attributeName && e.attributeName.startsWith("data-") && E(o);
|
|
225
229
|
});
|
|
226
|
-
}).observe(
|
|
230
|
+
}).observe(o, { attributes: !0 });
|
|
227
231
|
});
|
|
228
232
|
}
|
|
229
|
-
function
|
|
230
|
-
|
|
233
|
+
function E(t) {
|
|
234
|
+
H(t, "set") && et(t, t.__renderCount < 2), t.__renderCount += 1;
|
|
231
235
|
}
|
|
232
|
-
function
|
|
236
|
+
function nt(t) {
|
|
233
237
|
t.dataset.set || console.error(
|
|
234
238
|
`Tiny-spark exception:
|
|
235
239
|
|
|
@@ -239,10 +243,10 @@ Provide an array of numbers, for example:
|
|
|
239
243
|
data-set="[1, 2, 3]"`
|
|
240
244
|
);
|
|
241
245
|
}
|
|
242
|
-
function
|
|
246
|
+
function ot(t) {
|
|
243
247
|
return JSON.stringify(t);
|
|
244
248
|
}
|
|
245
249
|
export {
|
|
246
|
-
|
|
247
|
-
|
|
250
|
+
rt as render,
|
|
251
|
+
ot as tinyFormat
|
|
248
252
|
};
|
package/dist/tiny-spark.umd.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
(function(O,
|
|
2
|
-
<div class="tiny-spark-tooltip-content">${
|
|
3
|
-
`,document.body.appendChild(
|
|
1
|
+
(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=`
|
|
2
|
+
<div class="tiny-spark-tooltip-content">${r.d?`${r.d}: `:""}${[null,void 0].includes(r.v)?"-":Q(n,Number(r.v))}</div>
|
|
3
|
+
`,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:
|
|
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]"`)}function
|
|
8
|
+
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"})});
|
package/package.json
CHANGED