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

package/README.md

@@ -1,5 +1,86 @@
-# Vue 3 + TypeScript + Vite
+# Vue-Chrts
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+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.
 
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+![alt text](https://nuxtcharts.com/og-image.png)
+
+[Check the docs and examples](https://nuxtcharts.com/docs)
+
+## Features
+
+- 📊 Multiple chart types: Line, Bar, Area, Stacked Area, Donut
+- 🎨 Customizable appearance
+- 📱 Responsive design
+- 💡 Simple, intuitive API
+- 🚀 Built with Vue 3 and TypeScript
+
+## Installation
+
+```bash
+# npm
+npm install vue-chrts
+
+# yarn
+yarn add vue-chrts
+
+# pnpm
+pnpm add vue-chrts
+```
+[Check the docs and examples](https://nuxtcharts.com/docs)
+
+## Usage Example
+
+```vue
+<script setup>
+import { LineChart } from 'vue-chrts';
+
+const data = [
+  { month: 'Jan', sales: 100, profit: 50 },
+  { month: 'Feb', sales: 120, profit: 55 },
+  { month: 'Mar', sales: 180, profit: 80 },
+  { month: 'Apr', sales: 110, profit: 40 },
+  { month: 'May', sales: 90, profit: 30 },
+];
+
+const categories = {
+  sales: {
+    name: 'Sales',
+    color: '#3b82f6'
+  },
+  profit: {
+    name: 'Profit', 
+    color: '#10b981'
+  }
+};
+
+const xFormatter = (i) => data[i].month;
+</script>
+
+<template>
+  <LineChart
+    :data="data"
+    :categories="categories"
+    :height="300"
+    :xFormatter="xFormatter"
+    xLabel="Month"
+    yLabel="Amount"
+  />
+</template>
+```
+[Check the docs and examples](https://nuxtcharts.com/docs)
+
+## Available Charts
+
+- `LineChart`
+- `BarChart`
+- `AreaChart`
+- `AreaStackedChart`
+- `DonutChart`
+
+## Credits
+
+This library is inspired by [Tremor](https://tremor.so/) and built on top of [Unovis](https://unovis.dev).
+
+## License
+
+MIT

package/dist/components/AreaChart/AreaChart.js

@@ -0,0 +1,133 @@
+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({
+  __name: "AreaChart",
+  props: {
+    data: {},
+    height: {},
+    xLabel: {},
+    yLabel: {},
+    categories: {},
+    xFormatter: {},
+    yFormatter: {},
+    curveType: {},
+    xNumTicks: { default: (i) => i.data.length > 24 ? 24 / 4 : i.data.length - 1 },
+    xExplicitTicks: {},
+    minMaxTicksOnly: {},
+    yNumTicks: { default: (i) => i.data.length > 24 ? 24 / 4 : i.data.length - 1 },
+    hideLegend: { type: Boolean },
+    hideTooltip: { type: Boolean },
+    xGridLine: { type: Boolean },
+    xDomainLine: { type: Boolean },
+    yGridLine: { type: Boolean },
+    yDomainLine: { type: Boolean },
+    legendPosition: {}
+  },
+  setup(i) {
+    const s = i, m = Object.values(s.categories).map((e) => e.color), b = f(() => (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 "";
+      }
+    });
+    function x(e) {
+      var o;
+      return {
+        y: (n) => Number(n[e]),
+        color: ((o = s.categories[e]) == null ? void 0 : o.color) ?? "#3b82f6"
+      };
+    }
+    const B = m.map(
+      (e, o) => `
+  <linearGradient id="gradient${o}-${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
+    );
+    return (e, o) => (a(), c("div", {
+      class: g(["flex flex-col space-y-4", { "flex-col-reverse": y.value }])
+    }, [
+      l(t(P), {
+        data: e.data,
+        height: e.height,
+        "svg-defs": t(B)
+      }, {
+        default: G(() => [
+          e.hideTooltip ? d("", !0) : (a(), k(t(j), {
+            key: 0,
+            "horizontal-placement": t(v).Right,
+            "vertical-placement": t(v).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,
+              ref_for: !0
+            }, x(n), {
+              color: `url(#gradient${r}-${t(m)[r]})`,
+              opacity: 0.5,
+              "curve-type": e.curveType ?? t(T).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
+            }, null, 8, ["x", "y", "color", "curve-type"])
+          ], 64))), 128)),
+          l(t(L), {
+            type: "x",
+            "tick-format": e.xFormatter,
+            label: e.xLabel,
+            "label-margin": 8,
+            "domain-line": e.xDomainLine,
+            "grid-line": e.xGridLine,
+            "num-ticks": e.xNumTicks,
+            "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), {
+            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
+          }, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"]),
+          e.hideTooltip ? d("", !0) : (a(), k(t(M), {
+            key: 1,
+            color: "#666",
+            template: b.value
+          }, null, 8, ["template"]))
+        ]),
+        _: 1
+      }, 8, ["data", "height", "svg-defs"]),
+      e.hideLegend ? d("", !0) : (a(), c("div", {
+        key: 0,
+        class: g(["flex items center justify-end", { "pb-4": y.value }])
+      }, [
+        l(t(O), {
+          items: Object.values(e.categories)
+        }, null, 8, ["items"])
+      ], 2))
+    ], 2));
+  }
+});
+export {
+  Y as default
+};

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

