vue-chrts 0.2.4 → 0.2.5-test.2

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

@@ -101,6 +101,10 @@ type BarChartPropsBase<T> = {
      * 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 a domain line (axis line) along the x-axis.
      */
@@ -133,23 +137,35 @@ type BarChartPropsBase<T> = {
      * If `true`, hide the y-axis.
      */
     hideYAxis?: boolean;
+    /**
+     * Specific spacing between stacked and grouped bars in pixels.
+     * Only applicable if `stackAndGrouped` is `true`.
+     */
     stackedGroupedSpacing?: number;
 };
-type BarChartPropsStackAndGrouped<T> = BarChartPropsBase<T> & {
-    stackAndGrouped: true;
+export type BarChartProps<T> = BarChartPropsBase<T> & {
     /**
-     * The key in the data object type 'T' to be used for the x-axis values.
-     * Required when stackAndGrouped is true.
+     * Whether the bars should be stacked and grouped.
+     * If true, `valueLabel` is optional and `xAxis` is required.
      */
-    xAxis: keyof T;
-};
-type BarChartPropsNormal<T> = BarChartPropsBase<T> & {
-    stackAndGrouped?: false;
+    stackAndGrouped?: boolean;
+    /**
+     * Configuration for the value label display.
+     * Required if `stackAndGrouped` is false and `xAxis` is present.
+     * Optional otherwise.
+     */
+    valueLabel?: ValueLabel;
     /**
-     * The key in the data object type 'T' to be used for the x-axis values.
-     * Optional when stackAndGrouped is not true.
+     * The data key for the X-axis.
+     * Required if `stackAndGrouped` is true, or if `stackAndGrouped` is false AND `valueLabel` is present.
      */
     xAxis?: keyof T;
 };
-export type BarChartProps<T> = BarChartPropsStackAndGrouped<T> | BarChartPropsNormal<T>;
+export type ValueLabel = {
+    label: (d: any, index: number) => string | number;
+    labelSpacing?: number;
+    backgroundColor?: string;
+    color?: string;
+    labelFontSize?: number;
+};
 export {};

package/dist/components/BubbleChart/BubbleChart.js

@@ -1,19 +1,13 @@
-import { defineComponent as z, useSlots as P, useTemplateRef as N, ref as O, computed as R, createElementBlock as c, openBlock as a, Fragment as j, createCommentVNode as r, createVNode as s, createElementVNode as w, unref as t, withCtx as D, createBlock as u, renderSlot as g } from "vue";
-import { Scatter as K, Position as M } from "@unovis/ts";
-import { VisBulletLegend as k, VisXYContainer as S, VisTooltip as E, VisScatter as G, VisAxis as x } from "@unovis/vue";
-import { LegendPosition as d } from "../../types.js";
-import { getFirstPropertyValue as $ } from "../../utils.js";
-import W from "../Tooltip.js";
-const X = {
-  key: 0,
-  class: "flex items-center justify-end pb-4"
-}, Y = {
-  key: 1,
-  class: "flex items-center justify-end pt-4"
-}, q = {
+import { defineComponent as N, useSlots as O, useTemplateRef as S, ref as _, computed as m, createElementBlock as f, openBlock as l, normalizeStyle as c, createVNode as s, createCommentVNode as r, createElementVNode as D, unref as t, withCtx as R, createBlock as d, renderSlot as g } from "vue";
+import { Scatter as w, Position as K } from "@unovis/ts";
+import { VisXYContainer as M, VisTooltip as E, VisScatter as G, VisAxis as k, VisBulletLegend as W } from "@unovis/vue";
+import { LegendPosition as $ } from "../../types.js";
+import { getFirstPropertyValue as j } from "../../utils.js";
+import X from "../Tooltip.js";
+const Y = {
   ref: "slotWrapper",
   class: "hidden"
-}, ee = /* @__PURE__ */ z({
+}, Z = /* @__PURE__ */ N({
   __name: "BubbleChart",
   props: {
     xAccessor: {},
@@ -34,7 +28,8 @@ const X = {
     categoryKey: {},
     xFormatter: {},
     yFormatter: {},
-    legendPosition: { default: d.Bottom },
+    legendPosition: { default: $.BottomCenter },
+    legendStyle: { default: void 0 },
     sizeOptions: {},
     xDomainLine: { type: Boolean, default: !0 },
     yDomainLine: { type: Boolean, default: !0 },
@@ -52,51 +47,58 @@ const X = {
     }) }
   },
   emits: ["click"],
-  setup(L, { emit: h }) {
-    const e = L, T = P(), m = N("slotWrapper"), o = O(), y = R(() => e.categories && typeof e.categories == "object" && !Array.isArray(e.categories) ? Object.values(e.categories) : Array.isArray(e.categories) ? e.categories : []), b = e.xAccessor, B = e.yAccessor, v = e.sizeAccessor || ((i) => typeof i.comments == "number" ? i.comments : 1), A = (i) => {
-      var p, f;
+  setup(x, { emit: L }) {
+    const e = x, T = O(), u = S("slotWrapper"), a = _(), h = e.xAccessor, v = e.yAccessor, b = e.sizeAccessor || ((i) => typeof i.comments == "number" ? i.comments : 1), B = (i) => {
+      var y, p;
       if (!e.categories || !e.categoryKey)
-        return console.warn("BubbleChart: categories and categoryKey are required for color mapping"), "#cccccc";
+        return console.warn(
+          "BubbleChart: categories and categoryKey are required for color mapping"
+        ), "#cccccc";
       const n = String(i[e.categoryKey]);
-      let l = (p = e.categories[n]) == null ? void 0 : p.color;
-      return Object.keys(e.categories).length === 1 && (l = (f = e.categories[e.categoryKey]) == null ? void 0 : f.color), l || (console.warn(`BubbleChart: No color defined for category "${n}"`), "#cccccc");
-    }, F = h;
-    function V(i) {
-      return o.value = i, C();
-    }
+      let o = (y = e.categories[n]) == null ? void 0 : y.color;
+      return Object.keys(e.categories).length === 1 && (o = (p = e.categories[e.categoryKey]) == null ? void 0 : p.color), o || (console.warn(
+        `BubbleChart: No color defined for category "${n}"`
+      ), "#cccccc");
+    }, A = L;
     function C(i) {
-      return typeof window > "u" ? "" : m.value ? m.value.innerHTML : "";
+      return a.value = i, V();
+    }
+    function V(i) {
+      return typeof window > "u" ? "" : u.value ? u.value.innerHTML : "";
     }
-    const _ = {
-      [K.selectors.point]: V
-    };
-    return (i, n) => (a(), c(j, null, [
-      !e.hideLegend && e.legendPosition === t(d).Top ? (a(), c("div", X, [
-        s(t(k), { items: y.value }, null, 8, ["items"])
-      ])) : r("", !0),
-      s(t(S), {
+    const F = {
+      [w.selectors.point]: C
+    }, z = m(() => e.legendPosition.startsWith("top")), P = m(() => e.legendPosition.includes("left") ? "flex-start" : e.legendPosition.includes("right") ? "flex-end" : "center");
+    return (i, n) => (l(), f("div", {
+      style: c({
+        display: "flex",
+        flexDirection: z.value ? "column-reverse" : "column",
+        gap: "var(--vis-legend-spacing)"
+      })
+    }, [
+      s(t(M), {
         data: e.data,
         height: e.height || 600,
         padding: e.padding,
         scaleByDomain: !0,
-        onClick: n[0] || (n[0] = (l) => F("click", l, o.value))
+        onClick: n[0] || (n[0] = (o) => A("click", o, a.value))
       }, {
-        default: D(() => [
-          e.hideTooltip ? r("", !0) : (a(), u(t(E), {
+        default: R(() => [
+          e.hideTooltip ? r("", !0) : (l(), d(t(E), {
             key: 0,
-            triggers: _
+            triggers: F
           })),
           s(t(G), {
-            x: t(b),
-            y: t(B),
-            color: A,
-            size: t(v),
-            labelPosition: e.labelPosition || t(M).Bottom,
+            x: t(h),
+            y: t(v),
+            color: B,
+            size: t(b),
+            labelPosition: e.labelPosition || t(K).Bottom,
             sizeRange: e.sizeRange || [1, 20],
             opacity: e.opacity,
             cursor: "pointer"
           }, null, 8, ["x", "y", "size", "labelPosition", "sizeRange", "opacity"]),
-          e.hideXAxis ? r("", !0) : (a(), u(t(x), {
+          e.hideXAxis ? r("", !0) : (l(), d(t(k), {
             key: 1,
             type: "x",
             label: e.xLabel,
@@ -108,7 +110,7 @@ const X = {
             tickValues: e.xExplicitTicks,
             minMaxTicksOnly: e.minMaxTicksOnly
           }, null, 8, ["label", "tickFormat", "gridLine", "domainLine", "tickLine", "numTicks", "tickValues", "minMaxTicksOnly"])),
-          e.hideYAxis ? r("", !0) : (a(), u(t(x), {
+          e.hideYAxis ? r("", !0) : (l(), d(t(k), {
             key: 2,
             type: "y",
             label: e.yLabel,
@@ -121,25 +123,41 @@ const X = {
         ]),
         _: 1
       }, 8, ["data", "height", "padding"]),
-      !e.hideLegend && e.legendPosition === t(d).Bottom ? (a(), c("div", Y, [
-        s(t(k), { items: y.value }, null, 8, ["items"])
-      ])) : r("", !0),
-      w("div", q, [
+      e.hideLegend ? r("", !0) : (l(), f("div", {
+        key: 0,
+        style: c({
+          display: "flex",
+          justifyContent: P.value
+        })
+      }, [
+        s(t(W), {
+          class: "bulletLegendOverrides",
+          style: c([
+            e.legendStyle,
+            "display: flex; gap: var(--vis-legend-spacing);"
+          ]),
+          items: Object.values(e.categories).map((o) => ({
+            ...o,
+            color: Array.isArray(o.color) ? o.color[0] : o.color
+          }))
+        }, null, 8, ["style", "items"])
+      ], 4)),
+      D("div", Y, [
         t(T).tooltip ? g(i.$slots, "tooltip", {
           key: 0,
-          values: o.value
-        }) : o.value ? g(i.$slots, "fallback", { key: 1 }, () => [
-          s(W, {
-            data: o.value,
+          values: a.value
+        }) : a.value ? g(i.$slots, "fallback", { key: 1 }, () => [
+          s(X, {
+            data: a.value,
             categories: e.categories || {},
-            toolTipTitle: t($)(o.value) ?? "",
+            toolTipTitle: t(j)(a.value) ?? "",
             yFormatter: e.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
         ]) : r("", !0)
       ], 512)
-    ], 64));
+    ], 4));
   }
 });
 export {
-  ee as default
+  Z as default
 };

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

@@ -107,6 +107,10 @@ export interface BubbleChartProps<T> {
      * See `LegendPosition` for available options.
      */
     legendPosition?: LegendPosition;
+    /**
+     * Optional inline CSS styles for the legend container.
+     */
+    legendStyle?: Record<string, string>;
     /** Options for controlling bubble sizes. */
     sizeOptions?: SizeOptions;
     /**

package/dist/components/DonutChart/DonutChart.js

@@ -1,19 +1,12 @@
-import { defineComponent as V, useSlots as b, useTemplateRef as w, ref as T, createElementBlock as u, openBlock as p, Fragment as D, createElementVNode as n, createCommentVNode as m, createVNode as o, renderSlot as i, unref as l, withCtx as S, normalizeStyle as W, toDisplayString as B } from "vue";
-import { Donut as L } from "@unovis/ts";
+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 H, VisTooltip as N, VisDonut as $, VisBulletLegend as j } from "@unovis/vue";
-const z = {
+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" }
-}, A = { style: { display: "flex", "align-items": "center", padding: "10px 15px" } }, E = {
-  key: 0,
-  style: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    marginTop: "1rem"
-  }
-}, M = /* @__PURE__ */ V({
+}, j = { style: { display: "flex", "align-items": "center", padding: "10px 15px" } }, I = /* @__PURE__ */ w({
   __name: "DonutChart",
   props: {
     type: {},
@@ -22,78 +15,91 @@ const z = {
     height: {},
     radius: {},
     hideLegend: { type: Boolean },
+    legendPosition: { default: z.BottomCenter },
+    legendStyle: {},
     labels: {},
     padAngle: {}
   },
   emits: ["click"],
-  setup(c, { emit: g }) {
-    const f = g, r = c, h = b(), s = w("slotWrapper"), t = T(), y = (e) => e, v = r.type === R.Half;
-    function C(e) {
-      return t.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" ? "" : s.value ? s.value.innerHTML : "";
+    function V(t) {
+      return typeof window > "u" ? "" : u.value ? u.value.innerHTML : "";
     }
-    return (e, d) => (p(), u(D, null, [
-      n("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: d[0] || (d[0] = (a) => f("click", a, t.value))
+          justifyContent: S.value
+        })
       }, [
-        o(l(H), {
-          data: e.data,
-          height: e.height,
-          margin: {}
-        }, {
-          default: S(() => [
-            o(l(N), {
-              "horizontal-shift": 20,
-              "vertical-shift": 20,
-              triggers: {
-                [l(L).selectors.segment]: C
-              }
-            }, null, 8, ["triggers"]),
-            o(l($), {
-              value: y,
-              "corner-radius": e.radius,
-              "arc-width": e.arcWidth ?? 20,
-              color: r.labels.map((a) => a.color),
-              "angle-range": v ? [-1.5707963267948966, 1.5707963267948966] : [],
-              "pad-angle": r.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"]),
-        i(e.$slots, "default"),
-        n("div", z, [
-          l(h).tooltip ? i(e.$slots, "tooltip", {
-            key: 0,
-            values: t.value
-          }) : t.value ? i(e.$slots, "fallback", { key: 1 }, () => [
-            n("div", A, [
-              n("div", {
-                style: W({
-                  width: "0.5rem",
-                  height: "0.5rem",
-                  borderRadius: "9999px",
-                  marginRight: "0.5rem",
-                  backgroundColor: r.labels[t.value.index].color
-                })
-              }, null, 4),
-              n("div", null, B(t.value.data), 1)
-            ])
-          ]) : m("", !0)
-        ], 512)
-      ]),
-      e.hideLegend ? m("", !0) : (p(), u("div", E, [
-        o(l(j), { items: e.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 {
-  M 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,154 +1,53 @@
-import { defineComponent as N, computed as f, useSlots as P, useTemplateRef as O, ref as j, createElementBlock as p, openBlock as n, normalizeClass as w, normalizeStyle as k, createVNode as s, createCommentVNode as l, createElementVNode as M, unref as i, withCtx as W, createBlock as m, 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 S from "../Tooltip.js";
-import { VisXYContainer as Y, VisTooltip as H, VisLine as I, VisAxis as T, VisCrosshair as U, VisBulletLegend as q } from "@unovis/vue";
-import { LegendPosition as J } from "../../types.js";
-const Q = {
-  ref: "slotWrapper",
-  style: { display: "none" }
-}, te = /* @__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: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
+    xNumTicks: {},
     xExplicitTicks: {},
     minMaxTicksOnly: { type: Boolean },
-    yNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
-    hideTooltip: { type: Boolean },
+    yNumTicks: {},
     hideLegend: { type: Boolean },
+    hideTooltip: { type: Boolean },
     legendPosition: {},
-    xGridLine: { type: Boolean },
+    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(t, { emit: L }) {
-    const D = L, o = t, C = f(() => o.markerConfig ? $(o.markerConfig) : ""), B = P(), y = O("slotWrapper"), a = j();
-    function b(e) {
-      return typeof window > "u" ? "" : y.value ? y.value.innerHTML : "";
-    }
-    function V(e) {
-      return a.value = e, b();
-    }
-    const c = f(
-      () => o.legendPosition === J.Top
-    ), A = Object.values(o.categories).map(
-      (e, r) => `var(--vis-color${r})`
-    ), F = (e) => Object.values(o.categories)[e].color ?? A[e];
-    return (e, r) => (n(), p("div", {
-      style: k({
-        display: "flex",
-        flexDirection: c.value ? "column-reverse" : "column",
-        gap: "1rem"
-      }),
-      class: w({ markers: !!o.markerConfig }),
-      onClick: r[0] || (r[0] = (d) => D("click", d, a.value))
-    }, [
-      s(i(Y), {
-        data: e.data,
-        padding: e.padding,
-        height: e.height,
-        svgDefs: C.value,
-        yDomain: e.yDomain,
-        xDomain: e.xDomain
-      }, {
-        default: W(() => [
-          s(i(H), {
-            "horizontal-placement": i(v).Right,
-            "vertical-placement": i(v).Top
-          }, null, 8, ["horizontal-placement", "vertical-placement"]),
-          (n(!0), p(z, null, E(Object.keys(o.categories), (d, u) => (n(), m(i(I), {
-            key: u,
-            x: (g, x) => x,
-            y: (g) => g[d],
-            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(), m(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(), m(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(), m(i(U), G({ key: 2 }, e.crosshairConfig, { template: V }), null, 16))
-        ]),
-        _: 1
-      }, 8, ["data", "padding", "height", "svgDefs", "yDomain", "xDomain"]),
-      e.hideLegend ? l("", !0) : (n(), p("div", {
-        key: 0,
-        style: k({
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "flex-end",
-          paddingBottom: c.value ? "1rem" : void 0
-        })
-      }, [
-        s(i(q), {
-          items: Object.values(e.categories)
-        }, null, 8, ["items"])
-      ], 4)),
-      M("div", Q, [
-        i(B).tooltip ? h(e.$slots, "tooltip", {
-          key: 0,
-          values: a.value
-        }) : a.value ? h(e.$slots, "fallback", { key: 1 }, () => [
-          s(S, {
-            data: a.value,
-            categories: e.categories,
-            toolTipTitle: i(R)(a.value) ?? "",
-            yFormatter: o.yFormatter
-          }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
-        ]) : l("", !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 {
-  te as default
+  g as default
 };