vue-chrts 0.2.5-test.2 → 0.2.5-test.3

package/dist/components/AreaChart/AreaChart.js

@@ -1,4 +1,4 @@
-import { defineComponent as N, useSlots as W, useTemplateRef as E, ref as M, computed as m, createElementBlock as f, openBlock as c, normalizeClass as w, normalizeStyle as v, createVNode as y, createCommentVNode as u, createElementVNode as X, unref as n, withCtx as z, createBlock as g, Fragment as h, renderList as R, mergeProps as x, renderSlot as T } from "vue";
+import { defineComponent as W, useSlots as x, useTemplateRef as E, ref as M, computed as u, createElementBlock as c, openBlock as s, normalizeClass as w, normalizeStyle as g, createVNode as m, createCommentVNode as d, createElementVNode as X, unref as a, withCtx as z, createBlock as y, Fragment as v, renderList as R, mergeProps as h, renderSlot as T } from "vue";
 import { Position as L, CurveType as C } from "@unovis/ts";
 import { createMarkers as Y, getFirstPropertyValue as U } from "../../utils.js";
 import H from "../Tooltip.js";
@@ -7,7 +7,7 @@ import { LegendPosition as _ } from "../../types.js";
 const ee = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, te = 0.5, $ = "#3b82f6", se = /* @__PURE__ */ N({
+}, ie = 0.5, $ = "#3b82f6", se = /* @__PURE__ */ W({
   __name: "AreaChart",
   props: {
     data: {},
@@ -50,96 +50,97 @@ const ee = {
     xDomain: {}
   },
   emits: ["click"],
-  setup(e, { emit: D }) {
-    const b = D, i = e, B = W(), p = E("slotWrapper"), d = M(), k = m(() => {
-      const o = Object.values(i.categories).map(
-        (l, t) => `var(--vis-color${t})`
+  setup(D, { emit: b }) {
+    const B = b, t = D, O = x(), k = E("slotWrapper"), p = M(), f = u(() => {
+      const e = Object.values(t.categories).map(
+        (n, i) => `var(--vis-color${i})`
       );
-      return Object.values(i.categories).map(
-        (l, t) => l.color ?? o[t]
+      return Object.values(t.categories).map(
+        (n, i) => n.color ?? e[i]
       );
-    }), O = m(() => i.markerConfig ? Y(i.markerConfig) : ""), V = m(() => i.legendPosition.startsWith("top")), F = m(() => i.legendPosition.includes("left") ? "flex-start" : i.legendPosition.includes("right") ? "flex-end" : "center"), G = m(() => {
-      const o = (t, a) => {
+    }), V = u(() => t.markerConfig ? Y(t.markerConfig) : ""), F = u(() => t.legendPosition.startsWith("top")), G = u(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center"), P = u(() => {
+      const e = (i, o) => {
         var r;
         return `
-    <linearGradient id="gradient${t}-${a}" gradientTransform="rotate(90)">
-      ${((r = i.gradientStops) == null ? void 0 : r.map(
-          (s) => `<stop offset="${s.offset}" stop-color="${a}" stop-opacity="${s.stopOpacity}" />`
+    <linearGradient id="gradient${i}-${o}" gradientTransform="rotate(90)">
+      ${((r = t.gradientStops) == null ? void 0 : r.map(
+          (l) => `<stop offset="${l.offset}" stop-color="${o}" stop-opacity="${l.stopOpacity}" />`
         ).join("")) ?? ""}
-      <stop offset="100%" stop-color="${a}" stop-opacity="0" />
+      <stop offset="100%" stop-color="${o}" stop-opacity="0" />
     </linearGradient>
   `;
-      }, l = (t, a) => {
+      }, n = (i, o) => {
         var r;
         return `
-    <linearGradient id="gradient${t}-${a}" gradientTransform="rotate(90)">
+    <linearGradient id="gradient${i}-${o}" gradientTransform="rotate(90)">
 
-    ${((r = i.gradientStops) == null ? void 0 : r.map(
-          (s) => `
-      <stop offset="${s.offset}" style="stop-color:var(${a});stop-opacity:${s.stopOpacity}" />
+    ${((r = t.gradientStops) == null ? void 0 : r.map(
+          (l) => `
+      <stop offset="${l.offset}" style="stop-color:var(${o});stop-opacity:${l.stopOpacity}" />
     `
         ).join("")) ?? ""}
     </linearGradient>
   `;
       };
-      return k.value.map(
-        (t, a) => t != null && t.includes("#") ? o(a, t) : l(a, t ?? $)
+      return f.value.map(
+        (i, o) => i != null && i.includes("#") ? e(o, i) : n(o, i ?? $)
       ).join("");
     });
-    function P(o) {
-      var l;
+    function S(e) {
+      var n;
       return {
-        y: (t) => Number(t[o]),
-        color: ((l = i.categories[o]) == null ? void 0 : l.color) ?? $
+        y: (i) => Number(i[e]),
+        color: ((n = t.categories[e]) == null ? void 0 : n.color) ?? $
       };
     }
-    function S(o) {
-      return typeof window > "u" ? "" : p.value ? p.value.innerHTML : "";
+    function j(e) {
+      return typeof window > "u" ? "" : k.value ? k.value.innerHTML : "";
     }
-    function j(o) {
-      return d.value = o, S();
+    function N(e) {
+      return p.value = e, j();
     }
-    return (o, l) => (c(), f("div", {
-      style: v({
+    return (e, n) => (s(), c("div", {
+      style: g({
         display: "flex",
-        flexDirection: V.value ? "column-reverse" : "column",
+        flexDirection: F.value ? "column-reverse" : "column",
         gap: "var(--vis-legend-spacing)"
       }),
-      class: w({ markers: !!i.markerConfig }),
-      onClick: l[0] || (l[0] = (t) => b("click", t, d.value))
+      class: w({ markers: !!t.markerConfig }),
+      onClick: n[0] || (n[0] = (i) => B("click", i, p.value))
     }, [
-      y(n(q), {
+      m(a(q), {
         data: e.data,
         height: e.height,
         padding: e.padding,
-        "svg-defs": G.value + O.value,
+        "svg-defs": P.value + V.value,
         "y-domain": e.yDomain,
         "x-domain": e.xDomain
       }, {
         default: z(() => [
-          e.hideTooltip ? u("", !0) : (c(), g(n(J), {
+          e.hideTooltip ? d("", !0) : (s(), y(a(J), {
             key: 0,
-            "horizontal-placement": n(L).Right,
-            "vertical-placement": n(L).Top
+            "horizontal-placement": a(L).Right,
+            "vertical-placement": a(L).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"])),
-          (c(!0), f(h, null, R(Object.keys(i.categories), (t, a) => (c(), f(h, { key: t }, [
-            y(n(K), x({
-              x: (r, s) => s
-            }, { ref_for: !0 }, P(t), {
-              color: `url(#gradient${a}-${k.value[a]})`,
-              opacity: e.hideArea ? 0 : te,
-              "curve-type": e.curveType ?? n(C).MonotoneX
+          (s(!0), c(v, null, R(Object.keys(t.categories), (i, o) => (s(), c(v, { key: i }, [
+            m(a(K), h({
+              x: (r, l) => l,
+              ref_for: !0
+            }, S(i), {
+              color: `url(#gradient${o}-${f.value[o]})`,
+              opacity: e.hideArea ? 0 : ie,
+              "curve-type": e.curveType ?? a(C).MonotoneX
             }), null, 16, ["x", "color", "opacity", "curve-type"]),
-            y(n(Q), {
-              x: (r, s) => s,
-              y: (r) => r[t],
-              color: k.value[a],
-              "curve-type": e.curveType ?? n(C).MonotoneX,
+            m(a(Q), {
+              x: (r, l) => l,
+              y: (r) => r[i],
+              color: f.value[o],
+              "curve-type": e.curveType ?? a(C).MonotoneX,
               "line-width": e.lineWidth,
-              lineDashArray: e.lineDashArray ? e.lineDashArray[a] : void 0
+              lineDashArray: e.lineDashArray ? e.lineDashArray[o] : void 0
             }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"])
           ], 64))), 128)),
-          e.hideXAxis ? u("", !0) : (c(), g(n(A), {
+          e.hideXAxis ? d("", !0) : (s(), y(a(A), {
             key: 1,
             type: "x",
             label: e.xLabel,
@@ -152,7 +153,7 @@ const ee = {
             "tick-line": e.xTickLine,
             "min-max-ticks-only": e.minMaxTicksOnly
           }, null, 8, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only"])),
-          e.hideYAxis ? u("", !0) : (c(), g(n(A), {
+          e.hideYAxis ? d("", !0) : (s(), y(a(A), {
             key: 2,
             type: "y",
             label: e.yLabel,
@@ -162,40 +163,40 @@ const ee = {
             "domain-line": e.yDomainLine,
             "tick-line": e.yTickLine
           }, null, 8, ["label", "num-ticks", "tick-format", "grid-line", "domain-line", "tick-line"])),
-          e.hideTooltip ? u("", !0) : (c(), g(n(Z), x({ key: 3 }, e.crosshairConfig, { template: j }), null, 16))
+          e.hideTooltip ? d("", !0) : (s(), y(a(Z), h({ key: 3 }, e.crosshairConfig, { template: N }), null, 16))
         ]),
         _: 1
       }, 8, ["data", "height", "padding", "svg-defs", "y-domain", "x-domain"]),
-      i.hideLegend ? u("", !0) : (c(), f("div", {
+      t.hideLegend ? d("", !0) : (s(), c("div", {
         key: 0,
-        style: v({
+        style: g({
           display: "flex",
-          justifyContent: F.value
+          justifyContent: G.value
         })
       }, [
-        y(n(I), {
-          style: v([
-            i.legendStyle,
+        m(a(I), {
+          style: g([
+            t.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
           ]),
-          items: Object.values(i.categories).map((t) => ({
-            ...t,
-            color: Array.isArray(t.color) ? t.color[0] : t.color
+          items: Object.values(t.categories).map((i) => ({
+            ...i,
+            color: Array.isArray(i.color) ? i.color[0] : i.color
           }))
         }, null, 8, ["style", "items"])
       ], 4)),
       X("div", ee, [
-        n(B).tooltip ? T(o.$slots, "tooltip", {
+        a(O).tooltip ? T(e.$slots, "tooltip", {
           key: 0,
-          values: d.value
-        }) : d.value ? T(o.$slots, "fallback", { key: 1 }, () => [
-          y(H, {
-            data: d.value,
+          values: p.value
+        }) : p.value ? T(e.$slots, "fallback", { key: 1 }, () => [
+          m(H, {
+            data: p.value,
             categories: e.categories,
-            toolTipTitle: n(U)(d.value) ?? "",
-            yFormatter: i.yFormatter
+            toolTipTitle: a(U)(p.value) ?? "",
+            yFormatter: t.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
-        ]) : u("", !0)
+        ]) : d("", !0)
       ], 512)
     ], 6));
   }

package/dist/components/BarChart/BarChart.js

@@ -1,14 +1,14 @@
-import { defineComponent as W, useSlots as X, useTemplateRef as Y, ref as j, computed as k, createElementBlock as v, openBlock as l, normalizeStyle as L, createVNode as b, createCommentVNode as f, createElementVNode as H, unref as a, withCtx as $, createBlock as c, Fragment as q, renderList as I, renderSlot as C } from "vue";
-import { Orientation as g, StackedBar as U, GroupedBar as J } from "@unovis/ts";
+import { defineComponent as W, useSlots as X, useTemplateRef as Y, ref as j, computed as f, createElementBlock as v, openBlock as n, normalizeStyle as L, createVNode as k, createCommentVNode as y, createElementVNode as H, unref as i, withCtx as $, createBlock as u, Fragment as q, renderList as I, renderSlot as P } from "vue";
+import { Orientation as p, StackedBar as U, GroupedBar as J } from "@unovis/ts";
 import { getFirstPropertyValue as K } from "../../utils.js";
 import { useStackedGrouped as Q } from "./stackedGroupedUtils.js";
-import { VisXYContainer as Z, VisXYLabels as _, VisTooltip as ee, VisStackedBar as F, VisGroupedBar as te, VisAxis as V, VisBulletLegend as ae } from "@unovis/vue";
-import ie from "../Tooltip.js";
-import { LegendPosition as ne } from "../../types.js";
-const oe = {
+import { VisXYContainer as Z, VisXYLabels as _, VisTooltip as ee, VisStackedBar as C, VisGroupedBar as ae, VisAxis as F, VisBulletLegend as ie } from "@unovis/vue";
+import oe from "../Tooltip.js";
+import { LegendPosition as re } from "../../types.js";
+const te = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, ye = /* @__PURE__ */ W({
+}, ge = /* @__PURE__ */ W({
   __name: "BarChart",
   props: {
     data: {},
@@ -35,8 +35,8 @@ const oe = {
     radius: {},
     hideLegend: { type: Boolean, default: !1 },
     hideTooltip: { type: Boolean, default: !1 },
-    orientation: { default: g.Vertical },
-    legendPosition: { default: ne.BottomCenter },
+    orientation: { default: p.Vertical },
+    legendPosition: { default: re.BottomCenter },
     legendStyle: { default: void 0 },
     xDomainLine: { type: Boolean },
     yDomainLine: { type: Boolean },
@@ -52,111 +52,111 @@ const oe = {
     xAxis: {}
   },
   emits: ["click"],
-  setup(e, { emit: G }) {
-    const S = G, t = e, O = X(), h = Y("slotWrapper"), u = j();
-    if (t.valueLabel && !t.xAxis)
+  setup(V, { emit: G }) {
+    const S = G, a = V, O = X(), h = Y("slotWrapper"), s = j();
+    if (a.valueLabel && !a.xAxis)
       throw new Error(
         "BarChart: 'xAxis' prop is required when 'valueLabel' is enabled. Please provide an 'xAxis' to display value labels."
       );
-    if (!t.yAxis || t.yAxis.length === 0)
+    if (!a.yAxis || a.yAxis.length === 0)
       throw new Error("yAxis is required");
-    const A = k(() => t.yAxis.map((i) => (o) => o[i])), B = (i, o) => {
-      var n;
-      return (n = Object.values(t.categories)[o]) == null ? void 0 : n.color;
-    }, y = k(
+    const x = f(() => a.yAxis.map((e) => (r) => r[e])), A = (e, r) => {
+      var o;
+      return (o = Object.values(a.categories)[r]) == null ? void 0 : o.color;
+    }, c = f(
       () => Q({
-        data: t.data,
-        categories: t.categories,
-        stackAndGrouped: t.stackAndGrouped,
-        xAxis: t.xAxis,
-        spacing: t.stackedGroupedSpacing
+        data: a.data,
+        categories: a.categories,
+        stackAndGrouped: a.stackAndGrouped,
+        xAxis: a.xAxis,
+        spacing: a.stackedGroupedSpacing
       }).value
-    ), w = k(() => t.legendPosition.startsWith("top")), D = k(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center");
-    function T(i) {
-      return u.value = i, E();
+    ), w = f(() => a.legendPosition.startsWith("top")), D = f(() => a.legendPosition.includes("left") ? "flex-start" : a.legendPosition.includes("right") ? "flex-end" : "center");
+    function B(e) {
+      return s.value = e, E();
     }
-    function E(i) {
+    function E(e) {
       return typeof window > "u" ? "" : h.value ? h.value.innerHTML : "";
     }
-    const P = t.yAxis.map((i) => (o) => o[i]), N = P.length, z = t.data.flatMap(
-      (i, o) => P.map((n, s) => ({
-        x: o,
-        y: Number(n(i) ?? 0),
-        itemIndex: s
+    const T = a.yAxis.map((e) => (r) => r[e]), N = T.length, z = a.data.flatMap(
+      (e, r) => T.map((o, d) => ({
+        x: r,
+        y: Number(o(e) ?? 0),
+        itemIndex: d
       }))
-    ), M = (i) => {
-      if (t.stacked || t.stackAndGrouped) return i.x;
-      const o = N;
-      if (o <= 1) return i.x;
-      const s = 1 - (t.groupPadding ?? 0), m = s / o, x = -s / 2, r = m * i.itemIndex + m / 2, p = 1 - (t.barPadding ?? 0), R = (x + r) * p;
-      return i.x + R;
+    ), M = (e) => {
+      if (a.stacked || a.stackAndGrouped) return e.x;
+      const r = N;
+      if (r <= 1) return e.x;
+      const d = 1 - (a.groupPadding ?? 0), g = d / r, m = -d / 2, t = g * e.itemIndex + g / 2, b = 1 - (a.barPadding ?? 0), R = (m + t) * b;
+      return e.x + R;
     };
-    return (i, o) => (l(), v("div", {
+    return (e, r) => (n(), v("div", {
       style: L({
         display: "flex",
         flexDirection: w.value ? "column-reverse" : "column",
         gap: "var(--vis-legend-spacing)"
       }),
-      onClick: o[0] || (o[0] = (n) => S("click", n, u.value))
+      onClick: r[0] || (r[0] = (o) => S("click", o, s.value))
     }, [
-      b(a(Z), {
+      k(i(Z), {
         padding: e.padding,
         height: e.height
       }, {
         default: $(() => {
-          var n, s, m, x;
+          var o, d, g, m;
           return [
-            e.valueLabel ? (l(), c(a(_), {
+            e.valueLabel ? (n(), u(i(_), {
               key: 0,
-              data: a(z),
+              data: i(z),
               x: M,
-              y: (r) => {
-                var d;
-                return r.y + (((d = t.valueLabel) == null ? void 0 : d.labelSpacing) ?? 0);
+              y: (t) => {
+                var l;
+                return t.y + (((l = a.valueLabel) == null ? void 0 : l.labelSpacing) ?? 0);
               },
-              label: (n = t.valueLabel) == null ? void 0 : n.label,
-              backgroundColor: ((s = t.valueLabel) == null ? void 0 : s.backgroundColor) ?? "transparent",
-              color: ((m = t.valueLabel) == null ? void 0 : m.color) ?? "red",
-              labelFontSize: (x = t.valueLabel) == null ? void 0 : x.labelFontSize
-            }, null, 8, ["data", "y", "label", "backgroundColor", "color", "labelFontSize"])) : f("", !0),
-            b(a(ee), {
+              label: (o = a.valueLabel) == null ? void 0 : o.label,
+              backgroundColor: ((d = a.valueLabel) == null ? void 0 : d.backgroundColor) ?? "transparent",
+              color: ((g = a.valueLabel) == null ? void 0 : g.color) ?? "red",
+              labelFontSize: (m = a.valueLabel) == null ? void 0 : m.labelFontSize
+            }, null, 8, ["data", "y", "label", "backgroundColor", "color", "labelFontSize"])) : y("", !0),
+            k(i(ee), {
               triggers: {
-                [a(J).selectors.bar]: T,
-                [a(U).selectors.bar]: T
+                [i(J).selectors.bar]: B,
+                [i(U).selectors.bar]: B
               }
             }, null, 8, ["triggers"]),
-            e.stackAndGrouped ? (l(!0), v(q, { key: 1 }, I(y.value.states, (r) => (l(), c(a(F), {
-              key: r,
-              data: y.value.chartData,
-              x: (d, p) => p + y.value.positions[r],
-              y: y.value.bars[r],
-              color: y.value.colorFunctions[r],
+            e.stackAndGrouped ? (n(!0), v(q, { key: 1 }, I(c.value.states, (t) => (n(), u(i(C), {
+              key: t,
+              data: c.value.chartData,
+              x: (l, b) => b + c.value.positions[t],
+              y: c.value.bars[t],
+              color: c.value.colorFunctions[t],
               "rounded-corners": e.radius ?? 0,
               "group-padding": e.groupPadding ?? 0,
               "bar-padding": e.barPadding,
-              orientation: e.orientation ?? a(g).Vertical
-            }, null, 8, ["data", "x", "y", "color", "rounded-corners", "group-padding", "bar-padding", "orientation"]))), 128)) : e.stacked ? (l(), c(a(F), {
+              orientation: e.orientation ?? i(p).Vertical
+            }, null, 8, ["data", "x", "y", "color", "rounded-corners", "group-padding", "bar-padding", "orientation"]))), 128)) : e.stacked ? (n(), u(i(C), {
               key: 3,
               data: e.data,
-              x: (r, d) => d,
-              y: A.value,
-              color: B,
+              x: (t, l) => l,
+              y: x.value,
+              color: A,
               "rounded-corners": e.radius ?? 0,
               "group-padding": e.groupPadding ?? 0,
               "bar-padding": e.barPadding ?? 0.2,
-              orientation: e.orientation ?? a(g).Vertical
-            }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (l(), c(a(te), {
+              orientation: e.orientation ?? i(p).Vertical
+            }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (n(), u(i(ae), {
               key: 2,
               data: e.data,
-              x: (r, d) => d,
-              y: A.value,
-              color: B,
+              x: (t, l) => l,
+              y: x.value,
+              color: A,
               "rounded-corners": e.radius ?? 0,
               "group-padding": e.groupPadding ?? 0,
               "bar-padding": e.barPadding ?? 0.2,
-              orientation: e.orientation ?? a(g).Vertical
+              orientation: e.orientation ?? i(p).Vertical
             }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
-            e.hideXAxis ? f("", !0) : (l(), c(a(V), {
+            e.hideXAxis ? y("", !0) : (n(), u(i(F), {
               key: 4,
               type: "x",
               "tick-format": e.xFormatter,
@@ -168,11 +168,11 @@ const oe = {
               "tick-values": e.xExplicitTicks,
               minMaxTicksOnly: e.minMaxTicksOnly
             }, null, 8, ["tick-format", "label", "grid-line", "domain-line", "tick-line", "num-ticks", "tick-values", "minMaxTicksOnly"])),
-            e.hideYAxis ? f("", !0) : (l(), c(a(V), {
+            e.hideYAxis ? y("", !0) : (n(), u(i(F), {
               key: 5,
               type: "y",
               label: e.yLabel,
-              "grid-line": e.orientation !== a(g).Horizontal && e.yGridLine,
+              "grid-line": e.orientation !== i(p).Horizontal && e.yGridLine,
               "domain-line": !!e.yDomainLine,
               "tick-format": e.yFormatter,
               "num-ticks": e.yNumTicks,
@@ -182,40 +182,40 @@ const oe = {
         }),
         _: 1
       }, 8, ["padding", "height"]),
-      t.hideLegend ? f("", !0) : (l(), v("div", {
+      a.hideLegend ? y("", !0) : (n(), v("div", {
         key: 0,
         style: L({
           display: "flex",
           justifyContent: D.value
         })
       }, [
-        b(a(ae), {
+        k(i(ie), {
           style: L([
-            t.legendStyle,
+            a.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
           ]),
-          items: Object.values(t.categories).map((n) => ({
-            ...n,
-            color: Array.isArray(n.color) ? n.color[0] : n.color
+          items: Object.values(a.categories).map((o) => ({
+            ...o,
+            color: Array.isArray(o.color) ? o.color[0] : o.color
           }))
         }, null, 8, ["style", "items"])
       ], 4)),
-      H("div", oe, [
-        a(O).tooltip ? C(i.$slots, "tooltip", {
+      H("div", te, [
+        i(O).tooltip ? P(e.$slots, "tooltip", {
           key: 0,
-          values: u.value
-        }) : u.value ? C(i.$slots, "fallback", { key: 1 }, () => [
-          b(ie, {
-            data: u.value,
-            categories: t.categories,
-            toolTipTitle: a(K)(u.value) ?? "",
-            yFormatter: t.orientation === a(g).Horizontal ? t.xFormatter : t.yFormatter
+          values: s.value
+        }) : s.value ? P(e.$slots, "fallback", { key: 1 }, () => [
+          k(oe, {
+            data: s.value,
+            categories: a.categories,
+            toolTipTitle: i(K)(s.value) ?? "",
+            yFormatter: a.orientation === i(p).Horizontal ? a.xFormatter : a.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
-        ]) : f("", !0)
+        ]) : y("", !0)
       ], 512)
     ], 4));
   }
 });
 export {
-  ye as default
+  ge as default
 };

package/dist/components/DonutChart/DonutChart.js

@@ -1,4 +1,4 @@
-import { defineComponent as w, useSlots as D, useTemplateRef as L, ref as T, computed as g, createElementBlock as p, openBlock as f, normalizeStyle as o, createVNode as r, createCommentVNode as m, renderSlot as d, createElementVNode as a, unref as i, withCtx as B, toDisplayString as P } from "vue";
+import { defineComponent as x, useSlots as D, useTemplateRef as L, ref as T, computed as p, createElementBlock as g, openBlock as c, normalizeStyle as o, createVNode as i, createCommentVNode as f, renderSlot as s, createElementVNode as r, unref as n, withCtx as B, toDisplayString as P } from "vue";
 import { Donut as W } from "@unovis/ts";
 import { DonutType as R } from "./types.js";
 import { VisSingleContainer as A, VisTooltip as H, VisDonut as N, VisBulletLegend as $ } from "@unovis/vue";
@@ -6,7 +6,7 @@ import { LegendPosition as z } from "../../types.js";
 const E = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, j = { style: { display: "flex", "align-items": "center", padding: "10px 15px" } }, I = /* @__PURE__ */ w({
+}, j = { style: { display: "flex", "align-items": "center", padding: "10px 15px" } }, G = /* @__PURE__ */ x({
   __name: "DonutChart",
   props: {
     type: {},
@@ -21,85 +21,85 @@ const E = {
     padAngle: {}
   },
   emits: ["click"],
-  setup(l, { emit: h }) {
-    const v = h, e = l, y = D(), u = L("slotWrapper"), n = T(), x = (t) => t, C = e.type === R.Half;
-    function k(t) {
-      return n.value = t, V();
+  setup(m, { emit: h }) {
+    const v = h, t = m, y = D(), d = L("slotWrapper"), l = T(), C = (e) => e, k = t.type === R.Half;
+    function V(e) {
+      return l.value = e, b();
     }
-    function V(t) {
-      return typeof window > "u" ? "" : u.value ? u.value.innerHTML : "";
+    function b(e) {
+      return typeof window > "u" ? "" : d.value ? d.value.innerHTML : "";
     }
-    const b = g(() => e.legendPosition.includes("top")), S = g(() => e.legendPosition.includes("left") ? "flex-start" : e.legendPosition.includes("right") ? "flex-end" : "center");
-    return (t, c) => (f(), p("div", {
+    const S = p(() => t.legendPosition.includes("top")), w = p(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center");
+    return (e, u) => (c(), g("div", {
       style: o({
         display: "flex",
-        flexDirection: b.value ? "column-reverse" : "column",
+        flexDirection: S.value ? "column-reverse" : "column",
         gap: "var(--vis-legend-spacing)"
       }),
-      onClick: c[0] || (c[0] = (s) => v("click", s, n.value))
+      onClick: u[0] || (u[0] = (a) => v("click", a, l.value))
     }, [
-      r(i(A), {
-        data: l.data,
-        height: l.height,
+      i(n(A), {
+        data: e.data,
+        height: e.height,
         margin: {}
       }, {
         default: B(() => [
-          r(i(H), {
+          i(n(H), {
             "horizontal-shift": 20,
             "vertical-shift": 20,
             triggers: {
-              [i(W).selectors.segment]: k
+              [n(W).selectors.segment]: V
             }
           }, null, 8, ["triggers"]),
-          r(i(N), {
-            value: x,
-            "corner-radius": l.radius,
-            "arc-width": l.arcWidth ?? 20,
-            color: e.labels.map((s) => s.color),
-            "angle-range": C ? [-1.5707963267948966, 1.5707963267948966] : [],
-            "pad-angle": e.padAngle || 0
+          i(n(N), {
+            value: C,
+            "corner-radius": e.radius,
+            "arc-width": e.arcWidth ?? 20,
+            color: t.labels.map((a) => a.color),
+            "angle-range": k ? [-1.5707963267948966, 1.5707963267948966] : [],
+            "pad-angle": t.padAngle || 0
           }, null, 8, ["corner-radius", "arc-width", "color", "angle-range", "pad-angle"])
         ]),
         _: 1
       }, 8, ["data", "height"]),
-      e.hideLegend ? m("", !0) : (f(), p("div", {
+      t.hideLegend ? f("", !0) : (c(), g("div", {
         key: 0,
         style: o({
           display: "flex",
-          justifyContent: S.value
+          justifyContent: w.value
         })
       }, [
-        r(i($), {
+        i(n($), {
           style: o([
-            e.legendStyle,
+            t.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
           ]),
-          items: l.labels
+          items: e.labels
         }, null, 8, ["style", "items"])
       ], 4)),
-      d(t.$slots, "default"),
-      a("div", E, [
-        i(y).tooltip ? d(t.$slots, "tooltip", {
+      s(e.$slots, "default"),
+      r("div", E, [
+        n(y).tooltip ? s(e.$slots, "tooltip", {
           key: 0,
-          values: n.value
-        }) : n.value ? d(t.$slots, "fallback", { key: 1 }, () => [
-          a("div", j, [
-            a("div", {
+          values: l.value
+        }) : l.value ? s(e.$slots, "fallback", { key: 1 }, () => [
+          r("div", j, [
+            r("div", {
               style: o({
                 width: "0.5rem",
                 height: "0.5rem",
                 borderRadius: "9999px",
                 marginRight: "0.5rem",
-                backgroundColor: e.labels[n.value.index].color
+                backgroundColor: t.labels[l.value.index].color
               })
             }, null, 4),
-            a("div", null, P(n.value.data), 1)
+            r("div", null, P(l.value.data), 1)
           ])
-        ]) : m("", !0)
+        ]) : f("", !0)
       ], 512)
     ], 4));
   }
 });
 export {
-  I as default
+  G as default
 };

package/dist/components/Timeline/Timeline.js

@@ -0,0 +1,120 @@
+import { defineComponent as L, useSlots as V, useTemplateRef as C, ref as _, computed as c, createElementBlock as u, openBlock as p, normalizeStyle as d, createVNode as i, createCommentVNode as g, createElementVNode as H, unref as o, withCtx as B, renderSlot as f } from "vue";
+import { Timeline as P } from "@unovis/ts";
+import { dateFormatter as S, getFirstPropertyValue as j } from "../../utils.js";
+import A from "../Tooltip.js";
+import { VisXYContainer as F, VisTimeline as $, VisTooltip as N, VisAxis as O, VisBulletLegend as E } from "@unovis/vue";
+import { LegendPosition as R } from "../../types.js";
+const G = /* @__PURE__ */ L({
+  __name: "Timeline",
+  props: {
+    data: {},
+    labelWidth: { default: 220 },
+    height: {},
+    title: { default: "" },
+    categories: {},
+    x: {},
+    length: {},
+    type: {},
+    getTooltipText: {},
+    showLabels: { type: Boolean, default: !0 },
+    hideTooltip: { type: Boolean, default: !1 },
+    crosshairConfig: {},
+    lineWidth: { default: 12 },
+    rowHeight: { default: 24 },
+    legendPosition: { default: R.TopRight },
+    legendStyle: {},
+    hideLegend: { type: Boolean }
+  },
+  emits: ["click", "scroll", "labelHover"],
+  setup(h, { emit: m }) {
+    const e = h, n = m, y = V(), s = C("slotWrapper"), r = _(), v = c(() => e.legendPosition.startsWith("top")), T = c(() => e.legendPosition.includes("left") ? "flex-start" : e.legendPosition.includes("right") ? "flex-end" : "center"), b = { [P.selectors.label]: k };
+    function k(t) {
+      return r.value = t, n("labelHover", t), typeof window > "u" ? "" : s.value ? s.value.innerHTML : "";
+    }
+    function x(t, a, l) {
+      n("click", l, { index: a, item: t });
+    }
+    function W(t) {
+      n("scroll", t.deltaY);
+    }
+    const w = c(() => {
+      const t = Object.values(e.categories).map(
+        (a, l) => `var(--vis-color${l})`
+      );
+      return Object.values(e.categories).map(
+        (a, l) => a.color ?? t[l]
+      );
+    });
+    return (t, a) => (p(), u("div", {
+      style: d({
+        display: "flex",
+        flexDirection: v.value ? "column-reverse" : "column",
+        gap: "var(--vis-legend-spacing)"
+      })
+    }, [
+      i(o(F), {
+        data: e.data,
+        height: e.height,
+        onWheel: W
+      }, {
+        default: B(() => [
+          i(o($), {
+            x: e.x,
+            length: e.length,
+            lineWidth: e.lineWidth,
+            rowHeight: e.rowHeight,
+            type: e.type,
+            color: w.value,
+            labelWidth: e.labelWidth,
+            showLabels: e.showLabels,
+            onClick: x
+          }, null, 8, ["x", "length", "lineWidth", "rowHeight", "type", "color", "labelWidth", "showLabels"]),
+          i(o(N), { triggers: b }),
+          i(o(O), {
+            type: "x",
+            tickFormat: o(S),
+            numTicks: 10
+          }, null, 8, ["tickFormat"])
+        ]),
+        _: 1
+      }, 8, ["data", "height"]),
+      e.hideLegend ? g("", !0) : (p(), u("div", {
+        key: 0,
+        style: d({
+          display: "flex",
+          justifyContent: T.value
+        })
+      }, [
+        i(o(E), {
+          style: d([
+            e.legendStyle,
+            "display: flex; gap: var(--vis-legend-spacing);"
+          ]),
+          items: Object.values(e.categories).map((l) => ({
+            ...l,
+            color: Array.isArray(l.color) ? l.color[0] : l.color
+          }))
+        }, null, 8, ["style", "items"])
+      ], 4)),
+      H("div", {
+        ref_key: "slotWrapper",
+        ref: s,
+        style: { display: "none" }
+      }, [
+        o(y).labelTooltip ? f(t.$slots, "labelTooltip", {
+          key: 0,
+          values: r.value
+        }) : r.value ? f(t.$slots, "fallback", { key: 1 }, () => [
+          i(A, {
+            data: r.value,
+            categories: t.categories,
+            toolTipTitle: o(j)(r.value) ?? ""
+          }, null, 8, ["data", "categories", "toolTipTitle"])
+        ]) : g("", !0)
+      ], 512)
+    ], 4));
+  }
+});
+export {
+  G as default
+};

package/dist/components/Timeline/Timeline.vue.d.ts

@@ -0,0 +1,33 @@
+import { TimelineProps } from '../../types';
+export interface TimelineCategory {
+    name: string;
+    color?: string | string[];
+}
+declare const _default: <T extends Record<string, any>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onClick?: ((event: MouseEvent, data: {
+            index: number;
+            item: T;
+        }) => any) | undefined;
+        readonly onScroll?: ((distance: number) => any) | undefined;
+        readonly onLabelHover?: ((item: T | undefined) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick" | "onScroll" | "onLabelHover"> & TimelineProps<T> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        labelTooltip?(_: {
+            values: T | undefined;
+        }): any;
+        fallback?(_: {}): any;
+    };
+    emit: ((evt: "click", event: MouseEvent, data: {
+        index: number;
+        item: T;
+    }) => void) & ((evt: "scroll", distance: number) => void) & ((evt: "labelHover", item: T | undefined) => void);
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/Timeline/Timeline2.js

@@ -0,0 +1,4 @@
+import f from "./Timeline.js";
+export {
+  f as default
+};

package/dist/components/Timeline/types.d.ts

@@ -0,0 +1,24 @@
+import { BulletLegendItemInterface, CrosshairConfig, LegendPosition } from '../../types';
+export interface TimelineLegendItem {
+    name: string;
+    color: string;
+}
+export interface TimelineProps<T extends Record<string, any>> {
+    data: T[];
+    labelWidth?: number;
+    height?: number;
+    title?: string;
+    categories: Record<string, BulletLegendItemInterface>;
+    x: (d: T) => number;
+    length: (d: T) => number;
+    type: (d: T) => string;
+    getTooltipText?: (label: string, index: number, data: T[]) => string;
+    showLabels?: boolean;
+    hideTooltip?: boolean;
+    crosshairConfig?: CrosshairConfig;
+    lineWidth?: number;
+    rowHeight?: number;
+    legendPosition?: LegendPosition;
+    legendStyle?: Record<string, string>;
+    hideLegend?: boolean;
+}

package/dist/components/Tooltip.js

@@ -1,11 +1,11 @@
-import { defineComponent as v, computed as y, createElementBlock as i, openBlock as l, createElementVNode as o, toDisplayString as n, Fragment as b, renderList as f, normalizeStyle as a } from "vue";
-const h = { style: { padding: "10px 15px" } }, B = { style: {
+import { defineComponent as y, computed as b, createElementBlock as r, openBlock as i, createElementVNode as e, toDisplayString as l, Fragment as f, renderList as h, normalizeStyle as n } from "vue";
+const x = { style: { padding: "10px 15px" } }, B = { style: {
   color: "var(--tooltip-value-color)",
   textTransform: "capitalize",
   borderBottom: "borderBottom: 1px solid var(--tooltip-border-color)",
   marginBottom: "0.25rem",
   paddingBottom: "0.25rem"
-} }, F = /* @__PURE__ */ v({
+} }, T = /* @__PURE__ */ y({
   __name: "Tooltip",
   props: {
     data: {},
@@ -13,30 +13,30 @@ const h = { style: { padding: "10px 15px" } }, B = { style: {
     toolTipTitle: {},
     yFormatter: { type: Function }
   },
-  setup(t) {
-    const c = t, g = ["_index", "_stacked", "_ending"], p = y(() => Object.entries(c.data ?? []).filter(
-      ([r, u]) => !g.includes(r) && Object.keys(c.categories).includes(r)
+  setup(d) {
+    const a = d, m = ["_index", "_stacked", "_ending"], g = b(() => Object.entries(a.data ?? []).filter(
+      ([o, u]) => !m.includes(o) && Object.keys(a.categories).includes(o)
     ));
-    return (r, u) => (l(), i("div", h, [
-      o("div", B, n(t.toolTipTitle), 1),
-      (l(!0), i(b, null, f(p.value, ([e, s], x) => {
-        var d, m;
-        return l(), i("div", {
-          key: e,
+    return (o, u) => (i(), r("div", x, [
+      e("div", B, l(o.toolTipTitle), 1),
+      (i(!0), r(f, null, h(g.value, ([t, s], v) => {
+        var p, c;
+        return i(), r("div", {
+          key: t,
           style: { display: "flex", "align-items": "center", "margin-bottom": "4px" }
         }, [
-          o("span", {
-            style: a([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, {
-              backgroundColor: typeof ((d = t.categories[e]) == null ? void 0 : d.color) == "string" && ((m = t.categories[e]) != null && m.color) ? t.categories[e].color : `var(--vis-color${x})`
+          e("span", {
+            style: n([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, {
+              backgroundColor: typeof ((p = o.categories[t]) == null ? void 0 : p.color) == "string" && ((c = o.categories[t]) != null && c.color) ? o.categories[t].color : `var(--vis-color${v})`
             }])
           }, null, 4),
-          o("div", null, [
-            o("span", {
-              style: a([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
-            }, n(t.categories[e].name) + ":", 1),
-            o("span", {
-              style: a([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
-            }, n(t.yFormatter ? t.yFormatter(s) : s), 1)
+          e("div", null, [
+            e("span", {
+              style: n([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
+            }, l(o.categories[t].name) + ":", 1),
+            e("span", {
+              style: n([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
+            }, l(o.yFormatter ? o.yFormatter(s) : s), 1)
           ])
         ]);
       }), 128))
@@ -44,5 +44,5 @@ const h = { style: { padding: "10px 15px" } }, B = { style: {
   }
 });
 export {
-  F as default
+  T as default
 };

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { default as LineChart } from './components/LineChart/LineChart.vue';
 import { default as BarChart } from './components/BarChart/BarChart.vue';
 import { default as DonutChart } from './components/DonutChart/DonutChart.vue';
 import { default as BubbleChart } from './components/BubbleChart/BubbleChart.vue';
+import { default as Timeline } from './components/Timeline/Timeline.vue';
 import { LegendPosition, CurveType, Orientation, BulletLegendItemInterface, MarkerConfig, CrosshairConfig } from './types';
-export { AreaChart, LineChart, BarChart, DonutChart, BubbleChart, Orientation, CurveType, LegendPosition };
+export { AreaChart, LineChart, BarChart, DonutChart, BubbleChart, Timeline, Orientation, CurveType, LegendPosition };
 export type { BulletLegendItemInterface, MarkerConfig, CrosshairConfig };

package/dist/index.js

@@ -1,16 +1,18 @@
-import { default as e } from "./components/AreaChart/AreaChart.js";
+import { default as t } from "./components/AreaChart/AreaChart.js";
 import { default as o } from "./components/LineChart/LineChart.js";
 import { default as u } from "./components/BarChart/BarChart.js";
-import { default as d } from "./components/DonutChart/DonutChart.js";
-import { default as m } from "./components/BubbleChart/BubbleChart.js";
-import { CurveType as s, LegendPosition as x, Orientation as C } from "./types.js";
+import { default as m } from "./components/DonutChart/DonutChart.js";
+import { default as d } from "./components/BubbleChart/BubbleChart.js";
+import { default as n } from "./components/Timeline/Timeline.js";
+import { CurveType as x, LegendPosition as C, Orientation as h } from "./types.js";
 export {
-  e as AreaChart,
+  t as AreaChart,
   u as BarChart,
-  m as BubbleChart,
-  s as CurveType,
-  d as DonutChart,
-  x as LegendPosition,
+  d as BubbleChart,
+  x as CurveType,
+  m as DonutChart,
+  C as LegendPosition,
   o as LineChart,
-  C as Orientation
+  h as Orientation,
+  n as Timeline
 };

package/dist/types.d.ts

@@ -3,6 +3,7 @@ import { BarChartProps } from './components/BarChart/types';
 import { LineChartProps } from './components/LineChart/types';
 import { DonutChartProps } from './components/DonutChart/types';
 import { BubbleChartProps } from './components/BubbleChart/types';
+import { TimelineProps, TimelineLegendItem } from './components/Timeline/types';
 declare enum LegendPosition {
     TopLeft = "top-left",
     TopCenter = "top-center",
@@ -44,7 +45,7 @@ declare enum Orientation {
     Horizontal = "horizontal",
     Vertical = "vertical"
 }
-export { LegendPosition, CurveType, Orientation, type AreaChartProps, type BarChartProps, type LineChartProps, type DonutChartProps, type BulletLegendItemInterface, type BubbleChartProps };
+export { LegendPosition, CurveType, Orientation, type AreaChartProps, type BarChartProps, type LineChartProps, type DonutChartProps, type BulletLegendItemInterface, type BubbleChartProps, type TimelineProps, type TimelineLegendItem };
 export type axisFormatter = ((tick: number, i?: number, ticks?: number[]) => string) | ((tick: Date, i?: number, ticks?: Date[]) => string);
 export interface MarkerConfig {
     type?: "circle" | "square" | "triangle" | "diamond";

package/dist/utils.d.ts

@@ -6,3 +6,4 @@ export declare function createMarkers(markerConfig: Record<string, MarkerConfig>
 export declare const flattenData: (data: any[], xAxis: string) => {
     month: any;
 }[];
+export declare const dateFormatter: (date: number) => string;

package/dist/utils.js

@@ -1,49 +1,50 @@
-function o(n) {
-  if (n && Object.keys(n).length > 0) {
-    const e = Object.keys(n)[0];
-    return n[e];
+function m(t) {
+  if (t && Object.keys(t).length > 0) {
+    const e = Object.keys(t)[0];
+    return t[e];
   }
 }
-const u = (n, e, r, t, $) => {
-  switch (n) {
+const o = (t, e, r, n, $) => {
+  switch (t) {
     case "circle":
-      return `<circle cx="${e / 2}" cy="${e / 2}" r="${(e - r) / 2}" stroke-width="${r}" stroke="${$}" fill="${t}" />`;
+      return `<circle cx="${e / 2}" cy="${e / 2}" r="${(e - r) / 2}" stroke-width="${r}" stroke="${$}" fill="${n}" />`;
     case "square":
-      return `<rect x="${r / 2}" y="${r / 2}" width="${e - r}" height="${e - r}" stroke-width="${r}" stroke="${$}" fill="${t}" />`;
+      return `<rect x="${r / 2}" y="${r / 2}" width="${e - r}" height="${e - r}" stroke-width="${r}" stroke="${$}" fill="${n}" />`;
     case "triangle":
-      return `<polygon points="${e / 2},${r / 2} ${e - r / 2},${e - r / 2} ${r / 2},${e - r / 2}" stroke-width="${r}" stroke="${$}" fill="${t}" />`;
+      return `<polygon points="${e / 2},${r / 2} ${e - r / 2},${e - r / 2} ${r / 2},${e - r / 2}" stroke-width="${r}" stroke="${$}" fill="${n}" />`;
     case "diamond":
-      return `<polygon points="${e / 2},${r / 2} ${e - r / 2},${e / 2} ${e / 2},${e - r / 2} ${r / 2},${e / 2}" stroke-width="${r}" stroke="${$}" fill="${t}" />`;
+      return `<polygon points="${e / 2},${r / 2} ${e - r / 2},${e / 2} ${e / 2},${e - r / 2} ${r / 2},${e / 2}" stroke-width="${r}" stroke="${$}" fill="${n}" />`;
     default:
       return "";
   }
 };
-function m(n) {
-  return Object.entries(n).map(([e, r]) => {
-    const t = r.type || "circle", $ = r.size || 10, c = r.strokeWidth || 2, a = r.color || "#000", l = r.strokeColor || r.color || "#000";
+function p(t) {
+  return Object.entries(t).map(([e, r]) => {
+    const n = r.type || "circle", $ = r.size || 10, c = r.strokeWidth || 2, a = r.color || "#000", l = r.strokeColor || r.color || "#000";
     return `<marker id="circle-marker-${e}" viewBox="0 0 ${$} ${$}" refX="${$ / 2}" refY="${$ / 2}" markerWidth="${$ / 2}" markerHeight="${$ / 2}">
-        ${u(t, $, c, a, l)}
+        ${o(n, $, c, a, l)}
       </marker>`;
   }).join(`
 `);
 }
-function p(n) {
-  return n.charAt(0).toUpperCase() + n.slice(1);
+function u(t) {
+  return t.charAt(0).toUpperCase() + t.slice(1);
 }
-const y = (n, e) => {
-  const r = Object.keys(n[0]).filter(($) => $ !== e), t = Object.keys(n[0][r[0]]);
-  return n.map(($) => ({
+const f = (t, e) => {
+  const r = Object.keys(t[0]).filter(($) => $ !== e), n = Object.keys(t[0][r[0]]);
+  return t.map(($) => ({
     month: $.month,
     ...r.flatMap(
-      (c) => t.map((a) => ({
-        [`${c}${p(a)}`]: $[c][a]
+      (c) => n.map((a) => ({
+        [`${c}${u(a)}`]: $[c][a]
       }))
     ).reduce((c, a) => ({ ...c, ...a }), {})
   }));
-};
+}, y = (t) => Intl.DateTimeFormat().format(t);
 export {
-  m as createMarkers,
-  y as flattenData,
-  o as getFirstPropertyValue,
-  u as markerShape
+  p as createMarkers,
+  y as dateFormatter,
+  f as flattenData,
+  m as getFirstPropertyValue,
+  o as markerShape
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chrts",
-  "version": "0.2.5-test.2",
+  "version": "0.2.5-test.3",
   "type": "module",
   "files": [
     "dist"