tiny-spark 1.0.0 → 1.1.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 +9 -0
- package/dist/tiny-spark.es.js +288 -251
- package/dist/tiny-spark.umd.js +4 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -44,12 +44,17 @@ Render a line chart:
|
|
|
44
44
|
data-id="myId"
|
|
45
45
|
data-type="line"
|
|
46
46
|
data-curve="true"
|
|
47
|
+
data-cut-null="false"
|
|
47
48
|
data-set="[1, 2, 3, 5, 8, 13]"
|
|
48
49
|
data-dates='["01-2026", "02-2026", "03-2026", "04-2026", "05-2026", "06-2026"]'
|
|
49
50
|
data-responsive
|
|
50
51
|
data-animation="true"
|
|
51
52
|
data-line-color="#4A4A4A"
|
|
52
53
|
data-area-color="#1A1A1A10"
|
|
54
|
+
data-gradient-from="#FF0000"
|
|
55
|
+
data-gradient-to="#FFAA00"
|
|
56
|
+
data-gradient-from-opacity="1"
|
|
57
|
+
data-gradient-to-opacity="1"
|
|
53
58
|
data-line-thickness="4"
|
|
54
59
|
data-plot-color="#2A2A2A"
|
|
55
60
|
data-plot-radius="2"
|
|
@@ -79,6 +84,10 @@ Render a bar chart:
|
|
|
79
84
|
data-responsive
|
|
80
85
|
data-animation="true"
|
|
81
86
|
data-line-thickness="4"
|
|
87
|
+
data-gradient-from="#FF0000"
|
|
88
|
+
data-gradient-to="#FFAA00"
|
|
89
|
+
data-gradient-from-opacity="1"
|
|
90
|
+
data-gradient-to-opacity="1"
|
|
82
91
|
data-plot-color="#2A2A2A"
|
|
83
92
|
data-number-locale="en-US"
|
|
84
93
|
data-number-rounding="2"
|
package/dist/tiny-spark.es.js
CHANGED
|
@@ -1,262 +1,262 @@
|
|
|
1
|
-
const
|
|
2
|
-
var
|
|
3
|
-
const
|
|
4
|
-
version:
|
|
1
|
+
const _ = "http://www.w3.org/2000/svg";
|
|
2
|
+
var rt = /* @__PURE__ */ ((t) => (t.BAR = "bar", t.LINE = "line", t))(rt || {}), p = /* @__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.SHOW_LAST_VALUE = "showLastValue", t.LAST_VALUE_FONT_SIZE = "lastValueFontSize", t.LAST_VALUE_COLOR = "lastValueColor", t.TYPE = "type", t.TOOLTIP_SMOOTHING = "tooltipSmoothing", t.CUT_NULL = "cutNull", t.GRADIENT_FROM = "gradientFrom", t.GRADIENT_TO = "gradientTo", t.GRADIENT_FROM_OPACITY = "gradientFromOpacity", t.GRADIENT_TO_OPACITY = "gradientToOpacity", t))(p || {}), ot = /* @__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.SHOW_LAST_VALUE = "data-show-last-value", t.LAST_VALUE_FONT_SIZE = "data-last-value-font-size", t.LAST_VALUE_COLOR = "data-last-value-color", t.TYPE = "data-type", t.TOOLTIP_SMOOTHING = "data-tooltip-smoothing", t.CUT_NULL = "data-cut-null", t.GRADIENT_FROM = "data-gradient-from", t.GRADIENT_TO = "data-gradient-to", t.GRADIENT_FROM_OPACITY = "data-gradient-from-opacity", t.GRADIENT_TO_OPACITY = "data-gradient-to-opacity", t))(ot || {});
|
|
3
|
+
const pt = "1.1.0", gt = {
|
|
4
|
+
version: pt
|
|
5
5
|
};
|
|
6
|
-
function
|
|
7
|
-
const { width: i, height: n } = t.parentElement.getBoundingClientRect(),
|
|
8
|
-
let
|
|
9
|
-
if (!(t.dataset.type && t.dataset.type === "bar") &&
|
|
10
|
-
const
|
|
11
|
-
|
|
6
|
+
function mt(t) {
|
|
7
|
+
const { width: i, height: n } = t.parentElement.getBoundingClientRect(), o = { width: 300, height: 100 }, s = String(f(t, p.SHOW_LAST_VALUE, "false")) === "true", e = at(t), c = e && e.length ? e.at(-1) : null;
|
|
8
|
+
let r = 0;
|
|
9
|
+
if (!(t.dataset.type && t.dataset.type === "bar") && s && ![null, void 0].includes(c)) {
|
|
10
|
+
const u = Number(String(f(t, p.NUMBER_ROUNDING, 0)));
|
|
11
|
+
r = 6 + c.toFixed(u).length * (Number(f(t, p.LAST_VALUE_FONT_SIZE, 12)) / 2);
|
|
12
12
|
}
|
|
13
|
-
const a = `0 0 ${(i ||
|
|
14
|
-
|
|
15
|
-
const
|
|
16
|
-
return
|
|
17
|
-
svg:
|
|
18
|
-
svgId:
|
|
19
|
-
width: i ||
|
|
20
|
-
height: n ||
|
|
13
|
+
const a = `0 0 ${(i || o.width) + r} ${n || o.height}`, m = document.createElementNS(_, "svg"), A = t.dataset.id;
|
|
14
|
+
m.id = A, m.setAttribute("viewBox", a), m.style.width = "100%", m.style.height = "100%";
|
|
15
|
+
const d = document.createElementNS(_, "desc");
|
|
16
|
+
return d.setAttribute("aria-hidden", "true"), d.innerHTML = `Composed with tiny-spark v${gt.version}`, m.appendChild(d), {
|
|
17
|
+
svg: m,
|
|
18
|
+
svgId: A,
|
|
19
|
+
width: i || o.width,
|
|
20
|
+
height: n || o.height,
|
|
21
21
|
viewBox: a
|
|
22
22
|
};
|
|
23
23
|
}
|
|
24
|
-
function
|
|
24
|
+
function C(t, i = 0) {
|
|
25
25
|
return isNaN(t) ? i : t;
|
|
26
26
|
}
|
|
27
|
-
function
|
|
27
|
+
function tt(t) {
|
|
28
28
|
let i = [];
|
|
29
29
|
for (let n = 0; n < t.length; n += 1)
|
|
30
|
-
i.push(`${
|
|
30
|
+
i.push(`${C(t[n].x)},${C(t[n].y)} `);
|
|
31
31
|
return i.join(" ").trim();
|
|
32
32
|
}
|
|
33
|
-
function
|
|
33
|
+
function et(t) {
|
|
34
34
|
if (t.length < 2) return "0,0";
|
|
35
|
-
const i = t.length - 1, n = [`${
|
|
36
|
-
for (let
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
for (let
|
|
40
|
-
if (e[
|
|
41
|
-
|
|
35
|
+
const i = t.length - 1, n = [`${C(t[0].x)},${C(t[0].y)}`], o = [], s = [], e = [], c = [];
|
|
36
|
+
for (let r = 0; r < i; r += 1)
|
|
37
|
+
o[r] = t[r + 1].x - t[r].x, s[r] = t[r + 1].y - t[r].y, e[r] = s[r] / o[r];
|
|
38
|
+
c[0] = e[0], c[i] = e[i - 1];
|
|
39
|
+
for (let r = 1; r < i; r += 1)
|
|
40
|
+
if (e[r - 1] * e[r] <= 0)
|
|
41
|
+
c[r] = 0;
|
|
42
42
|
else {
|
|
43
|
-
const
|
|
44
|
-
|
|
43
|
+
const g = 2 * e[r - 1] * e[r] / (e[r - 1] + e[r]);
|
|
44
|
+
c[r] = g;
|
|
45
45
|
}
|
|
46
|
-
for (let
|
|
47
|
-
const
|
|
48
|
-
n.push(`C ${
|
|
46
|
+
for (let r = 0; r < i; r += 1) {
|
|
47
|
+
const g = t[r].x, O = t[r].y, a = t[r + 1].x, m = t[r + 1].y, A = c[r], d = c[r + 1], u = g + (a - g) / 3, I = O + A * (a - g) / 3, $ = a - (a - g) / 3, F = m - d * (a - g) / 3;
|
|
48
|
+
n.push(`C ${C(u)},${C(I)} ${C($)},${C(F)} ${C(a)},${C(m)}`);
|
|
49
49
|
}
|
|
50
50
|
return n.join(" ");
|
|
51
51
|
}
|
|
52
|
-
function
|
|
52
|
+
function yt(t) {
|
|
53
53
|
const i = [];
|
|
54
54
|
let n = [];
|
|
55
|
-
for (const
|
|
56
|
-
|
|
55
|
+
for (const o of t)
|
|
56
|
+
o.v == null || Number.isNaN(o.x) || Number.isNaN(o.y) ? (n.length > 1 && i.push(n), n = []) : n.push(o);
|
|
57
57
|
return n.length > 1 && i.push(n), i;
|
|
58
58
|
}
|
|
59
|
-
function
|
|
60
|
-
const i =
|
|
59
|
+
function ht(t) {
|
|
60
|
+
const i = yt(t);
|
|
61
61
|
if (!i.length) return "";
|
|
62
62
|
let n = "";
|
|
63
|
-
for (const [
|
|
64
|
-
if (
|
|
65
|
-
const e =
|
|
63
|
+
for (const [o, s] of i.entries()) {
|
|
64
|
+
if (s.length < 2) continue;
|
|
65
|
+
const e = s.length - 1, c = [], r = [], g = [], O = [];
|
|
66
66
|
for (let a = 0; a < e; a += 1)
|
|
67
|
-
|
|
68
|
-
|
|
67
|
+
c[a] = s[a + 1].x - s[a].x, r[a] = s[a + 1].y - s[a].y, g[a] = r[a] / c[a];
|
|
68
|
+
O[0] = g[0], O[e] = g[e - 1];
|
|
69
69
|
for (let a = 1; a < e; a += 1)
|
|
70
|
-
if (
|
|
71
|
-
|
|
70
|
+
if (g[a - 1] * g[a] <= 0)
|
|
71
|
+
O[a] = 0;
|
|
72
72
|
else {
|
|
73
|
-
const
|
|
74
|
-
|
|
73
|
+
const m = 2 * g[a - 1] * g[a] / (g[a - 1] + g[a]);
|
|
74
|
+
O[a] = m;
|
|
75
75
|
}
|
|
76
|
-
n += `${
|
|
76
|
+
n += `${o === 0 ? "" : "M"}${C(s[0].x)},${C(s[0].y)} `;
|
|
77
77
|
for (let a = 0; a < e; a += 1) {
|
|
78
|
-
const
|
|
79
|
-
n += `C${
|
|
78
|
+
const m = s[a].x, A = s[a].y, d = s[a + 1].x, u = s[a + 1].y, I = O[a], $ = O[a + 1], F = m + (d - m) / 3, G = A + I * (d - m) / 3, L = d - (d - m) / 3, w = u - $ * (d - m) / 3;
|
|
79
|
+
n += `C${C(F)},${C(G)} ${C(L)},${C(w)} ${C(d)},${C(u)} `;
|
|
80
80
|
}
|
|
81
81
|
}
|
|
82
82
|
return n.trim();
|
|
83
83
|
}
|
|
84
|
-
function
|
|
84
|
+
function bt(t) {
|
|
85
85
|
let i = "", n = !1;
|
|
86
|
-
const
|
|
87
|
-
for (let
|
|
88
|
-
const e = t[
|
|
89
|
-
if (!
|
|
86
|
+
const o = (s) => s.v != null && Number.isFinite(s.x) && Number.isFinite(s.y);
|
|
87
|
+
for (let s = 0; s < t.length; s++) {
|
|
88
|
+
const e = t[s];
|
|
89
|
+
if (!o(e))
|
|
90
90
|
continue;
|
|
91
|
-
const
|
|
91
|
+
const c = `${C(e.x)},${C(e.y)}`;
|
|
92
92
|
if (!n)
|
|
93
|
-
i +=
|
|
93
|
+
i += c, n = !0;
|
|
94
94
|
else {
|
|
95
|
-
const
|
|
96
|
-
i += `${
|
|
95
|
+
const r = t[s - 1], g = o(r) ? "L" : "M";
|
|
96
|
+
i += `${g}${c}`;
|
|
97
97
|
}
|
|
98
98
|
i += " ";
|
|
99
99
|
}
|
|
100
100
|
return i.trim();
|
|
101
101
|
}
|
|
102
|
-
function
|
|
102
|
+
function Nt(t) {
|
|
103
103
|
const i = [];
|
|
104
104
|
let n = [];
|
|
105
|
-
for (const
|
|
106
|
-
!
|
|
105
|
+
for (const o of t)
|
|
106
|
+
!o || o.v == null || Number.isNaN(o.x) || Number.isNaN(o.y) ? (n.length && i.push(n), n = []) : n.push(o);
|
|
107
107
|
return n.length && i.push(n), i;
|
|
108
108
|
}
|
|
109
|
-
function
|
|
109
|
+
function Ot(t, i) {
|
|
110
110
|
if (!t[0]) return [-10, -10, "", -10, -10].toString();
|
|
111
|
-
const n =
|
|
112
|
-
return n.length ? n.map((
|
|
113
|
-
const
|
|
114
|
-
return
|
|
115
|
-
|
|
116
|
-
}), [
|
|
111
|
+
const n = Nt(t);
|
|
112
|
+
return n.length ? n.map((o) => {
|
|
113
|
+
const s = { x: o[0].x, y: i }, e = { x: o.at(-1)?.x, y: i }, c = [];
|
|
114
|
+
return o.forEach((r) => {
|
|
115
|
+
c.push(`${r.x},${r.y} `);
|
|
116
|
+
}), [s.x, s.y, ...c, e.x, e.y].toString();
|
|
117
117
|
}).join(";") : "";
|
|
118
118
|
}
|
|
119
|
-
function
|
|
120
|
-
function
|
|
121
|
-
const
|
|
122
|
-
let
|
|
123
|
-
for (const
|
|
124
|
-
!
|
|
125
|
-
return
|
|
119
|
+
function St(t, i, n = !1, o = !0) {
|
|
120
|
+
function s(c) {
|
|
121
|
+
const r = [];
|
|
122
|
+
let g = [];
|
|
123
|
+
for (const O of c)
|
|
124
|
+
!O || O.v == null || Number.isNaN(O.x) || Number.isNaN(O.y) ? (g.length > 1 && r.push(g), g = []) : g.push(O);
|
|
125
|
+
return g.length > 1 && r.push(g), r;
|
|
126
126
|
}
|
|
127
|
-
return (n ?
|
|
128
|
-
if (
|
|
129
|
-
const
|
|
130
|
-
for (let
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
for (let
|
|
134
|
-
if (a[
|
|
135
|
-
|
|
127
|
+
return (n ? s(t) : [t]).map((c) => {
|
|
128
|
+
if (c.length < 2) return "";
|
|
129
|
+
const r = c.length - 1, g = [], O = [], a = [], m = [];
|
|
130
|
+
for (let d = 0; d < r; d += 1)
|
|
131
|
+
g[d] = c[d + 1].x - c[d].x, O[d] = c[d + 1].y - c[d].y, a[d] = O[d] / g[d];
|
|
132
|
+
m[0] = a[0], m[r] = a[r - 1];
|
|
133
|
+
for (let d = 1; d < r; d += 1)
|
|
134
|
+
if (a[d - 1] * a[d] <= 0)
|
|
135
|
+
m[d] = 0;
|
|
136
136
|
else {
|
|
137
|
-
const
|
|
138
|
-
|
|
137
|
+
const u = 2 * a[d - 1] * a[d] / (a[d - 1] + a[d]);
|
|
138
|
+
m[d] = u;
|
|
139
139
|
}
|
|
140
|
-
let
|
|
141
|
-
|
|
142
|
-
for (let
|
|
143
|
-
const
|
|
144
|
-
|
|
140
|
+
let A = `M${c[0].x},${i}`;
|
|
141
|
+
A += ` L${c[0].x},${c[0].y}`;
|
|
142
|
+
for (let d = 0; d < r; d += 1) {
|
|
143
|
+
const u = c[d].x, I = c[d].y, $ = c[d + 1].x, F = c[d + 1].y, G = m[d], L = m[d + 1], w = u + ($ - u) / 3, D = I + G * ($ - u) / 3, N = $ - ($ - u) / 3, V = F - L * ($ - u) / 3;
|
|
144
|
+
A += ` C${w},${D} ${N},${V} ${$},${F}`;
|
|
145
145
|
}
|
|
146
|
-
return
|
|
146
|
+
return A += ` L${c[r].x},${i} ${o ? "Z" : ""}`, A;
|
|
147
147
|
}).filter(Boolean);
|
|
148
148
|
}
|
|
149
|
-
function
|
|
149
|
+
function xt(t, i = 1e3, n) {
|
|
150
150
|
t.style.opacity = "1";
|
|
151
|
-
const
|
|
152
|
-
t.style.strokeDasharray = String(
|
|
153
|
-
t.style.transition = "", t.removeEventListener("transitionend",
|
|
151
|
+
const o = t.getTotalLength();
|
|
152
|
+
t.style.strokeDasharray = String(o), t.style.strokeDashoffset = String(o), t.getBoundingClientRect(), t.style.transition = `stroke-dashoffset ${i}ms ease-in-out`, t.style.strokeDashoffset = "0", t.addEventListener("transitionend", function s() {
|
|
153
|
+
t.style.transition = "", t.removeEventListener("transitionend", s), n && n();
|
|
154
154
|
});
|
|
155
155
|
}
|
|
156
|
-
function
|
|
156
|
+
function Ct(t, i, n = 1e3) {
|
|
157
157
|
i.style.opacity = "1";
|
|
158
|
-
const
|
|
159
|
-
e.setAttribute("id",
|
|
160
|
-
const
|
|
161
|
-
|
|
162
|
-
let
|
|
163
|
-
|
|
164
|
-
i.removeAttribute("clip-path"), e.parentNode && e.parentNode.removeChild(e),
|
|
158
|
+
const o = i.getBBox(), s = o.width, e = document.createElementNS("http://www.w3.org/2000/svg", "clipPath"), c = "clip-" + Math.random().toString(36).substr(2, 9);
|
|
159
|
+
e.setAttribute("id", c);
|
|
160
|
+
const r = document.createElementNS("http://www.w3.org/2000/svg", "rect");
|
|
161
|
+
r.setAttribute("x", o.x.toString()), r.setAttribute("y", o.y.toString()), r.setAttribute("width", "0"), r.setAttribute("height", o.height.toString()), e.appendChild(r);
|
|
162
|
+
let g = t.querySelector("defs");
|
|
163
|
+
g || (g = document.createElementNS("http://www.w3.org/2000/svg", "defs"), t.insertBefore(g, t.firstChild)), g.appendChild(e), i.setAttribute("clip-path", `url(#${c})`), r.style.transition = `width ${n}ms ease-out`, r.getBoundingClientRect(), r.setAttribute("width", s.toString()), r.addEventListener("transitionend", function O() {
|
|
164
|
+
i.removeAttribute("clip-path"), e.parentNode && e.parentNode.removeChild(e), r.removeEventListener("transitionend", O);
|
|
165
165
|
});
|
|
166
166
|
}
|
|
167
|
-
function
|
|
167
|
+
function It() {
|
|
168
168
|
return document.querySelectorAll(".tiny-spark");
|
|
169
169
|
}
|
|
170
|
-
function
|
|
170
|
+
function st(t, i) {
|
|
171
171
|
return Object.keys(t.dataset).includes(i);
|
|
172
172
|
}
|
|
173
|
-
function
|
|
174
|
-
return
|
|
173
|
+
function f(t, i, n) {
|
|
174
|
+
return st(t, i) ? t.dataset[i] : n;
|
|
175
175
|
}
|
|
176
|
-
function
|
|
176
|
+
function At(t) {
|
|
177
177
|
if (!t) return {
|
|
178
178
|
color: "#1A1A1A",
|
|
179
179
|
backgroundColor: "#FFFFFF"
|
|
180
180
|
};
|
|
181
|
-
const i = window.getComputedStyle(t), n = i.getPropertyValue("color") || "#1A1A1A",
|
|
182
|
-
return { color: n, backgroundColor:
|
|
181
|
+
const i = window.getComputedStyle(t), n = i.getPropertyValue("color") || "#1A1A1A", o = i.getPropertyValue("background-color"), s = i.getPropertyValue("background");
|
|
182
|
+
return { color: n, backgroundColor: o || s || "#FFFFFF" };
|
|
183
183
|
}
|
|
184
|
-
function
|
|
184
|
+
function q() {
|
|
185
185
|
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(t) {
|
|
186
186
|
const i = Math.random() * 16 | 0;
|
|
187
187
|
return (t == "x" ? i : i & 3 | 8).toString(16);
|
|
188
188
|
});
|
|
189
189
|
}
|
|
190
|
-
function
|
|
190
|
+
function at(t) {
|
|
191
191
|
const i = t.getAttribute("data-set");
|
|
192
192
|
if (!i) return [];
|
|
193
193
|
const n = i.replace(/,(?=,)/g, ",null").replace(/\[,/g, "[null,").replace(/,\]/g, ",null]");
|
|
194
194
|
try {
|
|
195
|
-
const
|
|
196
|
-
return Array.isArray(
|
|
197
|
-
} catch (
|
|
198
|
-
return console.error("Error parsing data-set:",
|
|
195
|
+
const o = JSON.parse(n);
|
|
196
|
+
return Array.isArray(o) && o.every((s) => typeof s == "number" || [null, void 0].includes(s)) ? o : (console.warn("data-set is not an array of numbers."), []);
|
|
197
|
+
} catch (o) {
|
|
198
|
+
return console.error("Error parsing data-set:", o), [];
|
|
199
199
|
}
|
|
200
200
|
}
|
|
201
|
-
function
|
|
201
|
+
function _t(t) {
|
|
202
202
|
const i = t.getAttribute("data-dates");
|
|
203
203
|
if (!i) return [];
|
|
204
204
|
try {
|
|
205
205
|
const n = JSON.parse(i);
|
|
206
|
-
return Array.isArray(n) && n.every((
|
|
206
|
+
return Array.isArray(n) && n.every((o) => typeof o == "string") ? n : (console.warn("data-dates is not an array of strings"), []);
|
|
207
207
|
} catch (n) {
|
|
208
208
|
return console.error("Error parsing data-dates", n), [];
|
|
209
209
|
}
|
|
210
210
|
}
|
|
211
|
-
function
|
|
211
|
+
function nt(t) {
|
|
212
212
|
return {
|
|
213
213
|
min: Math.min(...t),
|
|
214
214
|
max: Math.max(...t)
|
|
215
215
|
};
|
|
216
216
|
}
|
|
217
|
-
function
|
|
217
|
+
function lt() {
|
|
218
218
|
return new Promise((t) => setTimeout(t, 0));
|
|
219
219
|
}
|
|
220
|
-
function
|
|
221
|
-
const n = String(
|
|
220
|
+
function ut(t, i) {
|
|
221
|
+
const n = String(f(t, p.NUMBER_LOCALE, navigator.language || "en-US")), o = Number(String(f(t, p.NUMBER_ROUNDING, 0)));
|
|
222
222
|
return i.toLocaleString(n, {
|
|
223
223
|
useGrouping: !0,
|
|
224
|
-
minimumFractionDigits:
|
|
225
|
-
maximumFractionDigits:
|
|
224
|
+
minimumFractionDigits: o,
|
|
225
|
+
maximumFractionDigits: o
|
|
226
226
|
});
|
|
227
227
|
}
|
|
228
|
-
function
|
|
228
|
+
function $t(t, i, n) {
|
|
229
229
|
if (!t.createSVGPoint || !t.getScreenCTM)
|
|
230
|
-
|
|
231
|
-
const
|
|
232
|
-
if (!
|
|
233
|
-
|
|
234
|
-
const
|
|
235
|
-
|
|
236
|
-
const e =
|
|
230
|
+
return console.error("Your browser does not support SVG coordinate transformation."), { x: 0, y: 0 };
|
|
231
|
+
const o = t.getScreenCTM();
|
|
232
|
+
if (!o)
|
|
233
|
+
return console.error("Cannot obtain the screen CTM."), { x: 0, y: 0 };
|
|
234
|
+
const s = t.createSVGPoint();
|
|
235
|
+
s.x = i, s.y = n;
|
|
236
|
+
const e = s.matrixTransform(o);
|
|
237
237
|
return { x: e.x, y: e.y };
|
|
238
238
|
}
|
|
239
|
-
const
|
|
240
|
-
function
|
|
241
|
-
let e =
|
|
242
|
-
if (!
|
|
239
|
+
const z = {};
|
|
240
|
+
function it(t, i, n, o, s) {
|
|
241
|
+
let e = z[o];
|
|
242
|
+
if (!s) {
|
|
243
243
|
e && (cancelAnimationFrame(e.frameId), e.frameId = null, e.tool.style.opacity = "0");
|
|
244
244
|
return;
|
|
245
245
|
}
|
|
246
|
-
const
|
|
246
|
+
const c = i.dataset.type === rt.BAR, { x: r, y: g } = $t(
|
|
247
247
|
t,
|
|
248
248
|
n.x,
|
|
249
|
-
|
|
249
|
+
c && !n.isPositive ? n.bar.y : n.y
|
|
250
250
|
);
|
|
251
251
|
if (!e) {
|
|
252
|
-
const
|
|
253
|
-
|
|
252
|
+
const u = document.createElement("div");
|
|
253
|
+
u.classList.add("tiny-spark-tooltip"), u.setAttribute("id", `tooltip_${o}`), u.setAttribute("role", "tooltip"), u.setAttribute("aria-live", "polite"), u.style.position = "fixed", u.style.pointerEvents = "none", u.style.opacity = "0", u.style.willChange = "top, left", document.body.appendChild(u), e = z[o] = {
|
|
254
254
|
targetX: 0,
|
|
255
255
|
targetY: 0,
|
|
256
256
|
displayX: 0,
|
|
257
257
|
displayY: 0,
|
|
258
258
|
frameId: null,
|
|
259
|
-
tool:
|
|
259
|
+
tool: u,
|
|
260
260
|
width: 0,
|
|
261
261
|
height: 0,
|
|
262
262
|
hasSnapped: !1
|
|
@@ -264,149 +264,186 @@ function J(t, i, n, s, r) {
|
|
|
264
264
|
}
|
|
265
265
|
e.tool.setAttribute("aria-hidden", "false"), e.tool.innerHTML = `
|
|
266
266
|
<div class="tiny-spark-tooltip-content">
|
|
267
|
-
${n.d ? `${n.d}: ` : ""}${[null, void 0].includes(n.v) ? "-" :
|
|
267
|
+
${n.d ? `${n.d}: ` : ""}${[null, void 0].includes(n.v) ? "-" : ut(i, Number(n.v))}
|
|
268
268
|
</div>
|
|
269
269
|
`;
|
|
270
|
-
const { width:
|
|
271
|
-
e.width =
|
|
272
|
-
const
|
|
273
|
-
if (e.targetX =
|
|
270
|
+
const { width: O, height: a } = e.tool.getBoundingClientRect();
|
|
271
|
+
e.width = O, e.height = a;
|
|
272
|
+
const m = Number(f(i, p.PLOT_RADIUS, 3));
|
|
273
|
+
if (e.targetX = r - e.width / 2, e.targetY = g - e.height - m * 1.5, !e.hasSnapped) {
|
|
274
274
|
e.displayX = e.targetX, e.displayY = e.targetY, e.tool.style.left = `${e.displayX}px`, e.tool.style.top = `${e.displayY}px`, e.tool.style.opacity = "1", e.hasSnapped = !0;
|
|
275
275
|
return;
|
|
276
276
|
}
|
|
277
|
-
const
|
|
278
|
-
function
|
|
279
|
-
e.displayX += (e.targetX - e.displayX) *
|
|
277
|
+
const A = Number(f(i, p.TOOLTIP_SMOOTHING, 1)) / 10;
|
|
278
|
+
function d() {
|
|
279
|
+
e.displayX += (e.targetX - e.displayX) * A, e.displayY += (e.targetY - e.displayY) * A, e.tool.style.left = `${Math.round(e.displayX)}px`, e.tool.style.top = `${Math.round(e.displayY)}px`, e.tool.style.opacity = "1", e.frameId = requestAnimationFrame(d);
|
|
280
280
|
}
|
|
281
|
-
e.frameId == null &&
|
|
281
|
+
e.frameId == null && d();
|
|
282
282
|
}
|
|
283
|
-
function
|
|
283
|
+
function K({ id: t, colorStart: i, colorEnd: n, opacityStart: o, opacityEnd: s }) {
|
|
284
|
+
const e = document.createElementNS(_, "linearGradient");
|
|
285
|
+
e.setAttribute("id", t), e.setAttribute("x1", "0"), e.setAttribute("x2", "0"), e.setAttribute("y1", "0"), e.setAttribute("y2", "1");
|
|
286
|
+
const c = document.createElementNS(_, "stop");
|
|
287
|
+
c.setAttribute("offset", "0%"), c.setAttribute("stop-color", i), c.setAttribute("stop-opacity", String(o));
|
|
288
|
+
const r = document.createElementNS(_, "stop");
|
|
289
|
+
return r.setAttribute("offset", "100%"), r.setAttribute("stop-color", n), r.setAttribute("stop-opacity", String(s)), [c, r].forEach((g) => {
|
|
290
|
+
e.appendChild(g);
|
|
291
|
+
}), e;
|
|
292
|
+
}
|
|
293
|
+
function Lt(t) {
|
|
284
294
|
t.innerHTML = "";
|
|
285
295
|
}
|
|
286
|
-
function
|
|
296
|
+
function vt(t, i) {
|
|
287
297
|
const n = t.dataset.type && t.dataset.type === "bar";
|
|
288
|
-
let
|
|
289
|
-
|
|
290
|
-
const { svg:
|
|
291
|
-
left:
|
|
292
|
-
top:
|
|
293
|
-
width:
|
|
294
|
-
height:
|
|
295
|
-
bottom:
|
|
296
|
-
},
|
|
297
|
-
let
|
|
298
|
+
let o = i;
|
|
299
|
+
Lt(t);
|
|
300
|
+
const { svg: s, svgId: e, width: c, height: r, viewBox: g } = mt(t), { color: O, backgroundColor: a } = At(t), m = { T: 12, R: 12, B: 12, L: 12 }, A = q(), d = String(f(t, p.SHOW_LAST_VALUE, "false")) === "true", u = {
|
|
301
|
+
left: m.L,
|
|
302
|
+
top: m.T,
|
|
303
|
+
width: c - m.L - m.R,
|
|
304
|
+
height: r - m.T - m.B,
|
|
305
|
+
bottom: r - m.B
|
|
306
|
+
}, I = at(t), { min: $ } = nt(I), F = I.map((l) => [null, void 0].includes(l) ? l : l + ($ < 0 ? Math.abs($) : 0)), { max: G } = nt(F);
|
|
307
|
+
let L = u.width / (I.length - 1) === 1 / 0 ? u.width : u.width / (I.length - 1);
|
|
298
308
|
if (n) {
|
|
299
|
-
const [
|
|
300
|
-
|
|
309
|
+
const [l, h, y, b] = g.split(" ");
|
|
310
|
+
s.setAttribute("viewBox", `${Number(l) - L / 2} ${h} ${Number(y) + L} ${b}`);
|
|
301
311
|
}
|
|
302
|
-
const
|
|
312
|
+
const w = !I.some((l) => l >= 0), D = _t(t), N = F.map((l, h) => {
|
|
303
313
|
const y = {
|
|
304
|
-
w:
|
|
305
|
-
h:
|
|
306
|
-
},
|
|
314
|
+
w: F.length === 1 ? L / 2 : 0,
|
|
315
|
+
h: F.length === 1 ? u.height / 2 : 0
|
|
316
|
+
}, b = u.left + L * h + y.w, x = (1 - (l || 0) / G) * u.height + y.h + m.T, E = (1 - ($ < 0 ? Math.abs($) : 0) / G) * u.height + m.T + y.h, Z = I[h] >= 0;
|
|
307
317
|
return {
|
|
308
|
-
y:
|
|
309
|
-
x:
|
|
310
|
-
v:
|
|
311
|
-
d:
|
|
312
|
-
isPositive:
|
|
318
|
+
y: w && I.length === 1 ? u.top + u.height / 2 : x,
|
|
319
|
+
x: b,
|
|
320
|
+
v: I[h],
|
|
321
|
+
d: D[h] || null,
|
|
322
|
+
isPositive: Z,
|
|
313
323
|
bar: {
|
|
314
|
-
x:
|
|
315
|
-
y:
|
|
316
|
-
h:
|
|
317
|
-
w:
|
|
324
|
+
x: b - L / 2,
|
|
325
|
+
y: I.length === 1 ? u.top : Z ? x : w ? u.top : E,
|
|
326
|
+
h: I.length === 1 ? u.height : Z ? E - x : w && I.length === 0 ? u.height : isNaN(x - E) ? 0 : x - E,
|
|
327
|
+
w: L
|
|
318
328
|
}
|
|
319
329
|
};
|
|
320
330
|
});
|
|
321
|
-
function
|
|
322
|
-
const
|
|
323
|
-
return
|
|
331
|
+
function V() {
|
|
332
|
+
const l = document.createElementNS(_, "path");
|
|
333
|
+
return l.classList.add("tiny-spark-line-area"), l;
|
|
334
|
+
}
|
|
335
|
+
function ct(l) {
|
|
336
|
+
const h = document.createElementNS(_, "defs");
|
|
337
|
+
return h.appendChild(K({
|
|
338
|
+
id: l,
|
|
339
|
+
colorStart: String(f(t, p.GRADIENT_FROM, "#FFFFFF")),
|
|
340
|
+
colorEnd: String(f(t, p.GRADIENT_TO, "#FFFFFF")),
|
|
341
|
+
opacityStart: Math.max(0, Math.min(1, Number(f(t, p.GRADIENT_FROM_OPACITY, 1)))),
|
|
342
|
+
opacityEnd: Math.max(0, Math.min(1, Number(f(t, p.GRADIENT_TO_OPACITY, 1))))
|
|
343
|
+
})), h;
|
|
324
344
|
}
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
345
|
+
function dt(l) {
|
|
346
|
+
const h = document.createElementNS(_, "defs");
|
|
347
|
+
return h.appendChild(K({
|
|
348
|
+
id: `pos_${l}`,
|
|
349
|
+
colorStart: String(f(t, p.GRADIENT_FROM, "#FFFFFF")),
|
|
350
|
+
colorEnd: String(f(t, p.GRADIENT_TO, "#FFFFFF")),
|
|
351
|
+
opacityStart: Math.max(0, Math.min(1, Number(f(t, p.GRADIENT_FROM_OPACITY, 1)))),
|
|
352
|
+
opacityEnd: Math.max(0, Math.min(1, Number(f(t, p.GRADIENT_TO_OPACITY, 1))))
|
|
353
|
+
})), h.appendChild(K({
|
|
354
|
+
id: `neg_${l}`,
|
|
355
|
+
colorStart: String(f(t, p.GRADIENT_TO, "#FFFFFF")),
|
|
356
|
+
colorEnd: String(f(t, p.GRADIENT_FROM, "#FFFFFF")),
|
|
357
|
+
opacityStart: Math.max(0, Math.min(1, Number(f(t, p.GRADIENT_TO_OPACITY, 1)))),
|
|
358
|
+
opacityEnd: Math.max(0, Math.min(1, Number(f(t, p.GRADIENT_FROM_OPACITY, 1))))
|
|
359
|
+
})), h;
|
|
360
|
+
}
|
|
361
|
+
const v = [...N].map((l) => [null, void 0, 1 / 0, -1 / 0, NaN, "NaN"].includes(l.v) ? { ...l, v: null } : l), J = t.getAttribute("data-animation"), R = document.createElementNS(_, "path");
|
|
362
|
+
R.classList.add("tiny-spark-line-path");
|
|
363
|
+
const P = V(), Y = [], k = !!f(t, p.GRADIENT_FROM, "") && !!f(t, p.GRADIENT_TO, ""), M = q();
|
|
364
|
+
n || (!t.dataset.curve || t.dataset.curve === "true" ? !t.dataset.cutNull || t.dataset.cutNull === "false" ? R.setAttribute("d", `M ${et(v)}`) : R.setAttribute("d", `M ${ht(v)}`) : !t.dataset.cutNull || t.dataset.cutNull === "false" ? R.setAttribute("d", `M ${tt(v)}`) : R.setAttribute("d", `M ${bt(v)}`), R.setAttribute("fill", "none"), R.setAttribute("stroke", String(f(t, p.LINE_COLOR, O))), R.setAttribute("stroke-width", String(f(t, p.LINE_THICKNESS, 2))), R.setAttribute("stroke-linecap", "round"), J === "true" && o && (R.style.opacity = "0", P.style.opacity = "0"), k && s.appendChild(ct(M)), N.length && (!t.dataset.curve || t.dataset.curve === "true" ? !t.dataset.cutNull || t.dataset.cutNull === "false" ? P.setAttribute("d", `M ${v[0].x},${u.bottom} ${et(v)} L ${v.at(-1).x},${u.bottom} Z`) : St(v, u.bottom, !0, !0).forEach((h) => {
|
|
365
|
+
const y = V();
|
|
366
|
+
y.setAttribute("d", h), k ? y.setAttribute("fill", `url(#${M})`) : y.setAttribute("fill", String(f(t, p.AREA_COLOR, "transparent"))), Y.push(y);
|
|
367
|
+
}) : !t.dataset.cutNull || t.dataset.cutNull === "false" ? P.setAttribute("d", `M ${v[0].x},${u.bottom} ${tt(v)} L ${v.at(-1).x},${u.bottom} Z`) : Ot(v, u.bottom).split(";").forEach((h) => {
|
|
368
|
+
const y = V();
|
|
369
|
+
y.setAttribute("d", `M ${h} Z`), k ? y.setAttribute("fill", `url(#${M})`) : y.setAttribute("fill", String(f(t, p.AREA_COLOR, "transparent"))), Y.push(y);
|
|
370
|
+
})), k ? P.setAttribute("fill", `url(#${M})`) : P.setAttribute("fill", String(f(t, p.AREA_COLOR, "transparent"))), N.length > 1 && (Y.length ? Y.forEach((l) => {
|
|
371
|
+
s.appendChild(l);
|
|
372
|
+
}) : s.appendChild(P), s.appendChild(R)));
|
|
373
|
+
const X = [];
|
|
374
|
+
N.forEach((l, h) => {
|
|
375
|
+
const y = document.createElementNS(_, "line");
|
|
376
|
+
y.classList.add("tiny-spark-indicator"), y.setAttribute("id", `indicator_${e}_${h}`), y.setAttribute("x1", String(u.left + (N.length === 1 ? u.width / 2 : h * L))), y.setAttribute("x2", String(u.left + (N.length === 1 ? u.width / 2 : h * L))), y.setAttribute("y1", String(u.top)), y.setAttribute("y2", String(u.bottom)), y.setAttribute("stroke", String(f(t, p.INDICATOR_COLOR, "#1A1A1A"))), y.setAttribute("stroke-width", String(f(t, p.INDICATOR_WIDTH, "1"))), y.setAttribute("stroke-linecap", "round"), y.style.pointerEvents = "none", y.style.opacity = "0", X.push(y), s.appendChild(y);
|
|
341
377
|
});
|
|
342
378
|
let H = [], W = [];
|
|
343
|
-
const
|
|
344
|
-
n &&
|
|
345
|
-
if (![null, void 0].includes(
|
|
346
|
-
const
|
|
347
|
-
|
|
379
|
+
const Q = Number(String(f(t, p.PLOT_RADIUS, 0))) > 0, ft = !String(f(t, p.HIDE_PLOTS_ABOVE, "")) || N.length <= Number(String(f(t, p.HIDE_PLOTS_ABOVE, 0))), B = Q && ft, U = document.createElementNS(_, "g");
|
|
380
|
+
n && (k && s.appendChild(dt(M)), N.forEach(({ bar: l, v: h }, y) => {
|
|
381
|
+
if (![null, void 0].includes(h)) {
|
|
382
|
+
const b = document.createElementNS(_, "rect");
|
|
383
|
+
b.classList.add("tiny-spark-datapoint-bar"), b.setAttribute("x", String(l.x)), b.setAttribute("y", String(l.y)), b.setAttribute("width", String(l.w)), b.setAttribute("height", String(l.h)), k ? h >= 0 ? b.setAttribute("fill", `url(#pos_${M})`) : b.setAttribute("fill", `url(#neg_${M})`) : b.setAttribute("fill", String(f(t, p.PLOT_COLOR, String(f(t, "lineColor", O))))), b.style.opacity = N.length === 1 ? "1" : "0", b.style.transition = `opacity ${y * (1e3 * 2 / N.length)}ms ease-in`, W.push(b), U.appendChild(b);
|
|
348
384
|
}
|
|
349
|
-
}),
|
|
385
|
+
}), s.appendChild(U)), Q && !n && (N.forEach(({ x: l, y: h, v: y }, b) => {
|
|
350
386
|
if (![null, void 0].includes(y)) {
|
|
351
|
-
const
|
|
352
|
-
|
|
387
|
+
const x = document.createElementNS(_, "circle");
|
|
388
|
+
x.classList.add("tiny-spark-datapoint-circle"), x.classList.add(`circle-${e}`), x.setAttribute("id", `circle_${e}_${b}`), x.setAttribute("cx", String(l || 0)), x.setAttribute("cy", String(h || 0)), x.setAttribute("r", String(f(t, p.PLOT_RADIUS, 3))), x.setAttribute("fill", String(f(t, p.PLOT_COLOR, String(f(t, "lineColor", O))))), x.setAttribute("stroke", a), x.style.opacity = N.length === 1 ? "1" : "0", x.style.transition = `opacity ${b * (1e3 * 2 / N.length)}ms ease-in`, x.style.pointerEvents = "none", H.push(x), B && U.appendChild(x);
|
|
353
389
|
}
|
|
354
|
-
});
|
|
355
|
-
let
|
|
356
|
-
if (
|
|
357
|
-
const
|
|
358
|
-
|
|
390
|
+
}), s.appendChild(U));
|
|
391
|
+
let S = null;
|
|
392
|
+
if (d && N.length && N.at(-1)) {
|
|
393
|
+
const l = Number(f(t, p.LAST_VALUE_FONT_SIZE, 12));
|
|
394
|
+
S = document.createElementNS(_, "text"), S.classList.add("tiny-spark-last-value"), S.setAttribute("id", A), n ? (S.setAttribute("x", String(N.at(-1).x + Number(f(t, p.LINE_THICKNESS, 2)))), S.setAttribute("y", N.at(-1)?.isPositive ? String(N.at(-1).y - l / 3) : String(N.at(-1).bar.y + N.at(-1).bar.h + l)), S.setAttribute("text-anchor", "middle")) : (S.setAttribute("x", String(N.at(-1).x + 6 + Number(f(t, p.LINE_THICKNESS, 2)))), S.setAttribute("y", String(N.at(-1).y + l / 3)), S.setAttribute("text-anchor", "start")), S.setAttribute("font-size", String(l) + "px"), S.setAttribute("fill", String(f(t, p.LAST_VALUE_COLOR, String(f(t, p.INDICATOR_COLOR, "#1A1A1A"))))), S.innerHTML = ut(t, Number(N.at(-1).v)), S.style.opacity = N.length === 1 ? "1" : "0", s.appendChild(S);
|
|
359
395
|
}
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
396
|
+
const T = document.createElementNS(_, "g");
|
|
397
|
+
N.forEach((l, h) => {
|
|
398
|
+
const y = H[h], b = document.createElementNS(_, "rect");
|
|
399
|
+
b.classList.add("tiny-spark-tooltip-trap"), b.setAttribute("x", `${N.length === 1 ? 0 : u.left + h * L - L / 2}`), b.setAttribute("y", `${u.top}`), b.setAttribute("height", `${u.height}`), b.setAttribute("width", `${L}`), b.setAttribute("fill", "transparent"), b.setAttribute("aria-describedby", `tooltip_${e}`), b.addEventListener("mouseenter", () => {
|
|
400
|
+
it(s, t, l, e, !0), B ? document.getElementById(`circle_${e}_${h}`)?.setAttribute("r", String(Number(f(t, p.PLOT_RADIUS, 3)) * 1.5)) : s.appendChild(y), X[h].style.opacity = "1", d && S && (h === N.length - 1 ? S.style.opacity = "0" : S.style.opacity = "1");
|
|
401
|
+
}), b.addEventListener("mouseout", () => {
|
|
402
|
+
it(s, t, l, e, !1), B ? document.getElementById(`circle_${e}_${h}`)?.setAttribute("r", String(Number(f(t, p.PLOT_RADIUS, 3)))) : y.remove(), X.forEach((x) => x.style.opacity = "0"), d && S && (S.style.opacity = "1");
|
|
403
|
+
}), T.appendChild(b);
|
|
404
|
+
}), s.appendChild(T), J === "true" && o ? lt().then(() => {
|
|
405
|
+
H.forEach((l) => {
|
|
406
|
+
l.style.opacity = "1";
|
|
407
|
+
}), W.forEach((l) => {
|
|
408
|
+
l.style.opacity = "1";
|
|
409
|
+
}), xt(R, 1e3, () => {
|
|
410
|
+
S && (S.style.opacity = "1");
|
|
411
|
+
}), Ct(s, P);
|
|
412
|
+
}) : (H.forEach((l) => {
|
|
413
|
+
l.style.opacity = "1";
|
|
414
|
+
}), W.forEach((l) => {
|
|
415
|
+
l.style.opacity = "1";
|
|
416
|
+
}), S && (S.style.opacity = "1")), t.appendChild(s), t.addEventListener("mouseleave", () => {
|
|
417
|
+
const l = z[e];
|
|
418
|
+
l && (cancelAnimationFrame(l.frameId), l.frameId = null, l.tool.style.opacity = "0", l.hasSnapped = !1);
|
|
382
419
|
});
|
|
383
420
|
}
|
|
384
|
-
function
|
|
385
|
-
const t =
|
|
421
|
+
function Ft() {
|
|
422
|
+
const t = It();
|
|
386
423
|
t.length && Array.from(t).forEach((i) => {
|
|
387
424
|
if (!i.dataset.id) {
|
|
388
|
-
const
|
|
389
|
-
i.setAttribute("data-id",
|
|
425
|
+
const o = q();
|
|
426
|
+
i.setAttribute("data-id", o);
|
|
390
427
|
}
|
|
391
428
|
const n = i;
|
|
392
|
-
|
|
393
|
-
const
|
|
394
|
-
e.forEach(() =>
|
|
429
|
+
Rt(n), n.__renderCount = 0, j(n), lt().then(() => {
|
|
430
|
+
const o = new ResizeObserver((e) => {
|
|
431
|
+
e.forEach(() => j(n));
|
|
395
432
|
});
|
|
396
|
-
n.parentElement &&
|
|
397
|
-
for (const
|
|
398
|
-
if (
|
|
399
|
-
|
|
433
|
+
n.parentElement && o.observe(n.parentElement), new MutationObserver((e) => {
|
|
434
|
+
for (const c of e)
|
|
435
|
+
if (c.type === "attributes" && c.attributeName && Object.values(ot).includes(c.attributeName)) {
|
|
436
|
+
j(n);
|
|
400
437
|
break;
|
|
401
438
|
}
|
|
402
439
|
}).observe(n, { attributes: !0 });
|
|
403
440
|
});
|
|
404
441
|
});
|
|
405
442
|
}
|
|
406
|
-
function
|
|
407
|
-
|
|
443
|
+
function j(t) {
|
|
444
|
+
st(t, "set") && vt(t, t.__renderCount < 2), t.__renderCount += 1;
|
|
408
445
|
}
|
|
409
|
-
function
|
|
446
|
+
function Rt(t) {
|
|
410
447
|
t.dataset.set || console.error(
|
|
411
448
|
`Tiny-spark exception:
|
|
412
449
|
|
|
@@ -416,10 +453,10 @@ Provide an array of numbers, for example:
|
|
|
416
453
|
data-set="[1, 2, 3]"`
|
|
417
454
|
);
|
|
418
455
|
}
|
|
419
|
-
function
|
|
456
|
+
function wt(t) {
|
|
420
457
|
return JSON.stringify(t);
|
|
421
458
|
}
|
|
422
459
|
export {
|
|
423
|
-
|
|
424
|
-
|
|
460
|
+
Ft as render,
|
|
461
|
+
wt as tinyFormat
|
|
425
462
|
};
|
package/dist/tiny-spark.umd.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(w,C){typeof exports=="object"&&typeof module<"u"?C(exports):typeof define=="function"&&define.amd?define(["exports"],C):(w=typeof globalThis<"u"?globalThis:w||self,C(w.TinySpark={}))})(this,function(w){"use strict";const C="http://www.w3.org/2000/svg";var Q=(t=>(t.BAR="bar",t.LINE="line",t))(Q||{}),p=(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.SHOW_LAST_VALUE="showLastValue",t.LAST_VALUE_FONT_SIZE="lastValueFontSize",t.LAST_VALUE_COLOR="lastValueColor",t.TYPE="type",t.TOOLTIP_SMOOTHING="tooltipSmoothing",t.CUT_NULL="cutNull",t.GRADIENT_FROM="gradientFrom",t.GRADIENT_TO="gradientTo",t.GRADIENT_FROM_OPACITY="gradientFromOpacity",t.GRADIENT_TO_OPACITY="gradientToOpacity",t))(p||{}),T=(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.SHOW_LAST_VALUE="data-show-last-value",t.LAST_VALUE_FONT_SIZE="data-last-value-font-size",t.LAST_VALUE_COLOR="data-last-value-color",t.TYPE="data-type",t.TOOLTIP_SMOOTHING="data-tooltip-smoothing",t.CUT_NULL="data-cut-null",t.GRADIENT_FROM="data-gradient-from",t.GRADIENT_TO="data-gradient-to",t.GRADIENT_FROM_OPACITY="data-gradient-from-opacity",t.GRADIENT_TO_OPACITY="data-gradient-to-opacity",t))(T||{});const dt={version:"1.1.0"};function ft(t){const{width:i,height:n}=t.parentElement.getBoundingClientRect(),r={width:300,height:100},s=String(f(t,p.SHOW_LAST_VALUE,"false"))==="true",e=it(t),c=e&&e.length?e.at(-1):null;let o=0;if(!(t.dataset.type&&t.dataset.type==="bar")&&s&&![null,void 0].includes(c)){const u=Number(String(f(t,p.NUMBER_ROUNDING,0)));o=6+c.toFixed(u).length*(Number(f(t,p.LAST_VALUE_FONT_SIZE,12))/2)}const a=`0 0 ${(i||r.width)+o} ${n||r.height}`,m=document.createElementNS(C,"svg"),_=t.dataset.id;m.id=_,m.setAttribute("viewBox",a),m.style.width="100%",m.style.height="100%";const d=document.createElementNS(C,"desc");return d.setAttribute("aria-hidden","true"),d.innerHTML=`Composed with tiny-spark v${dt.version}`,m.appendChild(d),{svg:m,svgId:_,width:i||r.width,height:n||r.height,viewBox:a}}function I(t,i=0){return isNaN(t)?i:t}function tt(t){let i=[];for(let n=0;n<t.length;n+=1)i.push(`${I(t[n].x)},${I(t[n].y)} `);return i.join(" ").trim()}function et(t){if(t.length<2)return"0,0";const i=t.length-1,n=[`${I(t[0].x)},${I(t[0].y)}`],r=[],s=[],e=[],c=[];for(let o=0;o<i;o+=1)r[o]=t[o+1].x-t[o].x,s[o]=t[o+1].y-t[o].y,e[o]=s[o]/r[o];c[0]=e[0],c[i]=e[i-1];for(let o=1;o<i;o+=1)if(e[o-1]*e[o]<=0)c[o]=0;else{const g=2*e[o-1]*e[o]/(e[o-1]+e[o]);c[o]=g}for(let o=0;o<i;o+=1){const g=t[o].x,O=t[o].y,a=t[o+1].x,m=t[o+1].y,_=c[o],d=c[o+1],u=g+(a-g)/3,A=O+_*(a-g)/3,$=a-(a-g)/3,F=m-d*(a-g)/3;n.push(`C ${I(u)},${I(A)} ${I($)},${I(F)} ${I(a)},${I(m)}`)}return n.join(" ")}function pt(t){const i=[];let n=[];for(const r of t)r.v==null||Number.isNaN(r.x)||Number.isNaN(r.y)?(n.length>1&&i.push(n),n=[]):n.push(r);return n.length>1&&i.push(n),i}function gt(t){const i=pt(t);if(!i.length)return"";let n="";for(const[r,s]of i.entries()){if(s.length<2)continue;const e=s.length-1,c=[],o=[],g=[],O=[];for(let a=0;a<e;a+=1)c[a]=s[a+1].x-s[a].x,o[a]=s[a+1].y-s[a].y,g[a]=o[a]/c[a];O[0]=g[0],O[e]=g[e-1];for(let a=1;a<e;a+=1)if(g[a-1]*g[a]<=0)O[a]=0;else{const m=2*g[a-1]*g[a]/(g[a-1]+g[a]);O[a]=m}n+=`${r===0?"":"M"}${I(s[0].x)},${I(s[0].y)} `;for(let a=0;a<e;a+=1){const m=s[a].x,_=s[a].y,d=s[a+1].x,u=s[a+1].y,A=O[a],$=O[a+1],F=m+(d-m)/3,k=_+A*(d-m)/3,L=d-(d-m)/3,P=u-$*(d-m)/3;n+=`C${I(F)},${I(k)} ${I(L)},${I(P)} ${I(d)},${I(u)} `}}return n.trim()}function mt(t){let i="",n=!1;const r=s=>s.v!=null&&Number.isFinite(s.x)&&Number.isFinite(s.y);for(let s=0;s<t.length;s++){const e=t[s];if(!r(e))continue;const c=`${I(e.x)},${I(e.y)}`;if(!n)i+=c,n=!0;else{const o=t[s-1],g=r(o)?"L":"M";i+=`${g}${c}`}i+=" "}return i.trim()}function yt(t){const i=[];let n=[];for(const r of t)!r||r.v==null||Number.isNaN(r.x)||Number.isNaN(r.y)?(n.length&&i.push(n),n=[]):n.push(r);return n.length&&i.push(n),i}function ht(t,i){if(!t[0])return[-10,-10,"",-10,-10].toString();const n=yt(t);return n.length?n.map(r=>{const s={x:r[0].x,y:i},e={x:r.at(-1)?.x,y:i},c=[];return r.forEach(o=>{c.push(`${o.x},${o.y} `)}),[s.x,s.y,...c,e.x,e.y].toString()}).join(";"):""}function bt(t,i,n=!1,r=!0){function s(c){const o=[];let g=[];for(const O of c)!O||O.v==null||Number.isNaN(O.x)||Number.isNaN(O.y)?(g.length>1&&o.push(g),g=[]):g.push(O);return g.length>1&&o.push(g),o}return(n?s(t):[t]).map(c=>{if(c.length<2)return"";const o=c.length-1,g=[],O=[],a=[],m=[];for(let d=0;d<o;d+=1)g[d]=c[d+1].x-c[d].x,O[d]=c[d+1].y-c[d].y,a[d]=O[d]/g[d];m[0]=a[0],m[o]=a[o-1];for(let d=1;d<o;d+=1)if(a[d-1]*a[d]<=0)m[d]=0;else{const u=2*a[d-1]*a[d]/(a[d-1]+a[d]);m[d]=u}let _=`M${c[0].x},${i}`;_+=` L${c[0].x},${c[0].y}`;for(let d=0;d<o;d+=1){const u=c[d].x,A=c[d].y,$=c[d+1].x,F=c[d+1].y,k=m[d],L=m[d+1],P=u+($-u)/3,j=A+k*($-u)/3,N=$-($-u)/3,Y=F-L*($-u)/3;_+=` C${P},${j} ${N},${Y} ${$},${F}`}return _+=` L${c[o].x},${i} ${r?"Z":""}`,_}).filter(Boolean)}function Nt(t,i=1e3,n){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 ${i}ms ease-in-out`,t.style.strokeDashoffset="0",t.addEventListener("transitionend",function s(){t.style.transition="",t.removeEventListener("transitionend",s),n&&n()})}function Ot(t,i,n=1e3){i.style.opacity="1";const r=i.getBBox(),s=r.width,e=document.createElementNS("http://www.w3.org/2000/svg","clipPath"),c="clip-"+Math.random().toString(36).substr(2,9);e.setAttribute("id",c);const o=document.createElementNS("http://www.w3.org/2000/svg","rect");o.setAttribute("x",r.x.toString()),o.setAttribute("y",r.y.toString()),o.setAttribute("width","0"),o.setAttribute("height",r.height.toString()),e.appendChild(o);let g=t.querySelector("defs");g||(g=document.createElementNS("http://www.w3.org/2000/svg","defs"),t.insertBefore(g,t.firstChild)),g.appendChild(e),i.setAttribute("clip-path",`url(#${c})`),o.style.transition=`width ${n}ms ease-out`,o.getBoundingClientRect(),o.setAttribute("width",s.toString()),o.addEventListener("transitionend",function O(){i.removeAttribute("clip-path"),e.parentNode&&e.parentNode.removeChild(e),o.removeEventListener("transitionend",O)})}function St(){return document.querySelectorAll(".tiny-spark")}function nt(t,i){return Object.keys(t.dataset).includes(i)}function f(t,i,n){return nt(t,i)?t.dataset[i]:n}function xt(t){if(!t)return{color:"#1A1A1A",backgroundColor:"#FFFFFF"};const i=window.getComputedStyle(t),n=i.getPropertyValue("color")||"#1A1A1A",r=i.getPropertyValue("background-color"),s=i.getPropertyValue("background");return{color:n,backgroundColor:r||s||"#FFFFFF"}}function X(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(t){const i=Math.random()*16|0;return(t=="x"?i:i&3|8).toString(16)})}function it(t){const i=t.getAttribute("data-set");if(!i)return[];const n=i.replace(/,(?=,)/g,",null").replace(/\[,/g,"[null,").replace(/,\]/g,",null]");try{const r=JSON.parse(n);return Array.isArray(r)&&r.every(s=>typeof s=="number"||[null,void 0].includes(s))?r:(console.warn("data-set is not an array of numbers."),[])}catch(r){return console.error("Error parsing data-set:",r),[]}}function Ct(t){const i=t.getAttribute("data-dates");if(!i)return[];try{const n=JSON.parse(i);return Array.isArray(n)&&n.every(r=>typeof r=="string")?n:(console.warn("data-dates is not an array of strings"),[])}catch(n){return console.error("Error parsing data-dates",n),[]}}function ot(t){return{min:Math.min(...t),max:Math.max(...t)}}function rt(){return new Promise(t=>setTimeout(t,0))}function st(t,i){const n=String(f(t,p.NUMBER_LOCALE,navigator.language||"en-US")),r=Number(String(f(t,p.NUMBER_ROUNDING,0)));return i.toLocaleString(n,{useGrouping:!0,minimumFractionDigits:r,maximumFractionDigits:r})}function It(t,i,n){if(!t.createSVGPoint||!t.getScreenCTM)return console.error("Your browser does not support SVG coordinate transformation."),{x:0,y:0};const r=t.getScreenCTM();if(!r)return console.error("Cannot obtain the screen CTM."),{x:0,y:0};const s=t.createSVGPoint();s.x=i,s.y=n;const e=s.matrixTransform(r);return{x:e.x,y:e.y}}const W={};function at(t,i,n,r,s){let e=W[r];if(!s){e&&(cancelAnimationFrame(e.frameId),e.frameId=null,e.tool.style.opacity="0");return}const c=i.dataset.type===Q.BAR,{x:o,y:g}=It(t,n.x,c&&!n.isPositive?n.bar.y:n.y);if(!e){const u=document.createElement("div");u.classList.add("tiny-spark-tooltip"),u.setAttribute("id",`tooltip_${r}`),u.setAttribute("role","tooltip"),u.setAttribute("aria-live","polite"),u.style.position="fixed",u.style.pointerEvents="none",u.style.opacity="0",u.style.willChange="top, left",document.body.appendChild(u),e=W[r]={targetX:0,targetY:0,displayX:0,displayY:0,frameId:null,tool:u,width:0,height:0,hasSnapped:!1}}e.tool.setAttribute("aria-hidden","false"),e.tool.innerHTML=`
|
|
2
2
|
<div class="tiny-spark-tooltip-content">
|
|
3
|
-
${n.d?`${n.d}: `:""}${[null,void 0].includes(n.v)?"-":
|
|
3
|
+
${n.d?`${n.d}: `:""}${[null,void 0].includes(n.v)?"-":st(i,Number(n.v))}
|
|
4
4
|
</div>
|
|
5
|
-
`;const{width:
|
|
5
|
+
`;const{width:O,height:a}=e.tool.getBoundingClientRect();e.width=O,e.height=a;const m=Number(f(i,p.PLOT_RADIUS,3));if(e.targetX=o-e.width/2,e.targetY=g-e.height-m*1.5,!e.hasSnapped){e.displayX=e.targetX,e.displayY=e.targetY,e.tool.style.left=`${e.displayX}px`,e.tool.style.top=`${e.displayY}px`,e.tool.style.opacity="1",e.hasSnapped=!0;return}const _=Number(f(i,p.TOOLTIP_SMOOTHING,1))/10;function d(){e.displayX+=(e.targetX-e.displayX)*_,e.displayY+=(e.targetY-e.displayY)*_,e.tool.style.left=`${Math.round(e.displayX)}px`,e.tool.style.top=`${Math.round(e.displayY)}px`,e.tool.style.opacity="1",e.frameId=requestAnimationFrame(d)}e.frameId==null&&d()}function B({id:t,colorStart:i,colorEnd:n,opacityStart:r,opacityEnd:s}){const e=document.createElementNS(C,"linearGradient");e.setAttribute("id",t),e.setAttribute("x1","0"),e.setAttribute("x2","0"),e.setAttribute("y1","0"),e.setAttribute("y2","1");const c=document.createElementNS(C,"stop");c.setAttribute("offset","0%"),c.setAttribute("stop-color",i),c.setAttribute("stop-opacity",String(r));const o=document.createElementNS(C,"stop");return o.setAttribute("offset","100%"),o.setAttribute("stop-color",n),o.setAttribute("stop-opacity",String(s)),[c,o].forEach(g=>{e.appendChild(g)}),e}function At(t){t.innerHTML=""}function _t(t,i){const n=t.dataset.type&&t.dataset.type==="bar";let r=i;At(t);const{svg:s,svgId:e,width:c,height:o,viewBox:g}=ft(t),{color:O,backgroundColor:a}=xt(t),m={T:12,R:12,B:12,L:12},_=X(),d=String(f(t,p.SHOW_LAST_VALUE,"false"))==="true",u={left:m.L,top:m.T,width:c-m.L-m.R,height:o-m.T-m.B,bottom:o-m.B},A=it(t),{min:$}=ot(A),F=A.map(l=>[null,void 0].includes(l)?l:l+($<0?Math.abs($):0)),{max:k}=ot(F);let L=u.width/(A.length-1)===1/0?u.width:u.width/(A.length-1);if(n){const[l,h,y,b]=g.split(" ");s.setAttribute("viewBox",`${Number(l)-L/2} ${h} ${Number(y)+L} ${b}`)}const P=!A.some(l=>l>=0),j=Ct(t),N=F.map((l,h)=>{const y={w:F.length===1?L/2:0,h:F.length===1?u.height/2:0},b=u.left+L*h+y.w,x=(1-(l||0)/k)*u.height+y.h+m.T,D=(1-($<0?Math.abs($):0)/k)*u.height+m.T+y.h,J=A[h]>=0;return{y:P&&A.length===1?u.top+u.height/2:x,x:b,v:A[h],d:j[h]||null,isPositive:J,bar:{x:b-L/2,y:A.length===1?u.top:J?x:P?u.top:D,h:A.length===1?u.height:J?D-x:P&&A.length===0?u.height:isNaN(x-D)?0:x-D,w:L}}});function Y(){const l=document.createElementNS(C,"path");return l.classList.add("tiny-spark-line-area"),l}function Rt(l){const h=document.createElementNS(C,"defs");return h.appendChild(B({id:l,colorStart:String(f(t,p.GRADIENT_FROM,"#FFFFFF")),colorEnd:String(f(t,p.GRADIENT_TO,"#FFFFFF")),opacityStart:Math.max(0,Math.min(1,Number(f(t,p.GRADIENT_FROM_OPACITY,1)))),opacityEnd:Math.max(0,Math.min(1,Number(f(t,p.GRADIENT_TO_OPACITY,1))))})),h}function Ft(l){const h=document.createElementNS(C,"defs");return h.appendChild(B({id:`pos_${l}`,colorStart:String(f(t,p.GRADIENT_FROM,"#FFFFFF")),colorEnd:String(f(t,p.GRADIENT_TO,"#FFFFFF")),opacityStart:Math.max(0,Math.min(1,Number(f(t,p.GRADIENT_FROM_OPACITY,1)))),opacityEnd:Math.max(0,Math.min(1,Number(f(t,p.GRADIENT_TO_OPACITY,1))))})),h.appendChild(B({id:`neg_${l}`,colorStart:String(f(t,p.GRADIENT_TO,"#FFFFFF")),colorEnd:String(f(t,p.GRADIENT_FROM,"#FFFFFF")),opacityStart:Math.max(0,Math.min(1,Number(f(t,p.GRADIENT_TO_OPACITY,1)))),opacityEnd:Math.max(0,Math.min(1,Number(f(t,p.GRADIENT_FROM_OPACITY,1))))})),h}const v=[...N].map(l=>[null,void 0,1/0,-1/0,NaN,"NaN"].includes(l.v)?{...l,v:null}:l),lt=t.getAttribute("data-animation"),R=document.createElementNS(C,"path");R.classList.add("tiny-spark-line-path");const M=Y(),H=[],V=!!f(t,p.GRADIENT_FROM,"")&&!!f(t,p.GRADIENT_TO,""),G=X();n||(!t.dataset.curve||t.dataset.curve==="true"?!t.dataset.cutNull||t.dataset.cutNull==="false"?R.setAttribute("d",`M ${et(v)}`):R.setAttribute("d",`M ${gt(v)}`):!t.dataset.cutNull||t.dataset.cutNull==="false"?R.setAttribute("d",`M ${tt(v)}`):R.setAttribute("d",`M ${mt(v)}`),R.setAttribute("fill","none"),R.setAttribute("stroke",String(f(t,p.LINE_COLOR,O))),R.setAttribute("stroke-width",String(f(t,p.LINE_THICKNESS,2))),R.setAttribute("stroke-linecap","round"),lt==="true"&&r&&(R.style.opacity="0",M.style.opacity="0"),V&&s.appendChild(Rt(G)),N.length&&(!t.dataset.curve||t.dataset.curve==="true"?!t.dataset.cutNull||t.dataset.cutNull==="false"?M.setAttribute("d",`M ${v[0].x},${u.bottom} ${et(v)} L ${v.at(-1).x},${u.bottom} Z`):bt(v,u.bottom,!0,!0).forEach(h=>{const y=Y();y.setAttribute("d",h),V?y.setAttribute("fill",`url(#${G})`):y.setAttribute("fill",String(f(t,p.AREA_COLOR,"transparent"))),H.push(y)}):!t.dataset.cutNull||t.dataset.cutNull==="false"?M.setAttribute("d",`M ${v[0].x},${u.bottom} ${tt(v)} L ${v.at(-1).x},${u.bottom} Z`):ht(v,u.bottom).split(";").forEach(h=>{const y=Y();y.setAttribute("d",`M ${h} Z`),V?y.setAttribute("fill",`url(#${G})`):y.setAttribute("fill",String(f(t,p.AREA_COLOR,"transparent"))),H.push(y)})),V?M.setAttribute("fill",`url(#${G})`):M.setAttribute("fill",String(f(t,p.AREA_COLOR,"transparent"))),N.length>1&&(H.length?H.forEach(l=>{s.appendChild(l)}):s.appendChild(M),s.appendChild(R)));const K=[];N.forEach((l,h)=>{const y=document.createElementNS(C,"line");y.classList.add("tiny-spark-indicator"),y.setAttribute("id",`indicator_${e}_${h}`),y.setAttribute("x1",String(u.left+(N.length===1?u.width/2:h*L))),y.setAttribute("x2",String(u.left+(N.length===1?u.width/2:h*L))),y.setAttribute("y1",String(u.top)),y.setAttribute("y2",String(u.bottom)),y.setAttribute("stroke",String(f(t,p.INDICATOR_COLOR,"#1A1A1A"))),y.setAttribute("stroke-width",String(f(t,p.INDICATOR_WIDTH,"1"))),y.setAttribute("stroke-linecap","round"),y.style.pointerEvents="none",y.style.opacity="0",K.push(y),s.appendChild(y)});let U=[],q=[];const ut=Number(String(f(t,p.PLOT_RADIUS,0)))>0,wt=!String(f(t,p.HIDE_PLOTS_ABOVE,""))||N.length<=Number(String(f(t,p.HIDE_PLOTS_ABOVE,0))),z=ut&&wt,E=document.createElementNS(C,"g");n&&(V&&s.appendChild(Ft(G)),N.forEach(({bar:l,v:h},y)=>{if(![null,void 0].includes(h)){const b=document.createElementNS(C,"rect");b.classList.add("tiny-spark-datapoint-bar"),b.setAttribute("x",String(l.x)),b.setAttribute("y",String(l.y)),b.setAttribute("width",String(l.w)),b.setAttribute("height",String(l.h)),V?h>=0?b.setAttribute("fill",`url(#pos_${G})`):b.setAttribute("fill",`url(#neg_${G})`):b.setAttribute("fill",String(f(t,p.PLOT_COLOR,String(f(t,"lineColor",O))))),b.style.opacity=N.length===1?"1":"0",b.style.transition=`opacity ${y*(1e3*2/N.length)}ms ease-in`,q.push(b),E.appendChild(b)}}),s.appendChild(E)),ut&&!n&&(N.forEach(({x:l,y:h,v:y},b)=>{if(![null,void 0].includes(y)){const x=document.createElementNS(C,"circle");x.classList.add("tiny-spark-datapoint-circle"),x.classList.add(`circle-${e}`),x.setAttribute("id",`circle_${e}_${b}`),x.setAttribute("cx",String(l||0)),x.setAttribute("cy",String(h||0)),x.setAttribute("r",String(f(t,p.PLOT_RADIUS,3))),x.setAttribute("fill",String(f(t,p.PLOT_COLOR,String(f(t,"lineColor",O))))),x.setAttribute("stroke",a),x.style.opacity=N.length===1?"1":"0",x.style.transition=`opacity ${b*(1e3*2/N.length)}ms ease-in`,x.style.pointerEvents="none",U.push(x),z&&E.appendChild(x)}}),s.appendChild(E));let S=null;if(d&&N.length&&N.at(-1)){const l=Number(f(t,p.LAST_VALUE_FONT_SIZE,12));S=document.createElementNS(C,"text"),S.classList.add("tiny-spark-last-value"),S.setAttribute("id",_),n?(S.setAttribute("x",String(N.at(-1).x+Number(f(t,p.LINE_THICKNESS,2)))),S.setAttribute("y",N.at(-1)?.isPositive?String(N.at(-1).y-l/3):String(N.at(-1).bar.y+N.at(-1).bar.h+l)),S.setAttribute("text-anchor","middle")):(S.setAttribute("x",String(N.at(-1).x+6+Number(f(t,p.LINE_THICKNESS,2)))),S.setAttribute("y",String(N.at(-1).y+l/3)),S.setAttribute("text-anchor","start")),S.setAttribute("font-size",String(l)+"px"),S.setAttribute("fill",String(f(t,p.LAST_VALUE_COLOR,String(f(t,p.INDICATOR_COLOR,"#1A1A1A"))))),S.innerHTML=st(t,Number(N.at(-1).v)),S.style.opacity=N.length===1?"1":"0",s.appendChild(S)}const ct=document.createElementNS(C,"g");N.forEach((l,h)=>{const y=U[h],b=document.createElementNS(C,"rect");b.classList.add("tiny-spark-tooltip-trap"),b.setAttribute("x",`${N.length===1?0:u.left+h*L-L/2}`),b.setAttribute("y",`${u.top}`),b.setAttribute("height",`${u.height}`),b.setAttribute("width",`${L}`),b.setAttribute("fill","transparent"),b.setAttribute("aria-describedby",`tooltip_${e}`),b.addEventListener("mouseenter",()=>{at(s,t,l,e,!0),z?document.getElementById(`circle_${e}_${h}`)?.setAttribute("r",String(Number(f(t,p.PLOT_RADIUS,3))*1.5)):s.appendChild(y),K[h].style.opacity="1",d&&S&&(h===N.length-1?S.style.opacity="0":S.style.opacity="1")}),b.addEventListener("mouseout",()=>{at(s,t,l,e,!1),z?document.getElementById(`circle_${e}_${h}`)?.setAttribute("r",String(Number(f(t,p.PLOT_RADIUS,3)))):y.remove(),K.forEach(x=>x.style.opacity="0"),d&&S&&(S.style.opacity="1")}),ct.appendChild(b)}),s.appendChild(ct),lt==="true"&&r?rt().then(()=>{U.forEach(l=>{l.style.opacity="1"}),q.forEach(l=>{l.style.opacity="1"}),Nt(R,1e3,()=>{S&&(S.style.opacity="1")}),Ot(s,M)}):(U.forEach(l=>{l.style.opacity="1"}),q.forEach(l=>{l.style.opacity="1"}),S&&(S.style.opacity="1")),t.appendChild(s),t.addEventListener("mouseleave",()=>{const l=W[e];l&&(cancelAnimationFrame(l.frameId),l.frameId=null,l.tool.style.opacity="0",l.hasSnapped=!1)})}function $t(){const t=St();t.length&&Array.from(t).forEach(i=>{if(!i.dataset.id){const r=X();i.setAttribute("data-id",r)}const n=i;Lt(n),n.__renderCount=0,Z(n),rt().then(()=>{const r=new ResizeObserver(e=>{e.forEach(()=>Z(n))});n.parentElement&&r.observe(n.parentElement),new MutationObserver(e=>{for(const c of e)if(c.type==="attributes"&&c.attributeName&&Object.values(T).includes(c.attributeName)){Z(n);break}}).observe(n,{attributes:!0})})})}function Z(t){nt(t,"set")&&_t(t,t.__renderCount<2),t.__renderCount+=1}function Lt(t){t.dataset.set||console.error(`Tiny-spark exception:
|
|
6
6
|
|
|
7
7
|
[data-set] data attribute is missing.
|
|
8
8
|
Provide an array of numbers, for example:
|
|
9
9
|
|
|
10
|
-
data-set="[1, 2, 3]"`)}function
|
|
10
|
+
data-set="[1, 2, 3]"`)}function vt(t){return JSON.stringify(t)}w.render=$t,w.tinyFormat=vt,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED