vue-chrts 2.0.0 → 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

@@ -0,0 +1,133 @@
+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" }
+}, J = /* @__PURE__ */ W({
+  __name: "SankeyChart",
+  props: {
+    data: {},
+    height: {},
+    padding: { default: () => ({
+      top: 5,
+      right: 5,
+      bottom: 5,
+      left: 5
+    }) },
+    categories: {},
+    hideLegend: { type: Boolean, default: !1 },
+    legendPosition: { default: O.BottomCenter },
+    legendStyle: { default: void 0 },
+    label: {},
+    subLabel: {},
+    nodeColor: {},
+    linkColor: {},
+    linkValue: {},
+    nodeWidth: { default: 10 },
+    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 },
+    duration: { default: 600 }
+  },
+  emits: ["click"],
+  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 (n, u) => (d(), c("div", {
+      style: r({
+        display: "flex",
+        flexDirection: S.value ? "column-reverse" : "column",
+        gap: "var(--vis-legend-spacing)"
+      }),
+      onClick: u[0] || (u[0] = (l) => b("click", l))
+    }, [
+      a(o(N), {
+        padding: e.padding,
+        height: e.height,
+        duration: e.duration
+      }, {
+        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(B).selectors.node]: (l) => {
+                var g;
+                return v(l), l ? (g = k.value) == null ? void 0 : g.innerHTML : "";
+              }
+            }
+          }, null, 8, ["followCursor", "show-delay", "hide-delay", "triggers"])),
+          a(o(T), {
+            data: e.data,
+            label: e.label,
+            subLabel: e.subLabel,
+            nodeColor: e.nodeColor,
+            linkColor: e.linkColor,
+            linkValue: e.linkValue,
+            nodeWidth: e.nodeWidth,
+            nodeAlign: e.nodeAlign,
+            nodePadding: e.nodePadding,
+            nodeSort: e.nodeSort,
+            linkSort: e.linkSort,
+            iterations: e.iterations,
+            highlightSubtreeOnHover: e.highlightSubtreeOnHover,
+            labelFontSize: e.labelFontSize,
+            labelColor: e.labelColor,
+            labelMaxWidth: e.labelMaxWidth
+          }, null, 8, ["data", "label", "subLabel", "nodeColor", "linkColor", "linkValue", "nodeWidth", "nodeAlign", "nodePadding", "nodeSort", "linkSort", "iterations", "highlightSubtreeOnHover", "labelFontSize", "labelColor", "labelMaxWidth"])
+        ]),
+        _: 1
+      }, 8, ["padding", "height", "duration"]),
+      !t.hideLegend && t.categories ? (d(), c("div", {
+        key: 0,
+        style: r({
+          display: "flex",
+          justifyContent: C.value
+        })
+      }, [
+        a(o(z), {
+          style: r([
+            t.legendStyle,
+            "display: flex; gap: var(--vis-legend-spacing);"
+          ]),
+          items: Object.values(t.categories).map((l) => ({
+            ...l,
+            color: Array.isArray(l.color) ? l.color[0] : l.color
+          }))
+        }, null, 8, ["style", "items"])
+      ], 4)) : s("", !0),
+      p("div", F, [
+        o(m).tooltip ? h(n.$slots, "tooltip", {
+          key: 0,
+          node: i.value
+        }) : 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"])
+        ]) : s("", !0)
+      ], 512)
+    ], 4));
+  }
+});
+export {
+  J as default
+};

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

@@ -0,0 +1,22 @@
+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<{
+        readonly onClick?: ((event: MouseEvent) => any) | undefined;
+    } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onClick"> & SankeyChartProps<N, L> & Partial<{}>> & import('vue').PublicProps;
+    expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: {
+        tooltip?(_: {
+            node: any;
+        }): any;
+        fallback?(_: {}): any;
+    };
+    emit: (e: "click", event: MouseEvent) => void;
+}>) => import('vue').VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/components/SankeyChart/SankeyChart2.js

@@ -0,0 +1,4 @@
+import f from "./SankeyChart.js";
+export {
+  f as default
+};

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

@@ -0,0 +1,116 @@
+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.
+     * Contains nodes and links representing the flow between entities.
+     */
+    data: {
+        nodes: N[];
+        links: L[];
+    };
+    /**
+     * The height of the chart in pixels.
+     */
+    height: number;
+    /**
+     * Optional padding applied to the chart.
+     * Allows specifying individual padding values for the top, right, bottom, and left sides.
+     */
+    padding?: {
+        top: number;
+        right: number;
+        bottom: number;
+        left: number;
+    };
+    /**
+     * A record mapping category keys to `BulletLegendItemInterface` objects.
+     * This defines the visual representation and labels for each category in the chart's legend.
+     */
+    categories?: Record<string, BulletLegendItemInterface>;
+    /**
+     * If `true`, hides the chart legend.
+     */
+    hideLegend?: boolean;
+    /**
+     * Optional position for the legend, if applicable.
+     * See `LegendPosition` for available options.
+     */
+    legendPosition?: LegendPosition;
+    /**
+     * Optional style object for the legend container. Allows custom CSS styling.
+     */
+    legendStyle?: string | Record<string, string>;
+    /**
+     * Node label accessor function or value.
+     */
+    label?: (node: N) => string;
+    /**
+     * Node sub-label accessor function or value.
+     */
+    subLabel?: (node: N) => string;
+    /**
+     * Node color accessor function or value.
+     */
+    nodeColor?: (node: N) => string;
+    /**
+     * Link color accessor function or value.
+     */
+    linkColor?: (link: L) => string;
+    /**
+     * Link value accessor function or value.
+     */
+    linkValue?: (link: L) => number;
+    /**
+     * Sankey node width in pixels. Default: 10
+     */
+    nodeWidth?: number;
+    /**
+     * Sankey node alignment method. Default: 'justify'
+     */
+    nodeAlign?: SankeyNodeAlign;
+    /**
+     * Sankey vertical separation between nodes in pixels. Default: 10
+     */
+    nodePadding?: number;
+    /**
+     * Node sorting function.
+     */
+    nodeSort?: (node1: any, node2: any) => number;
+    /**
+     * Link sorting function.
+     */
+    linkSort?: (link1: any, link2: any) => number;
+    /**
+     * 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
+     */
+    highlightSubtreeOnHover?: boolean;
+    /**
+     * Label font size in pixels.
+     */
+    labelFontSize?: number;
+    /**
+     * Label color accessor function or value.
+     */
+    labelColor?: (node: N) => string;
+    /**
+     * 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
 };