vue-chrts 0.1.0-beta.3 → 0.1.0-beta.4

package/dist/components/AreaChart/AreaChart.js

@@ -1,10 +1,9 @@
-import { defineComponent as D, computed as c, createApp as N, createElementBlock as d, openBlock as l, normalizeClass as v, createVNode as s, createCommentVNode as g, unref as t, withCtx as $, createBlock as k, Fragment as L, renderList as x, mergeProps as P } from "vue";
-import { Position as T, CurveType as b } from "@unovis/ts";
-import { VisXYContainer as j, VisTooltip as F, VisArea as A, VisLine as w, VisAxis as B, VisCrosshair as z, VisBulletLegend as I } from "@unovis/vue";
-import M from "../Tooltip.js";
-import { LegendPosition as O } from "../../types.js";
-import { getDistributedIndices as X } from "../../utils.js";
-const Q = /* @__PURE__ */ D({
+import { defineComponent as V, computed as f, createApp as C, createElementBlock as c, openBlock as a, normalizeClass as g, createVNode as l, createCommentVNode as d, unref as t, withCtx as G, createBlock as k, Fragment as h, renderList as N, mergeProps as $ } from "vue";
+import { Position as v, CurveType as T } from "@unovis/ts";
+import { VisXYContainer as P, VisTooltip as j, VisArea as D, VisLine as F, VisAxis as L, VisCrosshair as M, VisBulletLegend as O } from "@unovis/vue";
+import A from "../Tooltip.js";
+import { LegendPosition as E } from "../../types.js";
+const Y = /* @__PURE__ */ V({
   __name: "AreaChart",
   props: {
     data: {},
@@ -15,8 +14,10 @@ const Q = /* @__PURE__ */ D({
     xFormatter: {},
     yFormatter: {},
     curveType: {},
-    xNumTicks: { default: (a) => a.data.length > 24 ? 24 / 4 : a.data.length - 1 },
-    yNumTicks: { default: (a) => a.data.length > 24 ? 24 / 4 : a.data.length - 1 },
+    xNumTicks: { default: (i) => i.data.length > 24 ? 24 / 4 : i.data.length - 1 },
+    xExplicitTicks: {},
+    minMaxTicksOnly: {},
+    yNumTicks: { default: (i) => i.data.length > 24 ? 24 / 4 : i.data.length - 1 },
     hideLegend: { type: Boolean },
     hideTooltip: { type: Boolean },
     xGridLine: { type: Boolean },
@@ -25,82 +26,81 @@ const Q = /* @__PURE__ */ D({
     yDomainLine: { type: Boolean },
     legendPosition: {}
   },
-  setup(a) {
-    const n = a, u = Object.values(n.categories).map((e) => e.color), V = c(() => (e) => {
+  setup(i) {
+    const s = i, m = Object.values(s.categories).map((e) => e.color), b = f(() => (e) => {
       if (typeof window > "u" || typeof document > "u")
         return "";
       try {
-        const o = N(M, {
+        const o = C(A, {
           data: e,
-          categories: n.categories
-        }), i = document.createElement("div");
-        o.mount(i);
-        const r = i.innerHTML;
+          categories: s.categories
+        }), n = document.createElement("div");
+        o.mount(n);
+        const r = n.innerHTML;
         return o.unmount(), r;
       } catch {
         return "";
       }
     });
-    function C(e) {
+    function x(e) {
       var o;
       return {
-        y: (i) => Number(i[e]),
-        color: ((o = n.categories[e]) == null ? void 0 : o.color) ?? "#3b82f6"
+        y: (n) => Number(n[e]),
+        color: ((o = s.categories[e]) == null ? void 0 : o.color) ?? "#3b82f6"
       };
     }
-    const G = u.map(
+    const B = m.map(
       (e, o) => `
   <linearGradient id="gradient${o}-${e}" gradientTransform="rotate(90)">
     <stop offset="0%" stop-color="${e}" stop-opacity="1" />
     <stop offset="100%" stop-color="${e}" stop-opacity="0" />
   </linearGradient>
 `
-    ).join(""), h = c(
-      () => n.legendPosition === O.Top
-    ), m = c(() => X(n.data.length, n.xNumTicks)), p = c(() => {
-      var e;
-      return !((e = n.data) != null && e.length) || !m || m.value.length === 0 ? [] : m.value.map((o) => n.data[o]);
-    });
-    return (e, o) => (l(), d("div", {
-      class: v(["flex flex-col space-y-4", { "flex-col-reverse": h.value }])
+    ).join(""), y = f(
+      () => s.legendPosition === E.Top
+    );
+    return (e, o) => (a(), c("div", {
+      class: g(["flex flex-col space-y-4", { "flex-col-reverse": y.value }])
     }, [
-      s(t(j), {
-        data: p.value,
+      l(t(P), {
+        data: e.data,
         height: e.height,
-        "svg-defs": t(G)
+        "svg-defs": t(B)
       }, {
-        default: $(() => [
-          e.hideTooltip ? g("", !0) : (l(), k(t(F), {
+        default: G(() => [
+          e.hideTooltip ? d("", !0) : (a(), k(t(j), {
             key: 0,
-            "horizontal-placement": t(T).Right,
-            "vertical-placement": t(T).Top
+            "horizontal-placement": t(v).Right,
+            "vertical-placement": t(v).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"])),
-          (l(!0), d(L, null, x(Object.keys(n.categories), (i, r) => (l(), d(L, { key: r }, [
-            s(t(A), P({
-              x: (f, y) => y,
+          (a(!0), c(h, null, N(Object.keys(s.categories), (n, r) => (a(), c(h, { key: r }, [
+            l(t(D), $({
+              x: (p, u) => u,
               ref_for: !0
-            }, C(i), {
-              color: `url(#gradient${r}-${t(u)[r]})`,
+            }, x(n), {
+              color: `url(#gradient${r}-${t(m)[r]})`,
               opacity: 0.5,
-              "curve-type": e.curveType ?? t(b).MonotoneX
+              "curve-type": e.curveType ?? t(T).MonotoneX
             }), null, 16, ["x", "color", "curve-type"]),
-            s(t(w), {
-              x: (f, y) => y,
-              y: (f) => f[i],
-              color: t(u)[r],
-              "curve-type": e.curveType ?? t(b).MonotoneX
+            l(t(F), {
+              x: (p, u) => u,
+              y: (p) => p[n],
+              color: t(m)[r],
+              "curve-type": e.curveType ?? t(T).MonotoneX
             }, null, 8, ["x", "y", "color", "curve-type"])
           ], 64))), 128)),
-          s(t(B), {
+          l(t(L), {
             type: "x",
-            "num-ticks": p.value.length,
-            "tick-format": (i, r) => e.xFormatter(p.value[i], r),
+            "tick-format": e.xFormatter,
             label: e.xLabel,
-            "grid-line": e.xGridLine,
+            "label-margin": 8,
             "domain-line": e.xDomainLine,
-            "tick-line": !!e.xGridLine
-          }, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"]),
-          s(t(B), {
+            "grid-line": e.xGridLine,
+            "num-ticks": e.xNumTicks,
+            "tick-values": e.xExplicitTicks,
+            "min-max-ticks-only": e.minMaxTicksOnly
+          }, null, 8, ["tick-format", "label", "domain-line", "grid-line", "num-ticks", "tick-values", "min-max-ticks-only"]),
+          l(t(L), {
             type: "y",
             "num-ticks": e.yNumTicks,
             "tick-format": e.yFormatter,
@@ -109,19 +109,19 @@ const Q = /* @__PURE__ */ D({
             "domain-line": e.yDomainLine,
             "tick-line": !!e.yGridLine
           }, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"]),
-          e.hideTooltip ? g("", !0) : (l(), k(t(z), {
+          e.hideTooltip ? d("", !0) : (a(), k(t(M), {
             key: 1,
             color: "#666",
-            template: V.value
+            template: b.value
           }, null, 8, ["template"]))
         ]),
         _: 1
       }, 8, ["data", "height", "svg-defs"]),
-      e.hideLegend ? g("", !0) : (l(), d("div", {
+      e.hideLegend ? d("", !0) : (a(), c("div", {
         key: 0,
-        class: v(["flex items center justify-end", { "pb-4": h.value }])
+        class: g(["flex items center justify-end", { "pb-4": y.value }])
       }, [
-        s(t(I), {
+        l(t(O), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ], 2))
@@ -129,5 +129,5 @@ const Q = /* @__PURE__ */ D({
   }
 });
 export {
-  Q as default
+  Y as default
 };

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

@@ -26,14 +26,14 @@ export interface AreaChartProps<T> {
     categories: Record<string, BulletLegendItemInterface>;
     /**
      * A function that formats the x-axis tick labels.
-     * @param item The x-axis value to be formatted.
+     * @param i The x-axis key of the item to be formatted.
      * @param idx The index of the data point.
      * @returns The formatted x-axis label.
      */
-    xFormatter: (item: T, idx: number) => string | number;
+    xFormatter: (i: number, idx: number) => string | number;
     /**
      * An optional function that formats the y-axis tick labels.
-     * @param i The value to be formatted.
+     * @param i The y-axis key of the item to be formatted.
      * @param idx The index of the data point (optional).
      * @returns The formatted y-axis label or value.
      */
@@ -47,6 +47,14 @@ export interface AreaChartProps<T> {
      * The desired number of ticks on the x-axis.
      */
     xNumTicks?: number;
+    /**
+     * Force specific ticks on the x-axis.
+     */
+    xExplicitTicks?: number;
+    /**
+     * Force only first and last ticks on the x-axis.
+     */
+    minMaxTicksOnly?: number;
     /**
      * The desired number of ticks on the y-axis.
      */

package/dist/components/BarChart/BarChart.js

@@ -1,10 +1,9 @@
-import { defineComponent as v, computed as d, createApp as B, createElementBlock as k, openBlock as c, normalizeClass as h, createVNode as l, createCommentVNode as T, unref as i, withCtx as V, createBlock as L } from "vue";
-import { Orientation as s, StackedBar as P, GroupedBar as C } from "@unovis/ts";
-import { VisXYContainer as D, VisTooltip as G, VisGroupedBar as N, VisStackedBar as A, VisAxis as b, VisBulletLegend as F } from "@unovis/vue";
-import x from "../Tooltip.js";
-import { LegendPosition as j } from "../../types.js";
-import { getDistributedIndices as w } from "../../utils.js";
-const M = /* @__PURE__ */ v({
+import { defineComponent as b, computed as u, createApp as h, createElementBlock as y, openBlock as d, normalizeClass as k, createVNode as t, createCommentVNode as B, unref as i, withCtx as T, createBlock as f } from "vue";
+import { Orientation as s, StackedBar as v, GroupedBar as V } from "@unovis/ts";
+import { VisXYContainer as P, VisTooltip as x, VisGroupedBar as C, VisStackedBar as G, VisAxis as L, VisBulletLegend as N } from "@unovis/vue";
+import A from "../Tooltip.js";
+import { LegendPosition as O } from "../../types.js";
+const M = /* @__PURE__ */ b({
   __name: "BarChart",
   props: {
     data: {},
@@ -15,8 +14,10 @@ const M = /* @__PURE__ */ v({
     categories: {},
     xFormatter: {},
     yFormatter: {},
-    yNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
-    xNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
+    yNumTicks: { default: (a) => a.data.length > 24 ? 24 / 4 : a.data.length - 1 },
+    minMaxTicksOnly: {},
+    xNumTicks: { default: (a) => a.data.length > 24 ? 24 / 4 : a.data.length - 1 },
+    xExplicitTicks: {},
     yAxis: {},
     groupPadding: {},
     barPadding: {},
@@ -31,71 +32,68 @@ const M = /* @__PURE__ */ v({
     xGridLine: { type: Boolean },
     yGridLine: { type: Boolean, default: !0 }
   },
-  setup(t) {
-    const a = t, g = d(() => a.yAxis.map((e) => (n) => n[e])), p = (e, n) => Object.values(a.categories)[n].color, y = d(
-      () => a.legendPosition === j.Top
-    ), m = d(
-      () => w(a.data.length, a.xNumTicks)
-    ), u = d(() => {
-      var e;
-      return !((e = a.data) != null && e.length) || !m || m.value.length === 0 ? [] : m.value.map((n) => a.data[n]);
-    }), f = d(() => (e) => {
+  setup(a) {
+    const r = a, m = u(() => r.yAxis.map((e) => (n) => n[e])), c = (e, n) => Object.values(r.categories)[n].color, p = u(
+      () => r.legendPosition === O.Top
+    ), g = u(() => (e) => {
       if (typeof window > "u" || typeof document > "u")
         return "";
       try {
-        const n = B(x, {
+        const n = h(A, {
           data: e,
-          categories: a.categories
-        }), r = document.createElement("div");
-        n.mount(r);
-        const o = r.innerHTML;
+          categories: r.categories
+        }), l = document.createElement("div");
+        n.mount(l);
+        const o = l.innerHTML;
         return n.unmount(), o;
       } catch {
         return "";
       }
     });
-    return (e, n) => (c(), k("div", {
-      class: h(["flex flex-col space-y-4", { "flex-col-reverse": y.value }])
+    return (e, n) => (d(), y("div", {
+      class: k(["flex flex-col space-y-4", { "flex-col-reverse": p.value }])
     }, [
-      l(i(D), { height: e.height }, {
-        default: V(() => [
-          l(i(G), {
+      t(i(P), { height: e.height }, {
+        default: T(() => [
+          t(i(x), {
             triggers: {
-              [i(C).selectors.bar]: f.value,
-              [i(P).selectors.bar]: f.value
+              [i(V).selectors.bar]: g.value,
+              [i(v).selectors.bar]: g.value
             }
           }, null, 8, ["triggers"]),
-          e.stacked ? (c(), L(i(A), {
+          e.stacked ? (d(), f(i(G), {
             key: 1,
-            data: u.value,
-            x: (r, o) => o,
-            y: g.value,
-            color: p,
+            data: e.data,
+            x: (l, o) => o,
+            y: m.value,
+            color: c,
             "rounded-corners": e.radius ?? 0,
             "group-padding": e.groupPadding ?? 0,
             "bar-padding": e.barPadding ?? 0.2,
             orientation: e.orientation ?? i(s).Vertical
-          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (c(), L(i(N), {
+          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (d(), f(i(C), {
             key: 0,
-            data: u.value,
-            x: (r, o) => o,
-            y: g.value,
-            color: p,
+            data: e.data,
+            x: (l, o) => o,
+            y: m.value,
+            color: c,
             "rounded-corners": e.radius ?? 0,
             "group-padding": e.groupPadding ?? 0,
             "bar-padding": e.barPadding ?? 0.2,
             orientation: e.orientation ?? i(s).Vertical
           }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
-          l(i(b), {
+          t(i(L), {
             type: "x",
-            "num-ticks": u.value.length,
-            "tick-format": a.orientation === i(s).Horizontal ? e.xFormatter : (r, o) => e.xFormatter(u.value[r], o),
+            "tick-format": e.xFormatter,
             label: e.xLabel,
             "grid-line": e.xGridLine,
             "domain-line": e.xDomainLine,
-            "tick-line": e.xTickLine
-          }, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"]),
-          l(i(b), {
+            "tick-line": e.xTickLine,
+            "num-ticks": e.xNumTicks,
+            "tick-values": e.xExplicitTicks,
+            "min-max-ticks-only": e.minMaxTicksOnly
+          }, null, 8, ["tick-format", "label", "grid-line", "domain-line", "tick-line", "num-ticks", "tick-values", "min-max-ticks-only"]),
+          t(i(L), {
             type: "y",
             label: e.yLabel,
             "grid-line": e.orientation !== i(s).Horizontal && e.yGridLine,
@@ -107,11 +105,11 @@ const M = /* @__PURE__ */ v({
         ]),
         _: 1
       }, 8, ["height"]),
-      e.hideLegend ? T("", !0) : (c(), k("div", {
+      e.hideLegend ? B("", !0) : (d(), y("div", {
         key: 0,
-        class: h(["flex items center justify-end", { "pb-4": y.value }])
+        class: k(["flex items center justify-end", { "pb-4": p.value }])
       }, [
-        l(i(F), {
+        t(i(N), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ], 2))

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

@@ -29,14 +29,14 @@ export interface BarChartProps<T> {
     categories: Record<string, BulletLegendItemInterface>;
     /**
      * A function that formats the x-axis tick labels.
-     * @param item The x-axis value to be formatted.
+     * @param i The x-axis key of the item to be formatted.
      * @param idx The index of the data point.
      * @returns The formatted x-axis label.
      */
-    xFormatter: (item: T, idx: number) => string | number;
+    xFormatter: (i: number, idx: number) => string | number;
     /**
      * An optional function that formats the y-axis tick labels.
-     * @param i The value to be formatted.
+     * @param i The y-axis key of the item to be formatted.
      * @param idx The index of the data point (optional).
      * @returns The formatted y-axis label or value.
      */
@@ -45,10 +45,18 @@ export interface BarChartProps<T> {
      * The desired number of ticks on the y-axis.
      */
     yNumTicks?: number;
+    /**
+     * Force only first and last ticks on the x-axis.
+     */
+    minMaxTicksOnly?: number;
     /**
      * The desired number of ticks on the x-axis.
      */
     xNumTicks?: number;
+    /**
+     * Force specific ticks on the x-axis.
+     */
+    xExplicitTicks?: number;
     /**
      * An array of property keys from the data object type 'T' to be used for the y-axis values.
      */

package/dist/components/LineChart/LineChart.js

@@ -1,10 +1,9 @@
-import { defineComponent as B, computed as m, createApp as C, createElementBlock as u, openBlock as r, normalizeClass as g, createVNode as c, createCommentVNode as f, unref as t, withCtx as V, createBlock as h, Fragment as x, renderList as D } from "vue";
-import { Position as k, CurveType as N } from "@unovis/ts";
-import { VisXYContainer as F, VisTooltip as P, VisLine as j, VisAxis as L, VisCrosshair as G, VisBulletLegend as w } from "@unovis/vue";
-import z from "../Tooltip.js";
-import { LegendPosition as I } from "../../types.js";
-import { getDistributedIndices as O } from "../../utils.js";
-const Y = /* @__PURE__ */ B({
+import { defineComponent as v, computed as u, createApp as b, createElementBlock as m, openBlock as n, normalizeClass as p, createVNode as o, createCommentVNode as y, unref as i, withCtx as B, createBlock as k, Fragment as x, renderList as C } from "vue";
+import { Position as g, CurveType as V } from "@unovis/ts";
+import { VisXYContainer as N, VisTooltip as F, VisLine as O, VisAxis as f, VisCrosshair as P, VisBulletLegend as j } from "@unovis/vue";
+import D from "../Tooltip.js";
+import { LegendPosition as E } from "../../types.js";
+const X = /* @__PURE__ */ v({
   __name: "LineChart",
   props: {
     data: {},
@@ -15,9 +14,11 @@ const Y = /* @__PURE__ */ B({
     xFormatter: {},
     yFormatter: {},
     curveType: {},
+    xNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
+    xExplicitTicks: {},
+    minMaxTicksOnly: {},
+    yNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
     hideTooltip: { type: Boolean },
-    yNumTicks: { default: (n) => n.data.length > 24 ? 24 / 4 : n.data.length - 1 },
-    xNumTicks: { default: (n) => n.data.length > 24 ? 24 / 4 : n.data.length - 1 },
     hideLegend: { type: Boolean },
     legendPosition: {},
     xGridLine: { type: Boolean },
@@ -27,59 +28,56 @@ const Y = /* @__PURE__ */ B({
     xTickLine: { type: Boolean },
     yTickLine: { type: Boolean }
   },
-  setup(n) {
-    const i = n, v = (e) => Object.values(i.categories)[e].color, T = m(() => (e) => {
+  setup(t) {
+    const l = t, h = (e) => Object.values(l.categories)[e].color, L = u(() => (e) => {
       if (typeof window > "u" || typeof document > "u")
         return "";
       try {
-        const o = C(z, {
+        const a = b(D, {
           data: e,
-          categories: i.categories
-        }), a = document.createElement("div");
-        o.mount(a);
-        const l = a.innerHTML;
-        return o.unmount(), l;
+          categories: l.categories
+        }), r = document.createElement("div");
+        a.mount(r);
+        const c = r.innerHTML;
+        return a.unmount(), c;
       } catch {
         return "";
       }
-    }), p = m(
-      () => i.legendPosition === I.Top
-    ), s = m(
-      () => O(i.data.length, i.xNumTicks)
-    ), d = m(() => {
-      var e;
-      return !((e = i.data) != null && e.length) || !s || s.value.length === 0 ? [] : s.value.map((o) => i.data[o]);
-    });
-    return (e, o) => (r(), u("div", {
-      class: g(["flex flex-col space-y-4", { "flex-col-reverse": p.value }])
+    }), s = u(
+      () => l.legendPosition === E.Top
+    );
+    return (e, a) => (n(), m("div", {
+      class: p(["flex flex-col space-y-4", { "flex-col-reverse": s.value }])
     }, [
-      c(t(F), {
-        data: d.value,
+      o(i(N), {
+        data: e.data,
         height: e.height
       }, {
-        default: V(() => [
-          c(t(P), {
-            "horizontal-placement": t(k).Right,
-            "vertical-placement": t(k).Top
+        default: B(() => [
+          o(i(F), {
+            "horizontal-placement": i(g).Right,
+            "vertical-placement": i(g).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"]),
-          (r(!0), u(x, null, D(Object.keys(i.categories), (a, l) => (r(), h(t(j), {
-            key: l,
-            x: (y, b) => b,
-            y: (y) => y[a],
-            color: v(l),
-            "curve-type": e.curveType ?? t(N).MonotoneX
+          (n(!0), m(x, null, C(Object.keys(l.categories), (r, c) => (n(), k(i(O), {
+            key: c,
+            x: (d, T) => T,
+            y: (d) => d[r],
+            color: h(c),
+            "curve-type": e.curveType ?? i(V).MonotoneX
           }, null, 8, ["x", "y", "color", "curve-type"]))), 128)),
-          c(t(L), {
+          o(i(f), {
             type: "x",
-            "num-ticks": d.value.length,
-            "tick-format": (a, l) => e.xFormatter(d.value[a], l),
+            "tick-format": e.xFormatter,
             label: e.xLabel,
             "label-margin": 8,
             "domain-line": e.xDomainLine,
             "grid-line": e.xGridLine,
-            "tick-line": e.xTickLine
-          }, null, 8, ["num-ticks", "tick-format", "label", "domain-line", "grid-line", "tick-line"]),
-          c(t(L), {
+            "tick-line": e.xTickLine,
+            "num-ticks": e.xNumTicks,
+            "tick-values": e.xExplicitTicks,
+            "min-max-ticks-only": e.minMaxTicksOnly
+          }, null, 8, ["tick-format", "label", "domain-line", "grid-line", "tick-line", "num-ticks", "tick-values", "min-max-ticks-only"]),
+          o(i(f), {
             type: "y",
             "tick-format": e.yFormatter,
             label: e.yLabel,
@@ -88,19 +86,19 @@ const Y = /* @__PURE__ */ B({
             "grid-line": e.yGridLine,
             "tick-line": e.yTickLine
           }, null, 8, ["tick-format", "label", "num-ticks", "domain-line", "grid-line", "tick-line"]),
-          e.hideTooltip ? f("", !0) : (r(), h(t(G), {
+          e.hideTooltip ? y("", !0) : (n(), k(i(P), {
             key: 0,
             color: "#666",
-            template: T.value
+            template: L.value
           }, null, 8, ["template"]))
         ]),
         _: 1
       }, 8, ["data", "height"]),
-      e.hideLegend ? f("", !0) : (r(), u("div", {
+      e.hideLegend ? y("", !0) : (n(), m("div", {
         key: 0,
-        class: g(["flex items center justify-end", { "pb-4": p.value }])
+        class: p(["flex items center justify-end", { "pb-4": s.value }])
       }, [
-        c(t(w), {
+        o(i(j), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ], 2))
@@ -108,5 +106,5 @@ const Y = /* @__PURE__ */ B({
   }
 });
 export {
-  Y as default
+  X as default
 };

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

@@ -25,14 +25,14 @@ export interface LineChartProps<T> {
     categories: Record<string, BulletLegendItemInterface>;
     /**
      * A function that formats the x-axis tick labels.
-     * @param item The x-axis value to be formatted.
+     * @param i The x-axis key of the item to be formatted.
      * @param idx The index of the data point.
      * @returns The formatted x-axis label.
      */
-    xFormatter: (item: T, idx: number) => string | number;
+    xFormatter: (i: number, idx: number) => string | number;
     /**
      * An optional function that formats the y-axis tick labels.
-     * @param i The value to be formatted.
+     * @param i The y-axis key of the item to be formatted.
      * @param idx The index of the data point.
      * @returns The formatted y-axis label.
      */
@@ -43,17 +43,25 @@ export interface LineChartProps<T> {
      */
     curveType?: CurveType;
     /**
-     * If `true`, hides the chart tooltip.
+     * The desired number of ticks on the x-axis.
      */
-    hideTooltip?: boolean;
+    xNumTicks?: number;
+    /**
+     * Force specific ticks on the x-axis.
+     */
+    xExplicitTicks?: number;
+    /**
+     * Force only first and last ticks on the x-axis.
+     */
+    minMaxTicksOnly?: number;
     /**
      * The desired number of ticks on the y-axis.
      */
     yNumTicks?: number;
     /**
-     * The desired number of ticks on the x-axis.
+     * If `true`, hides the chart tooltip.
      */
-    xNumTicks?: number;
+    hideTooltip?: boolean;
     /**
      * If `true`, hides the chart legend.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chrts",
-  "version": "0.1.0-beta.3",
+  "version": "0.1.0-beta.4",
   "type": "module",
   "files": [
     "dist"

package/dist/utils.js

@@ -1,18 +0,0 @@
-function i(t, r) {
-  if (r <= 0) return [];
-  if (r >= t)
-    return Array.from({ length: t }, (o, e) => e);
-  if (r === 1)
-    return [Math.floor((t - 1) / 2)];
-  if (r === 2)
-    return [0, t - 1];
-  const f = [];
-  for (let o = 0; o < r; o++) {
-    const e = Math.round(o * (t - 1) / (r - 1));
-    f.push(e);
-  }
-  return f;
-}
-export {
-  i as getDistributedIndices
-};