vue-chrts 0.2.5-test.1 → 0.2.5-test.2

package/dist/components/AreaChart/AreaChart.js

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

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

@@ -57,6 +57,17 @@ export interface AreaChartProps<T> {
      * See `CurveType` for available options.
      */
     curveType?: CurveType;
+    /**
+     * If `true`, hides the area fill, displaying only the line.
+     */
+    hideArea?: boolean;
+    /**
+     * Edit the gradient stops for the area fill.
+     */
+    gradientStops?: Array<{
+        offset: string;
+        stopOpacity: number;
+    }>;
     /**
      * The width of the line in pixels. Default is 2px.
      */

package/dist/components/DonutChart/DonutChart.js

@@ -1,19 +1,12 @@
-import { defineComponent as V, useSlots as b, useTemplateRef as x, ref as w, createElementBlock as c, openBlock as m, Fragment as T, createElementVNode as a, createCommentVNode as g, createVNode as r, renderSlot as s, unref as n, withCtx as D, normalizeStyle as S, toDisplayString as W } from "vue";
-import { Donut as B } from "@unovis/ts";
-import { DonutType as L } from "./types.js";
-import { VisSingleContainer as R, VisTooltip as H, VisDonut as N, VisBulletLegend as $ } from "@unovis/vue";
-const j = {
+import { defineComponent as w, useSlots as D, useTemplateRef as L, ref as T, computed as g, createElementBlock as p, openBlock as f, normalizeStyle as o, createVNode as r, createCommentVNode as m, renderSlot as d, createElementVNode as a, unref as i, withCtx as B, toDisplayString as P } from "vue";
+import { Donut as W } from "@unovis/ts";
+import { DonutType as R } from "./types.js";
+import { VisSingleContainer as A, VisTooltip as H, VisDonut as N, VisBulletLegend as $ } from "@unovis/vue";
+import { LegendPosition as z } from "../../types.js";
+const E = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, z = { style: { display: "flex", "align-items": "center", padding: "10px 15px" } }, A = {
-  key: 0,
-  style: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    marginTop: "1rem"
-  }
-}, U = /* @__PURE__ */ V({
+}, j = { style: { display: "flex", "align-items": "center", padding: "10px 15px" } }, I = /* @__PURE__ */ w({
   __name: "DonutChart",
   props: {
     type: {},
@@ -22,78 +15,91 @@ const j = {
     height: {},
     radius: {},
     hideLegend: { type: Boolean },
+    legendPosition: { default: z.BottomCenter },
+    legendStyle: {},
     labels: {},
     padAngle: {}
   },
   emits: ["click"],
-  setup(t, { emit: p }) {
-    const f = p, i = t, h = b(), d = x("slotWrapper"), l = w(), y = (e) => e, v = i.type === L.Half;
-    function C(e) {
-      return l.value = e, k();
+  setup(l, { emit: h }) {
+    const v = h, e = l, y = D(), u = L("slotWrapper"), n = T(), x = (t) => t, C = e.type === R.Half;
+    function k(t) {
+      return n.value = t, V();
     }
-    function k(e) {
-      return typeof window > "u" ? "" : d.value ? d.value.innerHTML : "";
+    function V(t) {
+      return typeof window > "u" ? "" : u.value ? u.value.innerHTML : "";
     }
-    return (e, u) => (m(), c(T, null, [
-      a("div", {
-        style: {
+    const b = g(() => e.legendPosition.includes("top")), S = g(() => e.legendPosition.includes("left") ? "flex-start" : e.legendPosition.includes("right") ? "flex-end" : "center");
+    return (t, c) => (f(), p("div", {
+      style: o({
+        display: "flex",
+        flexDirection: b.value ? "column-reverse" : "column",
+        gap: "var(--vis-legend-spacing)"
+      }),
+      onClick: c[0] || (c[0] = (s) => v("click", s, n.value))
+    }, [
+      r(i(A), {
+        data: l.data,
+        height: l.height,
+        margin: {}
+      }, {
+        default: B(() => [
+          r(i(H), {
+            "horizontal-shift": 20,
+            "vertical-shift": 20,
+            triggers: {
+              [i(W).selectors.segment]: k
+            }
+          }, null, 8, ["triggers"]),
+          r(i(N), {
+            value: x,
+            "corner-radius": l.radius,
+            "arc-width": l.arcWidth ?? 20,
+            color: e.labels.map((s) => s.color),
+            "angle-range": C ? [-1.5707963267948966, 1.5707963267948966] : [],
+            "pad-angle": e.padAngle || 0
+          }, null, 8, ["corner-radius", "arc-width", "color", "angle-range", "pad-angle"])
+        ]),
+        _: 1
+      }, 8, ["data", "height"]),
+      e.hideLegend ? m("", !0) : (f(), p("div", {
+        key: 0,
+        style: o({
           display: "flex",
-          alignItems: "center",
-          justifyContent: "center"
-        },
-        onClick: u[0] || (u[0] = (o) => f("click", o, l.value))
+          justifyContent: S.value
+        })
       }, [
-        r(n(R), {
-          data: t.data,
-          height: t.height,
-          margin: {}
-        }, {
-          default: D(() => [
-            r(n(H), {
-              "horizontal-shift": 20,
-              "vertical-shift": 20,
-              triggers: {
-                [n(B).selectors.segment]: C
-              }
-            }, null, 8, ["triggers"]),
-            r(n(N), {
-              value: y,
-              "corner-radius": t.radius,
-              "arc-width": t.arcWidth ?? 20,
-              color: i.labels.map((o) => o.color),
-              "angle-range": v ? [-1.5707963267948966, 1.5707963267948966] : [],
-              "pad-angle": i.padAngle || 0
-            }, null, 8, ["corner-radius", "arc-width", "color", "angle-range", "pad-angle"])
+        r(i($), {
+          style: o([
+            e.legendStyle,
+            "display: flex; gap: var(--vis-legend-spacing);"
           ]),
-          _: 1
-        }, 8, ["data", "height"]),
-        s(e.$slots, "default"),
-        a("div", j, [
-          n(h).tooltip ? s(e.$slots, "tooltip", {
-            key: 0,
-            values: l.value
-          }) : l.value ? s(e.$slots, "fallback", { key: 1 }, () => [
-            a("div", z, [
-              a("div", {
-                style: S({
-                  width: "0.5rem",
-                  height: "0.5rem",
-                  borderRadius: "9999px",
-                  marginRight: "0.5rem",
-                  backgroundColor: i.labels[l.value.index].color
-                })
-              }, null, 4),
-              a("div", null, W(l.value.data), 1)
-            ])
-          ]) : g("", !0)
-        ], 512)
-      ]),
-      t.hideLegend ? g("", !0) : (m(), c("div", A, [
-        r(n($), { items: t.labels }, null, 8, ["items"])
-      ]))
-    ], 64));
+          items: l.labels
+        }, null, 8, ["style", "items"])
+      ], 4)),
+      d(t.$slots, "default"),
+      a("div", E, [
+        i(y).tooltip ? d(t.$slots, "tooltip", {
+          key: 0,
+          values: n.value
+        }) : n.value ? d(t.$slots, "fallback", { key: 1 }, () => [
+          a("div", j, [
+            a("div", {
+              style: o({
+                width: "0.5rem",
+                height: "0.5rem",
+                borderRadius: "9999px",
+                marginRight: "0.5rem",
+                backgroundColor: e.labels[n.value.index].color
+              })
+            }, null, 4),
+            a("div", null, P(n.value.data), 1)
+          ])
+        ]) : m("", !0)
+      ], 512)
+    ], 4));
   }
 });
 export {
-  U as default
+  I as default
 };

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

@@ -1,3 +1,4 @@
+import { LegendPosition } from '../../types';
 export type DonutChartProps = {
     /**
      * The type of donut chart to render.
@@ -25,6 +26,15 @@ export type DonutChartProps = {
      * If `true`, hides the chart legend.
      */
     hideLegend?: boolean;
+    /**
+   * Optional position for the legend, if applicable.
+   * See `LegendPosition` for available options.
+   */
+    legendPosition?: LegendPosition;
+    /**
+     * Optional style object for the legend container. Allows custom CSS styling.
+     */
+    legendStyle?: string | Record<string, string>;
     /**
      * An array of label objects defining the name and color for each segment.
      */

package/dist/components/LineChart/LineChart.js

@@ -1,158 +1,53 @@
-import { defineComponent as N, computed as u, useSlots as O, useTemplateRef as W, ref as j, createElementBlock as y, openBlock as a, normalizeClass as w, normalizeStyle as g, createVNode as c, createCommentVNode as r, createElementVNode as M, unref as i, withCtx as S, createBlock as d, Fragment as z, 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 R } from "../../utils.js";
-import Y from "../Tooltip.js";
-import { VisXYContainer as H, VisTooltip as U, VisLine as q, VisAxis as x, VisCrosshair as I, VisBulletLegend as J } from "@unovis/vue";
-import { LegendPosition as Q } from "../../types.js";
-const Z = {
-  ref: "slotWrapper",
-  style: { display: "none" }
-}, le = /* @__PURE__ */ N({
+import { defineComponent as a, createBlock as r, openBlock as p, mergeProps as s, createSlots as l, renderList as y, withCtx as c, renderSlot as m, normalizeProps as d, guardReactiveProps as h } from "vue";
+import B from "../AreaChart/AreaChart.js";
+const g = /* @__PURE__ */ a({
+  inheritAttrs: !1,
   __name: "LineChart",
   props: {
     data: {},
     height: {},
     xLabel: {},
     yLabel: {},
-    padding: { default: () => ({
-      top: 5,
-      right: 5,
-      bottom: 5,
-      left: 5
-    }) },
+    padding: {},
     categories: {},
     markerConfig: {},
-    xFormatter: {},
-    yFormatter: {},
+    xFormatter: { type: Function },
+    yFormatter: { type: Function },
     curveType: {},
-    lineWidth: { default: 2 },
+    lineWidth: {},
     lineDashArray: {},
-    xNumTicks: { default: (e) => e.data.length > 24 ? 24 / 4 : e.data.length - 1 },
+    xNumTicks: {},
     xExplicitTicks: {},
     minMaxTicksOnly: { type: Boolean },
-    yNumTicks: { default: (e) => e.data.length > 24 ? 24 / 4 : e.data.length - 1 },
+    yNumTicks: {},
+    hideLegend: { type: Boolean },
     hideTooltip: { type: Boolean },
-    hideLegend: { type: Boolean, default: !1 },
-    legendPosition: { default: Q.BottomCenter },
-    legendStyle: { default: void 0 },
-    xGridLine: { type: Boolean },
+    legendPosition: {},
+    legendStyle: {},
     xDomainLine: { type: Boolean },
-    yGridLine: { 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"
-    }) },
+    crosshairConfig: {},
     yDomain: {},
     xDomain: {}
   },
-  emits: ["click"],
-  setup(e, { emit: T }) {
-    const L = T, t = e, D = u(() => t.markerConfig ? $(t.markerConfig) : ""), C = O(), f = W("slotWrapper"), o = j();
-    function p(n) {
-      return typeof window > "u" ? "" : f.value ? f.value.innerHTML : "";
-    }
-    function B(n) {
-      return o.value = n, p();
-    }
-    const b = u(() => t.legendPosition.startsWith("top")), A = u(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center"), V = Object.values(t.categories).map(
-      (n, s) => `var(--vis-color${s})`
-    ), F = (n) => Object.values(t.categories)[n].color ?? V[n];
-    return (n, s) => (a(), y("div", {
-      style: g({
-        display: "flex",
-        flexDirection: b.value ? "column-reverse" : "column",
-        gap: "var(--vis-legend-spacing)"
-      }),
-      class: w({ markers: !!t.markerConfig }),
-      onClick: s[0] || (s[0] = (l) => L("click", l, o.value))
-    }, [
-      c(i(H), {
-        data: e.data,
-        padding: e.padding,
-        height: e.height,
-        svgDefs: D.value,
-        yDomain: e.yDomain,
-        xDomain: e.xDomain
-      }, {
-        default: S(() => [
-          c(i(U), {
-            "horizontal-placement": i(v).Right,
-            "vertical-placement": i(v).Top
-          }, null, 8, ["horizontal-placement", "vertical-placement"]),
-          (a(!0), y(z, null, E(Object.keys(t.categories), (l, m) => (a(), d(i(q), {
-            key: m,
-            x: (k, P) => P,
-            y: (k) => k[l],
-            color: F(m),
-            "curve-type": e.curveType ?? i(X).MonotoneX,
-            "line-width": e.lineWidth,
-            lineDashArray: e.lineDashArray ? e.lineDashArray[m] : void 0
-          }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"]))), 128)),
-          e.hideXAxis ? r("", !0) : (a(), d(i(x), {
-            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 ? r("", !0) : (a(), d(i(x), {
-            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 ? r("", !0) : (a(), d(i(I), G({ key: 2 }, e.crosshairConfig, { template: B }), null, 16))
-        ]),
-        _: 1
-      }, 8, ["data", "padding", "height", "svgDefs", "yDomain", "xDomain"]),
-      t.hideLegend ? r("", !0) : (a(), y("div", {
-        key: 0,
-        style: g({
-          display: "flex",
-          justifyContent: A.value
-        })
-      }, [
-        c(i(J), {
-          style: g([
-            t.legendStyle,
-            "display: flex; gap: var(--vis-legend-spacing);"
-          ]),
-          items: Object.values(t.categories).map((l) => ({
-            ...l,
-            color: Array.isArray(l.color) ? l.color[0] : l.color
-          }))
-        }, null, 8, ["style", "items"])
-      ], 4)),
-      M("div", Z, [
-        i(C).tooltip ? h(n.$slots, "tooltip", {
-          key: 0,
-          values: o.value
-        }) : o.value ? h(n.$slots, "fallback", { key: 1 }, () => [
-          c(Y, {
-            data: o.value,
-            categories: e.categories,
-            toolTipTitle: i(R)(o.value) ?? "",
-            yFormatter: t.yFormatter
-          }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
-        ]) : r("", !0)
-      ], 512)
-    ], 6));
+  setup(n) {
+    const i = n;
+    return (e, u) => (p(), r(B, s({ ...e.$attrs, ...i }, { "hide-area": !0 }), l({ _: 2 }, [
+      y(e.$slots, (x, o) => ({
+        name: o,
+        fn: c((t) => [
+          m(e.$slots, o, d(h(t)))
+        ])
+      }))
+    ]), 1040));
   }
 });
 export {
-  le as default
+  g as default
 };

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

@@ -1,17 +1,10 @@
 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;
+    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: {
-        tooltip?(_: {
-            values: T | undefined;
-        }): any;
-        fallback?(_: {}): any;
-    };
-    emit: (e: "click", event: MouseEvent, values?: T) => void;
+    slots: Partial<Record<number, (_: any) => any>>;
+    emit: {};
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,144 +1,2 @@
-import { axisFormatter, BulletLegendItemInterface, CrosshairConfig, CurveType, LegendPosition, MarkerConfig } 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;
-    /**
-     * Optional padding applied to the chart.
-     * Allows specifying individual padding values for the top, right, bottom, and left sides.
-     */
-    padding?: {
-        top: number;
-        right: number;
-        bottom: number;
-        left: 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>;
-    /**
-     * A record mapping marker keys to show custom patterns.
-     */
-    markerConfig?: Record<string, MarkerConfig>;
-    /**
-     * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the x-axis.
-     * @param {number} i - The index of the tick in the `ticks` array.
-     * @param {(number[]|Date[])} ticks - An array of all tick values for the x-axis.
-     * @returns {string} The formatted string representation of the tick.
-     */
-    xFormatter?: axisFormatter;
-    /**
-     * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the y-axis.
-     * @param {number} i - The index of the tick in the `ticks` array.
-     * @param {(number[]|Date[])} ticks - An array of all tick values for the y-axis.
-     * @returns {string} The formatted string representation of the tick.
-     */
-    yFormatter?: axisFormatter;
-    /**
-     * The type of curve to use for the line chart.
-     * See `CurveType` for available options.
-     */
-    curveType?: CurveType;
-    /**
-     * The width of the line in pixels. Default is 2px.
-     */
-    lineWidth?: number;
-    /**
-     * Line dash array, see SVG's stroke-dasharray. Default: `undefined`
-     */
-    lineDashArray?: number[][];
-    /**
-     * The desired number of ticks on the x-axis.
-     */
-    xNumTicks?: number;
-    /**
-     * Force specific ticks on the x-axis.
-     */
-    xExplicitTicks?: (number | string | Date)[];
-    /**
-     * Force only first and last ticks on the x-axis.
-     */
-    minMaxTicksOnly?: boolean;
-    /**
-     * 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;
-    /**
-     * Optional style object for the legend container. Allows custom CSS styling.
-     */
-    legendStyle?: string | Record<string, string>;
-    /**
-     * 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;
-    /**
-     * If `true`, hide the x-axis.
-     */
-    hideXAxis?: boolean;
-    /**
-     * If `true`, hide the y-axis.
-     */
-    hideYAxis?: boolean;
-    /**
-     * Crosshair configuration object for customizing the appearance of the crosshair line.
-     */
-    crosshairConfig?: CrosshairConfig;
-    /**
-     * The domain for the y-axis, specified as a tuple of two values.
-     */
-    yDomain?: [number | undefined, number | undefined];
-    /**
-     * The domain for the x-axis, specified as a tuple of two values.
-     */
-    xDomain?: [number | undefined, number | undefined];
-}
+import { AreaChartProps } from '../AreaChart/types';
+export type LineChartProps<T> = Omit<AreaChartProps<T>, "hideArea" | "gradientStops">;

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

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

package/dist/components/AreaStackedChart/AreaStackedChart.js

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

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

@@ -1,14 +0,0 @@
-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

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

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

@@ -1,86 +0,0 @@
-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;
-    /**
-     * Optional padding applied to the chart.
-     * Allows specifying individual padding values for the top, right, bottom, and left sides.
-     */
-    padding?: {
-        top: number;
-        right: number;
-        bottom: number;
-        left: number;
-    };
-    /**
-     * 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;
-    /**
-     * 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;
-    };
-}