@@ -0,0 +1,14 @@
+import { AreaChartProps } 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> & AreaChartProps<T> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/AreaChart/AreaChart2.js

@@ -0,0 +1,4 @@
+import f from "./AreaChart.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,91 @@
+import { LegendPosition } from '../../types';
+import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
+export interface AreaChartProps<T> {
+    /**
+     * The data to be displayed in the area chart.
+     * Each element of the array represents a data point.
+     * The structure of 'T' should be compatible with the chart's rendering logic.
+     */
+    data: T[];
+    /**
+     * The height of the chart in pixels.
+     */
+    height: number;
+    /**
+     * Optional label for the x-axis.
+     */
+    xLabel?: string;
+    /**
+     * Optional label for the y-axis.
+     */
+    yLabel?: string;
+    /**
+     * A record mapping category keys to `BulletLegendItemInterface` objects.
+     * This defines the visual representation and labels for each category in the chart's legend.
+     */
+    categories: Record<string, BulletLegendItemInterface>;
+    /**
+     * 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.
+     * @returns The formatted x-axis label.
+     */
+    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 (optional).
+     * @returns The formatted y-axis label or value.
+     */
+    yFormatter?: (i: number, idx?: number) => string | number;
+    /**
+     * The type of curve to use for the area chart lines.
+     * See `CurveType` for available options.
+     */
+    curveType?: CurveType;
+    /**
+     * The desired number of ticks on the x-axis.
+     */
+    xNumTicks?: number;
+    /**
+     * Force specific ticks on the x-axis.
+     */
+    xExplicitTicks?: number;
+    /**
+     * Force only first and last ticks on the x-axis.
+     */
+    minMaxTicksOnly?: number;
+    /**
+     * The desired number of ticks on the y-axis.
+     */
+    yNumTicks?: number;
+    /**
+     * If `true`, hides the chart legend.
+     */
+    hideLegend?: boolean;
+    /**
+     * If `true`, hides the chart tooltip.
+     */
+    hideTooltip?: boolean;
+    /**
+     * If `true`, displays grid lines along the x-axis.
+     */
+    xGridLine?: boolean;
+    /**
+     * 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.
+     */
+    yDomainLine?: boolean;
+    /**
+     * Optional position for the legend, if applicable.
+     * See `LegendPosition` for available options.
+     */
+    legendPosition?: LegendPosition;
+}

package/dist/components/AreaStackedChart/AreaStackedChart.js

