vue-chrts 1.0.2 → 2.0.0-beta.1

package/dist/components/DonutChart/DonutChart.js

@@ -1,17 +1,18 @@
-import { defineComponent as T, useSlots as B, useTemplateRef as P, ref as W, computed as c, createElementBlock as f, openBlock as m, normalizeStyle as s, createVNode as a, createCommentVNode as v, createElementVNode as i, unref as l, withCtx as _, renderSlot as p, toDisplayString as b } from "vue";
-import { Donut as R } from "@unovis/ts";
-import { DonutType as z } from "./types.js";
-import { VisSingleContainer as H, VisTooltip as N, VisDonut as $, VisBulletLegend as j } from "@unovis/vue";
-import { LegendPosition as E } from "../../types.js";
-const M = { style: {
+import { defineComponent as B, useSlots as D, useTemplateRef as P, ref as W, computed as s, createElementBlock as p, openBlock as m, normalizeStyle as d, createVNode as a, createCommentVNode as v, createElementVNode as y, unref as r, withCtx as b, renderSlot as u } from "vue";
+import { Donut as N } from "@unovis/ts";
+import { DonutType as $ } from "./types.js";
+import j from "../Tooltip.js";
+import { VisSingleContainer as z, VisTooltip as H, VisDonut as E, VisBulletLegend as F } from "@unovis/vue";
+import { LegendPosition as O } from "../../types.js";
+const R = { style: {
   position: "absolute",
   top: "50%",
   left: "50%",
   transform: "translate(-50%, -50%)"
-} }, O = {
+} }, M = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, U = { style: { display: "flex", "align-items": "center", padding: "10px 15px" } }, K = /* @__PURE__ */ T({
+}, K = /* @__PURE__ */ B({
   __name: "DonutChart",
   props: {
     type: {},
@@ -20,99 +21,94 @@ const M = { style: {
     height: {},
     radius: {},
     hideLegend: { type: Boolean },
-    legendPosition: { default: E.BottomCenter },
+    legendPosition: { default: O.BottomCenter },
     legendStyle: {},
     categories: {},
-    padAngle: {}
+    padAngle: {},
+    tooltipTitleFormatter: {}
   },
   emits: ["click"],
-  setup(y, { emit: h }) {
-    const C = h, n = y, k = B(), g = P("slotWrapper"), r = W(), V = (e) => e, x = n.type === z.Half;
-    function S(e) {
-      return r.value = e, w();
+  setup(l, { emit: h }) {
+    const C = h, t = l, k = D(), c = P("slotWrapper"), i = W(), T = (e) => e, V = t.type === $.Half;
+    function x(e) {
+      const o = Object.values(t.categories)[e.index].name;
+      return i.value = {
+        label: o,
+        [o]: e.data
+      }, A();
     }
-    function w(e) {
-      return typeof window > "u" ? "" : g.value ? g.value.innerHTML : "";
+    function A() {
+      return typeof window > "u" ? "" : c.value ? c.value.innerHTML : "";
     }
-    const A = c(() => n.legendPosition.includes("top")), D = c(() => n.legendPosition.includes("left") ? "flex-start" : n.legendPosition.includes("right") ? "flex-end" : "center"), d = (e, o = "#ccc") => e ? Array.isArray(e) ? e[0] || o : e : o, u = c(() => Object.values(n.categories)), L = (e, o) => {
-      const t = u.value[o];
-      if (t)
-        return d(t.color);
+    const L = s(() => t.legendPosition.includes("top")), S = s(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center"), g = (e, o = "#ccc") => e ? Array.isArray(e) ? e[0] || o : e : o, f = s(() => Object.values(t.categories)), w = (e, o) => {
+      const n = f.value[o];
+      if (n)
+        return g(n.color);
     };
-    return (e, o) => (m(), f("div", {
-      style: s({
+    return (e, o) => (m(), p("div", {
+      style: d({
         display: "flex",
-        flexDirection: A.value ? "column-reverse" : "column",
+        flexDirection: L.value ? "column-reverse" : "column",
         gap: "var(--vis-legend-spacing)"
       }),
-      onClick: o[0] || (o[0] = (t) => C("click", t, r.value))
+      onClick: o[0] || (o[0] = (n) => C("click", n, i.value))
     }, [
-      a(l(H), {
-        data: e.data,
-        height: e.height,
+      a(r(z), {
+        data: l.data,
+        height: l.height,
         margin: {}
       }, {
-        default: _(() => [
-          a(l(N), {
+        default: b(() => [
+          a(r(H), {
             "horizontal-shift": 20,
             "vertical-shift": 20,
             triggers: {
-              [l(R).selectors.segment]: S
+              [r(N).selectors.segment]: x
             }
           }, null, 8, ["triggers"]),
-          a(l($), {
-            value: V,
-            "corner-radius": e.radius,
-            "arc-width": e.arcWidth ?? 20,
-            color: L,
-            "angle-range": x ? [-1.5707963267948966, 1.5707963267948966] : [],
-            "pad-angle": n.padAngle || 0
+          a(r(E), {
+            value: T,
+            "corner-radius": l.radius,
+            "arc-width": l.arcWidth ?? 20,
+            color: w,
+            "angle-range": V ? [-1.5707963267948966, 1.5707963267948966] : [],
+            "pad-angle": t.padAngle || 0
           }, null, 8, ["corner-radius", "arc-width", "angle-range", "pad-angle"]),
-          i("div", M, [
-            p(e.$slots, "default")
+          y("div", R, [
+            u(e.$slots, "default")
           ])
         ]),
         _: 3
       }, 8, ["data", "height"]),
-      n.hideLegend ? v("", !0) : (m(), f("div", {
+      t.hideLegend ? v("", !0) : (m(), p("div", {
         key: 0,
-        style: s({
+        style: d({
           display: "flex",
-          justifyContent: D.value
+          justifyContent: S.value
         })
       }, [
-        a(l(j), {
-          style: s([
-            n.legendStyle,
+        a(r(F), {
+          style: d([
+            t.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
           ]),
-          items: u.value.map((t) => ({
-            ...t,
-            color: d(t.color)
+          items: f.value.map((n) => ({
+            ...n,
+            color: g(n.color)
           }))
         }, null, 8, ["style", "items"])
       ], 4)),
-      i("div", O, [
-        l(k).tooltip ? p(e.$slots, "tooltip", {
+      y("div", M, [
+        r(k).tooltip ? u(e.$slots, "tooltip", {
           key: 0,
-          values: r.value
-        }) : r.value ? p(e.$slots, "fallback", { key: 1 }, () => {
-          var t;
-          return [
-            i("div", U, [
-              i("div", {
-                style: s({
-                  width: "0.5rem",
-                  height: "0.5rem",
-                  borderRadius: "9999px",
-                  marginRight: "0.5rem",
-                  backgroundColor: d((t = u.value[r.value.index]) == null ? void 0 : t.color)
-                })
-              }, null, 4),
-              i("div", null, b(r.value.data), 1)
-            ])
-          ];
-        }) : v("", !0)
+          values: i.value
+        }) : i.value ? u(e.$slots, "fallback", { key: 1 }, () => [
+          a(j, {
+            data: i.value,
+            categories: t.categories,
+            "title-formatter": t.tooltipTitleFormatter
+          }, null, 8, ["data", "categories", "title-formatter"])
+        ]) : v("", !0)
       ], 512)
     ], 4));
   }

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

@@ -2,7 +2,7 @@ import { DonutChartProps } from './types';
 declare const _default: <T extends {}>(__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<{
         readonly onClick?: ((event: MouseEvent, values?: any) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick"> & DonutChartProps & Partial<{}>> & import('vue').PublicProps;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick"> & DonutChartProps<T> & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {

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

@@ -1,5 +1,5 @@
 import { BulletLegendItemInterface, LegendPosition } from '../../types';
-export type DonutChartProps = {
+export type DonutChartProps<T> = {
     /**
      * The type of donut chart to render.
      * See `DonutType` for available options.
@@ -44,6 +44,10 @@ export type DonutChartProps = {
      * Pad angle. Default: 0
      */
     padAngle?: number;
+    /**
+     * Use custom formatter for tooltip titles
+     */
+    tooltipTitleFormatter?: (data: T) => string | number;
 };
 declare enum DonutType {
     Half = "half",

package/dist/components/GanttChart/GanttChart.js

@@ -1,10 +1,10 @@
-import { defineComponent as V, useSlots as B, useTemplateRef as w, ref as A, computed as s, createElementBlock as g, openBlock as m, normalizeStyle as c, createVNode as o, createCommentVNode as f, createElementVNode as H, unref as i, withCtx as P, mergeProps as F, renderSlot as h } from "vue";
-import { Timeline as y } from "@unovis/ts";
-import { dateFormatter as S, getFirstPropertyValue as N } from "../../utils.js";
-import j from "../Tooltip.js";
-import { VisXYContainer as O, VisTimeline as $, VisTooltip as D, VisAxis as G, VisBulletLegend as M } from "@unovis/vue";
-import { LegendPosition as E } from "../../types.js";
-const I = /* @__PURE__ */ V({
+import { defineComponent as B, useSlots as V, useTemplateRef as w, ref as A, computed as c, createElementBlock as f, openBlock as p, normalizeStyle as d, createVNode as n, createCommentVNode as h, createElementVNode as F, unref as o, withCtx as H, mergeProps as P, renderSlot as y } from "vue";
+import { Timeline as x } from "@unovis/ts";
+import { dateFormatter as S } from "../../utils.js";
+import N from "../Tooltip.js";
+import { VisXYContainer as j, VisTimeline as O, VisTooltip as $, VisAxis as D, VisBulletLegend as G } from "@unovis/vue";
+import { LegendPosition as M } from "../../types.js";
+const I = /* @__PURE__ */ B({
   __name: "GanttChart",
   props: {
     data: {},
@@ -15,6 +15,7 @@ const I = /* @__PURE__ */ V({
     x: {},
     length: {},
     type: {},
+    tooltipTitleFormatter: {},
     getTooltipText: {},
     xNumTicks: {},
     showLabels: { type: Boolean, default: !0 },
@@ -22,7 +23,7 @@ const I = /* @__PURE__ */ V({
     crosshairConfig: {},
     lineWidth: { default: 12 },
     rowHeight: { default: 24 },
-    legendPosition: { default: E.TopRight },
+    legendPosition: { default: M.TopRight },
     legendStyle: {},
     hideLegend: { type: Boolean },
     xTickLine: { type: Boolean },
@@ -35,102 +36,102 @@ const I = /* @__PURE__ */ V({
     yAxisConfig: {}
   },
   emits: ["click", "scroll", "labelHover"],
-  setup(T, { emit: k }) {
-    const l = T, r = k, v = B(), d = w("slotWrapper"), n = A(), x = s(() => l.legendPosition.startsWith("top")), b = s(() => l.legendPosition.includes("left") ? "flex-start" : l.legendPosition.includes("right") ? "flex-end" : "center");
-    y.selectors.label + "";
-    function u(e) {
-      n.value = e, r("labelHover", e);
+  setup(i, { emit: T }) {
+    const e = i, s = T, k = V(), u = w("slotWrapper"), r = A(), v = c(() => e.legendPosition.startsWith("top")), b = c(() => e.legendPosition.includes("left") ? "flex-start" : e.legendPosition.includes("right") ? "flex-end" : "center");
+    x.selectors.label + "";
+    function g(l) {
+      r.value = l, s("labelHover", l);
     }
-    function L(e, a, t) {
-      r("click", t, { index: a, item: e });
+    function L(l, a, t) {
+      s("click", t, { index: a, item: l });
     }
-    function C(e) {
-      r("scroll", e.deltaY);
+    function C(l) {
+      s("scroll", l.deltaY);
     }
-    const W = s(() => {
-      const e = Object.values(l.categories).map(
+    const W = c(() => {
+      const l = Object.values(e.categories).map(
         (a, t) => `var(--vis-color${t})`
       );
-      return Object.values(l.categories).map(
-        (a, t) => a.color ?? e[t]
+      return Object.values(e.categories).map(
+        (a, t) => a.color ?? l[t]
       );
     });
-    return (e, a) => (m(), g("div", {
-      style: c({
+    return (l, a) => (p(), f("div", {
+      style: d({
         display: "flex",
-        flexDirection: x.value ? "column-reverse" : "column",
+        flexDirection: v.value ? "column-reverse" : "column",
         gap: "var(--vis-legend-spacing)"
       })
     }, [
-      o(i(O), {
-        data: l.data,
-        height: l.height,
+      n(o(j), {
+        data: e.data,
+        height: e.height,
         onWheel: C
       }, {
-        default: P(() => [
-          o(i($), {
-            x: l.x,
-            length: l.length,
-            lineWidth: l.lineWidth,
-            rowHeight: l.rowHeight,
-            type: l.type,
+        default: H(() => [
+          n(o(O), {
+            x: e.x,
+            length: e.length,
+            lineWidth: e.lineWidth,
+            rowHeight: e.rowHeight,
+            type: e.type,
             color: W.value,
-            labelWidth: l.labelWidth,
-            showLabels: l.showLabels,
+            labelWidth: e.labelWidth,
+            showLabels: e.showLabels,
             onClick: L
           }, null, 8, ["x", "length", "lineWidth", "rowHeight", "type", "color", "labelWidth", "showLabels"]),
-          o(i(D), {
+          n(o($), {
             triggers: {
-              [i(y).selectors.label]: (t) => {
-                var p;
-                return u(t), t ? (p = d.value) == null ? void 0 : p.innerHTML : "";
+              [o(x).selectors.label]: (t) => {
+                var m;
+                return g(t), t ? (m = u.value) == null ? void 0 : m.innerHTML : "";
               }
             }
           }, null, 8, ["triggers"]),
-          o(i(G), F({
+          n(o(D), P({
             type: "x",
-            tickFormat: e.xTickFormat || i(S),
-            numTicks: e.xNumTicks,
-            "tick-line": e.xTickLine,
-            "grid-line": e.xGridLine,
-            "domain-line": e.xDomainLine
-          }, e.xAxisConfig), null, 16, ["tickFormat", "numTicks", "tick-line", "grid-line", "domain-line"])
+            tickFormat: i.xTickFormat || o(S),
+            numTicks: i.xNumTicks,
+            "tick-line": i.xTickLine,
+            "grid-line": i.xGridLine,
+            "domain-line": i.xDomainLine
+          }, i.xAxisConfig), null, 16, ["tickFormat", "numTicks", "tick-line", "grid-line", "domain-line"])
         ]),
         _: 1
       }, 8, ["data", "height"]),
-      l.hideLegend ? f("", !0) : (m(), g("div", {
+      e.hideLegend ? h("", !0) : (p(), f("div", {
         key: 0,
-        style: c({
+        style: d({
           display: "flex",
           justifyContent: b.value
         })
       }, [
-        o(i(M), {
-          style: c([
-            l.legendStyle,
+        n(o(G), {
+          style: d([
+            e.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
           ]),
-          items: Object.values(l.categories).map((t) => ({
+          items: Object.values(e.categories).map((t) => ({
             ...t,
             color: Array.isArray(t.color) ? t.color[0] : t.color
           }))
         }, null, 8, ["style", "items"])
       ], 4)),
-      H("div", {
+      F("div", {
         ref_key: "slotWrapper",
-        ref: d,
+        ref: u,
         style: { display: "none" }
       }, [
-        i(v).labelTooltip ? h(e.$slots, "labelTooltip", {
+        o(k).labelTooltip ? y(l.$slots, "labelTooltip", {
           key: 0,
-          values: n.value
-        }) : n.value ? h(e.$slots, "fallback", { key: 1 }, () => [
-          o(j, {
-            data: n.value,
-            categories: e.categories,
-            toolTipTitle: i(N)(n.value) ?? ""
-          }, null, 8, ["data", "categories", "toolTipTitle"])
-        ]) : f("", !0)
+          values: r.value
+        }) : r.value ? y(l.$slots, "fallback", { key: 1 }, () => [
+          n(N, {
+            data: r.value,
+            "title-formatter": e.tooltipTitleFormatter,
+            categories: i.categories
+          }, null, 8, ["data", "title-formatter", "categories"])
+        ]) : h("", !0)
       ], 512)
     ], 4));
   }

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

@@ -11,7 +11,7 @@ declare const _default: <T extends Record<string, any>>(__VLS_props: NonNullable
         }) => any) | undefined;
         readonly onScroll?: ((distance: number) => any) | undefined;
         readonly onLabelHover?: ((item: T | undefined) => any) | undefined;
-    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick" | "onScroll" | "onLabelHover"> & GanttChartProps<T> & Partial<{}>> & import('vue').PublicProps;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onScroll" | "onClick" | "onLabelHover"> & GanttChartProps<T> & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: {

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

@@ -43,6 +43,10 @@ export interface GanttChartProps<T> {
      * @returns {string} The type/category identifier.
      */
     type: (d: T) => string;
+    /**
+     * Use custom formatter for tooltip titles
+     */
+    tooltipTitleFormatter?: (data: T) => string | number;
     /**
      * Optional custom tooltip text generator function.
      * @param {string} label - The label of the item.
@@ -102,8 +106,8 @@ export interface GanttChartProps<T> {
     xGridLine?: boolean;
     xDomainLine?: boolean;
     /**
-   * Axis configuration object for customizing the appearance of the axes.
-   */
+     * Axis configuration object for customizing the appearance of the axes.
+     */
     xAxisConfig?: AxisConfig;
     /**
      * Axis configuration object for customizing the appearance of the axes.

package/dist/components/LineChart/LineChart.js

@@ -1,6 +1,6 @@
-import { defineComponent as t, useSlots as a, createBlock as r, openBlock as l, mergeProps as p, createSlots as s, withCtx as y, renderSlot as c, normalizeProps as m, guardReactiveProps as d } from "vue";
+import { defineComponent as n, useSlots as a, createBlock as r, openBlock as l, mergeProps as p, createSlots as s, withCtx as y, renderSlot as c, normalizeProps as m, guardReactiveProps as d } from "vue";
 import x from "../AreaChart/AreaChart.js";
-const u = /* @__PURE__ */ t({
+const g = /* @__PURE__ */ n({
   __name: "LineChart",
   props: {
     data: {},
@@ -12,6 +12,7 @@ const u = /* @__PURE__ */ t({
     markerConfig: {},
     xFormatter: { type: Function },
     yFormatter: { type: Function },
+    tooltipTitleFormatter: { type: Function },
     curveType: {},
     lineWidth: {},
     lineDashArray: {},
@@ -42,8 +43,8 @@ const u = /* @__PURE__ */ t({
     return a(), (e, h) => (l(), r(x, p(i, { "hide-area": !0 }), s({ _: 2 }, [
       e.$slots.tooltip ? {
         name: "tooltip",
-        fn: y((n) => [
-          c(e.$slots, "tooltip", m(d(n)))
+        fn: y((t) => [
+          c(e.$slots, "tooltip", m(d(t)))
         ]),
         key: "0"
       } : void 0
@@ -51,5 +52,5 @@ const u = /* @__PURE__ */ t({
   }
 });
 export {
-  u as default
+  g as default
 };

package/dist/components/Tooltip.js

@@ -1,42 +1,68 @@
-import { defineComponent as y, computed as f, createElementBlock as r, openBlock as i, createElementVNode as e, toDisplayString as l, Fragment as h, renderList as b, normalizeStyle as n } from "vue";
-const x = { style: { padding: "10px 15px" } }, _ = { style: {
-  color: "var(--tooltip-value-color)",
-  textTransform: "capitalize",
-  borderBottom: "1px solid var(--tooltip-border-color)",
-  marginBottom: "0.25rem",
-  paddingBottom: "0.25rem"
-} }, T = /* @__PURE__ */ y({
+import { defineComponent as S, computed as c, createElementBlock as l, openBlock as a, createElementVNode as o, toDisplayString as n, Fragment as z, renderList as B, normalizeStyle as w } from "vue";
+import { getFirstPropertyValue as R } from "../utils.js";
+const j = { style: { display: "flex", "align-items": "center" } }, L = /* @__PURE__ */ S({
   __name: "Tooltip",
   props: {
     data: {},
     categories: {},
-    toolTipTitle: {},
+    titleFormatter: { type: Function },
     yFormatter: { type: Function }
   },
-  setup(d) {
-    const a = d, m = ["_index", "_stacked", "_ending"], g = f(() => Object.entries(a.data ?? []).filter(
-      ([o, u]) => !m.includes(o) && Object.keys(a.categories).includes(o)
-    ));
-    return (o, u) => (i(), r("div", x, [
-      e("div", _, l(o.toolTipTitle), 1),
-      (i(!0), r(h, null, b(g.value, ([t, s], v) => {
-        var p, c;
-        return i(), r("div", {
-          key: t,
-          style: { display: "flex", "align-items": "center", "margin-bottom": "4px" }
+  setup(t) {
+    const e = t, p = c(
+      () => e.titleFormatter ? e.titleFormatter(e.data) : R(e.data)
+    ), m = ["_index", "_stacked", "_ending"], g = c(() => Object.entries(e.data ?? []).filter(
+      ([r, x]) => !m.includes(r) && Object.keys(e.categories).includes(r)
+    )), f = {
+      color: "var(--vis-tooltip-title-color, #000)",
+      textTransform: "var(--vis-tooltip-title-text-transform, capitalize)",
+      borderBottom: "var(--vis-tooltip-title-border-bottom, 1px solid #e5e7eb)",
+      marginBottom: "var(--vis-tooltip-title-margin-bottom, 0.25rem)",
+      paddingBottom: "var(--vis-tooltip-title-padding-bottom, 0.25rem)",
+      padding: "var(--vis-tooltip-title-padding, 0.75rem)",
+      fontSize: "var(--vis-tooltip-title-font-size, 0.875rem)",
+      lineHeight: "var(--vis-tooltip-title-line-height, 100%)",
+      fontWeight: "var(--vis-tooltip-title-font-weight, 600)"
+    }, u = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      paddingRight: "var(--vis-tooltip-entry-padding-right, 1rem)",
+      paddingLeft: "var(--vis-tooltip-entry-padding-left, 1rem)"
+    }, h = {
+      width: "var(--vis-tooltip-dot-width, 8px)",
+      height: "var(--vis-tooltip-dot-height, 8px)",
+      borderRadius: "var(--vis-tooltip-dot-border-radius, 4px)",
+      marginRight: "var(--vis-tooltip-dot-margin-right, 8px)"
+    }, y = {
+      fontWeight: "var(--vis-tooltip-label-font-weight, 400)",
+      fontSize: "var(--vis-tooltip-label-font-size, 0.875rem)",
+      marginRight: "var(--vis-tooltip-label-margin-right, 1rem)",
+      color: "var(--vis-tooltip-label-color)"
+    }, b = {
+      fontSize: "var(--vis-tooltip-value-font-size, 0.875rem)",
+      fontWeight: "var(--vis-tooltip-value-font-weight, 600)",
+      color: "var(--vis-tooltip-value-color)"
+    };
+    return (r, x) => (a(), l("div", null, [
+      o("div", { style: f }, n(p.value), 1),
+      (a(!0), l(z, null, B(g.value, ([i, s], F) => {
+        var v, d;
+        return a(), l("div", {
+          key: i,
+          style: u
         }, [
-          e("span", {
-            style: n([{ width: "8px", height: "8px", "border-radius": "4px", "margin-right": "8px" }, {
-              backgroundColor: typeof ((p = o.categories[t]) == null ? void 0 : p.color) == "string" && ((c = o.categories[t]) != null && c.color) ? o.categories[t].color : `var(--vis-color${v})`
-            }])
-          }, null, 4),
-          e("div", null, [
-            e("span", {
-              style: n([{ "font-weight": "600", "margin-right": "8px" }, { color: "var(--tooltip-label-color)" }])
-            }, l(o.categories[t].name) + ":", 1),
-            e("span", {
-              style: n([{ "font-weight": "400" }, { color: "var(--tooltip-value-color)" }])
-            }, l(o.yFormatter ? o.yFormatter(s) : s), 1)
+          o("div", j, [
+            o("span", {
+              style: w({
+                ...h,
+                backgroundColor: typeof ((v = t.categories[i]) == null ? void 0 : v.color) == "string" && ((d = t.categories[i]) != null && d.color) ? t.categories[i].color : `var(--vis-color${F})`
+              })
+            }, null, 4),
+            o("span", { style: y }, n(t.categories[i].name) + ": ", 1)
+          ]),
+          o("div", null, [
+            o("span", { style: b }, n(t.yFormatter ? t.yFormatter(s) : s), 1)
           ])
         ]);
       }), 128))
@@ -44,5 +70,5 @@ const x = { style: { padding: "10px 15px" } }, _ = { style: {
   }
 });
 export {
-  T as default
+  L as default
 };

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

@@ -3,7 +3,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     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;
+        titleFormatter?: (data: T) => string | number;
         yFormatter?: axisFormatter;
     } & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;

package/dist/types.d.ts

@@ -62,13 +62,18 @@ export interface AxisConfig {
     minMaxTicksOnlyShowGridLines?: boolean;
     tickValues?: readonly number[] | readonly Date[];
 }
-export interface MarkerConfig {
-    type?: "circle" | "square" | "triangle" | "diamond";
-    size?: number;
-    strokeWidth?: number;
-    color?: string;
-    strokeColor?: string;
-}
+export type MarkerConfig = {
+    id: string;
+    config: {
+        [key: string]: {
+            type?: "circle" | "square" | "triangle" | "diamond";
+            size?: number;
+            strokeWidth?: number;
+            color?: string;
+            strokeColor?: string;
+        };
+    };
+};
 export interface CrosshairConfig {
     color?: string;
     strokeColor?: string;

package/dist/utils.d.ts

@@ -2,7 +2,7 @@ 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 function createMarkers(markerConfig: MarkerConfig): string;
 export declare const flattenData: (data: any[], xAxis: string) => {
     month: any;
 }[];