@unovis/ts 1.6.4 → 1.6.5-topojson.0

package/components/topojson-map/config.d.ts

@@ -1,7 +1,7 @@
 import { GeoProjection } from 'd3-geo';
 import { ComponentConfigInterface } from "../../core/component/config";
 import { ColorAccessor, NumericAccessor, StringAccessor } from "../../types/accessor";
-import { MapPointLabelPosition } from './types';
+import { MapPointLabelPosition, TopoJSONMapClusterDatum, TopoJSONMapPointStyles } from './types';
 export interface TopoJSONMapConfigInterface<AreaDatum, PointDatum = unknown, LinkDatum = unknown> extends ComponentConfigInterface {
     /** MapProjection (aka D3's GeoProjection) instance. Default: `MapProjection.Kavrayskiy7()` */
     projection?: GeoProjection;
@@ -31,37 +31,122 @@ export interface TopoJSONMapConfigInterface<AreaDatum, PointDatum = unknown, Lin
     linkSource?: ((l: LinkDatum) => number | string | PointDatum);
     /** Link target accessor function. Default: `d => d.target` */
     linkTarget?: ((l: LinkDatum) => number | string | PointDatum);
+    /** Flow source point longitude accessor function or value. Default: `f => f.sourceLongitude` */
+    sourceLongitude?: NumericAccessor<LinkDatum>;
+    /** Flow source point latitude accessor function or value. Default: `f => f.sourceLatitude` */
+    sourceLatitude?: NumericAccessor<LinkDatum>;
+    /** Flow target point longitude accessor function or value. Default: `f => f.targetLongitude` */
+    targetLongitude?: NumericAccessor<LinkDatum>;
+    /** Flow target point latitude accessor function or value. Default: `f => f.targetLatitude` */
+    targetLatitude?: NumericAccessor<LinkDatum>;
+    /** Flow source point radius accessor function or value. Default: `3` */
+    sourcePointRadius?: NumericAccessor<LinkDatum>;
+    /** Source point color accessor function or value. Default: `'#88919f'` */
+    sourcePointColor?: ColorAccessor<LinkDatum>;
+    /** Flow particle color accessor function or value. Default: `'#949dad'` */
+    flowParticleColor?: ColorAccessor<LinkDatum>;
+    /** Flow particle radius accessor function or value. Default: `1.1` */
+    flowParticleRadius?: NumericAccessor<LinkDatum>;
+    /** Flow particle speed accessor function or value. The unit is arbitrary, recommended range is 0 – 0.2. Default: `0.07` */
+    flowParticleSpeed?: NumericAccessor<LinkDatum>;
+    /** Flow particle density accessor function or value on the range of [0, 1]. Default: `0.6` */
+    flowParticleDensity?: NumericAccessor<LinkDatum>;
+    /** Enable flow animations. When true, shows animated particles along links. Default: `false` */
+    enableFlowAnimation?: boolean;
+    /** Flow source point click callback function. Default: `undefined` */
+    onSourcePointClick?: (f: LinkDatum, x: number, y: number, event: MouseEvent) => void;
+    /** Flow source point mouse over callback function. Default: `undefined` */
+    onSourcePointMouseEnter?: (f: LinkDatum, x: number, y: number, event: MouseEvent) => void;
+    /** Flow source point mouse leave callback function. Default: `undefined` */
+    onSourcePointMouseLeave?: (f: LinkDatum, event: MouseEvent) => void;
     /** Area id accessor function corresponding to the feature id from TopoJSON. Default: `d => d.id ?? ''` */
     areaId?: StringAccessor<AreaDatum>;
     /** Area color value or accessor function. Default: `d => d.color ?? null` */
     areaColor?: ColorAccessor<AreaDatum>;
     /** Area cursor value or accessor function. Default: `null` */
     areaCursor?: StringAccessor<AreaDatum>;
+    /** Area label accessor function. Default: `undefined` */
+    areaLabel?: StringAccessor<AreaDatum>;
     /** Point color accessor. Default: `d => d.color ?? null` */
     pointColor?: ColorAccessor<PointDatum>;
     /** Point radius accessor. Default: `d => d.radius ?? 8` */
     pointRadius?: NumericAccessor<PointDatum>;
     /** Point stroke width accessor. Default: `d => d.strokeWidth ?? null` */
     pointStrokeWidth?: NumericAccessor<PointDatum>;
+    /** Point shape accessor. Default: `TopoJSONMapPointShape.Circle` */
+    pointShape?: StringAccessor<PointDatum>;
+    /** Point ring width for ring-shaped points. Default: `2` */
+    pointRingWidth?: NumericAccessor<PointDatum>;
     /** Point cursor constant value or accessor function. Default: `null` */
     pointCursor?: StringAccessor<PointDatum>;
     /** Point longitude accessor function. Default: `d => d.longitude ?? null` */
     longitude?: NumericAccessor<PointDatum>;
     /** Point latitude accessor function. Default: `d => d.latitude ?? null` */
     latitude?: NumericAccessor<PointDatum>;
-    /** Point label accessor function. Default: `undefined` */
+    /** Point inner label accessor function. Default: `undefined`  */
     pointLabel?: StringAccessor<PointDatum>;
-    /** Point label position. Default: `Position.Bottom` */
+    /** Point inner label color accessor function or constant value.
+     * By default, the label color will be set, depending on the point brightness, either to
+     * `--vis-map-point-label-text-color-dark` or to `--vis-map-point-label-text-color-light` CSS variable.
+     * Default: `undefined`
+    */
+    pointLabelColor?: ColorAccessor<PointDatum>;
+    /** Point label position. Default: `MapPointLabelPosition.Center`
+     * @deprecated Point labels are now always centered within points. Use pointBottomLabel for labels below points.
+     */
     pointLabelPosition?: MapPointLabelPosition;
+    /** Point bottom label accessor function. Default: `undefined` */
+    pointBottomLabel?: StringAccessor<PointDatum>;
     /** Point color brightness ratio for switching between dark and light text label color. Default: `0.65` */
     pointLabelTextBrightnessRatio?: number;
     /** Point id accessor function. Default: `d => d.id` */
     pointId?: ((d: PointDatum, i: number) => string);
+    /** Cluster color accessor function or constant value. Default: `undefined` */
+    clusterColor?: ColorAccessor<TopoJSONMapClusterDatum<PointDatum>>;
+    /** Cluster radius accessor function or constant value. Default: `undefined` */
+    clusterRadius?: NumericAccessor<TopoJSONMapClusterDatum<PointDatum>>;
+    /** Cluster inner label accessor function. Default: `d => d.pointCount` */
+    clusterLabel?: StringAccessor<TopoJSONMapClusterDatum<PointDatum>>;
+    /** Cluster inner label color accessor function or constant value. Default: `undefined` */
+    clusterLabelColor?: StringAccessor<TopoJSONMapClusterDatum<PointDatum>>;
+    /** Cluster bottom label accessor function. Default: `''` */
+    clusterBottomLabel?: StringAccessor<TopoJSONMapClusterDatum<PointDatum>>;
+    /** The width of the cluster point ring. Default: `2` */
+    clusterRingWidth?: number;
+    /** When cluster is expanded, show a background circle to better separate points from the base map. Default: `true` */
+    clusterBackground?: boolean;
+    /** Defines whether the cluster should expand on click or not. Default: `true` */
+    clusterExpandOnClick?: boolean;
+    /** Clustering distance in pixels. Default: `55` */
+    clusteringDistance?: number;
+    /** Enable point clustering. Default: `false` */
+    clustering?: boolean;
     /** Enables blur and blending between neighbouring points. Default: `false` */
     heatmapMode?: boolean;
     /** Heatmap blur filter stdDeviation value. Default: `10` */
     heatmapModeBlurStdDeviation?: number;
     /** Zoom level at which the heatmap mode will be disabled. Default: `2.5` */
     heatmapModeZoomLevelThreshold?: number;
+    /** A single map point can have multiple properties displayed as a small pie chart.
+     * By setting the colorMap configuration you can specify data properties that should be mapped to various pie / donut segments.
+     *
+     * ```
+     * {
+     *   [key in keyof PointDatum]?: { color: string, className?: string }
+     * }
+     * ```
+     * e.g.:
+     * ```
+     * {
+     *   healthy: { color: 'green' },
+     *   warning: { color: 'orange' },
+     *   critical: { color: 'red' }
+     * }
+     * ```
+     * where every data point has the `healthy`, `warning` and `critical` numerical or boolean property.
+     * Note: Properties with 0 or falsy values will not be displayed in the pie chart.
+     * Default: `{}`
+     */
+    colorMap?: TopoJSONMapPointStyles<PointDatum>;
 }
 export declare const TopoJSONMapDefaultConfig: TopoJSONMapConfigInterface<unknown, unknown, unknown>;

