vue-chrts 0.2.0-test.9 → 0.2.1

package/dist/components/AreaChart/AreaChart.js

@@ -0,0 +1,163 @@
+import { defineComponent as U, useSlots as j, useTemplateRef as w, ref as R, computed as d, createElementBlock as c, openBlock as a, normalizeClass as T, createVNode as u, createCommentVNode as p, createElementVNode as X, unref as i, withCtx as S, createBlock as m, Fragment as L, renderList as Y, mergeProps as C, renderSlot as A } from "vue";
+import { Position as b, CurveType as D } from "@unovis/ts";
+import { createMarkers as z, getFirstPropertyValue as I } from "../../utils.js";
+import x from "../Tooltip.js";
+import { VisXYContainer as H, VisTooltip as K, VisArea as q, VisLine as J, VisAxis as B, VisCrosshair as Q, VisBulletLegend as Z } from "@unovis/vue";
+import { LegendPosition as _ } from "../../types.js";
+const ee = {
+  ref: "slotWrapper",
+  class: "hidden"
+}, y = 24, V = 4, te = 0.5, F = "#3b82f6", se = /* @__PURE__ */ U({
+  __name: "AreaChart",
+  props: {
+    data: {},
+    height: {},
+    xLabel: {},
+    yLabel: {},
+    padding: { default: () => ({ top: 5, right: 5, bottom: 5, left: 5 }) },
+    categories: {},
+    markerConfig: {},
+    xFormatter: {},
+    yFormatter: {},
+    curveType: {},
+    lineWidth: { default: 2 },
+    lineDashArray: {},
+    xNumTicks: { default: (n) => n.data.length > y ? y / V : n.data.length - 1 },
+    xExplicitTicks: {},
+    minMaxTicksOnly: { type: Boolean },
+    yNumTicks: { default: (n) => n.data.length > y ? y / V : n.data.length - 1 },
+    hideLegend: { type: Boolean },
+    hideTooltip: { type: Boolean },
+    legendPosition: {},
+    xDomainLine: { type: Boolean },
+    yDomainLine: { type: Boolean },
+    xTickLine: { type: Boolean },
+    yTickLine: { type: Boolean },
+    xGridLine: { type: Boolean },
+    yGridLine: { type: Boolean },
+    hideXAxis: { type: Boolean },
+    hideYAxis: { type: Boolean },
+    crosshairConfig: { default: () => ({
+      color: "#666"
+    }) }
+  },
+  emits: ["click"],
+  setup(n, { emit: $ }) {
+    const G = $, r = n, O = j(), h = w("slotWrapper"), s = R(), f = d(
+      () => Object.values(r.categories).map((e) => e.color)
+    ), N = d(() => r.markerConfig ? z(r.markerConfig) : ""), g = d(() => r.legendPosition === _.Top), E = d(() => {
+      const e = (t, o) => `
+    <linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
+      <stop offset="0%" stop-color="${o}" stop-opacity="1" />
+      <stop offset="100%" stop-color="${o}" stop-opacity="0" />
+    </linearGradient>
+  `, l = (t, o) => `
+    <linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
+      <stop offset="0%" style="stop-color:var(--vis-color0);stop-opacity:1" />
+      <stop offset="100%" style="stop-color:var(--vis-color0);stop-opacity:0" />
+    </linearGradient>
+  `;
+      return f.value.map(
+        (t, o) => t != null && t.includes("#") ? e(o, t) : l(o, t ?? F)
+      ).join("");
+    });
+    function P(e) {
+      var l;
+      return {
+        y: (t) => Number(t[e]),
+        color: ((l = r.categories[e]) == null ? void 0 : l.color) ?? F
+      };
+    }
+    function W(e) {
+      return typeof window > "u" ? "" : h.value ? h.value.innerHTML : "";
+    }
+    function M(e) {
+      return s.value = e, W();
+    }
+    return (e, l) => (a(), c("div", {
+      class: T(["flex flex-col", { "flex-col-reverse": g.value, markers: !!r.markerConfig }]),
+      onClick: l[0] || (l[0] = (t) => G("click", t, s.value))
+    }, [
+      u(i(H), {
+        data: e.data,
+        height: e.height,
+        padding: e.padding,
+        "svg-defs": E.value + N.value
+      }, {
+        default: S(() => [
+          e.hideTooltip ? p("", !0) : (a(), m(i(K), {
+            key: 0,
+            "horizontal-placement": i(b).Right,
+            "vertical-placement": i(b).Top
+          }, null, 8, ["horizontal-placement", "vertical-placement"])),
+          (a(!0), c(L, null, Y(Object.keys(r.categories), (t, o) => (a(), c(L, { key: t }, [
+            u(i(q), C({
+              x: (k, v) => v
+            }, { ref_for: !0 }, P(t), {
+              color: `url(#gradient${o}-${f.value[o]})`,
+              opacity: te,
+              "curve-type": e.curveType ?? i(D).MonotoneX
+            }), null, 16, ["x", "color", "curve-type"]),
+            u(i(J), {
+              x: (k, v) => v,
+              y: (k) => k[t],
+              color: f.value[o],
+              "curve-type": e.curveType ?? i(D).MonotoneX,
+              "line-width": e.lineWidth,
+              lineDashArray: e.lineDashArray ? e.lineDashArray[o] : void 0
+            }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"])
+          ], 64))), 128)),
+          e.hideXAxis ? p("", !0) : (a(), m(i(B), {
+            key: 1,
+            type: "x",
+            label: e.xLabel,
+            "label-margin": 8,
+            "num-ticks": e.xNumTicks,
+            "tick-format": e.xFormatter,
+            "tick-values": e.xExplicitTicks,
+            "grid-line": e.xGridLine,
+            "domain-line": e.xDomainLine,
+            "tick-line": e.xTickLine,
+            "min-max-ticks-only": e.minMaxTicksOnly
+          }, null, 8, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only"])),
+          e.hideYAxis ? p("", !0) : (a(), m(i(B), {
+            key: 2,
+            type: "y",
+            label: e.yLabel,
+            "num-ticks": e.yNumTicks,
+            "tick-format": e.yFormatter,
+            "grid-line": e.yGridLine,
+            "domain-line": e.yDomainLine,
+            "tick-line": e.yTickLine
+          }, null, 8, ["label", "num-ticks", "tick-format", "grid-line", "domain-line", "tick-line"])),
+          e.hideTooltip ? p("", !0) : (a(), m(i(Q), C({ key: 3 }, e.crosshairConfig, { template: M }), null, 16))
+        ]),
+        _: 1
+      }, 8, ["data", "height", "padding", "svg-defs"]),
+      e.hideLegend ? p("", !0) : (a(), c("div", {
+        key: 0,
+        class: T(["flex items-center justify-end", { "pb-4": g.value, "pt-4": !g.value }])
+      }, [
+        u(i(Z), {
+          items: Object.values(e.categories)
+        }, null, 8, ["items"])
+      ], 2)),
+      X("div", ee, [
+        i(O).tooltip ? A(e.$slots, "tooltip", {
+          key: 0,
+          values: s.value
+        }) : s.value ? A(e.$slots, "fallback", { key: 1 }, () => [
+          u(x, {
+            data: s.value,
+            categories: e.categories,
+            toolTipTitle: i(I)(s.value) ?? "",
+            yFormatter: r.yFormatter
+          }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
+        ]) : p("", !0)
+      ], 512)
+    ], 2));
+  }
+});
+export {
+  se as default
+};

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

@@ -0,0 +1,21 @@
+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<{
+        readonly onClick?: ((event: MouseEvent, values?: T | undefined) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick"> & AreaChartProps<T> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        tooltip?(_: {
+            values: T | undefined;
+        }): any;
+        fallback?(_: {}): any;
+    };
+    emit: (e: "click", event: MouseEvent, values?: T) => void;
+}>) => 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

@@ -1,4 +1,4 @@
-import { axisFormatter, LegendPosition, MarkerConfig } from '../../types';
+import { axisFormatter, CrosshairConfig, LegendPosition, MarkerConfig } from '../../types';
 import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
 export interface AreaChartProps<T> {
     /**
@@ -64,7 +64,7 @@ export interface AreaChartProps<T> {
     /**
      * Line dash array, see SVG's stroke-dasharray. Default: `undefined`
      */
-    lineDashArray?: number[];
+    lineDashArray?: number[][];
     /**
      * The desired number of ticks on the x-axis.
      */
@@ -129,19 +129,5 @@ export interface AreaChartProps<T> {
     /**
      * Crosshair configuration object for customizing the appearance of the crosshair line.
      */
-    crosshairConfig?: {
-        /**
-         * The color of the crosshair line. Accepts any valid CSS color string.
-         * Example: '#f00', 'rgba(0,0,0,0.5)', 'blue'
-         */
-        color?: string;
-        /**
-         * The stroke color of the crosshair line. Accepts any valid CSS color string.
-         */
-        strokeColor?: string;
-        /**
-         * The stroke width of the crosshair line in pixels.
-         */
-        strokeWidth?: number;
-    };
+    crosshairConfig?: CrosshairConfig;
 }

package/dist/components/AreaStackedChart/AreaStackedChart.js

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

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

@@ -0,0 +1,14 @@
+import { AreaStackedChartProps } 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> & 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/BarChart/types.d.ts

@@ -1,5 +1,4 @@
-import { BulletLegendItemInterface, Orientation } from '@unovis/ts';
-import { LegendPosition, axisFormatter } from '../../types';
+import { BulletLegendItemInterface, Orientation, LegendPosition, axisFormatter } from '../../types';
 type BarChartPropsBase<T> = {
     /**
      * The data to be displayed in the bar chart.

package/dist/components/DonutChart/DonutChart.js

@@ -0,0 +1,85 @@
+import { defineComponent as V, useSlots as b, useTemplateRef as w, ref as D, createElementBlock as u, openBlock as c, Fragment as S, createElementVNode as o, createCommentVNode as p, createVNode as n, renderSlot as s, unref as l, withCtx as T, normalizeStyle as W, toDisplayString as B } from "vue";
+import { Donut as L } from "@unovis/ts";
+import { DonutType as $ } from "./types.js";
+import { VisSingleContainer as H, VisTooltip as N, VisDonut as j, VisBulletLegend as z } from "@unovis/vue";
+const A = {
+  ref: "slotWrapper",
+  class: "hidden"
+}, E = { class: "flex items-center px-[15px] py-[10px]" }, R = {
+  key: 0,
+  class: "flex items-center justify-center mt-4"
+}, U = /* @__PURE__ */ V({
+  __name: "DonutChart",
+  props: {
+    type: {},
+    data: {},
+    arcWidth: {},
+    height: {},
+    radius: {},
+    hideLegend: { type: Boolean },
+    labels: {},
+    padAngle: {}
+  },
+  emits: ["click"],
+  setup(f, { emit: m }) {
+    const g = m, r = f, h = b(), i = w("slotWrapper"), t = D(), v = (e) => e, y = r.type === $.Half;
+    function k(e) {
+      return t.value = e, C();
+    }
+    function C(e) {
+      return typeof window > "u" ? "" : i.value ? i.value.innerHTML : "";
+    }
+    return (e, d) => (c(), u(S, null, [
+      o("div", {
+        class: "flex items-center justify-center",
+        onClick: d[0] || (d[0] = (a) => g("click", a, t.value))
+      }, [
+        n(l(H), {
+          data: e.data,
+          height: e.height,
+          margin: {}
+        }, {
+          default: T(() => [
+            n(l(N), {
+              "horizontal-shift": 20,
+              "vertical-shift": 20,
+              triggers: {
+                [l(L).selectors.segment]: k
+              }
+            }, null, 8, ["triggers"]),
+            n(l(j), {
+              value: v,
+              "corner-radius": e.radius,
+              "arc-width": e.arcWidth ?? 20,
+              color: r.labels.map((a) => a.color),
+              "angle-range": y ? [-1.5707963267948966, 1.5707963267948966] : [],
+              "pad-angle": r.padAngle || 0
+            }, null, 8, ["corner-radius", "arc-width", "color", "angle-range", "pad-angle"])
+          ]),
+          _: 1
+        }, 8, ["data", "height"]),
+        s(e.$slots, "default"),
+        o("div", A, [
+          l(h).tooltip ? s(e.$slots, "tooltip", {
+            key: 0,
+            values: t.value
+          }) : t.value ? s(e.$slots, "fallback", { key: 1 }, () => [
+            o("div", E, [
+              o("div", {
+                class: "w-2 h-2 rounded-full mr-2",
+                style: W(`background-color: ${r.labels[t.value.index].color} ;`)
+              }, null, 4),
+              o("div", null, B(t.value.data), 1)
+            ])
+          ]) : p("", !0)
+        ], 512)
+      ]),
+      e.hideLegend ? p("", !0) : (c(), u("div", R, [
+        n(l(z), { items: e.labels }, null, 8, ["items"])
+      ]))
+    ], 64));
+  }
+});
+export {
+  U as default
+};

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

@@ -0,0 +1,22 @@
+import { DonutChartProps } from './types';
+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<{
+        readonly onClick?: ((event: MouseEvent, values?: any) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick"> & DonutChartProps & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        default?(_: {}): any;
+        tooltip?(_: {
+            values: any;
+        }): any;
+        fallback?(_: {}): any;
+    };
+    emit: (e: "click", event: MouseEvent, values?: any) => void;
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

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

@@ -10,8 +10,12 @@ export type DonutChartProps = {
      */
     data: number[];
     /**
-     * The height of the chart in pixels.
+     * The arc width of the chart in pixels.
      */
+    arcWidth?: number;
+    /**
+   * The height of the chart in pixels.
+   */
     height: number;
     /**
      * The radius of the donut in pixels.

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,143 @@
+import { defineComponent as P, computed as k, useSlots as O, useTemplateRef as j, ref as w, createElementBlock as c, openBlock as n, normalizeClass as g, createVNode as s, createCommentVNode as l, createElementVNode as x, unref as i, withCtx as M, createBlock as d, Fragment as W, renderList as E, mergeProps as G, renderSlot as h } from "vue";
+import { Position as v, CurveType as X } from "@unovis/ts";
+import { createMarkers as $, getFirstPropertyValue as z } from "../../utils.js";
+import R from "../Tooltip.js";
+import { VisXYContainer as Y, VisTooltip as S, VisLine as H, VisAxis as T, VisCrosshair as U, VisBulletLegend as q } from "@unovis/vue";
+import { LegendPosition as I } from "../../types.js";
+const J = {
+  ref: "slotWrapper",
+  class: "hidden"
+}, te = /* @__PURE__ */ P({
+  __name: "LineChart",
+  props: {
+    data: {},
+    height: {},
+    xLabel: {},
+    yLabel: {},
+    padding: { default: () => ({
+      top: 5,
+      right: 5,
+      bottom: 5,
+      left: 5
+    }) },
+    categories: {},
+    markerConfig: {},
+    xFormatter: {},
+    yFormatter: {},
+    curveType: {},
+    lineWidth: { default: 2 },
+    lineDashArray: {},
+    xNumTicks: { default: (o) => o.data.length > 24 ? 24 / 4 : o.data.length - 1 },
+    xExplicitTicks: {},
+    minMaxTicksOnly: { type: Boolean },
+    yNumTicks: { default: (o) => o.data.length > 24 ? 24 / 4 : o.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 },
+    hideXAxis: { type: Boolean },
+    hideYAxis: { type: Boolean },
+    crosshairConfig: { default: () => ({
+      color: "#666"
+    }) }
+  },
+  emits: ["click"],
+  setup(o, { emit: L }) {
+    const C = L, t = o, b = k(() => t.markerConfig ? $(t.markerConfig) : ""), B = O(), p = j("slotWrapper"), a = w();
+    function D(e) {
+      return typeof window > "u" ? "" : p.value ? p.value.innerHTML : "";
+    }
+    function V(e) {
+      return a.value = e, D();
+    }
+    const y = k(
+      () => t.legendPosition === I.Top
+    ), A = Object.values(t.categories).map(
+      (e, r) => `var(--vis-color${r})`
+    ), F = (e) => Object.values(t.categories)[e].color ?? A[e];
+    return (e, r) => (n(), c("div", {
+      class: g(["flex flex-col space-y-4", {
+        "flex-col-reverse": y.value,
+        markers: !!t.markerConfig
+      }]),
+      onClick: r[0] || (r[0] = (m) => C("click", m, a.value))
+    }, [
+      s(i(Y), {
+        data: e.data,
+        padding: e.padding,
+        height: e.height,
+        svgDefs: b.value
+      }, {
+        default: M(() => [
+          s(i(S), {
+            "horizontal-placement": i(v).Right,
+            "vertical-placement": i(v).Top
+          }, null, 8, ["horizontal-placement", "vertical-placement"]),
+          (n(!0), c(W, null, E(Object.keys(t.categories), (m, u) => (n(), d(i(H), {
+            key: u,
+            x: (f, N) => N,
+            y: (f) => f[m],
+            color: F(u),
+            "curve-type": e.curveType ?? i(X).MonotoneX,
+            "line-width": e.lineWidth,
+            lineDashArray: e.lineDashArray ? e.lineDashArray[u] : void 0
+          }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"]))), 128)),
+          e.hideXAxis ? l("", !0) : (n(), d(i(T), {
+            key: 0,
+            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"])),
+          e.hideYAxis ? l("", !0) : (n(), d(i(T), {
+            key: 1,
+            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 ? l("", !0) : (n(), d(i(U), G({ key: 2 }, e.crosshairConfig, { template: V }), null, 16))
+        ]),
+        _: 1
+      }, 8, ["data", "padding", "height", "svgDefs"]),
+      e.hideLegend ? l("", !0) : (n(), c("div", {
+        key: 0,
+        class: g(["flex items center justify-end", { "pb-4": y.value }])
+      }, [
+        s(i(q), {
+          items: Object.values(e.categories)
+        }, null, 8, ["items"])
+      ], 2)),
+      x("div", J, [
+        i(B).tooltip ? h(e.$slots, "tooltip", {
+          key: 0,
+          values: a.value
+        }) : a.value ? h(e.$slots, "fallback", { key: 1 }, () => [
+          s(R, {
+            data: a.value,
+            categories: e.categories,
+            toolTipTitle: i(z)(a.value) ?? "",
+            yFormatter: t.yFormatter
+          }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
+        ]) : l("", !0)
+      ], 512)
+    ], 2));
+  }
+});
+export {
+  te as default
+};

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

@@ -0,0 +1,21 @@
+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<{
+        readonly onClick?: ((event: MouseEvent, values?: T | undefined) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick"> & LineChartProps<T> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        tooltip?(_: {
+            values: T | undefined;
+        }): any;
+        fallback?(_: {}): any;
+    };
+    emit: (e: "click", event: MouseEvent, values?: T) => void;
+}>) => 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

@@ -1,5 +1,4 @@
-import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
-import { axisFormatter, LegendPosition, MarkerConfig } from '../../types';
+import { axisFormatter, BulletLegendItemInterface, CrosshairConfig, CurveType, LegendPosition, MarkerConfig } from '../../types';
 export interface LineChartProps<T> {
     /**
      * The data to be displayed in the line chart.
@@ -64,7 +63,7 @@ export interface LineChartProps<T> {
     /**
      * Line dash array, see SVG's stroke-dasharray. Default: `undefined`
      */
-    lineDashArray?: number[];
+    lineDashArray?: number[][];
     /**
      * The desired number of ticks on the x-axis.
      */
@@ -129,19 +128,5 @@ export interface LineChartProps<T> {
     /**
      * Crosshair configuration object for customizing the appearance of the crosshair line.
      */
-    crosshairConfig?: {
-        /**
-         * The color of the crosshair line. Accepts any valid CSS color string.
-         * Example: '#f00', 'rgba(0,0,0,0.5)', 'blue'
-         */
-        color?: string;
-        /**
-         * The stroke color of the crosshair line. Accepts any valid CSS color string.
-         */
-        strokeColor?: string;
-        /**
-         * The stroke width of the crosshair line in pixels.
-         */
-        strokeWidth?: number;
-    };
+    crosshairConfig?: CrosshairConfig;
 }

package/dist/components/Tooltip.js

@@ -1,5 +1,5 @@
-import { defineComponent as b, computed as v, createElementBlock as r, openBlock as l, createElementVNode as o, toDisplayString as i, Fragment as y, renderList as h, normalizeStyle as n } from "vue";
-const f = {
+import { defineComponent as b, computed as v, createElementBlock as r, openBlock as i, createElementVNode as o, toDisplayString as l, Fragment as y, renderList as h, normalizeStyle as a } from "vue";
+const f = { class: "px-[15px] py-[10px]" }, _ = {
   class: "capitalize border-b mb-1 pb-1",
   style: {
     color: "var(--tooltip-value-color)",
@@ -14,29 +14,29 @@ const f = {
     yFormatter: { type: Function }
   },
   setup(p) {
-    const a = p, d = ["_index", "_stacked", "_ending"], m = v(() => Object.entries(a.data ?? []).filter(
-      ([e, g]) => !d.includes(e) && Object.keys(a.categories).includes(e)
+    const n = p, d = ["_index", "_stacked", "_ending"], m = v(() => Object.entries(n.data ?? []).filter(
+      ([e, g]) => !d.includes(e) && Object.keys(n.categories).includes(e)
     ));
-    return (e, g) => (l(), r("div", null, [
-      o("div", f, i(e.toolTipTitle), 1),
-      (l(!0), r(y, null, h(m.value, ([t, s], u) => {
+    return (e, g) => (i(), r("div", f, [
+      o("div", _, l(e.toolTipTitle), 1),
+      (i(!0), r(y, null, h(m.value, ([t, s], u) => {
         var c;
-        return l(), r("div", {
+        return i(), r("div", {
           key: t,
           style: { display: "flex", "align-items": "center", "margin-bottom": "4px" }
         }, [
           o("span", {
-            style: n([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, {
+            style: a([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, {
               backgroundColor: (c = e.categories[t]) != null && c.color ? e.categories[t].color : `var(--vis-color${u})`
             }])
           }, null, 4),
           o("div", null, [
             o("span", {
-              style: n([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
-            }, i(e.categories[t].name) + ":", 1),
+              style: a([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
+            }, l(e.categories[t].name) + ":", 1),
             o("span", {
-              style: n([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
-            }, i(e.yFormatter ? e.yFormatter(s) : s), 1)
+              style: a([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
+            }, l(e.yFormatter ? e.yFormatter(s) : s), 1)
           ])
         ]);
       }), 128))

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

@@ -1,5 +1,4 @@
-import { axisFormatter } from '../types';
-import { BulletLegendItemInterface } from '@unovis/ts';
+import { axisFormatter, 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/dist/index.d.ts

@@ -1,2 +1,8 @@
-export { default as BarChart } from './components/BarChart/BarChart.vue';
-export { LegendPosition } from './types';
+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, MarkerConfig, CrosshairConfig } from './types';
+export { AreaChart, AreaStackedChart, LineChart, BarChart, DonutChart, Orientation, CurveType, LegendPosition };
+export type { BulletLegendItemInterface, MarkerConfig, CrosshairConfig };

package/dist/index.js

@@ -1,6 +1,16 @@
-import { default as e } from "./components/BarChart/BarChart.js";
-import { LegendPosition as a } from "./types.js";
+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 {
-  e as BarChart,
-  a as LegendPosition
+  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

@@ -1,7 +1,45 @@
-export declare enum LegendPosition {
+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, };
 export type axisFormatter = ((tick: number, i?: number, ticks?: number[]) => string) | ((tick: Date, i?: number, ticks?: Date[]) => string);
 export interface MarkerConfig {
     type?: "circle" | "square" | "triangle" | "diamond";
@@ -10,3 +48,18 @@ export interface MarkerConfig {
     color?: string;
     strokeColor?: string;
 }
+export interface CrosshairConfig {
+    /**
+     * The color of the crosshair line. Accepts any valid CSS color string.
+     * Example: '#f00', 'rgba(0,0,0,0.5)', 'blue'
+     */
+    color?: string;
+    /**
+     * The stroke color of the crosshair line. Accepts any valid CSS color string.
+     */
+    strokeColor?: string;
+    /**
+     * The stroke width of the crosshair line in pixels.
+     */
+    strokeWidth?: number;
+}

package/dist/types.js

@@ -1,4 +1,6 @@
-var o = /* @__PURE__ */ ((t) => (t.Top = "top", t.Bottom = "bottom", t))(o || {});
+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 LegendPosition
+  o as CurveType,
+  l as LegendPosition,
+  t as Orientation
 };

package/dist/utils.js

@@ -1,24 +1,49 @@
-function u(t) {
-  if (t && Object.keys(t).length > 0) {
-    const c = Object.keys(t)[0];
-    return t[c];
+function o(n) {
+  if (n && Object.keys(n).length > 0) {
+    const e = Object.keys(n)[0];
+    return n[e];
   }
 }
-function o(t) {
-  return t.charAt(0).toUpperCase() + t.slice(1);
+const u = (n, e, r, t, $) => {
+  switch (n) {
+    case "circle":
+      return `<circle cx="${e / 2}" cy="${e / 2}" r="${(e - r) / 2}" stroke-width="${r}" stroke="${$}" fill="${t}" />`;
+    case "square":
+      return `<rect x="${r / 2}" y="${r / 2}" width="${e - r}" height="${e - r}" stroke-width="${r}" stroke="${$}" fill="${t}" />`;
+    case "triangle":
+      return `<polygon points="${e / 2},${r / 2} ${e - r / 2},${e - r / 2} ${r / 2},${e - r / 2}" stroke-width="${r}" stroke="${$}" fill="${t}" />`;
+    case "diamond":
+      return `<polygon points="${e / 2},${r / 2} ${e - r / 2},${e / 2} ${e / 2},${e - r / 2} ${r / 2},${e / 2}" stroke-width="${r}" stroke="${$}" fill="${t}" />`;
+    default:
+      return "";
+  }
+};
+function m(n) {
+  return Object.entries(n).map(([e, r]) => {
+    const t = r.type || "circle", $ = r.size || 10, c = r.strokeWidth || 2, a = r.color || "#000", l = r.strokeColor || r.color || "#000";
+    return `<marker id="circle-marker-${e}" viewBox="0 0 ${$} ${$}" refX="${$ / 2}" refY="${$ / 2}" markerWidth="${$ / 2}" markerHeight="${$ / 2}">
+        ${u(t, $, c, a, l)}
+      </marker>`;
+  }).join(`
+`);
+}
+function p(n) {
+  return n.charAt(0).toUpperCase() + n.slice(1);
 }
-const a = (t, c) => {
-  const s = Object.keys(t[0]).filter((e) => e !== c), i = Object.keys(t[0][s[0]]);
-  return t.map((e) => ({
-    month: e.month,
-    ...s.flatMap(
-      (r) => i.map((n) => ({
-        [`${r}${o(n)}`]: e[r][n]
+const y = (n, e) => {
+  const r = Object.keys(n[0]).filter(($) => $ !== e), t = Object.keys(n[0][r[0]]);
+  return n.map(($) => ({
+    month: $.month,
+    ...r.flatMap(
+      (c) => t.map((a) => ({
+        [`${c}${p(a)}`]: $[c][a]
       }))
-    ).reduce((r, n) => ({ ...r, ...n }), {})
+    ).reduce((c, a) => ({ ...c, ...a }), {})
   }));
 };
 export {
-  a as flattenData,
-  u as getFirstPropertyValue
+  m as createMarkers,
+  y as flattenData,
+  o as getFirstPropertyValue,
+  u as markerShape
 };

package/package.json

@@ -1,16 +1,17 @@
 {
   "name": "vue-chrts",
-  "version": "0.2.0-test.9",
+  "version": "0.2.1",
   "type": "module",
   "files": [
     "dist"
   ],
-  "main": "./dist/index.js",
+  "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js"
+      "import": "./dist/index.js",
+      "require": "./dist/index.umd.cjs"
     }
   },
   "scripts": {
@@ -20,26 +21,24 @@
     "release": "commit-and-tag-version"
   },
   "peerDependencies": {
-    "@unovis/ts": "^1.5.2",
-    "@unovis/vue": "^1.5.2",
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.1.11",
-    "@tanstack/vue-table": "^8.21.3",
-    "@types/node": "^22.16.5",
+    "@tailwindcss/vite": "^4.0.15",
+    "@tanstack/vue-table": "^8.21.2",
+    "@types/node": "^22.13.11",
     "@unovis/ts": "^1.5.2",
     "@unovis/vue": "^1.5.2",
-    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue": "^5.2.1",
     "@vue/tsconfig": "^0.7.0",
-    "@vueuse/core": "^13.5.0",
+    "@vueuse/core": "^13.0.0",
     "commit-and-tag-version": "^12.5.1",
-    "tailwindcss": "^4.1.11",
-    "typescript": "~5.7.3",
-    "vite": "^6.3.5",
-    "vite-plugin-dts": "^4.5.4",
-    "vue-router": "^4.5.1",
-    "vue-tsc": "^2.2.12"
+    "tailwindcss": "^4.0.15",
+    "typescript": "~5.7.2",
+    "vite": "^6.2.0",
+    "vite-plugin-dts": "^4.5.3",
+    "vue-router": "^4.5.0",
+    "vue-tsc": "^2.2.4"
   },
   "packageManager": "pnpm@8.15.4+sha256.cea6d0bdf2de3a0549582da3983c70c92ffc577ff4410cbf190817ddc35137c2"
 }