vue-chrts 1.0.0 → 2.0.0-beta.1

package/dist/components/BarChart/BarChart.js

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

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

@@ -51,6 +51,10 @@ type BarChartPropsBase<T> = {
      * @returns {string} The formatted string representation of the tick.
      */
     yFormatter?: axisFormatter;
+    /**
+     * Use custom formatter for tooltip titles
+     */
+    tooltipTitleFormatter?: (data: T) => string | number;
     /**
      * The desired number of ticks on the y-axis.
      */

package/dist/components/BubbleChart/BubbleChart.js

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

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

@@ -90,6 +90,10 @@ export interface BubbleChartProps<T> {
      * @returns {string} The formatted string representation of the tick.
      */
     yFormatter?: axisFormatter;
+    /**
+     * Use custom formatter for tooltip titles
+     */
+    tooltipTitleFormatter?: (data: T) => string | number;
     /**
      * Optional position for the legend, if applicable.
      * See `LegendPosition` for available options.