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

package/dist/components/LineChart/LineChart.js

@@ -1,143 +0,0 @@
-import { defineComponent as P, computed as k, useSlots as x, useTemplateRef as O, ref as j, createElementBlock as u, openBlock as n, normalizeClass as g, createVNode as s, createCommentVNode as a, createElementVNode as w, unref as i, withCtx as M, createBlock as m, Fragment as W, 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 z } from "../../utils.js";
-import R from "../Tooltip.js";
-import { VisXYContainer as Y, VisTooltip as S, VisLine as H, VisAxis as T, VisCrosshair as U, VisBulletLegend as q } from "@unovis/vue";
-import { LegendPosition as I } from "../../types.js";
-const J = {
-  ref: "slotWrapper",
-  class: "hidden"
-}, te = /* @__PURE__ */ P({
-  __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 },
-    crosshairConfig: { default: () => ({
-      color: "#666"
-    }) }
-  },
-  emits: ["click"],
-  setup(o, { emit: L }) {
-    const C = L, t = o, b = k(() => t.markerConfig ? $(t.markerConfig) : ""), B = x(), c = O("slotWrapper"), l = j();
-    function D(e) {
-      return typeof window > "u" ? "" : c.value ? c.value.innerHTML : "";
-    }
-    function V(e) {
-      return l.value = e, D();
-    }
-    const p = k(
-      () => t.legendPosition === I.Top
-    ), A = Object.values(t.categories).map(
-      (e, r) => `var(--vis-color${r})`
-    ), F = (e) => Object.values(t.categories)[e].color ?? A[e];
-    return (e, r) => (n(), u("div", {
-      class: g(["flex flex-col space-y-4", {
-        "flex-col-reverse": p.value,
-        markers: !!t.markerConfig
-      }]),
-      onClick: r[0] || (r[0] = (d) => C("click", d, l.value))
-    }, [
-      s(i(Y), {
-        data: e.data,
-        padding: e.padding,
-        height: e.height,
-        svgDefs: b.value
-      }, {
-        default: M(() => [
-          s(i(S), {
-            "horizontal-placement": i(v).Right,
-            "vertical-placement": i(v).Top
-          }, null, 8, ["horizontal-placement", "vertical-placement"]),
-          (n(!0), u(W, null, E(Object.keys(t.categories), (d, y) => (n(), m(i(H), {
-            key: y,
-            x: (f, N) => N,
-            y: (f) => f[d],
-            color: F(y),
-            "curve-type": e.curveType ?? i(X).MonotoneX,
-            "line-width": e.lineWidth,
-            lineDashArray: e.lineDashArray
-          }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"]))), 128)),
-          e.hideXAxis ? a("", !0) : (n(), m(i(T), {
-            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 ? a("", !0) : (n(), m(i(T), {
-            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 ? a("", !0) : (n(), m(i(U), G({ key: 2 }, e.crosshairConfig, { template: V }), null, 16))
-        ]),
-        _: 1
-      }, 8, ["data", "padding", "height", "svgDefs"]),
-      e.hideLegend ? a("", !0) : (n(), u("div", {
-        key: 0,
-        class: g(["flex items center justify-end", { "pb-4": p.value }])
-      }, [
-        s(i(q), {
-          items: Object.values(e.categories)
-        }, null, 8, ["items"])
-      ], 2)),
-      w("div", J, [
-        i(B).tooltip ? h(e.$slots, "tooltip", {
-          key: 0,
-          values: l.value
-        }) : l.value ? h(e.$slots, "fallback", { key: 1 }, () => [
-          s(R, {
-            data: l.value,
-            categories: e.categories,
-            toolTipTitle: i(z)(l.value) ?? "",
-            yFormatter: t.yFormatter
-          }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
-        ]) : a("", !0)
-      ], 512)
-    ], 2));
-  }
-});
-export {
-  te 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 y, renderList as h, normalizeStyle as n } 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)"
-  }
-}, F = /* @__PURE__ */ b({
-  __name: "Tooltip",
-  props: {
-    data: {},
-    categories: {},
-    toolTipTitle: {},
-    yFormatter: { type: Function }
-  },
-  setup(p) {
-    const a = p, d = ["_index", "_stacked", "_ending"], m = v(() => Object.entries(a.data ?? []).filter(
-      ([e, g]) => !d.includes(e) && Object.keys(a.categories).includes(e)
-    ));
-    return (e, g) => (l(), r("div", null, [
-      o("div", f, i(e.toolTipTitle), 1),
-      (l(!0), r(y, null, h(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: n([{ 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: n([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
-            }, i(e.categories[t].name) + ":", 1),
-            o("span", {
-              style: n([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
-            }, i(e.yFormatter ? e.yFormatter(s) : s), 1)
-          ])
-        ]);
-      }), 128))
-    ]));
-  }
-});
-export {
-  F 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,14 +0,0 @@
-import { default as t } 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 p } from "./components/BarChart/BarChart.js";
-import { default as u } from "./components/DonutChart/DonutChart.js";
-import { LegendPosition as h } from "./types.js";
-export {
-  t as AreaChart,
-  o as AreaStackedChart,
-  p as BarChart,
-  u as DonutChart,
-  h as LegendPosition,
-  d as LineChart
-};

package/dist/types.js

@@ -1,4 +0,0 @@
-var o = /* @__PURE__ */ ((t) => (t.Top = "top", t.Bottom = "bottom", t))(o || {});
-export {
-  o as LegendPosition
-};

package/dist/utils.js

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