vue-chrts 0.1.12-test.2 → 0.2.0-beta.1

package/dist/components/AreaChart/AreaChart.js

@@ -1,30 +1,31 @@
-import { defineComponent as O, computed as g, createApp as $, createElementBlock as c, openBlock as o, normalizeClass as T, createVNode as p, createCommentVNode as s, unref as i, withCtx as E, createBlock as d, Fragment as h, renderList as G, mergeProps as N } from "vue";
-import { Position as v, CurveType as L } from "@unovis/ts";
-import { VisXYContainer as P, VisTooltip as j, VisArea as I, VisLine as M, VisAxis as b, VisCrosshair as S, VisBulletLegend as U } from "@unovis/vue";
-import X from "../Tooltip.js";
-import { LegendPosition as Y } from "../../types.js";
-import { getFirstPropertyValue as w } from "../../utils.js";
-const m = 24, B = 4, z = 0.5, C = "#3b82f6", Z = /* @__PURE__ */ O({
+import { defineComponent as U, useSlots as j, useTemplateRef as w, ref as R, computed as d, createElementBlock as c, openBlock as a, normalizeClass as T, createVNode as u, createCommentVNode as p, createElementVNode as X, unref as i, withCtx as x, createBlock as m, Fragment as L, renderList as S, mergeProps as C, renderSlot as b } from "vue";
+import { Position as A, CurveType as B } from "@unovis/ts";
+import { createMarkers as Y, getFirstPropertyValue as z } from "../../utils.js";
+import I from "../Tooltip.js";
+import { VisXYContainer as H, VisTooltip as K, VisArea as q, VisLine as J, VisAxis as D, VisCrosshair as Q, VisBulletLegend as Z } from "@unovis/vue";
+import { LegendPosition as _ } from "../../types.js";
+const ee = {
+  ref: "slotWrapper",
+  class: "hidden"
+}, y = 24, V = 4, te = 0.5, F = "#3b82f6", se = /* @__PURE__ */ U({
   __name: "AreaChart",
   props: {
     data: {},
     height: {},
     xLabel: {},
     yLabel: {},
-    padding: { default: () => ({
-      top: 5,
-      right: 5,
-      bottom: 5,
-      left: 5
-    }) },
+    padding: { default: () => ({ top: 5, right: 5, bottom: 5, left: 5 }) },
     categories: {},
+    markerConfig: {},
     xFormatter: {},
     yFormatter: {},
     curveType: {},
-    xNumTicks: { default: (n) => n.data.length > m ? m / B : n.data.length - 1 },
+    lineWidth: { default: 2 },
+    lineDashArray: {},
+    xNumTicks: { default: (n) => n.data.length > y ? y / V : n.data.length - 1 },
     xExplicitTicks: {},
     minMaxTicksOnly: { type: Boolean },
-    yNumTicks: { default: (n) => n.data.length > m ? m / B : n.data.length - 1 },
+    yNumTicks: { default: (n) => n.data.length > y ? y / V : n.data.length - 1 },
     hideLegend: { type: Boolean },
     hideTooltip: { type: Boolean },
     legendPosition: {},
@@ -35,129 +36,128 @@ const m = 24, B = 4, z = 0.5, C = "#3b82f6", Z = /* @__PURE__ */ O({
     xGridLine: { type: Boolean },
     yGridLine: { type: Boolean },
     hideXAxis: { type: Boolean },
-    hideYAxis: { type: Boolean }
+    hideYAxis: { type: Boolean },
+    crosshairConfig: { default: () => ({
+      color: "#666"
+    }) }
   },
-  setup(n) {
-    const a = n, u = Object.values(a.categories).map((e) => e.color), A = g(() => (e) => {
-      if (typeof window > "u" || typeof document > "u")
-        return "";
-      try {
-        const t = $(X, {
-          data: e,
-          categories: a.categories,
-          toolTipTitle: w(e),
-          yFormatter: a.yFormatter
-        }), r = document.createElement("div");
-        t.mount(r);
-        const l = r.innerHTML;
-        return t.unmount(), l;
-      } catch {
-        return "";
-      }
+  emits: ["click"],
+  setup(n, { emit: $ }) {
+    const G = $, r = n, O = j(), h = w("slotWrapper"), s = R(), f = d(
+      () => Object.values(r.categories).map((e) => e.color)
+    ), N = d(() => r.markerConfig ? Y(r.markerConfig) : ""), g = d(() => r.legendPosition === _.Top), E = d(() => {
+      const e = (t, o) => `
+    <linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
+      <stop offset="0%" stop-color="${o}" stop-opacity="1" />
+      <stop offset="100%" stop-color="${o}" stop-opacity="0" />
+    </linearGradient>
+  `, l = (t, o) => `
+    <linearGradient id="gradient${t}-${o}" gradientTransform="rotate(90)">
+      <stop offset="0%" style="stop-color:var(--vis-color0);stop-opacity:1" />
+      <stop offset="100%" style="stop-color:var(--vis-color0);stop-opacity:0" />
+    </linearGradient>
+  `;
+      return f.value.map(
+        (t, o) => t != null && t.includes("#") ? e(o, t) : l(o, t ?? F)
+      ).join("");
     });
-    function F(e) {
-      var t;
+    function P(e) {
+      var l;
       return {
-        y: (r) => Number(r[e]),
-        color: ((t = a.categories[e]) == null ? void 0 : t.color) ?? C
+        y: (t) => Number(t[e]),
+        color: ((l = r.categories[e]) == null ? void 0 : l.color) ?? F
       };
     }
-    function V(e, t) {
-      return `
-  <linearGradient id="gradient${e}-${t}" gradientTransform="rotate(90)">
-  <stop offset="0%" style="stop-color:var(--vis-color0);stop-opacity:1" />
-    <stop offset="100%" style="stop-color:var(--vis-color0);stop-opacity:0" />
-  </linearGradient>
-`;
+    function W(e) {
+      return typeof window > "u" ? "" : h.value ? h.value.innerHTML : "";
     }
-    function x(e, t) {
-      return `
-  <linearGradient id="gradient${e}-${t}" gradientTransform="rotate(90)">
-    <stop offset="0%" stop-color="${t}" stop-opacity="1" />
-    <stop offset="100%" stop-color="${t}" stop-opacity="0" />
-  </linearGradient>
-`;
+    function M(e) {
+      return s.value = e, W();
     }
-    const D = g(
-      () => u.map(
-        (e, t) => e != null && e.includes("#") ? x(t, e) : V(t, e ?? C)
-      ).join("")
-    ), k = g(
-      () => a.legendPosition === Y.Top
-    );
-    return (e, t) => (o(), c("div", {
-      class: T(["flex flex-col space-y-4", { "flex-col-reverse": k.value }])
+    return (e, l) => (a(), c("div", {
+      class: T(["flex flex-col", { "flex-col-reverse": g.value, markers: !!r.markerConfig }]),
+      onClick: l[0] || (l[0] = (t) => G("click", t, s.value))
     }, [
-      p(i(P), {
+      u(i(H), {
         data: e.data,
         height: e.height,
         padding: e.padding,
-        "svg-defs": D.value
+        "svg-defs": E.value + N.value
       }, {
-        default: E(() => [
-          e.hideTooltip ? s("", !0) : (o(), d(i(j), {
+        default: x(() => [
+          e.hideTooltip ? p("", !0) : (a(), m(i(K), {
             key: 0,
-            "horizontal-placement": i(v).Right,
-            "vertical-placement": i(v).Top
+            "horizontal-placement": i(A).Right,
+            "vertical-placement": i(A).Top
           }, null, 8, ["horizontal-placement", "vertical-placement"])),
-          (o(!0), c(h, null, G(Object.keys(a.categories), (r, l) => (o(), c(h, { key: l }, [
-            p(i(I), N({
-              x: (y, f) => f,
-              ref_for: !0
-            }, F(r), {
-              color: `url(#gradient${l}-${i(u)[l]})`,
-              opacity: z,
-              "curve-type": e.curveType ?? i(L).MonotoneX
+          (a(!0), c(L, null, S(Object.keys(r.categories), (t, o) => (a(), c(L, { key: t }, [
+            u(i(q), C({
+              x: (k, v) => v
+            }, { ref_for: !0 }, P(t), {
+              color: `url(#gradient${o}-${f.value[o]})`,
+              opacity: te,
+              "curve-type": e.curveType ?? i(B).MonotoneX
             }), null, 16, ["x", "color", "curve-type"]),
-            p(i(M), {
-              x: (y, f) => f,
-              y: (y) => y[r],
-              color: i(u)[l],
-              "curve-type": e.curveType ?? i(L).MonotoneX
-            }, null, 8, ["x", "y", "color", "curve-type"])
+            u(i(J), {
+              x: (k, v) => v,
+              y: (k) => k[t],
+              color: f.value[o],
+              "curve-type": e.curveType ?? i(B).MonotoneX,
+              "line-width": e.lineWidth,
+              lineDashArray: e.lineDashArray
+            }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"])
           ], 64))), 128)),
-          e.hideXAxis ? s("", !0) : (o(), d(i(b), {
+          e.hideXAxis ? p("", !0) : (a(), m(i(D), {
             key: 1,
             type: "x",
-            "tick-format": e.xFormatter,
             label: e.xLabel,
             "label-margin": 8,
-            "domain-line": e.xDomainLine,
-            "grid-line": e.xGridLine,
             "num-ticks": e.xNumTicks,
-            "tick-line": e.xTickLine,
+            "tick-format": e.xFormatter,
             "tick-values": e.xExplicitTicks,
+            "grid-line": e.xGridLine,
+            "domain-line": e.xDomainLine,
+            "tick-line": e.xTickLine,
             "min-max-ticks-only": e.minMaxTicksOnly
-          }, null, 8, ["tick-format", "label", "domain-line", "grid-line", "num-ticks", "tick-line", "tick-values", "min-max-ticks-only"])),
-          e.hideYAxis ? s("", !0) : (o(), d(i(b), {
+          }, null, 8, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only"])),
+          e.hideYAxis ? p("", !0) : (a(), m(i(D), {
             key: 2,
             type: "y",
+            label: e.yLabel,
             "num-ticks": e.yNumTicks,
             "tick-format": e.yFormatter,
-            label: e.yLabel,
             "grid-line": e.yGridLine,
             "domain-line": e.yDomainLine,
             "tick-line": e.yTickLine
-          }, null, 8, ["num-ticks", "tick-format", "label", "grid-line", "domain-line", "tick-line"])),
-          e.hideTooltip ? s("", !0) : (o(), d(i(S), {
-            key: 3,
-            color: "#666",
-            template: A.value
-          }, null, 8, ["template"]))
+          }, null, 8, ["label", "num-ticks", "tick-format", "grid-line", "domain-line", "tick-line"])),
+          e.hideTooltip ? p("", !0) : (a(), m(i(Q), C({ key: 3 }, e.crosshairConfig, { template: M }), null, 16))
         ]),
         _: 1
       }, 8, ["data", "height", "padding", "svg-defs"]),
-      e.hideLegend ? s("", !0) : (o(), c("div", {
+      e.hideLegend ? p("", !0) : (a(), c("div", {
         key: 0,
-        class: T(["flex items-center justify-end", { "pb-4": k.value }])
+        class: T(["flex items-center justify-end", { "pb-4": g.value, "pt-4": !g.value }])
       }, [
-        p(i(U), {
+        u(i(Z), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
-      ], 2))
+      ], 2)),
+      X("div", ee, [
+        i(O).tooltip ? b(e.$slots, "tooltip", {
+          key: 0,
+          values: s.value
+        }) : s.value ? b(e.$slots, "fallback", { key: 1 }, () => [
+          u(I, {
+            data: s.value,
+            categories: e.categories,
+            toolTipTitle: i(z)(s.value) ?? "",
+            yFormatter: r.yFormatter
+          }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
+        ]) : p("", !0)
+      ], 512)
     ], 2));
   }
 });
 export {
-  Z as default
+  se as default
 };

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

@@ -1,10 +1,17 @@
 import { AreaChartProps } 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> & AreaChartProps<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"> & AreaChartProps<T> & Partial<{}>> & import('vue').PublicProps;
     expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
     attrs: any;
-    slots: {};
-    emit: {};
+    slots: {
+        tooltip?(_: {
+            values: T | undefined;
+        }): any;
+        fallback?(_: {}): any;
+    };
+    emit: (e: "click", event: MouseEvent, values?: T) => void;
 }>) => import('vue').VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -1,4 +1,4 @@
-import { LegendPosition } from '../../types';
+import { axisFormatter, LegendPosition, MarkerConfig } from '../../types';
 import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
 export interface AreaChartProps<T> {
     /**
@@ -35,24 +35,36 @@ export interface AreaChartProps<T> {
      */
     categories: Record<string, BulletLegendItemInterface>;
     /**
-   * @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?: ((tick: number, i: number, ticks: number[]) => string) | ((tick: Date, i: number, ticks: Date[]) => string);
+     * 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 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?: ((tick: number, i: number, ticks: number[]) => string) | ((tick: Date, i: number, ticks: Date[]) => string);
+     * @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;
+    /**
+     * @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;
     /**
      * The type of curve to use for the area chart lines.
      * 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.
      */
@@ -114,4 +126,22 @@ export interface AreaChartProps<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/AreaStackedChart/AreaStackedChart.js

@@ -1,8 +1,8 @@
-import { defineComponent as y, computed as f, createApp as h, createElementBlock as g, openBlock as r, createVNode as n, createElementVNode as B, unref as t, withCtx as L, createBlock as v, createCommentVNode as k } from "vue";
-import { VisXYContainer as x, VisArea as T, VisAxis as c, VisCrosshair as b, VisBulletLegend as V } from "@unovis/vue";
+import { defineComponent as y, computed as f, createApp as h, createElementBlock as g, openBlock as a, createVNode as n, createElementVNode as B, unref as t, withCtx as L, createBlock as v, createCommentVNode as C, mergeProps as k } from "vue";
+import { VisXYContainer as b, VisArea as x, VisAxis as s, VisCrosshair as T, VisBulletLegend as V } from "@unovis/vue";
 import { CurveType as _ } from "@unovis/ts";
-import C from "../Tooltip.js";
-const N = { class: "flex flex-col space-y-4" }, A = { class: "flex items center justify-end" }, G = /* @__PURE__ */ y({
+import N from "../Tooltip.js";
+const A = { class: "flex flex-col space-y-4" }, j = { class: "flex items center justify-end" }, O = /* @__PURE__ */ y({
   __name: "AreaStackedChart",
   props: {
     data: {},
@@ -18,56 +18,53 @@ const N = { class: "flex flex-col space-y-4" }, A = { class: "flex items center
     yGridLine: { type: Boolean },
     yDomainLine: { type: Boolean },
     xTickLine: { type: Boolean },
-    yTickLine: { type: Boolean }
+    yTickLine: { type: Boolean },
+    crosshairConfig: {}
   },
-  setup(l) {
-    const i = l, s = f(() => (e, m) => {
+  setup(c) {
+    const i = c, l = f(() => (e, m) => {
       if (typeof window > "u" || typeof document > "u")
         return "";
       try {
-        const o = h(C, {
+        const o = h(N, {
           data: e,
           categories: i.categories
-        }), a = document.createElement("div");
-        o.mount(a);
-        const u = a.innerHTML;
+        }), r = document.createElement("div");
+        o.mount(r);
+        const u = r.innerHTML;
         return o.unmount(), u;
       } catch {
         return "";
       }
     }), p = (e) => Number.parseInt(e.time), d = [(e) => e.firstTime, (e) => e.returning];
-    return (e, m) => (r(), g("div", N, [
-      n(t(x), {
+    return (e, m) => (a(), g("div", A, [
+      n(t(b), {
         data: e.data,
         padding: e.padding,
         height: e.height
       }, {
         default: L(() => [
-          n(t(T), {
+          n(t(x), {
             x: p,
             y: d,
             color: Object.values(i.categories).map((o) => o.color),
             "curve-type": t(_).Linear
           }, null, 8, ["color", "curve-type"]),
-          n(t(c), {
+          n(t(s), {
             type: "x",
             label: "Time",
             "num-ticks": 12
           }),
-          n(t(c), {
+          n(t(s), {
             type: "y",
             label: "Number of visitors",
             "num-ticks": 3
           }),
-          e.hideTooltip ? k("", !0) : (r(), v(t(b), {
-            key: 0,
-            color: "#666",
-            template: s.value
-          }, null, 8, ["template"]))
+          e.hideTooltip ? C("", !0) : (a(), v(t(T), k({ key: 0 }, e.crosshairConfig, { template: l.value }), null, 16, ["template"]))
         ]),
         _: 1
       }, 8, ["data", "padding", "height"]),
-      B("div", A, [
+      B("div", j, [
         n(t(V), {
           items: Object.values(e.categories)
         }, null, 8, ["items"])
@@ -76,5 +73,5 @@ const N = { class: "flex flex-col space-y-4" }, A = { class: "flex items center
   }
 });
 export {
-  G as default
+  O as default
 };

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

@@ -65,4 +65,22 @@ export interface AreaStackedChartProps<T> {
      * If `true`, displays tick lines on the y-axis.
      */
     yTickLine?: 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;
+    };
 }