vue-chrts 0.2.4 → 0.2.5-test.2

package/dist/components/AreaChart/AreaChart.js

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

package/dist/components/BarChart/BarChart.js

@@ -1,14 +1,14 @@
-import { defineComponent as C, useSlots as S, useTemplateRef as D, ref as N, computed as c, createElementBlock as y, openBlock as n, normalizeStyle as T, createVNode as g, createCommentVNode as m, createElementVNode as O, unref as i, withCtx as w, createBlock as u, Fragment as E, renderList as M, renderSlot as B } from "vue";
-import { Orientation as l, StackedBar as j, GroupedBar as z } from "@unovis/ts";
-import { getFirstPropertyValue as H } from "../../utils.js";
-import { useStackedGrouped as W } from "./stackedGroupedUtils.js";
-import { VisXYContainer as X, VisTooltip as Y, VisStackedBar as L, VisGroupedBar as $, VisAxis as A, VisBulletLegend as R } from "@unovis/vue";
-import q from "../Tooltip.js";
-import { LegendPosition as I } from "../../types.js";
-const U = {
+import { defineComponent as W, useSlots as X, useTemplateRef as Y, ref as j, computed as k, createElementBlock as v, openBlock as l, normalizeStyle as L, createVNode as b, createCommentVNode as f, createElementVNode as H, unref as a, withCtx as $, createBlock as c, Fragment as q, renderList as I, renderSlot as C } from "vue";
+import { Orientation as g, StackedBar as U, GroupedBar as J } from "@unovis/ts";
+import { getFirstPropertyValue as K } from "../../utils.js";
+import { useStackedGrouped as Q } from "./stackedGroupedUtils.js";
+import { VisXYContainer as Z, VisXYLabels as _, VisTooltip as ee, VisStackedBar as F, VisGroupedBar as te, VisAxis as V, VisBulletLegend as ae } from "@unovis/vue";
+import ie from "../Tooltip.js";
+import { LegendPosition as ne } from "../../types.js";
+const oe = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, ae = /* @__PURE__ */ C({
+}, ye = /* @__PURE__ */ W({
   __name: "BarChart",
   props: {
     data: {},
@@ -25,18 +25,19 @@ const U = {
     categories: {},
     xFormatter: {},
     yFormatter: {},
-    yNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
+    yNumTicks: {},
     minMaxTicksOnly: { type: Boolean },
-    xNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
+    xNumTicks: {},
     xExplicitTicks: {},
     yAxis: {},
-    groupPadding: {},
-    barPadding: {},
+    groupPadding: { default: 0 },
+    barPadding: { default: 0.2 },
     radius: {},
-    hideLegend: { type: Boolean },
+    hideLegend: { type: Boolean, default: !1 },
     hideTooltip: { type: Boolean, default: !1 },
-    orientation: { default: l.Vertical },
-    legendPosition: {},
+    orientation: { default: g.Vertical },
+    legendPosition: { default: ne.BottomCenter },
+    legendStyle: { default: void 0 },
     xDomainLine: { type: Boolean },
     yDomainLine: { type: Boolean },
     xTickLine: { type: Boolean },
@@ -47,137 +48,174 @@ const U = {
     hideYAxis: { type: Boolean },
     stackedGroupedSpacing: { default: 0.1 },
     stackAndGrouped: { type: Boolean },
+    valueLabel: {},
     xAxis: {}
   },
   emits: ["click"],
-  setup(t, { emit: V }) {
-    const x = V, a = t, G = S(), k = D("slotWrapper"), r = N();
-    if (!a.yAxis || a.yAxis.length === 0)
+  setup(e, { emit: G }) {
+    const S = G, t = e, O = X(), h = Y("slotWrapper"), u = j();
+    if (t.valueLabel && !t.xAxis)
+      throw new Error(
+        "BarChart: 'xAxis' prop is required when 'valueLabel' is enabled. Please provide an 'xAxis' to display value labels."
+      );
+    if (!t.yAxis || t.yAxis.length === 0)
       throw new Error("yAxis is required");
-    const f = c(() => a.yAxis.map((e) => (d) => d[e])), v = (e, d) => {
-      var o;
-      return (o = Object.values(a.categories)[d]) == null ? void 0 : o.color;
-    }, s = c(
-      () => W({
-        data: a.data,
-        categories: a.categories,
-        stackAndGrouped: a.stackAndGrouped,
-        xAxis: a.xAxis,
-        spacing: a.stackedGroupedSpacing
+    const A = k(() => t.yAxis.map((i) => (o) => o[i])), B = (i, o) => {
+      var n;
+      return (n = Object.values(t.categories)[o]) == null ? void 0 : n.color;
+    }, y = k(
+      () => Q({
+        data: t.data,
+        categories: t.categories,
+        stackAndGrouped: t.stackAndGrouped,
+        xAxis: t.xAxis,
+        spacing: t.stackedGroupedSpacing
       }).value
-    ), h = c(
-      () => a.legendPosition === I.Top
-    );
-    function b(e) {
-      return r.value = e, P();
+    ), w = k(() => t.legendPosition.startsWith("top")), D = k(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center");
+    function T(i) {
+      return u.value = i, E();
     }
-    function P(e) {
-      return typeof window > "u" ? "" : k.value ? k.value.innerHTML : "";
+    function E(i) {
+      return typeof window > "u" ? "" : h.value ? h.value.innerHTML : "";
     }
-    return (e, d) => (n(), y("div", {
-      style: T({
+    const P = t.yAxis.map((i) => (o) => o[i]), N = P.length, z = t.data.flatMap(
+      (i, o) => P.map((n, s) => ({
+        x: o,
+        y: Number(n(i) ?? 0),
+        itemIndex: s
+      }))
+    ), M = (i) => {
+      if (t.stacked || t.stackAndGrouped) return i.x;
+      const o = N;
+      if (o <= 1) return i.x;
+      const s = 1 - (t.groupPadding ?? 0), m = s / o, x = -s / 2, r = m * i.itemIndex + m / 2, p = 1 - (t.barPadding ?? 0), R = (x + r) * p;
+      return i.x + R;
+    };
+    return (i, o) => (l(), v("div", {
+      style: L({
         display: "flex",
-        flexDirection: h.value ? "column-reverse" : "column",
-        gap: "1rem"
+        flexDirection: w.value ? "column-reverse" : "column",
+        gap: "var(--vis-legend-spacing)"
       }),
-      onClick: d[0] || (d[0] = (o) => x("click", o, r.value))
+      onClick: o[0] || (o[0] = (n) => S("click", n, u.value))
     }, [
-      g(i(X), {
+      b(a(Z), {
         padding: e.padding,
         height: e.height
       }, {
-        default: w(() => [
-          g(i(Y), {
-            triggers: {
-              [i(z).selectors.bar]: b,
-              [i(j).selectors.bar]: b
-            }
-          }, null, 8, ["triggers"]),
-          e.stackAndGrouped ? (n(!0), y(E, { key: 0 }, M(s.value.states, (o) => (n(), u(i(L), {
-            key: o,
-            data: s.value.chartData,
-            x: (p, F) => F + s.value.positions[o],
-            y: s.value.bars[o],
-            color: s.value.colorFunctions[o],
-            "rounded-corners": e.radius ?? 0,
-            "group-padding": e.groupPadding ?? 0,
-            "bar-padding": e.barPadding,
-            orientation: e.orientation ?? i(l).Vertical
-          }, null, 8, ["data", "x", "y", "color", "rounded-corners", "group-padding", "bar-padding", "orientation"]))), 128)) : e.stacked ? (n(), u(i(L), {
-            key: 2,
-            data: e.data,
-            x: (o, p) => p,
-            y: f.value,
-            color: v,
-            "rounded-corners": e.radius ?? 0,
-            "group-padding": e.groupPadding ?? 0,
-            "bar-padding": e.barPadding ?? 0.2,
-            orientation: e.orientation ?? i(l).Vertical
-          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (n(), u(i($), {
-            key: 1,
-            data: e.data,
-            x: (o, p) => p,
-            y: f.value,
-            color: v,
-            "rounded-corners": e.radius ?? 0,
-            "group-padding": e.groupPadding ?? 0,
-            "bar-padding": e.barPadding ?? 0.2,
-            orientation: e.orientation ?? i(l).Vertical
-          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
-          e.hideXAxis ? m("", !0) : (n(), u(i(A), {
-            key: 3,
-            type: "x",
-            "tick-format": e.xFormatter,
-            label: e.xLabel,
-            "grid-line": e.xGridLine,
-            "domain-line": !!e.xDomainLine,
-            "tick-line": e.xTickLine,
-            "num-ticks": e.xNumTicks,
-            "tick-values": e.xExplicitTicks,
-            minMaxTicksOnly: e.minMaxTicksOnly
-          }, null, 8, ["tick-format", "label", "grid-line", "domain-line", "tick-line", "num-ticks", "tick-values", "minMaxTicksOnly"])),
-          e.hideYAxis ? m("", !0) : (n(), u(i(A), {
-            key: 4,
-            type: "y",
-            label: e.yLabel,
-            "grid-line": e.orientation !== i(l).Horizontal && e.yGridLine,
-            "domain-line": !!e.yDomainLine,
-            "tick-format": e.yFormatter,
-            "num-ticks": e.yNumTicks,
-            "tick-line": e.yTickLine
-          }, null, 8, ["label", "grid-line", "domain-line", "tick-format", "num-ticks", "tick-line"]))
-        ]),
+        default: $(() => {
+          var n, s, m, x;
+          return [
+            e.valueLabel ? (l(), c(a(_), {
+              key: 0,
+              data: a(z),
+              x: M,
+              y: (r) => {
+                var d;
+                return r.y + (((d = t.valueLabel) == null ? void 0 : d.labelSpacing) ?? 0);
+              },
+              label: (n = t.valueLabel) == null ? void 0 : n.label,
+              backgroundColor: ((s = t.valueLabel) == null ? void 0 : s.backgroundColor) ?? "transparent",
+              color: ((m = t.valueLabel) == null ? void 0 : m.color) ?? "red",
+              labelFontSize: (x = t.valueLabel) == null ? void 0 : x.labelFontSize
+            }, null, 8, ["data", "y", "label", "backgroundColor", "color", "labelFontSize"])) : f("", !0),
+            b(a(ee), {
+              triggers: {
+                [a(J).selectors.bar]: T,
+                [a(U).selectors.bar]: T
+              }
+            }, null, 8, ["triggers"]),
+            e.stackAndGrouped ? (l(!0), v(q, { key: 1 }, I(y.value.states, (r) => (l(), c(a(F), {
+              key: r,
+              data: y.value.chartData,
+              x: (d, p) => p + y.value.positions[r],
+              y: y.value.bars[r],
+              color: y.value.colorFunctions[r],
+              "rounded-corners": e.radius ?? 0,
+              "group-padding": e.groupPadding ?? 0,
+              "bar-padding": e.barPadding,
+              orientation: e.orientation ?? a(g).Vertical
+            }, null, 8, ["data", "x", "y", "color", "rounded-corners", "group-padding", "bar-padding", "orientation"]))), 128)) : e.stacked ? (l(), c(a(F), {
+              key: 3,
+              data: e.data,
+              x: (r, d) => d,
+              y: A.value,
+              color: B,
+              "rounded-corners": e.radius ?? 0,
+              "group-padding": e.groupPadding ?? 0,
+              "bar-padding": e.barPadding ?? 0.2,
+              orientation: e.orientation ?? a(g).Vertical
+            }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (l(), c(a(te), {
+              key: 2,
+              data: e.data,
+              x: (r, d) => d,
+              y: A.value,
+              color: B,
+              "rounded-corners": e.radius ?? 0,
+              "group-padding": e.groupPadding ?? 0,
+              "bar-padding": e.barPadding ?? 0.2,
+              orientation: e.orientation ?? a(g).Vertical
+            }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
+            e.hideXAxis ? f("", !0) : (l(), c(a(V), {
+              key: 4,
+              type: "x",
+              "tick-format": e.xFormatter,
+              label: e.xLabel,
+              "grid-line": e.xGridLine,
+              "domain-line": !!e.xDomainLine,
+              "tick-line": e.xTickLine,
+              "num-ticks": e.xNumTicks,
+              "tick-values": e.xExplicitTicks,
+              minMaxTicksOnly: e.minMaxTicksOnly
+            }, null, 8, ["tick-format", "label", "grid-line", "domain-line", "tick-line", "num-ticks", "tick-values", "minMaxTicksOnly"])),
+            e.hideYAxis ? f("", !0) : (l(), c(a(V), {
+              key: 5,
+              type: "y",
+              label: e.yLabel,
+              "grid-line": e.orientation !== a(g).Horizontal && e.yGridLine,
+              "domain-line": !!e.yDomainLine,
+              "tick-format": e.yFormatter,
+              "num-ticks": e.yNumTicks,
+              "tick-line": e.yTickLine
+            }, null, 8, ["label", "grid-line", "domain-line", "tick-format", "num-ticks", "tick-line"]))
+          ];
+        }),
         _: 1
       }, 8, ["padding", "height"]),
-      e.hideLegend ? m("", !0) : (n(), y("div", {
+      t.hideLegend ? f("", !0) : (l(), v("div", {
         key: 0,
-        style: T({
+        style: L({
           display: "flex",
-          alignItems: "center",
-          justifyContent: "flex-end",
-          paddingBottom: h.value ? "1rem" : void 0
+          justifyContent: D.value
         })
       }, [
-        g(i(R), {
-          items: Object.values(a.categories)
-        }, null, 8, ["items"])
+        b(a(ae), {
+          style: L([
+            t.legendStyle,
+            "display: flex; gap: var(--vis-legend-spacing);"
+          ]),
+          items: Object.values(t.categories).map((n) => ({
+            ...n,
+            color: Array.isArray(n.color) ? n.color[0] : n.color
+          }))
+        }, null, 8, ["style", "items"])
       ], 4)),
-      O("div", U, [
-        i(G).tooltip ? B(e.$slots, "tooltip", {
+      H("div", oe, [
+        a(O).tooltip ? C(i.$slots, "tooltip", {
           key: 0,
-          values: r.value
-        }) : r.value ? B(e.$slots, "fallback", { key: 1 }, () => [
-          g(q, {
-            data: r.value,
-            categories: a.categories,
-            toolTipTitle: i(H)(r.value) ?? "",
-            yFormatter: a.orientation === i(l).Horizontal ? a.xFormatter : a.yFormatter
+          values: u.value
+        }) : u.value ? C(i.$slots, "fallback", { key: 1 }, () => [
+          b(ie, {
+            data: u.value,
+            categories: t.categories,
+            toolTipTitle: a(K)(u.value) ?? "",
+            yFormatter: t.orientation === a(g).Horizontal ? t.xFormatter : t.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
-        ]) : m("", !0)
+        ]) : f("", !0)
       ], 512)
     ], 4));
   }
 });
 export {
-  ae as default
+  ye as default
 };

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

@@ -7,7 +7,7 @@ declare const _default: <T extends {}>(__VLS_props: NonNullable<Awaited<typeof _
     attrs: any;
     slots: {
         tooltip?(_: {
-            values: any;
+            values: T | undefined;
         }): any;
         fallback?(_: {}): any;
     };