vue-chrts 2.0.0 → 2.1.0-beta-3

package/dist/components/AreaChart/AreaChart.js

@@ -1,13 +1,13 @@
-import { defineComponent as z, useSlots as R, useTemplateRef as U, ref as H, computed as d, createElementBlock as f, openBlock as c, normalizeClass as K, normalizeStyle as p, createVNode as u, createCommentVNode as y, createElementVNode as q, unref as r, withCtx as J, createBlock as k, Fragment as T, renderList as Q, mergeProps as v, renderSlot as b } from "vue";
-import { Position as $, CurveType as h } from "@unovis/ts";
-import { createMarkers as Z } from "../../utils.js";
-import I from "../Tooltip.js";
-import { VisXYContainer as _, VisTooltip as ee, VisArea as B, VisLine as D, VisAxis as O, VisCrosshair as te, VisBulletLegend as ie } from "@unovis/vue";
-import { LegendPosition as ae } from "../../types.js";
-const ne = ["id"], oe = {
+import { defineComponent as I, useSlots as K, useTemplateRef as q, ref as J, getCurrentInstance as Q, computed as d, createElementBlock as f, openBlock as c, normalizeClass as Z, normalizeStyle as p, createVNode as k, createCommentVNode as u, createElementVNode as _, unref as l, withCtx as ee, createBlock as y, Fragment as T, renderList as te, mergeProps as v, renderSlot as B } from "vue";
+import { Position as O, CurveType as h } from "@unovis/ts";
+import { createScopedMarkers as ie } from "../../utils.js";
+import oe from "../Tooltip.js";
+import { VisXYContainer as ne, VisTooltip as ae, VisArea as D, VisLine as M, VisAxis as w, VisCrosshair as re, VisBulletLegend as le } from "@unovis/vue";
+import { LegendPosition as se } from "../../types.js";
+const ce = ["id"], de = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, F = 0.5, A = "#3b82f6", ye = /* @__PURE__ */ z({
+}, S = 0.5, C = "#3b82f6", ve = /* @__PURE__ */ I({
   __name: "AreaChart",
   props: {
     data: {},
@@ -31,10 +31,16 @@ const ne = ["id"], oe = {
     xNumTicks: {},
     xExplicitTicks: {},
     minMaxTicksOnly: { type: Boolean },
+    xMinMaxTicksOnly: { type: Boolean },
+    yMinMaxTicksOnly: { type: Boolean },
+    minMaxTicksOnlyShowGridLines: { type: Boolean },
+    xMinMaxTicksOnlyShowGridLines: { type: Boolean },
+    yMinMaxTicksOnlyShowGridLines: { type: Boolean },
     yNumTicks: {},
+    yExplicitTicks: {},
     hideLegend: { type: Boolean, default: !1 },
     hideTooltip: { type: Boolean },
-    legendPosition: { default: ae.BottomCenter },
+    legendPosition: { default: se.BottomCenter },
     legendStyle: { default: void 0 },
     xDomainLine: { type: Boolean },
     yDomainLine: { type: Boolean },
@@ -51,131 +57,150 @@ const ne = ["id"], oe = {
     yAxisConfig: {},
     yDomain: {},
     xDomain: {},
-    stacked: { type: Boolean }
+    stacked: { type: Boolean },
+    duration: { default: 600 },
+    tooltip: { default: () => ({
+      followCursor: !0
+    }) }
   },
   emits: ["click"],
-  setup(e, { emit: V }) {
-    const j = V, n = e, G = R(), C = U("slotWrapper"), m = H(), g = d(() => {
-      const i = Object.values(n.categories).map(
-        (l, a) => `var(--vis-color${a})`
+  setup(e, { emit: G }) {
+    var b;
+    const V = G, t = e, j = K(), L = q("slotWrapper"), m = J(), A = `area-${((b = Q()) == null ? void 0 : b.uid) ?? Math.random().toString(36).slice(2)}`, g = d(() => {
+      const i = Object.values(t.categories).map(
+        (a, n) => `var(--vis-color${n})`
       );
-      return Object.values(n.categories).map(
-        (l, a) => l.color ?? i[a]
+      return Object.values(t.categories).map(
+        (a, n) => a.color ?? i[n]
       );
-    }), N = d(() => {
+    }), F = d(() => t.yNumTicks !== void 0 ? t.yNumTicks : Math.max(2, Object.keys(t.categories ?? {}).length)), N = d(() => {
       var i;
-      return (i = n.markerConfig) != null && i.config ? Z(n.markerConfig) : "";
-    }), S = d(() => n.legendPosition.startsWith("top")), W = d(() => n.legendPosition.includes("left") ? "flex-start" : n.legendPosition.includes("right") ? "flex-end" : "center"), M = d(() => {
-      const i = (a, t) => {
-        var o;
+      return (i = t.markerConfig) != null && i.config ? ie(t.markerConfig, A) : "";
+    }), W = d(() => {
+      var a;
+      if (!((a = t.markerConfig) != null && a.config)) return {};
+      const i = {};
+      for (const n of Object.keys(t.markerConfig.config))
+        i[`--vis-marker-${n}`] = `url("#${t.markerConfig.id}--${A}--${n}")`;
+      return i;
+    }), E = d(() => t.legendPosition.startsWith("top")), P = d(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center"), X = d(() => {
+      const i = (n, o) => {
+        var r;
         return `
-    <linearGradient id="gradient${a}-${t}" gradientTransform="rotate(90)">
-      ${((o = n.gradientStops) == null ? void 0 : o.map(
-          (s) => `<stop offset="${s.offset}" stop-color="${t}" stop-opacity="${s.stopOpacity}" />`
+    <linearGradient id="gradient${n}-${o}" gradientTransform="rotate(90)">
+      ${((r = t.gradientStops) == null ? void 0 : r.map(
+          (s) => `<stop offset="${s.offset}" stop-color="${o}" stop-opacity="${s.stopOpacity}" />`
         ).join("")) ?? ""}
-      <stop offset="100%" stop-color="${t}" stop-opacity="0" />
+      <stop offset="100%" stop-color="${o}" stop-opacity="0" />
     </linearGradient>
   `;
-      }, l = (a, t) => {
-        var o;
+      }, a = (n, o) => {
+        var r;
         return `
-    <linearGradient id="gradient${a}-${t}" gradientTransform="rotate(90)">
+    <linearGradient id="gradient${n}-${o}" gradientTransform="rotate(90)">
 
-    ${((o = n.gradientStops) == null ? void 0 : o.map(
+    ${((r = t.gradientStops) == null ? void 0 : r.map(
           (s) => `
-      <stop offset="${s.offset}" style="stop-color:var(${t});stop-opacity:${s.stopOpacity}" />
+      <stop offset="${s.offset}" style="stop-color:var(${o});stop-opacity:${s.stopOpacity}" />
     `
         ).join("")) ?? ""}
     </linearGradient>
   `;
       };
       return g.value.map(
-        (a, t) => a != null && a.includes("#") ? i(t, a) : l(t, a ?? A)
+        (n, o) => n != null && n.includes("#") ? i(o, n) : a(o, n ?? C)
       ).join("");
     });
-    function P(i) {
-      var l;
+    function Y(i) {
+      var a;
       return {
-        y: (a) => Number(a[i]),
-        color: ((l = n.categories[i]) == null ? void 0 : l.color) ?? A
+        y: (n) => Number(n[i]),
+        color: ((a = t.categories[i]) == null ? void 0 : a.color) ?? C
       };
     }
-    const w = d(() => Object.keys(n.categories).map(
-      (i) => (l) => Number(l[i])
-    )), X = d(() => {
-      const i = Object.keys(n.categories);
-      return i.map((l, a) => (t) => {
-        let o = 0;
-        for (let s = 0; s <= a; s++)
-          o += Number(t[i[s]]) || 0;
-        return o;
+    const z = d(() => Object.keys(t.categories).map(
+      (i) => (a) => Number(a[i])
+    )), R = d(() => {
+      const i = Object.keys(t.categories);
+      return i.map((a, n) => (o) => {
+        let r = 0;
+        for (let s = 0; s <= n; s++)
+          r += Number(o[i[s]]) || 0;
+        return r;
       });
-    }), L = d(() => (i, l) => g.value[l] ?? A);
-    function E(i) {
-      return typeof window > "u" ? "" : C.value ? C.value.innerHTML : "";
+    }), $ = d(() => (i, a) => g.value[a] ?? C);
+    function U(i) {
+      return typeof window > "u" ? "" : L.value ? L.value.innerHTML : "";
     }
-    function Y(i) {
-      return m.value = i, E();
+    function H(i) {
+      return m.value = i, U();
     }
-    return (i, l) => {
-      var a;
+    return (i, a) => {
+      var n;
       return c(), f("div", {
         style: p({
           display: "flex",
-          flexDirection: S.value ? "column-reverse" : "column",
-          gap: "var(--vis-legend-spacing)"
+          flexDirection: E.value ? "column-reverse" : "column",
+          gap: "var(--vis-legend-spacing)",
+          ...W.value
         }),
-        class: K({ "stacked-area-chart": e.stacked }),
-        id: (a = e.markerConfig) == null ? void 0 : a.id,
-        onClick: l[0] || (l[0] = (t) => j("click", t, m.value))
+        class: Z({ "stacked-area-chart": e.stacked }),
+        id: (n = e.markerConfig) == null ? void 0 : n.id,
+        onClick: a[0] || (a[0] = (o) => V("click", o, m.value))
       }, [
-        u(r(_), {
+        k(l(ne), {
           data: e.data,
           height: e.height,
+          duration: e.duration,
           padding: e.padding,
-          "svg-defs": M.value + N.value,
+          "svg-defs": X.value + N.value,
           "y-domain": e.yDomain,
           "x-domain": e.xDomain
         }, {
-          default: J(() => [
-            e.hideTooltip ? y("", !0) : (c(), k(r(ee), {
+          default: ee(() => [
+            e.hideTooltip ? u("", !0) : (c(), y(l(ae), {
               key: 0,
-              "horizontal-placement": r($).Right,
-              "vertical-placement": r($).Top
-            }, null, 8, ["horizontal-placement", "vertical-placement"])),
+              "horizontal-placement": l(O).Right,
+              "vertical-placement": l(O).Top,
+              "follow-cursor": t.tooltip.followCursor,
+              "show-delay": t.tooltip.showDelay,
+              "hide-delay": t.tooltip.hideDelay
+            }, null, 8, ["horizontal-placement", "vertical-placement", "follow-cursor", "show-delay", "hide-delay"])),
             e.stacked ? (c(), f(T, { key: 1 }, [
-              u(r(B), {
-                x: (t, o) => o,
-                y: w.value,
-                color: L.value,
-                opacity: e.hideArea ? 0 : F,
-                "curve-type": e.curveType ?? r(h).MonotoneX
-              }, null, 8, ["x", "y", "color", "opacity", "curve-type"]),
-              u(r(D), {
-                x: (t, o) => o,
-                y: X.value,
-                color: L.value,
-                "curve-type": e.curveType ?? r(h).MonotoneX,
+              e.hideArea ? u("", !0) : (c(), y(l(D), {
+                key: 0,
+                x: (o, r) => r,
+                y: z.value,
+                color: $.value,
+                opacity: S,
+                "curve-type": e.curveType ?? l(h).MonotoneX
+              }, null, 8, ["x", "y", "color", "curve-type"])),
+              k(l(M), {
+                x: (o, r) => r,
+                y: R.value,
+                color: $.value,
+                "curve-type": e.curveType ?? l(h).MonotoneX,
                 "line-width": e.lineWidth
               }, null, 8, ["x", "y", "color", "curve-type", "line-width"])
-            ], 64)) : (c(!0), f(T, { key: 2 }, Q(Object.keys(n.categories), (t, o) => (c(), f(T, { key: t }, [
-              u(r(B), v({
+            ], 64)) : (c(!0), f(T, { key: 2 }, te(Object.keys(t.categories), (o, r) => (c(), f(T, { key: o }, [
+              e.hideArea ? u("", !0) : (c(), y(l(D), v({
+                key: 0,
                 x: (s, x) => x
-              }, { ref_for: !0 }, P(t), {
-                color: `url(#gradient${o}-${g.value[o]})`,
-                opacity: e.hideArea ? 0 : F,
-                "curve-type": e.curveType ?? r(h).MonotoneX
-              }), null, 16, ["x", "color", "opacity", "curve-type"]),
-              u(r(D), {
+              }, { ref_for: !0 }, Y(o), {
+                color: `url(#gradient${r}-${g.value[r]})`,
+                opacity: S,
+                "curve-type": e.curveType ?? l(h).MonotoneX
+              }), null, 16, ["x", "color", "curve-type"])),
+              k(l(M), {
                 x: (s, x) => x,
-                y: (s) => s[t],
-                color: g.value[o],
-                "curve-type": e.curveType ?? r(h).MonotoneX,
+                y: (s) => s[o],
+                color: g.value[r],
+                "curve-type": e.curveType ?? l(h).MonotoneX,
                 "line-width": e.lineWidth,
-                lineDashArray: e.lineDashArray ? e.lineDashArray[o] : void 0
+                lineDashArray: e.lineDashArray ? e.lineDashArray[r] : void 0
               }, null, 8, ["x", "y", "color", "curve-type", "line-width", "lineDashArray"])
             ], 64))), 128)),
-            e.hideXAxis ? y("", !0) : (c(), k(r(O), v({
+            e.hideXAxis ? u("", !0) : (c(), y(l(w), v({
               key: 3,
               type: "x",
               label: e.xLabel,
@@ -186,57 +211,61 @@ const ne = ["id"], oe = {
               "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 ? y("", !0) : (c(), k(r(O), v({
+              "min-max-ticks-only": e.minMaxTicksOnly,
+              duration: e.duration
+            }, e.xAxisConfig), null, 16, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "min-max-ticks-only", "duration"])),
+            e.hideYAxis ? u("", !0) : (c(), y(l(w), v({
               key: 4,
               type: "y",
               label: e.yLabel,
-              "num-ticks": e.yNumTicks,
+              "num-ticks": F.value,
               "tick-format": e.yFormatter,
+              "tick-values": e.yExplicitTicks,
               "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 ? y("", !0) : (c(), k(r(te), v({ key: 5 }, e.crosshairConfig, { template: Y }), null, 16))
+              "tick-line": e.yTickLine,
+              duration: e.duration
+            }, e.yAxisConfig), null, 16, ["label", "num-ticks", "tick-format", "tick-values", "grid-line", "domain-line", "tick-line", "duration"])),
+            e.hideTooltip ? u("", !0) : (c(), y(l(re), v({ key: 5 }, e.crosshairConfig, { template: H }), null, 16))
           ]),
           _: 1
-        }, 8, ["data", "height", "padding", "svg-defs", "y-domain", "x-domain"]),
-        n.hideLegend ? y("", !0) : (c(), f("div", {
+        }, 8, ["data", "height", "duration", "padding", "svg-defs", "y-domain", "x-domain"]),
+        t.hideLegend ? u("", !0) : (c(), f("div", {
           key: 0,
           style: p({
             display: "flex",
-            justifyContent: W.value
+            justifyContent: P.value
           })
         }, [
-          u(r(ie), {
+          k(l(le), {
             style: p([
-              n.legendStyle,
+              t.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
+            items: Object.values(t.categories).map((o) => ({
+              ...o,
+              color: Array.isArray(o.color) ? o.color[0] : o.color
             }))
           }, null, 8, ["style", "items"])
         ], 4)),
-        q("div", oe, [
-          r(G).tooltip ? b(i.$slots, "tooltip", {
+        _("div", de, [
+          l(j).tooltip ? B(i.$slots, "tooltip", {
             key: 0,
             values: m.value
-          }) : m.value ? b(i.$slots, "fallback", { key: 1 }, () => [
-            u(I, {
+          }) : m.value ? B(i.$slots, "fallback", { key: 1 }, () => [
+            k(oe, {
               data: m.value,
+              followCursor: !1,
               categories: e.categories,
-              "title-formatter": n.tooltipTitleFormatter,
-              yFormatter: n.yFormatter
+              "title-formatter": t.tooltipTitleFormatter,
+              yFormatter: t.yFormatter
             }, null, 8, ["data", "categories", "title-formatter", "yFormatter"])
-          ]) : y("", !0)
+          ]) : u("", !0)
         ], 512)
-      ], 14, ne);
+      ], 14, ce);
     };
   }
 });
 export {
-  ye as default
+  ve as default
 };

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

@@ -1,4 +1,4 @@
-import { axisFormatter, CrosshairConfig, LegendPosition, MarkerConfig, AxisConfig } from '../../types';
+import { axisFormatter, CrosshairConfig, LegendPosition, MarkerConfig, AxisConfig, TooltipConfig } from '../../types';
 import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
 export interface AreaChartProps<T> {
     /**
@@ -92,10 +92,34 @@ export interface AreaChartProps<T> {
      * Force only first and last ticks on the x-axis.
      */
     minMaxTicksOnly?: boolean;
+    /**
+     * Force only first and last ticks on the x-axis.
+     */
+    xMinMaxTicksOnly?: boolean;
+    /**
+     * Force only first and last ticks on the y-axis.
+     */
+    yMinMaxTicksOnly?: boolean;
+    /**
+     * Show grid lines for the min and max axis ticks.
+     */
+    minMaxTicksOnlyShowGridLines?: boolean;
+    /**
+     * Show grid lines for the min and max x-axis ticks.
+     */
+    xMinMaxTicksOnlyShowGridLines?: boolean;
+    /**
+     * Show grid lines for the min and max y-axis ticks.
+     */
+    yMinMaxTicksOnlyShowGridLines?: boolean;
     /**
      * The desired number of ticks on the y-axis.
      */
     yNumTicks?: number;
+    /**
+     * Force specific ticks on the y-axis.
+     */
+    yExplicitTicks?: (number | string | Date)[];
     /**
      * If `true`, hides the chart legend.
      */
@@ -170,4 +194,12 @@ export interface AreaChartProps<T> {
      * When false (default), areas are overlaid on top of each other.
      */
     stacked?: boolean;
+    /**
+     * Animation duration in milliseconds for the chart components.
+     */
+    duration?: number;
+    /**
+     * Configuration object for the chart tooltip.
+     */
+    tooltip?: TooltipConfig;
 }