charts-core 0.0.20 → 0.0.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/charts-core.js +202 -202
- package/dist/charts-core.js.map +1 -1
- package/dist/charts-core.umd.cjs +3 -3
- package/dist/charts-core.umd.cjs.map +1 -1
- package/package.json +1 -1
package/dist/charts-core.js
CHANGED
|
@@ -1,72 +1,72 @@
|
|
|
1
1
|
import * as v from "d3";
|
|
2
2
|
const M = (e) => {
|
|
3
|
-
const { svg: t, config:
|
|
3
|
+
const { svg: t, config: a, y: s } = e, { width: l, margin: o, yAxis: n } = a, { customTicks: i, tickFormat: r, tickValues: c, ticks: u, isShow: g } = n;
|
|
4
4
|
if (!g) return null;
|
|
5
|
-
t.append("g").attr("transform", `translate(${l -
|
|
6
|
-
let h = v.axisRight(
|
|
7
|
-
i ? (r && (h = h.tickFormat(r)),
|
|
8
|
-
const
|
|
5
|
+
t.append("g").attr("transform", `translate(${l - o.right},0)`).call((d) => {
|
|
6
|
+
let h = v.axisRight(s);
|
|
7
|
+
i ? (r && (h = h.tickFormat(r)), u && (h = Array.isArray(u) ? h.ticks(...u) : h.ticks(u)), c && (h = h.tickValues(c))) : h = h.tickFormat((m) => {
|
|
8
|
+
const f = Number(m), p = f < 0 ? "-" : "", y = v.format(".0s")(Math.abs(f));
|
|
9
9
|
return `${p}${y}`;
|
|
10
|
-
}),
|
|
11
|
-
}).call((
|
|
10
|
+
}), d.call(h);
|
|
11
|
+
}).call((d) => {
|
|
12
12
|
let h = [];
|
|
13
|
-
|
|
14
|
-
}).call((
|
|
13
|
+
d.selectAll(".tick").each((m) => h.push(m)), e.yTicks = h;
|
|
14
|
+
}).call((d) => d.select(".domain").remove()).call((d) => d.selectAll(".tick line").remove()).call((d) => d.selectAll(".tick text").classed("sc-charts__y-axis-tick", !0)).attr("font-family", "inherit");
|
|
15
15
|
}, S = (e) => {
|
|
16
|
-
const { svg: t, config:
|
|
16
|
+
const { svg: t, config: a, x: s } = e, { height: l, margin: o, xAxis: n } = a, { isShow: i, tickValues: r, tickFormat: c, customTicks: u, ticks: g } = n;
|
|
17
17
|
if (!i) return null;
|
|
18
|
-
t.append("g").attr("transform", `translate(0,${l -
|
|
19
|
-
let h = v.axisBottom(
|
|
20
|
-
|
|
21
|
-
}).call((
|
|
18
|
+
t.append("g").attr("transform", `translate(0,${l - o.bottom})`).call((d) => {
|
|
19
|
+
let h = v.axisBottom(s);
|
|
20
|
+
u ? (c && (h = h.tickFormat(c)), g && (h = Array.isArray(g) ? h.ticks(...g) : h.ticks(g)), r && (h = h.tickValues(r))) : h.ticks(5), d.call(h);
|
|
21
|
+
}).call((d) => d.select(".domain").remove()).call((d) => {
|
|
22
22
|
let h = [];
|
|
23
|
-
|
|
24
|
-
}).call((
|
|
23
|
+
d.selectAll(".tick").each((m) => h.push(m)), e.xTicks = h;
|
|
24
|
+
}).call((d) => d.selectAll(".tick line").remove()).call((d) => d.selectAll(".tick text").classed("sc-charts__x-axis-tick", !0)).attr("font-family", "inherit");
|
|
25
25
|
}, F = (e) => {
|
|
26
|
-
const { svg: t, config:
|
|
26
|
+
const { svg: t, config: a, y: s } = e, {
|
|
27
27
|
width: l,
|
|
28
|
-
margin:
|
|
29
|
-
grid: { horizontalStyle:
|
|
30
|
-
} =
|
|
31
|
-
if (
|
|
32
|
-
if (
|
|
33
|
-
const i = t.append("line").attr("x1", 0 +
|
|
34
|
-
|
|
28
|
+
margin: o,
|
|
29
|
+
grid: { horizontalStyle: n }
|
|
30
|
+
} = a;
|
|
31
|
+
if (n !== "none") {
|
|
32
|
+
if (n.startsWith("zero-line")) {
|
|
33
|
+
const i = t.append("line").attr("x1", 0 + o.left).attr("x2", l - o.right).attr("y1", s(0)).attr("y2", s(0)).attr("stroke", "var(--sc-color-axis-zero-line)").attr("stroke-width", 1);
|
|
34
|
+
n === "zero-line-dashed" && i.attr("stroke-dasharray", "4 4");
|
|
35
35
|
}
|
|
36
|
-
|
|
37
|
-
const
|
|
38
|
-
|
|
36
|
+
n.startsWith("every-line") && (e.yTicks || s.ticks()).forEach((r) => {
|
|
37
|
+
const c = t.append("line").attr("x1", 0 + o.left).attr("x2", l - o.right).attr("y1", s(r)).attr("y2", s(r)).attr("stroke", "var(--sc-color-axis-zero-line)").attr("stroke-width", 1);
|
|
38
|
+
n === "every-line-dashed" && c.attr("stroke-dasharray", "4 4");
|
|
39
39
|
});
|
|
40
40
|
}
|
|
41
41
|
}, I = (e) => {
|
|
42
|
-
const { svg: t, config:
|
|
42
|
+
const { svg: t, config: a, x: s } = e, {
|
|
43
43
|
height: l,
|
|
44
|
-
margin:
|
|
45
|
-
grid: { verticalStyle:
|
|
46
|
-
} =
|
|
47
|
-
|
|
48
|
-
const
|
|
49
|
-
|
|
44
|
+
margin: o,
|
|
45
|
+
grid: { verticalStyle: n }
|
|
46
|
+
} = a;
|
|
47
|
+
n !== "none" && n.startsWith("every-line") && (e.xTicks || s.ticks()).forEach((r) => {
|
|
48
|
+
const c = t.append("line").attr("x1", s(r)).attr("x2", s(r)).attr("y1", o.top).attr("y2", l - o.bottom).attr("stroke", "var(--sc-color-axis-zero-line)").attr("stroke-width", 1);
|
|
49
|
+
n === "every-line-dashed" && c.attr("stroke-dasharray", "4 4");
|
|
50
50
|
});
|
|
51
51
|
}, z = (e) => {
|
|
52
52
|
F(e), I(e);
|
|
53
53
|
}, Z = (e) => {
|
|
54
|
-
const { svg: t, config:
|
|
55
|
-
S(e), M(e),
|
|
56
|
-
},
|
|
57
|
-
let
|
|
58
|
-
return
|
|
59
|
-
|
|
60
|
-
}),
|
|
54
|
+
const { svg: t, config: a } = e, { width: s, height: l, margin: o, logo: n } = a;
|
|
55
|
+
S(e), M(e), n && t.append("image").attr("xlink:href", a.theme === "dark" ? n.picDarkTheme : n.picLightTheme).attr("width", n.width).attr("height", n.height).attr("x", n.x ?? (s - o.left - o.right) / 2 - n.width / 2 + o.left).attr("y", n.y ?? (l - o.top - o.bottom) / 2 - n.height / 2 + o.top), z(e);
|
|
56
|
+
}, k = (e, t, a) => {
|
|
57
|
+
let s = e.select(`#${t}`);
|
|
58
|
+
return s.empty() && (s = e.append("linearGradient").attr("gradientUnits", "userSpaceOnUse").attr("id", t)), s.attr("x1", a.x1).attr("y1", a.x2).attr("x2", a.y1).attr("y2", a.y2), a.stops.forEach(({ offset: l, stopColor: o }) => {
|
|
59
|
+
s.append("stop").attr("offset", l).attr("stop-color", o);
|
|
60
|
+
}), s;
|
|
61
61
|
}, C = (e) => {
|
|
62
62
|
const t = v.select(e).select("defs");
|
|
63
63
|
return t.empty() ? v.select(e).append("defs") : t;
|
|
64
64
|
}, B = (e) => {
|
|
65
65
|
const {
|
|
66
66
|
y: t,
|
|
67
|
-
config: { margin:
|
|
68
|
-
} = e,
|
|
69
|
-
return { x: 0, y: t.range()[0] -
|
|
67
|
+
config: { margin: a }
|
|
68
|
+
} = e, s = t.range()[0] - t(0);
|
|
69
|
+
return { x: 0, y: t.range()[0] - s, width: "100%", height: s + a.bottom };
|
|
70
70
|
}, A = (e, t) => ({
|
|
71
71
|
...e,
|
|
72
72
|
...t,
|
|
@@ -95,7 +95,7 @@ const M = (e) => {
|
|
|
95
95
|
...t == null ? void 0 : t.grid
|
|
96
96
|
}
|
|
97
97
|
}), N = (e, t = {}) => {
|
|
98
|
-
const
|
|
98
|
+
const a = e.node(), s = C(a), l = (i, r) => k(s, i, {
|
|
99
99
|
x1: "0%",
|
|
100
100
|
y1: "0%",
|
|
101
101
|
x2: "0%",
|
|
@@ -108,34 +108,34 @@ const M = (e) => {
|
|
|
108
108
|
]
|
|
109
109
|
});
|
|
110
110
|
l("gradient-range-borders-up", "var(--sc-color-selection-up)"), l("gradient-range-borders-down", "var(--sc-color-selection-down)");
|
|
111
|
-
const
|
|
111
|
+
const o = "sc-charts__border-range-line", n = e.append("line").classed(o, !0).style("display", t.hidden ? "none" : "block");
|
|
112
112
|
return {
|
|
113
113
|
className(i, r) {
|
|
114
|
-
i === "remove" ?
|
|
114
|
+
i === "remove" ? n.classed(`${o}${r}`, !1) : n.classed(`${o}${r}`, !0);
|
|
115
115
|
},
|
|
116
|
-
update({ x1: i, x2: r, y1:
|
|
117
|
-
i !== void 0 &&
|
|
116
|
+
update({ x1: i, x2: r, y1: c, y2: u, hidden: g }) {
|
|
117
|
+
i !== void 0 && n.attr("x1", i), r !== void 0 && n.attr("x2", r), c !== void 0 && n.attr("y1", c), u !== void 0 && n.attr("y2", u), g !== void 0 && n.style("display", g ? "none" : "block");
|
|
118
118
|
},
|
|
119
119
|
destroy() {
|
|
120
|
-
|
|
120
|
+
n.remove();
|
|
121
121
|
}
|
|
122
122
|
};
|
|
123
123
|
}, L = (e, t = {}) => {
|
|
124
|
-
const
|
|
125
|
-
return
|
|
126
|
-
className(l,
|
|
127
|
-
l === "remove" ?
|
|
124
|
+
const a = e.append("circle").attr("r", t.radius || 4).style("display", t.hidden ? "none" : "block"), s = t.className || "";
|
|
125
|
+
return s && a.classed(s, !0), {
|
|
126
|
+
className(l, o) {
|
|
127
|
+
l === "remove" ? a.classed(`${s}${o}`, !1) : a.classed(`${s}${o}`, !0);
|
|
128
128
|
},
|
|
129
|
-
update({ cx: l, cy:
|
|
130
|
-
l !== void 0 &&
|
|
129
|
+
update({ cx: l, cy: o, hidden: n, fill: i }) {
|
|
130
|
+
l !== void 0 && a.attr("cx", l), o !== void 0 && a.attr("cy", o), i !== void 0 && a.attr("fill", i), n !== void 0 && a.style("display", n ? "none" : "block");
|
|
131
131
|
},
|
|
132
132
|
destroy() {
|
|
133
|
-
|
|
133
|
+
a.remove();
|
|
134
134
|
}
|
|
135
135
|
};
|
|
136
136
|
}, G = (e, t = {}) => {
|
|
137
|
-
const
|
|
138
|
-
return ((i, r) =>
|
|
137
|
+
const a = "sc-charts__hover-line", s = e.append("line").style("display", t.hidden ? "none" : "block").classed(a, !0), l = e.node(), o = C(l);
|
|
138
|
+
return ((i, r) => k(o, i, {
|
|
139
139
|
x1: "0%",
|
|
140
140
|
y1: "0%",
|
|
141
141
|
x2: "0%",
|
|
@@ -148,32 +148,32 @@ const M = (e) => {
|
|
|
148
148
|
]
|
|
149
149
|
}))("hover-line-gradient", "var(--sc-color-hover-line)"), {
|
|
150
150
|
className(i, r) {
|
|
151
|
-
i === "remove" ?
|
|
151
|
+
i === "remove" ? s.classed(`${a}${r}`, !1) : s.classed(`${a}${r}`, !0);
|
|
152
152
|
},
|
|
153
|
-
update({ x1: i, x2: r, y1:
|
|
154
|
-
i !== void 0 &&
|
|
153
|
+
update({ x1: i, x2: r, y1: c, y2: u, hidden: g }) {
|
|
154
|
+
i !== void 0 && s.attr("x1", i), r !== void 0 && s.attr("x2", r), c !== void 0 && s.attr("y1", c), u !== void 0 && s.attr("y2", u), g !== void 0 && s.style("display", g ? "none" : "block");
|
|
155
155
|
},
|
|
156
156
|
destroy() {
|
|
157
|
-
|
|
157
|
+
s.remove();
|
|
158
158
|
}
|
|
159
159
|
};
|
|
160
160
|
}, H = (e) => {
|
|
161
|
-
const t = "sc-charts__range-tooltip",
|
|
161
|
+
const t = "sc-charts__range-tooltip", a = e.svg.append("foreignObject").classed(t, !0).style("display", "none"), s = a.append("xhtml:div").attr("xmlns", "http://www.w3.org/1999/xhtml").attr("class", `${t}-container`), l = s.append("xhtml:div").attr("xmlns", "http://www.w3.org/1999/xhtml").attr("class", `${t}-sum`), o = s.append("xhtml:div").attr("xmlns", "http://www.w3.org/1999/xhtml").attr("class", `${t}-time`), n = v.timeFormat("%b %e, %I:%M %p");
|
|
162
162
|
return {
|
|
163
163
|
className(i, r) {
|
|
164
|
-
i === "remove" ?
|
|
164
|
+
i === "remove" ? a.classed(`${t}${r}`, !1) : a.classed(`${t}${r}`, !0);
|
|
165
165
|
},
|
|
166
|
-
update({ leftPoint: i, rightPoint: r, x:
|
|
167
|
-
if (
|
|
168
|
-
const
|
|
169
|
-
l.text(
|
|
170
|
-
const p = e.x(e.data[e.data.length - 1].date), y = e.x(e.data[0].date), w =
|
|
171
|
-
w.x < y &&
|
|
166
|
+
update({ leftPoint: i, rightPoint: r, x: c, y: u, hidden: g }) {
|
|
167
|
+
if (c !== void 0 && a.attr("x", c), u !== void 0 && a.attr("y", u), i && r) {
|
|
168
|
+
const d = r.value - i.value, h = (d / i.value * 100).toFixed(2), m = `${d < 0 ? "-" : ""}$${Math.abs(d).toFixed(2)} (${h}%)`, f = `${n(i.date)} to ${n(r.date)}`;
|
|
169
|
+
l.text(m).append("xhtml:div").html(V).attr("class", `${t}-sum-icon`), o.text(f);
|
|
170
|
+
const p = e.x(e.data[e.data.length - 1].date), y = e.x(e.data[0].date), w = s.node().getBoundingClientRect();
|
|
171
|
+
w.x < y && a.attr("x", y + w.width / 2), w.x > p - w.width && a.attr("x", p - w.width / 2);
|
|
172
172
|
}
|
|
173
|
-
g !== void 0 &&
|
|
173
|
+
g !== void 0 && a.style("display", g ? "none" : "block");
|
|
174
174
|
},
|
|
175
175
|
destroy() {
|
|
176
|
-
|
|
176
|
+
a.remove();
|
|
177
177
|
}
|
|
178
178
|
};
|
|
179
179
|
}, V = `
|
|
@@ -182,21 +182,21 @@ const M = (e) => {
|
|
|
182
182
|
fill="currentColor"/>
|
|
183
183
|
</svg>
|
|
184
184
|
`, E = (e) => {
|
|
185
|
-
const t = "sc-charts__hover-tooltip",
|
|
185
|
+
const t = "sc-charts__hover-tooltip", a = e.svg.append("foreignObject").classed(t, !0).style("display", "none"), s = a.append("xhtml:div").attr("xmlns", "http://www.w3.org/1999/xhtml").attr("class", `${t}-container`), l = s.append("xhtml:div").attr("xmlns", "http://www.w3.org/1999/xhtml").attr("class", `${t}-sum`).html("$sum"), o = s.append("xhtml:div").attr("xmlns", "http://www.w3.org/1999/xhtml").attr("class", `${t}-time`).html("Date"), n = v.timeFormat("%a, %b %d, %-I:%M %p"), i = (r) => `${r < 0 ? "-" : ""}$${Math.abs(r).toFixed(2)}`;
|
|
186
186
|
return {
|
|
187
|
-
className(r,
|
|
188
|
-
r === "remove" ?
|
|
187
|
+
className(r, c) {
|
|
188
|
+
r === "remove" ? a.classed(`${t}${c}`, !1) : a.classed(`${t}${c}`, !0);
|
|
189
189
|
},
|
|
190
|
-
update({ x: r, y:
|
|
191
|
-
if (r !== void 0 &&
|
|
192
|
-
l.text(i(g.value)),
|
|
193
|
-
const
|
|
194
|
-
|
|
190
|
+
update({ x: r, y: c, hidden: u, dataItem: g }) {
|
|
191
|
+
if (r !== void 0 && a.attr("x", r), c !== void 0 && a.attr("y", c), g && r !== void 0) {
|
|
192
|
+
l.text(i(g.value)), o.text(n(g.date));
|
|
193
|
+
const d = s.node().getBoundingClientRect(), h = 16, m = r + h + d.width > e.config.width - e.config.margin.right ? r - h - d.width : r + h;
|
|
194
|
+
a.attr("x", m);
|
|
195
195
|
}
|
|
196
|
-
|
|
196
|
+
u !== void 0 && a.style("display", u ? "none" : "block");
|
|
197
197
|
},
|
|
198
198
|
destroy() {
|
|
199
|
-
|
|
199
|
+
a.remove();
|
|
200
200
|
}
|
|
201
201
|
};
|
|
202
202
|
}, X = {
|
|
@@ -235,8 +235,8 @@ const M = (e) => {
|
|
|
235
235
|
enableBelowZeroLine: !1,
|
|
236
236
|
curveTension: 1
|
|
237
237
|
}, _ = (e) => v.curveCardinal.tension(e.config.curveTension), Y = (e) => {
|
|
238
|
-
const { svg: t, data:
|
|
239
|
-
|
|
238
|
+
const { svg: t, data: a, x: s, y: l, config: o } = e, n = t.node(), i = C(n);
|
|
239
|
+
k(i, "main-line-area-gradient", {
|
|
240
240
|
x1: "0%",
|
|
241
241
|
y1: "0%",
|
|
242
242
|
x2: "0%",
|
|
@@ -246,15 +246,15 @@ const M = (e) => {
|
|
|
246
246
|
{ offset: "100%", stopColor: "rgba(255, 255, 255, 0)" }
|
|
247
247
|
]
|
|
248
248
|
});
|
|
249
|
-
const
|
|
249
|
+
const c = v.area().x((d) => s(d.date)).y0(l.range()[0]).y1((d) => l(d.value)).curve(_(e)), u = "sc-charts__main-line-area", g = t.append("path").datum(a).attr("d", c).attr("class", u).classed(`${u}_hidden`, !o.hasMainLineArea);
|
|
250
250
|
return {
|
|
251
|
-
className(
|
|
252
|
-
|
|
251
|
+
className(d, h) {
|
|
252
|
+
d === "remove" ? g.classed(`${u}${h}`, !1) : g.classed(`${u}${h}`, !0);
|
|
253
253
|
},
|
|
254
|
-
update({ data:
|
|
255
|
-
if (
|
|
256
|
-
if (!
|
|
257
|
-
g.classed(`${
|
|
254
|
+
update({ data: d, hidden: h }) {
|
|
255
|
+
if (d !== void 0 && g.datum(d).attr("d", c), h !== void 0) {
|
|
256
|
+
if (!o.hasMainLineArea) return null;
|
|
257
|
+
g.classed(`${u}_hidden`, h);
|
|
258
258
|
}
|
|
259
259
|
},
|
|
260
260
|
destroy() {
|
|
@@ -262,8 +262,8 @@ const M = (e) => {
|
|
|
262
262
|
}
|
|
263
263
|
};
|
|
264
264
|
}, j = (e, t = {}) => {
|
|
265
|
-
const
|
|
266
|
-
|
|
265
|
+
const a = "sc-charts__range-line-area", { svg: s, x: l, y: o, config: n, data: i, chartId: r } = e, { clip: c } = t, u = s.node(), g = C(u), d = "range-line-area-gradient";
|
|
266
|
+
k(g, d + "_up", {
|
|
267
267
|
x1: "0%",
|
|
268
268
|
y1: "0%",
|
|
269
269
|
x2: "0%",
|
|
@@ -272,7 +272,7 @@ const M = (e) => {
|
|
|
272
272
|
{ offset: "0%", stopColor: "var(--sc-color-selection-up)" },
|
|
273
273
|
{ offset: "100%", stopColor: "rgba(255, 255, 255, 0)" }
|
|
274
274
|
]
|
|
275
|
-
}),
|
|
275
|
+
}), k(g, d + "_down", {
|
|
276
276
|
x1: "0%",
|
|
277
277
|
y1: "0%",
|
|
278
278
|
x2: "0%",
|
|
@@ -282,91 +282,89 @@ const M = (e) => {
|
|
|
282
282
|
{ offset: "100%", stopColor: "rgba(255, 255, 255, 0)" }
|
|
283
283
|
]
|
|
284
284
|
});
|
|
285
|
-
const h = v.area().x((w) => l(w.date)).y0(
|
|
285
|
+
const h = v.area().x((w) => l(w.date)).y0(o.range()[0]).y1((w) => o(w.value)).curve(_(e)), m = `${r}-clip-${a}`, p = g.append("clipPath").attr("id", m).append("rect").attr("x", (c == null ? void 0 : c.x) || 0).attr("y", (c == null ? void 0 : c.y) || 0).attr("width", (c == null ? void 0 : c.width) || "100%").attr("height", (c == null ? void 0 : c.height) || "100%"), y = s.append("path").datum(i).attr("d", h).attr("class", a).classed(`${a}_hidden`, !n.hasMainLineArea).attr("clip-path", `url(#${m})`);
|
|
286
286
|
return {
|
|
287
287
|
className(w, x) {
|
|
288
|
-
w === "remove" ? y.classed(`${
|
|
288
|
+
w === "remove" ? y.classed(`${a}${x}`, !1) : y.classed(`${a}${x}`, !0);
|
|
289
289
|
},
|
|
290
|
-
update({ data: w, hidden: x, clip:
|
|
291
|
-
w !== void 0 && y.datum(w).attr("d", h), x !== void 0 && y.classed(`${
|
|
290
|
+
update({ data: w, hidden: x, clip: $ }) {
|
|
291
|
+
w !== void 0 && y.datum(w).attr("d", h), x !== void 0 && y.classed(`${a}_hidden`, x), $ !== void 0 && p.attr("x", $.x).attr("y", $.y).attr("width", $.width).attr("height", $.height);
|
|
292
292
|
},
|
|
293
293
|
destroy() {
|
|
294
294
|
y.remove();
|
|
295
295
|
}
|
|
296
296
|
};
|
|
297
297
|
}, b = (e, t) => {
|
|
298
|
-
const { svg:
|
|
299
|
-
console.log(a);
|
|
300
|
-
const u = s.append("path").classed(o, !0).datum(a).attr("d", g).attr("id", i).attr("clip-path", `url(#clip-${i})`);
|
|
298
|
+
const { svg: a, data: s, x: l, y: o } = e, { baseClassName: n, id: i, clip: r } = t, c = a.node(), u = C(c), g = v.line().x((f) => l(f.date)).y((f) => o(f.value)).curve(_(e)), h = u.append("clipPath").attr("id", `clip-${i}`).append("rect").attr("x", (r == null ? void 0 : r.x) || 0).attr("y", (r == null ? void 0 : r.y) || 0).attr("width", (r == null ? void 0 : r.width) || "100%").attr("height", (r == null ? void 0 : r.height) || "100%"), m = a.append("path").classed(n, !0).datum(s).attr("d", g).attr("id", i).attr("clip-path", `url(#clip-${i})`);
|
|
301
299
|
return {
|
|
302
|
-
className(
|
|
303
|
-
|
|
300
|
+
className(f, p) {
|
|
301
|
+
f === "remove" ? m.classed(`${n}${p}`, !1) : m.classed(`${n}${p}`, !0);
|
|
304
302
|
},
|
|
305
|
-
update({ data:
|
|
306
|
-
|
|
303
|
+
update({ data: f, clip: p, hidden: y }) {
|
|
304
|
+
f !== void 0 && m.datum(f).attr("d", g), y !== void 0 && m.classed(`${n}_hidden`, y), p !== void 0 && h.attr("x", p.x).attr("y", p.y).attr("width", p.width).attr("height", p.height);
|
|
307
305
|
},
|
|
308
306
|
destroy() {
|
|
309
|
-
|
|
307
|
+
m.remove();
|
|
310
308
|
}
|
|
311
309
|
};
|
|
312
310
|
}, W = (e) => {
|
|
313
311
|
const t = b(e, {
|
|
314
312
|
baseClassName: "sc-charts__main-line",
|
|
315
313
|
id: `${e.chartId}-sc-charts__main-line`
|
|
316
|
-
}),
|
|
314
|
+
}), a = Y(e), s = G(e.svg), l = b(e, {
|
|
317
315
|
baseClassName: "sc-charts__highlight-line",
|
|
318
316
|
id: `${e.chartId}-sc-charts__highlight-line`,
|
|
319
317
|
clip: { x: 0, y: 0, width: "0", height: "0" }
|
|
320
318
|
});
|
|
321
|
-
let
|
|
322
|
-
e.config.enableBelowZeroLine && (
|
|
319
|
+
let o = null;
|
|
320
|
+
e.config.enableBelowZeroLine && (o = b(e, {
|
|
323
321
|
baseClassName: "sc-charts__below-zero-line",
|
|
324
322
|
id: `${e.chartId}-sc-charts__below-zero-line`,
|
|
325
323
|
clip: B(e)
|
|
326
324
|
}));
|
|
327
|
-
const
|
|
325
|
+
const n = L(e.svg, {
|
|
328
326
|
className: "sc-charts__hover-circle",
|
|
329
327
|
hidden: !0
|
|
330
|
-
}), i = N(e.svg), r = N(e.svg),
|
|
328
|
+
}), i = N(e.svg), r = N(e.svg), c = b(e, {
|
|
331
329
|
baseClassName: "sc-charts__range-line",
|
|
332
330
|
id: `${e.chartId}-sc-charts__range-line`,
|
|
333
331
|
clip: { x: 0, y: 0, width: "0", height: "0" }
|
|
334
|
-
}),
|
|
332
|
+
}), u = L(e.svg, {
|
|
335
333
|
className: "sc-charts__range-circle-left",
|
|
336
334
|
hidden: !0
|
|
337
335
|
}), g = L(e.svg, {
|
|
338
336
|
className: "sc-charts__range-circle-right",
|
|
339
337
|
hidden: !0
|
|
340
|
-
}),
|
|
338
|
+
}), d = H(e), h = E(e), m = j(e);
|
|
341
339
|
return {
|
|
342
|
-
hoverLine:
|
|
343
|
-
hoverCircle:
|
|
340
|
+
hoverLine: s,
|
|
341
|
+
hoverCircle: n,
|
|
344
342
|
rangeBorderLeft: i,
|
|
345
343
|
rangeBorderRight: r,
|
|
346
|
-
rangeLine:
|
|
347
|
-
rangeLineArea:
|
|
348
|
-
rangeCircleLeft:
|
|
344
|
+
rangeLine: c,
|
|
345
|
+
rangeLineArea: m,
|
|
346
|
+
rangeCircleLeft: u,
|
|
349
347
|
rangeCircleRight: g,
|
|
350
348
|
mainLine: t,
|
|
351
|
-
rangeTooltip:
|
|
349
|
+
rangeTooltip: d,
|
|
352
350
|
highlightLine: l,
|
|
353
351
|
hoverTooltip: h,
|
|
354
|
-
mainLineArea:
|
|
355
|
-
belowZeroLine:
|
|
352
|
+
mainLineArea: a,
|
|
353
|
+
belowZeroLine: o
|
|
356
354
|
};
|
|
357
|
-
}, O = (e, t,
|
|
358
|
-
let
|
|
355
|
+
}, O = (e, t, a) => {
|
|
356
|
+
let s, l;
|
|
359
357
|
switch (e) {
|
|
360
358
|
case "day":
|
|
361
|
-
|
|
359
|
+
s = new Date(t), s.setHours(0, 0, 0, 0), l = new Date(s), l.setDate(s.getDate() + 1);
|
|
362
360
|
break;
|
|
363
361
|
case "week": {
|
|
364
362
|
const i = t.getDay(), r = t.getDate() - i + (i === 0 ? -6 : 1);
|
|
365
|
-
|
|
363
|
+
s = new Date(t.getFullYear(), t.getMonth(), r), s.setHours(0, 0, 0, 0), l = new Date(s), l.setDate(s.getDate() + 7);
|
|
366
364
|
break;
|
|
367
365
|
}
|
|
368
366
|
case "month":
|
|
369
|
-
|
|
367
|
+
s = new Date(t.getFullYear(), t.getMonth(), 1), l = new Date(t.getFullYear(), t.getMonth() + 1, 1);
|
|
370
368
|
break;
|
|
371
369
|
default:
|
|
372
370
|
return {
|
|
@@ -376,52 +374,52 @@ const M = (e) => {
|
|
|
376
374
|
height: "100%"
|
|
377
375
|
};
|
|
378
376
|
}
|
|
379
|
-
const
|
|
377
|
+
const o = a(s), n = a(l);
|
|
380
378
|
return {
|
|
381
|
-
x:
|
|
379
|
+
x: o,
|
|
382
380
|
y: 0,
|
|
383
|
-
width:
|
|
381
|
+
width: n - o,
|
|
384
382
|
height: "100%"
|
|
385
383
|
};
|
|
386
384
|
}, T = (e, t) => {
|
|
387
|
-
var
|
|
385
|
+
var c;
|
|
388
386
|
const {
|
|
389
|
-
x:
|
|
390
|
-
y:
|
|
387
|
+
x: a,
|
|
388
|
+
y: s,
|
|
391
389
|
elements: l,
|
|
392
|
-
config: { margin:
|
|
390
|
+
config: { margin: o, height: n, hoverRange: i }
|
|
393
391
|
} = e;
|
|
394
392
|
l.hoverLine.update({
|
|
395
|
-
x1:
|
|
396
|
-
x2:
|
|
397
|
-
y1:
|
|
398
|
-
y2:
|
|
393
|
+
x1: a(t.date),
|
|
394
|
+
x2: a(t.date),
|
|
395
|
+
y1: o.top,
|
|
396
|
+
y2: n - o.bottom,
|
|
399
397
|
hidden: !1
|
|
400
398
|
}), l.hoverCircle.update({
|
|
401
|
-
cx:
|
|
402
|
-
cy:
|
|
399
|
+
cx: a(t.date),
|
|
400
|
+
cy: s(t.value),
|
|
403
401
|
hidden: !1
|
|
404
402
|
}), l.hoverTooltip.update({
|
|
405
403
|
dataItem: t,
|
|
406
|
-
x:
|
|
404
|
+
x: a(t.date),
|
|
407
405
|
y: 0,
|
|
408
406
|
hidden: !1
|
|
409
407
|
});
|
|
410
|
-
const r = O(i, t.date,
|
|
408
|
+
const r = O(i, t.date, a);
|
|
411
409
|
l.highlightLine.update({
|
|
412
410
|
clip: r,
|
|
413
411
|
hidden: !1
|
|
414
|
-
}), (
|
|
412
|
+
}), (c = l.belowZeroLine) == null || c.update({
|
|
415
413
|
clip: {
|
|
416
414
|
...r,
|
|
417
|
-
y:
|
|
418
|
-
height:
|
|
415
|
+
y: s(0),
|
|
416
|
+
height: s.range()[0] - s(0) + o.bottom
|
|
419
417
|
}
|
|
420
418
|
}), l.mainLine.className("add", "_muted");
|
|
421
419
|
}, D = (e) => {
|
|
422
|
-
var
|
|
420
|
+
var a;
|
|
423
421
|
const { elements: t } = e;
|
|
424
|
-
t.hoverLine.update({ hidden: !0 }), t.hoverCircle.update({ hidden: !0 }), t.highlightLine.update({ hidden: !0 }), t.mainLine.className("remove", "_muted"), t.hoverTooltip.update({ hidden: !0 }), e.action !== "selection" && ((
|
|
422
|
+
t.hoverLine.update({ hidden: !0 }), t.hoverCircle.update({ hidden: !0 }), t.highlightLine.update({ hidden: !0 }), t.mainLine.className("remove", "_muted"), t.hoverTooltip.update({ hidden: !0 }), e.action !== "selection" && ((a = t.belowZeroLine) == null || a.update({
|
|
425
423
|
clip: B(e)
|
|
426
424
|
}));
|
|
427
425
|
}, P = (e, t) => {
|
|
@@ -433,36 +431,36 @@ const M = (e) => {
|
|
|
433
431
|
"rangeLine",
|
|
434
432
|
"rangeLineArea",
|
|
435
433
|
"rangeTooltip"
|
|
436
|
-
].forEach((
|
|
437
|
-
t ? (e[
|
|
434
|
+
].forEach((s) => {
|
|
435
|
+
t ? (e[s].className("remove", "_down"), e[s].className("add", "_up")) : (e[s].className("remove", "_up"), e[s].className("add", "_down"));
|
|
438
436
|
});
|
|
439
|
-
}, U = (e, t,
|
|
440
|
-
var
|
|
437
|
+
}, U = (e, t, a) => {
|
|
438
|
+
var m;
|
|
441
439
|
const {
|
|
442
|
-
x:
|
|
440
|
+
x: s,
|
|
443
441
|
y: l,
|
|
444
|
-
config: { margin:
|
|
442
|
+
config: { margin: o, height: n },
|
|
445
443
|
elements: i
|
|
446
|
-
} = e, r =
|
|
444
|
+
} = e, r = s(t.date) < s(a.date) ? t : a, c = s(t.date) >= s(a.date) ? t : a, u = c.value - r.value >= 0, g = s(r.date), d = s(c.date), h = d - g;
|
|
447
445
|
i.rangeBorderLeft.update({
|
|
448
446
|
x1: g,
|
|
449
447
|
x2: g,
|
|
450
|
-
y1:
|
|
451
|
-
y2:
|
|
448
|
+
y1: o.top,
|
|
449
|
+
y2: n - o.bottom,
|
|
452
450
|
hidden: !1
|
|
453
451
|
}), i.rangeBorderRight.update({
|
|
454
|
-
x1:
|
|
455
|
-
x2:
|
|
456
|
-
y1:
|
|
457
|
-
y2:
|
|
452
|
+
x1: d,
|
|
453
|
+
x2: d,
|
|
454
|
+
y1: o.top,
|
|
455
|
+
y2: n - o.bottom,
|
|
458
456
|
hidden: !1
|
|
459
457
|
}), i.rangeCircleLeft.update({
|
|
460
458
|
cx: g,
|
|
461
459
|
cy: l(r.value),
|
|
462
460
|
hidden: !1
|
|
463
461
|
}), i.rangeCircleRight.update({
|
|
464
|
-
cx:
|
|
465
|
-
cy: l(
|
|
462
|
+
cx: d,
|
|
463
|
+
cy: l(c.value),
|
|
466
464
|
hidden: !1
|
|
467
465
|
}), i.rangeLine.update({
|
|
468
466
|
clip: {
|
|
@@ -481,75 +479,77 @@ const M = (e) => {
|
|
|
481
479
|
},
|
|
482
480
|
hidden: !1
|
|
483
481
|
}), i.rangeTooltip.update({
|
|
484
|
-
rightPoint:
|
|
482
|
+
rightPoint: c,
|
|
485
483
|
leftPoint: r,
|
|
486
484
|
x: g + h / 2,
|
|
487
485
|
y: 0,
|
|
488
486
|
hidden: !1
|
|
489
|
-
}), (
|
|
487
|
+
}), (m = i.belowZeroLine) == null || m.update({
|
|
490
488
|
hidden: !0
|
|
491
|
-
}), i.mainLineArea.update({ hidden: !0 }), P(i,
|
|
489
|
+
}), i.mainLineArea.update({ hidden: !0 }), P(i, u), i.mainLine.className("add", "_selected-muted");
|
|
492
490
|
}, R = (e) => {
|
|
493
|
-
var
|
|
491
|
+
var a;
|
|
494
492
|
const { elements: t } = e;
|
|
495
|
-
t.rangeLine.update({ hidden: !0 }), t.rangeLineArea.update({ hidden: !0 }), t.rangeBorderLeft.update({ hidden: !0 }), t.rangeBorderRight.update({ hidden: !0 }), t.rangeCircleLeft.update({ hidden: !0 }), t.rangeCircleRight.update({ hidden: !0 }), t.rangeTooltip.update({ hidden: !0 }), t.mainLine.className("remove", "_selected-muted"), t.mainLineArea.update({ hidden: !1 }), (
|
|
493
|
+
t.rangeLine.update({ hidden: !0 }), t.rangeLineArea.update({ hidden: !0 }), t.rangeBorderLeft.update({ hidden: !0 }), t.rangeBorderRight.update({ hidden: !0 }), t.rangeCircleLeft.update({ hidden: !0 }), t.rangeCircleRight.update({ hidden: !0 }), t.rangeTooltip.update({ hidden: !0 }), t.mainLine.className("remove", "_selected-muted"), t.mainLineArea.update({ hidden: !1 }), (a = t.belowZeroLine) == null || a.update({ hidden: !1 });
|
|
496
494
|
}, q = (e) => {
|
|
497
|
-
const { svg: t, data:
|
|
498
|
-
let
|
|
499
|
-
const
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
495
|
+
const { svg: t, data: a, x: s, config: l } = e, { height: o, margin: n, width: i, enableSelection: r, enableHover: c } = l;
|
|
496
|
+
let u = null, g = !1;
|
|
497
|
+
const d = (m) => a.reduce(
|
|
498
|
+
(f, p) => Math.abs(s(f.date) - m) < Math.abs(s(p.date) - m) ? f : p
|
|
499
|
+
);
|
|
500
|
+
t.append("rect").attr("width", i - n.left - n.right).attr("height", o - n.top - n.bottom).attr("x", n.left).attr("y", n.top).attr("fill", "transparent").on("mousemove", function(m) {
|
|
501
|
+
const [f] = v.pointer(m, this), p = d(f);
|
|
502
|
+
!g && c ? (e.action = "hover", T(e, p)) : (e.action = g ? "selection" : "none", D(e)), u && r && (e.action = "selection", U(e, u, p));
|
|
503
503
|
}).on("mouseleave", () => {
|
|
504
|
-
e.action = "none", g = !1,
|
|
505
|
-
}).on("mousedown", function(
|
|
504
|
+
e.action = "none", g = !1, u = null, D(e), R(e);
|
|
505
|
+
}).on("mousedown", function(m) {
|
|
506
506
|
if (r) {
|
|
507
507
|
g = !0, e.action = "selection";
|
|
508
|
-
const [
|
|
509
|
-
|
|
508
|
+
const [f] = v.pointer(m, this);
|
|
509
|
+
u = d(f);
|
|
510
510
|
}
|
|
511
|
-
}).on("mouseup", function(
|
|
512
|
-
const [
|
|
513
|
-
g = !1,
|
|
511
|
+
}).on("mouseup", function(m) {
|
|
512
|
+
const [f] = v.pointer(m, this), p = d(f);
|
|
513
|
+
g = !1, u = null, e.action = "hover", r && R(e), c && T(e, p);
|
|
514
514
|
});
|
|
515
515
|
}, J = (e, t) => {
|
|
516
|
-
const { width:
|
|
517
|
-
return
|
|
516
|
+
const { width: a, margin: s } = t, l = v.scaleTime(), o = v.extent(e, (n) => new Date(n.date));
|
|
517
|
+
return o[0] == null || o[1] == null ? l : l.domain([o[0], o[1]]).range([s.left, a - s.right]);
|
|
518
518
|
}, K = (e, t) => {
|
|
519
|
-
const { height:
|
|
520
|
-
return v.scaleLinear().domain([
|
|
519
|
+
const { height: a, margin: s } = t, l = v.max(e, (n) => n.value) ?? 0, o = v.min(e, (n) => n.value) ?? 0;
|
|
520
|
+
return v.scaleLinear().domain([o, l]).range([a - s.bottom, s.top]);
|
|
521
521
|
}, Q = (e, t) => {
|
|
522
|
-
const
|
|
523
|
-
if (
|
|
522
|
+
const a = v.select(e);
|
|
523
|
+
if (a.empty())
|
|
524
524
|
return console.error(`Element with selector ${e} not found!`), null;
|
|
525
525
|
if (!t.chartId || !/^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(t.chartId))
|
|
526
526
|
return console.error(`chartId is required and must be a valid id
|
|
527
527
|
(only letters, numbers or underscores. The first character must be a letter)`), null;
|
|
528
|
-
const
|
|
529
|
-
let r = A({ ...X, width:
|
|
530
|
-
const
|
|
531
|
-
g &&
|
|
532
|
-
const
|
|
533
|
-
|
|
534
|
-
const
|
|
528
|
+
const s = a.append("svg"), o = a.node().getBoundingClientRect(), n = o.width, i = o.height;
|
|
529
|
+
let r = A({ ...X, width: n, height: i }, t.config);
|
|
530
|
+
const c = (u, g = !1) => {
|
|
531
|
+
g && u.config && (r = A(r, u.config));
|
|
532
|
+
const d = u.data.map((y) => ({ date: new Date(y.date), value: y.value })).sort((y, w) => y.date.getTime() - w.date.getTime()), h = J(d, r), m = K(d, r);
|
|
533
|
+
s.attr("class", `sc-charts sc-charts__${r.theme}`).attr("preserveAspectRatio", "xMinYMin meet").attr("viewBox", `0 0 ${n} ${i}`).style("width", "100%").style("height", "100%").selectAll("*").remove();
|
|
534
|
+
const f = {
|
|
535
535
|
chartId: t.chartId,
|
|
536
|
-
svg:
|
|
537
|
-
data:
|
|
536
|
+
svg: s,
|
|
537
|
+
data: d,
|
|
538
538
|
x: h,
|
|
539
|
-
y:
|
|
539
|
+
y: m,
|
|
540
540
|
config: r,
|
|
541
541
|
action: "none"
|
|
542
542
|
};
|
|
543
|
-
Z(
|
|
543
|
+
Z(f);
|
|
544
544
|
const p = {
|
|
545
|
-
...
|
|
546
|
-
elements: W(
|
|
545
|
+
...f,
|
|
546
|
+
elements: W(f)
|
|
547
547
|
};
|
|
548
548
|
q(p);
|
|
549
549
|
};
|
|
550
|
-
return
|
|
551
|
-
update: (
|
|
552
|
-
destroy: () =>
|
|
550
|
+
return c(t), {
|
|
551
|
+
update: (u) => c(u, !0),
|
|
552
|
+
destroy: () => s.remove()
|
|
553
553
|
};
|
|
554
554
|
};
|
|
555
555
|
export {
|