vue-chrts 2.1.0-beta-2 → 2.1.0-beta-3

package/dist/components/AreaChart/AreaChart.js

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

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

@@ -1,4 +1,5 @@
-import { axisFormatter, CrosshairConfig, LegendPosition, MarkerConfig, AxisConfig, BulletLegendItemInterface, CurveType } from '../../types';
+import { axisFormatter, CrosshairConfig, LegendPosition, MarkerConfig, AxisConfig, TooltipConfig } from '../../types';
+import { BulletLegendItemInterface, CurveType } from '@unovis/ts';
 export interface AreaChartProps<T> {
     /**
      * The data to be displayed in the area chart.
@@ -91,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.
      */
@@ -169,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;
 }