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

package/dist/components/LineChart/LineChart.js

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

package/dist/components/LineChart/LineChart2.js

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

package/dist/components/Tooltip.js

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

package/dist/components/Tooltip2.js

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

package/dist/index.js

@@ -1,16 +0,0 @@
-import { default as a } from "./components/AreaChart/AreaChart.js";
-import { default as o } from "./components/AreaStackedChart/AreaStackedChart.js";
-import { default as d } from "./components/LineChart/LineChart.js";
-import { default as u } from "./components/BarChart/BarChart.js";
-import { default as n } from "./components/DonutChart/DonutChart.js";
-import { CurveType as x, LegendPosition as C, Orientation as h } from "./types.js";
-export {
-  a as AreaChart,
-  o as AreaStackedChart,
-  u as BarChart,
-  x as CurveType,
-  n as DonutChart,
-  C as LegendPosition,
-  d as LineChart,
-  h as Orientation
-};

package/dist/index.js.css

@@ -1 +0,0 @@
-.markers[data-v-f08e19f3] *[stroke="#156F36"]{marker:url(#circle-marker-desktop)}.markers[data-v-f08e19f3] *[stroke="#4ade80"]{marker:url(#circle-marker-mobile)}

package/dist/types.js

@@ -1,6 +0,0 @@
-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 || {});
-export {
-  o as CurveType,
-  l as LegendPosition,
-  t as Orientation
-};

package/dist/utils.js

@@ -1,34 +0,0 @@
-function u($) {
-  if ($ && Object.keys($).length > 0) {
-    const n = Object.keys($)[0];
-    return $[n];
-  }
-}
-const l = ($, n, r, c) => {
-  switch ($) {
-    case "circle":
-      return `<circle cx="${n / 2}" cy="${n / 2}" r="${(n - r) / 2}" stroke-width="${r}" stroke="${c}" fill="none" />`;
-    case "square":
-      return `<rect x="${r / 2}" y="${r / 2}" width="${n - r}" height="${n - r}" stroke-width="${r}" stroke="${c}" fill="none" />`;
-    case "triangle":
-      return `<polygon points="${n / 2},${r / 2} ${n - r / 2},${n - r / 2} ${r / 2},${n - r / 2}" stroke-width="${r}" stroke="${c}" fill="none" />`;
-    case "diamond":
-      return `<polygon points="${n / 2},${r / 2} ${n - r / 2},${n / 2} ${n / 2},${n - r / 2} ${r / 2},${n / 2}" stroke-width="${r}" stroke="${c}" fill="none" />`;
-    default:
-      return "";
-  }
-};
-function o($) {
-  return Object.entries($).map(([n, r]) => {
-    const c = r.type || "circle", e = r.size || 10, t = r.strokeWidth || 2, a = r.color || "#000";
-    return `<marker id="circle-marker-${n}" viewBox="0 0 ${e} ${e}" refX="${e / 2}" refY="${e / 2}" markerWidth="${e / 2}" markerHeight="${e / 2}">
-        ${l(c, e, t, a)}
-      </marker>`;
-  }).join(`
-`);
-}
-export {
-  o as createMarkers,
-  u as getFirstPropertyValue,
-  l as markerShape
-};