vue-chrts 0.2.3 → 0.2.5-test.1

package/dist/components/AreaChart/AreaChart.js

@@ -1,13 +1,13 @@
-import { defineComponent as U, useSlots as j, useTemplateRef as w, ref as R, computed as u, createElementBlock as m, openBlock as r, normalizeClass as S, normalizeStyle as T, createVNode as p, createCommentVNode as d, createElementVNode as X, unref as i, withCtx as z, createBlock as c, Fragment as L, renderList as I, mergeProps as C, renderSlot as A } from "vue";
-import { Position as D, CurveType as b } from "@unovis/ts";
-import { createMarkers as Y, getFirstPropertyValue as x } from "../../utils.js";
-import H from "../Tooltip.js";
-import { VisXYContainer as K, VisTooltip as q, VisArea as J, VisLine as Q, VisAxis as B, VisCrosshair as Z, VisBulletLegend as _ } from "@unovis/vue";
-import { LegendPosition as ee } from "../../types.js";
-const te = {
+import { defineComponent as M, useSlots as U, useTemplateRef as j, ref as w, computed as d, createElementBlock as m, openBlock as o, normalizeClass as R, normalizeStyle as h, createVNode as u, createCommentVNode as c, createElementVNode as X, unref as i, withCtx as z, createBlock as y, Fragment as x, renderList as Y, mergeProps as p, renderSlot as L } from "vue";
+import { Position as C, CurveType as D } from "@unovis/ts";
+import { createMarkers as I, getFirstPropertyValue as H } from "../../utils.js";
+import K from "../Tooltip.js";
+import { VisXYContainer as q, VisTooltip as J, VisArea as Q, VisLine as Z, VisAxis as A, VisCrosshair as _, VisBulletLegend as ee } from "@unovis/vue";
+import { LegendPosition as te } from "../../types.js";
+const ie = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, y = 24, V = 4, ie = 0.5, F = "#3b82f6", de = /* @__PURE__ */ U({
+}, f = 24, b = 4, ne = 0.5, B = "#3b82f6", de = /* @__PURE__ */ M({
   __name: "AreaChart",
   props: {
     data: {},
@@ -22,13 +22,14 @@ const te = {
     curveType: {},
     lineWidth: { default: 2 },
     lineDashArray: {},
-    xNumTicks: { default: (a) => a.data.length > y ? y / V : a.data.length - 1 },
+    xNumTicks: { default: (e) => e.data.length > f ? f / b : e.data.length - 1 },
     xExplicitTicks: {},
     minMaxTicksOnly: { type: Boolean },
-    yNumTicks: { default: (a) => a.data.length > y ? y / V : a.data.length - 1 },
-    hideLegend: { type: Boolean },
+    yNumTicks: { default: (e) => e.data.length > f ? f / b : e.data.length - 1 },
+    hideLegend: { type: Boolean, default: !1 },
     hideTooltip: { type: Boolean },
-    legendPosition: {},
+    legendPosition: { default: te.BottomCenter },
+    legendStyle: { default: void 0 },
     xDomainLine: { type: Boolean },
     yDomainLine: { type: Boolean },
     xTickLine: { type: Boolean },
@@ -39,79 +40,84 @@ const te = {
     hideYAxis: { type: Boolean },
     crosshairConfig: { default: () => ({
       color: "#666"
-    }) }
+    }) },
+    yDomain: {},
+    xDomain: {}
   },
   emits: ["click"],
-  setup(a, { emit: $ }) {
-    const G = $, n = a, O = j(), h = w("slotWrapper"), s = R(), f = u(
-      () => Object.values(n.categories).map((e) => e.color)
-    ), N = u(() => n.markerConfig ? Y(n.markerConfig) : ""), g = u(() => n.legendPosition === ee.Top), E = u(() => {
-      const e = (t, o) => `
-    <linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
-      <stop offset="0%" stop-color="${o}" stop-opacity="1" />
-      <stop offset="100%" stop-color="${o}" stop-opacity="0" />
+  setup(e, { emit: V }) {
+    const F = V, n = e, $ = U(), T = j("slotWrapper"), s = w(), g = d(
+      () => Object.values(n.categories).map((l) => l.color)
+    ), G = d(() => n.markerConfig ? I(n.markerConfig) : ""), O = d(() => n.legendPosition.startsWith("top")), N = d(() => n.legendPosition.includes("left") ? "flex-start" : n.legendPosition.includes("right") ? "flex-end" : "center"), P = d(() => {
+      const l = (t, a) => `
+    <linearGradient id="gradient${t}-${a}" gradientTransform="rotate(90)">
+      <stop offset="0%" stop-color="${a}" stop-opacity="1" />
+      <stop offset="100%" stop-color="${a}" stop-opacity="0" />
     </linearGradient>
-  `, l = (t, o) => `
-    <linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
+  `, r = (t, a) => `
+    <linearGradient id="gradient${t}-${a}" gradientTransform="rotate(90)">
       <stop offset="0%" style="stop-color:var(--vis-color0);stop-opacity:1" />
       <stop offset="100%" style="stop-color:var(--vis-color0);stop-opacity:0" />
     </linearGradient>
   `;
-      return f.value.map(
-        (t, o) => t != null && t.includes("#") ? e(o, t) : l(o, t ?? F)
+      return g.value.map(
+        (t, a) => t != null && t.includes("#") ? l(a, t) : r(a, t ?? B)
       ).join("");
     });
-    function P(e) {
-      var l;
+    function E(l) {
+      var r;
       return {
-        y: (t) => Number(t[e]),
-        color: ((l = n.categories[e]) == null ? void 0 : l.color) ?? F
+        y: (t) => Number(t[l]),
+        color: ((r = n.categories[l]) == null ? void 0 : r.color) ?? B
       };
     }
-    function W(e) {
-      return typeof window > "u" ? "" : h.value ? h.value.innerHTML : "";
+    function W(l) {
+      return typeof window > "u" ? "" : T.value ? T.value.innerHTML : "";
     }
-    function M(e) {
-      return s.value = e, W();
+    function S(l) {
+      return s.value = l, W();
     }
-    return (e, l) => (r(), m("div", {
-      style: T({
+    return (l, r) => (o(), m("div", {
+      style: h({
         display: "flex",
-        flexDirection: g.value ? "column-reverse" : "column"
+        flexDirection: O.value ? "column-reverse" : "column",
+        gap: "var(--vis-legend-spacing)"
       }),
-      class: S({ markers: !!n.markerConfig }),
-      onClick: l[0] || (l[0] = (t) => G("click", t, s.value))
+      class: R({ markers: !!n.markerConfig }),
+      onClick: r[0] || (r[0] = (t) => F("click", t, s.value))
     }, [
-      p(i(K), {
+      u(i(q), {
         data: e.data,
         height: e.height,
         padding: e.padding,
-        "svg-defs": E.value + N.value
+        "svg-defs": P.value + G.value,
+        "y-domain": e.yDomain,
+        "x-domain": e.xDomain
       }, {
         default: z(() => [
-          e.hideTooltip ? d("", !0) : (r(), c(i(q), {
+          e.hideTooltip ? c("", !0) : (o(), y(i(J), {
             key: 0,
-            "horizontal-placement": i(D).Right,
-            "vertical-placement": i(D).Top
+            "horizontal-placement": i(C).Right,
+            "vertical-placement": i(C).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"])),
-          (r(!0), m(L, null, I(Object.keys(n.categories), (t, o) => (r(), m(L, { key: t }, [
-            p(i(J), C({
+          (o(!0), m(x, null, Y(Object.keys(n.categories), (t, a) => (o(), m(x, { key: t }, [
+            u(i(Q), p({
               x: (k, v) => v
-            }, { ref_for: !0 }, P(t), {
-              color: `url(#gradient${o}-${f.value[o]})`,
-              opacity: ie,
-              "curve-type": e.curveType ?? i(b).MonotoneX
+            }, { ref_for: !0 }, E(t), {
+              color: `url(#gradient${a}-${g.value[a]})`,
+              opacity: ne,
+              "curve-type": e.curveType ?? i(D).MonotoneX
             }), null, 16, ["x", "color", "curve-type"]),
-            p(i(Q), {
+            u(i(Z), {
               x: (k, v) => v,
               y: (k) => k[t],
-              color: f.value[o],
-              "curve-type": e.curveType ?? i(b).MonotoneX,
+              color: g.value[a],
+              "curve-type": e.curveType ?? i(D).MonotoneX,
               "line-width": e.lineWidth,
-              lineDashArray: e.lineDashArray ? e.lineDashArray[o] : void 0
+              lineDashArray: e.lineDashArray ? e.lineDashArray[a] : void 0
             }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"])
           ], 64))), 128)),
-          e.hideXAxis ? d("", !0) : (r(), c(i(B), {
+          e.hideXAxis ? c("", !0) : (o(), y(i(A), {
             key: 1,
             type: "x",
             label: e.xLabel,
@@ -124,7 +130,7 @@ const te = {
             "tick-line": e.xTickLine,
             "min-max-ticks-only": e.minMaxTicksOnly
           }, null, 8, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only"])),
-          e.hideYAxis ? d("", !0) : (r(), c(i(B), {
+          e.hideYAxis ? c("", !0) : (o(), y(i(A), {
             key: 2,
             type: "y",
             label: e.yLabel,
@@ -134,36 +140,37 @@ const te = {
             "domain-line": e.yDomainLine,
             "tick-line": e.yTickLine
           }, null, 8, ["label", "num-ticks", "tick-format", "grid-line", "domain-line", "tick-line"])),
-          e.hideTooltip ? d("", !0) : (r(), c(i(Z), C({ key: 3 }, e.crosshairConfig, { template: M }), null, 16))
+          e.hideTooltip ? c("", !0) : (o(), y(i(_), p({ key: 3 }, e.crosshairConfig, { template: S }), null, 16))
         ]),
         _: 1
-      }, 8, ["data", "height", "padding", "svg-defs"]),
-      e.hideLegend ? d("", !0) : (r(), m("div", {
+      }, 8, ["data", "height", "padding", "svg-defs", "y-domain", "x-domain"]),
+      n.hideLegend ? c("", !0) : (o(), m("div", {
         key: 0,
-        style: T({
+        style: h({
           display: "flex",
-          alignItems: "center",
-          justifyContent: "flex-end",
-          paddingBottom: g.value ? "1rem" : void 0,
-          paddingTop: g.value ? void 0 : "1rem"
+          justifyContent: N.value
         })
       }, [
-        p(i(_), {
-          items: Object.values(e.categories)
-        }, null, 8, ["items"])
+        u(i(ee), {
+          style: h([
+            n.legendStyle,
+            "display: flex; gap: var(--vis-legend-spacing);"
+          ]),
+          items: Object.values(n.categories)
+        }, null, 8, ["style", "items"])
       ], 4)),
-      X("div", te, [
-        i(O).tooltip ? A(e.$slots, "tooltip", {
+      X("div", ie, [
+        i($).tooltip ? L(l.$slots, "tooltip", {
           key: 0,
           values: s.value
-        }) : s.value ? A(e.$slots, "fallback", { key: 1 }, () => [
-          p(H, {
+        }) : s.value ? L(l.$slots, "fallback", { key: 1 }, () => [
+          u(K, {
             data: s.value,
             categories: e.categories,
-            toolTipTitle: i(x)(s.value) ?? "",
+            toolTipTitle: i(H)(s.value) ?? "",
             yFormatter: n.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
-        ]) : d("", !0)
+        ]) : c("", !0)
       ], 512)
     ], 6));
   }

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

@@ -72,7 +72,7 @@ export interface AreaChartProps<T> {
     /**
      * Force specific ticks on the x-axis.
      */
-    xExplicitTicks?: number;
+    xExplicitTicks?: (number | string | Date)[];
     /**
      * Force only first and last ticks on the x-axis.
      */
@@ -94,6 +94,10 @@ export interface AreaChartProps<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.
      */
@@ -130,4 +134,12 @@ export interface AreaChartProps<T> {
      * Crosshair configuration object for customizing the appearance of the crosshair line.
      */
     crosshairConfig?: CrosshairConfig;
+    /**
+     * The domain for the y-axis, specified as a tuple of two values.
+     */
+    yDomain?: [number | undefined, number | undefined];
+    /**
+     * The domain for the x-axis, specified as a tuple of two values.
+     */
+    xDomain?: [number | undefined, number | undefined];
 }

package/dist/components/AreaStackedChart/AreaStackedChart.js

@@ -1,8 +1,8 @@
-import { defineComponent as y, computed as f, createApp as h, createElementBlock as g, openBlock as a, createVNode as n, createElementVNode as B, unref as t, withCtx as L, createBlock as v, createCommentVNode as C, mergeProps as k } from "vue";
-import { VisXYContainer as b, VisArea as x, VisAxis as s, VisCrosshair as T, VisBulletLegend as V } from "@unovis/vue";
-import { CurveType as _ } from "@unovis/ts";
-import N from "../Tooltip.js";
-const A = { class: "flex flex-col space-y-4" }, j = { class: "flex items center justify-end" }, O = /* @__PURE__ */ y({
+import { defineComponent as y, computed as f, createApp as h, createElementBlock as g, openBlock as c, createVNode as i, createElementVNode as x, unref as o, withCtx as B, createBlock as L, createCommentVNode as v, mergeProps as C } from "vue";
+import { VisXYContainer as k, VisArea as b, VisAxis as s, VisCrosshair as T, VisBulletLegend as V } from "@unovis/vue";
+import { CurveType as N } from "@unovis/ts";
+import A from "../Tooltip.js";
+const j = { class: "flex flex-col space-y-4" }, w = { class: "flex items center justify-end" }, H = /* @__PURE__ */ y({
   __name: "AreaStackedChart",
   props: {
     data: {},
@@ -21,57 +21,57 @@ const A = { class: "flex flex-col space-y-4" }, j = { class: "flex items center
     yTickLine: { type: Boolean },
     crosshairConfig: {}
   },
-  setup(c) {
-    const i = c, l = f(() => (e, m) => {
+  setup(t) {
+    const a = t, l = f(() => (e, u) => {
       if (typeof window > "u" || typeof document > "u")
         return "";
       try {
-        const o = h(N, {
+        const n = h(A, {
           data: e,
-          categories: i.categories
+          categories: a.categories
         }), r = document.createElement("div");
-        o.mount(r);
-        const u = r.innerHTML;
-        return o.unmount(), u;
+        n.mount(r);
+        const p = r.innerHTML;
+        return n.unmount(), p;
       } catch {
         return "";
       }
-    }), p = (e) => Number.parseInt(e.time), d = [(e) => e.firstTime, (e) => e.returning];
-    return (e, m) => (a(), g("div", A, [
-      n(t(b), {
-        data: e.data,
-        padding: e.padding,
-        height: e.height
+    }), d = (e) => Number.parseInt(e.time), m = [(e) => e.firstTime, (e) => e.returning];
+    return (e, u) => (c(), g("div", j, [
+      i(o(k), {
+        data: t.data,
+        padding: t.padding,
+        height: t.height
       }, {
-        default: L(() => [
-          n(t(x), {
-            x: p,
-            y: d,
-            color: Object.values(i.categories).map((o) => o.color),
-            "curve-type": t(_).Linear
+        default: B(() => [
+          i(o(b), {
+            x: d,
+            y: m,
+            color: Object.values(a.categories).map((n) => n.color),
+            "curve-type": o(N).Linear
           }, null, 8, ["color", "curve-type"]),
-          n(t(s), {
+          i(o(s), {
             type: "x",
             label: "Time",
             "num-ticks": 12
           }),
-          n(t(s), {
+          i(o(s), {
             type: "y",
             label: "Number of visitors",
             "num-ticks": 3
           }),
-          e.hideTooltip ? C("", !0) : (a(), v(t(T), k({ key: 0 }, e.crosshairConfig, { template: l.value }), null, 16, ["template"]))
+          t.hideTooltip ? v("", !0) : (c(), L(o(T), C({ key: 0 }, t.crosshairConfig, { template: l.value }), null, 16, ["template"]))
         ]),
         _: 1
       }, 8, ["data", "padding", "height"]),
-      B("div", j, [
-        n(t(V), {
-          items: Object.values(e.categories)
+      x("div", w, [
+        i(o(V), {
+          items: Object.values(t.categories)
         }, null, 8, ["items"])
       ])
     ]));
   }
 });
 export {
-  O as default
+  H as default
 };