package/components/topojson-map/config.js

@@ -1,7 +1,11 @@
 import { ComponentDefaultConfig } from '../../core/component/config.js';
-import { MapPointLabelPosition } from './types.js';
+import { TopoJSONMapPointShape, MapPointLabelPosition } from './types.js';
 
-const TopoJSONMapDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfig), { projection: undefined, duration: 1500, topojson: undefined, mapFeatureName: 'countries', mapFitToPoints: false, zoomExtent: [0.5, 6], zoomDuration: 400, disableZoom: false, zoomFactor: undefined, linkWidth: (d) => { var _a; return (_a = d.width) !== null && _a !== void 0 ? _a : 1; }, linkColor: (d) => { var _a; return (_a = d.color) !== null && _a !== void 0 ? _a : null; }, linkCursor: null, linkId: (d, i) => { var _a; return `${(_a = d.id) !== null && _a !== void 0 ? _a : i}`; }, linkSource: (d) => d.source, linkTarget: (d) => d.target, areaId: (d) => { var _a; return (_a = d.id) !== null && _a !== void 0 ? _a : ''; }, areaColor: (d) => { var _a; return (_a = d.color) !== null && _a !== void 0 ? _a : null; }, areaCursor: null, longitude: (d) => d.longitude, latitude: (d) => d.latitude, pointColor: (d) => { var _a; return (_a = d.color) !== null && _a !== void 0 ? _a : null; }, pointRadius: (d) => { var _a; return (_a = d.radius) !== null && _a !== void 0 ? _a : 8; }, pointStrokeWidth: (d) => { var _a; return (_a = d.strokeWidth) !== null && _a !== void 0 ? _a : 0; }, pointCursor: null, pointLabel: undefined, pointLabelPosition: MapPointLabelPosition.Bottom, pointLabelTextBrightnessRatio: 0.65, pointId: (d) => d.id, heatmapMode: false, heatmapModeBlurStdDeviation: 8, heatmapModeZoomLevelThreshold: 2.5 });
+const TopoJSONMapDefaultConfig = Object.assign(Object.assign({}, ComponentDefaultConfig), { projection: undefined, duration: 1500, topojson: undefined, mapFeatureName: 'countries', mapFitToPoints: false, zoomExtent: [0.5, 12], zoomDuration: 400, disableZoom: false, zoomFactor: undefined, linkWidth: (d) => { var _a; return (_a = d.width) !== null && _a !== void 0 ? _a : 1; }, linkColor: (d) => { var _a; return (_a = d.color) !== null && _a !== void 0 ? _a : null; }, linkCursor: null, linkId: (d, i) => { var _a; return `${(_a = d.id) !== null && _a !== void 0 ? _a : i}`; }, linkSource: (d) => d.source, linkTarget: (d) => d.target, 
+    // Flow defaults
+    sourceLongitude: (f) => f.sourceLongitude, sourceLatitude: (f) => f.sourceLatitude, targetLongitude: (f) => f.targetLongitude, targetLatitude: (f) => f.targetLatitude, sourcePointRadius: 3, sourcePointColor: '#88919f', flowParticleColor: '#949dad', flowParticleRadius: 1.1, flowParticleSpeed: 0.07, flowParticleDensity: 0.6, enableFlowAnimation: false, onSourcePointClick: undefined, onSourcePointMouseEnter: undefined, onSourcePointMouseLeave: undefined, areaId: (d) => { var _a; return (_a = d.id) !== null && _a !== void 0 ? _a : ''; }, areaColor: (d) => { var _a; return (_a = d.color) !== null && _a !== void 0 ? _a : null; }, areaCursor: null, areaLabel: undefined, longitude: (d) => d.longitude, latitude: (d) => d.latitude, pointColor: (d) => { var _a; return (_a = d.color) !== null && _a !== void 0 ? _a : null; }, pointRadius: (d) => { var _a; return (_a = d.radius) !== null && _a !== void 0 ? _a : 8; }, pointStrokeWidth: (d) => { var _a; return (_a = d.strokeWidth) !== null && _a !== void 0 ? _a : 0; }, pointShape: () => TopoJSONMapPointShape.Circle, pointRingWidth: (d) => { var _a; return (_a = d.ringWidth) !== null && _a !== void 0 ? _a : 2; }, pointCursor: null, pointLabel: undefined, pointLabelColor: undefined, pointLabelPosition: MapPointLabelPosition.Center, pointBottomLabel: undefined, pointLabelTextBrightnessRatio: 0.65, pointId: (d) => d.id, 
+    // Cluster
+    clusterColor: undefined, clusterRadius: undefined, clusterLabel: (d) => `${d.pointCount}`, clusterLabelColor: undefined, clusterBottomLabel: '', clusterRingWidth: 2, clusterBackground: true, clusterExpandOnClick: true, clusteringDistance: 55, clustering: false, heatmapMode: false, heatmapModeBlurStdDeviation: 8, heatmapModeZoomLevelThreshold: 2.5, colorMap: {} });
 
 export { TopoJSONMapDefaultConfig };
 //# sourceMappingURL=config.js.map

