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