vue-chrts 0.2.5 → 1.0.0-test.1

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 u, createElementBlock as y, openBlock as s, normalizeClass as w, normalizeStyle as k, createVNode as m, createCommentVNode as d, createElementVNode as X, unref as n, withCtx as z, createBlock as c, Fragment as h, renderList as R, mergeProps as f, renderSlot as T } from "vue";
+import { Position as C, CurveType as L } 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({
+}, ie = 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 },
@@ -40,82 +46,102 @@ const ie = {
     crosshairConfig: { default: () => ({
       color: "#666"
     }) },
+    xAxisConfig: {},
+    yAxisConfig: {},
     yDomain: {},
     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) => `
+  setup(D, { emit: b }) {
+    const B = b, t = D, O = W(), v = E("slotWrapper"), p = M(), g = u(() => {
+      const e = Object.values(t.categories).map(
+        (a, i) => `var(--vis-color${i})`
+      );
+      return Object.values(t.categories).map(
+        (a, i) => a.color ?? e[i]
+      );
+    }), V = u(() => t.markerConfig ? Y(t.markerConfig) : ""), x = u(() => t.legendPosition.startsWith("top")), F = u(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center"), G = u(() => {
+      const e = (i, o) => {
+        var r;
+        return `
     <linearGradient id="gradient${i}-${o}" gradientTransform="rotate(90)">
-      <stop offset="0%" stop-color="${o}" stop-opacity="1" />
+      ${((r = t.gradientStops) == null ? void 0 : r.map(
+          (l) => `<stop offset="${l.offset}" stop-color="${o}" stop-opacity="${l.stopOpacity}" />`
+        ).join("")) ?? ""}
       <stop offset="100%" stop-color="${o}" stop-opacity="0" />
     </linearGradient>
-  `, l = (i, o) => `
+  `;
+      }, a = (i, o) => {
+        var r;
+        return `
     <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" />
+
+    ${((r = t.gradientStops) == null ? void 0 : r.map(
+          (l) => `
+      <stop offset="${l.offset}" style="stop-color:var(${o});stop-opacity:${l.stopOpacity}" />
+    `
+        ).join("")) ?? ""}
     </linearGradient>
   `;
-      return f.value.map(
-        (i, o) => i != null && i.includes("#") ? e(o, i) : l(o, i ?? F)
+      };
+      return g.value.map(
+        (i, o) => i != null && i.includes("#") ? e(o, i) : a(o, i ?? $)
       ).join("");
     });
     function P(e) {
-      var l;
+      var a;
       return {
         y: (i) => Number(i[e]),
-        color: ((l = n.categories[e]) == null ? void 0 : l.color) ?? F
+        color: ((a = t.categories[e]) == null ? void 0 : a.color) ?? $
       };
     }
-    function W(e) {
-      return typeof window > "u" ? "" : h.value ? h.value.innerHTML : "";
+    function S(e) {
+      return typeof window > "u" ? "" : v.value ? v.value.innerHTML : "";
     }
-    function M(e) {
-      return s.value = e, W();
+    function j(e) {
+      return p.value = e, S();
     }
-    return (e, l) => (a(), u("div", {
-      style: T({
+    return (e, a) => (s(), y("div", {
+      style: k({
         display: "flex",
-        flexDirection: g.value ? "column-reverse" : "column"
+        flexDirection: x.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: !!t.markerConfig }),
+      onClick: a[0] || (a[0] = (i) => B("click", i, p.value))
     }, [
-      m(t(K), {
+      m(n(q), {
         data: e.data,
         height: e.height,
         padding: e.padding,
-        "svg-defs": E.value + N.value,
+        "svg-defs": G.value + V.value,
         "y-domain": e.yDomain,
         "x-domain": e.xDomain
       }, {
-        default: x(() => [
-          e.hideTooltip ? d("", !0) : (a(), c(t(q), {
+        default: z(() => [
+          e.hideTooltip ? d("", !0) : (s(), c(n(J), {
             key: 0,
-            "horizontal-placement": t(A).Right,
-            "vertical-placement": t(A).Top
+            "horizontal-placement": n(C).Right,
+            "vertical-placement": n(C).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
+          (s(!0), y(h, null, R(Object.keys(t.categories), (i, o) => (s(), y(h, { key: i }, [
+            m(n(K), f({
+              x: (r, l) => l
             }, { 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,
+              color: `url(#gradient${o}-${g.value[o]})`,
+              opacity: e.hideArea ? 0 : ie,
+              "curve-type": e.curveType ?? n(L).MonotoneX
+            }), null, 16, ["x", "color", "opacity", "curve-type"]),
+            m(n(Q), {
+              x: (r, l) => l,
+              y: (r) => r[i],
+              color: g.value[o],
+              "curve-type": e.curveType ?? n(L).MonotoneX,
               "line-width": e.lineWidth,
               lineDashArray: e.lineDashArray ? e.lineDashArray[o] : void 0
             }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"])
           ], 64))), 128)),
