vue-chrts 0.1.2 → 0.1.4

package/README.md

@@ -1,4 +1,4 @@
-# Vue-Chrts
+# Vue-chrts
 
 A Vue 3 charts package inspired by [Tremor](https://tremor.so/), built on top of [Unovis](https://unovis.dev). Vue-Chrts provides beautiful, responsive charts for your Vue applications with minimal setup.
 

package/dist/components/AreaChart/AreaChart.js

@@ -1,9 +1,9 @@
-import { defineComponent as E, ref as T, computed as f, createApp as N, onUnmounted as P, createElementBlock as u, openBlock as l, normalizeClass as L, createVNode as s, createCommentVNode as g, unref as o, withCtx as M, createBlock as h, Fragment as b, renderList as U, mergeProps as j } from "vue";
-import { Position as C, CurveType as x } from "@unovis/ts";
-import { VisXYContainer as I, VisTooltip as S, VisArea as w, VisLine as z, VisAxis as B, VisCrosshair as R, VisBulletLegend as X } from "@unovis/vue";
+import { defineComponent as G, ref as T, computed as f, createApp as N, onUnmounted as P, createElementBlock as u, openBlock as l, normalizeClass as L, createVNode as s, createCommentVNode as g, unref as o, withCtx as M, createBlock as h, Fragment as b, renderList as U, mergeProps as j } from "vue";
+import { Position as C, CurveType as B } from "@unovis/ts";
+import { VisXYContainer as I, VisTooltip as S, VisArea as w, VisLine as z, VisAxis as x, VisCrosshair as R, VisBulletLegend as X } from "@unovis/vue";
 import Y from "../Tooltip.js";
 import { LegendPosition as H } from "../../types.js";
-const p = 24, V = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ E({
+const p = 24, V = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ G({
   __name: "AreaChart",
   props: {
     data: {},
@@ -20,15 +20,16 @@ const p = 24, V = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ E({
     yNumTicks: { default: (i) => i.data.length > p ? p / V : i.data.length - 1 },
     hideLegend: { type: Boolean },
     hideTooltip: { type: Boolean },
-    xGridLine: { type: Boolean },
+    legendPosition: {},
     xDomainLine: { type: Boolean },
-    yGridLine: { type: Boolean },
     yDomainLine: { type: Boolean },
     xTickLine: { type: Boolean },
-    legendPosition: {}
+    yTickLine: { type: Boolean },
+    xGridLine: { type: Boolean },
+    yGridLine: { type: Boolean }
   },
   setup(i) {
-    const r = i, m = Object.values(r.categories).map((e) => e.color), d = T(null), v = T(null), D = f(() => (e, t) => {
+    const r = i, m = Object.values(r.categories).map((e) => e.color), d = T(null), k = T(null), D = f(() => (e, t) => {
       if (typeof window > "u" || typeof document > "u")
         return "";
       try {
@@ -45,7 +46,7 @@ const p = 24, V = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ E({
       }
     });
     P(() => {
-      d.value && (d.value.unmount(), d.value = null), v.value && (v.value = null);
+      d.value && (d.value.unmount(), d.value = null), k.value && (k.value = null);
     });
     function F(e) {
       var t;
@@ -62,7 +63,7 @@ const p = 24, V = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ E({
   </linearGradient>
 `;
     }
-    function G(e, t) {
+    function $(e, t) {
       return `
   <linearGradient id="gradient${e}-${t}" gradientTransform="rotate(90)">
     <stop offset="0%" stop-color="${t}" stop-opacity="1" />
@@ -70,20 +71,20 @@ const p = 24, V = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ E({
   </linearGradient>
 `;
     }
-    const $ = f(
+    const E = f(
       () => m.map(
-        (e, t) => e != null && e.includes("#") ? G(t, e) : O(t, e ?? A)
+        (e, t) => e != null && e.includes("#") ? $(t, e) : O(t, e ?? A)
       ).join("")
-    ), k = f(
+    ), v = f(
       () => r.legendPosition === H.Top
     );
     return (e, t) => (l(), u("div", {
-      class: L(["flex flex-col space-y-4", { "flex-col-reverse": k.value }])
+      class: L(["flex flex-col space-y-4", { "flex-col-reverse": v.value }])
     }, [
       s(o(I), {
         data: e.data,
         height: e.height,
-        "svg-defs": $.value
+        "svg-defs": E.value
       }, {
         default: M(() => [
           e.hideTooltip ? g("", !0) : (l(), h(o(S), {
@@ -98,16 +99,16 @@ const p = 24, V = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ E({
             }, F(n), {
               color: `url(#gradient${a}-${o(m)[a]})`,
               opacity: q,
-              "curve-type": e.curveType ?? o(x).MonotoneX
+              "curve-type": e.curveType ?? o(B).MonotoneX
             }), null, 16, ["x", "color", "curve-type"]),
             s(o(z), {
               x: (c, y) => y,
               y: (c) => c[n],
               color: o(m)[a],
-              "curve-type": e.curveType ?? o(x).MonotoneX
+              "curve-type": e.curveType ?? o(B).MonotoneX
             }, null, 8, ["x", "y", "color", "curve-type"])
           ], 64))), 128)),
-          s(o(B), {
+          s(o(x), {
             type: "x",
             "tick-format": e.xFormatter,
             label: e.xLabel,
@@ -119,14 +120,14 @@ const p = 24, V = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ E({
             "tick-values": e.xExplicitTicks,
             "min-max-ticks-only": e.minMaxTicksOnly
           }, null, 8, ["tick-format", "label", "domain-line", "grid-line", "num-ticks", "tick-line", "tick-values", "min-max-ticks-only"]),
-          s(o(B), {
+          s(o(x), {
             type: "y",
             "num-ticks": e.yNumTicks,
             "tick-format": e.yFormatter,
             label: e.yLabel,
             "grid-line": e.yGridLine,
             "domain-line": e.yDomainLine,
-            "tick-line": !!e.yGridLine
+            "tick-line": e.yTickLine
           }, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"]),
           e.hideTooltip ? g("", !0) : (l(), h(o(R), {
             key: 1,
@@ -138,7 +139,7 @@ const p = 24, V = 4, q = 0.5, A = "#3b82f6", _ = /* @__PURE__ */ E({
       }, 8, ["data", "height", "svg-defs"]),
       e.hideLegend ? g("", !0) : (l(), u("div", {
         key: 0,
-        class: L(["flex items-center justify-end", { "pb-4": k.value }])
+        class: L(["flex items-center justify-end", { "pb-4": v.value }])
       }, [
         s(o(X), {
           items: Object.values(e.categories)

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

@@ -68,17 +68,14 @@ export interface AreaChartProps<T> {
      */
     hideTooltip?: boolean;
     /**
-     * If `true`, displays grid lines along the x-axis.
+     * Optional position for the legend, if applicable.
+     * See `LegendPosition` for available options.
      */
-    xGridLine?: boolean;
+    legendPosition?: LegendPosition;
     /**
      * If `true`, displays a domain line (axis line) along the x-axis.
      */
     xDomainLine?: boolean;
-    /**
-     * If `true`, displays grid lines along the y-axis.
-     */
-    yGridLine?: boolean;
     /**
      * If `true`, displays a domain line (axis line) along the y-axis.
      */
@@ -88,8 +85,15 @@ export interface AreaChartProps<T> {
      */
     xTickLine?: boolean;
     /**
-     * Optional position for the legend, if applicable.
-     * See `LegendPosition` for available options.
+     * If `true`, displays tick lines on the y-axis.
      */
-    legendPosition?: LegendPosition;
+    yTickLine?: boolean;
+    /**
+     * If `true`, displays grid lines along the x-axis.
+     */
+    xGridLine?: boolean;
+    /**
+     * If `true`, displays grid lines along the y-axis.
+     */
+    yGridLine?: boolean;
 }

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

@@ -66,11 +66,11 @@ export interface BarChartProps<T> {
      */
     groupPadding?: number;
     /**
-     * The padding between bars within the same group in pixels.
+     * Fractional padding between the bars in the range of [0,1). Default: 0
      */
     barPadding?: number;
     /**
-     * The corner radius of the bars in pixels.
+     * Rounded corners for top bars. Boolean or number (to set the radius in pixels). Default: 2
      */
     radius?: number;
     /**

package/dist/components/Tooltip.js

@@ -1,44 +1,47 @@
 import { defineComponent as m, computed as b, createElementBlock as r, openBlock as l, createElementVNode as o, toDisplayString as i, Fragment as v, renderList as h, normalizeStyle as a } from "vue";
-const x = {
+const f = {
   class: "capitalize border-b mb-1 pb-1",
   style: {
     color: "var(--tooltip-value-color)",
     borderColor: "rgba(255, 255, 255, 0.05)"
   }
-}, f = /* @__PURE__ */ m({
+}, _ = /* @__PURE__ */ m({
   __name: "Tooltip",
   props: {
     data: {},
     categories: {},
     xValue: {}
   },
-  setup(s) {
-    const n = s, c = ["_index", "_stacked", "_ending"], p = b(() => Object.entries(n.data ?? []).filter(
-      ([e, d]) => !c.includes(e) && Object.keys(n.categories).includes(e)
+  setup(c) {
+    const n = c, p = ["_index", "_stacked", "_ending"], d = b(() => Object.entries(n.data ?? []).filter(
+      ([e, u]) => !p.includes(e) && Object.keys(n.categories).includes(e)
     ));
-    return (e, d) => (l(), r("div", null, [
-      o("div", x, i(e.xValue), 1),
-      (l(!0), r(v, null, h(p.value, ([t, u], g) => (l(), 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: e.categories[t].color ? e.categories[t].color : `var(--vis-color${g})`
-          }])
-        }, null, 4),
-        o("div", null, [
+    return (e, u) => (l(), r("div", null, [
+      o("div", f, i(e.xValue), 1),
+      (l(!0), r(v, null, h(d.value, ([t, g]) => {
+        var s;
+        return l(), r("div", {
+          key: t,
+          style: { display: "flex", "align-items": "center", "margin-bottom": "4px" }
+        }, [
           o("span", {
-            style: a([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
-          }, i(t) + ":", 1),
-          o("span", {
-            style: a([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
-          }, i(u), 1)
-        ])
-      ]))), 128))
+            style: a([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, {
+              backgroundColor: (s = e.categories[t]) != null && s.color ? e.categories[t].color : "var(--vis-color0)"
+            }])
+          }, null, 4),
+          o("div", null, [
+            o("span", {
+              style: a([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
+            }, i(e.categories[t].name) + ":", 1),
+            o("span", {
+              style: a([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
+            }, i(g), 1)
+          ])
+        ]);
+      }), 128))
     ]));
   }
 });
 export {
-  f as default
+  _ as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chrts",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "files": [
     "dist"