vue-data-ui 3.8.5 → 3.9.1

package/dist/types/vue-data-ui.d.ts

@@ -67,7 +67,8 @@ declare module "vue-data-ui" {
         | VueUiRidgelineDatasetItem[]
         | VueUiChordDataset
         | VueUiStacklineDatasetItem[]
-        | VueUiDagDataset;
+        | VueUiDagDataset
+        | VueUiGeoDatasetItem[];
 
     export type VueDataUiAnyConfig =
         | VueUi3dBarConfig
@@ -131,7 +132,8 @@ declare module "vue-data-ui" {
         | VueUiRidgelineConfig
         | VueUiChordConfig
         | VueUiStacklineConfig
-        | VueUiDagConfig;
+        | VueUiDagConfig
+        | VueUiGeoConfig;
 
     export type VueDataUiProps = {
         loader?: VueDataUiLoader | null;
@@ -192,6 +194,8 @@ declare module "vue-data-ui" {
     export type VueUiRingsEvent = ChartEvent<VueUiRingsDatapoint>;
     export type VueUiOnionEvent = ChartEvent<VueUiOnionDatapoint>;
     export type VueUiWorldEvent = ChartEvent<VueUiWorldDatapoint>;
+    export type VueUiGeoPointEvent = ChartEvent<VueUiGeoDatapoint>;
+    export type VueUiGeoTerritoryEvent = ChartEvent<VueUiGeoTerritory>;
     export type VueUiGalaxyEvent = ChartEvent<VueUiGalaxyDatapoint>;
     export type VueUiWaffleEvent = ChartEvent<VueUiWaffleDatapoint>;
     export type VueUiScatterEvent = ChartEvent<VueUiScatterDatapoint>;
@@ -9567,6 +9571,206 @@ declare module "vue-data-ui" {
         VueUiDagExpose
     >
 
+
+    export type GeoJsonPosition = [longitude: number, latitude: number] | [number, number, number];
+
+    export type GeoJsonPoint = {
+        type: "Point";
+        coordinates: GeoJsonPosition;
+    };
+
+    export type GeoJsonMultiPoint = {
+        type: "MultiPoint";
+        coordinates: GeoJsonPosition[];
+    };
+
+    export type GeoJsonLineString = {
+        type: "LineString";
+        coordinates: GeoJsonPosition[];
+    };
+
+    export type GeoJsonMultiLineString = {
+        type: "MultiLineString";
+        coordinates: GeoJsonPosition[][];
+    };
+
+    export type GeoJsonPolygon = {
+        type: "Polygon";
+        coordinates: GeoJsonPosition[][];
+    };
+
+    export type GeoJsonMultiPolygon = {
+        type: "MultiPolygon";
+        coordinates: GeoJsonPosition[][][];
+    };
+
+    export type GeoJsonGeometryCollection = {
+        type: "GeometryCollection";
+        geometries: GeoJsonGeometry[];
+    };
+
+    export type GeoJsonGeometry =
+        | GeoJsonPoint
+        | GeoJsonMultiPoint
+        | GeoJsonLineString
+        | GeoJsonMultiLineString
+        | GeoJsonPolygon
+        | GeoJsonMultiPolygon
+        | GeoJsonGeometryCollection;
+
+    export type GeoJsonFeature<Properties extends Record<string, unknown> = Record<string, unknown>> = {
+        type: "Feature";
+        geometry: GeoJsonGeometry | null;
+        properties?: Properties | null;
+        id?: string | number;
+    };
+
+    export type VueUiGeoTerritory<Properties extends Record<string, unknown> = Record<string, unknown>> = {
+        uid: string;
+        path: string;
+        name: string;
+        properties: Properties;
+        geometry: GeoJsonGeometry;
+        feature: GeoJsonFeature;
+    }
+
+    export type GeoJsonFeatureCollection<
+        Properties extends Record<string, unknown> = Record<string, unknown>
+    > = {
+        type: "FeatureCollection";
+        features: Array<GeoJsonFeature<Properties>>;
+    };
+
+    export type VueUiGeoMapGeoJson =
+        | GeoJsonFeatureCollection
+        | GeoJsonFeature
+        | GeoJsonGeometryCollection
+        | GeoJsonGeometry
+        | Array<GeoJsonFeature>;
+
+    export type VueUiGeoDatasetItem = {
+        [key: string]: any;
+        name: string;
+        coordinates: [longitude: number, latitude: number];
+        description?: string;
+        color?: string;
+        radius?: number;
+    }
+
+    export type VueUiGeoDatapoint = {
+        color: string;
+        coordinates: [x: number, y: number];
+        description: string;
+        fill: string;
+        hoverRadiusRatio: number;
+        index: number;
+        name: string;
+        radius: number;
+        original: VueUiGeoDatasetItem;
+        uid: string;
+        x: number;
+        y: number;
+    }
+
+    export type VueUiGeoConfig = {
+        loading?: boolean;
+        debug?: boolean;
+        responsive?: boolean;
+        theme?: Theme;
+        projection?: 'aitoff' | 'azimuthalEquidistant' | 'bonne' | 'equirectangular' | 'gallPeters' | 'globe' | 'hammer' | 'mercator' | 'mollweide' | 'robinson' | 'sinusoidal' | 'vanDerGrinten' | 'winkelTripel';
+        userOptions?: ChartUserOptions;
+        map?: {
+            geoJson?: VueUiGeoMapGeoJson;
+            center?: [x: number, y: number];
+            fitPadding?: number;
+        };
+        events?: {
+            datapointClick?: VueUiGeoPointEvent;
+            datapointEnter?: VueUiGeoPointEvent;
+            datapointLeave?: VueUiGeoPointEvent;
+            territoryEnter?: VueUiGeoTerritoryEvent;
+            territoryLeave?: VueUiGeoTerritoryEvent;
+            territoryClick?: VueUiGeoTerritoryEvent;
+        };
+        style: {
+            fontFamily?: string;
+            chart?: {
+                dimensions?: {
+                    width?: number | null;
+                    height?: number | null;
+                };
+                backgroundColor?: string;
+                color?: string;
+                territory?: {
+                    fill?: string;
+                    stroke?: string;
+                    strokeWidth?: number;
+                    hover?: {
+                        fill?: string;
+                        stroke?: string;
+                        strokeWidth?: number;
+                    };
+                };
+                points?: {
+                    radius?: number;
+                    stroke?: string;
+                    strokeWidth?: number;
+                    fill?: number;
+                    hoverRadiusRatio?: number;
+                    labels?: {
+                        show?: boolean;
+                        fontSizeRatio?: number;
+                        color?: string;
+                        offsetY?: number;
+                    };
+                };
+                controls?: {
+                    position?: 'top' | 'bottom';
+                    show?: boolean;
+                    backgroundColor?: string;
+                    buttonColor?: string;
+                    color?: string;
+                    fontSize?: number;
+                    border?: string;
+                    padding?: string;
+                    borderRadius?: string;
+                };
+                title?: ChartTitle;
+                tooltip?: ChartTooltip;
+                zoom?: {
+                    active?: boolean;
+                };
+            };
+        };
+    };
+
+    export type FocusLocationOptions = {
+        animated?: boolean;
+    };
+
+    export type VueUiGeoExpose = {
+        getImage(options?: { scale?: number }): GetImagePromise
+        generatePdf(): void
+        generateImage(): void
+        toggleAnnotator(): void
+        toggleFullscreen(): void
+        zoomIn(): void
+        zoomOut(): void
+        resetZoom(): void
+        focusLocation(
+            coordinates: [longitude: number, latitude: number],
+            options?: FocusLocationOptions
+        ): Promise<void>;
+    }
+
+    export const VueUiGeo: DefineComponent<
+        {
+            config?: VueUiGeoConfig,
+            dataset?: VueUiGeoDatasetItem[]
+        },
+        VueUiGeoExpose
+    >    
+
     export type VueDataUiConfig =
         | VueUi3dBarConfig
         | VueUiAgePyramidConfig
@@ -9631,7 +9835,8 @@ declare module "vue-data-ui" {
         | VueUiRidgelineConfig
         | VueUiChordConfig
         | VueUiStacklineConfig
-        | VueUiDagConfig;
+        | VueUiDagConfig
+        | VueUiGeoConfig;
 
     export type VueDataUiConfigKey =
         | "vue_ui_3d_bar"
@@ -9697,7 +9902,8 @@ declare module "vue-data-ui" {
         | "vue_ui_ridgeline"
         | "vue_ui_chord"
         | "vue_ui_stackline"
-        | "vue_ui_dag";
+        | "vue_ui_dag"
+        | "vue_ui_geo";
 
     export type VueDataUiWordCloudTransformCallback =
         | ((word: string) => string)

package/dist/types/vue-ui-geo.d.ts

@@ -0,0 +1,10 @@
+import { DefineComponent } from 'vue';
+import { VueUiGeoConfig, VueUiGeoDatasetItem, VueUiGeoExpose } from 'vue-data-ui';
+
+declare const VueUiGeo: DefineComponent<{
+    config?: VueUiGeoConfig;
+    dataset?: VueUiGeoDatasetItem[];
+}, VueUiGeoExpose>;
+
+export default VueUiGeo;
+export { VueUiGeo }

package/dist/{useNestedProp-B696zdq-.js → useNestedProp-BeKjhKny.js}

@@ -1,6 +1,6 @@
-import { t as tt, v as ot } from "./lib-_nVZfi2t.js";
-function lt() {
-  const e = "#2D353C", w = "#A1A1A1", r = "#e1e5e8", s = "#CCCCCC", F = "#4A4A4A", o = "#FFFFFF", _ = "#fafafa", u = "#1f77b4", C = "#d62728", L = "#2ca02c", A = "#42d392", O = "#FFD055", t = {
+import { t as ot, v as rt } from "./lib-_nVZfi2t.js";
+function at() {
+  const e = "#2D353C", w = "#A1A1A1", r = "#e1e5e8", s = "#CCCCCC", A = "#4A4A4A", o = "#FFFFFF", _ = "#fafafa", u = "#1f77b4", C = "#d62728", L = "#2ca02c", F = "#42d392", O = "#FFD055", t = {
     _6: 6,
     _10: 10,
     _12: 12,
@@ -174,7 +174,7 @@ function lt() {
   }, S = {
     show: !0,
     color: s,
-    highlightColor: F,
+    highlightColor: A,
     fontSize: t._14,
     useResetSlot: !1,
     startIndex: null,
@@ -3327,7 +3327,7 @@ function lt() {
     yAxisLabel: "",
     zoomXy: !0,
     zoomColor: s,
-    zoomHighlightColor: F,
+    zoomHighlightColor: A,
     zoomFontSize: t._14,
     zoomUseResetSlot: !1,
     zoomMinimap: T,
@@ -4863,7 +4863,7 @@ function lt() {
         suffix: ""
       }
     }
-  }, Te = {
+  }, Fe = {
     debug: !1,
     loading: !1,
     responsive: !1,
@@ -5042,7 +5042,7 @@ function lt() {
       th: i,
       td: n
     }
-  }, Fe = {
+  }, Te = {
     debug: !1,
     // v3
     loading: !1,
@@ -5404,7 +5404,7 @@ function lt() {
       gutterBlur: 0,
       trackHueRotate: 20,
       trackBlur: 1,
-      trackColor: A
+      trackColor: F
     },
     line: {
       gutterColor: s,
@@ -5412,7 +5412,7 @@ function lt() {
       gutterBlur: 0,
       trackHueRotate: 20,
       trackBlur: 1,
-      trackColor: A
+      trackColor: F
     },
     bar: {
       gutterColor: s,
@@ -5420,7 +5420,7 @@ function lt() {
       gutterBlur: 0,
       trackHueRotate: 20,
       trackBlur: 1,
-      trackColor: A
+      trackColor: F
     }
   }, Me = {
     readonly: !1,
@@ -7081,6 +7081,87 @@ function lt() {
         title: l
       }
     }
+  }, tt = {
+    loading: !1,
+    debug: !1,
+    responsive: !1,
+    projection: "equirectangular",
+    theme: "",
+    userOptions: a({
+      tooltip: !0,
+      pdf: !0,
+      csv: !1,
+      img: !0,
+      svg: !0,
+      table: !1,
+      labels: !1,
+      fullscreen: !0,
+      annotator: !0,
+      zoom: !0
+    }),
+    map: {
+      geoJson: null,
+      center: [0, 0],
+      fitPadding: 0
+    },
+    events: {
+      datapointEnter: null,
+      datapointLeave: null,
+      datapointClick: null,
+      territoryEnter: null,
+      territoryLeave: null,
+      territoryClick: null
+    },
+    style: {
+      fontFamily: "inherit",
+      chart: {
+        dimensions: {
+          width: null,
+          height: null
+        },
+        backgroundColor: o,
+        color: e,
+        territory: {
+          fill: "#F2F3F5",
+          stroke: "#D0D4D8",
+          strokeWidth: 1,
+          hover: {
+            fill: "#E7E1EE",
+            stroke: s,
+            strokeWidth: 1.5
+          }
+        },
+        points: {
+          radius: 1,
+          stroke: o,
+          strokeWidth: 1,
+          fill: A,
+          hoverRadiusRatio: 1.2,
+          labels: {
+            show: !0,
+            fontSizeRatio: 1,
+            color: e,
+            offsetY: 0
+          }
+        },
+        controls: {
+          position: "bottom",
+          show: !0,
+          backgroundColor: r,
+          buttonColor: r,
+          color: e,
+          fontSize: 14,
+          border: `1px solid ${s}`,
+          padding: "0.5rem",
+          borderRadius: "0.25rem"
+        },
+        title: l,
+        tooltip: c,
+        zoom: {
+          active: !0
+        }
+      }
+    }
   };
   return {
     vue_ui_xy: y,
@@ -7123,8 +7204,8 @@ function lt() {
     vue_ui_table_sparkline: Le,
     vue_ui_table_heatmap: Pe,
     vue_ui_word_cloud: Ae,
-    vue_ui_xy_canvas: Te,
-    vue_ui_flow: Fe,
+    vue_ui_xy_canvas: Fe,
+    vue_ui_flow: Te,
     vue_ui_parallel_coordinate_plot: Oe,
     vue_ui_timer: We,
     vue_ui_carousel_table: Xe,
@@ -7138,6 +7219,7 @@ function lt() {
     vue_ui_chord: Je,
     vue_ui_stackline: $,
     vue_ui_dag: et,
+    vue_ui_geo: tt,
     // non chart components
     vue_ui_cursor: Re,
     vue_ui_accordion: Ve,
@@ -7153,16 +7235,16 @@ function lt() {
     vue_ui_circle_pack: Ze
   };
 }
-function at({ defaultConfig: e, userConfig: w }) {
+function st({ defaultConfig: e, userConfig: w }) {
   if (!Object.keys(w || {}).length)
     return e;
-  const r = tt({
+  const r = ot({
     defaultConfig: e,
     userConfig: w
   });
-  return ot(r);
+  return rt(r);
 }
 export {
-  at as a,
-  lt as u
+  st as a,
+  at as u
 };

package/dist/usePanZoom-CDF7rb3o.js

@@ -0,0 +1,132 @@
+import { ref as h, computed as j, onMounted as J, onUnmounted as K, watchEffect as Q, watch as _ } from "vue";
+function R(v, k = { x: 0, y: 0, width: 100, height: 100 }, z = 1, m, D = null) {
+  const o = h({ ...k }), n = h({ ...o.value }), i = h(1), E = h(!1), L = h(!1), S = h(0), T = h(null), P = h(1), x = h({ x: 0, y: 0 }), H = j(
+    () => n.value.x !== o.value.x || n.value.y !== o.value.y || n.value.width !== o.value.width || n.value.height !== o.value.height
+  );
+  let y = null;
+  function Z(e) {
+    if (e.length < 2) return 0;
+    const t = e[0].clientX - e[1].clientX, a = e[0].clientY - e[1].clientY;
+    return Math.hypot(t, a);
+  }
+  function Y(e) {
+    const t = v.value;
+    if (!t) return { x: 0, y: 0 };
+    const a = t.createSVGPoint();
+    a.x = e.clientX, a.y = e.clientY;
+    const l = t.getScreenCTM()?.inverse();
+    return l ? a.matrixTransform(l) : { x: 0, y: 0 };
+  }
+  function I(e, t) {
+    const a = v.value;
+    if (!a) return { dx: 0, dy: 0 };
+    const l = Math.max(1, a.clientWidth), u = Math.max(1, a.clientHeight), s = n.value.width / l, r = n.value.height / u;
+    return { dx: e * s, dy: t * r };
+  }
+  function F(e) {
+    E.value = !0;
+    const t = e.touches?.[0] || e;
+    x.value = { x: t.clientX, y: t.clientY }, v.value && (v.value.style.cursor = "grabbing");
+  }
+  function X(e) {
+    if (!E.value) return;
+    const t = e.touches?.[0] || e, a = t.clientX - x.value.x, l = t.clientY - x.value.y;
+    if (a === 0 && l === 0) return;
+    const { dx: u, dy: s } = I(a, l);
+    n.value.x -= u, n.value.y -= s, x.value = { x: t.clientX, y: t.clientY };
+  }
+  function f() {
+    E.value = !1, v.value && (v.value.style.cursor = "");
+  }
+  function b(e) {
+    D && D(), e.preventDefault();
+    const t = e.deltaY > 0 ? 0.9 : 1.1;
+    w(t, Y(e));
+  }
+  function A(e) {
+    e.preventDefault();
+    const t = Y(e), a = 1.5 * (1 + z / 100);
+    q(a, t);
+  }
+  function q(e, t) {
+    y && cancelAnimationFrame(y);
+    const a = i.value, l = a * e;
+    let u = null;
+    const s = 200, r = (d) => d < 0.5 ? 2 * d * d : -1 + (4 - 2 * d) * d, c = (d) => {
+      u == null && (u = d);
+      const V = Math.min((d - u) / s, 1), U = (a + (l - a) * r(V)) / i.value;
+      w(U, t), V < 1 ? y = requestAnimationFrame(c) : y = null;
+    };
+    requestAnimationFrame(c);
+  }
+  function w(e, t) {
+    const a = i.value * e, l = a / i.value, u = n.value.width / l, s = n.value.height / l, r = (t.x - n.value.x) * (1 - 1 / l), c = (t.y - n.value.y) * (1 - 1 / l);
+    n.value.x += r, n.value.y += c, n.value.width = u, n.value.height = s, i.value = a;
+  }
+  function B(e) {
+    e.touches.length === 2 ? (L.value = !0, S.value = Z(e.touches), T.value = { ...n.value }, P.value = i.value) : (e.preventDefault(), F(e));
+  }
+  function C(e) {
+    if (L.value && e.touches.length === 2) {
+      e.preventDefault();
+      const t = Z(e.touches);
+      if (!S.value || !t) return;
+      const a = t / S.value, u = P.value * a / i.value, s = (e.touches[0].clientX + e.touches[1].clientX) / 2, r = (e.touches[0].clientY + e.touches[1].clientY) / 2, c = Y({ clientX: s, clientY: r });
+      n.value = { ...T.value }, i.value = P.value, w(u, c);
+    } else
+      e.preventDefault(), X(e);
+  }
+  function p(e) {
+    e.touches.length < 2 && (L.value = !1), f();
+  }
+  function W(e = !1) {
+    if (!e) {
+      n.value = { ...o.value }, i.value = 1;
+      return;
+    }
+    const t = { ...n.value }, a = i.value, l = 300;
+    let u = null;
+    const s = (r) => {
+      u == null && (u = r);
+      const c = Math.min((r - u) / l, 1);
+      n.value = {
+        x: t.x + (o.value.x - t.x) * c,
+        y: t.y + (o.value.y - t.y) * c,
+        width: t.width + (o.value.width - t.width) * c,
+        height: t.height + (o.value.height - t.height) * c
+      }, i.value = a + (1 - a) * c, c < 1 && requestAnimationFrame(s);
+    };
+    requestAnimationFrame(s);
+  }
+  function G(e, t = {}) {
+    const { overwriteCurrentIfNotZoomed: a = !0 } = t, l = n.value.x !== o.value.x || n.value.y !== o.value.y || n.value.width !== o.value.width || n.value.height !== o.value.height;
+    o.value = { ...e }, !l && a && (n.value = { ...o.value }, i.value = 1);
+  }
+  function M() {
+    const e = v.value;
+    e && (e.addEventListener("mousedown", F), e.addEventListener("mousemove", X), e.addEventListener("mouseup", f), e.addEventListener("mouseleave", f), e.addEventListener("wheel", b, { passive: !1 }), e.addEventListener("dblclick", A), e.addEventListener("touchstart", B, { passive: !1 }), e.addEventListener("touchmove", C, { passive: !1 }), e.addEventListener("touchend", p), e.addEventListener("touchcancel", p));
+  }
+  function g() {
+    const e = v.value;
+    e && (e.removeEventListener("mousedown", F), e.removeEventListener("mousemove", X), e.removeEventListener("mouseup", f), e.removeEventListener("mouseleave", f), e.removeEventListener("wheel", b), e.removeEventListener("dblclick", A), e.removeEventListener("touchstart", B), e.removeEventListener("touchmove", C), e.removeEventListener("touchend", p), e.removeEventListener("touchcancel", p));
+  }
+  J(() => {
+    (!m || m.value) && M();
+  }), K(g), Q(() => {
+    if (m)
+      return m.value ? M() : g(), () => g();
+  }), _(v, () => {
+    g(), (!m || m.value) && M();
+  });
+  function N(e, t = !1) {
+    const a = {
+      x: n.value.x + n.value.width / 2,
+      y: n.value.y + n.value.height / 2
+    };
+    t ? q(e, a) : w(e, a);
+  }
+  return { viewBox: n, resetZoom: W, isZoom: H, setInitialViewBox: G, scale: i, zoomByFactor: N };
+}
+export {
+  R as u
+};