vue-chrts 0.1.11-beta.1 → 0.1.12-beta.1

package/dist/components/AreaChart/AreaChart.js

@@ -102,8 +102,9 @@ const m = 24, B = 4, z = 0.5, C = "#3b82f6", Z = /* @__PURE__ */ O({
           }, null, 8, ["horizontal-placement", "vertical-placement"])),
           (o(!0), c(h, null, G(Object.keys(a.categories), (r, l) => (o(), c(h, { key: l }, [
             p(i(I), N({
-              x: (y, f) => f
-            }, { ref_for: !0 }, F(r), {
+              x: (y, f) => f,
+              ref_for: !0
+            }, F(r), {
               color: `url(#gradient${l}-${i(u)[l]})`,
               opacity: z,
               "curve-type": e.curveType ?? i(L).MonotoneX

package/dist/components/BarChart/BarChart.js

@@ -1,9 +1,9 @@
-import { defineComponent as x, computed as c, createApp as A, createElementBlock as b, openBlock as t, normalizeClass as L, createVNode as p, createCommentVNode as m, unref as i, withCtx as V, createBlock as l } from "vue";
-import { Orientation as s, StackedBar as P, GroupedBar as O } from "@unovis/ts";
-import { VisXYContainer as C, VisTooltip as F, VisGroupedBar as G, VisStackedBar as N, VisAxis as T, VisBulletLegend as j } from "@unovis/vue";
+import { defineComponent as v, computed as c, createApp as V, createElementBlock as f, openBlock as l, normalizeClass as b, createVNode as r, createCommentVNode as x, unref as i, withCtx as P, createBlock as h } from "vue";
+import { Orientation as s, StackedBar as A, GroupedBar as O } from "@unovis/ts";
+import { VisXYContainer as C, VisTooltip as F, VisGroupedBar as G, VisStackedBar as N, VisAxis as L, VisBulletLegend as j } from "@unovis/vue";
 import w from "../Tooltip.js";
 import { LegendPosition as E } from "../../types.js";
-const H = /* @__PURE__ */ x({
+const S = /* @__PURE__ */ v({
   __name: "BarChart",
   props: {
     data: {},
@@ -36,71 +36,68 @@ const H = /* @__PURE__ */ x({
     xTickLine: { type: Boolean },
     yTickLine: { type: Boolean },
     xGridLine: { type: Boolean },
-    yGridLine: { type: Boolean, default: !0 },
-    hideXAxis: { type: Boolean },
-    hideYAxis: { type: Boolean }
+    yGridLine: { type: Boolean, default: !0 }
   },
   setup(a) {
     const n = a;
     if (!n.yAxis || n.yAxis.length === 0)
       throw new Error("yAxis is required");
-    const y = c(() => n.yAxis.map((e) => (o) => o[e])), g = (e, o) => Object.values(n.categories)[o].color, k = c(
+    const m = c(() => n.yAxis.map((e) => (t) => t[e])), p = (e, t) => Object.values(n.categories)[t].color, g = c(
       () => n.legendPosition === E.Top
-    ), f = c(() => (e, o) => {
+    ), y = c(() => (e, t) => {
       if (typeof window > "u" || typeof document > "u")
         return "";
-      const u = Object.keys(n.categories), B = Object.keys(e).find((r) => !u.includes(r));
+      const u = Object.keys(n.categories), T = Object.keys(e).find((o) => !u.includes(o));
       try {
-        const r = A(w, {
+        const o = V(w, {
           data: e,
           categories: n.categories,
-          toolTipTitle: e[B],
+          toolTipTitle: e[T],
           yFormatter: n.yFormatter
-        }), h = document.createElement("div");
-        r.mount(h);
-        const v = h.innerHTML;
-        return r.unmount(), v;
+        }), k = document.createElement("div");
+        o.mount(k);
+        const B = k.innerHTML;
+        return o.unmount(), B;
       } catch {
         return "";
       }
     });
-    return (e, o) => (t(), b("div", {
-      class: L(["flex flex-col space-y-4", { "flex-col-reverse": k.value }])
+    return (e, t) => (l(), f("div", {
+      class: b(["flex flex-col space-y-4", { "flex-col-reverse": g.value }])
     }, [
-      p(i(C), {
+      r(i(C), {
         padding: e.padding,
         height: e.height
       }, {
-        default: V(() => [
-          p(i(F), {
+        default: P(() => [
+          r(i(F), {
             triggers: {
-              [i(O).selectors.bar]: f.value,
-              [i(P).selectors.bar]: f.value
+              [i(O).selectors.bar]: y.value,
+              [i(A).selectors.bar]: y.value
             }
           }, null, 8, ["triggers"]),
-          e.stacked ? (t(), l(i(N), {
+          e.stacked ? (l(), h(i(N), {
             key: 1,
             data: e.data,
             x: (u, d) => d,
-            y: y.value,
-            color: g,
+            y: m.value,
+            color: p,
             "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"])) : (t(), l(i(G), {
+          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (l(), h(i(G), {
             key: 0,
             data: e.data,
             x: (u, d) => d,
-            y: y.value,
-            color: g,
+            y: m.value,
+            color: p,
             "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"])),
-          e.hideXAxis ? m("", !0) : (t(), l(i(T), {
-            key: 2,
+          r(i(L), {
             type: "x",
             "tick-format": e.xFormatter,
             label: e.xLabel,
@@ -109,10 +106,9 @@ const H = /* @__PURE__ */ x({
             "tick-line": e.xTickLine,
             "num-ticks": e.xNumTicks,
             "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 ? m("", !0) : (t(), l(i(T), {
-            key: 3,
+            "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"]),
+          r(i(L), {
             type: "y",
             label: e.yLabel,
             "grid-line": e.orientation !== i(s).Horizontal && e.yGridLine,
@@ -120,15 +116,15 @@ const H = /* @__PURE__ */ x({
             "tick-format": e.yFormatter,
             "num-ticks": e.yNumTicks,
             "tick-line": e.yTickLine
-          }, null, 8, ["label", "grid-line", "domain-line", "tick-format", "num-ticks", "tick-line"]))
+          }, null, 8, ["label", "grid-line", "domain-line", "tick-format", "num-ticks", "tick-line"])
         ]),
         _: 1
       }, 8, ["padding", "height"]),
-      e.hideLegend ? m("", !0) : (t(), b("div", {
+      e.hideLegend ? x("", !0) : (l(), f("div", {
         key: 0,
-        class: L(["flex items center justify-end", { "pb-4": k.value }])
+        class: b(["flex items center justify-end", { "pb-4": g.value }])
       }, [
-        p(i(j), {
+        r(i(j), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ], 2))
@@ -136,5 +132,5 @@ const H = /* @__PURE__ */ x({
   }
 });
 export {
-  H as default
+  S as default
 };

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

@@ -121,12 +121,4 @@ export interface BarChartProps<T> {
      * If `true`, displays grid lines along the y-axis.
      */
     yGridLine?: boolean;
-    /**
-     * If `true`, hide the x-axis.
-     */
-    hideXAxis?: boolean;
-    /**
-     * If `true`, hide the y-axis.
-     */
-    hideYAxis?: boolean;
 }

package/dist/components/LineChart/LineChart.js

@@ -1,10 +1,10 @@
-import { defineComponent as b, computed as y, createApp as B, createElementBlock as d, openBlock as n, normalizeClass as g, createVNode as p, createCommentVNode as s, unref as i, withCtx as x, createBlock as m, Fragment as C, renderList as V } from "vue";
+import { defineComponent as b, computed as p, createApp as B, createElementBlock as s, openBlock as l, normalizeClass as u, createVNode as r, createCommentVNode as y, unref as i, withCtx as x, createBlock as g, Fragment as C, renderList as V } from "vue";
 import { Position as k, CurveType as F } from "@unovis/ts";
-import { VisXYContainer as O, VisTooltip as A, VisLine as M, VisAxis as f, VisCrosshair as N, VisBulletLegend as P } from "@unovis/vue";
-import j from "../Tooltip.js";
-import { LegendPosition as D } from "../../types.js";
-import { getFirstPropertyValue as E } from "../../utils.js";
-const H = /* @__PURE__ */ b({
+import { VisXYContainer as N, VisTooltip as O, VisLine as P, VisAxis as f, VisCrosshair as j, VisBulletLegend as D } from "@unovis/vue";
+import E from "../Tooltip.js";
+import { LegendPosition as G } from "../../types.js";
+import { getFirstPropertyValue as M } from "../../utils.js";
+const R = /* @__PURE__ */ b({
   __name: "LineChart",
   props: {
     data: {},
@@ -33,52 +33,49 @@ const H = /* @__PURE__ */ b({
     yGridLine: { type: Boolean },
     yDomainLine: { type: Boolean },
     xTickLine: { type: Boolean },
-    yTickLine: { type: Boolean },
-    hideXAxis: { type: Boolean },
-    hideYAxis: { type: Boolean }
+    yTickLine: { type: Boolean }
   },
   setup(t) {
-    const o = t, h = Object.values(o.categories).map((e, c) => `var(--vis-color${c})`), T = (e) => Object.values(o.categories)[e].color ?? h[e], L = y(() => (e, c) => {
+    const n = t, h = Object.values(n.categories).map((e, c) => `var(--vis-color${c})`), L = (e) => Object.values(n.categories)[e].color ?? h[e], T = p(() => (e, c) => {
       if (typeof window > "u" || typeof document > "u")
         return "";
       try {
-        const a = B(j, {
+        const o = B(E, {
           data: e,
-          categories: o.categories,
-          toolTipTitle: E(e),
-          yFormatter: o.yFormatter
-        }), l = document.createElement("div");
-        a.mount(l);
-        const r = l.innerHTML;
-        return a.unmount(), r;
+          categories: n.categories,
+          toolTipTitle: M(e),
+          yFormatter: n.yFormatter
+        }), a = document.createElement("div");
+        o.mount(a);
+        const m = a.innerHTML;
+        return o.unmount(), m;
       } catch {
         return "";
       }
-    }), u = y(
-      () => o.legendPosition === D.Top
+    }), d = p(
+      () => n.legendPosition === G.Top
     );
-    return (e, c) => (n(), d("div", {
-      class: g(["flex flex-col space-y-4", { "flex-col-reverse": u.value }])
+    return (e, c) => (l(), s("div", {
+      class: u(["flex flex-col space-y-4", { "flex-col-reverse": d.value }])
     }, [
-      p(i(O), {
+      r(i(N), {
         data: e.data,
         padding: e.padding,
         height: e.height
       }, {
         default: x(() => [
-          p(i(A), {
+          r(i(O), {
             "horizontal-placement": i(k).Right,
             "vertical-placement": i(k).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"]),
-          (n(!0), d(C, null, V(Object.keys(o.categories), (a, l) => (n(), m(i(M), {
-            key: l,
-            x: (r, v) => v,
-            y: (r) => r[a],
-            color: T(l),
+          (l(!0), s(C, null, V(Object.keys(n.categories), (o, a) => (l(), g(i(P), {
+            key: a,
+            x: (m, v) => v,
+            y: (m) => m[o],
+            color: L(a),
             "curve-type": e.curveType ?? i(F).MonotoneX
           }, null, 8, ["x", "y", "color", "curve-type"]))), 128)),
-          e.hideXAxis ? s("", !0) : (n(), m(i(f), {
-            key: 0,
+          r(i(f), {
             type: "x",
             "tick-format": e.xFormatter,
             label: e.xLabel,
@@ -88,10 +85,9 @@ const H = /* @__PURE__ */ b({
             "tick-line": e.xTickLine,
             "num-ticks": e.xNumTicks,
             "tick-values": e.xExplicitTicks,
-            minMaxTicksOnly: e.minMaxTicksOnly
-          }, null, 8, ["tick-format", "label", "domain-line", "grid-line", "tick-line", "num-ticks", "tick-values", "minMaxTicksOnly"])),
-          e.hideYAxis ? s("", !0) : (n(), m(i(f), {
-            key: 1,
+            "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"]),
+          r(i(f), {
             type: "y",
             "tick-format": e.yFormatter,
             label: e.yLabel,
@@ -99,20 +95,20 @@ const H = /* @__PURE__ */ b({
             "domain-line": e.yDomainLine,
             "grid-line": e.yGridLine,
             "tick-line": e.yTickLine
-          }, null, 8, ["tick-format", "label", "num-ticks", "domain-line", "grid-line", "tick-line"])),
-          e.hideTooltip ? s("", !0) : (n(), m(i(N), {
-            key: 2,
+          }, null, 8, ["tick-format", "label", "num-ticks", "domain-line", "grid-line", "tick-line"]),
+          e.hideTooltip ? y("", !0) : (l(), g(i(j), {
+            key: 0,
             color: "#666",
-            template: L.value
+            template: T.value
           }, null, 8, ["template"]))
         ]),
         _: 1
       }, 8, ["data", "padding", "height"]),
-      e.hideLegend ? s("", !0) : (n(), d("div", {
+      e.hideLegend ? y("", !0) : (l(), s("div", {
         key: 0,
-        class: g(["flex items center justify-end", { "pb-4": u.value }])
+        class: u(["flex items center justify-end", { "pb-4": d.value }])
       }, [
-        p(i(P), {
+        r(i(D), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ], 2))
@@ -120,5 +116,5 @@ const H = /* @__PURE__ */ b({
   }
 });
 export {
-  H as default
+  R as default
 };

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

@@ -105,12 +105,4 @@ export interface LineChartProps<T> {
      * If `true`, displays tick lines on the y-axis.
      */
     yTickLine?: boolean;
-    /**
-     * If `true`, hide the x-axis.
-     */
-    hideXAxis?: boolean;
-    /**
-     * If `true`, hide the y-axis.
-     */
-    hideYAxis?: boolean;
 }

package/package.json

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