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

package/dist/components/LineChart/LineChart.js

@@ -0,0 +1,143 @@
+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

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

package/dist/components/Tooltip.js

@@ -0,0 +1,48 @@
+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

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

package/dist/index.js

@@ -0,0 +1,14 @@
+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

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

package/dist/utils.js

@@ -0,0 +1,49 @@
+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
+};

package/package.json

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