@@ -0,0 +1,69 @@
+import { defineComponent as d, computed as f, createApp as h, createElementBlock as y, openBlock as a, createVNode as o, createElementVNode as g, unref as t, withCtx as v, createBlock as _, createCommentVNode as V } from "vue";
+import { VisXYContainer as k, VisArea as C, VisAxis as c, VisCrosshair as T, VisBulletLegend as b } from "@unovis/vue";
+import { CurveType as x } from "@unovis/ts";
+import B from "../Tooltip.js";
+const N = { class: "flex flex-col space-y-4" }, A = { class: "flex items center justify-end" }, O = /* @__PURE__ */ d({
+  __name: "AreaStackedChart",
+  props: {
+    data: {},
+    height: {},
+    categories: {},
+    hideTooltip: { type: Boolean }
+  },
+  setup(s) {
+    const i = s, l = f(() => (e) => {
+      if (typeof window > "u" || typeof document > "u")
+        return "";
+      try {
+        const r = h(B, {
+          data: e,
+          categories: i.categories
+        }), n = document.createElement("div");
+        r.mount(n);
+        const p = n.innerHTML;
+        return r.unmount(), p;
+      } catch {
+        return "";
+      }
+    }), m = (e) => Number.parseInt(e.time), u = [(e) => e.firstTime, (e) => e.returning];
+    return (e, r) => (a(), y("div", N, [
+      o(t(k), {
+        data: e.data,
+        height: e.height
+      }, {
+        default: v(() => [
+          o(t(C), {
+            x: m,
+            y: u,
+            color: Object.values(i.categories).map((n) => n.color),
+            "curve-type": t(x).Linear
+          }, null, 8, ["color", "curve-type"]),
+          o(t(c), {
+            type: "x",
+            label: "Time",
+            "num-ticks": 12
+          }),
+          o(t(c), {
+            type: "y",
+            label: "Number of visitors",
+            "num-ticks": 3
+          }),
+          e.hideTooltip ? V("", !0) : (a(), _(t(T), {
+            key: 0,
+            color: "#666",
+            template: l.value
+          }, null, 8, ["template"]))
+        ]),
+        _: 1
+      }, 8, ["data", "height"]),
+      g("div", A, [
+        o(t(b), {
+          items: Object.values(e.categories)
+        }, null, 8, ["items"])
+      ])
+    ]));
+  }
+});
+export {
+  O as default
+};

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

@@ -0,0 +1,20 @@
+import { BulletLegendItemInterface } from '@unovis/ts';
+export type AreaStackedChartProps<T> = {
+    data: T[];
+    height: number;
+    categories: Record<string, BulletLegendItemInterface>;
+    hideTooltip?: boolean;
+};
+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> & AreaStackedChartProps<T> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/AreaStackedChart/AreaStackedChart2.js

@@ -0,0 +1,4 @@
+import f from "./AreaStackedChart.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,58 @@
+import { BulletLegendItemInterface } from '@unovis/ts';
+export interface AreaStackedChartProps<T> {
+    /**
+     * The data to be displayed in the stacked area chart.
+     * Each element of the array represents a data point.
+     * The structure of 'T' should be compatible with the chart's rendering logic.
+     */
+    data: T[];
+    /**
+     * The height of the chart in pixels.
+     */
+    height: number;
+    /**
+     * A record mapping category keys to `BulletLegendItemInterface` objects.
+     * This defines the visual representation and labels for each category in the chart's legend.
+     */
+    categories: Record<string, BulletLegendItemInterface>;
+    /**
+     * If `true`, hides the chart tooltip.
+     */
+    hideTooltip?: boolean;
+    /**
+     * Optional label for the x-axis.
+     */
+    xLabel?: string;
+    /**
+     * Optional label for the y-axis.
+     */
+    yLabel?: string;
+    /**
+     * If `true`, hides the chart legend.
+     */
+    hideLegend?: boolean;
+    /**
+     * If `true`, displays grid lines along the x-axis.
+     */
+    xGridLine?: boolean;
+    /**
+     * 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.
+     */
+    yDomainLine?: boolean;
+    /**
+     * If `true`, displays tick lines on the x-axis.
+     */
+    xTickLine?: boolean;
+    /**
+     * If `true`, displays tick lines on the y-axis.
+     */
+    yTickLine?: boolean;
+}