package/components/topojson-map/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","sources":["../../../src/components/topojson-map/config.ts"],"sourcesContent":["import { GeoProjection } from 'd3-geo'\nimport { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'\n\n// Types\nimport { ColorAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\n\n// Local Types\nimport { MapPointLabelPosition } from './types'\n\nexport interface TopoJSONMapConfigInterface<\n  AreaDatum,\n  PointDatum = unknown,\n  LinkDatum = unknown,\n> extends ComponentConfigInterface {\n  // General\n  /** MapProjection (aka D3's GeoProjection) instance. Default: `MapProjection.Kavrayskiy7()` */\n  projection?: GeoProjection;\n  /** Map data in the TopoJSON topology format. Default: `undefined` */\n  topojson?: TopoJSON.Topology;\n  /** Name of the map features to be displayed, e.g. 'countries' or 'counties'. Default: `countries` */\n  mapFeatureName?: string;\n  /** Set initial map fit to points instead of topojson features. Default: `false` */\n  mapFitToPoints?: boolean;\n  /** Initial zoom level. Default: `undefined` */\n  zoomFactor?: number;\n  /** Disable pan / zoom interactions. Default: `false` */\n  disableZoom?: boolean;\n  /** Zoom extent. Default: `[0.5, 6]` */\n  zoomExtent?: number[];\n  /** Zoom animation duration. Default: `400` */\n  zoomDuration?: number;\n\n  /** Link width value or accessor function. Default: `d => d.width ?? 1` */\n  linkWidth?: NumericAccessor<LinkDatum>;\n  /** Link color value or accessor function. Default: `d => d.color ?? null` */\n  linkColor?: ColorAccessor<LinkDatum>;\n  /** Link cursor value or accessor function. Default: `null` */\n  linkCursor?: StringAccessor<LinkDatum>;\n  /** Link id accessor function. Default: `d => d.id` */\n  linkId?: StringAccessor<LinkDatum>;\n  /** Link source accessor function. Default: `d => d.source` */\n  linkSource?: ((l: LinkDatum) => number | string | PointDatum);\n  /** Link target accessor function. Default: `d => d.target` */\n  linkTarget?: ((l: LinkDatum) => number | string | PointDatum);\n\n  /** Area id accessor function corresponding to the feature id from TopoJSON. Default: `d => d.id ?? ''` */\n  areaId?: StringAccessor<AreaDatum>;\n  /** Area color value or accessor function. Default: `d => d.color ?? null` */\n  areaColor?: ColorAccessor<AreaDatum>;\n  /** Area cursor value or accessor function. Default: `null` */\n  areaCursor?: StringAccessor<AreaDatum>;\n\n  /** Point color accessor. Default: `d => d.color ?? null` */\n  pointColor?: ColorAccessor<PointDatum>;\n  /** Point radius accessor. Default: `d => d.radius ?? 8` */\n  pointRadius?: NumericAccessor<PointDatum>;\n  /** Point stroke width accessor. Default: `d => d.strokeWidth ?? null` */\n  pointStrokeWidth?: NumericAccessor<PointDatum>;\n  /** Point cursor constant value or accessor function. Default: `null` */\n  pointCursor?: StringAccessor<PointDatum>;\n  /** Point longitude accessor function. Default: `d => d.longitude ?? null` */\n  longitude?: NumericAccessor<PointDatum>;\n  /** Point latitude accessor function. Default: `d => d.latitude ?? null` */\n  latitude?: NumericAccessor<PointDatum>;\n  /** Point label accessor function. Default: `undefined` */\n  pointLabel?: StringAccessor<PointDatum>;\n  /** Point label position. Default: `Position.Bottom` */\n  pointLabelPosition?: MapPointLabelPosition;\n  /** Point color brightness ratio for switching between dark and light text label color. Default: `0.65` */\n  pointLabelTextBrightnessRatio?: number;\n  /** Point id accessor function. Default: `d => d.id` */\n  pointId?: ((d: PointDatum, i: number) => string);\n\n  /** Enables blur and blending between neighbouring points. Default: `false` */\n  heatmapMode?: boolean;\n  /** Heatmap blur filter stdDeviation value. Default: `10` */\n  heatmapModeBlurStdDeviation?: number;\n  /** Zoom level at which the heatmap mode will be disabled. Default: `2.5` */\n  heatmapModeZoomLevelThreshold?: number;\n}\n\nexport const TopoJSONMapDefaultConfig: TopoJSONMapConfigInterface<unknown, unknown, unknown> = {\n  ...ComponentDefaultConfig,\n  projection: undefined,\n  duration: 1500,\n  topojson: undefined,\n  mapFeatureName: 'countries',\n  mapFitToPoints: false,\n\n  zoomExtent: [0.5, 6],\n  zoomDuration: 400,\n  disableZoom: false,\n  zoomFactor: undefined,\n\n  linkWidth: (d: unknown): number => (d as { width: number }).width ?? 1,\n  linkColor: (d: unknown): string => (d as { color: string }).color ?? null,\n  linkCursor: null,\n  linkId: (d: unknown, i: number | undefined): string => `${(d as { id: string }).id ?? i}`,\n  linkSource: (d: unknown): (number | string | unknown) => (d as { source: string }).source,\n  linkTarget: (d: unknown): (number | string | unknown) => (d as { target: string }).target,\n\n  areaId: (d: unknown): string => (d as { id: string }).id ?? '',\n  areaColor: (d: unknown): string => (d as { color: string }).color ?? null,\n  areaCursor: null,\n\n  longitude: (d: unknown): number => (d as { longitude: number }).longitude,\n  latitude: (d: unknown): number => (d as { latitude: number }).latitude,\n  pointColor: (d: unknown): string => (d as { color: string }).color ?? null,\n  pointRadius: (d: unknown): number => (d as { radius: number }).radius ?? 8,\n  pointStrokeWidth: (d: unknown): number => (d as { strokeWidth: number }).strokeWidth ?? 0,\n  pointCursor: null,\n  pointLabel: undefined,\n  pointLabelPosition: MapPointLabelPosition.Bottom,\n  pointLabelTextBrightnessRatio: 0.65,\n  pointId: (d: unknown): string => (d as { id: string }).id,\n\n  heatmapMode: false,\n  heatmapModeBlurStdDeviation: 8,\n  heatmapModeZoomLevelThreshold: 2.5,\n}\n\n"],"names":[],"mappings":";;;AAiFO,MAAM,wBAAwB,GAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EAChC,sBAAsB,CAAA,EAAA,EACzB,UAAU,EAAE,SAAS,EACrB,QAAQ,EAAE,IAAI,EACd,QAAQ,EAAE,SAAS,EACnB,cAAc,EAAE,WAAW,EAC3B,cAAc,EAAE,KAAK,EAErB,UAAU,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,EACpB,YAAY,EAAE,GAAG,EACjB,WAAW,EAAE,KAAK,EAClB,UAAU,EAAE,SAAS,EAErB,SAAS,EAAE,CAAC,CAAU,KAAa,EAAA,IAAA,EAAA,CAAA,CAAA,OAAA,CAAC,EAAA,GAAA,CAAuB,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,CAAC,CAAA,EAAA,EACtE,SAAS,EAAE,CAAC,CAAU,KAAY,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,CAAA,EAAA,GAAC,CAAuB,CAAC,KAAK,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,IAAI,CAAA,EAAA,EACzE,UAAU,EAAE,IAAI,EAChB,MAAM,EAAE,CAAC,CAAU,EAAE,CAAqB,KAAa,EAAA,IAAA,EAAA,CAAA,CAAA,OAAA,CAAG,EAAA,CAAA,EAAA,GAAC,CAAoB,CAAC,EAAE,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAI,CAAC,CAAE,CAAA,CAAA,EAAA,EACzF,UAAU,EAAE,CAAC,CAAU,KAAmC,CAAwB,CAAC,MAAM,EACzF,UAAU,EAAE,CAAC,CAAU,KAAmC,CAAwB,CAAC,MAAM,EAEzF,MAAM,EAAE,CAAC,CAAU,KAAY,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,CAAA,EAAA,GAAC,CAAoB,CAAC,EAAE,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,EAAE,CAAA,EAAA,EAC9D,SAAS,EAAE,CAAC,CAAU,KAAY,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,CAAA,EAAA,GAAC,CAAuB,CAAC,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,IAAI,CAAA,EAAA,EACzE,UAAU,EAAE,IAAI,EAEhB,SAAS,EAAE,CAAC,CAAU,KAAc,CAA2B,CAAC,SAAS,EACzE,QAAQ,EAAE,CAAC,CAAU,KAAc,CAA0B,CAAC,QAAQ,EACtE,UAAU,EAAE,CAAC,CAAU,KAAY,EAAA,IAAA,EAAA,CAAA,CAAC,OAAA,CAAA,EAAA,GAAC,CAAuB,CAAC,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,IAAI,CAAA,EAAA,EAC1E,WAAW,EAAE,CAAC,CAAU,KAAa,EAAA,IAAA,EAAA,CAAA,CAAA,OAAA,CAAC,EAAA,GAAA,CAAwB,CAAC,MAAM,MAAI,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,EAAA,GAAA,CAAC,CAAA,EAAA,EAC1E,gBAAgB,EAAE,CAAC,CAAU,KAAa,EAAA,IAAA,EAAA,CAAA,CAAA,OAAA,CAAC,EAAA,GAAA,CAA6B,CAAC,WAAW,mCAAI,CAAC,CAAA,EAAA,EACzF,WAAW,EAAE,IAAI,EACjB,UAAU,EAAE,SAAS,EACrB,kBAAkB,EAAE,qBAAqB,CAAC,MAAM,EAChD,6BAA6B,EAAE,IAAI,EACnC,OAAO,EAAE,CAAC,CAAU,KAAc,CAAoB,CAAC,EAAE,EAEzD,WAAW,EAAE,KAAK,EAClB,2BAA2B,EAAE,CAAC,EAC9B,6BAA6B,EAAE,GAAG;;;;"}
+{"version":3,"file":"config.js","sources":["../../../src/components/topojson-map/config.ts"],"sourcesContent":["import { GeoProjection } from 'd3-geo'\nimport { ComponentConfigInterface, ComponentDefaultConfig } from 'core/component/config'\n\n// Types\nimport { ColorAccessor, NumericAccessor, StringAccessor } from 'types/accessor'\n// Local Types\nimport { MapPointLabelPosition, TopoJSONMapClusterDatum, TopoJSONMapPointShape, TopoJSONMapPointStyles } from './types'\n\nexport interface TopoJSONMapConfigInterface<\n  AreaDatum,\n  PointDatum = unknown,\n  LinkDatum = unknown,\n> extends ComponentConfigInterface {\n  // General\n  /** MapProjection (aka D3's GeoProjection) instance. Default: `MapProjection.Kavrayskiy7()` */\n  projection?: GeoProjection;\n  /** Map data in the TopoJSON topology format. Default: `undefined` */\n  topojson?: TopoJSON.Topology;\n  /** Name of the map features to be displayed, e.g. 'countries' or 'counties'. Default: `countries` */\n  mapFeatureName?: string;\n  /** Set initial map fit to points instead of topojson features. Default: `false` */\n  mapFitToPoints?: boolean;\n  /** Initial zoom level. Default: `undefined` */\n  zoomFactor?: number;\n  /** Disable pan / zoom interactions. Default: `false` */\n  disableZoom?: boolean;\n  /** Zoom extent. Default: `[0.5, 6]` */\n  zoomExtent?: number[];\n  /** Zoom animation duration. Default: `400` */\n  zoomDuration?: number;\n\n  /** Link width value or accessor function. Default: `d => d.width ?? 1` */\n  linkWidth?: NumericAccessor<LinkDatum>;\n  /** Link color value or accessor function. Default: `d => d.color ?? null` */\n  linkColor?: ColorAccessor<LinkDatum>;\n  /** Link cursor value or accessor function. Default: `null` */\n  linkCursor?: StringAccessor<LinkDatum>;\n  /** Link id accessor function. Default: `d => d.id` */\n  linkId?: StringAccessor<LinkDatum>;\n  /** Link source accessor function. Default: `d => d.source` */\n  linkSource?: ((l: LinkDatum) => number | string | PointDatum);\n  /** Link target accessor function. Default: `d => d.target` */\n  linkTarget?: ((l: LinkDatum) => number | string | PointDatum);\n\n  // Flow features (can reuse existing linkSource/linkTarget for flow endpoints)\n  /** Flow source point longitude accessor function or value. Default: `f => f.sourceLongitude` */\n  sourceLongitude?: NumericAccessor<LinkDatum>;\n  /** Flow source point latitude accessor function or value. Default: `f => f.sourceLatitude` */\n  sourceLatitude?: NumericAccessor<LinkDatum>;\n  /** Flow target point longitude accessor function or value. Default: `f => f.targetLongitude` */\n  targetLongitude?: NumericAccessor<LinkDatum>;\n  /** Flow target point latitude accessor function or value. Default: `f => f.targetLatitude` */\n  targetLatitude?: NumericAccessor<LinkDatum>;\n  /** Flow source point radius accessor function or value. Default: `3` */\n  sourcePointRadius?: NumericAccessor<LinkDatum>;\n  /** Source point color accessor function or value. Default: `'#88919f'` */\n  sourcePointColor?: ColorAccessor<LinkDatum>;\n  /** Flow particle color accessor function or value. Default: `'#949dad'` */\n  flowParticleColor?: ColorAccessor<LinkDatum>;\n  /** Flow particle radius accessor function or value. Default: `1.1` */\n  flowParticleRadius?: NumericAccessor<LinkDatum>;\n  /** Flow particle speed accessor function or value. The unit is arbitrary, recommended range is 0 – 0.2. Default: `0.07` */\n  flowParticleSpeed?: NumericAccessor<LinkDatum>;\n  /** Flow particle density accessor function or value on the range of [0, 1]. Default: `0.6` */\n  flowParticleDensity?: NumericAccessor<LinkDatum>;\n  /** Enable flow animations. When true, shows animated particles along links. Default: `false` */\n  enableFlowAnimation?: boolean;\n\n  // Flow Events\n  /** Flow source point click callback function. Default: `undefined` */\n  onSourcePointClick?: (f: LinkDatum, x: number, y: number, event: MouseEvent) => void;\n  /** Flow source point mouse over callback function. Default: `undefined` */\n  onSourcePointMouseEnter?: (f: LinkDatum, x: number, y: number, event: MouseEvent) => void;\n  /** Flow source point mouse leave callback function. Default: `undefined` */\n  onSourcePointMouseLeave?: (f: LinkDatum, event: MouseEvent) => void;\n\n  /** Area id accessor function corresponding to the feature id from TopoJSON. Default: `d => d.id ?? ''` */\n  areaId?: StringAccessor<AreaDatum>;\n  /** Area color value or accessor function. Default: `d => d.color ?? null` */\n  areaColor?: ColorAccessor<AreaDatum>;\n  /** Area cursor value or accessor function. Default: `null` */\n  areaCursor?: StringAccessor<AreaDatum>;\n  /** Area label accessor function. Default: `undefined` */\n  areaLabel?: StringAccessor<AreaDatum>;\n\n  /** Point color accessor. Default: `d => d.color ?? null` */\n  pointColor?: ColorAccessor<PointDatum>;\n  /** Point radius accessor. Default: `d => d.radius ?? 8` */\n  pointRadius?: NumericAccessor<PointDatum>;\n  /** Point stroke width accessor. Default: `d => d.strokeWidth ?? null` */\n  pointStrokeWidth?: NumericAccessor<PointDatum>;\n  /** Point shape accessor. Default: `TopoJSONMapPointShape.Circle` */\n  pointShape?: StringAccessor<PointDatum>;\n  /** Point ring width for ring-shaped points. Default: `2` */\n  pointRingWidth?: NumericAccessor<PointDatum>;\n  /** Point cursor constant value or accessor function. Default: `null` */\n  pointCursor?: StringAccessor<PointDatum>;\n  /** Point longitude accessor function. Default: `d => d.longitude ?? null` */\n  longitude?: NumericAccessor<PointDatum>;\n  /** Point latitude accessor function. Default: `d => d.latitude ?? null` */\n  latitude?: NumericAccessor<PointDatum>;\n  /** Point inner label accessor function. Default: `undefined`  */\n  pointLabel?: StringAccessor<PointDatum>;\n  /** Point inner label color accessor function or constant value.\n   * By default, the label color will be set, depending on the point brightness, either to\n   * `--vis-map-point-label-text-color-dark` or to `--vis-map-point-label-text-color-light` CSS variable.\n   * Default: `undefined`\n  */\n  pointLabelColor?: ColorAccessor<PointDatum>;\n  /** Point label position. Default: `MapPointLabelPosition.Center`\n   * @deprecated Point labels are now always centered within points. Use pointBottomLabel for labels below points.\n   */\n  pointLabelPosition?: MapPointLabelPosition;\n  /** Point bottom label accessor function. Default: `undefined` */\n  pointBottomLabel?: StringAccessor<PointDatum>;\n  /** Point color brightness ratio for switching between dark and light text label color. Default: `0.65` */\n  pointLabelTextBrightnessRatio?: number;\n  /** Point id accessor function. Default: `d => d.id` */\n  pointId?: ((d: PointDatum, i: number) => string);\n\n  // Cluster\n  /** Cluster color accessor function or constant value. Default: `undefined` */\n  clusterColor?: ColorAccessor<TopoJSONMapClusterDatum<PointDatum>>;\n  /** Cluster radius accessor function or constant value. Default: `undefined` */\n  clusterRadius?: NumericAccessor<TopoJSONMapClusterDatum<PointDatum>>;\n  /** Cluster inner label accessor function. Default: `d => d.pointCount` */\n  clusterLabel?: StringAccessor<TopoJSONMapClusterDatum<PointDatum>>;\n  /** Cluster inner label color accessor function or constant value. Default: `undefined` */\n  clusterLabelColor?: StringAccessor<TopoJSONMapClusterDatum<PointDatum>>;\n  /** Cluster bottom label accessor function. Default: `''` */\n  clusterBottomLabel?: StringAccessor<TopoJSONMapClusterDatum<PointDatum>>;\n  /** The width of the cluster point ring. Default: `2` */\n  clusterRingWidth?: number;\n  /** When cluster is expanded, show a background circle to better separate points from the base map. Default: `true` */\n  clusterBackground?: boolean;\n  /** Defines whether the cluster should expand on click or not. Default: `true` */\n  clusterExpandOnClick?: boolean;\n  /** Clustering distance in pixels. Default: `55` */\n  clusteringDistance?: number;\n  /** Enable point clustering. Default: `false` */\n  clustering?: boolean;\n\n  /** Enables blur and blending between neighbouring points. Default: `false` */\n  heatmapMode?: boolean;\n  /** Heatmap blur filter stdDeviation value. Default: `10` */\n  heatmapModeBlurStdDeviation?: number;\n  /** Zoom level at which the heatmap mode will be disabled. Default: `2.5` */\n  heatmapModeZoomLevelThreshold?: number;\n  /** A single map point can have multiple properties displayed as a small pie chart.\n   * By setting the colorMap configuration you can specify data properties that should be mapped to various pie / donut segments.\n   *\n   * ```\n   * {\n   *   [key in keyof PointDatum]?: { color: string, className?: string }\n   * }\n   * ```\n   * e.g.:\n   * ```\n   * {\n   *   healthy: { color: 'green' },\n   *   warning: { color: 'orange' },\n   *   critical: { color: 'red' }\n   * }\n   * ```\n   * where every data point has the `healthy`, `warning` and `critical` numerical or boolean property.\n   * Note: Properties with 0 or falsy values will not be displayed in the pie chart.\n   * Default: `{}`\n   */\n  colorMap?: TopoJSONMapPointStyles<PointDatum>;\n\n}\n\nexport const TopoJSONMapDefaultConfig: TopoJSONMapConfigInterface<unknown, unknown, unknown> = {\n  ...ComponentDefaultConfig,\n  projection: undefined,\n  duration: 1500,\n  topojson: undefined,\n  mapFeatureName: 'countries',\n  mapFitToPoints: false,\n\n  zoomExtent: [0.5, 12],\n  zoomDuration: 400,\n  disableZoom: false,\n  zoomFactor: undefined,\n\n  linkWidth: (d: unknown): number => (d as { width: number }).width ?? 1,\n  linkColor: (d: unknown): string => (d as { color: string }).color ?? null,\n  linkCursor: null,\n  linkId: (d: unknown, i: number | undefined): string => `${(d as { id: string }).id ?? i}`,\n  linkSource: (d: unknown): number | string | unknown => (d as { source: number | string | unknown }).source,\n  linkTarget: (d: unknown): number | string | unknown => (d as { target: number | string | unknown }).target,\n\n  // Flow defaults\n  sourceLongitude: (f: unknown): number => (f as { sourceLongitude: number }).sourceLongitude as number,\n  sourceLatitude: (f: unknown): number => (f as { sourceLatitude: number }).sourceLatitude as number,\n  targetLongitude: (f: unknown): number => (f as { targetLongitude: number }).targetLongitude as number,\n  targetLatitude: (f: unknown): number => (f as { targetLatitude: number }).targetLatitude as number,\n  sourcePointRadius: 3,\n  sourcePointColor: '#88919f',\n  flowParticleColor: '#949dad',\n  flowParticleRadius: 1.1,\n  flowParticleSpeed: 0.07,\n  flowParticleDensity: 0.6,\n  enableFlowAnimation: false,\n  onSourcePointClick: undefined,\n  onSourcePointMouseEnter: undefined,\n  onSourcePointMouseLeave: undefined,\n\n  areaId: (d: unknown): string => (d as { id: string }).id ?? '',\n  areaColor: (d: unknown): string => (d as { color: string }).color ?? null,\n  areaCursor: null,\n  areaLabel: undefined,\n\n  longitude: (d: unknown): number => (d as { longitude: number }).longitude,\n  latitude: (d: unknown): number => (d as { latitude: number }).latitude,\n  pointColor: (d: unknown): string => (d as { color: string }).color ?? null,\n  pointRadius: (d: unknown): number => (d as { radius: number }).radius ?? 8,\n  pointStrokeWidth: (d: unknown): number => (d as { strokeWidth: number }).strokeWidth ?? 0,\n  pointShape: (): string => TopoJSONMapPointShape.Circle,\n  pointRingWidth: (d: unknown): number => (d as { ringWidth: number }).ringWidth ?? 2,\n  pointCursor: null,\n  pointLabel: undefined,\n  pointLabelColor: undefined,\n  pointLabelPosition: MapPointLabelPosition.Center,\n  pointBottomLabel: undefined,\n  pointLabelTextBrightnessRatio: 0.65,\n  pointId: (d: unknown): string => (d as { id: string }).id,\n\n  // Cluster\n  clusterColor: undefined,\n  clusterRadius: undefined,\n  clusterLabel: (d: TopoJSONMapClusterDatum<unknown>): string => `${d.pointCount}`,\n  clusterLabelColor: undefined,\n  clusterBottomLabel: '',\n  clusterRingWidth: 2,\n  clusterBackground: true,\n  clusterExpandOnClick: true,\n  clusteringDistance: 55,\n  clustering: false,\n\n  heatmapMode: false,\n  heatmapModeBlurStdDeviation: 8,\n  heatmapModeZoomLevelThreshold: 2.5,\n\n  colorMap: {},\n}\n\n"],"names":[],"mappings":"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"}