-          e.hideXAxis ? d("", !0) : (a(), c(t(B), {
+          e.hideXAxis ? d("", !0) : (s(), c(n(A), f({
             key: 1,
             type: "x",
             label: e.xLabel,
@@ -127,8 +153,8 @@ const ie = {
             "domain-line": e.xDomainLine,
             "tick-line": e.xTickLine,
             "min-max-ticks-only": e.minMaxTicksOnly
-          }, null, 8, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only"])),
-          e.hideYAxis ? d("", !0) : (a(), c(t(B), {
+          }, e.xAxisConfig), null, 16, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only"])),
+          e.hideYAxis ? d("", !0) : (s(), c(n(A), f({
             key: 2,
             type: "y",
             label: e.yLabel,
@@ -137,35 +163,39 @@ const ie = {
             "grid-line": e.yGridLine,
             "domain-line": e.yDomainLine,
             "tick-line": e.yTickLine
-          }, null, 8, ["label", "num-ticks", "tick-format", "grid-line", "domain-line", "tick-line"])),
-          e.hideTooltip ? d("", !0) : (a(), c(t(Z), C({ key: 3 }, e.crosshairConfig, { template: M }), null, 16))
+          }, e.yAxisConfig), null, 16, ["label", "num-ticks", "tick-format", "grid-line", "domain-line", "tick-line"])),
+          e.hideTooltip ? d("", !0) : (s(), c(n(Z), f({ 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", {
+      t.hideLegend ? d("", !0) : (s(), y("div", {
         key: 0,
-        style: T({
+        style: k({
           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"])
+        m(n(I), {
+          style: k([
+            t.legendStyle,
+            "display: flex; gap: var(--vis-legend-spacing);"
+          ]),
+          items: Object.values(t.categories).map((i) => ({
+            ...i,
+            color: Array.isArray(i.color) ? i.color[0] : i.color
+          }))
+        }, null, 8, ["style", "items"])
       ], 4)),
-      X("div", ie, [
-        t(O).tooltip ? D(e.$slots, "tooltip", {
+      X("div", ee, [
+        n(O).tooltip ? T(e.$slots, "tooltip", {
           key: 0,
-          values: s.value
-        }) : s.value ? D(e.$slots, "fallback", { key: 1 }, () => [
+          values: p.value
+        }) : p.value ? T(e.$slots, "fallback", { key: 1 }, () => [
           m(H, {
-            data: s.value,
+            data: p.value,
             categories: e.categories,
-            toolTipTitle: t(Y)(s.value) ?? "",
-            yFormatter: n.yFormatter
+            toolTipTitle: n(U)(p.value) ?? "",
+            yFormatter: t.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
         ]) : d("", !0)
       ], 512)
@@ -173,5 +203,5 @@ const ie = {
   }
 });
 export {
-  de as default
+  se as default
 };

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

@@ -1,4 +1,4 @@
-import { axisFormatter, CrosshairConfig, LegendPosition, MarkerConfig } from '../../types';
+import { axisFormatter, CrosshairConfig, LegendPosition, MarkerConfig, AxisConfig } from '../../types';
 import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
 export interface AreaChartProps<T> {
     /**
@@ -39,17 +39,11 @@ export interface AreaChartProps<T> {
      */
     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.
+     * A function that formats the x-axis tick labels.
      */
     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.
+     * A function that formats the y-axis tick labels.
      */
     yFormatter?: axisFormatter;
     /**
@@ -57,6 +51,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 +99,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.
      */
@@ -130,6 +139,14 @@ export interface AreaChartProps<T> {
      * Crosshair configuration object for customizing the appearance of the crosshair line.
      */
     crosshairConfig?: CrosshairConfig;
+    /**
+     * Axis configuration object for customizing the appearance of the axes.
+     */
+    xAxisConfig?: AxisConfig;
+    /**
+     * Axis configuration object for customizing the appearance of the axes.
+     */
+    yAxisConfig?: AxisConfig;
     /**
      * The domain for the y-axis, specified as a tuple of two values.
      */

package/dist/components/BarChart/BarChart.js

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

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

@@ -1,9 +1,8 @@
 import { ComputedRef } from 'vue';
+import { BulletLegendItemInterface } from '../../types';
 export interface StackedGroupedConfig<T> {
     data: T[];
-    categories: Record<string, {
-        color?: string | Array<string>;
-    }>;
+    categories: Record<string, BulletLegendItemInterface>;
     stackAndGrouped: boolean;
     xAxis?: keyof T;
     spacing?: number;