vue-chrts 2.1.0-beta-2 → 2.1.0-beta-4

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

@@ -1,4 +1,4 @@
-import { BulletLegendItemInterface, CrosshairConfig, LegendPosition, AxisConfig } from '../../types';
+import { BulletLegendItemInterface, CrosshairConfig, LegendPosition, AxisConfig, TooltipConfig } from '../../types';
 export interface GanttChartProps<T> {
     /**
      * The data to be displayed in the timeline chart.
@@ -113,4 +113,12 @@ export interface GanttChartProps<T> {
      * Axis configuration object for customizing the appearance of the axes.
      */
     yAxisConfig?: AxisConfig;
+    /**
+     * Animation duration in milliseconds for the chart components.
+     */
+    duration?: number;
+    /**
+     * Configuration object for the chart tooltip.
+     */
+    tooltip?: TooltipConfig;
 }

package/dist/components/LineChart/LineChart.js

@@ -1,6 +1,6 @@
-import { defineComponent as n, useSlots as a, createBlock as r, openBlock as l, mergeProps as p, createSlots as s, withCtx as y, renderSlot as c, normalizeProps as m, guardReactiveProps as d } from "vue";
-import x from "../AreaChart/AreaChart.js";
-const g = /* @__PURE__ */ n({
+import { defineComponent as t, useSlots as a, createBlock as l, openBlock as r, mergeProps as p, createSlots as s, withCtx as y, renderSlot as c, normalizeProps as d, guardReactiveProps as x } from "vue";
+import m from "../AreaChart/AreaChart.js";
+const T = /* @__PURE__ */ t({
   __name: "LineChart",
   props: {
     data: {},
@@ -19,7 +19,13 @@ const g = /* @__PURE__ */ n({
     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 },
     hideTooltip: { type: Boolean },
     legendPosition: {},
@@ -37,15 +43,17 @@ const g = /* @__PURE__ */ n({
     yAxisConfig: {},
     yDomain: {},
     xDomain: {},
-    stacked: { type: Boolean }
+    stacked: { type: Boolean },
+    duration: {},
+    tooltip: {}
   },
   setup(o) {
-    const t = o;
-    return a(), (e, B) => (l(), r(x, p(t, { "hide-area": !0 }), s({ _: 2 }, [
+    const i = o;
+    return a(), (e, B) => (r(), l(m, p(i, { "hide-area": !0 }), s({ _: 2 }, [
       e.$slots.tooltip ? {
         name: "tooltip",
-        fn: y((i) => [
-          c(e.$slots, "tooltip", m(d(i)))
+        fn: y((n) => [
+          c(e.$slots, "tooltip", d(x(n)))
         ]),
         key: "0"
       } : void 0
@@ -53,5 +61,5 @@ const g = /* @__PURE__ */ n({
   }
 });
 export {
-  g as default
+  T as default
 };

package/dist/components/Maps/DottedMap/DottedMap.js

@@ -0,0 +1,170 @@
+import { defineComponent as M, ref as $, computed as c, watch as I, createElementBlock as y, openBlock as C, normalizeStyle as S, createElementVNode as O, createCommentVNode as H, renderSlot as m, withModifiers as B, unref as n, createVNode as z, mergeProps as E } from "vue";
+import { REGIONS as V, COUNTRIES as _, DEFAULT_ZOOM as D } from "./regions.js";
+import { USA_PINS as R, WORLD_PINS as L } from "./pins.js";
+import { useMapPanZoom as U } from "./useMapPanZoom.js";
+import j from "./core.js";
+import A from "./MapZoomControls.js";
+const T = {
+  key: 0,
+  class: "absolute top-0 right-0"
+}, F = { class: "absolute bottom-4 right-4 flex flex-col gap-2" }, Y = /* @__PURE__ */ M({
+  __name: "DottedMap",
+  props: {
+    regionName: { default: "world" },
+    defaultZoom: {},
+    showControls: { type: Boolean, default: !0 },
+    showLegend: { type: Boolean, default: !0 },
+    maxHeight: {},
+    legend: {},
+    mapHeight: {},
+    mapWidth: {},
+    countries: {},
+    region: {},
+    grid: {},
+    avoidOuterPins: { type: Boolean },
+    pins: {},
+    precomputedMap: {},
+    color: {},
+    dotSize: {},
+    strokeColor: {},
+    strokeWidth: {},
+    strokeOpacity: {},
+    shape: {},
+    countryColors: {},
+    backgroundColor: {}
+  },
+  emits: ["pin-click", "point-click", "pin-add", "pin-remove"],
+  setup(p, { expose: P, emit: b }) {
+    const e = p, l = b, {
+      offset: g,
+      scale: N,
+      zoomIn: h,
+      zoomOut: f,
+      resetView: d,
+      wasClick: v,
+      onWheel: k,
+      onMouseDown: w
+    } = U(), u = $([]), Z = c(() => e.pins ? e.pins : u.value), t = c(() => {
+      const i = V[e.regionName || "world"], o = _[e.regionName || "world"], r = D[e.regionName || "world"] ?? 1, a = e.regionName === "usa" ? R : L, s = {
+        region: e.region ?? i,
+        countries: e.countries ?? o,
+        pins: e.pins ?? a,
+        defaultZoom: e.defaultZoom ?? r,
+        color: e.color,
+        countryColors: e.countryColors,
+        dotSize: e.dotSize,
+        grid: e.grid,
+        mapHeight: e.mapHeight,
+        mapWidth: e.mapWidth,
+        shape: e.shape,
+        strokeWidth: e.strokeWidth,
+        strokeOpacity: e.strokeOpacity
+      };
+      if (e.region || e.countries || e.mapHeight || e.mapWidth)
+        return s;
+      switch (e.regionName) {
+        case "europe":
+          return { ...s, dotSize: e.dotSize ?? 0.3 };
+        case "usa":
+          return { ...s, mapWidth: 130, dotSize: e.dotSize ?? 0.3 };
+        case "asia":
+          return { ...s, grid: e.grid ?? "vertical" };
+        case "oceania":
+          return { ...s, dotSize: e.dotSize ?? 0.3 };
+        default:
+          return { ...s, grid: e.grid ?? "vertical" };
+      }
+    });
+    c(() => e.legend);
+    const W = (i) => {
+      v() && l("pin-click", i);
+    }, x = (i, o) => {
+      if (v() && (l("point-click", i, o), !e.pins)) {
+        const r = u.value.findIndex(
+          (a) => Math.abs(a.lat - o.lat) < 1e-4 && Math.abs(a.lng - o.lng) < 1e-4
+        );
+        if (r > -1) {
+          const a = u.value.splice(r, 1)[0];
+          l("pin-remove", a, r);
+        } else {
+          const a = {
+            lat: o.lat,
+            lng: o.lng,
+            svgOptions: { color: "var(--ui-text)", radius: 0.15 },
+            data: { city: "Custom Pin", region: "Other" }
+          };
+          u.value.push(a), l("pin-add", a);
+        }
+      }
+    };
+    return I(
+      [() => e.regionName, () => e.defaultZoom],
+      () => {
+        d(t.value.defaultZoom);
+      },
+      { immediate: !0 }
+    ), P({
+      zoomIn: h,
+      zoomOut: f,
+      resetView: () => d(t.value.defaultZoom)
+    }), (i, o) => (C(), y("div", {
+      class: "w-full h-full overflow-hidden relative",
+      style: S({
+        width: "100%",
+        height: e.maxHeight
+      })
+    }, [
+      O("div", {
+        class: "w-full h-full flex items-center justify-center cursor-grab active:cursor-grabbing select-none touch-none",
+        style: S({
+          transform: `translate(${n(g).x}px, ${n(g).y}px) scale(${n(N)})`
+        }),
+        onMousedown: o[0] || (o[0] = //@ts-ignore
+        (...r) => n(w) && n(w)(...r)),
+        onWheel: o[1] || (o[1] = B(
+          //@ts-ignore
+          (...r) => n(k) && n(k)(...r),
+          ["prevent"]
+        ))
+      }, [
+        z(j, E(i.$attrs, {
+          width: "100%",
+          height: "100%",
+          "map-height": t.value.mapHeight || 60,
+          color: t.value.color || "var(--ui-text-dimmed)",
+          "dot-size": t.value.dotSize || 0.36,
+          grid: t.value.grid,
+          shape: t.value.shape,
+          countries: t.value.countries,
+          region: t.value.region,
+          pins: Z.value,
+          "stroke-width": t.value.strokeWidth,
+          "stroke-opacity": t.value.strokeOpacity,
+          "country-colors": t.value.countryColors,
+          "avoid-outer-pins": e.avoidOuterPins,
+          "precomputed-map": e.precomputedMap,
+          "background-color": e.backgroundColor,
+          class: "w-full h-full object-contain",
+          onPinClick: W,
+          onPointClick: x
+        }), null, 16, ["map-height", "color", "dot-size", "grid", "shape", "countries", "region", "pins", "stroke-width", "stroke-opacity", "country-colors", "avoid-outer-pins", "precomputed-map", "background-color"])
+      ], 36),
+      p.showControls ? (C(), y("div", T, [
+        m(i.$slots, "controls", {}, () => [
+          z(A, {
+            onZoomIn: n(h),
+            onZoomOut: n(f),
+            onReset: o[2] || (o[2] = (r) => n(d)(t.value.defaultZoom))
+          }, null, 8, ["onZoomIn", "onZoomOut"])
+        ])
+      ])) : H("", !0),
+      O("div", F, [
+        m(i.$slots, "legend")
+      ]),
+      m(i.$slots, "default")
+    ], 4));
+  }
+});
+export {
+  Y as default
+};

package/dist/components/Maps/DottedMap/DottedMap.vue.d.ts

@@ -0,0 +1,52 @@
+import { MapPin, MapRegionName, MapLegendItem, DottedMapProps } from './types';
+interface Props extends DottedMapProps {
+    /** The region name for quick setup */
+    regionName?: MapRegionName;
+    /** Default zoom level */
+    defaultZoom?: number;
+    /** Show zoom controls */
+    showControls?: boolean;
+    /** Show legend */
+    showLegend?: boolean;
+    /** Maximum height of the map container */
+    maxHeight?: string | number;
+    /** Custom legend items */
+    legend?: MapLegendItem[];
+}
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        controls?(_: {}): any;
+        legend?(_: {}): any;
+        default?(_: {}): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetView: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "point-click": (event: MouseEvent, point: MapPin) => any;
+    "pin-click": (pin: MapPin) => any;
+    "pin-add": (pin: MapPin) => any;
+    "pin-remove": (pin: MapPin, index: number) => any;
+}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
+    "onPoint-click"?: ((event: MouseEvent, point: MapPin) => any) | undefined;
+    "onPin-click"?: ((pin: MapPin) => any) | undefined;
+    "onPin-add"?: ((pin: MapPin) => any) | undefined;
+    "onPin-remove"?: ((pin: MapPin, index: number) => any) | undefined;
+}>, {
+    regionName: MapRegionName;
+    showControls: boolean;
+    showLegend: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Maps/DottedMap/DottedMap2.js

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

package/dist/components/Maps/DottedMap/MapLegend.vue.d.ts

@@ -0,0 +1,6 @@
+import { MapLegendItem } from './types';
+type __VLS_Props = {
+    items: MapLegendItem[];
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/Maps/DottedMap/MapZoomControls.js

@@ -0,0 +1,44 @@
+import { defineComponent as a, resolveComponent as m, createElementBlock as c, openBlock as s, createVNode as i, createBlock as u, createCommentVNode as p } from "vue";
+const d = { class: "flex gap-2" }, k = /* @__PURE__ */ a({
+  __name: "MapZoomControls",
+  props: {
+    showReset: { type: Boolean }
+  },
+  emits: ["zoomIn", "zoomOut", "reset"],
+  setup(r, { emit: l }) {
+    const o = l;
+    return (v, e) => {
+      const t = m("UButton");
+      return s(), c("div", d, [
+        i(t, {
+          icon: "i-lucide-plus",
+          color: "neutral",
+          variant: "ghost",
+          size: "sm",
+          "aria-label": "Zoom in",
+          onClick: e[0] || (e[0] = (n) => o("zoomIn"))
+        }),
+        i(t, {
+          icon: "i-lucide-minus",
+          color: "neutral",
+          variant: "ghost",
+          size: "sm",
+          "aria-label": "Zoom out",
+          onClick: e[1] || (e[1] = (n) => o("zoomOut"))
+        }),
+        r.showReset !== !1 ? (s(), u(t, {
+          key: 0,
+          icon: "i-lucide-refresh-cw",
+          color: "neutral",
+          variant: "ghost",
+          size: "sm",
+          "aria-label": "Reset view",
+          onClick: e[2] || (e[2] = (n) => o("reset"))
+        })) : p("", !0)
+      ]);
+    };
+  }
+});
+export {
+  k as default
+};

package/dist/components/Maps/DottedMap/MapZoomControls.vue.d.ts

@@ -0,0 +1,13 @@
+type __VLS_Props = {
+    showReset?: boolean;
+};
+declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    reset: () => any;
+    zoomIn: () => any;
+    zoomOut: () => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReset?: (() => any) | undefined;
+    onZoomIn?: (() => any) | undefined;
+    onZoomOut?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+export default _default;

package/dist/components/Maps/DottedMap/MapZoomControls2.js

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

package/dist/components/Maps/DottedMap/core.js

@@ -0,0 +1,122 @@
+import { defineComponent as Y, computed as u, createElementBlock as q, openBlock as F, normalizeStyle as L, renderSlot as T, createElementVNode as J } from "vue";
+import { getMap as R, getPin as V } from "./mapUtils.js";
+import D from "../../../data/countries.geo.json.js";
+const G = ["innerHTML"], Z = /* @__PURE__ */ Y({
+  __name: "core",
+  props: {
+    mapHeight: {},
+    mapWidth: {},
+    countries: {},
+    region: {},
+    grid: { default: "vertical" },
+    avoidOuterPins: { type: Boolean, default: !1 },
+    pins: {},
+    precomputedMap: {},
+    color: { default: "#ffffff" },
+    dotSize: { default: 0.5 },
+    strokeColor: {},
+    strokeWidth: { default: 0 },
+    strokeOpacity: { default: 1 },
+    shape: { default: "circle" },
+    countryColors: {},
+    backgroundColor: {}
+  },
+  emits: ["pin-click", "point-click"],
+  setup(p, { emit: $ }) {
+    const o = p, O = $, c = u(() => {
+      let n;
+      return o.precomputedMap ? n = typeof o.precomputedMap == "string" ? JSON.parse(o.precomputedMap) : o.precomputedMap : n = R({
+        height: o.mapHeight,
+        width: o.mapWidth,
+        countries: o.countries,
+        region: o.region,
+        grid: o.grid,
+        geojsonWorld: D
+      }), o.pins && o.pins.length > 0 && o.pins.forEach((e) => {
+        if (typeof e.lat == "number" && isFinite(e.lat) && typeof e.lng == "number" && isFinite(e.lng)) {
+          const r = V(n, { lat: e.lat, lng: e.lng }), l = [r.x, r.y].join(";");
+          n.points[l] = {
+            ...r,
+            data: e.data,
+            svgOptions: {
+              radius: o.dotSize,
+              strokeColor: o.strokeColor,
+              strokeWidth: o.strokeWidth,
+              strokeOpacity: o.strokeOpacity,
+              ...e.svgOptions
+            }
+          };
+        }
+      }), n;
+    }), g = u(() => {
+      const n = c.value, e = Object.values(n.points);
+      if (e.length === 0) return [];
+      const r = Math.max(...e.map((i) => i.y)), l = Math.min(...e.map((i) => i.y));
+      return e.map((i) => ({
+        ...i,
+        // Flip Y axis to match geographical orientation in XY container
+        y: r + l - i.y
+      }));
+    }), m = u(() => {
+      const n = c.value, { width: e, height: r, points: l } = n, { shape: i, backgroundColor: M, color: w, dotSize: S, strokeColor: W, strokeWidth: j, strokeOpacity: P } = o, _ = (t) => {
+        var f, k, v, x, C;
+        const s = ((f = t.svgOptions) == null ? void 0 : f.radius) || S, I = t.countryId && o.countryColors ? o.countryColors[t.countryId] : null, d = ((k = t.svgOptions) == null ? void 0 : k.color) || I || w, A = ((v = t.svgOptions) == null ? void 0 : v.strokeColor) || W || d, y = ((x = t.svgOptions) == null ? void 0 : x.strokeWidth) ?? j, E = ((C = t.svgOptions) == null ? void 0 : C.strokeOpacity) ?? P, h = y > 0 ? `stroke="${A}" stroke-width="${y}" stroke-opacity="${E}"` : "";
+        if (i === "circle")
+          return `<circle cx="${t.x}" cy="${t.y}" r="${s}" fill="${d}" ${h} />`;
+        if (i === "hexagon") {
+          const a = Math.sqrt(3) * s;
+          return `<polyline points="${[
+            [t.x + a, t.y - s],
+            [t.x + a, t.y + s],
+            [t.x, t.y + 2 * s],
+            [t.x - a, t.y + s],
+            [t.x - a, t.y - s],
+            [t.x, t.y - 2 * s]
+          ].map((N) => N.join(",")).join(" ")}" fill="${d}" ${h} />`;
+        }
+        return "";
+      }, z = Object.values(l).map(_).join(`
+`), B = `<svg 
+    viewBox="0 0 ${e} ${r}" 
+    xmlns="http://www.w3.org/2000/svg" 
+    preserveAspectRatio="xMidYMid meet"
+    style="background-color: ${M}; width: 100%; height: 100%; display: block;"
+  >
+    ${z}
+  </svg>`;
+      let H = 0;
+      return B.replace(/<(circle|polyline)/g, (t, s) => `<${s} data-index="${H++}" style="cursor: pointer;"`);
+    });
+    function b(n) {
+      const r = n.target.getAttribute("data-index");
+      if (r !== null) {
+        const l = g.value[Number(r)];
+        O("point-click", n, l);
+      }
+    }
+    return (n, e) => (F(), q("div", {
+      class: "dotted-world-map-container",
+      style: L({
+        backgroundColor: p.backgroundColor,
+        width: "100%",
+        height: "100%",
+        position: "relative"
+      })
+    }, [
+      T(n.$slots, "default", {
+        points: g.value,
+        map: c.value,
+        svg: m.value
+      }, () => [
+        J("div", {
+          innerHTML: m.value,
+          style: { width: "100%", height: "100%", display: "block" },
+          onClick: b
+        }, null, 8, G)
+      ])
+    ], 4));
+  }
+});
+export {
+  Z as default
+};

package/dist/components/Maps/DottedMap/core.vue.d.ts

@@ -0,0 +1,36 @@
+import { DottedMapProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {
+            points: any[];
+            map: any;
+            svg: string;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<DottedMapProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    "point-click": (event: MouseEvent, point: any) => any;
+    "pin-click": (point: any) => any;
+}, string, import('vue').PublicProps, Readonly<DottedMapProps> & Readonly<{
+    "onPoint-click"?: ((event: MouseEvent, point: any) => any) | undefined;
+    "onPin-click"?: ((point: any) => any) | undefined;
+}>, {
+    grid: "vertical" | "diagonal";
+    color: string;
+    avoidOuterPins: boolean;
+    dotSize: number;
+    strokeWidth: number;
+    strokeOpacity: number;
+    shape: "circle" | "hexagon";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Maps/DottedMap/core2.js

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

package/dist/components/Maps/DottedMap/mapUtils.d.ts

@@ -0,0 +1,49 @@
+import { MapRegion } from './types';
+export declare const DEFAULT_WORLD_REGION: MapRegion;
+export declare const geojsonToMultiPolygons: (geojson: any) => {
+    type: string;
+    geometry: {
+        type: string;
+        coordinates: any;
+    };
+};
+export declare const computeGeojsonBox: (geojson: any) => MapRegion;
+export interface MapData {
+    points: Record<string, {
+        x: number;
+        y: number;
+        lat: number;
+        lng: number;
+        countryId?: string;
+        data?: any;
+        svgOptions?: any;
+    }>;
+    X_MIN: number;
+    Y_MIN: number;
+    X_MAX: number;
+    Y_MAX: number;
+    X_RANGE: number;
+    Y_RANGE: number;
+    region: MapRegion;
+    grid: 'vertical' | 'diagonal';
+    height: number;
+    width: number;
+    ystep: number;
+}
+export declare const getMap: ({ height, width, countries, region, grid, geojsonWorld, }: {
+    height?: number;
+    width?: number;
+    countries?: string[];
+    region?: MapRegion;
+    grid?: "vertical" | "diagonal";
+    geojsonWorld: any;
+}) => MapData;
+export declare const getPin: (map: MapData, { lat, lng }: {
+    lat: number;
+    lng: number;
+}) => {
+    x: number;
+    y: number;
+    lat: any;
+    lng: any;
+};