vue-chrts 0.2.4 → 0.2.5-test.1

package/dist/components/DonutChart/DonutChart.js

@@ -1,11 +1,11 @@
-import { defineComponent as V, useSlots as b, useTemplateRef as w, ref as T, createElementBlock as u, openBlock as p, Fragment as D, createElementVNode as n, createCommentVNode as m, createVNode as o, renderSlot as i, unref as l, withCtx as S, normalizeStyle as W, toDisplayString as B } from "vue";
-import { Donut as L } from "@unovis/ts";
-import { DonutType as R } from "./types.js";
-import { VisSingleContainer as H, VisTooltip as N, VisDonut as $, VisBulletLegend as j } from "@unovis/vue";
-const z = {
+import { defineComponent as V, useSlots as b, useTemplateRef as x, ref as w, createElementBlock as c, openBlock as m, Fragment as T, createElementVNode as a, createCommentVNode as g, createVNode as r, renderSlot as s, unref as n, withCtx as D, normalizeStyle as S, toDisplayString as W } from "vue";
+import { Donut as B } from "@unovis/ts";
+import { DonutType as L } from "./types.js";
+import { VisSingleContainer as R, VisTooltip as H, VisDonut as N, VisBulletLegend as $ } from "@unovis/vue";
+const j = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, A = { style: { display: "flex", "align-items": "center", padding: "10px 15px" } }, E = {
+}, z = { style: { display: "flex", "align-items": "center", padding: "10px 15px" } }, A = {
   key: 0,
   style: {
     display: "flex",
@@ -13,7 +13,7 @@ const z = {
     justifyContent: "center",
     marginTop: "1rem"
   }
-}, M = /* @__PURE__ */ V({
+}, U = /* @__PURE__ */ V({
   __name: "DonutChart",
   props: {
     type: {},
@@ -26,74 +26,74 @@ const z = {
     padAngle: {}
   },
   emits: ["click"],
-  setup(c, { emit: g }) {
-    const f = g, r = c, h = b(), s = w("slotWrapper"), t = T(), y = (e) => e, v = r.type === R.Half;
+  setup(t, { emit: p }) {
+    const f = p, i = t, h = b(), d = x("slotWrapper"), l = w(), y = (e) => e, v = i.type === L.Half;
     function C(e) {
-      return t.value = e, k();
+      return l.value = e, k();
     }
     function k(e) {
-      return typeof window > "u" ? "" : s.value ? s.value.innerHTML : "";
+      return typeof window > "u" ? "" : d.value ? d.value.innerHTML : "";
     }
-    return (e, d) => (p(), u(D, null, [
-      n("div", {
+    return (e, u) => (m(), c(T, null, [
+      a("div", {
         style: {
           display: "flex",
           alignItems: "center",
           justifyContent: "center"
         },
-        onClick: d[0] || (d[0] = (a) => f("click", a, t.value))
+        onClick: u[0] || (u[0] = (o) => f("click", o, l.value))
       }, [
-        o(l(H), {
-          data: e.data,
-          height: e.height,
+        r(n(R), {
+          data: t.data,
+          height: t.height,
           margin: {}
         }, {
-          default: S(() => [
-            o(l(N), {
+          default: D(() => [
+            r(n(H), {
               "horizontal-shift": 20,
               "vertical-shift": 20,
               triggers: {
-                [l(L).selectors.segment]: C
+                [n(B).selectors.segment]: C
               }
             }, null, 8, ["triggers"]),
-            o(l($), {
+            r(n(N), {
               value: y,
-              "corner-radius": e.radius,
-              "arc-width": e.arcWidth ?? 20,
-              color: r.labels.map((a) => a.color),
+              "corner-radius": t.radius,
+              "arc-width": t.arcWidth ?? 20,
+              color: i.labels.map((o) => o.color),
               "angle-range": v ? [-1.5707963267948966, 1.5707963267948966] : [],
-              "pad-angle": r.padAngle || 0
+              "pad-angle": i.padAngle || 0
             }, null, 8, ["corner-radius", "arc-width", "color", "angle-range", "pad-angle"])
           ]),
           _: 1
         }, 8, ["data", "height"]),
-        i(e.$slots, "default"),
-        n("div", z, [
-          l(h).tooltip ? i(e.$slots, "tooltip", {
+        s(e.$slots, "default"),
+        a("div", j, [
+          n(h).tooltip ? s(e.$slots, "tooltip", {
             key: 0,
-            values: t.value
-          }) : t.value ? i(e.$slots, "fallback", { key: 1 }, () => [
-            n("div", A, [
-              n("div", {
-                style: W({
+            values: l.value
+          }) : l.value ? s(e.$slots, "fallback", { key: 1 }, () => [
+            a("div", z, [
+              a("div", {
+                style: S({
                   width: "0.5rem",
                   height: "0.5rem",
                   borderRadius: "9999px",
                   marginRight: "0.5rem",
-                  backgroundColor: r.labels[t.value.index].color
+                  backgroundColor: i.labels[l.value.index].color
                 })
               }, null, 4),
-              n("div", null, B(t.value.data), 1)
+              a("div", null, W(l.value.data), 1)
             ])
-          ]) : m("", !0)
+          ]) : g("", !0)
         ], 512)
       ]),
-      e.hideLegend ? m("", !0) : (p(), u("div", E, [
-        o(l(j), { items: e.labels }, null, 8, ["items"])
+      t.hideLegend ? g("", !0) : (m(), c("div", A, [
+        r(n($), { items: t.labels }, null, 8, ["items"])
       ]))
     ], 64));
   }
 });
 export {
-  M as default
+  U as default
 };

package/dist/components/LineChart/LineChart.js

@@ -1,13 +1,13 @@
-import { defineComponent as N, computed as f, useSlots as P, useTemplateRef as O, ref as j, createElementBlock as p, openBlock as n, normalizeClass as w, normalizeStyle as k, createVNode as s, createCommentVNode as l, createElementVNode as M, unref as i, withCtx as W, createBlock as m, Fragment as z, renderList as E, mergeProps as G, renderSlot as h } from "vue";
+import { defineComponent as N, computed as u, useSlots as O, useTemplateRef as W, ref as j, createElementBlock as y, openBlock as a, normalizeClass as w, normalizeStyle as g, createVNode as c, createCommentVNode as r, createElementVNode as M, unref as i, withCtx as S, createBlock as d, Fragment as z, renderList as E, mergeProps as G, renderSlot as h } from "vue";
 import { Position as v, CurveType as X } from "@unovis/ts";
 import { createMarkers as $, getFirstPropertyValue as R } from "../../utils.js";
-import S from "../Tooltip.js";
-import { VisXYContainer as Y, VisTooltip as H, VisLine as I, VisAxis as T, VisCrosshair as U, VisBulletLegend as q } from "@unovis/vue";
-import { LegendPosition as J } from "../../types.js";
-const Q = {
+import Y from "../Tooltip.js";
+import { VisXYContainer as H, VisTooltip as U, VisLine as q, VisAxis as x, VisCrosshair as I, VisBulletLegend as J } from "@unovis/vue";
+import { LegendPosition as Q } from "../../types.js";
+const Z = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, te = /* @__PURE__ */ N({
+}, le = /* @__PURE__ */ N({
   __name: "LineChart",
   props: {
     data: {},
@@ -27,13 +27,14 @@ const Q = {
     curveType: {},
     lineWidth: { default: 2 },
     lineDashArray: {},
-    xNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
+    xNumTicks: { default: (e) => e.data.length > 24 ? 24 / 4 : e.data.length - 1 },
     xExplicitTicks: {},
     minMaxTicksOnly: { type: Boolean },
-    yNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
+    yNumTicks: { default: (e) => e.data.length > 24 ? 24 / 4 : e.data.length - 1 },
     hideTooltip: { type: Boolean },
-    hideLegend: { type: Boolean },
-    legendPosition: {},
+    hideLegend: { type: Boolean, default: !1 },
+    legendPosition: { default: Q.BottomCenter },
+    legendStyle: { default: void 0 },
     xGridLine: { type: Boolean },
     xDomainLine: { type: Boolean },
     yGridLine: { type: Boolean },
@@ -49,51 +50,49 @@ const Q = {
     xDomain: {}
   },
   emits: ["click"],
-  setup(t, { emit: L }) {
-    const D = L, o = t, C = f(() => o.markerConfig ? $(o.markerConfig) : ""), B = P(), y = O("slotWrapper"), a = j();
-    function b(e) {
-      return typeof window > "u" ? "" : y.value ? y.value.innerHTML : "";
+  setup(e, { emit: T }) {
+    const L = T, t = e, D = u(() => t.markerConfig ? $(t.markerConfig) : ""), C = O(), f = W("slotWrapper"), o = j();
+    function p(n) {
+      return typeof window > "u" ? "" : f.value ? f.value.innerHTML : "";
     }
-    function V(e) {
-      return a.value = e, b();
+    function B(n) {
+      return o.value = n, p();
     }
-    const c = f(
-      () => o.legendPosition === J.Top
-    ), A = Object.values(o.categories).map(
-      (e, r) => `var(--vis-color${r})`
-    ), F = (e) => Object.values(o.categories)[e].color ?? A[e];
-    return (e, r) => (n(), p("div", {
-      style: k({
+    const b = u(() => t.legendPosition.startsWith("top")), A = u(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center"), V = Object.values(t.categories).map(
+      (n, s) => `var(--vis-color${s})`
+    ), F = (n) => Object.values(t.categories)[n].color ?? V[n];
+    return (n, s) => (a(), y("div", {
+      style: g({
         display: "flex",
-        flexDirection: c.value ? "column-reverse" : "column",
-        gap: "1rem"
+        flexDirection: b.value ? "column-reverse" : "column",
+        gap: "var(--vis-legend-spacing)"
       }),
-      class: w({ markers: !!o.markerConfig }),
-      onClick: r[0] || (r[0] = (d) => D("click", d, a.value))
+      class: w({ markers: !!t.markerConfig }),
+      onClick: s[0] || (s[0] = (l) => L("click", l, o.value))
     }, [
-      s(i(Y), {
+      c(i(H), {
         data: e.data,
         padding: e.padding,
         height: e.height,
-        svgDefs: C.value,
+        svgDefs: D.value,
         yDomain: e.yDomain,
         xDomain: e.xDomain
       }, {
-        default: W(() => [
-          s(i(H), {
+        default: S(() => [
+          c(i(U), {
             "horizontal-placement": i(v).Right,
             "vertical-placement": i(v).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"]),
-          (n(!0), p(z, null, E(Object.keys(o.categories), (d, u) => (n(), m(i(I), {
-            key: u,
-            x: (g, x) => x,
-            y: (g) => g[d],
-            color: F(u),
+          (a(!0), y(z, null, E(Object.keys(t.categories), (l, m) => (a(), d(i(q), {
+            key: m,
+            x: (k, P) => P,
+            y: (k) => k[l],
+            color: F(m),
             "curve-type": e.curveType ?? i(X).MonotoneX,
             "line-width": e.lineWidth,
-            lineDashArray: e.lineDashArray ? e.lineDashArray[u] : void 0
+            lineDashArray: e.lineDashArray ? e.lineDashArray[m] : void 0
           }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"]))), 128)),
-          e.hideXAxis ? l("", !0) : (n(), m(i(T), {
+          e.hideXAxis ? r("", !0) : (a(), d(i(x), {
             key: 0,
             type: "x",
             "tick-format": e.xFormatter,
@@ -106,7 +105,7 @@ const Q = {
             "tick-values": e.xExplicitTicks,
             "min-max-ticks-only": e.minMaxTicksOnly
           }, null, 8, ["tick-format", "label", "domain-line", "grid-line", "tick-line", "num-ticks", "tick-values", "min-max-ticks-only"])),
-          e.hideYAxis ? l("", !0) : (n(), m(i(T), {
+          e.hideYAxis ? r("", !0) : (a(), d(i(x), {
             key: 1,
             type: "y",
             "tick-format": e.yFormatter,
@@ -116,39 +115,44 @@ const Q = {
             "grid-line": e.yGridLine,
             "tick-line": e.yTickLine
           }, null, 8, ["tick-format", "label", "num-ticks", "domain-line", "grid-line", "tick-line"])),
-          e.hideTooltip ? l("", !0) : (n(), m(i(U), G({ key: 2 }, e.crosshairConfig, { template: V }), null, 16))
+          e.hideTooltip ? r("", !0) : (a(), d(i(I), G({ key: 2 }, e.crosshairConfig, { template: B }), null, 16))
         ]),
         _: 1
       }, 8, ["data", "padding", "height", "svgDefs", "yDomain", "xDomain"]),
-      e.hideLegend ? l("", !0) : (n(), p("div", {
+      t.hideLegend ? r("", !0) : (a(), y("div", {
         key: 0,
-        style: k({
+        style: g({
           display: "flex",
-          alignItems: "center",
-          justifyContent: "flex-end",
-          paddingBottom: c.value ? "1rem" : void 0
+          justifyContent: A.value
         })
       }, [
-        s(i(q), {
-          items: Object.values(e.categories)
-        }, null, 8, ["items"])
+        c(i(J), {
+          style: g([
+            t.legendStyle,
+            "display: flex; gap: var(--vis-legend-spacing);"
+          ]),
+          items: Object.values(t.categories).map((l) => ({
+            ...l,
+            color: Array.isArray(l.color) ? l.color[0] : l.color
+          }))
+        }, null, 8, ["style", "items"])
       ], 4)),
-      M("div", Q, [
-        i(B).tooltip ? h(e.$slots, "tooltip", {
+      M("div", Z, [
+        i(C).tooltip ? h(n.$slots, "tooltip", {
           key: 0,
-          values: a.value
-        }) : a.value ? h(e.$slots, "fallback", { key: 1 }, () => [
-          s(S, {
-            data: a.value,
+          values: o.value
+        }) : o.value ? h(n.$slots, "fallback", { key: 1 }, () => [
+          c(Y, {
+            data: o.value,
             categories: e.categories,
-            toolTipTitle: i(R)(a.value) ?? "",
-            yFormatter: o.yFormatter
+            toolTipTitle: i(R)(o.value) ?? "",
+            yFormatter: t.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
-        ]) : l("", !0)
+        ]) : r("", !0)
       ], 512)
     ], 6));
   }
 });
 export {
-  te as default
+  le as default
 };

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

@@ -93,6 +93,10 @@ export interface LineChartProps<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 grid lines along the x-axis.
      */

package/dist/components/Tooltip.js

@@ -1,11 +1,11 @@
-import { defineComponent as y, computed as f, createElementBlock as r, openBlock as i, createElementVNode as e, toDisplayString as l, Fragment as h, renderList as b, normalizeStyle as n } from "vue";
-const x = { style: { padding: "10px 15px" } }, _ = { style: {
+import { defineComponent as v, computed as y, createElementBlock as i, openBlock as l, createElementVNode as o, toDisplayString as n, Fragment as b, renderList as f, normalizeStyle as a } from "vue";
+const h = { style: { padding: "10px 15px" } }, B = { style: {
   color: "var(--tooltip-value-color)",
   textTransform: "capitalize",
-  borderBottom: "1px solid rgba(255, 255, 255, 0.05)",
+  borderBottom: "borderBottom: 1px solid var(--tooltip-border-color)",
   marginBottom: "0.25rem",
   paddingBottom: "0.25rem"
-} }, T = /* @__PURE__ */ y({
+} }, F = /* @__PURE__ */ v({
   __name: "Tooltip",
   props: {
     data: {},
@@ -13,30 +13,30 @@ const x = { style: { padding: "10px 15px" } }, _ = { style: {
     toolTipTitle: {},
     yFormatter: { type: Function }
   },
-  setup(d) {
-    const a = d, m = ["_index", "_stacked", "_ending"], g = f(() => Object.entries(a.data ?? []).filter(
-      ([t, u]) => !m.includes(t) && Object.keys(a.categories).includes(t)
+  setup(t) {
+    const c = t, g = ["_index", "_stacked", "_ending"], p = y(() => Object.entries(c.data ?? []).filter(
+      ([r, u]) => !g.includes(r) && Object.keys(c.categories).includes(r)
     ));
-    return (t, u) => (i(), r("div", x, [
-      e("div", _, l(t.toolTipTitle), 1),
-      (i(!0), r(h, null, b(g.value, ([o, s], v) => {
-        var p, c;
-        return i(), r("div", {
-          key: o,
+    return (r, u) => (l(), i("div", h, [
+      o("div", B, n(t.toolTipTitle), 1),
+      (l(!0), i(b, null, f(p.value, ([e, s], x) => {
+        var d, m;
+        return l(), i("div", {
+          key: e,
           style: { display: "flex", "align-items": "center", "margin-bottom": "4px" }
         }, [
-          e("span", {
-            style: n([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, {
-              backgroundColor: typeof ((p = t.categories[o]) == null ? void 0 : p.color) == "string" && ((c = t.categories[o]) != null && c.color) ? t.categories[o].color : `var(--vis-color${v})`
+          o("span", {
+            style: a([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, {
+              backgroundColor: typeof ((d = t.categories[e]) == null ? void 0 : d.color) == "string" && ((m = t.categories[e]) != null && m.color) ? t.categories[e].color : `var(--vis-color${x})`
             }])
           }, null, 4),
-          e("div", null, [
-            e("span", {
-              style: n([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
-            }, l(t.categories[o].name) + ":", 1),
-            e("span", {
-              style: n([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
-            }, l(t.yFormatter ? t.yFormatter(s) : s), 1)
+          o("div", null, [
+            o("span", {
+              style: a([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
+            }, n(t.categories[e].name) + ":", 1),
+            o("span", {
+              style: a([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
+            }, n(t.yFormatter ? t.yFormatter(s) : s), 1)
           ])
         ]);
       }), 128))
@@ -44,5 +44,5 @@ const x = { style: { padding: "10px 15px" } }, _ = { style: {
   }
 });
 export {
-  T as default
+  F as default
 };

package/dist/types.d.ts

@@ -4,8 +4,12 @@ import { LineChartProps } from './components/LineChart/types';
 import { DonutChartProps } from './components/DonutChart/types';
 import { BubbleChartProps } from './components/BubbleChart/types';
 declare enum LegendPosition {
-    Top = "top",
-    Bottom = "bottom"
+    TopLeft = "top-left",
+    TopCenter = "top-center",
+    TopRight = "top-right",
+    BottomLeft = "bottom-left",
+    BottomCenter = "bottom-center",
+    BottomRight = "bottom-right"
 }
 declare enum CurveType {
     Basis = "basis",

package/dist/types.js

@@ -1,6 +1,6 @@
-var l = /* @__PURE__ */ ((a) => (a.Top = "top", a.Bottom = "bottom", a))(l || {}), o = /* @__PURE__ */ ((a) => (a.Basis = "basis", a.BasisClosed = "basisClosed", a.BasisOpen = "basisOpen", a.Bundle = "bundle", a.Cardinal = "cardinal", a.CardinalClosed = "cardinalClosed", a.CardinalOpen = "cardinalOpen", a.CatmullRom = "catmullRom", a.CatmullRomClosed = "catmullRomClosed", a.CatmullRomOpen = "catmullRomOpen", a.Linear = "linear", a.LinearClosed = "linearClosed", a.MonotoneX = "monotoneX", a.MonotoneY = "monotoneY", a.Natural = "natural", a.Step = "step", a.StepAfter = "stepAfter", a.StepBefore = "stepBefore", a))(o || {}), t = /* @__PURE__ */ ((a) => (a.Horizontal = "horizontal", a.Vertical = "vertical", a))(t || {});
+var o = /* @__PURE__ */ ((t) => (t.TopLeft = "top-left", t.TopCenter = "top-center", t.TopRight = "top-right", t.BottomLeft = "bottom-left", t.BottomCenter = "bottom-center", t.BottomRight = "bottom-right", t))(o || {}), a = /* @__PURE__ */ ((t) => (t.Basis = "basis", t.BasisClosed = "basisClosed", t.BasisOpen = "basisOpen", t.Bundle = "bundle", t.Cardinal = "cardinal", t.CardinalClosed = "cardinalClosed", t.CardinalOpen = "cardinalOpen", t.CatmullRom = "catmullRom", t.CatmullRomClosed = "catmullRomClosed", t.CatmullRomOpen = "catmullRomOpen", t.Linear = "linear", t.LinearClosed = "linearClosed", t.MonotoneX = "monotoneX", t.MonotoneY = "monotoneY", t.Natural = "natural", t.Step = "step", t.StepAfter = "stepAfter", t.StepBefore = "stepBefore", t))(a || {}), l = /* @__PURE__ */ ((t) => (t.Horizontal = "horizontal", t.Vertical = "vertical", t))(l || {});
 export {
-  o as CurveType,
-  l as LegendPosition,
-  t as Orientation
+  a as CurveType,
+  o as LegendPosition,
+  l as Orientation
 };

package/package.json

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