charts-core 0.0.21 → 1.0.0

package/dist/charts-core.js

@@ -1,73 +1,73 @@
-import * as v from "d3";
-const M = (e) => {
-  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;
-  if (!g) return null;
-  t.append("g").attr("transform", `translate(${l - o.right},0)`).call((d) => {
-    let h = v.axisRight(s);
-    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) => {
-      const f = Number(m), p = f < 0 ? "-" : "", y = v.format(".0s")(Math.abs(f));
-      return `${p}${y}`;
-    }), d.call(h);
-  }).call((d) => {
-    let h = [];
-    d.selectAll(".tick").each((m) => h.push(m)), e.yTicks = h;
-  }).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");
-}, S = (e) => {
-  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;
-  if (!i) return null;
-  t.append("g").attr("transform", `translate(0,${l - o.bottom})`).call((d) => {
-    let h = v.axisBottom(s);
-    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);
-  }).call((d) => d.select(".domain").remove()).call((d) => {
-    let h = [];
-    d.selectAll(".tick").each((m) => h.push(m)), e.xTicks = h;
-  }).call((d) => d.selectAll(".tick line").remove()).call((d) => d.selectAll(".tick text").classed("sc-charts__x-axis-tick", !0)).attr("font-family", "inherit");
-}, F = (e) => {
+import * as y from "d3";
+const z = (e) => {
+  const { svg: t, config: a, y: s } = e, { width: c, margin: i, yAxis: o } = a, { customTicks: d, tickFormat: n, tickValues: r, ticks: l, isShow: u } = o;
+  if (!u) return null;
+  t.append("g").attr("transform", `translate(${c - i.right},0)`).call((h) => {
+    let g = y.axisRight(s);
+    d ? (n && (g = g.tickFormat(n)), l && (g = Array.isArray(l) ? g.ticks(...l) : g.ticks(l)), r && (g = g.tickValues(r))) : g = g.tickFormat((m) => {
+      const x = Number(m), p = x < 0 ? "-" : "", v = y.format(".0s")(Math.abs(x));
+      return `${p}${v}`;
+    }), 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");
+}, G = (e) => {
+  const { svg: t, config: a, x: s } = e, { height: c, margin: i, xAxis: o } = a, { isShow: d, tickValues: n, tickFormat: r, customTicks: l, ticks: u } = o;
+  if (!d) return null;
+  t.append("g").attr("transform", `translate(0,${c - i.bottom})`).call((h) => {
+    let g = y.axisBottom(s);
+    l ? (r && (g = g.tickFormat(r)), u && (g = Array.isArray(u) ? g.ticks(...u) : g.ticks(u)), n && (g = g.tickValues(n))) : 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");
+}, V = (e) => {
   const { svg: t, config: a, y: s } = e, {
-    width: l,
-    margin: o,
-    grid: { horizontalStyle: n }
+    width: c,
+    margin: i,
+    grid: { horizontalStyle: o }
   } = a;
-  if (n !== "none") {
-    if (n.startsWith("zero-line")) {
-      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);
-      n === "zero-line-dashed" && i.attr("stroke-dasharray", "4 4");
+  if (o !== "none") {
+    if (o.startsWith("zero-line")) {
+      const d = t.append("line").attr("x1", 0 + i.left).attr("x2", c - i.right).attr("y1", s(0)).attr("y2", s(0)).attr("stroke", "var(--sc-color-axis-zero-line)").attr("stroke-width", 1);
+      o === "zero-line-dashed" && d.attr("stroke-dasharray", "4 4");
     }
-    n.startsWith("every-line") && (e.yTicks || s.ticks()).forEach((r) => {
-      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);
-      n === "every-line-dashed" && c.attr("stroke-dasharray", "4 4");
+    o.startsWith("every-line") && (e.yTicks || s.ticks()).forEach((n) => {
+      const r = t.append("line").attr("x1", 0 + i.left).attr("x2", c - i.right).attr("y1", s(n)).attr("y2", s(n)).attr("stroke", "var(--sc-color-axis-zero-line)").attr("stroke-width", 1);
+      o === "every-line-dashed" && r.attr("stroke-dasharray", "4 4");
     });
   }
-}, I = (e) => {
+}, Z = (e) => {
   const { svg: t, config: a, x: s } = e, {
-    height: l,
-    margin: o,
-    grid: { verticalStyle: n }
+    height: c,
+    margin: i,
+    grid: { verticalStyle: o }
   } = a;
-  n !== "none" && n.startsWith("every-line") && (e.xTicks || s.ticks()).forEach((r) => {
-    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);
-    n === "every-line-dashed" && c.attr("stroke-dasharray", "4 4");
+  o !== "none" && o.startsWith("every-line") && (e.xTicks || s.ticks()).forEach((n) => {
+    const r = t.append("line").attr("x1", s(n)).attr("x2", s(n)).attr("y1", i.top).attr("y2", c - i.bottom).attr("stroke", "var(--sc-color-axis-zero-line)").attr("stroke-width", 1);
+    o === "every-line-dashed" && r.attr("stroke-dasharray", "4 4");
   });
-}, z = (e) => {
-  F(e), I(e);
-}, Z = (e) => {
-  const { svg: t, config: a } = e, { width: s, height: l, margin: o, logo: n } = a;
-  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);
-}, k = (e, t, a) => {
+}, E = (e) => {
+  V(e), Z(e);
+}, H = (e) => {
+  const { svg: t, config: a } = e, { width: s, height: c, margin: i, logo: o } = a;
+  G(e), z(e), o && t.append("image").attr("xlink:href", a.theme === "dark" ? o.picDarkTheme : o.picLightTheme).attr("width", o.width).attr("height", o.height).attr("x", o.x ?? (s - i.left - i.right) / 2 - o.width / 2 + i.left).attr("y", o.y ?? (c - i.top - i.bottom) / 2 - o.height / 2 + i.top), E(e);
+}, C = (e, t, a) => {
   let s = e.select(`#${t}`);
-  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 }) => {
-    s.append("stop").attr("offset", l).attr("stop-color", o);
+  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: c, stopColor: i }) => {
+    s.append("stop").attr("offset", c).attr("stop-color", i);
   }), s;
-}, C = (e) => {
-  const t = v.select(e).select("defs");
-  return t.empty() ? v.select(e).append("defs") : t;
+}, k = (e) => {
+  const t = y.select(e).select("defs");
+  return t.empty() ? y.select(e).append("defs") : t;
 }, B = (e) => {
   const {
     y: t,
     config: { margin: a }
   } = e, s = t.range()[0] - t(0);
   return { x: 0, y: t.range()[0] - s, width: "100%", height: s + a.bottom };
-}, A = (e, t) => ({
+}, I = (e, t) => ({
   ...e,
   ...t,
   margin: {
@@ -93,113 +93,130 @@ const M = (e) => {
   grid: {
     ...e.grid,
     ...t == null ? void 0 : t.grid
+  },
+  hover: {
+    ...e.hover,
+    ...t == null ? void 0 : t.hover
+  },
+  selection: {
+    ...e.selection,
+    ...t == null ? void 0 : t.selection
   }
-}), N = (e, t = {}) => {
-  const a = e.node(), s = C(a), l = (i, r) => k(s, i, {
+}), M = (e, t = {}) => {
+  const a = e.node(), s = k(a), c = (d, n) => C(s, d, {
     x1: "0%",
     y1: "0%",
     x2: "0%",
     y2: "100%",
     stops: [
       { offset: "0%", stopColor: "rgba(255, 255, 255, 0)" },
-      { offset: "20%", stopColor: r },
-      { offset: "60%", stopColor: r },
+      { offset: "20%", stopColor: n },
+      { offset: "60%", stopColor: n },
       { offset: "100%", stopColor: "rgba(255, 255, 255, 0)" }
     ]
   });
-  l("gradient-range-borders-up", "var(--sc-color-selection-up)"), l("gradient-range-borders-down", "var(--sc-color-selection-down)");
-  const o = "sc-charts__border-range-line", n = e.append("line").classed(o, !0).style("display", t.hidden ? "none" : "block");
+  c("gradient-range-borders-up", "var(--sc-color-selection-up)"), c("gradient-range-borders-down", "var(--sc-color-selection-down)");
+  const i = "sc-charts__border-range-line", o = e.append("line").classed(i, !0).style("display", t.hidden ? "none" : "block");
   return {
-    className(i, r) {
-      i === "remove" ? n.classed(`${o}${r}`, !1) : n.classed(`${o}${r}`, !0);
+    className(d, n) {
+      d === "remove" ? o.classed(`${i}${n}`, !1) : o.classed(`${i}${n}`, !0);
     },
-    update({ x1: i, x2: r, y1: c, y2: u, hidden: g }) {
-      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");
+    update({ x1: d, x2: n, y1: r, y2: l, hidden: u }) {
+      d !== void 0 && o.attr("x1", d), n !== void 0 && o.attr("x2", n), r !== void 0 && o.attr("y1", r), l !== void 0 && o.attr("y2", l), u !== void 0 && o.style("display", u ? "none" : "block");
     },
     destroy() {
-      n.remove();
+      o.remove();
     }
   };
-}, L = (e, t = {}) => {
+}, _ = (e, t = {}) => {
   const a = e.append("circle").attr("r", t.radius || 4).style("display", t.hidden ? "none" : "block"), s = t.className || "";
   return s && a.classed(s, !0), {
-    className(l, o) {
-      l === "remove" ? a.classed(`${s}${o}`, !1) : a.classed(`${s}${o}`, !0);
+    className(c, i) {
+      c === "remove" ? a.classed(`${s}${i}`, !1) : a.classed(`${s}${i}`, !0);
     },
-    update({ cx: l, cy: o, hidden: n, fill: i }) {
-      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");
+    update({ cx: c, cy: i, hidden: o, fill: d }) {
+      c !== void 0 && a.attr("cx", c), i !== void 0 && a.attr("cy", i), d !== void 0 && a.attr("fill", d), o !== void 0 && a.style("display", o ? "none" : "block");
     },
     destroy() {
       a.remove();
     }
   };
-}, G = (e, t = {}) => {
-  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);
-  return ((i, r) => k(o, i, {
+}, X = (e, t = {}) => {
+  const a = "sc-charts__hover-line", s = e.append("line").style("display", t.hidden ? "none" : "block").classed(a, !0), c = e.node(), i = k(c);
+  return ((d, n) => C(i, d, {
     x1: "0%",
     y1: "0%",
     x2: "0%",
     y2: "100%",
     stops: [
       { offset: "0%", stopColor: "rgba(255, 255, 255, 0)" },
-      { offset: "15%", stopColor: r },
-      { offset: "75%", stopColor: r },
+      { offset: "15%", stopColor: n },
+      { offset: "75%", stopColor: n },
       { offset: "100%", stopColor: "rgba(255, 255, 255, 0)" }
     ]
   }))("hover-line-gradient", "var(--sc-color-hover-line)"), {
-    className(i, r) {
-      i === "remove" ? s.classed(`${a}${r}`, !1) : s.classed(`${a}${r}`, !0);
+    className(d, n) {
+      d === "remove" ? s.classed(`${a}${n}`, !1) : s.classed(`${a}${n}`, !0);
     },
-    update({ x1: i, x2: r, y1: c, y2: u, hidden: g }) {
-      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");
+    update({ x1: d, x2: n, y1: r, y2: l, hidden: u }) {
+      d !== void 0 && s.attr("x1", d), n !== void 0 && s.attr("x2", n), r !== void 0 && s.attr("y1", r), l !== void 0 && s.attr("y2", l), u !== void 0 && s.style("display", u ? "none" : "block");
     },
     destroy() {
       s.remove();
     }
   };
-}, H = (e) => {
-  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");
+}, j = (e) => {
+  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`), c = s.append("xhtml:div").attr("xmlns", "http://www.w3.org/1999/xhtml").attr("class", `${t}-sum`), i = s.append("xhtml:div").attr("xmlns", "http://www.w3.org/1999/xhtml").attr("class", `${t}-time`), o = y.timeFormat("%b %e, %I:%M %p"), d = (n) => {
+    const r = y.format(",.2f");
+    return `${n < 0 ? "-" : ""}$${r(Math.abs(n))}`;
+  };
   return {
-    className(i, r) {
-      i === "remove" ? a.classed(`${t}${r}`, !1) : a.classed(`${t}${r}`, !0);
+    className(n, r) {
+      n === "remove" ? a.classed(`${t}${r}`, !1) : a.classed(`${t}${r}`, !0);
     },
-    update({ leftPoint: i, rightPoint: r, x: c, y: u, hidden: g }) {
-      if (c !== void 0 && a.attr("x", c), u !== void 0 && a.attr("y", u), i && r) {
-        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)}`;
-        l.text(m).append("xhtml:div").html(V).attr("class", `${t}-sum-icon`), o.text(f);
-        const p = e.x(e.data[e.data.length - 1].date), y = e.x(e.data[0].date), w = s.node().getBoundingClientRect();
-        w.x < y && a.attr("x", y + w.width / 2), w.x > p - w.width && a.attr("x", p - w.width / 2);
+    update({ leftPoint: n, rightPoint: r, x: l, y: u, hidden: h, closest: g }) {
+      if (l !== void 0 && a.attr("x", l), u !== void 0 && a.attr("y", u), n && r && g && l !== void 0) {
+        const { comparisonValue: m } = e.config.selection, x = r.value - n.value, p = (e.x(r.date) + e.x(n.date)) / 2, v = e.x(g.date) < p ? n.value : r.value;
+        let f = null;
+        m && m !== 0 && v !== 0 ? f = (v / m * 100).toFixed(2) : n.value && (f = (x / Math.abs(n.value) * 100).toFixed(2));
+        const w = f === null ? "" : `(${f}%)`, $ = `${d(x)}${w}`, F = `${o(n.date)} to ${o(r.date)}`;
+        c.text($).append("xhtml:div").html(W).attr("class", `${t}-sum-icon`), i.text(F);
+        const A = e.x(e.data[e.data.length - 1].date), T = e.x(e.data[0].date), b = s.node().getBoundingClientRect();
+        b.x < T && a.attr("x", T + b.width / 2), b.x > A - b.width && a.attr("x", A - b.width / 2);
       }
-      g !== void 0 && a.style("display", g ? "none" : "block");
+      h !== void 0 && a.style("display", h ? "none" : "block");
     },
     destroy() {
       a.remove();
     }
   };
-}, V = `
+}, W = `
   <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path 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" 
     fill="currentColor"/>
   </svg>
-`, E = (e) => {
-  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)}`;
+`, Y = (e) => {
+  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`), c = s.append("xhtml:div").attr("xmlns", "http://www.w3.org/1999/xhtml").attr("class", `${t}-sum`).html("$sum"), i = s.append("xhtml:div").attr("xmlns", "http://www.w3.org/1999/xhtml").attr("class", `${t}-time`).html("Date"), o = y.timeFormat("%a, %b %d, %-I:%M %p"), d = (n) => {
+    const r = y.format(",.2f");
+    return `${n < 0 ? "-" : ""}$${r(Math.abs(n))}`;
+  };
   return {
-    className(r, c) {
-      r === "remove" ? a.classed(`${t}${c}`, !1) : a.classed(`${t}${c}`, !0);
+    className(n, r) {
+      n === "remove" ? a.classed(`${t}${r}`, !1) : a.classed(`${t}${r}`, !0);
     },
-    update({ x: r, y: c, hidden: u, dataItem: g }) {
-      if (r !== void 0 && a.attr("x", r), c !== void 0 && a.attr("y", c), g && r !== void 0) {
-        l.text(i(g.value)), o.text(n(g.date));
-        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;
+    update({ x: n, y: r, hidden: l, dataItem: u }) {
+      if (n !== void 0 && a.attr("x", n), r !== void 0 && a.attr("y", r), u && n !== void 0) {
+        c.text(d(u.value)), i.text(o(u.date));
+        const h = s.node().getBoundingClientRect(), g = 16, m = n + g + h.width > e.config.width - e.config.margin.right ? n - g - h.width : n + g;
         a.attr("x", m);
       }
-      u !== void 0 && a.style("display", u ? "none" : "block");
+      l !== void 0 && a.style("display", l ? "none" : "block");
     },
     destroy() {
       a.remove();
     }
   };
-}, X = {
+}, O = {
   margin: { top: 10, right: 30, bottom: 20, left: 10 },
   theme: "light",
   logo: {
@@ -211,7 +228,16 @@ const M = (e) => {
     picLightTheme: null
   },
   hasMainLineArea: !1,
-  hoverRange: "month",
+  hover: {
+    enable: !0,
+    range: "1m",
+    transitionDuration: 150,
+    transitionName: "default"
+  },
+  selection: {
+    enable: !0,
+    comparisonValue: null
+  },
   xAxis: {
     customTicks: !1,
     tickFormat: null,
@@ -230,13 +256,11 @@ const M = (e) => {
     horizontalStyle: "zero-line-dashed",
     verticalStyle: "none"
   },
-  enableSelection: !0,
-  enableHover: !0,
   enableBelowZeroLine: !1,
   curveTension: 1
-}, _ = (e) => v.curveCardinal.tension(e.config.curveTension), Y = (e) => {
-  const { svg: t, data: a, x: s, y: l, config: o } = e, n = t.node(), i = C(n);
-  k(i, "main-line-area-gradient", {
+}, L = (e) => y.curveCardinal.tension(e.config.curveTension), U = (e) => {
+  const { svg: t, data: a, x: s, y: c, config: i } = e, o = t.node(), d = k(o);
+  C(d, "main-line-area-gradient", {
     x1: "0%",
     y1: "0%",
     x2: "0%",
@@ -246,24 +270,24 @@ const M = (e) => {
       { offset: "100%", stopColor: "rgba(255, 255, 255, 0)" }
     ]
   });
-  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);
+  const r = y.area().x((h) => s(h.date)).y0(c.range()[0]).y1((h) => c(h.value)).curve(L(e)), l = "sc-charts__main-line-area", u = t.append("path").datum(a).attr("d", r).attr("class", l).classed(`${l}_hidden`, !i.hasMainLineArea);
   return {
-    className(d, h) {
-      d === "remove" ? g.classed(`${u}${h}`, !1) : g.classed(`${u}${h}`, !0);
+    className(h, g) {
+      h === "remove" ? u.classed(`${l}${g}`, !1) : u.classed(`${l}${g}`, !0);
     },
-    update({ data: d, hidden: h }) {
-      if (d !== void 0 && g.datum(d).attr("d", c), h !== void 0) {
-        if (!o.hasMainLineArea) return null;
-        g.classed(`${u}_hidden`, h);
+    update({ data: h, hidden: g }) {
+      if (h !== void 0 && u.datum(h).attr("d", r), g !== void 0) {
+        if (!i.hasMainLineArea) return null;
+        u.classed(`${l}_hidden`, g);
       }
     },
     destroy() {
-      g.remove();
+      u.remove();
     }
   };
-}, j = (e, t = {}) => {
-  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";
-  k(g, d + "_up", {
+}, q = (e, t = {}) => {
+  const a = "sc-charts__range-line-area", { svg: s, x: c, y: i, config: o, data: d, chartId: n } = e, { clip: r } = t, l = s.node(), u = k(l), h = "range-line-area-gradient";
+  C(u, h + "_up", {
     x1: "0%",
     y1: "0%",
     x2: "0%",
@@ -272,7 +296,7 @@ const M = (e) => {
       { offset: "0%", stopColor: "var(--sc-color-selection-up)" },
       { offset: "100%", stopColor: "rgba(255, 255, 255, 0)" }
     ]
-  }), k(g, d + "_down", {
+  }), C(u, h + "_down", {
     x1: "0%",
     y1: "0%",
     x2: "0%",
@@ -282,147 +306,184 @@ const M = (e) => {
       { offset: "100%", stopColor: "rgba(255, 255, 255, 0)" }
     ]
   });
-  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})`);
+  const g = y.area().x((f) => c(f.date)).y0(i.range()[0]).y1((f) => i(f.value)).curve(L(e)), m = `${n}-clip-${a}`, p = u.append("clipPath").attr("id", m).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%"), v = s.append("path").datum(d).attr("d", g).attr("class", a).classed(`${a}_hidden`, !o.hasMainLineArea).attr("clip-path", `url(#${m})`);
+  return {
+    className(f, w) {
+      f === "remove" ? v.classed(`${a}${w}`, !1) : v.classed(`${a}${w}`, !0);
+    },
+    update({ data: f, hidden: w, clip: $ }) {
+      f !== void 0 && v.datum(f).attr("d", g), w !== void 0 && v.classed(`${a}_hidden`, w), $ !== void 0 && p.attr("x", $.x).attr("y", $.y).attr("width", $.width).attr("height", $.height);
+    },
+    destroy() {
+      v.remove();
+    }
+  };
+}, N = (e, t) => {
+  const { svg: a, data: s, x: c, y: i, chartId: o } = e, { baseClassName: d, id: n, clip: r } = t, l = a.node(), u = k(l), h = y.line().x((v) => c(v.date)).y((v) => i(v.value)).curve(L(e)), g = `${o}-clip-${d}`, x = u.append("clipPath").attr("id", g).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%"), p = a.append("path").classed(d, !0).datum(s).attr("d", h).attr("id", n).attr("clip-path", `url(#${g})`);
   return {
-    className(w, x) {
-      w === "remove" ? y.classed(`${a}${x}`, !1) : y.classed(`${a}${x}`, !0);
+    className(v, f) {
+      v === "remove" ? p.classed(`${d}${f}`, !1) : p.classed(`${d}${f}`, !0);
     },
-    update({ data: w, hidden: x, clip: $ }) {
-      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);
+    update({ data: v, clip: f, hidden: w }) {
+      v !== void 0 && p.datum(v).attr("d", h), w !== void 0 && p.classed(`${d}_hidden`, w), f !== void 0 && x.attr("x", f.x).attr("y", f.y).attr("width", f.width).attr("height", f.height);
     },
     destroy() {
-      y.remove();
+      p.remove();
     }
   };
-}, b = (e, t) => {
-  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})`);
+}, J = (e, t) => {
+  const { svg: a, data: s, x: c, y: i, chartId: o, config: d } = e, { baseClassName: n, id: r, clip: l } = t, u = a.node(), h = k(u), g = y.line().x((f) => c(f.date)).y((f) => i(f.value)).curve(L(e)), m = `${o}-clip-${n}`, p = h.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%"), v = a.append("path").classed(n, !0).datum(s).attr("d", g).attr("id", r).attr("clip-path", `url(#${m})`);
   return {
-    className(f, p) {
-      f === "remove" ? m.classed(`${n}${p}`, !1) : m.classed(`${n}${p}`, !0);
+    className(f, w) {
+      f === "remove" ? v.classed(`${n}${w}`, !1) : v.classed(`${n}${w}`, !0);
     },
-    update({ data: f, clip: p, hidden: y }) {
-      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);
+    update({ data: f, clip: w, hidden: $ }) {
+      f !== void 0 && v.datum(f).attr("d", g), $ !== void 0 && v.classed(`${n}_hidden`, $), w !== void 0 && (d.hover.transitionName === "default" ? p.transition().duration(d.hover.transitionDuration).attr("x", w.x).attr("y", w.y).attr("width", w.width).attr("height", w.height).ease(y.easeLinear) : p.attr("x", w.x).attr("y", w.y).attr("width", w.width).attr("height", w.height));
     },
     destroy() {
-      m.remove();
+      v.remove();
     }
   };
-}, W = (e) => {
-  const t = b(e, {
+}, K = (e) => {
+  const t = N(e, {
     baseClassName: "sc-charts__main-line",
     id: `${e.chartId}-sc-charts__main-line`
-  }), a = Y(e), s = G(e.svg), l = b(e, {
+  }), a = U(e), s = X(e.svg), c = J(e, {
     baseClassName: "sc-charts__highlight-line",
     id: `${e.chartId}-sc-charts__highlight-line`,
     clip: { x: 0, y: 0, width: "0", height: "0" }
   });
-  let o = null;
-  e.config.enableBelowZeroLine && (o = b(e, {
+  let i = null;
+  e.config.enableBelowZeroLine && (i = N(e, {
     baseClassName: "sc-charts__below-zero-line",
     id: `${e.chartId}-sc-charts__below-zero-line`,
     clip: B(e)
   }));
-  const n = L(e.svg, {
+  const o = _(e.svg, {
     className: "sc-charts__hover-circle",
     hidden: !0
-  }), i = N(e.svg), r = N(e.svg), c = b(e, {
+  }), d = M(e.svg), n = M(e.svg), r = N(e, {
     baseClassName: "sc-charts__range-line",
     id: `${e.chartId}-sc-charts__range-line`,
     clip: { x: 0, y: 0, width: "0", height: "0" }
-  }), u = L(e.svg, {
+  }), l = _(e.svg, {
     className: "sc-charts__range-circle-left",
     hidden: !0
-  }), g = L(e.svg, {
+  }), u = _(e.svg, {
     className: "sc-charts__range-circle-right",
     hidden: !0
-  }), d = H(e), h = E(e), m = j(e);
+  }), h = j(e), g = Y(e), m = q(e);
   return {
     hoverLine: s,
-    hoverCircle: n,
-    rangeBorderLeft: i,
-    rangeBorderRight: r,
-    rangeLine: c,
+    hoverCircle: o,
+    rangeBorderLeft: d,
+    rangeBorderRight: n,
+    rangeLine: r,
     rangeLineArea: m,
-    rangeCircleLeft: u,
-    rangeCircleRight: g,
+    rangeCircleLeft: l,
+    rangeCircleRight: u,
     mainLine: t,
-    rangeTooltip: d,
-    highlightLine: l,
-    hoverTooltip: h,
+    rangeTooltip: h,
+    highlightLine: c,
+    hoverTooltip: g,
     mainLineArea: a,
-    belowZeroLine: o
+    belowZeroLine: i
   };
-}, O = (e, t, a) => {
-  let s, l;
-  switch (e) {
-    case "day":
-      s = new Date(t), s.setHours(0, 0, 0, 0), l = new Date(s), l.setDate(s.getDate() + 1);
-      break;
-    case "week": {
-      const i = t.getDay(), r = t.getDate() - i + (i === 0 ? -6 : 1);
-      s = new Date(t.getFullYear(), t.getMonth(), r), s.setHours(0, 0, 0, 0), l = new Date(s), l.setDate(s.getDate() + 7);
-      break;
+}, P = (e, t, a) => {
+  const s = e.match(/^(\d+)([dMhmw])$/);
+  if (!s)
+    return console.warn("Invalid hoverRange:", e), {
+      x: 0,
+      y: 0,
+      width: "100%",
+      height: "100%"
+    };
+  const [, c, i] = s, o = parseInt(c, 10), [d, n] = a.domain();
+  let r = new Date(d), l = new Date(r);
+  for (; l < n; ) {
+    switch (i) {
+      case "M":
+        l.setMinutes(r.getMinutes() + o);
+        break;
+      case "h":
+        l.setHours(r.getHours() + o);
+        break;
+      case "d":
+        l.setDate(r.getDate() + o);
+        break;
+      case "w":
+        l.setDate(r.getDate() + o * 7);
+        break;
+      case "m":
+        l = new Date(r.getFullYear(), r.getMonth() + o, 1);
+        break;
+      default:
+        return {
+          x: 0,
+          y: 0,
+          width: "100%",
+          height: "100%"
+        };
     }
-    case "month":
-      s = new Date(t.getFullYear(), t.getMonth(), 1), l = new Date(t.getFullYear(), t.getMonth() + 1, 1);
-      break;
-    default:
+    if (t >= r && t < l) {
+      const u = a(r), h = a(l);
       return {
-        x: 0,
+        x: u,
         y: 0,
-        width: "100%",
+        width: h - u,
         height: "100%"
       };
+    }
+    r = new Date(l);
   }
-  const o = a(s), n = a(l);
   return {
-    x: o,
+    x: 0,
     y: 0,
-    width: n - o,
+    width: "100%",
     height: "100%"
   };
-}, T = (e, t) => {
-  var c;
+}, D = (e, t) => {
+  var r;
   const {
     x: a,
     y: s,
-    elements: l,
-    config: { margin: o, height: n, hoverRange: i }
+    elements: c,
+    config: { margin: i, height: o, hover: d }
   } = e;
-  l.hoverLine.update({
+  c.hoverLine.update({
     x1: a(t.date),
     x2: a(t.date),
-    y1: o.top,
-    y2: n - o.bottom,
+    y1: i.top,
+    y2: o - i.bottom,
     hidden: !1
-  }), l.hoverCircle.update({
+  }), c.hoverCircle.update({
     cx: a(t.date),
     cy: s(t.value),
     hidden: !1
-  }), l.hoverTooltip.update({
+  }), c.hoverTooltip.update({
     dataItem: t,
     x: a(t.date),
     y: 0,
     hidden: !1
   });
-  const r = O(i, t.date, a);
-  l.highlightLine.update({
-    clip: r,
+  const n = P(d.range, t.date, a);
+  c.highlightLine.update({
+    clip: n,
     hidden: !1
-  }), (c = l.belowZeroLine) == null || c.update({
+  }), (r = c.belowZeroLine) == null || r.update({
     clip: {
-      ...r,
+      ...n,
       y: s(0),
-      height: s.range()[0] - s(0) + o.bottom
+      height: s.range()[0] - s(0) + i.bottom
     }
-  }), l.mainLine.className("add", "_muted");
-}, D = (e) => {
+  }), c.mainLine.className("add", "_muted");
+}, R = (e) => {
   var a;
   const { elements: t } = e;
   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({
     clip: B(e)
   }));
-}, P = (e, t) => {
+}, Q = (e, t) => {
   [
     "rangeBorderLeft",
     "rangeBorderRight",
@@ -434,125 +495,126 @@ const M = (e) => {
   ].forEach((s) => {
     t ? (e[s].className("remove", "_down"), e[s].className("add", "_up")) : (e[s].className("remove", "_up"), e[s].className("add", "_down"));
   });
-}, U = (e, t, a) => {
+}, ee = (e, t, a) => {
   var m;
   const {
     x: s,
-    y: l,
-    config: { margin: o, height: n },
-    elements: i
-  } = 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;
-  i.rangeBorderLeft.update({
-    x1: g,
-    x2: g,
-    y1: o.top,
-    y2: n - o.bottom,
+    y: c,
+    config: { margin: i, height: o },
+    elements: d
+  } = e, n = s(t.date) < s(a.date) ? t : a, r = s(t.date) >= s(a.date) ? t : a, l = r.value - n.value >= 0, u = s(n.date), h = s(r.date), g = h - u;
+  d.rangeBorderLeft.update({
+    x1: u,
+    x2: u,
+    y1: i.top,
+    y2: o - i.bottom,
     hidden: !1
-  }), i.rangeBorderRight.update({
-    x1: d,
-    x2: d,
-    y1: o.top,
-    y2: n - o.bottom,
+  }), d.rangeBorderRight.update({
+    x1: h,
+    x2: h,
+    y1: i.top,
+    y2: o - i.bottom,
     hidden: !1
-  }), i.rangeCircleLeft.update({
-    cx: g,
-    cy: l(r.value),
+  }), d.rangeCircleLeft.update({
+    cx: u,
+    cy: c(n.value),
     hidden: !1
-  }), i.rangeCircleRight.update({
-    cx: d,
-    cy: l(c.value),
+  }), d.rangeCircleRight.update({
+    cx: h,
+    cy: c(r.value),
     hidden: !1
-  }), i.rangeLine.update({
+  }), d.rangeLine.update({
     clip: {
-      x: g,
+      x: u,
       y: 0,
-      width: h,
-      height: l.range()[0]
+      width: g,
+      height: c.range()[0]
     },
     hidden: !1
-  }), i.rangeLineArea.update({
+  }), d.rangeLineArea.update({
     clip: {
-      x: g,
+      x: u,
       y: 0,
-      width: h,
-      height: l.range()[0]
+      width: g,
+      height: c.range()[0]
     },
     hidden: !1
-  }), i.rangeTooltip.update({
-    rightPoint: c,
-    leftPoint: r,
-    x: g + h / 2,
+  }), d.rangeTooltip.update({
+    rightPoint: r,
+    leftPoint: n,
+    closest: a,
+    x: u + g / 2,
     y: 0,
     hidden: !1
-  }), (m = i.belowZeroLine) == null || m.update({
+  }), (m = d.belowZeroLine) == null || m.update({
     hidden: !0
-  }), i.mainLineArea.update({ hidden: !0 }), P(i, u), i.mainLine.className("add", "_selected-muted");
-}, R = (e) => {
+  }), d.mainLineArea.update({ hidden: !0 }), Q(d, l), d.mainLine.className("add", "_selected-muted");
+}, S = (e) => {
   var a;
   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 }), (a = t.belowZeroLine) == null || a.update({ hidden: !1 });
-}, q = (e) => {
-  const { svg: t, data: a, x: s, config: l } = e, { height: o, margin: n, width: i, enableSelection: r, enableHover: c } = l;
-  let u = null, g = !1;
-  const d = (m) => a.reduce(
-    (f, p) => Math.abs(s(f.date) - m) < Math.abs(s(p.date) - m) ? f : p
+}, te = (e) => {
+  const { svg: t, data: a, x: s, config: c } = e, { height: i, margin: o, width: d, hover: n, selection: r } = c;
+  let l = null, u = !1;
+  const h = (m) => a.reduce(
+    (x, p) => Math.abs(s(x.date) - m) < Math.abs(s(p.date) - m) ? x : p
   );
-  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) {
-    const [f] = v.pointer(m, this), p = d(f);
-    !g && c ? (e.action = "hover", T(e, p)) : (e.action = g ? "selection" : "none", D(e)), u && r && (e.action = "selection", U(e, u, p));
+  t.append("rect").attr("width", d - o.left - o.right).attr("height", i - o.top - o.bottom).attr("x", o.left).attr("y", o.top).attr("fill", "transparent").on("mousemove", function(m) {
+    const [x] = y.pointer(m, this), p = h(x);
+    !u && n.enable ? (e.action = "hover", D(e, p)) : (e.action = u ? "selection" : "none", R(e)), l && r.enable && (e.action = "selection", ee(e, l, p));
   }).on("mouseleave", () => {
-    e.action = "none", g = !1, u = null, D(e), R(e);
+    e.action = "none", u = !1, l = null, R(e), S(e);
   }).on("mousedown", function(m) {
-    if (r) {
-      g = !0, e.action = "selection";
-      const [f] = v.pointer(m, this);
-      u = d(f);
+    if (r.enable) {
+      u = !0, e.action = "selection";
+      const [x] = y.pointer(m, this);
+      l = h(x);
     }
   }).on("mouseup", function(m) {
-    const [f] = v.pointer(m, this), p = d(f);
-    g = !1, u = null, e.action = "hover", r && R(e), c && T(e, p);
+    const [x] = y.pointer(m, this), p = h(x);
+    u = !1, l = null, e.action = "hover", r.enable && S(e), n.enable && D(e, p);
   });
-}, J = (e, t) => {
-  const { width: a, margin: s } = t, l = v.scaleTime(), o = v.extent(e, (n) => new Date(n.date));
-  return o[0] == null || o[1] == null ? l : l.domain([o[0], o[1]]).range([s.left, a - s.right]);
-}, K = (e, t) => {
-  const { height: a, margin: s } = t, l = v.max(e, (n) => n.value) ?? 0, o = v.min(e, (n) => n.value) ?? 0;
-  return v.scaleLinear().domain([o, l]).range([a - s.bottom, s.top]);
-}, Q = (e, t) => {
-  const a = v.select(e);
+}, ae = (e, t) => {
+  const { width: a, margin: s } = t, c = y.scaleTime(), i = y.extent(e, (o) => new Date(o.date));
+  return i[0] == null || i[1] == null ? c : c.domain([i[0], i[1]]).range([s.left, a - s.right]);
+}, re = (e, t) => {
+  const { height: a, margin: s } = t, c = y.max(e, (o) => o.value) ?? 0, i = y.min(e, (o) => o.value) ?? 0;
+  return y.scaleLinear().domain([i, c]).range([a - s.bottom, s.top]);
+}, se = (e, t) => {
+  const a = y.select(e);
   if (a.empty())
     return console.error(`Element with selector ${e} not found!`), null;
   if (!t.chartId || !/^[a-zA-Z_][a-zA-Z0-9_-]*$/.test(t.chartId))
     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 s = a.append("svg"), o = a.node().getBoundingClientRect(), n = o.width, i = o.height;
-  let r = A({ ...X, width: n, height: i }, t.config);
-  const c = (u, g = !1) => {
-    g && u.config && (r = A(r, u.config));
-    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);
-    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();
-    const f = {
+  const s = a.append("svg"), i = a.node().getBoundingClientRect(), o = i.width, d = i.height;
+  let n = I({ ...O, width: o, height: d }, t.config);
+  const r = (l, u = !1) => {
+    u && l.config && (n = I(n, l.config));
+    const h = l.data.map((v) => ({ date: new Date(v.date), value: v.value })).sort((v, f) => v.date.getTime() - f.date.getTime()), g = ae(h, n), m = re(h, n);
+    s.attr("class", `sc-charts sc-charts__${n.theme}`).attr("preserveAspectRatio", "xMinYMin meet").attr("viewBox", `0 0 ${o} ${d}`).style("width", "100%").style("height", "100%").selectAll("*").remove();
+    const x = {
       chartId: t.chartId,
       svg: s,
-      data: d,
-      x: h,
+      data: h,
+      x: g,
       y: m,
-      config: r,
+      config: n,
       action: "none"
     };
-    Z(f);
+    H(x);
     const p = {
-      ...f,
-      elements: W(f)
+      ...x,
+      elements: K(x)
     };
-    q(p);
+    te(p);
   };
-  return c(t), {
-    update: (u) => c(u, !0),
+  return r(t), {
+    update: (l) => r(l, !0),
     destroy: () => s.remove()
   };
 };
 export {
-  Q as createLineChart
+  se as createLineChart
 };
 //# sourceMappingURL=charts-core.js.map