vue-chrts 0.1.0-beta.2-internal-17 → 0.1.0-beta.2-internal-18

package/dist/vue-chrts.js

@@ -0,0 +1,522 @@
+import { Position as P, CurveType as V, Orientation as N, StackedBar as G, GroupedBar as I, Donut as R, omit as W } from "@unovis/ts";
+import { CurveType as ve, Orientation as be, Position as ke } from "@unovis/ts";
+import { defineComponent as k, computed as h, createElementBlock as m, openBlock as u, Fragment as L, renderList as D, createElementVNode as b, normalizeStyle as z, toDisplayString as S, createApp as x, normalizeClass as j, createVNode as s, createCommentVNode as T, unref as t, withCtx as $, createBlock as B, mergeProps as q, renderSlot as J } from "vue";
+import { VisXYContainer as O, VisTooltip as C, VisArea as X, VisLine as E, VisAxis as v, VisCrosshair as M, VisBulletLegend as w, VisGroupedBar as Q, VisStackedBar as U, VisSingleContainer as Z, VisDonut as K } from "@unovis/vue";
+function ee(a, o) {
+  if (o <= 0) return [];
+  if (o >= a)
+    return Array.from({ length: a }, (d, i) => i);
+  if (o === 1)
+    return [Math.floor((a - 1) / 2)];
+  if (o === 2)
+    return [0, a - 1];
+  const c = [];
+  for (let d = 0; d < o; d++) {
+    const i = Math.round(d * (a - 1) / (o - 1));
+    c.push(i);
+  }
+  return c;
+}
+const A = /* @__PURE__ */ k({
+  __name: "Tooltip",
+  props: {
+    data: {},
+    categories: {}
+  },
+  setup(a) {
+    const o = a, c = ["_index", "_stacked", "_ending"], d = h(() => Object.entries(o.data).filter(
+      ([i, n]) => {
+        var e;
+        return !c.includes(i) && ((e = o.categories[i]) == null ? void 0 : e.color);
+      }
+    ));
+    return (i, n) => (u(), m("div", null, [
+      (u(!0), m(L, null, D(d.value, ([e, l]) => (u(), m("div", {
+        key: e,
+        style: { display: "flex", "align-items": "center", "margin-bottom": "4px" }
+      }, [
+        b("span", {
+          style: z([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, { backgroundColor: i.categories[e].color }])
+        }, null, 4),
+        b("div", null, [
+          b("span", {
+            style: z([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
+          }, S(e) + ":", 1),
+          b("span", {
+            style: z([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
+          }, S(l), 1)
+        ])
+      ]))), 128))
+    ]));
+  }
+});
+var F = /* @__PURE__ */ ((a) => (a.Top = "top", a.Bottom = "bottom", a))(F || {});
+const ue = /* @__PURE__ */ k({
+  __name: "AreaChart",
+  props: {
+    data: {},
+    height: {},
+    xLabel: {},
+    yLabel: {},
+    categories: {},
+    xFormatter: {},
+    yFormatter: {},
+    curveType: {},
+    xNumTicks: { default: (a) => a.data.length > 24 ? 24 / 4 : a.data.length - 1 },
+    yNumTicks: { default: (a) => a.data.length > 24 ? 24 / 4 : a.data.length - 1 },
+    hideLegend: { type: Boolean },
+    hideTooltip: { type: Boolean },
+    gridLineX: { type: Boolean },
+    domainLineX: { type: Boolean },
+    gridLineY: { type: Boolean },
+    domainLineY: { type: Boolean },
+    paginationPosition: {}
+  },
+  setup(a) {
+    const o = a, c = Object.values(o.categories).map((r) => r.color), d = h(() => (r) => {
+      if (typeof window > "u" || typeof document > "u")
+        return "";
+      try {
+        const g = x(A, {
+          data: r,
+          categories: o.categories
+        }), f = document.createElement("div");
+        g.mount(f);
+        const y = f.innerHTML;
+        return g.unmount(), y;
+      } catch {
+        return "";
+      }
+    });
+    function i(r) {
+      var g;
+      return {
+        y: (f) => Number(f[r]),
+        color: ((g = o.categories[r]) == null ? void 0 : g.color) ?? "#3b82f6"
+      };
+    }
+    const n = c.map(
+      (r, g) => `
+  <linearGradient id="gradient${g}-${r}" gradientTransform="rotate(90)">
+    <stop offset="0%" stop-color="${r}" stop-opacity="1" />
+    <stop offset="100%" stop-color="${r}" stop-opacity="0" />
+  </linearGradient>
+`
+    ).join(""), e = h(
+      () => o.paginationPosition === F.Top
+    ), l = h(() => ee(o.data.length, o.xNumTicks)), p = h(() => {
+      var r;
+      return !((r = o.data) != null && r.length) || !l || l.value.length === 0 ? [] : l.value.map((g) => o.data[g]);
+    });
+    return (r, g) => (u(), m("div", {
+      class: j(["flex flex-col space-y-4", { "flex-col-reverse": e.value }])
+    }, [
+      s(t(O), {
+        data: p.value,
+        height: r.height,
+        "svg-defs": t(n)
+      }, {
+        default: $(() => [
+          r.hideTooltip ? T("", !0) : (u(), B(t(C), {
+            key: 0,
+            "horizontal-placement": t(P).Right,
+            "vertical-placement": t(P).Top
+          }, null, 8, ["horizontal-placement", "vertical-placement"])),
+          (u(!0), m(L, null, D(Object.keys(o.categories), (f, y) => (u(), m(L, { key: y }, [
+            s(t(X), q({
+              x: (_, H) => H,
+              ref_for: !0
+            }, i(f), {
+              color: `url(#gradient${y}-${t(c)[y]})`,
+              opacity: 0.5,
+              "curve-type": r.curveType ?? t(V).MonotoneX
+            }), null, 16, ["x", "color", "curve-type"]),
+            s(t(E), {
+              x: (_, H) => H,
+              y: (_) => _[f],
+              color: t(c)[y],
+              "curve-type": r.curveType ?? t(V).MonotoneX
+            }, null, 8, ["x", "y", "color", "curve-type"])
+          ], 64))), 128)),
+          s(t(v), {
+            type: "x",
+            "num-ticks": p.value.length,
+            "tick-format": (f) => r.xFormatter(p.value[f]),
+            label: r.xLabel,
+            "grid-line": r.gridLineX,
+            "domain-line": r.domainLineX,
+            "tick-line": !!r.gridLineX
+          }, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"]),
+          s(t(v), {
+            type: "y",
+            "num-ticks": r.yNumTicks,
+            "tick-format": r.yFormatter,
+            label: r.yLabel,
+            "grid-line": r.gridLineY,
+            "domain-line": r.domainLineY,
+            "tick-line": !!r.gridLineY
+          }, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"]),
+          r.hideTooltip ? T("", !0) : (u(), B(t(M), {
+            key: 1,
+            color: "#666",
+            template: d.value
+          }, null, 8, ["template"]))
+        ]),
+        _: 1
+      }, 8, ["data", "height", "svg-defs"]),
+      r.hideLegend ? T("", !0) : (u(), m("div", {
+        key: 0,
+        class: j(["flex items center justify-end", { "pb-4": e.value }])
+      }, [
+        s(t(w), {
+          items: Object.values(r.categories)
+        }, null, 8, ["items"])
+      ], 2))
+    ], 2));
+  }
+}), te = { class: "flex flex-col space-y-4" }, ne = { class: "flex items center justify-end" }, de = /* @__PURE__ */ k({
+  __name: "AreaStackedChart",
+  props: {
+    data: {},
+    height: {},
+    categories: {},
+    hideTooltip: { type: Boolean }
+  },
+  setup(a) {
+    const o = a, c = h(() => (n) => {
+      if (typeof window > "u" || typeof document > "u")
+        return "";
+      try {
+        const e = x(A, {
+          data: n,
+          categories: o.categories
+        }), l = document.createElement("div");
+        e.mount(l);
+        const p = l.innerHTML;
+        return e.unmount(), p;
+      } catch {
+        return "";
+      }
+    }), d = (n) => Number.parseInt(n.time), i = [(n) => n.firstTime, (n) => n.returning];
+    return (n, e) => (u(), m("div", te, [
+      s(t(O), {
+        data: n.data,
+        height: n.height
+      }, {
+        default: $(() => [
+          s(t(X), {
+            x: d,
+            y: i,
+            color: Object.values(o.categories).map((l) => l.color),
+            "curve-type": t(V).Linear
+          }, null, 8, ["color", "curve-type"]),
+          s(t(v), {
+            type: "x",
+            label: "Time",
+            "num-ticks": 12
+          }),
+          s(t(v), {
+            type: "y",
+            label: "Number of visitors",
+            "num-ticks": 3
+          }),
+          n.hideTooltip ? T("", !0) : (u(), B(t(M), {
+            key: 0,
+            color: "#666",
+            template: c.value
+          }, null, 8, ["template"]))
+        ]),
+        _: 1
+      }, 8, ["data", "height"]),
+      b("div", ne, [
+        s(t(w), {
+          items: Object.values(n.categories)
+        }, null, 8, ["items"])
+      ])
+    ]));
+  }
+}), oe = { class: "flex items center justify-end" }, pe = /* @__PURE__ */ k({
+  __name: "LineChart",
+  props: {
+    data: {},
+    height: {},
+    xLabel: {},
+    yLabel: {},
+    categories: {},
+    xFormatter: { type: Function },
+    yFormatter: { type: Function },
+    curveType: {},
+    yNumTicks: {},
+    xNumTicks: {},
+    paginationPosition: {}
+  },
+  setup(a) {
+    const o = a, c = (i) => Object.values(o.categories)[i].color, d = h(() => (i) => {
+      if (typeof window > "u" || typeof document > "u")
+        return "";
+      try {
+        const n = x(A, {
+          data: i,
+          categories: o.categories
+        }), e = document.createElement("div");
+        n.mount(e);
+        const l = e.innerHTML;
+        return n.unmount(), l;
+      } catch {
+        return "";
+      }
+    });
+    return (i, n) => (u(), m("div", {
+      class: j(["space-y-4 flex flex-col", {
+        "flex-col-reverse": o.paginationPosition === "top"
+      }])
+    }, [
+      s(t(O), {
+        data: i.data,
+        height: i.height
+      }, {
+        default: $(() => [
+          s(t(C), {
+            "horizontal-placement": t(P).Right,
+            "vertical-placement": t(P).Top
+          }, null, 8, ["horizontal-placement", "vertical-placement"]),
+          (u(!0), m(L, null, D(Object.keys(o.categories), (e, l) => (u(), B(t(E), {
+            key: l,
+            x: (p, r) => r,
+            y: (p) => p[e],
+            color: c(l),
+            "curve-type": i.curveType ?? t(V).MonotoneX
+          }, null, 8, ["x", "y", "color", "curve-type"]))), 128)),
+          s(t(v), {
+            type: "x",
+            "tick-format": i.xFormatter,
+            "num-ticks": i.xNumTicks ?? 4,
+            label: i.xLabel,
+            "label-margin": 8,
+            "domain-line": !1,
+            "grid-line": !1
+          }, null, 8, ["tick-format", "num-ticks", "label"]),
+          s(t(v), {
+            type: "y",
+            "num-ticks": i.yNumTicks ?? 4,
+            "tick-format": i.yFormatter,
+            label: i.yLabel,
+            "domain-line": !1
+          }, null, 8, ["num-ticks", "tick-format", "label"]),
+          s(t(M), {
+            color: "#666",
+            template: d.value
+          }, null, 8, ["template"])
+        ]),
+        _: 1
+      }, 8, ["data", "height"]),
+      b("div", oe, [
+        s(t(w), {
+          items: Object.values(i.categories)
+        }, null, 8, ["items"])
+      ])
+    ], 2));
+  }
+}), me = /* @__PURE__ */ k({
+  __name: "BarChart",
+  props: {
+    data: {},
+    stacked: { type: Boolean },
+    height: {},
+    xLabel: {},
+    yLabel: {},
+    categories: {},
+    xFormatter: {},
+    yFormatter: {},
+    yNumTicks: {},
+    xNumTicks: {},
+    yAxis: {},
+    groupPadding: {},
+    barPadding: {},
+    radius: {},
+    hideLegend: { type: Boolean },
+    orientation: { default: N.Vertical },
+    paginationPosition: { default: F.Bottom }
+  },
+  setup(a) {
+    const o = a, c = h(() => o.yAxis.map((e) => (l) => l[e])), d = (e, l) => Object.values(o.categories)[l].color, i = h(() => (e) => {
+      if (typeof window > "u" || typeof document > "u")
+        return "";
+      try {
+        const l = x(A, {
+          data: e,
+          categories: o.categories
+        }), p = document.createElement("div");
+        l.mount(p);
+        const r = p.innerHTML;
+        return l.unmount(), r;
+      } catch {
+        return "";
+      }
+    }), n = h(
+      () => o.paginationPosition === F.Top
+    );
+    return (e, l) => (u(), m("div", {
+      class: j(["flex flex-col space-y-4", { "flex-col-reverse": n.value }])
+    }, [
+      s(t(O), { height: e.height }, {
+        default: $(() => [
+          s(t(C), {
+            triggers: {
+              [t(I).selectors.bar]: i.value,
+              [t(G).selectors.bar]: i.value
+            }
+          }, null, 8, ["triggers"]),
+          e.stacked ? (u(), B(t(U), {
+            key: 1,
+            data: e.data,
+            x: (p, r) => r,
+            y: c.value,
+            "grid-line": !1,
+            "domain-line": !1,
+            color: d,
+            "rounded-corners": e.radius ?? 0,
+            "group-padding": e.groupPadding ?? 0,
+            "bar-padding": e.barPadding ?? 0.2,
+            orientation: e.orientation ?? t(N).Vertical
+          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (u(), B(t(Q), {
+            key: 0,
+            data: e.data,
+            x: (p, r) => r,
+            y: c.value,
+            "grid-line": !1,
+            "domain-line": !1,
+            color: d,
+            "rounded-corners": e.radius ?? 0,
+            "group-padding": e.groupPadding ?? 0,
+            "bar-padding": e.barPadding ?? 0.2,
+            orientation: e.orientation ?? t(N).Vertical
+          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
+          s(t(v), {
+            type: "x",
+            label: e.xLabel,
+            "grid-line": !1,
+            "domain-line": !1,
+            "tick-format": e.xFormatter,
+            "num-ticks": e.xNumTicks,
+            "tick-line": !1
+          }, null, 8, ["label", "tick-format", "num-ticks"]),
+          s(t(v), {
+            type: "y",
+            label: e.yLabel,
+            "grid-line": e.orientation !== t(N).Horizontal,
+            "domain-line": !1,
+            "tick-format": e.yFormatter
+          }, null, 8, ["label", "grid-line", "tick-format"])
+        ]),
+        _: 1
+      }, 8, ["height"]),
+      e.hideLegend ? T("", !0) : (u(), m("div", {
+        key: 0,
+        class: j(["flex items center justify-end", { "pb-4": n.value }])
+      }, [
+        s(t(w), {
+          items: Object.values(e.categories)
+        }, null, 8, ["items"])
+      ], 2))
+    ], 2));
+  }
+}), re = { class: "flex items-center justify-center" }, ae = {
+  key: 0,
+  class: "flex items-center justify-center mt-4"
+}, ge = /* @__PURE__ */ k({
+  __name: "DonutChart",
+  props: {
+    type: {},
+    data: {},
+    height: {},
+    radius: {},
+    hidePagination: { type: Boolean },
+    labels: {}
+  },
+  setup(a) {
+    const o = a, c = (n) => n, d = o.type === Y.Half, i = {
+      [R.selectors.segment]: (n) => `<div class='flex items-center'><div class='w-2 h-2 rounded-full mr-2' style='background-color: ${o.labels[n.index].color} ;'></div>
+        <div>${n.data}</div>
+      </vistooltip>
+    </vissinglecontainer>
+  </div>`
+    };
+    return (n, e) => (u(), m(L, null, [
+      b("div", re, [
+        s(t(Z), {
+          data: n.data,
+          height: n.height,
+          margin: {}
+        }, {
+          default: $(() => [
+            s(t(C), {
+              "horizontal-shift": 20,
+              "vertical-shift": 20,
+              triggers: i
+            }),
+            s(t(K), {
+              value: c,
+              "corner-radius": n.radius,
+              color: o.labels.map((l) => l.color),
+              "angle-range": d ? [-1.5707963267948966, 1.5707963267948966] : []
+            }, null, 8, ["corner-radius", "color", "angle-range"])
+          ]),
+          _: 1
+        }, 8, ["data", "height"]),
+        J(n.$slots, "default")
+      ]),
+      n.hidePagination ? T("", !0) : (u(), m("div", ae, [
+        s(t(w), { items: n.labels }, null, 8, ["items"])
+      ]))
+    ], 64));
+  }
+});
+var Y = /* @__PURE__ */ ((a) => (a.Half = "half", a.Full = "full", a))(Y || {});
+const fe = /* @__PURE__ */ k({
+  __name: "Crosshair",
+  props: {
+    colors: { default: () => [] },
+    index: {},
+    items: {},
+    customTooltip: {}
+  },
+  setup(a) {
+    const o = a, c = /* @__PURE__ */ new WeakMap();
+    function d(n) {
+      if (c.has(n))
+        return c.get(n);
+      if (typeof window < "u") {
+        const e = document.createElement("div"), l = Object.entries(W(n, [o.index])).map(([r, g]) => ({ ...o.items.find((y) => y.name === r), value: g })), p = o.customTooltip ?? C;
+        return x(p, { title: n[o.index].toString(), data: l }).mount(e), c.set(n, e.innerHTML), e.innerHTML;
+      }
+    }
+    function i(n, e) {
+      return o.colors[e] ?? "transparent";
+    }
+    return (n, e) => (u(), m(L, null, [
+      s(t(C), {
+        "horizontal-shift": 20,
+        "vertical-shift": 20
+      }),
+      s(t(M), {
+        template: d,
+        color: i
+      })
+    ], 64));
+  }
+});
+var ie = /* @__PURE__ */ ((a) => (a.Top = "top", a.Bottom = "bottom", a))(ie || {});
+export {
+  ue as AreaChart,
+  de as AreaStackedChart,
+  me as BarChart,
+  fe as Crosshair,
+  ve as CurveType,
+  ge as DonutChart,
+  Y as DonutType,
+  pe as LineChart,
+  be as Orientation,
+  ie as PaginationPosition,
+  ke as Position
+};