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

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 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"
-}, Z = /* @__PURE__ */ x({
+}, te = /* @__PURE__ */ P({
   __name: "LineChart",
   props: {
     data: {},
@@ -21,13 +21,16 @@ const S = {
       left: 5
     }) },
     categories: {},
+    markerConfig: {},
     xFormatter: {},
     yFormatter: {},
     curveType: {},
-    xNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
+    lineWidth: { default: 2 },
+    lineDashArray: {},
+    xNumTicks: { default: (o) => o.data.length > 24 ? 24 / 4 : o.data.length - 1 },
     xExplicitTicks: {},
     minMaxTicksOnly: { type: Boolean },
-    yNumTicks: { default: (t) => t.data.length > 24 ? 24 / 4 : t.data.length - 1 },
+    yNumTicks: { default: (o) => o.data.length > 24 ? 24 / 4 : o.data.length - 1 },
     hideTooltip: { type: Boolean },
     hideLegend: { type: Boolean },
     legendPosition: {},
@@ -38,42 +41,53 @@ const S = {
     xTickLine: { type: Boolean },
     yTickLine: { type: Boolean },
     hideXAxis: { type: Boolean },
-    hideYAxis: { type: Boolean }
+    hideYAxis: { type: Boolean },
+    crosshairConfig: { default: () => ({
+      color: "#666"
+    }) }
   },
-  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) {
-      return typeof window > "u" ? "" : u.value ? u.value.innerHTML : "";
+  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 B(e) {
-      return l.value = e, b();
+    function V(e) {
+      return l.value = e, D();
     }
-    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 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))
     }, [
-      r(i($), {
+      s(i(Y), {
         data: e.data,
         padding: e.padding,
-        height: e.height
+        height: e.height,
+        svgDefs: b.value
       }, {
-        default: j(() => [
-          r(i(w), {
-            "horizontal-placement": i(g).Right,
-            "vertical-placement": i(g).Top
+        default: M(() => [
+          s(i(S), {
+            "horizontal-placement": i(v).Right,
+            "vertical-placement": i(v).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
-          }, null, 8, ["x", "y", "color", "curve-type"]))), 128)),
-          e.hideXAxis ? a("", !0) : (o(), s(i(h), {
+          (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,
@@ -84,9 +98,9 @@ const S = {
             "tick-line": e.xTickLine,
             "num-ticks": e.xNumTicks,
             "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), {
+            "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,
@@ -96,32 +110,28 @@ 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), {
-            key: 2,
-            color: "#666",
-            template: B
-          }))
+          e.hideTooltip ? a("", !0) : (n(), m(i(U), G({ key: 2 }, e.crosshairConfig, { template: V }), null, 16))
         ]),
         _: 1
-      }, 8, ["data", "padding", "height"]),
-      e.hideLegend ? a("", !0) : (o(), d("div", {
+      }, 8, ["data", "padding", "height", "svgDefs"]),
+      e.hideLegend ? a("", !0) : (n(), u("div", {
         key: 0,
-        class: k(["flex items center justify-end", { "pb-4": m.value }])
+        class: g(["flex items center justify-end", { "pb-4": p.value }])
       }, [
-        r(i(W), {
+        s(i(q), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
       ], 2)),
-      P("div", S, [
-        i(T).tooltip ? f(e.$slots, "tooltip", {
+      w("div", J, [
+        i(B).tooltip ? h(e.$slots, "tooltip", {
           key: 0,
           values: l.value
-        }) : l.value ? f(e.$slots, "fallback", { key: 1 }, () => [
-          r(X, {
+        }) : l.value ? h(e.$slots, "fallback", { key: 1 }, () => [
+          s(R, {
             data: l.value,
             categories: e.categories,
-            toolTipTitle: i(G)(l.value) ?? "",
-            yFormatter: n.yFormatter
+            toolTipTitle: i(z)(l.value) ?? "",
+            yFormatter: t.yFormatter
           }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
         ]) : a("", !0)
       ], 512)
@@ -129,5 +139,5 @@ const S = {
   }
 });
 export {
-  Z as default
+  te as default
 };

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

@@ -1,6 +1,8 @@
 import { LineChartProps } from './types';
 declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & LineChartProps<T> & Partial<{}>> & import('vue').PublicProps;
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly onClick?: ((event: MouseEvent, values?: T | undefined) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick"> & LineChartProps<T> & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {
@@ -9,7 +11,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         }): any;
         fallback?(_: {}): any;
     };
-    emit: {};
+    emit: (e: "click", event: MouseEvent, values?: T) => void;
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,4 +1,5 @@
-import { axisFormatter, BulletLegendItemInterface, CurveType, LegendPosition } from '../../types';
+import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
+import { axisFormatter, LegendPosition, MarkerConfig } from '../../types';
 export interface LineChartProps<T> {
     /**
      * The data to be displayed in the line chart.
@@ -33,25 +34,37 @@ export interface LineChartProps<T> {
      * This defines the visual representation and labels for each category in the chart's legend.
      */
     categories: Record<string, BulletLegendItemInterface>;
+    /**
+     * A record mapping marker keys to show custom patterns.
+     */
+    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.
      * @param {(number[]|Date[])} ticks - An array of all tick values for the x-axis.
      * @returns {string} The formatted string representation of the tick.
      */
-    xFormatter?: axisFormatter<T>;
+    xFormatter?: axisFormatter;
     /**
      * @param {number|Date} tick - The value of the tick. This can be a number or a Date object depending on the scale of the y-axis.
      * @param {number} i - The index of the tick in the `ticks` array.
      * @param {(number[]|Date[])} ticks - An array of all tick values for the y-axis.
      * @returns {string} The formatted string representation of the tick.
      */
-    yFormatter?: axisFormatter<T>;
+    yFormatter?: axisFormatter;
     /**
      * The type of curve to use for the line chart.
      * See `CurveType` for available options.
      */
     curveType?: CurveType;
+    /**
+     * The width of the line in pixels. Default is 2px.
+     */
+    lineWidth?: number;
+    /**
+     * Line dash array, see SVG's stroke-dasharray. Default: `undefined`
+     */
+    lineDashArray?: number[];
     /**
      * The desired number of ticks on the x-axis.
      */
@@ -113,4 +126,22 @@ export interface LineChartProps<T> {
      * If `true`, hide the y-axis.
      */
     hideYAxis?: boolean;
+    /**
+     * Crosshair configuration object for customizing the appearance of the crosshair line.
+     */
+    crosshairConfig?: {
+        /**
+         * The color of the crosshair line. Accepts any valid CSS color string.
+         * Example: '#f00', 'rgba(0,0,0,0.5)', 'blue'
+         */
+        color?: string;
+        /**
+         * The stroke color of the crosshair line. Accepts any valid CSS color string.
+         */
+        strokeColor?: string;
+        /**
+         * The stroke width of the crosshair line in pixels.
+         */
+        strokeWidth?: number;
+    };
 }

package/dist/components/Tooltip.js

@@ -1,41 +1,41 @@
-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";
+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)"
   }
-}, T = /* @__PURE__ */ b({
+}, F = /* @__PURE__ */ b({
   __name: "Tooltip",
   props: {
     data: {},
     categories: {},
     toolTipTitle: {},
-    yFormatter: {}
+    yFormatter: { type: Function }
   },
   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)
+    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(h, null, y(m.value, ([t, s], u) => {
+      (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: a([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, {
+            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: a([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
+              style: n([{ "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)" }])
+              style: n([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
             }, i(e.yFormatter ? e.yFormatter(s) : s), 1)
           ])
         ]);
@@ -44,5 +44,5 @@ const f = {
   }
 });
 export {
-  T as default
+  F as default
 };

package/dist/components/Tooltip.vue.d.ts

@@ -1,10 +1,11 @@
-import { axisFormatter, BulletLegendItemInterface } from '../types';
+import { axisFormatter } from '../types';
+import { BulletLegendItemInterface } from '@unovis/ts';
 declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, never> & {
         data: T;
         categories: Record<string, BulletLegendItemInterface>;
         toolTipTitle: string | number;
-        yFormatter?: axisFormatter<T>;
+        yFormatter?: axisFormatter;
     } & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;

package/dist/index.d.ts

@@ -3,6 +3,5 @@ import { default as AreaStackedChart } from './components/AreaStackedChart/AreaS
 import { default as LineChart } from './components/LineChart/LineChart.vue';
 import { default as BarChart } from './components/BarChart/BarChart.vue';
 import { default as DonutChart } from './components/DonutChart/DonutChart.vue';
-import { LegendPosition, CurveType, Orientation, BulletLegendItemInterface } from './types';
-export { AreaChart, AreaStackedChart, LineChart, BarChart, DonutChart, Orientation, CurveType, LegendPosition };
-export type { BulletLegendItemInterface, };
+import { LegendPosition } from './types';
+export { AreaChart, AreaStackedChart, LineChart, BarChart, DonutChart, LegendPosition };

package/dist/index.js

@@ -1,16 +1,14 @@
-import { default as a } from "./components/AreaChart/AreaChart.js";
+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 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";
+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 {
-  a as AreaChart,
+  t as AreaChart,
   o as AreaStackedChart,
-  u as BarChart,
-  x as CurveType,
-  n as DonutChart,
-  C as LegendPosition,
-  d as LineChart,
-  h as Orientation
+  p as BarChart,
+  u as DonutChart,
+  h as LegendPosition,
+  d as LineChart
 };

package/dist/types.d.ts

@@ -1,43 +1,12 @@
-import { AreaChartProps } from './components/AreaChart/types';
-import { BarChartProps } from './components/BarChart/types';
-import { LineChartProps } from './components/LineChart/types';
-import { DonutChartProps } from './components/DonutChart/types';
-declare enum LegendPosition {
+export declare enum LegendPosition {
     Top = "top",
     Bottom = "bottom"
 }
-declare enum CurveType {
-    Basis = "basis",
-    BasisClosed = "basisClosed",
-    BasisOpen = "basisOpen",
-    Bundle = "bundle",
-    Cardinal = "cardinal",
-    CardinalClosed = "cardinalClosed",
-    CardinalOpen = "cardinalOpen",
-    CatmullRom = "catmullRom",
-    CatmullRomClosed = "catmullRomClosed",
-    CatmullRomOpen = "catmullRomOpen",
-    Linear = "linear",
-    LinearClosed = "linearClosed",
-    MonotoneX = "monotoneX",
-    MonotoneY = "monotoneY",
-    Natural = "natural",
-    Step = "step",
-    StepAfter = "stepAfter",
-    StepBefore = "stepBefore"
-}
-interface BulletLegendItemInterface {
-    name: string | number;
+export type axisFormatter = ((tick: number, i?: number, ticks?: number[]) => string) | ((tick: Date, i?: number, ticks?: Date[]) => string);
+export interface MarkerConfig {
+    type?: "circle" | "square" | "triangle" | "diamond";
+    size?: number;
+    strokeWidth?: number;
     color?: string;
-    className?: string;
-    shape?: any;
-    inactive?: boolean;
-    hidden?: boolean;
-    pointer?: boolean;
-}
-declare enum Orientation {
-    Horizontal = "horizontal",
-    Vertical = "vertical"
+    strokeColor?: string;
 }
-export { LegendPosition, CurveType, Orientation, type AreaChartProps, type BarChartProps, type LineChartProps, type DonutChartProps, type BulletLegendItemInterface, };
-export type axisFormatter<T> = ((tick: number, i?: number, ticks?: number[]) => string) | ((tick: Date, i?: number, ticks?: Date[]) => string);

package/dist/types.js

@@ -1,6 +1,4 @@
-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 || {});
+var o = /* @__PURE__ */ ((t) => (t.Top = "top", t.Bottom = "bottom", t))(o || {});
 export {
-  o as CurveType,
-  l as LegendPosition,
-  t as Orientation
+  o as LegendPosition
 };

package/dist/utils.d.ts

@@ -1,2 +1,8 @@
+import { MarkerConfig } from './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, strokeColor: string) => string;
+export declare function createMarkers(markerConfig: Record<string, MarkerConfig>): string;
+export declare const flattenData: (data: any[], xAxis: string) => {
+    month: any;
+}[];

package/dist/utils.js

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

package/package.json

@@ -1,17 +1,16 @@
 {
   "name": "vue-chrts",
-  "version": "0.2.0-test.1",
+  "version": "0.2.0-test.10",
   "type": "module",
   "files": [
     "dist"
   ],
-  "main": "./dist/index.umd.cjs",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.umd.cjs"
+      "import": "./dist/index.js"
     }
   },
   "scripts": {
@@ -21,26 +20,28 @@
     "release": "commit-and-tag-version"
   },
   "dependencies": {
-    "@unovis/ts": "^1.5.2"
+    "@unovis/ts": "^1.5.2",
+    "@unovis/vue": "^1.5.2"
   },
   "peerDependencies": {
     "vue": "^3.5.13"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "^4.0.15",
-    "@tanstack/vue-table": "^8.21.2",
-    "@types/node": "^22.13.11",
+    "@tailwindcss/vite": "^4.1.11",
+    "@tanstack/vue-table": "^8.21.3",
+    "@types/node": "^22.16.5",
+    "@unovis/ts": "^1.5.2",
     "@unovis/vue": "^1.5.2",
-    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue": "^5.2.4",
     "@vue/tsconfig": "^0.7.0",
-    "@vueuse/core": "^13.0.0",
+    "@vueuse/core": "^13.5.0",
     "commit-and-tag-version": "^12.5.1",
-    "tailwindcss": "^4.0.15",
-    "typescript": "~5.7.2",
-    "vite": "^6.2.0",
-    "vite-plugin-dts": "^4.5.3",
-    "vue-router": "^4.5.0",
-    "vue-tsc": "^2.2.4"
+    "tailwindcss": "^4.1.11",
+    "typescript": "~5.7.3",
+    "vite": "^6.3.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vue-router": "^4.5.1",
+    "vue-tsc": "^2.2.12"
   },
   "packageManager": "pnpm@8.15.4+sha256.cea6d0bdf2de3a0549582da3983c70c92ffc577ff4410cbf190817ddc35137c2"
 }