vue-chrts 0.2.0-test.6 → 0.2.0-test.7

package/package.json

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

package/dist/components/AreaChart/AreaChart.js

@@ -1,163 +0,0 @@
-import { defineComponent as U, useSlots as j, useTemplateRef as w, ref as R, computed as d, createElementBlock as c, openBlock as a, normalizeClass as T, createVNode as u, createCommentVNode as p, createElementVNode as X, unref as i, withCtx as x, createBlock as m, Fragment as L, renderList as S, mergeProps as C, renderSlot as b } from "vue";
-import { Position as A, CurveType as B } from "@unovis/ts";
-import { createMarkers as Y, getFirstPropertyValue as z } from "../../utils.js";
-import I from "../Tooltip.js";
-import { VisXYContainer as H, VisTooltip as K, VisArea as q, VisLine as J, VisAxis as D, VisCrosshair as Q, VisBulletLegend as Z } from "@unovis/vue";
-import { LegendPosition as _ } from "../../types.js";
-const ee = {
-  ref: "slotWrapper",
-  class: "hidden"
-}, y = 24, V = 4, te = 0.5, F = "#3b82f6", se = /* @__PURE__ */ U({
-  __name: "AreaChart",
-  props: {
-    data: {},
-    height: {},
-    xLabel: {},
-    yLabel: {},
-    padding: { default: () => ({ top: 5, right: 5, bottom: 5, left: 5 }) },
-    categories: {},
-    markerConfig: {},
-    xFormatter: {},
-    yFormatter: {},
-    curveType: {},
-    lineWidth: { default: 2 },
-    lineDashArray: {},
-    xNumTicks: { default: (n) => n.data.length > y ? y / V : n.data.length - 1 },
-    xExplicitTicks: {},
-    minMaxTicksOnly: { type: Boolean },
-    yNumTicks: { default: (n) => n.data.length > y ? y / V : n.data.length - 1 },
-    hideLegend: { type: Boolean },
-    hideTooltip: { type: Boolean },
-    legendPosition: {},
-    xDomainLine: { type: Boolean },
-    yDomainLine: { type: Boolean },
-    xTickLine: { type: Boolean },
-    yTickLine: { type: Boolean },
-    xGridLine: { type: Boolean },
-    yGridLine: { type: Boolean },
-    hideXAxis: { type: Boolean },
-    hideYAxis: { type: Boolean },
-    crosshairConfig: { default: () => ({
-      color: "#666"
-    }) }
-  },
-  emits: ["click"],
-  setup(n, { emit: $ }) {
-    const G = $, r = n, O = j(), h = w("slotWrapper"), s = R(), f = d(
-      () => Object.values(r.categories).map((e) => e.color)
-    ), N = d(() => r.markerConfig ? Y(r.markerConfig) : ""), g = d(() => r.legendPosition === _.Top), E = d(() => {
-      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" />
-    </linearGradient>
-  `, l = (t, o) => `
-    <linearGradient id="gradient${t}-${o}" 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)
-      ).join("");
-    });
-    function P(e) {
-      var l;
-      return {
-        y: (t) => Number(t[e]),
-        color: ((l = r.categories[e]) == null ? void 0 : l.color) ?? F
-      };
-    }
-    function W(e) {
-      return typeof window > "u" ? "" : h.value ? h.value.innerHTML : "";
-    }
-    function M(e) {
-      return s.value = e, W();
-    }
-    return (e, l) => (a(), c("div", {
-      class: T(["flex flex-col", { "flex-col-reverse": g.value, markers: !!r.markerConfig }]),
-      onClick: l[0] || (l[0] = (t) => G("click", t, s.value))
-    }, [
-      u(i(H), {
-        data: e.data,
-        height: e.height,
-        padding: e.padding,
-        "svg-defs": E.value + N.value
-      }, {
-        default: x(() => [
-          e.hideTooltip ? p("", !0) : (a(), m(i(K), {
-            key: 0,
-            "horizontal-placement": i(A).Right,
-            "vertical-placement": i(A).Top
-          }, null, 8, ["horizontal-placement", "vertical-placement"])),
-          (a(!0), c(L, null, S(Object.keys(r.categories), (t, o) => (a(), c(L, { key: t }, [
-            u(i(q), C({
-              x: (k, v) => v
-            }, { ref_for: !0 }, P(t), {
-              color: `url(#gradient${o}-${f.value[o]})`,
-              opacity: te,
-              "curve-type": e.curveType ?? i(B).MonotoneX
-            }), null, 16, ["x", "color", "curve-type"]),
-            u(i(J), {
-              x: (k, v) => v,
-              y: (k) => k[t],
-              color: f.value[o],
-              "curve-type": e.curveType ?? i(B).MonotoneX,
-              "line-width": e.lineWidth,
-              lineDashArray: e.lineDashArray
-            }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"])
-          ], 64))), 128)),
-          e.hideXAxis ? p("", !0) : (a(), m(i(D), {
-            key: 1,
-            type: "x",
-            label: e.xLabel,
-            "label-margin": 8,
-            "num-ticks": e.xNumTicks,
-            "tick-format": e.xFormatter,
-            "tick-values": e.xExplicitTicks,
-            "grid-line": e.xGridLine,
-            "domain-line": e.xDomainLine,
-            "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 ? p("", !0) : (a(), m(i(D), {
-            key: 2,
-            type: "y",
-            label: e.yLabel,
-            "num-ticks": e.yNumTicks,
-            "tick-format": e.yFormatter,
-            "grid-line": e.yGridLine,
-            "domain-line": e.yDomainLine,
-            "tick-line": e.yTickLine
-          }, null, 8, ["label", "num-ticks", "tick-format", "grid-line", "domain-line", "tick-line"])),
-          e.hideTooltip ? p("", !0) : (a(), m(i(Q), C({ key: 3 }, e.crosshairConfig, { template: M }), null, 16))
-        ]),
-        _: 1
-      }, 8, ["data", "height", "padding", "svg-defs"]),
-      e.hideLegend ? p("", !0) : (a(), c("div", {
-        key: 0,
-        class: T(["flex items-center justify-end", { "pb-4": g.value, "pt-4": !g.value }])
-      }, [
-        u(i(Z), {
-          items: Object.values(e.categories)
-        }, null, 8, ["items"])
-      ], 2)),
-      X("div", ee, [
-        i(O).tooltip ? b(e.$slots, "tooltip", {
-          key: 0,
-          values: s.value
-        }) : s.value ? b(e.$slots, "fallback", { key: 1 }, () => [
-          u(I, {
-            data: s.value,
-            categories: e.categories,
-            toolTipTitle: i(z)(s.value) ?? "",
-            yFormatter: r.yFormatter
-          }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
-        ]) : p("", !0)
-      ], 512)
-    ], 2));
-  }
-});
-export {
-  se as default
-};

