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

package/dist/components/AreaChart/AreaChart.js

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

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

@@ -27,10 +27,10 @@ export interface AreaChartProps<T> {
     /**
      * A function that formats the x-axis tick labels.
      * @param i The x-axis key of the item to be formatted.
-     * @param idx The index of the data point.
+     * @param idx The index of the data point (optional).
      * @returns The formatted x-axis label.
      */
-    xFormatter: (i: number, idx: number) => string | number;
+    xFormatter: (i: number, idx?: number) => string | number;
     /**
      * An optional function that formats the y-axis tick labels.
      * @param i The y-axis key of the item to be formatted.
@@ -83,6 +83,10 @@ export interface AreaChartProps<T> {
      * If `true`, displays a domain line (axis line) along the y-axis.
      */
     yDomainLine?: boolean;
+    /**
+     * If `true`, displays tick lines on the x-axis.
+     */
+    xTickLine?: boolean;
     /**
      * Optional position for the legend, if applicable.
      * See `LegendPosition` for available options.

package/dist/components/BarChart/BarChart.js

@@ -87,7 +87,7 @@ const M = /* @__PURE__ */ b({
             "tick-format": e.xFormatter,
             label: e.xLabel,
             "grid-line": e.xGridLine,
-            "domain-line": e.xDomainLine,
+            "domain-line": !!e.xDomainLine,
             "tick-line": e.xTickLine,
             "num-ticks": e.xNumTicks,
             "tick-values": e.xExplicitTicks,
@@ -97,7 +97,7 @@ const M = /* @__PURE__ */ b({
             type: "y",
             label: e.yLabel,
             "grid-line": e.orientation !== i(s).Horizontal && e.yGridLine,
-            "domain-line": e.yDomainLine,
+            "domain-line": !!e.yDomainLine,
             "tick-format": e.yFormatter,
             "num-ticks": e.yNumTicks,
             "tick-line": e.yTickLine

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

@@ -30,10 +30,10 @@ export interface BarChartProps<T> {
     /**
      * A function that formats the x-axis tick labels.
      * @param i The x-axis key of the item to be formatted.
-     * @param idx The index of the data point.
+     * @param idx The index of the data point (optional).
      * @returns The formatted x-axis label.
      */
-    xFormatter: (i: number, idx: number) => string | number;
+    xFormatter: (i: number, idx?: number) => string | number;
     /**
      * An optional function that formats the y-axis tick labels.
      * @param i The y-axis key of the item to be formatted.

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

@@ -26,17 +26,17 @@ export interface LineChartProps<T> {
     /**
      * A function that formats the x-axis tick labels.
      * @param i The x-axis key of the item to be formatted.
-     * @param idx The index of the data point.
+     * @param idx The index of the data point (optional).
      * @returns The formatted x-axis label.
      */
-    xFormatter: (i: number, idx: number) => string | number;
+    xFormatter: (i: number, idx?: number) => string | number;
     /**
      * An optional function that formats the y-axis tick labels.
      * @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.
      */
-    yFormatter?: (i: number, idx: number) => string;
+    yFormatter?: (i: number, idx?: number) => string;
     /**
      * The type of curve to use for the line chart.
      * See `CurveType` for available options.

package/package.json

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