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

package/dist/components/Maps/TopoJSONMap/types.d.ts

@@ -0,0 +1,40 @@
+import { GeoProjection } from 'd3-geo';
+import { axisFormatter, BulletLegendItemInterface, LegendPosition } from '../../../types';
+import { MapData, MapPoint } from '../types';
+export type MapsData<T extends Record<string, any>> = {
+    mapFeatureKey: keyof T;
+    data: MapData;
+    topojson: any;
+    zoomFactor?: number;
+    zoomExtent?: [number, number];
+    projection?: GeoProjection;
+    areaColor?: string | ((d: any) => string);
+    areaCursor?: string | ((d: any) => string);
+    pointColor?: string | ((d: MapPoint) => string);
+    pointSize?: number | ((d: MapPoint) => number);
+    pointLabel?: (d: MapPoint) => string;
+    pointCursor?: string | ((d: MapPoint) => string);
+    linkColor?: string | ((d: any) => string);
+    linkWidth?: number | ((d: any) => number);
+    linkCursor?: string | ((d: any) => string);
+    height?: string | number;
+    width?: string | number;
+    fitView?: boolean;
+    fitViewPadding?: number;
+    hideTooltip?: boolean;
+    tooltipTitleFormatter?: (data: T) => string | number;
+    yFormatter?: axisFormatter;
+    categories?: Record<string, BulletLegendItemInterface>;
+    legendPosition?: LegendPosition;
+    legendStyle?: any;
+    hideLegend?: boolean;
+    duration?: number;
+    pointStrokeWidth?: number | ((d: MapPoint) => number);
+    mapFitToPoints?: boolean;
+    padding?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+};

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

@@ -0,0 +1,48 @@
+export type MapPoint = {
+    id: string;
+    latitude: number;
+    longitude: number;
+    color?: string;
+    [key: string]: any;
+};
+export type MapLink = {
+    source: string | number | MapPoint;
+    target: string | number | MapPoint;
+    color?: string;
+    width?: number;
+};
+export type MapArea = {
+    id: string;
+    color?: string;
+    [key: string]: any;
+};
+export type MapData = {
+    points?: MapPoint[];
+    links?: MapLink[];
+    areas?: MapArea[];
+};
+export interface TopoJSONMapProps {
+    mapType: 'uk' | 'france' | 'usa';
+    data: MapData;
+    width?: number;
+    height?: number;
+    disableZoom?: boolean;
+    zoomFactor?: number;
+    zoomExtent?: [number, number];
+    zoomDuration?: number;
+    mapFitToPoints?: boolean;
+    pointColor?: string | ((d: MapPoint) => string);
+    pointRadius?: number | ((d: MapPoint) => number);
+    pointStrokeWidth?: number | ((d: MapPoint) => number);
+    pointCursor?: string | ((d: MapPoint) => string);
+    pointLabel?: (d: MapPoint) => string;
+    linkColor?: string | ((d: MapLink) => string);
+    linkWidth?: number | ((d: MapLink) => number);
+    linkCursor?: string | ((d: MapLink) => string);
+    areaColor?: string | ((d: MapArea) => string);
+    areaCursor?: string | ((d: MapArea) => string);
+    heatmapMode?: boolean;
+    heatmapModeBlurStdDeviation?: number;
+    heatmapModeZoomLevelThreshold?: number;
+    projection?: any;
+}

package/dist/components/SankeyChart/SankeyChart.js