package/dist/components/AreaChart/AreaChart2.js

@@ -1,4 +0,0 @@
-import f from "./AreaChart.js";
-export {
-  f as default
-};

package/dist/components/AreaStackedChart/AreaStackedChart.js

@@ -1,77 +0,0 @@
-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({
-  __name: "AreaStackedChart",
-  props: {
-    data: {},
-    height: {},
-    categories: {},
-    hideTooltip: { type: Boolean },
-    xLabel: {},
-    yLabel: {},
-    padding: {},
-    hideLegend: { type: Boolean },
-    xGridLine: { type: Boolean },
-    xDomainLine: { type: Boolean },
-    yGridLine: { type: Boolean },
-    yDomainLine: { type: Boolean },
-    xTickLine: { type: Boolean },
-    yTickLine: { type: Boolean },
-    crosshairConfig: {}
-  },
-  setup(c) {
-    const i = c, l = f(() => (e, m) => {
-      if (typeof window > "u" || typeof document > "u")
-        return "";
-      try {
-        const o = h(N, {
-          data: e,
-          categories: i.categories
-        }), r = document.createElement("div");
-        o.mount(r);
-        const u = r.innerHTML;
-        return o.unmount(), u;
-      } 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
-      }, {
-        default: L(() => [
-          n(t(x), {
-            x: p,
-            y: d,
-            color: Object.values(i.categories).map((o) => o.color),
-            "curve-type": t(_).Linear
-          }, null, 8, ["color", "curve-type"]),
-          n(t(s), {
-            type: "x",
-            label: "Time",
-            "num-ticks": 12
-          }),
-          n(t(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"]))
-        ]),
-        _: 1
-      }, 8, ["data", "padding", "height"]),
-      B("div", j, [
-        n(t(V), {
-          items: Object.values(e.categories)
-        }, null, 8, ["items"])
-      ])
-    ]));
-  }
-});
-export {
-  O as default
-};

package/dist/components/AreaStackedChart/AreaStackedChart2.js

@@ -1,4 +0,0 @@
-import f from "./AreaStackedChart.js";
-export {
-  f as default
-};

