vue-chrts 2.0.0-beta.3 → 2.0.0-beta.4

package/dist/components/AreaChart/AreaChart.js

@@ -2,12 +2,12 @@ import { defineComponent as W, useSlots as E, useTemplateRef as M, ref as w, com
 import { Position as C, CurveType as A } from "@unovis/ts";
 import { createMarkers as z } from "../../utils.js";
 import U from "../Tooltip.js";
-import { VisXYContainer as H, VisTooltip as q, VisArea as J, VisLine as K, VisAxis as D, VisCrosshair as Q, VisBulletLegend as Z } from "@unovis/vue";
+import { VisXYContainer as H, VisTooltip as q, VisArea as J, VisLine as K, VisAxis as $, VisCrosshair as Q, VisBulletLegend as Z } from "@unovis/vue";
 import { LegendPosition as I } from "../../types.js";
 const _ = ["id"], ee = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, te = 0.5, $ = "#3b82f6", se = /* @__PURE__ */ W({
+}, te = 0.5, D = "#3b82f6", se = /* @__PURE__ */ W({
   __name: "AreaChart",
   props: {
     data: {},
@@ -89,14 +89,14 @@ const _ = ["id"], ee = {
   `;
       };
       return v.value.map(
-        (i, t) => i != null && i.includes("#") ? a(t, i) : l(t, i ?? $)
+        (i, t) => i != null && i.includes("#") ? a(t, i) : l(t, i ?? D)
       ).join("");
     });
     function j(a) {
       var l;
       return {
         y: (i) => Number(i[a]),
-        color: ((l = n.categories[a]) == null ? void 0 : l.color) ?? $
+        color: ((l = n.categories[a]) == null ? void 0 : l.color) ?? D
       };
     }
     function N(a) {
@@ -147,7 +147,7 @@ const _ = ["id"], ee = {
                 lineDashArray: e.lineDashArray ? e.lineDashArray[r] : void 0
               }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"])
             ], 64))), 128)),
-            e.hideXAxis ? d("", !0) : (c(), g(o(D), k({
+            e.hideXAxis ? d("", !0) : (c(), g(o($), k({
               key: 1,
               type: "x",
               label: e.xLabel,
@@ -160,7 +160,7 @@ const _ = ["id"], ee = {
               "tick-line": e.xTickLine,
               "min-max-ticks-only": e.minMaxTicksOnly
             }, 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) : (c(), g(o(D), k({
+            e.hideYAxis ? d("", !0) : (c(), g(o($), k({
               key: 2,
               type: "y",
               label: e.yLabel,

package/dist/components/BarChart/BarChart.js

@@ -1,4 +1,4 @@
-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 q, createBlock as c, Fragment as $, renderList as I, mergeProps as C, renderSlot as F } from "vue";
+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";
@@ -102,7 +102,7 @@ const ne = {
         padding: e.padding,
         height: e.height
       }, {
-        default: q(() => {
+        default: $(() => {
           var o, s, m, f;
           return [
             e.valueLabel ? (d(), c(a(Z), {
@@ -130,7 +130,7 @@ const ne = {
                 }
               }
             }, null, 8, ["triggers"]),
-            e.stackAndGrouped ? (d(!0), p($, { key: 1 }, I(y.value.states, (n) => (d(), c(a(G), {
+            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],

package/dist/components/BubbleChart/BubbleChart.js

@@ -1,9 +1,9 @@
-import { defineComponent as O, useSlots as S, useTemplateRef as D, ref as R, computed as p, createElementBlock as g, 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 { 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 j, VisAxis as L, VisBulletLegend as X } from "@unovis/vue";
-import { LegendPosition as Y } from "../../types.js";
-import $ from "../Tooltip.js";
-const q = {
+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 _ = {
   ref: "slotWrapper",
   class: "hidden"
 }, Q = /* @__PURE__ */ O({
@@ -28,7 +28,7 @@ const q = {
     xFormatter: {},
     yFormatter: {},
     tooltipTitleFormatter: {},
-    legendPosition: { default: Y.BottomCenter },
+    legendPosition: { default: X.BottomCenter },
     legendStyle: { default: void 0 },
     sizeOptions: {},
     xDomainLine: { type: Boolean, default: !0 },
@@ -70,8 +70,8 @@ const q = {
     }
     const z = {
       [M.selectors.point]: F
-    }, P = p(() => e.legendPosition.startsWith("top")), N = p(() => e.legendPosition.includes("left") ? "flex-start" : e.legendPosition.includes("right") ? "flex-end" : "center");
-    return (i, a) => (l(), g("div", {
+    }, 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: P.value ? "column-reverse" : "column",
@@ -90,7 +90,7 @@ const q = {
             key: 0,
             triggers: z
           })),
-          s(t(j), {
+          s(t($), {
             x: t(v),
             y: t(b),
             color: A,
@@ -125,14 +125,14 @@ const q = {
         ]),
         _: 1
       }, 8, ["data", "height", "padding"]),
-      e.hideLegend ? r("", !0) : (l(), g("div", {
+      e.hideLegend ? r("", !0) : (l(), p("div", {
         key: 0,
         style: d({
           display: "flex",
           justifyContent: N.value
         })
       }, [
-        s(t(X), {
+        s(t(j), {
           class: "bulletLegendOverrides",
           style: d([
             e.legendStyle,
@@ -144,12 +144,12 @@ const q = {
           }))
         }, null, 8, ["style", "items"])
       ], 4)),
-      w("div", q, [
+      w("div", _, [
         t(T).tooltip ? k(i.$slots, "tooltip", {
           key: 0,
           values: n.value
         }) : n.value ? k(i.$slots, "fallback", { key: 1 }, () => [
-          s($, {
+          s(Y, {
             data: n.value,
             categories: e.categories || {},
             "title-formatter": e.tooltipTitleFormatter,

package/dist/components/DonutChart/DonutChart.js

@@ -1,8 +1,8 @@
-import { defineComponent as B, useSlots as D, useTemplateRef as P, ref as W, computed as s, createElementBlock as f, openBlock as m, normalizeStyle as d, createVNode as a, createCommentVNode as v, createElementVNode as y, unref as r, withCtx as b, renderSlot as u } from "vue";
+import { defineComponent as B, useSlots as D, useTemplateRef as P, ref as W, computed as s, createElementBlock as p, openBlock as m, normalizeStyle as d, createVNode as a, createCommentVNode as v, createElementVNode as y, unref as r, withCtx as b, renderSlot as u } from "vue";
 import { Donut as N } from "@unovis/ts";
-import { DonutType as j } from "./types.js";
-import z from "../Tooltip.js";
-import { VisSingleContainer as H, VisTooltip as $, VisDonut as E, VisBulletLegend as F } from "@unovis/vue";
+import { DonutType as $ } from "./types.js";
+import j from "../Tooltip.js";
+import { VisSingleContainer as z, VisTooltip as H, VisDonut as E, VisBulletLegend as F } from "@unovis/vue";
 import { LegendPosition as O } from "../../types.js";
 const R = { style: {
   position: "absolute",
@@ -12,7 +12,7 @@ const R = { style: {
 } }, M = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, Q = /* @__PURE__ */ B({
+}, K = /* @__PURE__ */ B({
   __name: "DonutChart",
   props: {
     type: {},
@@ -29,7 +29,7 @@ const R = { style: {
   },
   emits: ["click"],
   setup(l, { emit: h }) {
-    const C = h, t = l, k = D(), c = P("slotWrapper"), i = W(), T = (e) => e, V = t.type === j.Half;
+    const C = h, t = l, k = D(), c = P("slotWrapper"), i = W(), T = (e) => e, V = t.type === $.Half;
     function x(e) {
       const o = Object.values(t.categories)[e.index].name;
       return i.value = {
@@ -40,12 +40,12 @@ const R = { style: {
     function A() {
       return typeof window > "u" ? "" : c.value ? c.value.innerHTML : "";
     }
-    const L = s(() => t.legendPosition.includes("top")), S = s(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center"), g = (e, o = "#ccc") => e ? Array.isArray(e) ? e[0] || o : e : o, p = s(() => Object.values(t.categories)), w = (e, o) => {
-      const n = p.value[o];
+    const L = s(() => t.legendPosition.includes("top")), S = s(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center"), g = (e, o = "#ccc") => e ? Array.isArray(e) ? e[0] || o : e : o, f = s(() => Object.values(t.categories)), w = (e, o) => {
+      const n = f.value[o];
       if (n)
         return g(n.color);
     };
-    return (e, o) => (m(), f("div", {
+    return (e, o) => (m(), p("div", {
       style: d({
         display: "flex",
         flexDirection: L.value ? "column-reverse" : "column",
@@ -53,13 +53,13 @@ const R = { style: {
       }),
       onClick: o[0] || (o[0] = (n) => C("click", n, i.value))
     }, [
-      a(r(H), {
+      a(r(z), {
         data: l.data,
         height: l.height,
         margin: {}
       }, {
         default: b(() => [
-          a(r($), {
+          a(r(H), {
             "horizontal-shift": 20,
             "vertical-shift": 20,
             triggers: {
@@ -80,7 +80,7 @@ const R = { style: {
         ]),
         _: 3
       }, 8, ["data", "height"]),
-      t.hideLegend ? v("", !0) : (m(), f("div", {
+      t.hideLegend ? v("", !0) : (m(), p("div", {
         key: 0,
         style: d({
           display: "flex",
@@ -92,7 +92,7 @@ const R = { style: {
             t.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
           ]),
-          items: p.value.map((n) => ({
+          items: f.value.map((n) => ({
             ...n,
             color: g(n.color)
           }))
@@ -103,7 +103,7 @@ const R = { style: {
           key: 0,
           values: i.value
         }) : i.value ? u(e.$slots, "fallback", { key: 1 }, () => [
-          a(z, {
+          a(j, {
             data: i.value,
             categories: t.categories,
             "title-formatter": t.tooltipTitleFormatter
@@ -114,5 +114,5 @@ const R = { style: {
   }
 });
 export {
-  Q as default
+  K as default
 };

package/dist/components/GanttChart/GanttChart.js

@@ -2,8 +2,8 @@ import { defineComponent as B, useSlots as V, useTemplateRef as w, ref as A, com
 import { Timeline as x } from "@unovis/ts";
 import { dateFormatter as S } from "../../utils.js";
 import N from "../Tooltip.js";
-import { VisXYContainer as j, VisTimeline as O, VisTooltip as D, VisAxis as G, VisBulletLegend as M } from "@unovis/vue";
-import { LegendPosition as $ } from "../../types.js";
+import { VisXYContainer as j, VisTimeline as O, VisTooltip as $, VisAxis as D, VisBulletLegend as G } from "@unovis/vue";
+import { LegendPosition as M } from "../../types.js";
 const I = /* @__PURE__ */ B({
   __name: "GanttChart",
   props: {
@@ -23,7 +23,7 @@ const I = /* @__PURE__ */ B({
     crosshairConfig: {},
     lineWidth: { default: 12 },
     rowHeight: { default: 24 },
-    legendPosition: { default: $.TopRight },
+    legendPosition: { default: M.TopRight },
     legendStyle: {},
     hideLegend: { type: Boolean },
     xTickLine: { type: Boolean },
@@ -80,7 +80,7 @@ const I = /* @__PURE__ */ B({
             showLabels: e.showLabels,
             onClick: L
           }, null, 8, ["x", "length", "lineWidth", "rowHeight", "type", "color", "labelWidth", "showLabels"]),
-          n(o(D), {
+          n(o($), {
             triggers: {
               [o(x).selectors.label]: (t) => {
                 var m;
@@ -88,7 +88,7 @@ const I = /* @__PURE__ */ B({
               }
             }
           }, null, 8, ["triggers"]),
-          n(o(G), P({
+          n(o(D), P({
             type: "x",
             tickFormat: i.xTickFormat || o(S),
             numTicks: i.xNumTicks,
@@ -106,7 +106,7 @@ const I = /* @__PURE__ */ B({
           justifyContent: b.value
         })
       }, [
-        n(o(M), {
+        n(o(G), {
           style: d([
             e.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"

package/dist/components/Tooltip.js

@@ -1,7 +1,74 @@
-import o from "./Tooltip2.js";
-/* empty css         */
-import t from "../_virtual/_plugin-vue_export-helper.js";
-const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-2385aa2d"]]);
+import { defineComponent as F, computed as m, createElementBlock as n, openBlock as s, createElementVNode as r, toDisplayString as c, Fragment as p, renderList as z, normalizeStyle as w } from "vue";
+import { getFirstPropertyValue as B } from "../utils.js";
+const C = /* @__PURE__ */ F({
+  __name: "Tooltip",
+  props: {
+    data: {},
+    categories: {},
+    titleFormatter: { type: Function },
+    yFormatter: { type: Function }
+  },
+  setup(l) {
+    const t = l, v = m(
+      () => t.titleFormatter ? t.titleFormatter(t.data) : B(t.data)
+    ), d = ["_index", "_stacked", "_ending"], g = m(() => Object.entries(t.data ?? []).filter(
+      ([e, a]) => !d.includes(e) && Object.keys(t.categories).includes(e)
+    )), u = {
+      display: "flex",
+      flexDirection: "column"
+    }, f = {
+      color: "var(--vis-tooltip-title-color, #000)",
+      textTransform: "var(--vis-tooltip-title-text-transform, capitalize)",
+      borderBottom: "var(--vis-tooltip-title-border-bottom, 1px solid #e5e7eb)",
+      padding: "var(--vis-tooltip-title-padding, 0.75rem 0.75rem 0.5rem 0.75rem)",
+      margin: "var(--vis-tooltip-title-margin, 0 0 0.25rem 0)",
+      fontSize: "var(--vis-tooltip-title-font-size, 0.875rem)",
+      lineHeight: "var(--vis-tooltip-title-line-height, 100%)",
+      fontWeight: "var(--vis-tooltip-title-font-weight, 600)"
+    }, y = {
+      display: "grid",
+      gridTemplateColumns: "auto 1fr auto",
+      alignItems: "center",
+      gap: "var(--vis-tooltip-content-gap, 0.25rem 0.5rem)",
+      padding: "var(--vis-tooltip-content-padding, 0 0.75rem 0.5rem 0.75rem)"
+    }, h = {
+      fontWeight: "var(--vis-tooltip-label-font-weight, 400)",
+      fontSize: "var(--vis-tooltip-label-font-size, 0.875rem)",
+      color: "var(--vis-tooltip-label-color, inherit)",
+      margin: "var(--vis-tooltip-label-margin, 0 1rem 0 0)",
+      whiteSpace: "nowrap"
+    }, b = {
+      fontSize: "var(--vis-tooltip-value-font-size, 0.875rem)",
+      fontWeight: "var(--vis-tooltip-value-font-weight, 600)",
+      color: "var(--vis-tooltip-value-color, inherit)",
+      textAlign: "right",
+      fontVariantNumeric: "tabular-nums"
+    }, x = (e, a) => {
+      var o, i;
+      return {
+        width: "8px",
+        height: "8px",
+        aspectRatio: "1",
+        borderRadius: "var(--vis-tooltip-dot-border-radius, 4px)",
+        margin: "var(--vis-tooltip-dot-margin, 0)",
+        flexShrink: "0",
+        backgroundColor: typeof ((o = t.categories[e]) == null ? void 0 : o.color) == "string" && ((i = t.categories[e]) != null && i.color) ? t.categories[e].color : `var(--vis-color${a})`
+      };
+    };
+    return (e, a) => (s(), n("div", { style: u }, [
+      r("div", { style: f }, c(v.value), 1),
+      r("div", { style: y }, [
+        (s(!0), n(p, null, z(g.value, ([o, i], S) => (s(), n(p, { key: o }, [
+          r("span", {
+            style: w(x(o, S))
+          }, null, 4),
+          r("span", { style: h }, c(l.categories[o].name), 1),
+          r("span", { style: b }, c(l.yFormatter ? l.yFormatter(i) : i), 1)
+        ], 64))), 128))
+      ])
+    ]));
+  }
+});
 export {
-  m as default
+  C as default
 };

package/dist/components/Tooltip2.js

@@ -1,42 +1,4 @@
-import { defineComponent as y, computed as m, createElementBlock as r, openBlock as a, createElementVNode as i, toDisplayString as l, Fragment as _, renderList as f, normalizeStyle as h } from "vue";
-import { getFirstPropertyValue as b } from "../utils.js";
-const x = { class: "vis-tooltip" }, B = { class: "vis-tooltip-title" }, E = { class: "vis-tooltip-content" }, j = { class: "vis-tooltip-label" }, k = { class: "vis-tooltip-value" }, O = /* @__PURE__ */ y({
-  __name: "Tooltip",
-  props: {
-    data: {},
-    categories: {},
-    titleFormatter: { type: Function },
-    yFormatter: { type: Function }
-  },
-  setup(t) {
-    const e = t, u = m(
-      () => e.titleFormatter ? e.titleFormatter(e.data) : b(e.data)
-    ), v = ["_index", "_stacked", "_ending"], p = m(() => Object.entries(e.data ?? []).filter(
-      ([s, g]) => !v.includes(s) && Object.keys(e.categories).includes(s)
-    ));
-    return (s, g) => (a(), r("div", x, [
-      i("div", B, l(u.value), 1),
-      i("div", E, [
-        (a(!0), r(_, null, f(p.value, ([o, n], F) => {
-          var c, d;
-          return a(), r("div", {
-            key: o,
-            class: "vis-tooltip-entry"
-          }, [
-            i("span", {
-              class: "vis-tooltip-dot",
-              style: h({
-                backgroundColor: typeof ((c = t.categories[o]) == null ? void 0 : c.color) == "string" && ((d = t.categories[o]) != null && d.color) ? t.categories[o].color : `var(--vis-color${F})`
-              })
-            }, null, 4),
-            i("span", j, l(t.categories[o].name), 1),
-            i("span", k, l(t.yFormatter ? t.yFormatter(n) : n), 1)
-          ]);
-        }), 128))
-      ])
-    ]));
-  }
-});
+import f from "./Tooltip.js";
 export {
-  O as default
+  f as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chrts",
-  "version": "2.0.0-beta.3",
+  "version": "2.0.0-beta.4",
   "type": "module",
   "files": [
     "dist"

package/dist/_virtual/_plugin-vue_export-helper.js

@@ -1,9 +0,0 @@
-const s = (t, e) => {
-  const o = t.__vccOpts || t;
-  for (const [r, c] of e)
-    o[r] = c;
-  return o;
-};
-export {
-  s as default
-};

package/dist/index.js.css

@@ -1 +0,0 @@
-.vis-tooltip[data-v-2385aa2d]{display:flex;flex-direction:column}.vis-tooltip-title[data-v-2385aa2d]{color:var(--vis-tooltip-title-color, #000);text-transform:var(--vis-tooltip-title-text-transform, capitalize);border-bottom:var(--vis-tooltip-title-border-bottom, 1px solid #e5e7eb);padding:var(--vis-tooltip-title-padding, .75rem .75rem .5rem .75rem);margin:var(--vis-tooltip-title-margin, 0 0 .25rem 0);font-size:var(--vis-tooltip-title-font-size, .875rem);line-height:var(--vis-tooltip-title-line-height, 100%);font-weight:var(--vis-tooltip-title-font-weight, 600)}.vis-tooltip-content[data-v-2385aa2d]{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--vis-tooltip-content-gap, .25rem .5rem);padding:var(--vis-tooltip-content-padding, 0 .75rem)}.vis-tooltip-entry[data-v-2385aa2d]{display:contents}.vis-tooltip-dot[data-v-2385aa2d]{width:8px;height:8px;aspect-ratio:1;border-radius:var(--vis-tooltip-dot-border-radius, 4px);margin:var(--vis-tooltip-dot-margin, 0);flex-shrink:0}.vis-tooltip-label[data-v-2385aa2d]{font-weight:var(--vis-tooltip-label-font-weight, 400);font-size:var(--vis-tooltip-label-font-size, .875rem);color:var(--vis-tooltip-label-color, inherit);margin:var(--vis-tooltip-label-margin, 0 1rem 0 0);white-space:nowrap}.vis-tooltip-value[data-v-2385aa2d]{font-size:var(--vis-tooltip-value-font-size, .875rem);font-weight:var(--vis-tooltip-value-font-weight, 600);color:var(--vis-tooltip-value-color, inherit);text-align:right;font-variant-numeric:tabular-nums}