@@ -1,12 +1,12 @@
-import { defineComponent as W, useSlots as x, useTemplateRef as V, ref as L, computed as g, createElementBlock as u, openBlock as f, normalizeStyle as d, createVNode as n, createCommentVNode as c, createElementVNode as P, unref as o, withCtx as A, renderSlot as h } from "vue";
-import { VisSingleContainer as N, VisTooltip as p, VisSankey as B, VisBulletLegend as H } from "@unovis/vue";
-import z from "../Tooltip.js";
-import { LegendPosition as M } from "../../types.js";
-import { SankeyNodeAlign as O, Sankey as F } from "@unovis/ts";
-const T = {
+import { defineComponent as W, useSlots as x, useTemplateRef as V, ref as L, computed as f, createElementBlock as c, openBlock as d, normalizeStyle as r, createVNode as a, createCommentVNode as s, createElementVNode as p, unref as o, withCtx as P, createBlock as w, renderSlot as h } from "vue";
+import { SankeyNodeAlign as A, Sankey as B } from "@unovis/ts";
+import { VisSingleContainer as N, VisTooltip as H, VisSankey as T, VisBulletLegend as z } from "@unovis/vue";
+import M from "../Tooltip.js";
+import { LegendPosition as O } from "../../types.js";
+const F = {
   ref: "slotWrapper",
   style: { display: "none" }
-}, D = /* @__PURE__ */ W({
+}, J = /* @__PURE__ */ W({
   __name: "SankeyChart",
   props: {
     data: {},
@@ -19,7 +19,7 @@ const T = {
     }) },
     categories: {},
     hideLegend: { type: Boolean, default: !1 },
-    legendPosition: { default: M.BottomCenter },
+    legendPosition: { default: O.BottomCenter },
     legendStyle: { default: void 0 },
     label: {},
     subLabel: {},
@@ -27,44 +27,54 @@ const T = {
     linkColor: {},
     linkValue: {},
     nodeWidth: { default: 10 },
-    nodeAlign: { default: O.Justify },
+    nodeAlign: { default: A.Justify },
     nodePadding: { default: 10 },
     nodeSort: {},
     linkSort: {},
     iterations: { default: 32 },
+    hideTooltip: { type: Boolean },
+    tooltip: { default: () => ({
+      followCursor: !0
+    }) },
     highlightSubtreeOnHover: { type: Boolean, default: !1 },
     labelFontSize: {},
     labelColor: {},
-    labelMaxWidth: { default: 70 }
+    labelMaxWidth: { default: 70 },
+    duration: { default: 600 }
   },
   emits: ["click"],
-  setup(e, { emit: b }) {
-    const m = b, t = e, S = x(), k = V("slotWrapper"), i = L(), y = g(() => t.legendPosition.startsWith("top")), v = g(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center");
-    function C(a) {
-      i.value = a;
+  setup(e, { emit: y }) {
+    const b = y, t = e, m = x(), k = V("slotWrapper"), i = L(), S = f(() => t.legendPosition.startsWith("top")), C = f(() => t.legendPosition.includes("left") ? "flex-start" : t.legendPosition.includes("right") ? "flex-end" : "center");
+    function v(n) {
+      i.value = n;
     }
-    return (a, r) => (f(), u("div", {
-      style: d({
+    return (n, u) => (d(), c("div", {
+      style: r({
         display: "flex",
-        flexDirection: y.value ? "column-reverse" : "column",
+        flexDirection: S.value ? "column-reverse" : "column",
         gap: "var(--vis-legend-spacing)"
       }),
-      onClick: r[0] || (r[0] = (l) => m("click", l))
+      onClick: u[0] || (u[0] = (l) => b("click", l))
     }, [
-      n(o(N), {
+      a(o(N), {
         padding: e.padding,
-        height: e.height
+        height: e.height,
+        duration: e.duration
       }, {
-        default: A(() => [
-          n(o(p), {
+        default: P(() => [
+          e.hideTooltip ? s("", !0) : (d(), w(o(H), {
+            key: 0,
+            followCursor: t.tooltip.followCursor,
+            "show-delay": t.tooltip.showDelay,
+            "hide-delay": t.tooltip.hideDelay,
             triggers: {
-              [o(F).selectors.node]: (l) => {
-                var s;
-                return C(l), l ? (s = k.value) == null ? void 0 : s.innerHTML : "";
+              [o(B).selectors.node]: (l) => {
+                var g;
+                return v(l), l ? (g = k.value) == null ? void 0 : g.innerHTML : "";
               }
             }
-          }, null, 8, ["triggers"]),
-          n(o(B), {
+          }, null, 8, ["followCursor", "show-delay", "hide-delay", "triggers"])),
+          a(o(T), {
             data: e.data,
             label: e.label,
             subLabel: e.subLabel,
@@ -84,16 +94,16 @@ const T = {
           }, null, 8, ["data", "label", "subLabel", "nodeColor", "linkColor", "linkValue", "nodeWidth", "nodeAlign", "nodePadding", "nodeSort", "linkSort", "iterations", "highlightSubtreeOnHover", "labelFontSize", "labelColor", "labelMaxWidth"])
         ]),
         _: 1
-      }, 8, ["padding", "height"]),
-      !t.hideLegend && t.categories ? (f(), u("div", {
+      }, 8, ["padding", "height", "duration"]),
+      !t.hideLegend && t.categories ? (d(), c("div", {
         key: 0,
-        style: d({
+        style: r({
           display: "flex",
-          justifyContent: v.value
+          justifyContent: C.value
         })
       }, [
-        n(o(H), {
-          style: d([
+        a(o(z), {
+          style: r([
             t.legendStyle,
             "display: flex; gap: var(--vis-legend-spacing);"
           ]),
@@ -102,22 +112,22 @@ const T = {
             color: Array.isArray(l.color) ? l.color[0] : l.color
           }))
         }, null, 8, ["style", "items"])
-      ], 4)) : c("", !0),
-      P("div", T, [
-        o(S).tooltip ? h(a.$slots, "tooltip", {
+      ], 4)) : s("", !0),
+      p("div", F, [
+        o(m).tooltip ? h(n.$slots, "tooltip", {
           key: 0,
           node: i.value
-        }) : i.value ? h(a.$slots, "fallback", { key: 1 }, () => [
-          n(z, {
+        }) : i.value ? h(n.$slots, "fallback", { key: 1 }, () => [
+          a(M, {
             data: i.value,
             categories: t.categories ?? {},
             "title-formatter": (l) => l.label || l.id || "Node"
           }, null, 8, ["data", "categories", "title-formatter"])
-        ]) : c("", !0)
+        ]) : s("", !0)
       ], 512)
     ], 4));
   }
 });
 export {
-  D as default
+  J as default
 };

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

@@ -1,4 +1,4 @@
-import { SankeyInputLink, SankeyInputNode } from '../../types';
+import { SankeyInputNode, SankeyInputLink } from '@unovis/ts';
 import { SankeyChartProps } from './types';
 declare const _default: <N extends SankeyInputNode, L extends SankeyInputLink>(__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<{

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

@@ -1,4 +1,5 @@
-import { BulletLegendItemInterface, LegendPosition, SankeyInputLink, SankeyInputNode, SankeyNodeAlign } from '../../types';
+import { BulletLegendItemInterface, LegendPosition, TooltipConfig } from '../../types';
+import { SankeyInputNode, SankeyInputLink, SankeyNodeAlign } from '@unovis/ts';
 export type SankeyChartProps<N extends SankeyInputNode, L extends SankeyInputLink> = {
     /**
      * The data to be displayed in the Sankey diagram.
@@ -84,6 +85,14 @@ export type SankeyChartProps<N extends SankeyInputNode, L extends SankeyInputLin
      * Sankey algorithm iterations. Default: 32
      */
     iterations?: number;
+    /**
+     * If `true`, hides the chart tooltip.
+     */
+    hideTooltip?: boolean;
+    /**
+     * Configuration object for the chart tooltip.
+     */
+    tooltip?: TooltipConfig;
     /**
      * Highlight the corresponding subtree on node / link hover. Default: false
      */
@@ -100,4 +109,8 @@ export type SankeyChartProps<N extends SankeyInputNode, L extends SankeyInputLin
      * Maximum label width in pixels. Default: 70
      */
     labelMaxWidth?: number;
+    /**
+     * Animation duration in milliseconds.
+     */
+    duration?: number;
 };

package/dist/components/Tooltip.js

@@ -1,6 +1,6 @@
-import { defineComponent as F, computed as m, createElementBlock as n, openBlock as s, createElementVNode as r, toDisplayString as c, Fragment as p, renderList as z, normalizeStyle as w } from "vue";
-import { getFirstPropertyValue as B } from "../utils.js";
-const C = /* @__PURE__ */ F({
+import { defineComponent as w, computed as l, createElementBlock as a, openBlock as n, createElementVNode as s, createCommentVNode as k, normalizeStyle as d, toDisplayString as m, Fragment as g, renderList as B } from "vue";
+import { getFirstPropertyValue as C } from "../utils.js";
+const _ = /* @__PURE__ */ w({
   __name: "Tooltip",
   props: {
     data: {},
@@ -8,42 +8,42 @@ const C = /* @__PURE__ */ F({
     titleFormatter: { type: Function },
     yFormatter: { type: Function }
   },
-  setup(l) {
-    const t = l, v = m(
-      () => t.titleFormatter ? t.titleFormatter(t.data) : B(t.data)
-    ), d = ["_index", "_stacked", "_ending"], g = m(() => Object.entries(t.data ?? []).filter(
-      ([e, a]) => !d.includes(e) && Object.keys(t.categories).includes(e)
-    )), u = {
+  setup(r) {
+    const t = r, u = l(
+      () => t.titleFormatter ? t.titleFormatter(t.data) : C(t.data)
+    ), f = ["_index", "_stacked", "_ending"], p = l(() => Object.entries(t.data ?? []).filter(
+      ([e, v]) => !f.includes(e) && Object.keys(t.categories).includes(e)
+    )), c = l(() => p.value.length > 0), y = {
       display: "flex",
       flexDirection: "column"
-    }, f = {
+    }, h = l(() => ({
       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)",
+      borderBottom: c.value ? "var(--vis-tooltip-title-border-bottom, 1px solid #e5e7eb)" : "none",
       padding: "var(--vis-tooltip-title-padding, 0.75rem 0.75rem 0.5rem 0.75rem)",
-      margin: "var(--vis-tooltip-title-margin, 0 0 0.25rem 0)",
+      margin: c.value ? "var(--vis-tooltip-title-margin, 0 0 0.25rem 0)" : "0",
       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)"
-    }, y = {
+    })), b = {
       display: "grid",
       gridTemplateColumns: "auto 1fr auto",
       alignItems: "center",
       gap: "var(--vis-tooltip-content-gap, 0.25rem 0.5rem)",
       padding: "var(--vis-tooltip-content-padding, 0 0.75rem 0.5rem 0.75rem)"
-    }, h = {
+    }, x = {
       fontWeight: "var(--vis-tooltip-label-font-weight, 400)",
       fontSize: "var(--vis-tooltip-label-font-size, 0.875rem)",
       color: "var(--vis-tooltip-label-color, inherit)",
       margin: "var(--vis-tooltip-label-margin, 0 1rem 0 0)",
       whiteSpace: "nowrap"
-    }, b = {
+    }, S = {
       fontSize: "var(--vis-tooltip-value-font-size, 0.875rem)",
       fontWeight: "var(--vis-tooltip-value-font-weight, 600)",
       color: "var(--vis-tooltip-value-color, inherit)",
       textAlign: "right",
       fontVariantNumeric: "tabular-nums"
-    }, x = (e, a) => {
+    }, F = (e, v) => {
       var o, i;
       return {
         width: "8px",
@@ -52,23 +52,28 @@ const C = /* @__PURE__ */ F({
         borderRadius: "var(--vis-tooltip-dot-border-radius, 4px)",
         margin: "var(--vis-tooltip-dot-margin, 0)",
         flexShrink: "0",
-        backgroundColor: typeof ((o = t.categories[e]) == null ? void 0 : o.color) == "string" && ((i = t.categories[e]) != null && i.color) ? t.categories[e].color : `var(--vis-color${a})`
+        backgroundColor: typeof ((o = t.categories[e]) == null ? void 0 : o.color) == "string" && ((i = t.categories[e]) != null && i.color) ? t.categories[e].color : `var(--vis-color${v})`
       };
     };
-    return (e, a) => (s(), n("div", { style: u }, [
-      r("div", { style: f }, c(v.value), 1),
-      r("div", { style: y }, [
-        (s(!0), n(p, null, z(g.value, ([o, i], S) => (s(), n(p, { key: o }, [
-          r("span", {
-            style: w(x(o, S))
+    return (e, v) => (n(), a("div", { style: y }, [
+      s("div", {
+        style: d(h.value)
+      }, m(u.value), 5),
+      c.value ? (n(), a("div", {
+        key: 0,
+        style: b
+      }, [
+        (n(!0), a(g, null, B(p.value, ([o, i], z) => (n(), a(g, { key: o }, [
+          s("span", {
+            style: d(F(o, z))
           }, null, 4),
-          r("span", { style: h }, c(l.categories[o].name), 1),
-          r("span", { style: b }, c(l.yFormatter ? l.yFormatter(i) : i), 1)
+          s("span", { style: x }, m(r.categories[o].name), 1),
+          s("span", { style: S }, m(r.yFormatter ? r.yFormatter(i) : i), 1)
         ], 64))), 128))
-      ])
+      ])) : k("", !0)
     ]));
   }
 });
 export {
-  C as default
+  _ as default
 };