package/dist/components/BarChart/BarChart.js

@@ -0,0 +1,121 @@
+import { defineComponent as b, computed as u, createApp as h, createElementBlock as y, openBlock as d, normalizeClass as k, createVNode as t, createCommentVNode as B, unref as i, withCtx as T, createBlock as f } from "vue";
+import { Orientation as s, StackedBar as v, GroupedBar as V } from "@unovis/ts";
+import { VisXYContainer as P, VisTooltip as x, VisGroupedBar as C, VisStackedBar as G, VisAxis as L, VisBulletLegend as N } from "@unovis/vue";
+import A from "../Tooltip.js";
+import { LegendPosition as O } from "../../types.js";
+const M = /* @__PURE__ */ b({
+  __name: "BarChart",
+  props: {
+    data: {},
+    stacked: { type: Boolean },
+    height: {},
+    xLabel: {},
+    yLabel: {},
+    categories: {},
+    xFormatter: {},
+    yFormatter: {},
+    yNumTicks: { default: (a) => a.data.length > 24 ? 24 / 4 : a.data.length - 1 },
+    minMaxTicksOnly: {},
+    xNumTicks: { default: (a) => a.data.length > 24 ? 24 / 4 : a.data.length - 1 },
+    xExplicitTicks: {},
+    yAxis: {},
+    groupPadding: {},
+    barPadding: {},
+    radius: {},
+    hideLegend: { type: Boolean },
+    orientation: { default: s.Vertical },
+    legendPosition: {},
+    xDomainLine: { type: Boolean },
+    yDomainLine: { type: Boolean },
+    xTickLine: { type: Boolean },
+    yTickLine: { type: Boolean },
+    xGridLine: { type: Boolean },
+    yGridLine: { type: Boolean, default: !0 }
+  },
+  setup(a) {
+    const r = a, m = u(() => r.yAxis.map((e) => (n) => n[e])), c = (e, n) => Object.values(r.categories)[n].color, p = u(
+      () => r.legendPosition === O.Top
+    ), g = u(() => (e) => {
+      if (typeof window > "u" || typeof document > "u")
+        return "";
+      try {
+        const n = h(A, {
+          data: e,
+          categories: r.categories
+        }), l = document.createElement("div");
+        n.mount(l);
+        const o = l.innerHTML;
+        return n.unmount(), o;
+      } catch {
+        return "";
+      }
+    });
+    return (e, n) => (d(), y("div", {
+      class: k(["flex flex-col space-y-4", { "flex-col-reverse": p.value }])
+    }, [
+      t(i(P), { height: e.height }, {
+        default: T(() => [
+          t(i(x), {
+            triggers: {
+              [i(V).selectors.bar]: g.value,
+              [i(v).selectors.bar]: g.value
+            }
+          }, null, 8, ["triggers"]),
+          e.stacked ? (d(), f(i(G), {
+            key: 1,
+            data: e.data,
+            x: (l, o) => o,
+            y: m.value,
+            color: c,
+            "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), {
+            key: 0,
+            data: e.data,
+            x: (l, o) => o,
+            y: m.value,
+            color: c,
+            "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(i(L), {
+            type: "x",
+            "tick-format": e.xFormatter,
+            label: e.xLabel,
+            "grid-line": e.xGridLine,
+            "domain-line": e.xDomainLine,
+            "tick-line": e.xTickLine,
+            "num-ticks": e.xNumTicks,
+            "tick-values": e.xExplicitTicks,
+            "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"]),
+          t(i(L), {
+            type: "y",
+            label: e.yLabel,
+            "grid-line": e.orientation !== i(s).Horizontal && e.yGridLine,
+            "domain-line": e.yDomainLine,
+            "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"])
+        ]),
+        _: 1
+      }, 8, ["height"]),
+      e.hideLegend ? B("", !0) : (d(), y("div", {
+        key: 0,
+        class: k(["flex items center justify-end", { "pb-4": p.value }])
+      }, [
+        t(i(N), {
+          items: Object.values(e.categories)
+        }, null, 8, ["items"])
+      ], 2))
+    ], 2));
+  }
+});
+export {
+  M as default
+};

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

@@ -0,0 +1,14 @@
+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<{
+    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;
+    slots: {};
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/BarChart/BarChart2.js

@@ -0,0 +1,4 @@
+import f from "./BarChart.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,114 @@
+import { BulletLegendItemInterface, Orientation, LegendPosition } from '../../types';
+export interface BarChartProps<T> {
+    /**
+     * The data to be displayed in the bar chart.
+     * Each element of the array represents a data point.
+     * The structure of 'T' should be compatible with the chart's rendering logic.
+     */
+    data: T[];
+    /**
+     * If `true`, creates a stacked bar chart instead of grouped bars.
+     */
+    stacked?: boolean;
+    /**
+     * The height of the chart in pixels.
+     */
+    height: number;
+    /**
+     * Optional label for the x-axis.
+     */
+    xLabel?: string;
+    /**
+     * Optional label for the y-axis.
+     */
+    yLabel?: string;
+    /**
+     * A record mapping category keys to `BulletLegendItemInterface` objects.
+     * This defines the visual representation and labels for each category in the chart's legend.
+     */
+    categories: Record<string, BulletLegendItemInterface>;
+    /**
+     * 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.
+     * @returns The formatted x-axis label.
+     */
+    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 (optional).
+     * @returns The formatted y-axis label or value.
+     */
+    yFormatter?: (i: number, idx?: number) => string | number;
+    /**
+     * The desired number of ticks on the y-axis.
+     */
+    yNumTicks?: number;
+    /**
+     * Force only first and last ticks on the x-axis.
+     */
+    minMaxTicksOnly?: number;
+    /**
+     * The desired number of ticks on the x-axis.
+     */
+    xNumTicks?: number;
+    /**
+     * Force specific ticks on the x-axis.
+     */
+    xExplicitTicks?: number;
+    /**
+     * An array of property keys from the data object type 'T' to be used for the y-axis values.
+     */
+    yAxis: (keyof T)[];
+    /**
+     * The padding between groups of bars in pixels.
+     */
+    groupPadding?: number;
+    /**
+     * The padding between bars within the same group in pixels.
+     */
+    barPadding?: number;
+    /**
+     * The corner radius of the bars in pixels.
+     */
+    radius?: number;
+    /**
+     * If `true`, hides the chart legend.
+     */
+    hideLegend?: boolean;
+    /**
+     * The orientation of the bars (vertical or horizontal).
+     * See `Orientation` for available options.
+     */
+    orientation?: Orientation;
+    /**
+     * Optional position for the legend, if applicable.
+     * See `LegendPosition` for available options.
+     */
+    legendPosition?: LegendPosition;
+    /**
+     * If `true`, displays a domain line (axis line) along the x-axis.
+     */
+    xDomainLine?: boolean;
+    /**
+     * 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;
+    /**
+     * If `true`, displays tick lines on the y-axis.
+     */
+    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/DonutChart/DonutChart.js

@@ -0,0 +1,58 @@
+import { defineComponent as u, createElementBlock as n, openBlock as i, Fragment as m, createElementVNode as f, createCommentVNode as p, createVNode as t, renderSlot as g, unref as o, withCtx as h } from "vue";
+import { Donut as v } from "@unovis/ts";
+import { VisSingleContainer as y, VisTooltip as V, VisDonut as b, VisBulletLegend as C } from "@unovis/vue";
+import { DonutType as _ } from "./types.js";
+const k = { class: "flex items-center justify-center" }, B = {
+  key: 0,
+  class: "flex items-center justify-center mt-4"
+}, w = /* @__PURE__ */ u({
+  __name: "DonutChart",
+  props: {
+    type: {},
+    data: {},
+    height: {},
+    radius: {},
+    hideLegend: { type: Boolean },
+    labels: {}
+  },
+  setup(l) {
+    const r = l, s = (e) => e, a = r.type === _.Half, d = {
+      [v.selectors.segment]: (e) => `<div class='flex items-center'><div class='w-2 h-2 rounded-full mr-2' style='background-color: ${r.labels[e.index].color} ;'></div>
+        <div>${e.data}</div>
+      </vistooltip>
+    </vissinglecontainer>
+  </div>`
+    };
+    return (e, D) => (i(), n(m, null, [
+      f("div", k, [
+        t(o(y), {
+          data: e.data,
+          height: e.height,
+          margin: {}
+        }, {
+          default: h(() => [
+            t(o(V), {
+              "horizontal-shift": 20,
+              "vertical-shift": 20,
+              triggers: d
+            }),
+            t(o(b), {
+              value: s,
+              "corner-radius": e.radius,
+              color: r.labels.map((c) => c.color),
+              "angle-range": a ? [-1.5707963267948966, 1.5707963267948966] : []
+            }, null, 8, ["corner-radius", "color", "angle-range"])
+          ]),
+          _: 1
+        }, 8, ["data", "height"]),
+        g(e.$slots, "default")
+      ]),
+      e.hideLegend ? p("", !0) : (i(), n("div", B, [
+        t(o(C), { items: e.labels }, null, 8, ["items"])
+      ]))
+    ], 64));
+  }
+});
+export {
+  w as default
+};

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

@@ -0,0 +1,18 @@
+import { DonutChartProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<DonutChartProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<DonutChartProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/DonutChart/DonutChart2.js

@@ -0,0 +1,4 @@
+import f from "./DonutChart.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,36 @@
+interface DonutChartProps {
+    /**
+     * The type of donut chart to render.
+     * See `DonutType` for available options.
+     */
+    type?: string;
+    /**
+     * The data to be displayed in the donut chart.
+     * Each number in the array represents a segment value.
+     */
+    data: number[];
+    /**
+     * The height of the chart in pixels.
+     */
+    height: number;
+    /**
+     * The radius of the donut in pixels.
+     */
+    radius: number;
+    /**
+     * If `true`, hides the chart legend.
+     */
+    hideLegend?: boolean;
+    /**
+     * An array of label objects defining the name and color for each segment.
+     */
+    labels: {
+        name: string;
+        color: string;
+    }[];
+}
+declare enum DonutType {
+    Half = "half",
+    Full = "full"
+}
+export { type DonutChartProps, DonutType };

package/dist/components/DonutChart/types.js

@@ -0,0 +1,4 @@
+var r = /* @__PURE__ */ ((l) => (l.Half = "half", l.Full = "full", l))(r || {});
+export {
+  r as DonutType
+};

package/dist/components/LineChart/LineChart.js

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

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

@@ -0,0 +1,14 @@
+import { LineChartProps } 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> & LineChartProps<T> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/LineChart/LineChart2.js

@@ -0,0 +1,4 @@
+import f from "./LineChart.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,98 @@
+import { BulletLegendItemInterface, CurveType, LegendPosition } from '../../types';
+export interface LineChartProps<T> {
+    /**
+     * The data to be displayed in the line chart.
+     * Each element of the array represents a data point.
+     * The structure of 'T' should be compatible with the chart's rendering logic.
+     */
+    data: T[];
+    /**
+     * The height of the chart in pixels.
+     */
+    height: number;
+    /**
+     * Optional label for the x-axis.
+     */
+    xLabel?: string;
+    /**
+     * Optional label for the y-axis.
+     */
+    yLabel?: string;
+    /**
+     * A record mapping category keys to `BulletLegendItemInterface` objects.
+     * This defines the visual representation and labels for each category in the chart's legend.
+     */
+    categories: Record<string, BulletLegendItemInterface>;
+    /**
+     * 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.
+     * @returns The formatted x-axis label.
+     */
+    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;
+    /**
+     * The type of curve to use for the line chart.
+     * See `CurveType` for available options.
+     */
+    curveType?: CurveType;
+    /**
+     * The desired number of ticks on the x-axis.
+     */
+    xNumTicks?: number;
+    /**
+     * Force specific ticks on the x-axis.
+     */
+    xExplicitTicks?: number;
+    /**
+     * Force only first and last ticks on the x-axis.
+     */
+    minMaxTicksOnly?: number;
+    /**
+     * The desired number of ticks on the y-axis.
+     */
+    yNumTicks?: number;
+    /**
+     * If `true`, hides the chart tooltip.
+     */
+    hideTooltip?: boolean;
+    /**
+     * If `true`, hides the chart legend.
+     */
+    hideLegend?: boolean;
+    /**
+     * Optional position for the legend, if applicable.
+     * See `LegendPosition` for available options.
+     */
+    legendPosition?: LegendPosition;
+    /**
+     * If `true`, displays grid lines along the x-axis.
+     */
+    xGridLine?: boolean;
+    /**
+     * 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.
+     */
+    yDomainLine?: boolean;
+    /**
+     * If `true`, displays tick lines on the x-axis.
+     */
+    xTickLine?: boolean;
+    /**
+     * If `true`, displays tick lines on the y-axis.
+     */
+    yTickLine?: boolean;
+}

package/dist/components/Tooltip.js

@@ -0,0 +1,37 @@
+import { defineComponent as g, computed as m, createElementBlock as r, openBlock as l, Fragment as x, renderList as _, createElementVNode as o, normalizeStyle as n, toDisplayString as a } from "vue";
+const h = /* @__PURE__ */ g({
+  __name: "Tooltip",
+  props: {
+    data: {},
+    categories: {}
+  },
+  setup(s) {
+    const i = s, c = ["_index", "_stacked", "_ending"], p = m(() => Object.entries(i.data ?? []).filter(
+      ([t, d]) => {
+        var e;
+        return !c.includes(t) && ((e = i.categories[t]) == null ? void 0 : e.color);
+      }
+    ));
+    return (t, d) => (l(), r("div", null, [
+      (l(!0), r(x, null, _(p.value, ([e, u]) => (l(), r("div", {
+        key: e,
+        style: { display: "flex", "align-items": "center", "margin-bottom": "4px" }
+      }, [
+        o("span", {
+          style: n([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, { backgroundColor: t.categories[e].color }])
+        }, null, 4),
+        o("div", null, [
+          o("span", {
+            style: n([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
+          }, a(e) + ":", 1),
+          o("span", {
+            style: n([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
+          }, a(u), 1)
+        ])
+      ]))), 128))
+    ]));
+  }
+});
+export {
+  h as default
+};

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

@@ -0,0 +1,17 @@
+import { BulletLegendItemInterface } from '@unovis/ts';
+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;
+        categories: Record<string, BulletLegendItemInterface>;
+    } & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {};
+    emit: {};
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/Tooltip2.js

@@ -0,0 +1,4 @@
+import f from "./Tooltip.js";
+export {
+  f as default
+};

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+import { default as AreaChart } from './components/AreaChart/AreaChart.vue';
+import { default as AreaStackedChart } from './components/AreaStackedChart/AreaStackedChart.vue';
+import { default as LineChart } from './components/LineChart/LineChart.vue';
+import { default as BarChart } from './components/BarChart/BarChart.vue';
+import { default as DonutChart } from './components/DonutChart/DonutChart.vue';
+import { LegendPosition, CurveType, Orientation, BulletLegendItemInterface } from './types';
+export { AreaChart, AreaStackedChart, LineChart, BarChart, DonutChart, Orientation, CurveType, LegendPosition };
+export type { BulletLegendItemInterface, };

package/dist/index.js

@@ -0,0 +1,16 @@
+import { default as a } from "./components/AreaChart/AreaChart.js";
+import { default as o } from "./components/AreaStackedChart/AreaStackedChart.js";
+import { default as d } from "./components/LineChart/LineChart.js";
+import { default as u } from "./components/BarChart/BarChart.js";
+import { default as n } from "./components/DonutChart/DonutChart.js";
+import { CurveType as x, LegendPosition as C, Orientation as h } from "./types.js";
+export {
+  a as AreaChart,
+  o as AreaStackedChart,
+  u as BarChart,
+  x as CurveType,
+  n as DonutChart,
+  C as LegendPosition,
+  d as LineChart,
+  h as Orientation
+};

package/dist/types.d.ts

@@ -0,0 +1,42 @@
+import { AreaChartProps } from './components/AreaChart/types';
+import { BarChartProps } from './components/BarChart/types';
+import { LineChartProps } from './components/LineChart/types';
+import { DonutChartProps } from './components/DonutChart/types';
+declare enum LegendPosition {
+    Top = "top",
+    Bottom = "bottom"
+}
+declare enum CurveType {
+    Basis = "basis",
+    BasisClosed = "basisClosed",
+    BasisOpen = "basisOpen",
+    Bundle = "bundle",
+    Cardinal = "cardinal",
+    CardinalClosed = "cardinalClosed",
+    CardinalOpen = "cardinalOpen",
+    CatmullRom = "catmullRom",
+    CatmullRomClosed = "catmullRomClosed",
+    CatmullRomOpen = "catmullRomOpen",
+    Linear = "linear",
+    LinearClosed = "linearClosed",
+    MonotoneX = "monotoneX",
+    MonotoneY = "monotoneY",
+    Natural = "natural",
+    Step = "step",
+    StepAfter = "stepAfter",
+    StepBefore = "stepBefore"
+}
+interface BulletLegendItemInterface {
+    name: string | number;
+    color?: string;
+    className?: string;
+    shape?: any;
+    inactive?: boolean;
+    hidden?: boolean;
+    pointer?: boolean;
+}
+declare enum Orientation {
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
+export { LegendPosition, CurveType, Orientation, type AreaChartProps, type BarChartProps, type LineChartProps, type DonutChartProps, type BulletLegendItemInterface, };

package/dist/types.js

@@ -0,0 +1,6 @@
+var l = /* @__PURE__ */ ((a) => (a.Top = "top", a.Bottom = "bottom", a))(l || {}), o = /* @__PURE__ */ ((a) => (a.Basis = "basis", a.BasisClosed = "basisClosed", a.BasisOpen = "basisOpen", a.Bundle = "bundle", a.Cardinal = "cardinal", a.CardinalClosed = "cardinalClosed", a.CardinalOpen = "cardinalOpen", a.CatmullRom = "catmullRom", a.CatmullRomClosed = "catmullRomClosed", a.CatmullRomOpen = "catmullRomOpen", a.Linear = "linear", a.LinearClosed = "linearClosed", a.MonotoneX = "monotoneX", a.MonotoneY = "monotoneY", a.Natural = "natural", a.Step = "step", a.StepAfter = "stepAfter", a.StepBefore = "stepBefore", a))(o || {}), t = /* @__PURE__ */ ((a) => (a.Horizontal = "horizontal", a.Vertical = "vertical", a))(t || {});
+export {
+  o as CurveType,
+  l as LegendPosition,
+  t as Orientation
+};

package/dist/utils.d.ts

@@ -0,0 +1 @@
+export declare function getDistributedIndices(length: number, numTicks: number): number[];

package/package.json

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