charts-core 1.0.10 → 1.0.11

package/dist/charts-core.js

@@ -1,27 +1,36 @@
 import * as x from "d3";
 const P = (e) => {
-  const { svg: t, config: r, y: a, width: n } = e, { margin: s, yAxis: o } = r, { customTicks: l, tickFormat: d, tickValues: i, ticks: c, isShow: u } = o;
-  if (!u) return null;
-  t.append("g").attr("transform", `translate(${n - s.right},0)`).call((h) => {
-    let g = x.axisRight(a);
-    l && d ? g = g.tickFormat(d) : g = g.tickFormat((m) => {
-      const f = Number(m), y = (p) => p.toString().replace(/\.0+$/, "");
+  const { svg: t, config: r, y: a, width: n } = e, { margin: s, yAxis: o } = r, { customTicks: c, tickFormat: d, tickValues: i, ticks: l, isShow: g } = o;
+  if (!g) return null;
+  t.append("g").attr("transform", `translate(${n - s.right},0)`).call((u) => {
+    let h = x.axisRight(a);
+    c && d ? h = h.tickFormat(d) : h = h.tickFormat((m) => {
+      const f = Number(m), y = (w) => w.toString().replace(/\.0+$/, "");
       return Math.abs(f) >= 1e12 ? y(f / 1e12) + "T" : Math.abs(f) >= 1e9 ? y(f / 1e9) + "B" : Math.abs(f) >= 1e6 ? y(f / 1e6) + "M" : Math.abs(f) >= 1e3 ? y(f / 1e3) + "K" : y(f);
-    }), l && c && (g = Array.isArray(c) ? g.ticks(...c) : g.ticks(c)), l && i && (g = g.tickValues(i)), h.call(g);
-  }).call((h) => {
-    let g = [];
-    h.selectAll(".tick").each((m) => g.push(m)), e.yTicks = g;
-  }).call((h) => h.select(".domain").remove()).call((h) => h.selectAll(".tick line").remove()).call((h) => h.selectAll(".tick text").classed("sc-charts__y-axis-tick", !0)).attr("font-family", "inherit");
+    }), c && l && (h = Array.isArray(l) ? h.ticks(...l) : h.ticks(l)), c && i && (h = h.tickValues(i)), u.call(h);
+  }).call((u) => {
+    let h = [];
+    u.selectAll(".tick").each((m) => h.push(m)), e.yTicks = h;
+  }).call((u) => u.select(".domain").remove()).call((u) => u.selectAll(".tick line").remove()).call((u) => {
+    const h = u.selectAll(".tick text");
+    h.classed("sc-charts__y-axis-tick", !0).attr("text-anchor", "start");
+    const m = h.nodes().map((y) => y.getBBox().width), f = Math.max(...m);
+    u.selectAll(".tick").each(function(y, w) {
+      var A;
+      const p = x.select(this), v = p.select("text"), N = m[w], C = f - N, M = p.append("g").attr("transform", "translate(10, 0)");
+      v.attr("x", C), v.remove(), (A = M.node()) == null || A.appendChild(v.node());
+    });
+  }).attr("font-family", "inherit");
 }, W = (e) => {
-  const { svg: t, config: r, x: a, height: n } = e, { margin: s, xAxis: o } = r, { isShow: l, tickValues: d, tickFormat: i, customTicks: c, ticks: u } = o;
-  if (!l) return null;
-  t.append("g").attr("transform", `translate(0,${n - s.bottom})`).call((h) => {
-    let g = x.axisBottom(a);
-    c ? (i && (g = g.tickFormat(i)), u && (g = Array.isArray(u) ? g.ticks(...u) : g.ticks(u)), d && (g = g.tickValues(d))) : g.ticks(5), h.call(g);
-  }).call((h) => h.select(".domain").remove()).call((h) => {
-    let g = [];
-    h.selectAll(".tick").each((m) => g.push(m)), e.xTicks = g;
-  }).call((h) => h.selectAll(".tick line").remove()).call((h) => h.selectAll(".tick text").classed("sc-charts__x-axis-tick", !0)).attr("font-family", "inherit");
+  const { svg: t, config: r, x: a, height: n } = e, { margin: s, xAxis: o } = r, { isShow: c, tickValues: d, tickFormat: i, customTicks: l, ticks: g } = o;
+  if (!c) return null;
+  t.append("g").attr("transform", `translate(0,${n - s.bottom})`).call((u) => {
+    let h = x.axisBottom(a);
+    l ? (i && (h = h.tickFormat(i)), g && (h = Array.isArray(g) ? h.ticks(...g) : h.ticks(g)), d && (h = h.tickValues(d))) : h.ticks(5), u.call(h);
+  }).call((u) => u.select(".domain").remove()).call((u) => {
+    let h = [];
+    u.selectAll(".tick").each((m) => h.push(m)), e.xTicks = h;
+  }).call((u) => u.selectAll(".tick line").remove()).call((u) => u.selectAll(".tick text").classed("sc-charts__x-axis-tick", !0)).attr("font-family", "inherit");
 }, X = (e) => {
   const { svg: t, config: r, y: a, width: n } = e, {
     margin: s,
@@ -29,8 +38,8 @@ const P = (e) => {
   } = r;
   if (o !== "none") {
     if (o.startsWith("zero-line")) {
-      const l = t.append("line").attr("x1", 0 + s.left).attr("x2", n - s.right).attr("y1", a(0)).attr("y2", a(0)).attr("stroke", "var(--sc-color-axis-zero-line)").attr("stroke-width", 1);
-      o === "zero-line-dashed" && l.attr("stroke-dasharray", "4 4");
+      const c = t.append("line").attr("x1", 0 + s.left).attr("x2", n - s.right).attr("y1", a(0)).attr("y2", a(0)).attr("stroke", "var(--sc-color-axis-zero-line)").attr("stroke-width", 1);
+      o === "zero-line-dashed" && c.attr("stroke-dasharray", "4 4");
     }
     o.startsWith("every-line") && (e.yTicks || a.ticks()).forEach((d) => {
       const i = t.append("line").attr("x1", 0 + s.left).attr("x2", n - s.right).attr("y1", a(d)).attr("y2", a(d)).attr("stroke", "var(--sc-color-axis-zero-line)").attr("stroke-width", 1);
@@ -78,35 +87,35 @@ function V(e, t, r, a) {
   return s < r ? r : o > a ? a - e.width : t - n;
 }
 const D = (e, { x1: t, x2: r, y1: a, y2: n }) => e.append("line").attr("x1", t).attr("x2", r).attr("y1", a).attr("y2", n).attr("stroke", "var(--sc-color-axis-zero-line)").attr("stroke-width", 1), K = (e) => {
-  const { svg: t, config: r, x: a, y: n, height: s, data: o, wrapperNode: l } = e, {
+  const { svg: t, config: r, x: a, y: n, height: s, data: o, wrapperNode: c } = e, {
     margin: d,
-    grid: { verticalStyle: i, tooltipNode: c, hoverCirclesRadius: u, hoverCirclesAdditionalArea: h }
+    grid: { verticalStyle: i, tooltipNode: l, hoverCirclesRadius: g, hoverCirclesAdditionalArea: u }
   } = r;
   if (i !== "none" && (i.startsWith("every-line") && (e.xTicks || a.ticks()).forEach((m) => {
     const f = t.append("line").attr("x1", a(m)).attr("x2", a(m)).attr("y1", d.top).attr("y2", s - d.bottom).attr("stroke", "var(--sc-color-axis-zero-line)").attr("stroke-width", 1);
     i === "every-line-dashed" && f.attr("stroke-dasharray", "4 4");
   }), i === "hovered-circles")) {
-    const g = n.range()[0], m = a(o[0].date), f = a(o[o.length - 1].date);
-    D(t, { x1: m, x2: f, y1: g, y2: g });
-    const { tooltipContainer: y, tooltip: p, tooltipArrow: v } = J(l);
-    o.forEach((w, N) => {
-      const A = a(w.date), M = n(w.value), $ = o[N - 1], b = N > 0 && $ && w.value === $.value;
-      b || D(t, { x1: A, x2: A, y1: M, y2: g });
-      const G = U(t, b, {
-        x: A,
-        y: g,
-        r: u,
-        hr: h
+    const h = n.range()[0], m = a(o[0].date), f = a(o[o.length - 1].date);
+    D(t, { x1: m, x2: f, y1: h, y2: h });
+    const { tooltipContainer: y, tooltip: w, tooltipArrow: p } = J(c);
+    o.forEach((v, N) => {
+      const C = a(v.date), M = n(v.value), A = o[N - 1], k = N > 0 && A && v.value === A.value;
+      k || D(t, { x1: C, x2: C, y1: M, y2: h });
+      const G = U(t, k, {
+        x: C,
+        y: h,
+        r: g,
+        hr: u
       });
-      c && G.on("mouseover", function() {
-        Q(p), y.style.display = "block", p.append(c({ date: w.date, value: b ? null : w.value }));
-        const H = p.getBoundingClientRect(), O = V(
+      l && G.on("mouseover", function() {
+        Q(w), y.style.display = "block", w.append(l({ date: v.date, value: k ? null : v.value }));
+        const H = w.getBoundingClientRect(), O = V(
           H,
-          a(w.date),
+          a(v.date),
           e.config.margin.left - e.config.grid.tooltipArrowSize,
           e.width - e.config.margin.right + e.config.grid.tooltipArrowSize
         );
-        p.style.left = O + "px", v.style.left = a(w.date) + "px";
+        w.style.left = O + "px", p.style.left = a(v.date) + "px";
       }).on("mouseout", function() {
         y.style.display = "none";
       });
@@ -122,7 +131,7 @@ const D = (e, { x1: t, x2: r, y1: a, y2: n }) => e.append("line").attr("x1", t).
   return a.empty() && (a = e.append("linearGradient").attr("gradientUnits", "userSpaceOnUse").attr("id", t)), a.attr("x1", r.x1).attr("y1", r.x2).attr("x2", r.y1).attr("y2", r.y2), r.stops.forEach(({ offset: n, stopColor: s }) => {
     a.append("stop").attr("offset", n).attr("stop-color", s);
   }), a;
-}, k = (e) => {
+}, $ = (e) => {
   const t = x.select(e).select("defs");
   return t.empty() ? x.select(e).append("defs") : t;
 }, Y = (e) => {
@@ -167,7 +176,7 @@ const D = (e, { x1: t, x2: r, y1: a, y2: n }) => e.append("line").attr("x1", t).
     ...t == null ? void 0 : t.selection
   }
 }), j = (e, t = {}) => {
-  const r = e.node(), a = k(r), n = (l, d) => T(a, l, {
+  const r = e.node(), a = $(r), n = (c, d) => T(a, c, {
     x1: "0%",
     y1: "0%",
     x2: "0%",
@@ -182,11 +191,11 @@ const D = (e, { x1: t, x2: r, y1: a, y2: n }) => e.append("line").attr("x1", t).
   n("gradient-range-borders-up", "var(--sc-color-selection-up)"), n("gradient-range-borders-down", "var(--sc-color-selection-down)");
   const s = "sc-charts__border-range-line", o = e.append("line").classed(s, !0).style("display", t.hidden ? "none" : "block");
   return {
-    className(l, d) {
-      l === "remove" ? o.classed(`${s}${d}`, !1) : o.classed(`${s}${d}`, !0);
+    className(c, d) {
+      c === "remove" ? o.classed(`${s}${d}`, !1) : o.classed(`${s}${d}`, !0);
     },
-    update({ x1: l, x2: d, y1: i, y2: c, hidden: u }) {
-      l !== void 0 && o.attr("x1", l), d !== void 0 && o.attr("x2", d), i !== void 0 && o.attr("y1", i), c !== void 0 && o.attr("y2", c), u !== void 0 && o.style("display", u ? "none" : "block");
+    update({ x1: c, x2: d, y1: i, y2: l, hidden: g }) {
+      c !== void 0 && o.attr("x1", c), d !== void 0 && o.attr("x2", d), i !== void 0 && o.attr("y1", i), l !== void 0 && o.attr("y2", l), g !== void 0 && o.style("display", g ? "none" : "block");
     },
     destroy() {
       o.remove();
@@ -198,16 +207,16 @@ const D = (e, { x1: t, x2: r, y1: a, y2: n }) => e.append("line").attr("x1", t).
     className(n, s) {
       n === "remove" ? r.classed(`${a}${s}`, !1) : r.classed(`${a}${s}`, !0);
     },
-    update({ cx: n, cy: s, hidden: o, fill: l }) {
-      n !== void 0 && r.attr("cx", n), s !== void 0 && r.attr("cy", s), l !== void 0 && r.attr("fill", l), o !== void 0 && r.style("display", o ? "none" : "block");
+    update({ cx: n, cy: s, hidden: o, fill: c }) {
+      n !== void 0 && r.attr("cx", n), s !== void 0 && r.attr("cy", s), c !== void 0 && r.attr("fill", c), o !== void 0 && r.style("display", o ? "none" : "block");
     },
     destroy() {
       r.remove();
     }
   };
 }, te = (e, t = {}) => {
-  const r = "sc-charts__hover-line", a = e.append("line").style("display", t.hidden ? "none" : "block").classed(r, !0), n = e.node(), s = k(n);
-  return ((l, d) => T(s, l, {
+  const r = "sc-charts__hover-line", a = e.append("line").style("display", t.hidden ? "none" : "block").classed(r, !0), n = e.node(), s = $(n);
+  return ((c, d) => T(s, c, {
     x1: "0%",
     y1: "0%",
     x2: "0%",
@@ -219,62 +228,62 @@ const D = (e, { x1: t, x2: r, y1: a, y2: n }) => e.append("line").attr("x1", t).
       { offset: "100%", stopColor: "rgba(255, 255, 255, 0)" }
     ]
   }))("hover-line-gradient", "var(--sc-color-hover-line)"), {
-    className(l, d) {
-      l === "remove" ? a.classed(`${r}${d}`, !1) : a.classed(`${r}${d}`, !0);
+    className(c, d) {
+      c === "remove" ? a.classed(`${r}${d}`, !1) : a.classed(`${r}${d}`, !0);
     },
-    update({ x1: l, x2: d, y1: i, y2: c, hidden: u }) {
-      l !== void 0 && a.attr("x1", l), d !== void 0 && a.attr("x2", d), i !== void 0 && a.attr("y1", i), c !== void 0 && a.attr("y2", c), u !== void 0 && a.style("display", u ? "none" : "block");
+    update({ x1: c, x2: d, y1: i, y2: l, hidden: g }) {
+      c !== void 0 && a.attr("x1", c), d !== void 0 && a.attr("x2", d), i !== void 0 && a.attr("y1", i), l !== void 0 && a.attr("y2", l), g !== void 0 && a.style("display", g ? "none" : "block");
     },
     destroy() {
       a.remove();
     }
   };
-}, C = "sc-charts__range-tooltip", F = x.timeFormat("%b %e, %I:%M %p"), re = (e) => {
+}, b = "sc-charts__range-tooltip", F = x.timeFormat("%b %e, %I:%M %p"), re = (e) => {
   const t = x.format(",.2f");
   return `${e < 0 ? "-" : ""}$${t(Math.abs(e))}`;
 };
 function ae(e) {
   const t = "http://www.w3.org/2000/svg", r = document.createElement("div");
-  r.className = C, r.style.position = "absolute", r.style.top = "0", r.style.pointerEvents = "none", r.style.display = "none", e.append(r);
+  r.className = b, r.style.position = "absolute", r.style.top = "0", r.style.pointerEvents = "none", r.style.display = "none", e.append(r);
   const a = document.createElement("div");
-  a.className = `${C}-container`, r.append(a);
+  a.className = `${b}-container`, r.append(a);
   const n = document.createElement("div");
-  n.className = `${C}-sum`, a.append(n);
+  n.className = `${b}-sum`, a.append(n);
   const s = document.createElement("div");
-  s.className = `${C}-sum-icon`;
+  s.className = `${b}-sum-icon`;
   const o = document.createElementNS(t, "svg");
   o.setAttribute("width", "14"), o.setAttribute("height", "14"), o.setAttribute("viewBox", "0 0 14 14"), o.setAttribute("fill", "none"), o.setAttribute("xmlns", t);
-  const l = document.createElementNS(t, "path");
-  l.setAttribute(
+  const c = document.createElementNS(t, "path");
+  c.setAttribute(
     "d",
     "M7 0.5C5.71442 0.5 4.45772 0.881218 3.3888 1.59545C2.31988 2.30968 1.48676 3.32484 0.994786 4.51256C0.502816 5.70028 0.374095 7.00721 0.624899 8.26809C0.875703 9.52896 1.49477 10.6872 2.40381 11.5962C3.31285 12.5052 4.47104 13.1243 5.73192 13.3751C6.99279 13.6259 8.29973 13.4972 9.48744 13.0052C10.6752 12.5132 11.6903 11.6801 12.4046 10.6112C13.1188 9.54229 13.5 8.28558 13.5 7C13.4982 5.27665 12.8128 3.62441 11.5942 2.40582C10.3756 1.18722 8.72335 0.50182 7 0.5ZM9.35375 6.85375C9.30732 6.90024 9.25217 6.93712 9.19147 6.96228C9.13077 6.98744 9.06571 7.00039 9 7.00039C8.93429 7.00039 8.86923 6.98744 8.80853 6.96228C8.74783 6.93712 8.69269 6.90024 8.64625 6.85375L7.5 5.70687V9.5C7.5 9.63261 7.44732 9.75979 7.35356 9.85355C7.25979 9.94732 7.13261 10 7 10C6.86739 10 6.74022 9.94732 6.64645 9.85355C6.55268 9.75979 6.5 9.63261 6.5 9.5V5.70687L5.35375 6.85375C5.25993 6.94757 5.13268 7.00028 5 7.00028C4.86732 7.00028 4.74007 6.94757 4.64625 6.85375C4.55243 6.75993 4.49972 6.63268 4.49972 6.5C4.49972 6.36732 4.55243 6.24007 4.64625 6.14625L6.64625 4.14625C6.69269 4.09976 6.74783 4.06288 6.80853 4.03772C6.86923 4.01256 6.9343 3.99961 7 3.99961C7.06571 3.99961 7.13077 4.01256 7.19147 4.03772C7.25217 4.06288 7.30732 4.09976 7.35375 4.14625L9.35375 6.14625C9.40024 6.19269 9.43712 6.24783 9.46228 6.30853C9.48744 6.36923 9.5004 6.43429 9.5004 6.5C9.5004 6.56571 9.48744 6.63077 9.46228 6.69147C9.43712 6.75217 9.40024 6.80731 9.35375 6.85375Z"
-  ), l.setAttribute("fill", "currentColor"), o.appendChild(l), s.appendChild(o), n.append(s);
+  ), c.setAttribute("fill", "currentColor"), o.appendChild(c), s.appendChild(o), n.append(s);
   const d = document.createElement("div");
   n.append(d);
   const i = document.createElement("div");
-  return i.className = `${C}-time`, a.append(i), { wrapper: r, sumNode: d, timeNode: i };
+  return i.className = `${b}-time`, a.append(i), { wrapper: r, sumNode: d, timeNode: i };
 }
 const se = (e) => {
   const { wrapper: t, sumNode: r, timeNode: a } = ae(e.wrapperNode);
   return {
     className(n, s) {
-      n === "remove" ? t.classList.remove(`${C}${s}`) : t.classList.add(`${C}${s}`);
+      n === "remove" ? t.classList.remove(`${b}${s}`) : t.classList.add(`${b}${s}`);
     },
-    update({ leftPoint: n, rightPoint: s, x: o, y: l, hidden: d, closest: i }) {
+    update({ leftPoint: n, rightPoint: s, x: o, y: c, hidden: d, closest: i }) {
       if (n && s && i && o !== void 0) {
-        const c = s.value - n.value, { sumFormatter: u, timeFormatter: h } = e.config.selection, g = (e.x(s.date) + e.x(n.date)) / 2, m = e.x(i.date) < g ? "left" : "right";
+        const l = s.value - n.value, { sumFormatter: g, timeFormatter: u } = e.config.selection, h = (e.x(s.date) + e.x(n.date)) / 2, m = e.x(i.date) < h ? "left" : "right";
         let f = "", y = "";
-        if (u)
-          f = u({ left: n.value, right: s.value, direction: m });
+        if (g)
+          f = g({ left: n.value, right: s.value, direction: m });
         else {
-          const p = (c / Math.abs(n.value) * 100).toFixed(2);
-          f = `${re(c)} (${p}%)`;
+          const w = (l / Math.abs(n.value) * 100).toFixed(2);
+          f = `${re(l)} (${w}%)`;
         }
-        h ? y = h({ left: n.date, right: s.date, direction: m }) : y = `${F(n.date)} to ${F(s.date)}`, r.textContent = f, a.textContent = y, requestAnimationFrame(() => {
-          const p = t.getBoundingClientRect(), v = e.wrapperNode.getBoundingClientRect(), w = e.x(n.date), N = e.x(s.date);
-          let M = (w + N) / 2 - p.width / 2;
-          const $ = 0, b = v.width - p.width;
-          M < $ && (M = $), M > b && (M = b), t.style.left = `${M}px`, t.style.top = `${l}px`;
+        u ? y = u({ left: n.date, right: s.date, direction: m }) : y = `${F(n.date)} to ${F(s.date)}`, r.textContent = f, a.textContent = y, requestAnimationFrame(() => {
+          const w = t.getBoundingClientRect(), p = e.wrapperNode.getBoundingClientRect(), v = e.x(n.date), N = e.x(s.date);
+          let M = (v + N) / 2 - w.width / 2;
+          const A = 0, k = p.width - w.width;
+          M < A && (M = A), M > k && (M = k), t.style.left = `${M}px`, t.style.top = `${c}px`;
         });
       }
       d !== void 0 && (t.style.display = d ? "none" : "block");
@@ -295,10 +304,10 @@ function ie(e) {
   const a = document.createElement("div");
   return a.className = `${L}-time`, t.appendChild(a), { wrapper: t, sumNode: r, timeNode: a };
 }
-function le(e, t, r) {
+function ce(e, t, r) {
   return e ? t + E + e.width < r ? t + E : t - E - e.width : null;
 }
-const ce = (e) => {
+const le = (e) => {
   const { wrapper: t, sumNode: r, timeNode: a } = ie(e.wrapperNode);
   return {
     className(n, s) {
@@ -306,9 +315,9 @@ const ce = (e) => {
     },
     update({ hidden: n, dataItem: s }) {
       if (s) {
-        const { sumFormatter: o, timeFormatter: l } = e.config.hover;
-        r.textContent = o ? o(s.value) : ne(s.value), a.textContent = l ? l(s.date) : oe(s.date), requestAnimationFrame(() => {
-          const d = t.getBoundingClientRect(), i = le(
+        const { sumFormatter: o, timeFormatter: c } = e.config.hover;
+        r.textContent = o ? o(s.value) : ne(s.value), a.textContent = c ? c(s.date) : oe(s.date), requestAnimationFrame(() => {
+          const d = t.getBoundingClientRect(), i = ce(
             d,
             e.x(s.date),
             e.width - e.config.margin.right
@@ -374,8 +383,8 @@ const ce = (e) => {
   enableBelowZeroLine: !1,
   curveTension: 1
 }, _ = (e) => x.curveCardinal.tension(e.config.curveTension), he = (e) => {
-  const { svg: t, data: r, x: a, y: n, config: s } = e, o = t.node(), l = k(o);
-  T(l, "main-line-area-gradient", {
+  const { svg: t, data: r, x: a, y: n, config: s } = e, o = t.node(), c = $(o);
+  T(c, "main-line-area-gradient", {
     x1: "0%",
     y1: "0%",
     x2: "0%",
@@ -385,24 +394,24 @@ const ce = (e) => {
       { offset: "100%", stopColor: "rgba(255, 255, 255, 0)" }
     ]
   });
-  const i = x.area().x((h) => a(h.date)).y0(n.range()[0]).y1((h) => n(h.value)).curve(_(e)), c = "sc-charts__main-line-area", u = t.append("path").datum(r).attr("d", i).attr("class", c).classed(`${c}_hidden`, !s.hasMainLineArea);
+  const i = x.area().x((u) => a(u.date)).y0(n.range()[0]).y1((u) => n(u.value)).curve(_(e)), l = "sc-charts__main-line-area", g = t.append("path").datum(r).attr("d", i).attr("class", l).classed(`${l}_hidden`, !s.hasMainLineArea);
   return {
-    className(h, g) {
-      h === "remove" ? u.classed(`${c}${g}`, !1) : u.classed(`${c}${g}`, !0);
+    className(u, h) {
+      u === "remove" ? g.classed(`${l}${h}`, !1) : g.classed(`${l}${h}`, !0);
     },
-    update({ data: h, hidden: g }) {
-      if (h !== void 0 && u.datum(h).attr("d", i), g !== void 0) {
+    update({ data: u, hidden: h }) {
+      if (u !== void 0 && g.datum(u).attr("d", i), h !== void 0) {
         if (!s.hasMainLineArea) return null;
-        u.classed(`${c}_hidden`, g);
+        g.classed(`${l}_hidden`, h);
       }
     },
     destroy() {
-      u.remove();
+      g.remove();
     }
   };
 }, ue = (e, t = {}) => {
-  const r = "sc-charts__range-line-area", { svg: a, x: n, y: s, config: o, data: l, chartId: d } = e, { clip: i } = t, c = a.node(), u = k(c), h = "range-line-area-gradient";
-  T(u, h + "_up", {
+  const r = "sc-charts__range-line-area", { svg: a, x: n, y: s, config: o, data: c, chartId: d } = e, { clip: i } = t, l = a.node(), g = $(l), u = "range-line-area-gradient";
+  T(g, u + "_up", {
     x1: "0%",
     y1: "0%",
     x2: "0%",
@@ -411,7 +420,7 @@ const ce = (e) => {
       { offset: "0%", stopColor: "var(--sc-color-selection-up)" },
       { offset: "100%", stopColor: "rgba(255, 255, 255, 0)" }
     ]
-  }), T(u, h + "_down", {
+  }), T(g, u + "_down", {
     x1: "0%",
     y1: "0%",
     x2: "0%",
@@ -421,42 +430,42 @@ const ce = (e) => {
       { offset: "100%", stopColor: "rgba(255, 255, 255, 0)" }
     ]
   });
-  const g = x.area().x((v) => n(v.date)).y0(s.range()[0]).y1((v) => s(v.value)).curve(_(e)), m = `${d}-clip-${r}`, y = u.append("clipPath").attr("id", m).append("rect").attr("x", (i == null ? void 0 : i.x) || 0).attr("y", (i == null ? void 0 : i.y) || 0).attr("width", (i == null ? void 0 : i.width) || "100%").attr("height", (i == null ? void 0 : i.height) || "100%"), p = a.append("path").datum(l).attr("d", g).attr("class", r).classed(`${r}_hidden`, !o.hasMainLineArea).attr("clip-path", `url(#${m})`);
+  const h = x.area().x((p) => n(p.date)).y0(s.range()[0]).y1((p) => s(p.value)).curve(_(e)), m = `${d}-clip-${r}`, y = g.append("clipPath").attr("id", m).append("rect").attr("x", (i == null ? void 0 : i.x) || 0).attr("y", (i == null ? void 0 : i.y) || 0).attr("width", (i == null ? void 0 : i.width) || "100%").attr("height", (i == null ? void 0 : i.height) || "100%"), w = a.append("path").datum(c).attr("d", h).attr("class", r).classed(`${r}_hidden`, !o.hasMainLineArea).attr("clip-path", `url(#${m})`);
   return {
-    className(v, w) {
-      v === "remove" ? p.classed(`${r}${w}`, !1) : p.classed(`${r}${w}`, !0);
+    className(p, v) {
+      p === "remove" ? w.classed(`${r}${v}`, !1) : w.classed(`${r}${v}`, !0);
     },
-    update({ data: v, hidden: w, clip: N }) {
-      v !== void 0 && p.datum(v).attr("d", g), w !== void 0 && p.classed(`${r}_hidden`, w), N !== void 0 && y.attr("x", N.x).attr("y", N.y).attr("width", N.width).attr("height", N.height);
+    update({ data: p, hidden: v, clip: N }) {
+      p !== void 0 && w.datum(p).attr("d", h), v !== void 0 && w.classed(`${r}_hidden`, v), N !== void 0 && y.attr("x", N.x).attr("y", N.y).attr("width", N.width).attr("height", N.height);
     },
     destroy() {
-      p.remove();
+      w.remove();
     }
   };
 }, S = (e, t) => {
-  const { svg: r, data: a, x: n, y: s, chartId: o } = e, { baseClassName: l, id: d, clip: i } = t, c = r.node(), u = k(c), h = x.line().x((p) => n(p.date)).y((p) => s(p.value)).curve(_(e)), g = `${o}-clip-${l}`, f = u.append("clipPath").attr("id", g).append("rect").attr("x", (i == null ? void 0 : i.x) || 0).attr("y", (i == null ? void 0 : i.y) || 0).attr("width", (i == null ? void 0 : i.width) || "100%").attr("height", (i == null ? void 0 : i.height) || "100%"), y = r.append("path").classed(l, !0).datum(a).attr("d", h).attr("id", d).attr("clip-path", `url(#${g})`);
+  const { svg: r, data: a, x: n, y: s, chartId: o } = e, { baseClassName: c, id: d, clip: i } = t, l = r.node(), g = $(l), u = x.line().x((w) => n(w.date)).y((w) => s(w.value)).curve(_(e)), h = `${o}-clip-${c}`, f = g.append("clipPath").attr("id", h).append("rect").attr("x", (i == null ? void 0 : i.x) || 0).attr("y", (i == null ? void 0 : i.y) || 0).attr("width", (i == null ? void 0 : i.width) || "100%").attr("height", (i == null ? void 0 : i.height) || "100%"), y = r.append("path").classed(c, !0).datum(a).attr("d", u).attr("id", d).attr("clip-path", `url(#${h})`);
   return {
-    className(p, v) {
-      p === "remove" ? y.classed(`${l}${v}`, !1) : y.classed(`${l}${v}`, !0);
+    className(w, p) {
+      w === "remove" ? y.classed(`${c}${p}`, !1) : y.classed(`${c}${p}`, !0);
     },
-    update({ data: p, clip: v, hidden: w }) {
-      p !== void 0 && y.datum(p).attr("d", h), w !== void 0 && y.classed(`${l}_hidden`, w), v !== void 0 && f.attr("x", v.x).attr("y", v.y).attr("width", v.width).attr("height", v.height);
+    update({ data: w, clip: p, hidden: v }) {
+      w !== void 0 && y.datum(w).attr("d", u), v !== void 0 && y.classed(`${c}_hidden`, v), p !== void 0 && f.attr("x", p.x).attr("y", p.y).attr("width", p.width).attr("height", p.height);
     },
     destroy() {
       y.remove();
     }
   };
 }, ge = (e, t) => {
-  const { svg: r, data: a, x: n, y: s, chartId: o, config: l } = e, { baseClassName: d, id: i, clip: c } = t, u = r.node(), h = k(u), g = x.line().x((v) => n(v.date)).y((v) => s(v.value)).curve(_(e)), m = `${o}-clip-${d}`, y = h.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%"), p = r.append("path").classed(d, !0).datum(a).attr("d", g).attr("id", i).attr("clip-path", `url(#${m})`);
+  const { svg: r, data: a, x: n, y: s, chartId: o, config: c } = e, { baseClassName: d, id: i, clip: l } = t, g = r.node(), u = $(g), h = x.line().x((p) => n(p.date)).y((p) => s(p.value)).curve(_(e)), m = `${o}-clip-${d}`, y = u.append("clipPath").attr("id", m).append("rect").attr("x", (l == null ? void 0 : l.x) || 0).attr("y", (l == null ? void 0 : l.y) || 0).attr("width", (l == null ? void 0 : l.width) || "100%").attr("height", (l == null ? void 0 : l.height) || "100%"), w = r.append("path").classed(d, !0).datum(a).attr("d", h).attr("id", i).attr("clip-path", `url(#${m})`);
   return {
-    className(v, w) {
-      v === "remove" ? p.classed(`${d}${w}`, !1) : p.classed(`${d}${w}`, !0);
+    className(p, v) {
+      p === "remove" ? w.classed(`${d}${v}`, !1) : w.classed(`${d}${v}`, !0);
     },
-    update({ data: v, clip: w, hidden: N }) {
-      v !== void 0 && p.datum(v).attr("d", g), N !== void 0 && p.classed(`${d}_hidden`, N), w !== void 0 && (l.hover.transitionName === "default" ? y.transition().duration(l.hover.transitionDuration).attr("x", w.x).attr("y", w.y).attr("width", w.width).attr("height", w.height).ease(x.easeLinear) : y.attr("x", w.x).attr("y", w.y).attr("width", w.width).attr("height", w.height));
+    update({ data: p, clip: v, hidden: N }) {
+      p !== void 0 && w.datum(p).attr("d", h), N !== void 0 && w.classed(`${d}_hidden`, N), v !== void 0 && (c.hover.transitionName === "default" ? y.transition().duration(c.hover.transitionDuration).attr("x", v.x).attr("y", v.y).attr("width", v.width).attr("height", v.height).ease(x.easeLinear) : y.attr("x", v.x).attr("y", v.y).attr("width", v.width).attr("height", v.height));
     },
     destroy() {
-      p.remove();
+      w.remove();
     }
   };
 }, me = (e) => {
@@ -464,22 +473,22 @@ const ce = (e) => {
   let r;
   return t >= 1e9 ? r = (e / 1e9).toFixed(1) + "B" : t >= 1e6 ? r = (e / 1e6).toFixed(1) + "M" : t >= 1e3 ? r = (e / 1e3).toFixed(1) + "K" : r = e.toFixed(1), r;
 }, fe = (e, t) => {
-  const { svg: r, data: a, x: n, y: s } = e, { baseClassName: o } = t, l = r.append("g").classed(o, !0), d = l.append("circle").attr("r", 5).classed(`${o}-circle`, !0), i = l.append("text").attr("text-anchor", "middle").attr("dy", "-9px").classed(`${o}-label`, !0);
-  return ((u) => {
-    if (!u || u.length === 0) return;
-    const h = u[u.length - 1], g = n(h.date), m = s(h.value);
-    d.attr("cx", g).attr("cy", m);
+  const { svg: r, data: a, x: n, y: s } = e, { baseClassName: o } = t, c = r.append("g").classed(o, !0), d = c.append("circle").attr("r", 5).classed(`${o}-circle`, !0), i = c.append("text").attr("text-anchor", "middle").attr("dy", "-9px").classed(`${o}-label`, !0);
+  return ((g) => {
+    if (!g || g.length === 0) return;
+    const u = g[g.length - 1], h = n(u.date), m = s(u.value);
+    d.attr("cx", h).attr("cy", m);
     const f = e.config.extremePointFormatter || me;
-    i.attr("x", g).attr("y", m).text(f(h.value));
+    i.attr("x", h).attr("y", m).text(f(u.value));
   })(a), {
-    className(u, h) {
-      u === "remove" ? l.classed(`${o}${h}`, !1) : l.classed(`${o}${h}`, !0);
+    className(g, u) {
+      g === "remove" ? c.classed(`${o}${u}`, !1) : c.classed(`${o}${u}`, !0);
     },
-    update({ hidden: u }) {
-      u !== void 0 && l.classed(`${o}_hidden`, u);
+    update({ hidden: g }) {
+      g !== void 0 && c.classed(`${o}_hidden`, g);
     },
     destroy() {
-      l.remove();
+      c.remove();
     }
   };
 }, pe = (e) => {
@@ -502,31 +511,31 @@ const ce = (e) => {
     id: `${e.chartId}-sc-charts__below-zero-line`,
     clip: Y(e)
   }));
-  const l = I(e.svg, {
+  const c = I(e.svg, {
     className: "sc-charts__hover-circle",
     hidden: !0
-  }), d = j(e.svg), i = j(e.svg), c = S(e, {
+  }), d = j(e.svg), i = j(e.svg), l = S(e, {
     baseClassName: "sc-charts__range-line",
     id: `${e.chartId}-sc-charts__range-line`,
     clip: { x: 0, y: 0, width: "0", height: "0" }
-  }), u = I(e.svg, {
+  }), g = I(e.svg, {
     className: "sc-charts__range-circle-left",
     hidden: !0
-  }), h = I(e.svg, {
+  }), u = I(e.svg, {
     className: "sc-charts__range-circle-right",
     hidden: !0
-  }), g = se(e), m = ce(e), f = ue(e);
+  }), h = se(e), m = le(e), f = ue(e);
   return {
     hoverLine: n,
-    hoverCircle: l,
+    hoverCircle: c,
     rangeBorderLeft: d,
     rangeBorderRight: i,
-    rangeLine: c,
+    rangeLine: l,
     rangeLineArea: f,
-    rangeCircleLeft: u,
-    rangeCircleRight: h,
+    rangeCircleLeft: g,
+    rangeCircleRight: u,
     mainLine: t,
-    rangeTooltip: g,
+    rangeTooltip: h,
     highlightLine: s,
     hoverTooltip: m,
     mainLineArea: r,
@@ -542,25 +551,25 @@ const ce = (e) => {
       width: "100%",
       height: "100%"
     };
-  const [, n, s] = a, o = parseInt(n, 10), [l, d] = r.domain();
-  let i = new Date(l);
+  const [, n, s] = a, o = parseInt(n, 10), [c, d] = r.domain();
+  let i = new Date(c);
   for (; i < d; ) {
-    let c = new Date(i);
+    let l = new Date(i);
     switch (s) {
       case "M":
-        c.setMinutes(c.getMinutes() + o);
+        l.setMinutes(l.getMinutes() + o);
         break;
       case "h":
-        c.setHours(c.getHours() + o);
+        l.setHours(l.getHours() + o);
         break;
       case "d":
-        c.setDate(c.getDate() + o);
+        l.setDate(l.getDate() + o);
         break;
       case "w":
-        c.setDate(c.getDate() + o * 7);
+        l.setDate(l.getDate() + o * 7);
         break;
       case "m":
-        c = new Date(i.getFullYear(), i.getMonth() + o, 1);
+        l = new Date(i.getFullYear(), i.getMonth() + o, 1);
         break;
       default:
         return {
@@ -570,41 +579,41 @@ const ce = (e) => {
           height: "100%"
         };
     }
-    if (t >= i && t < c) {
-      const u = r(i), h = r(c);
+    if (t >= i && t < l) {
+      const g = r(i), u = r(l);
       return {
-        x: u,
+        x: g,
         y: 0,
-        width: h - u,
+        width: u - g,
         height: "100%"
       };
     }
-    i = new Date(c);
+    i = new Date(l);
   }
   if (t.getTime() === d.getTime()) {
-    let c = new Date(d);
+    let l = new Date(d);
     switch (s) {
       case "M":
-        c.setMinutes(c.getMinutes() - o);
+        l.setMinutes(l.getMinutes() - o);
         break;
       case "h":
-        c.setHours(c.getHours() - o);
+        l.setHours(l.getHours() - o);
         break;
       case "d":
-        c.setDate(c.getDate() - o);
+        l.setDate(l.getDate() - o);
         break;
       case "w":
-        c.setDate(c.getDate() - o * 7);
+        l.setDate(l.getDate() - o * 7);
         break;
       case "m":
-        c = new Date(d.getFullYear(), d.getMonth() - o, 1);
+        l = new Date(d.getFullYear(), d.getMonth() - o, 1);
         break;
     }
-    const u = r(c), h = r(d);
+    const g = r(l), u = r(d);
     return {
-      x: u,
+      x: g,
       y: 0,
-      width: h - u,
+      width: u - g,
       height: "100%"
     };
   }
@@ -637,15 +646,15 @@ const ce = (e) => {
     dataItem: t,
     hidden: !1
   });
-  const l = ve(e.config.hover.range, t.date, r);
+  const c = ve(e.config.hover.range, t.date, r);
   n.highlightLine.update({
-    clip: l,
+    clip: c,
     hidden: !1
   });
   const d = a.range()[0] - a(0) + s.bottom;
   d >= 0 && ((i = n.belowZeroLine) == null || i.update({
     clip: {
-      ...l,
+      ...c,
       y: a(0),
       height: d
     }
@@ -675,78 +684,78 @@ const ce = (e) => {
     y: n,
     config: { margin: s },
     height: o,
-    elements: l
-  } = e, d = a(t.date) < a(r.date) ? t : r, i = a(t.date) >= a(r.date) ? t : r, c = i.value - d.value >= 0, u = a(d.date), h = a(i.date), g = h - u;
-  l.rangeBorderLeft.update({
-    x1: u,
-    x2: u,
+    elements: c
+  } = e, d = a(t.date) < a(r.date) ? t : r, i = a(t.date) >= a(r.date) ? t : r, l = i.value - d.value >= 0, g = a(d.date), u = a(i.date), h = u - g;
+  c.rangeBorderLeft.update({
+    x1: g,
+    x2: g,
     y1: s.top,
     y2: o - s.bottom,
     hidden: !1
-  }), l.rangeBorderRight.update({
-    x1: h,
-    x2: h,
+  }), c.rangeBorderRight.update({
+    x1: u,
+    x2: u,
     y1: s.top,
     y2: o - s.bottom,
     hidden: !1
-  }), l.rangeCircleLeft.update({
-    cx: u,
+  }), c.rangeCircleLeft.update({
+    cx: g,
     cy: n(d.value),
     hidden: !1
-  }), l.rangeCircleRight.update({
-    cx: h,
+  }), c.rangeCircleRight.update({
+    cx: u,
     cy: n(i.value),
     hidden: !1
-  }), l.rangeLine.update({
+  }), c.rangeLine.update({
     clip: {
-      x: u,
+      x: g,
       y: 0,
-      width: g,
+      width: h,
       height: n.range()[0]
     },
     hidden: !1
-  }), l.rangeLineArea.update({
+  }), c.rangeLineArea.update({
     clip: {
-      x: u,
+      x: g,
       y: 0,
-      width: g,
+      width: h,
       height: n.range()[0]
     },
     hidden: !1
-  }), l.rangeTooltip.update({
+  }), c.rangeTooltip.update({
     rightPoint: i,
     leftPoint: d,
     closest: r,
-    x: u + g / 2,
+    x: g + h / 2,
     y: 0,
     hidden: !1
-  }), (m = l.belowZeroLine) == null || m.update({
+  }), (m = c.belowZeroLine) == null || m.update({
     hidden: !0
-  }), l.mainLineArea.update({ hidden: !0 }), ye(l, c), l.mainLine.className("add", "_selected-muted");
+  }), c.mainLineArea.update({ hidden: !0 }), ye(c, l), c.mainLine.className("add", "_selected-muted");
 }, Z = (e) => {
   var r;
   const { elements: t } = e;
   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 }), (r = t.belowZeroLine) == null || r.update({ hidden: !1 });
 }, xe = (e) => {
-  const { svg: t, data: r, x: a, config: n, width: s, height: o } = e, { margin: l, hover: d, selection: i } = n;
-  let c = null, u = !1;
-  const h = (m) => r.reduce(
+  const { svg: t, data: r, x: a, config: n, width: s, height: o } = e, { margin: c, hover: d, selection: i } = n;
+  let l = null, g = !1;
+  const u = (m) => r.reduce(
     (f, y) => Math.abs(a(f.date) - m) < Math.abs(a(y.date) - m) ? f : y
   );
-  t.append("rect").attr("width", s - l.left - l.right).attr("height", o - l.top - l.bottom).attr("x", l.left).attr("y", l.top).attr("fill", "transparent").on("mousemove", function(m) {
-    const [f] = x.pointer(m, this), y = h(f);
-    !u && d.enable ? (e.action = "hover", B(e, y)) : (e.action = u ? "selection" : "none", R(e)), c && i.enable && (e.action = "selection", we(e, c, y));
+  t.append("rect").attr("width", s - c.left - c.right).attr("height", o - c.top - c.bottom).attr("x", c.left).attr("y", c.top).attr("fill", "transparent").on("mousemove", function(m) {
+    const [f] = x.pointer(m, this), y = u(f);
+    !g && d.enable ? (e.action = "hover", B(e, y)) : (e.action = g ? "selection" : "none", R(e)), l && i.enable && (e.action = "selection", we(e, l, y));
   }).on("mouseleave", () => {
-    e.action = "none", u = !1, c = null, R(e), Z(e);
+    e.action = "none", g = !1, l = null, R(e), Z(e);
   }).on("mousedown", function(m) {
     if (i.enable) {
-      u = !0, e.action = "selection";
+      g = !0, e.action = "selection";
       const [f] = x.pointer(m, this);
-      c = h(f);
+      l = u(f);
     }
   }).on("mouseup", function(m) {
-    const [f] = x.pointer(m, this), y = h(f);
-    u = !1, c = null, e.action = "hover", i.enable && Z(e), d.enable && B(e, y);
+    const [f] = x.pointer(m, this), y = u(f);
+    g = !1, l = null, e.action = "hover", i.enable && Z(e), d.enable && B(e, y);
   });
 }, Ne = (e, t, r) => {
   const { margin: a } = t, n = x.scaleTime(), s = x.extent(e, (o) => new Date(o.date));
@@ -762,38 +771,38 @@ const ce = (e) => {
     return console.error(`chartId is required and must be a valid id 
       (only letters, numbers or underscores. The first character must be a letter)`), null;
   const a = r.append("div"), n = a.append("svg"), s = r.node();
-  let o = s.getBoundingClientRect(), l = o.width, d = o.height, i = z({ ...de }, t.config), c = t.data;
-  const u = () => {
-    o = s.getBoundingClientRect(), l = o.width, d = o.height, h({ data: c, config: i });
+  let o = s.getBoundingClientRect(), c = o.width, d = o.height, i = z({ ...de }, t.config), l = t.data;
+  const g = () => {
+    o = s.getBoundingClientRect(), c = o.width, d = o.height, u({ data: l, config: i });
   };
-  window.addEventListener("resize", u);
-  const h = (g, m = !1) => {
-    m && g.config && (i = z(i, g.config)), m && g.data && (c = g.data);
-    const f = c.map((N) => ({ date: new Date(N.date), value: N.value })).sort((N, A) => N.date.getTime() - A.date.getTime()), y = Ne(f, i, l), p = Me(f, i, d);
-    a.attr("class", `sc-charts sc-charts__${i.theme}`), n.attr("preserveAspectRatio", "xMinYMin meet").attr("viewBox", `0 0 ${l} ${d}`).style("width", "100%").style("height", "100%").selectAll("*").remove();
-    const v = {
+  window.addEventListener("resize", g);
+  const u = (h, m = !1) => {
+    m && h.config && (i = z(i, h.config)), m && h.data && (l = h.data);
+    const f = l.map((N) => ({ date: new Date(N.date), value: N.value })).sort((N, C) => N.date.getTime() - C.date.getTime()), y = Ne(f, i, c), w = Me(f, i, d);
+    a.attr("class", `sc-charts sc-charts__${i.theme}`), n.attr("preserveAspectRatio", "xMinYMin meet").attr("viewBox", `0 0 ${c} ${d}`).style("width", "100%").style("height", "100%").selectAll("*").remove();
+    const p = {
       chartId: t.chartId,
       svg: n,
       wrapperNode: a.node(),
       data: f,
       x: y,
-      y: p,
+      y: w,
       config: i,
       action: "none",
-      width: l,
+      width: c,
       height: d
     };
-    ee(v);
-    const w = {
-      ...v,
-      elements: pe(v)
+    ee(p);
+    const v = {
+      ...p,
+      elements: pe(p)
     };
-    xe(w);
+    xe(v);
   };
-  return h(t), {
-    update: (g) => h(g, !0),
+  return u(t), {
+    update: (h) => u(h, !0),
     destroy: () => {
-      window.removeEventListener("resize", u), n.remove();
+      window.removeEventListener("resize", g), n.remove();
     }
   };
 };