package/components/topojson-map/index.d.ts

@@ -22,12 +22,27 @@ export declare class TopoJSONMap<AreaDatum, PointDatum = unknown, LinkDatum = un
     private _prevWidth;
     private _prevHeight;
     private _animFrameId;
+    private _isZooming;
+    private _zoomEndTimeoutId;
+    private _collisionDetectionAnimFrameId;
+    private _clusterIndex;
+    private _expandedCluster;
+    private _collapsedCluster;
+    private _collapsedClusterPointIds;
+    private _eventInitiatedByComponent;
     private _featureCollection;
     private _zoomBehavior;
     private _backgroundRect;
     private _featuresGroup;
+    private _areaLabelsGroup;
     private _linksGroup;
+    private _clusterBackgroundGroup;
     private _pointsGroup;
+    private _flowParticlesGroup;
+    private _sourcePointsGroup;
+    private _flowParticles;
+    private _sourcePoints;
+    private _animationId;
     events: {
         [x: string]: {};
     };
@@ -38,16 +53,34 @@ export declare class TopoJSONMap<AreaDatum, PointDatum = unknown, LinkDatum = un
     _renderBackground(): void;
     _renderGroups(duration: number): void;
     _renderMap(duration: number): void;
+    _renderAreaLabels(duration: number): void;
+    _renderClusterBackground(duration: number): void;
     _renderLinks(duration: number): void;
+    private _getPointData;
     _renderPoints(duration: number): void;
     _fitToPoints(points?: PointDatum[], pad?: number): void;
     _applyZoom(): void;
     _onResize(): void;
     _onZoom(event: D3ZoomEvent<any, any>): void;
+    _onZoomEnd(): void;
+    private _runCollisionDetection;
     _onZoomHandler(transform: ZoomTransform, isMouseEvent: boolean, isExternalEvent: boolean): void;
     zoomIn(increment?: number): void;
     zoomOut(increment?: number): void;
     setZoom(zoomLevel: number): void;
     fitView(): void;
+    private _initFlowFeatures;
+    private _renderSourcePoints;
+    private _renderFlowParticles;
+    private _startFlowAnimation;
+    private _animateFlow;
+    private _stopFlowAnimation;
+    private _updateFlowParticles;
+    private _onPointClick;
+    private _expandCluster;
+    private _zoomToExpandedCluster;
+    private _zoomToLocation;
+    private _collapseExpandedCluster;
+    private _resetExpandedCluster;
     destroy(): void;
 }