vue-chrts 1.0.2 → 2.0.0-beta.1

package/dist/components/AreaChart/AreaChart.js

@@ -1,13 +1,13 @@
-import { defineComponent as N, useSlots as W, useTemplateRef as E, ref as M, computed as u, createElementBlock as y, openBlock as s, normalizeClass as w, normalizeStyle as k, createVNode as m, createCommentVNode as d, createElementVNode as X, unref as n, withCtx as z, createBlock as c, Fragment as h, renderList as R, mergeProps as f, renderSlot as T } from "vue";
-import { Position as C, CurveType as L } from "@unovis/ts";
-import { createMarkers as Y, getFirstPropertyValue as U } from "../../utils.js";
-import H from "../Tooltip.js";
-import { VisXYContainer as q, VisTooltip as J, VisArea as K, VisLine as Q, VisAxis as A, VisCrosshair as Z, VisBulletLegend as I } from "@unovis/vue";
-import { LegendPosition as _ } from "../../types.js";
-const ee = {
+import { defineComponent as W, useSlots as E, useTemplateRef as M, ref as w, computed as m, createElementBlock as f, openBlock as c, normalizeStyle as x, createVNode as y, createCommentVNode as d, createElementVNode as X, unref as o, withCtx as R, createBlock as g, Fragment as T, renderList as Y, mergeProps as k, renderSlot as L } from "vue";
+import { Position as C, CurveType as A } from "@unovis/ts";
+import { createMarkers as z } from "../../utils.js";
+import U from "../Tooltip.js";
+import { VisXYContainer as H, VisTooltip as q, VisArea as J, VisLine as K, VisAxis as $, VisCrosshair as Q, VisBulletLegend as Z } from "@unovis/vue";
+import { LegendPosition as I } from "../../types.js";
+const _ = ["id"], ee = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, ie = 0.5, $ = "#3b82f6", se = /* @__PURE__ */ N({
+}, te = 0.5, D = "#3b82f6", se = /* @__PURE__ */ W({
   __name: "AreaChart",
   props: {
     data: {},
@@ -19,6 +19,7 @@ const ee = {
     markerConfig: {},
     xFormatter: {},
     yFormatter: {},
+    tooltipTitleFormatter: {},
     curveType: {},
     hideArea: { type: Boolean, default: !1 },
     gradientStops: { default: () => [
@@ -33,7 +34,7 @@ const ee = {
     yNumTicks: {},
     hideLegend: { type: Boolean, default: !1 },
     hideTooltip: { type: Boolean },
-    legendPosition: { default: _.BottomCenter },
+    legendPosition: { default: I.BottomCenter },
     legendStyle: { default: void 0 },
     xDomainLine: { type: Boolean },
     yDomainLine: { type: Boolean },
@@ -52,154 +53,160 @@ const ee = {
     xDomain: {}
   },
   emits: ["click"],
-  setup(D, { emit: b }) {
-    const B = b, t = D, O = W(), v = E("slotWrapper"), p = M(), g = u(() => {
-      const e = Object.values(t.categories).map(
-        (a, i) => `var(--vis-color${i})`
+  setup(e, { emit: b }) {
+    const B = b, n = e, O = E(), p = M("slotWrapper"), u = w(), v = m(() => {
+      const a = Object.values(n.categories).map(
+        (l, i) => `var(--vis-color${i})`
       );
-      return Object.values(t.categories).map(
-        (a, i) => a.color ?? e[i]
+      return Object.values(n.categories).map(
+        (l, i) => l.color ?? a[i]
       );
-    }), V = u(() => t.markerConfig ? Y(t.markerConfig) : ""), x = u(() => t.legendPosition.startsWith("top")), F = u(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center"), G = u(() => {
-      const e = (i, o) => {
+    }), F = m(() => {
+      var a;
+      return (a = n.markerConfig) != null && a.config ? z(n.markerConfig) : "";
+    }), V = m(() => n.legendPosition.startsWith("top")), G = m(() => n.legendPosition.includes("left") ? "flex-start" : n.legendPosition.includes("right") ? "flex-end" : "center"), S = m(() => {
+      const a = (i, t) => {
         var r;
         return `
-    <linearGradient id="gradient${i}-${o}" gradientTransform="rotate(90)">
-      ${((r = t.gradientStops) == null ? void 0 : r.map(
-          (l) => `<stop offset="${l.offset}" stop-color="${o}" stop-opacity="${l.stopOpacity}" />`
+    <linearGradient id="gradient${i}-${t}" gradientTransform="rotate(90)">
+      ${((r = n.gradientStops) == null ? void 0 : r.map(
+          (s) => `<stop offset="${s.offset}" stop-color="${t}" stop-opacity="${s.stopOpacity}" />`
         ).join("")) ?? ""}
-      <stop offset="100%" stop-color="${o}" stop-opacity="0" />
+      <stop offset="100%" stop-color="${t}" stop-opacity="0" />
     </linearGradient>
   `;
-      }, a = (i, o) => {
+      }, l = (i, t) => {
         var r;
         return `
-    <linearGradient id="gradient${i}-${o}" gradientTransform="rotate(90)">
+    <linearGradient id="gradient${i}-${t}" gradientTransform="rotate(90)">
 
-    ${((r = t.gradientStops) == null ? void 0 : r.map(
-          (l) => `
-      <stop offset="${l.offset}" style="stop-color:var(${o});stop-opacity:${l.stopOpacity}" />
+    ${((r = n.gradientStops) == null ? void 0 : r.map(
+          (s) => `
+      <stop offset="${s.offset}" style="stop-color:var(${t});stop-opacity:${s.stopOpacity}" />
     `
         ).join("")) ?? ""}
     </linearGradient>
   `;
       };
-      return g.value.map(
-        (i, o) => i != null && i.includes("#") ? e(o, i) : a(o, i ?? $)
+      return v.value.map(
+        (i, t) => i != null && i.includes("#") ? a(t, i) : l(t, i ?? D)
       ).join("");
     });
-    function P(e) {
-      var a;
+    function j(a) {
+      var l;
       return {
-        y: (i) => Number(i[e]),
-        color: ((a = t.categories[e]) == null ? void 0 : a.color) ?? $
+        y: (i) => Number(i[a]),
+        color: ((l = n.categories[a]) == null ? void 0 : l.color) ?? D
       };
     }
-    function S(e) {
-      return typeof window > "u" ? "" : v.value ? v.value.innerHTML : "";
+    function N(a) {
+      return typeof window > "u" ? "" : p.value ? p.value.innerHTML : "";
     }
-    function j(e) {
-      return p.value = e, S();
+    function P(a) {
+      return u.value = a, N();
     }
-    return (e, a) => (s(), y("div", {
-      style: k({
-        display: "flex",
-        flexDirection: x.value ? "column-reverse" : "column",
-        gap: "var(--vis-legend-spacing)"
-      }),
-      class: w({ markers: !!t.markerConfig }),
-      onClick: a[0] || (a[0] = (i) => B("click", i, p.value))
-    }, [
-      m(n(q), {
-        data: e.data,
-        height: e.height,
-        padding: e.padding,
-        "svg-defs": G.value + V.value,
-        "y-domain": e.yDomain,
-        "x-domain": e.xDomain
-      }, {
-        default: z(() => [
-          e.hideTooltip ? d("", !0) : (s(), c(n(J), {
-            key: 0,
-            "horizontal-placement": n(C).Right,
-            "vertical-placement": n(C).Top
-          }, null, 8, ["horizontal-placement", "vertical-placement"])),
-          (s(!0), y(h, null, R(Object.keys(t.categories), (i, o) => (s(), y(h, { key: i }, [
-            m(n(K), f({
-              x: (r, l) => l
-            }, { ref_for: !0 }, P(i), {
-              color: `url(#gradient${o}-${g.value[o]})`,
-              opacity: e.hideArea ? 0 : ie,
-              "curve-type": e.curveType ?? n(L).MonotoneX
-            }), null, 16, ["x", "color", "opacity", "curve-type"]),
-            m(n(Q), {
-              x: (r, l) => l,
-              y: (r) => r[i],
-              color: g.value[o],
-              "curve-type": e.curveType ?? n(L).MonotoneX,
-              "line-width": e.lineWidth,
-              lineDashArray: e.lineDashArray ? e.lineDashArray[o] : void 0
-            }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"])
-          ], 64))), 128)),
-          e.hideXAxis ? d("", !0) : (s(), c(n(A), f({
-            key: 1,
-            type: "x",
-            label: e.xLabel,
-            "label-margin": 8,
-            "num-ticks": e.xNumTicks,
-            "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
-          }, e.xAxisConfig), null, 16, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only"])),
-          e.hideYAxis ? d("", !0) : (s(), c(n(A), f({
-            key: 2,
-            type: "y",
-            label: e.yLabel,
-            "num-ticks": e.yNumTicks,
-            "tick-format": e.yFormatter,
-            "grid-line": e.yGridLine,
-            "domain-line": e.yDomainLine,
-            "tick-line": e.yTickLine
-          }, e.yAxisConfig), null, 16, ["label", "num-ticks", "tick-format", "grid-line", "domain-line", "tick-line"])),
-          e.hideTooltip ? d("", !0) : (s(), c(n(Z), f({ key: 3 }, e.crosshairConfig, { template: j }), null, 16))
-        ]),
-        _: 1
-      }, 8, ["data", "height", "padding", "svg-defs", "y-domain", "x-domain"]),
-      t.hideLegend ? d("", !0) : (s(), y("div", {
-        key: 0,
-        style: k({
+    return (a, l) => {
+      var i;
+      return c(), f("div", {
+        style: x({
           display: "flex",
-          justifyContent: F.value
-        })
+          flexDirection: V.value ? "column-reverse" : "column",
+          gap: "var(--vis-legend-spacing)"
+        }),
+        id: (i = e.markerConfig) == null ? void 0 : i.id,
+        onClick: l[0] || (l[0] = (t) => B("click", t, u.value))
       }, [
-        m(n(I), {
-          style: k([
-            t.legendStyle,
-            "display: flex; gap: var(--vis-legend-spacing);"
+        y(o(H), {
+          data: e.data,
+          height: e.height,
+          padding: e.padding,
+          "svg-defs": S.value + F.value,
+          "y-domain": e.yDomain,
+          "x-domain": e.xDomain
+        }, {
+          default: R(() => [
+            e.hideTooltip ? d("", !0) : (c(), g(o(q), {
+              key: 0,
+              "horizontal-placement": o(C).Right,
+              "vertical-placement": o(C).Top
+            }, null, 8, ["horizontal-placement", "vertical-placement"])),
+            (c(!0), f(T, null, Y(Object.keys(n.categories), (t, r) => (c(), f(T, { key: t }, [
+              y(o(J), k({
+                x: (s, h) => h
+              }, { ref_for: !0 }, j(t), {
+                color: `url(#gradient${r}-${v.value[r]})`,
+                opacity: e.hideArea ? 0 : te,
+                "curve-type": e.curveType ?? o(A).MonotoneX
+              }), null, 16, ["x", "color", "opacity", "curve-type"]),
+              y(o(K), {
+                x: (s, h) => h,
+                y: (s) => s[t],
+                color: v.value[r],
+                "curve-type": e.curveType ?? o(A).MonotoneX,
+                "line-width": e.lineWidth,
+                lineDashArray: e.lineDashArray ? e.lineDashArray[r] : void 0
+              }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"])
+            ], 64))), 128)),
+            e.hideXAxis ? d("", !0) : (c(), g(o($), k({
+              key: 1,
+              type: "x",
+              label: e.xLabel,
+              "label-margin": 8,
+              "num-ticks": e.xNumTicks,
+              "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
+            }, e.xAxisConfig), null, 16, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only"])),
+            e.hideYAxis ? d("", !0) : (c(), g(o($), k({
+              key: 2,
+              type: "y",
+              label: e.yLabel,
+              "num-ticks": e.yNumTicks,
+              "tick-format": e.yFormatter,
+              "grid-line": e.yGridLine,
+              "domain-line": e.yDomainLine,
+              "tick-line": e.yTickLine
+            }, e.yAxisConfig), null, 16, ["label", "num-ticks", "tick-format", "grid-line", "domain-line", "tick-line"])),
+            e.hideTooltip ? d("", !0) : (c(), g(o(Q), k({ key: 3 }, e.crosshairConfig, { template: P }), null, 16))
           ]),
-          items: Object.values(t.categories).map((i) => ({
-            ...i,
-            color: Array.isArray(i.color) ? i.color[0] : i.color
-          }))
-        }, null, 8, ["style", "items"])
-      ], 4)),
-      X("div", ee, [
-        n(O).tooltip ? T(e.$slots, "tooltip", {
+          _: 1
+        }, 8, ["data", "height", "padding", "svg-defs", "y-domain", "x-domain"]),
+        n.hideLegend ? d("", !0) : (c(), f("div", {
           key: 0,
-          values: p.value
-        }) : p.value ? T(e.$slots, "fallback", { key: 1 }, () => [
-          m(H, {
-            data: p.value,
-            categories: e.categories,
-            toolTipTitle: n(U)(p.value) ?? "",
-            yFormatter: t.yFormatter
-          }, null, 8, ["data", "categories", "toolTipTitle", "yFormatter"])
-        ]) : d("", !0)
-      ], 512)
-    ], 6));
+          style: x({
+            display: "flex",
+            justifyContent: G.value
+          })
+        }, [
+          y(o(Z), {
+            style: x([
+              n.legendStyle,
+              "display: flex; gap: var(--vis-legend-spacing);"
+            ]),
+            items: Object.values(n.categories).map((t) => ({
+              ...t,
+              color: Array.isArray(t.color) ? t.color[0] : t.color
+            }))
+          }, null, 8, ["style", "items"])
+        ], 4)),
+        X("div", ee, [
+          o(O).tooltip ? L(a.$slots, "tooltip", {
+            key: 0,
+            values: u.value
+          }) : u.value ? L(a.$slots, "fallback", { key: 1 }, () => [
+            y(U, {
+              data: u.value,
+              categories: e.categories,
+              "title-formatter": n.tooltipTitleFormatter,
+              yFormatter: n.yFormatter
+            }, null, 8, ["data", "categories", "title-formatter", "yFormatter"])
+          ]) : d("", !0)
+        ], 512)
+      ], 12, _);
+    };
   }
 });
 export {

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

@@ -37,15 +37,25 @@ export interface AreaChartProps<T> {
     /**
      * A record mapping marker keys to show custom patterns.
      */
-    markerConfig?: Record<string, MarkerConfig>;
+    markerConfig?: MarkerConfig;
     /**
-     * A function that formats the x-axis tick labels.
+     * @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;
     /**
-     * A function that formats the y-axis tick labels.
+     * @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;
+    /**
+     * Use custom formatter for tooltip titles
+     */
+    tooltipTitleFormatter?: (data: T) => string | number;
     /**
      * The type of curve to use for the area chart lines.
      * See `CurveType` for available options.