vue-chrts 0.1.1-test.4 → 0.1.2

package/README.md

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

@@ -1,9 +1,9 @@
-import { defineComponent as b, computed as u, createApp as B, createElementBlock as y, openBlock as d, normalizeClass as k, createVNode as l, createCommentVNode as T, unref as i, withCtx as v, createBlock as f } from "vue";
-import { Orientation as s, StackedBar as x, GroupedBar as V } from "@unovis/ts";
-import { VisXYContainer as P, VisTooltip as A, VisGroupedBar as C, VisStackedBar as G, VisAxis as h, VisBulletLegend as N } from "@unovis/vue";
-import w from "../Tooltip.js";
-import { LegendPosition as E } from "../../types.js";
-const z = /* @__PURE__ */ b({
+import { defineComponent as v, computed as c, createApp as V, createElementBlock as f, openBlock as s, normalizeClass as b, createVNode as l, createCommentVNode as P, unref as i, withCtx as x, createBlock as L } from "vue";
+import { Orientation as o, StackedBar as A, GroupedBar as O } from "@unovis/ts";
+import { VisXYContainer as C, VisTooltip as G, VisGroupedBar as N, VisStackedBar as j, VisAxis as h, VisBulletLegend as w } from "@unovis/vue";
+import E from "../Tooltip.js";
+import { LegendPosition as z } from "../../types.js";
+const S = /* @__PURE__ */ v({
   __name: "BarChart",
   props: {
     data: {},
@@ -23,7 +23,7 @@ const z = /* @__PURE__ */ b({
     barPadding: {},
     radius: {},
     hideLegend: { type: Boolean },
-    orientation: { default: s.Vertical },
+    orientation: { default: o.Vertical },
     legendPosition: {},
     xDomainLine: { type: Boolean },
     yDomainLine: { type: Boolean },
@@ -36,55 +36,56 @@ const z = /* @__PURE__ */ b({
     const a = n;
     if (!a.yAxis || a.yAxis.length === 0)
       throw new Error("yAxis is required");
-    const c = u(() => a.yAxis.map((e) => (o) => o[e])), m = (e, o) => Object.values(a.categories)[o].color, p = u(
-      () => a.legendPosition === E.Top
-    ), g = u(() => (e, o) => {
+    const m = c(() => a.yAxis.map((e) => (t) => t[e])), p = (e, t) => Object.values(a.categories)[t].color, g = c(
+      () => a.legendPosition === z.Top
+    ), y = c(() => (e, t) => {
       if (typeof window > "u" || typeof document > "u")
         return "";
+      const u = Object.keys(a.categories), B = Object.keys(e).find((r) => !u.includes(r));
       try {
-        const r = B(w, {
+        const r = V(E, {
           data: e,
           categories: a.categories,
-          xValue: a.xFormatter(Math.floor(o))
-        }), t = document.createElement("div");
-        r.mount(t);
-        const L = t.innerHTML;
-        return r.unmount(), L;
+          xValue: e[B]
+        }), k = document.createElement("div");
+        r.mount(k);
+        const T = k.innerHTML;
+        return r.unmount(), T;
       } catch {
         return "";
       }
     });
-    return (e, o) => (d(), y("div", {
-      class: k(["flex flex-col space-y-4", { "flex-col-reverse": p.value }])
+    return (e, t) => (s(), f("div", {
+      class: b(["flex flex-col space-y-4", { "flex-col-reverse": g.value }])
     }, [
-      l(i(P), { height: e.height }, {
-        default: v(() => [
-          l(i(A), {
+      l(i(C), { height: e.height }, {
+        default: x(() => [
+          l(i(G), {
             triggers: {
-              [i(V).selectors.bar]: g.value,
-              [i(x).selectors.bar]: g.value
+              [i(O).selectors.bar]: y.value,
+              [i(A).selectors.bar]: y.value
             }
           }, null, 8, ["triggers"]),
-          e.stacked ? (d(), f(i(G), {
+          e.stacked ? (s(), L(i(j), {
             key: 1,
-            data: e.data,
-            x: (r, t) => t,
-            y: c.value,
-            color: m,
+            data: e.orientation === i(o).Horizontal ? [...e.data].reverse() : e.data,
+            x: (u, d) => d,
+            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"])) : (d(), f(i(C), {
+            orientation: e.orientation ?? i(o).Vertical
+          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (s(), L(i(N), {
             key: 0,
-            data: e.data,
-            x: (r, t) => t,
-            y: c.value,
-            color: m,
+            data: e.orientation === i(o).Horizontal ? [...e.data].reverse() : e.data,
+            x: (u, d) => d,
+            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
+            orientation: e.orientation ?? i(o).Vertical
           }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
           l(i(h), {
             type: "x",
@@ -100,20 +101,20 @@ const z = /* @__PURE__ */ b({
           l(i(h), {
             type: "y",
             label: e.yLabel,
-            "grid-line": e.orientation !== i(s).Horizontal && e.yGridLine,
+            "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"]),
-      e.hideLegend ? T("", !0) : (d(), y("div", {
+      e.hideLegend ? P("", !0) : (s(), f("div", {
         key: 0,
-        class: k(["flex items center justify-end", { "pb-4": p.value }])
+        class: b(["flex items center justify-end", { "pb-4": g.value }])
       }, [
-        l(i(N), {
+        l(i(w), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ], 2))
@@ -121,5 +122,5 @@ const z = /* @__PURE__ */ b({
   }
 });
 export {
-  z as default
+  S as default
 };

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

@@ -1,5 +1,5 @@
 import { BarChartProps } from './types';
-declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+declare const _default: <T extends {}>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & BarChartProps<T> & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;

package/dist/components/Tooltip.vue.d.ts

@@ -1,4 +1,4 @@
-import { BulletLegendItemInterface } from '@unovis/ts';
+import { BulletLegendItemInterface } from '../types';
 declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & {
         data: T;

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "vue-chrts",
-  "version": "0.1.1-test.4",
+  "version": "0.1.2",
   "type": "module",
   "files": [
     "dist"
   ],
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -24,7 +25,6 @@
   "devDependencies": {
     "@tailwindcss/vite": "^4.0.15",
     "@tanstack/vue-table": "^8.21.2",
-    "@types/culori": "^2.1.1",
     "@types/node": "^22.13.11",
     "@unovis/ts": "^1.5.1",
     "@unovis/vue": "^1.5.1",