vue-chrts 0.1.1 → 0.1.3

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.
 
@@ -9,12 +9,33 @@ A Vue 3 charts package inspired by [Tremor](https://tremor.so/), built on top of
 ## Features
 
 - 📊 Multiple chart types: Line, Bar, Area, Stacked Area, Donut
-- 🎨 Customizable appearance
+- 🎨 Customizable
 - 📱 Responsive design
 - 💡 Simple, intuitive API
 - 🚀 Built with Vue 3 and TypeScript
 
-## Installation
+
+[Check the docs and examples](https://nuxtcharts.com/docs)
+
+## Installation Nuxt
+
+```bash
+# npm
+npm install nuxt-charts
+
+# yarn
+yarn add nuxt-charts
+
+# pnpm
+pnpm add nuxt-charts
+
+# Add module to your nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ["nuxt-charts"]
+});
+```
+
+## Installation Vue.js
 
 ```bash
 # npm
@@ -25,7 +46,12 @@ yarn add vue-chrts
 
 # pnpm
 pnpm add vue-chrts
+
+# import component
+import { LineChart } from 'vue-chrts';
+
 ```
+
 [Check the docs and examples](https://nuxtcharts.com/docs)
 
 ## Usage Example

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/BarChart.js

@@ -103,10 +103,10 @@ const S = /* @__PURE__ */ v({
             label: e.yLabel,
             "grid-line": e.orientation !== i(o).Horizontal && e.yGridLine,
             "domain-line": !!e.yDomainLine,
-            "tick-format": () => "",
+            "tick-format": e.yFormatter,
             "num-ticks": e.yNumTicks,
             "tick-line": e.yTickLine
-          }, null, 8, ["label", "grid-line", "domain-line", "num-ticks", "tick-line"])
+          }, null, 8, ["label", "grid-line", "domain-line", "tick-format", "num-ticks", "tick-line"])
         ]),
         _: 1
       }, 8, ["height"]),

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/package.json

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