package/dist/components/BarChart/BarChart.js

@@ -1,170 +0,0 @@
-import { defineComponent as C, useSlots as N, useTemplateRef as O, ref as D, computed as T, createElementBlock as m, openBlock as n, normalizeClass as L, createVNode as g, createCommentVNode as c, createElementVNode as w, unref as i, withCtx as E, createBlock as u, Fragment as M, renderList as S, renderSlot as v } from "vue";
-import { Orientation as l, StackedBar as j, GroupedBar as z } from "@unovis/ts";
-import { getFirstPropertyValue as H } from "../../utils.js";
-import { useStackedGrouped as W } from "./stackedGroupedUtils.js";
-import { VisXYContainer as X, VisTooltip as Y, VisStackedBar as B, VisGroupedBar as $, VisAxis as A, VisBulletLegend as R } from "@unovis/vue";
-import q from "../Tooltip.js";
-import { LegendPosition as U } from "../../types.js";
-const I = {
-  ref: "slotWrapper",
-  class: "hidden"
-}, ae = /* @__PURE__ */ C({
-  __name: "BarChart",
-  props: {
-    data: {},
-    stacked: { type: Boolean },
-    height: {},
-    xLabel: {},
-    yLabel: {},
-    padding: { default: () => ({
-      top: 5,
-      right: 5,
-      bottom: 5,
-      left: 5
-    }) },
-    categories: {},
-    xFormatter: {},
-    yFormatter: {},
-    yNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
-    minMaxTicksOnly: { type: Boolean },
-    xNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
-    xExplicitTicks: {},
-    yAxis: {},
-    groupPadding: {},
-    barPadding: {},
-    radius: {},
-    hideLegend: { type: Boolean },
-    hideTooltip: { type: Boolean, default: !1 },
-    orientation: { default: l.Vertical },
-    legendPosition: {},
-    xDomainLine: { type: Boolean },
-    yDomainLine: { type: Boolean },
-    xTickLine: { type: Boolean },
-    yTickLine: { type: Boolean },
-    xGridLine: { type: Boolean },
-    yGridLine: { type: Boolean, default: !0 },
-    hideXAxis: { type: Boolean },
-    hideYAxis: { type: Boolean },
-    stackAndGrouped: { type: Boolean },
-    xAxis: {}
-  },
-  emits: ["click"],
-  setup(t, { emit: V }) {
-    const x = V, a = t, P = N(), y = O("slotWrapper"), r = D();
-    if (!a.yAxis || a.yAxis.length === 0)
-      throw new Error("yAxis is required");
-    const k = T(() => a.yAxis.map((e) => (d) => d[e])), f = (e, d) => {
-      var o;
-      return (o = Object.values(a.categories)[d]) == null ? void 0 : o.color;
-    }, s = W({
-      data: a.data,
-      categories: a.categories,
-      stackAndGrouped: a.stackAndGrouped,
-      xAxis: a.xAxis
-    }), h = T(
-      () => a.legendPosition === U.Top
-    );
-    function b(e) {
-      return r.value = e, G();
-    }
-    function G(e) {
-      return typeof window > "u" ? "" : y.value ? y.value.innerHTML : "";
-    }
-    return (e, d) => (n(), m("div", {
-      class: L(["flex flex-col space-y-4", { "flex-col-reverse": h.value }]),
-      onClick: d[0] || (d[0] = (o) => x("click", o, r.value))
-    }, [
-      g(i(X), {
-        padding: e.padding,
-        height: e.height
-      }, {
-        default: E(() => [
-          g(i(Y), {
-            triggers: {
-              [i(z).selectors.bar]: b,
-              [i(j).selectors.bar]: b
-            }
-          }, null, 8, ["triggers"]),
-          e.stackAndGrouped ? (n(!0), m(M, { key: 0 }, S(i(s).states, (o) => (n(), u(i(B), {
-            key: o,
-            data: i(s).chartData,
-            x: (p, F) => F + i(s).positions[o],
-            y: i(s).bars[o],
-            color: i(s).colorFunctions[o],
-            "rounded-corners": e.radius ?? 0,
-            "group-padding": e.groupPadding ?? 0,
-            "bar-padding": e.barPadding ?? 0.2,
-            orientation: e.orientation ?? i(l).Vertical
-          }, null, 8, ["data", "x", "y", "color", "rounded-corners", "group-padding", "bar-padding", "orientation"]))), 128)) : e.stacked ? (n(), u(i(B), {
-            key: 2,
-            data: e.data,
-            x: (o, p) => p,
-            y: k.value,
-            color: f,
-            "rounded-corners": e.radius ?? 0,
-            "group-padding": e.groupPadding ?? 0,
-            "bar-padding": e.barPadding ?? 0.2,
-            orientation: e.orientation ?? i(l).Vertical
-          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])) : (n(), u(i($), {
-            key: 1,
-            data: e.data,
-            x: (o, p) => p,
-            y: k.value,
-            color: f,
-            "rounded-corners": e.radius ?? 0,
-            "group-padding": e.groupPadding ?? 0,
-            "bar-padding": e.barPadding ?? 0.2,
-            orientation: e.orientation ?? i(l).Vertical
-          }, null, 8, ["data", "x", "y", "rounded-corners", "group-padding", "bar-padding", "orientation"])),
-          e.hideXAxis ? c("", !0) : (n(), u(i(A), {
-            key: 3,
-            type: "x",
-            "tick-format": e.xFormatter,
-            label: e.xLabel,
-            "grid-line": e.xGridLine,
-            "domain-line": !!e.xDomainLine,
-            "tick-line": e.xTickLine,
-            "num-ticks": e.xNumTicks,
-            "tick-values": e.xExplicitTicks,
-            minMaxTicksOnly: e.minMaxTicksOnly
-          }, null, 8, ["tick-format", "label", "grid-line", "domain-line", "tick-line", "num-ticks", "tick-values", "minMaxTicksOnly"])),
-          e.hideYAxis ? c("", !0) : (n(), u(i(A), {
-            key: 4,
-            type: "y",
-            label: e.yLabel,
-            "grid-line": e.orientation !== i(l).Horizontal && e.yGridLine,
-            "domain-line": !!e.yDomainLine,
-            "tick-format": e.yFormatter,
-            "num-ticks": e.yNumTicks,
-            "tick-line": e.yTickLine
-          }, null, 8, ["label", "grid-line", "domain-line", "tick-format", "num-ticks", "tick-line"]))
-        ]),
-        _: 1
-      }, 8, ["padding", "height"]),
-      e.hideLegend ? c("", !0) : (n(), m("div", {
-        key: 0,
-        class: L(["flex items center justify-end", { "pb-4": h.value }])
-      }, [
-        g(i(R), {
-          items: Object.values(a.categories)
-        }, null, 8, ["items"])
-      ], 2)),
-      w("div", I, [
-        i(P).tooltip ? v(e.$slots, "tooltip", {
-          key: 0,
-          values: r.value
-        }) : r.value ? v(e.$slots, "fallback", { key: 1 }, () => [
-          g(q, {
-            data: r.value,
-            categories: a.categories,
-            toolTipTitle: i(H)(r.value) ?? "",
-            yFormatter: a.orientation === i(l).Horizontal ? a.xFormatter : a.yFormatter
-          }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
-        ]) : c("", !0)
-      ], 512)
-    ], 2));
-  }
-});
-export {
-  ae as default
-};

package/dist/components/BarChart/BarChart2.js

@@ -1,4 +0,0 @@
-import f from "./BarChart.js";
-export {
-  f as default
-};

package/dist/components/BarChart/stackedGroupedUtils.js

@@ -1,67 +0,0 @@
-import { computed as u } from "vue";
-import { flattenData as i } from "../../utils.js";
-function b(t) {
-  return u(() => {
-    const o = f(t.categories), e = l(t.categories, o), r = p(e, t.categories), c = d(e), n = m(r), s = h(o);
-    console.log(t, "config");
-    const a = t.stackAndGrouped ? i(t.data, t.xAxis) : t.data;
-    return {
-      states: o,
-      groupedByState: e,
-      colors: r,
-      bars: c,
-      colorFunctions: n,
-      positions: s,
-      chartData: a
-    };
-  });
-}
-function f(t) {
-  const o = /* @__PURE__ */ new Set();
-  return Object.keys(t).forEach((r) => {
-    const c = r.match(/([A-Z][a-z]+)$/);
-    c && o.add(c[1]);
-  }), Array.from(o);
-}
-function l(t, o) {
-  const e = {};
-  return o.forEach((r) => {
-    e[r] = Object.keys(t).filter(
-      (c) => c.endsWith(r)
-    );
-  }), e;
-}
-function p(t, o) {
-  const e = {};
-  return Object.entries(t).forEach(([r, c]) => {
-    e[r] = c.map((n) => {
-      var s;
-      return ((s = o[n]) == null ? void 0 : s.color) ?? "#ccc";
-    });
-  }), e;
-}
-function d(t) {
-  const o = {};
-  return Object.entries(t).forEach(([e, r]) => {
-    o[e] = r.map((c) => {
-      const n = c.replace(e, "").toLowerCase();
-      return (s) => s[n + e];
-    });
-  }), o;
-}
-function m(t) {
-  const o = {};
-  return Object.entries(t).forEach(([e, r]) => {
-    o[e] = (c, n) => r[n] ?? "#ccc";
-  }), o;
-}
-function h(t) {
-  const o = t.length, e = 0.4, r = {};
-  return t.forEach((c, n) => {
-    const s = (n - (o - 1) / 2) * e;
-    r[c] = s;
-  }), r;
-}
-export {
-  b as useStackedGrouped
-};

package/dist/components/DonutChart/DonutChart.js

@@ -1,83 +0,0 @@
-import { defineComponent as V, useSlots as b, useTemplateRef as D, ref as S, createElementBlock as d, openBlock as c, Fragment as T, createElementVNode as o, createCommentVNode as p, createVNode as r, renderSlot as a, unref as l, withCtx as w, normalizeStyle as B, toDisplayString as L } from "vue";
-import { Donut as $ } from "@unovis/ts";
-import { DonutType as H } from "./types.js";
-import { VisSingleContainer as N, VisTooltip as W, VisDonut as _, VisBulletLegend as j } from "@unovis/vue";
-const z = {
-  ref: "slotWrapper",
-  class: "hidden"
-}, A = { class: "flex items-center" }, E = {
-  key: 0,
-  class: "flex items-center justify-center mt-4"
-}, q = /* @__PURE__ */ V({
-  __name: "DonutChart",
-  props: {
-    type: {},
-    data: {},
-    height: {},
-    radius: {},
-    hideLegend: { type: Boolean },
-    labels: {},
-    padAngle: {}
-  },
-  emits: ["click"],
-  setup(f, { emit: m }) {
-    const g = m, n = f, h = b(), i = D("slotWrapper"), t = S(), v = (e) => e, y = n.type === H.Half;
-    function k(e) {
-      return t.value = e, C();
-    }
-    function C(e) {
-      return typeof window > "u" ? "" : i.value ? i.value.innerHTML : "";
-    }
-    return (e, u) => (c(), d(T, null, [
-      o("div", {
-        class: "flex items-center justify-center",
-        onClick: u[0] || (u[0] = (s) => g("click", s, t.value))
-      }, [
-        r(l(N), {
-          data: e.data,
-          height: e.height,
-          margin: {}
-        }, {
-          default: w(() => [
-            r(l(W), {
-              "horizontal-shift": 20,
-              "vertical-shift": 20,
-              triggers: {
-                [l($).selectors.segment]: k
-              }
-            }, null, 8, ["triggers"]),
-            r(l(_), {
-              value: v,
-              "corner-radius": e.radius,
-              color: n.labels.map((s) => s.color),
-              "angle-range": y ? [-1.5707963267948966, 1.5707963267948966] : [],
-              "pad-angle": n.padAngle || 0
-            }, null, 8, ["corner-radius", "color", "angle-range", "pad-angle"])
-          ]),
-          _: 1
-        }, 8, ["data", "height"]),
-        a(e.$slots, "default"),
-        o("div", z, [
-          l(h).tooltip ? a(e.$slots, "tooltip", {
-            key: 0,
-            values: t.value
-          }) : t.value ? a(e.$slots, "fallback", { key: 1 }, () => [
-            o("div", A, [
-              o("div", {
-                class: "w-2 h-2 rounded-full mr-2",
-                style: B(`background-color: ${n.labels[t.value.index].color} ;`)
-              }, null, 4),
-              o("div", null, L(t.value.data), 1)
-            ])
-          ]) : p("", !0)
-        ], 512)
-      ]),
-      e.hideLegend ? p("", !0) : (c(), d("div", E, [
-        r(l(j), { items: e.labels }, null, 8, ["items"])
-      ]))
-    ], 64));
-  }
-});
-export {
-  q as default
-};

package/dist/components/DonutChart/DonutChart2.js

@@ -1,4 +0,0 @@
-import f from "./DonutChart.js";
-export {
-  f as default
-};

package/dist/components/DonutChart/types.js

@@ -1,4 +0,0 @@
-var r = /* @__PURE__ */ ((l) => (l.Half = "half", l.Full = "full", l))(r || {});
-export {
-  r as DonutType
-};