vue-chrts 0.2.3 → 0.2.5-test.1

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;
     };

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

@@ -2,7 +2,7 @@ import { ComputedRef } from 'vue';
 export interface StackedGroupedConfig<T> {
     data: T[];
     categories: Record<string, {
-        color?: string;
+        color?: string | Array<string>;
     }>;
     stackAndGrouped: boolean;
     xAxis?: keyof T;

package/dist/components/BarChart/stackedGroupedUtils.js

@@ -2,11 +2,11 @@ import { computed as u } from "vue";
 import { flattenData as i } from "../../utils.js";
 function g(t) {
   return u(() => {
-    const e = p(t.categories), o = f(t.categories, e), r = d(o, t.categories), c = l(o), n = m(r), s = h(e, t.spacing), a = t.stackAndGrouped ? i(t.data, t.xAxis) : t.data;
+    const r = f(t.categories), e = p(t.categories, r), o = l(e, t.categories), c = d(e), n = m(o), s = y(r, t.spacing), a = t.stackAndGrouped ? i(t.data, t.xAxis) : t.data;
     return {
-      states: e,
-      groupedByState: o,
-      colors: r,
+      states: r,
+      groupedByState: e,
+      colors: o,
       bars: c,
       colorFunctions: n,
       positions: s,
@@ -14,51 +14,52 @@ function g(t) {
     };
   });
 }
-function p(t) {
-  const e = /* @__PURE__ */ new Set();
-  return Object.keys(t).forEach((r) => {
-    const c = r.match(/([A-Z][a-z]+)$/);
-    c && e.add(c[1]);
-  }), Array.from(e);
+function f(t) {
+  const r = /* @__PURE__ */ new Set();
+  return Object.keys(t).forEach((o) => {
+    const c = o.match(/([A-Z][a-z]+)$/);
+    c && r.add(c[1]);
+  }), Array.from(r);
 }
-function f(t, e) {
-  const o = {};
-  return e.forEach((r) => {
-    o[r] = Object.keys(t).filter(
-      (c) => c.endsWith(r)
+function p(t, r) {
+  const e = {};
+  return r.forEach((o) => {
+    e[o] = Object.keys(t).filter(
+      (c) => c.endsWith(o)
     );
-  }), o;
-}
-function d(t, e) {
-  const o = {};
-  return Object.entries(t).forEach(([r, c]) => {
-    o[r] = c.map((n) => {
-      var s;
-      return ((s = e[n]) == null ? void 0 : s.color) ?? "#ccc";
-    });
-  }), o;
+  }), e;
 }
-function l(t) {
+function l(t, r) {
   const e = {};
-  return Object.entries(t).forEach(([o, r]) => {
-    e[o] = r.map((c) => {
-      const n = c.replace(o, "").toLowerCase();
-      return (s) => s[n + o];
+  return Object.entries(t).forEach(([o, c]) => {
+    e[o] = c.map((n) => {
+      var a;
+      const s = (a = r[n]) == null ? void 0 : a.color;
+      return Array.isArray(s) ? s[0] ?? "#ccc" : s ?? "#ccc";
     });
   }), e;
 }
+function d(t) {
+  const r = {};
+  return Object.entries(t).forEach(([e, o]) => {
+    r[e] = o.map((c) => {
+      const n = c.replace(e, "").toLowerCase();
+      return (s) => s[n + e];
+    });
+  }), r;
+}
 function m(t) {
-  const e = {};
-  return Object.entries(t).forEach(([o, r]) => {
-    e[o] = (c, n) => r[n] ?? "#ccc";
-  }), e;
+  const r = {};
+  return Object.entries(t).forEach(([e, o]) => {
+    r[e] = (c, n) => o[n] ?? "#ccc";
+  }), r;
 }
-function h(t, e = 0.4) {
-  const o = t.length, r = {};
+function y(t, r = 0.4) {
+  const e = t.length, o = {};
   return t.forEach((c, n) => {
-    const s = (n - (o - 1) / 2) * e;
-    r[c] = s;
-  }), r;
+    const s = (n - (e - 1) / 2) * r;
+    o[c] = s;
+  }), o;
 }
 export {
   g as useStackedGrouped

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

@@ -66,7 +66,7 @@ type BarChartPropsBase<T> = {
     /**
      * Force specific ticks on the x-axis.
      */
-    xExplicitTicks?: number;
+    xExplicitTicks?: (number | string | Date)[];
     /**
      * An array of property keys from the data object type 'T' to be used for the y-axis values.
      */
@@ -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 {};