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