vue-chrts 0.2.0-test.1 → 0.2.0-test.3

package/dist/components/LineChart/LineChart.js

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

package/dist/components/LineChart/types.d.ts

@@ -1,4 +1,10 @@
 import { axisFormatter, BulletLegendItemInterface, CurveType, LegendPosition } from '../../types';
+export type MarkerConfig = {
+    type: 'circle' | 'square' | 'triangle' | 'diamond';
+    size?: number;
+    strokeWidth?: number;
+    color?: string;
+};
 export interface LineChartProps<T> {
     /**
      * The data to be displayed in the line chart.
@@ -33,6 +39,7 @@ export interface LineChartProps<T> {
      * This defines the visual representation and labels for each category in the chart's legend.
      */
     categories: Record<string, BulletLegendItemInterface>;
+    markerConfig?: Record<string, MarkerConfig>;
     /**
      * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the x-axis.
      * @param {number} i - The index of the tick in the `ticks` array.

package/dist/utils.d.ts

@@ -1,2 +1,5 @@
+import { MarkerConfig } from './components/LineChart/types';
 export declare function getDistributedIndices(length: number, numTicks: number): number[];
 export declare function getFirstPropertyValue(obj: unknown): undefined;
+export declare const markerShape: (type: string, size: number, strokeWidth: number, color: string) => string;
+export declare function createMarkers(markerConfig: Record<string, MarkerConfig>): string;

package/dist/utils.js

@@ -1,9 +1,34 @@
-function r(e) {
-  if (e && Object.keys(e).length > 0) {
-    const t = Object.keys(e)[0];
-    return e[t];
+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 {
-  r as getFirstPropertyValue
+  o as createMarkers,
+  u as getFirstPropertyValue,
+  l as markerShape
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chrts",
-  "version": "0.2.0-test.1",
+  "version": "0.2.0-test.3",
   "type": "module",
   "files": [
     "dist"
@@ -20,9 +20,6 @@
     "preview": "vite preview",
     "release": "commit-and-tag-version"
   },
-  "dependencies": {
-    "@unovis/ts": "^1.5.2"
-  },
   "peerDependencies": {
     "vue": "^3.5.13"
   },
@@ -30,6 +27,7 @@
     "@tailwindcss/vite": "^4.0.15",
     "@tanstack/vue-table": "^8.21.2",
     "@types/node": "^22.13.11",
+    "@unovis/ts": "^1.5.2",
     "@unovis/vue": "^1.5.2",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/tsconfig": "^0.7.0",