vue-chrts 0.2.2-test.0 → 0.2.2-test.1

package/dist/components/BarChart/BarChart.js

@@ -1,4 +1,4 @@
-import { defineComponent as C, useSlots as D, useTemplateRef as N, ref as O, computed as T, createElementBlock as y, openBlock as n, normalizeStyle as v, createVNode as g, createCommentVNode as m, createElementVNode as S, unref as i, withCtx as w, createBlock as u, Fragment as E, renderList as M, renderSlot as B } from "vue";
+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";
@@ -8,7 +8,7 @@ import { LegendPosition as I } from "../../types.js";
 const U = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, oe = /* @__PURE__ */ C({
+}, ae = /* @__PURE__ */ C({
   __name: "BarChart",
   props: {
     data: {},
@@ -45,38 +45,42 @@ const U = {
     yGridLine: { type: Boolean, default: !0 },
     hideXAxis: { type: Boolean },
     hideYAxis: { type: Boolean },
+    stackedGroupedSpacing: { default: 0.1 },
     stackAndGrouped: { type: Boolean },
     xAxis: {}
   },
   emits: ["click"],
   setup(t, { emit: V }) {
-    const x = V, o = t, P = D(), c = N("slotWrapper"), r = O();
-    if (!o.yAxis || o.yAxis.length === 0)
+    const x = V, a = t, G = S(), k = D("slotWrapper"), r = N();
+    if (!a.yAxis || a.yAxis.length === 0)
       throw new Error("yAxis is required");
-    const k = T(() => o.yAxis.map((e) => (d) => d[e])), f = (e, d) => {
-      var a;
-      return (a = Object.values(o.categories)[d]) == null ? void 0 : a.color;
-    }, s = W({
-      data: o.data,
-      categories: o.categories,
-      stackAndGrouped: o.stackAndGrouped,
-      xAxis: o.xAxis
-    }), h = T(
-      () => o.legendPosition === I.Top
+    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
+      }).value
+    ), h = c(
+      () => a.legendPosition === I.Top
     );
     function b(e) {
-      return r.value = e, G();
+      return r.value = e, P();
     }
-    function G(e) {
-      return typeof window > "u" ? "" : c.value ? c.value.innerHTML : "";
+    function P(e) {
+      return typeof window > "u" ? "" : k.value ? k.value.innerHTML : "";
     }
     return (e, d) => (n(), y("div", {
-      style: v({
+      style: T({
         display: "flex",
         flexDirection: h.value ? "column-reverse" : "column",
         gap: "1rem"
       }),
-      onClick: d[0] || (d[0] = (a) => x("click", a, r.value))
+      onClick: d[0] || (d[0] = (o) => x("click", o, r.value))
     }, [
       g(i(X), {
         padding: e.padding,
@@ -89,22 +93,22 @@ const U = {
               [i(j).selectors.bar]: b
             }
           }, null, 8, ["triggers"]),
-          e.stackAndGrouped ? (n(!0), y(E, { key: 0 }, M(i(s).states, (a) => (n(), u(i(L), {
-            key: a,
-            data: i(s).chartData,
-            x: (p, F) => F + i(s).positions[a],
-            y: i(s).bars[a],
-            color: i(s).colorFunctions[a],
+          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 ?? 0.2,
+            "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: (a, p) => p,
-            y: k.value,
-            color: f,
+            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,
@@ -112,9 +116,9 @@ const U = {
           }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (n(), u(i($), {
             key: 1,
             data: e.data,
-            x: (a, p) => p,
-            y: k.value,
-            color: f,
+            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,
@@ -147,7 +151,7 @@ const U = {
       }, 8, ["padding", "height"]),
       e.hideLegend ? m("", !0) : (n(), y("div", {
         key: 0,
-        style: v({
+        style: T({
           display: "flex",
           alignItems: "center",
           justifyContent: "flex-end",
@@ -155,19 +159,19 @@ const U = {
         })
       }, [
         g(i(R), {
-          items: Object.values(o.categories)
+          items: Object.values(a.categories)
         }, null, 8, ["items"])
       ], 4)),
-      S("div", U, [
-        i(P).tooltip ? B(e.$slots, "tooltip", {
+      O("div", U, [
+        i(G).tooltip ? B(e.$slots, "tooltip", {
           key: 0,
           values: r.value
         }) : r.value ? B(e.$slots, "fallback", { key: 1 }, () => [
           g(q, {
             data: r.value,
-            categories: o.categories,
+            categories: a.categories,
             toolTipTitle: i(H)(r.value) ?? "",
-            yFormatter: o.orientation === i(l).Horizontal ? o.xFormatter : o.yFormatter
+            yFormatter: a.orientation === i(l).Horizontal ? a.xFormatter : a.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
         ]) : m("", !0)
       ], 512)
@@ -175,5 +179,5 @@ const U = {
   }
 });
 export {
-  oe as default
+  ae as default
 };

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

@@ -6,6 +6,7 @@ export interface StackedGroupedConfig<T> {
     }>;
     stackAndGrouped: boolean;
     xAxis?: keyof T;
+    spacing?: number;
 }
 export interface StackedGroupedResult<T> {
     states: string[];

package/dist/components/BarChart/stackedGroupedUtils.js

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

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

@@ -133,6 +133,7 @@ type BarChartPropsBase<T> = {
      * If `true`, hide the y-axis.
      */
     hideYAxis?: boolean;
+    stackedGroupedSpacing?: number;
 };
 type BarChartPropsStackAndGrouped<T> = BarChartPropsBase<T> & {
     stackAndGrouped: true;

package/package.json

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