@dynatrace/strato-geo 1.0.3 → 1.2.1

package/map/slots/DotLayer.d.ts

@@ -7,6 +7,7 @@ import type { Location } from '../types/location.js';
  * for various shapes, optional features like custom background for icons, rotation,
  * and tooltips, along with granular color customization and integration with
  * legends for color configuration.
+ * @public
  */
 export declare const DotLayer: {
     <T extends Location>(_: PropsWithChildren<DotLayerProps<T>>): null;

package/map/slots/SequentialLegend.d.ts

@@ -1,5 +1,8 @@
 import type { SequentialLegendProps } from '../types/legend.js';
-/** The sequential legend slot component */
+/**
+ * The sequential legend slot component
+ * @public
+ */
 export declare const SequentialLegend: {
     (props: SequentialLegendProps): null;
     displayName: string;

package/map/slots/ThresholdLegend.d.ts

@@ -1,5 +1,8 @@
 import type { ThresholdLegendProps } from '../types/legend.js';
-/** The sequential legend slot component */
+/**
+ * The sequential legend slot component
+ * @public
+ */
 export declare const ThresholdLegend: {
     (props: ThresholdLegendProps): null;
     displayName: string;

package/map/slots/states/ErrorStateSlot.d.ts

@@ -1,5 +1,11 @@
 import type { ReactNode, JSX } from 'react';
+/**
+ * @public
+ */
 export interface ErrorStateSlotProps {
     children: ReactNode | ((errorMessage: string) => JSX.Element);
 }
+/**
+ * @public
+ */
 export declare const ErrorStateSlot: (props: ErrorStateSlotProps) => null;

package/map/types/base-layer.d.ts

@@ -1,5 +1,6 @@
 /**
  * Type to include or exclude countries to show
+ * @public
  */
 export interface BaseLayerProps {
     /** Include countries */
@@ -7,6 +8,9 @@ export interface BaseLayerProps {
     /** Exclude countries */
     exclude?: string[];
 }
+/**
+ * @internal
+ */
 export interface BaseLayerRules {
     exclude: string[];
     include: string[];

package/map/types/bubble-layer.d.ts

@@ -3,6 +3,7 @@ import type { Location } from './location.js';
 /**
  * Base props to configure a BubbleLayer
  * @typeParam T - Object extending Location
+ * @public
  */
 export interface BubbleLayerBaseProps<T extends Location> {
     /**
@@ -20,11 +21,13 @@ export interface BubbleLayerBaseProps<T extends Location> {
 /**
  * The BubbleLayer props
  * @typeParam T - Object extending Location
+ * @public
  */
 export type BubbleLayerProps<T extends Location> = BubbleLayerBaseProps<T> & (LocationColorProps<T> | LegendColorLayerProps) & (ScaleRadiusProps<T> | ScaleNoneProps<T>);
 /**
  * When there's no scale provided, the radius prop is used as radius size in pixels
  * @typeParam T - Object extending Location
+ * @public
  */
 export interface ScaleNoneProps<T> {
     /**
@@ -41,6 +44,7 @@ export interface ScaleNoneProps<T> {
 /**
  * When a scale is provided, all the values in the dataset will be scaled to fit between the `radiusRange`.
  * @typeParam T - Object extending Location
+ * @public
  */
 export interface ScaleRadiusProps<T extends Location> {
     /**

package/map/types/choropleth-layer.d.ts

@@ -2,6 +2,7 @@ import type { ChoroplethCustomColorProps, LegendColorLayerProps } from './colori
 /**
  * Base props to configure a ChoroplethLayer
  * @typeParam T - Object extending a record of string keys and any type of values
+ * @public
  */
 export interface ChoroplethLayerBaseProps<T extends Record<string, unknown>> {
     /**
@@ -17,6 +18,7 @@ export interface ChoroplethLayerBaseProps<T extends Record<string, unknown>> {
 /**
  * The ChoroplethLayer props
  * @typeParam T - Object extending a record of string keys and any type of values
+ * @public
  */
 export type ChoroplethLayerProps<T extends Record<string, unknown>> = ChoroplethLayerBaseProps<T> & (ChoroplethCustomColorProps<T> | LegendColorLayerProps);
 /** @internal */

package/map/types/coloring.d.ts

@@ -1,14 +1,29 @@
+import type { Connection } from './connection-layer.js';
 import type { Location } from './location.js';
 /**
  * Props to configure any Layer with custom coloring
  * @typeParam T - Object extending Location
+ * @public
  */
 export interface LocationColorProps<T extends Location> {
     /** Custom color to apply to the layer */
     color?: string | ((item: T) => string);
 }
+/**
+ * Props to configure a connection Layer with custom coloring
+ * @typeParam T - Object extending Connection
+ * @public
+ */
+export interface ConnectionColorProps<T extends Connection> {
+    /**
+     * Specifies the color of the connection layer.
+     * @defaultValue Colors.Charts.Categorical.Color03.Default
+     */
+    color?: string | ((connection: T) => string);
+}
 /**
  * Props to configure any Layer with legend coloring
+ * @public
  */
 export interface LegendColorLayerProps {
     /** When the color prop is set to 'legend', a value accessor is needed */
@@ -19,6 +34,7 @@ export interface LegendColorLayerProps {
 /**
  * Props to configure any Layer with custom coloring
  * @typeParam T - Object extending a record of string keys and any type of values
+ * @public
  */
 export interface ChoroplethCustomColorProps<T extends Record<string, unknown>> {
     /** Color to apply to the layer */

package/map/types/connection-layer.d.ts

@@ -1,19 +1,27 @@
 import type GeoJSON from 'geojson';
+import type { ConnectionColorProps, LegendColorLayerProps } from './coloring.js';
 import type { Location } from './location.js';
 /**
  * Data type for connections in the Connection Layer.
  * @typeParam L - Object extending Location.
+ * @public
  */
 export type Connection = {
     /** Array of connections */
     path: Location[];
 };
+/**
+ * The ConnectionLayer props
+ * @typeParam T - Object extending Connection
+ * @public
+ */
+export type ConnectionLayerProps<T extends Connection> = ConnectionLayerBaseProps<T> & (ConnectionColorProps<T> | LegendColorLayerProps);
 /**
  * Shape of the Connection Layer Component Props.
- * @typeParam L - Object extending Location.
  * @typeParam T - Object extending Connection<L>.
+ * @public
  */
-export interface ConnectionLayerProps<T extends Connection> {
+export interface ConnectionLayerBaseProps<T extends Connection> {
     /** Set of data related to the connections */
     data: T[];
     /**
@@ -30,11 +38,6 @@ export interface ConnectionLayerProps<T extends Connection> {
      * @defaultValue 'linear'
      */
     curve?: CurvedLine;
-    /**
-     * Specifies the color of the connection layer.
-     * @defaultValue Colors.Charts.Categorical.Color03.Default
-     */
-    color?: string | ((connection: T) => string);
     /**
      * Specifies the thickness of the connection path.
      * It can accept numbers from 1 to 64 (included).
@@ -60,5 +63,6 @@ export type GeoJSONFeature<T extends GeoJSON.Geometry> = GeoJSON.Feature<T, Feat
 /**
  * This property is responsible for setting the curve type
  * @defaultValue linear
+ * @public
  */
 export type CurvedLine = 'linear' | 'smooth';

package/map/types/dot-layer.d.ts

@@ -5,6 +5,7 @@ import type { MapShape } from './shapes.js';
 /**
  * Base props to configure a DotLayer.
  * @typeParam T - Object extending Location
+ * @public
  */
 export interface DotLayerBaseProps<T extends Location> {
     /**
@@ -39,6 +40,7 @@ export interface DotLayerBaseProps<T extends Location> {
 /**
  * The DotLayer props
  * @typeParam T - Object extending Location
+ * @public
  */
 export type DotLayerProps<T extends Location> = DotLayerBaseProps<T> & (LocationColorProps<T> | LegendColorLayerProps);
 /** @internal */

package/map/types/legend.d.ts

@@ -1,16 +1,25 @@
 import type { ColoredRange, ColorPalette, LegendProps } from '@dynatrace/strato-components-preview/charts';
-/** The props common to all different legends */
+/**
+ * The props common to all different legends
+ * @public
+ */
 export type BaseLegendProps = Omit<LegendProps, 'resizable'>;
-/** The sequential legend props */
+/**
+ * The sequential legend props
+ * @public
+ */
 export interface SequentialLegendProps extends BaseLegendProps {
     /** The min boundary */
-    min: number;
+    min?: number;
     /** The max boundary */
-    max: number;
+    max?: number;
     /** The color palette to apply to the legend */
     colorPalette?: string[] | ColorPalette;
 }
-/** The categorical legend props */
+/**
+ * The categorical legend props
+ * @public
+ */
 export interface CategoricalLegendProps extends BaseLegendProps {
     /** Available categories to be shown in the legend */
     categories?: string[];
@@ -19,7 +28,10 @@ export interface CategoricalLegendProps extends BaseLegendProps {
         [key: string]: string;
     };
 }
-/** The threshold legend props */
+/**
+ * The threshold legend props
+ * @public
+ */
 export interface ThresholdLegendProps extends BaseLegendProps {
     /** Ranges of the threshold legend */
     ranges: ColoredRange[];

package/map/types/location.d.ts

@@ -1,4 +1,7 @@
-/** A coordinate-based location */
+/**
+ * A coordinate-based location
+ * @public
+ */
 export interface Location {
     /** The latitude coordinate of the location. */
     latitude: number;

package/map/types/map-view.d.ts

@@ -5,12 +5,14 @@ import { Formatter } from '@dynatrace/strato-components-preview/charts';
 import { ConvertibleUnit, FormatOptions, Unit } from '@dynatrace-sdk/units';
 /**
  * Type to disallow al props in a given type
+ * @public
  */
 export type DisallowAll<T> = {
     [P in keyof T]?: never;
 };
 /**
  * Props to set the initial view state on the map.
+ * @public
  */
 export interface ViewState {
     /** Longitude at map center */
@@ -23,6 +25,7 @@ export interface ViewState {
 /**
  * Type to use in a controlled Map.
  * It disallows the initial state and gives the user complete control over the interactions
+ * @public
  */
 export interface MapViewControlledProps extends ViewState {
     /**
@@ -33,6 +36,7 @@ export interface MapViewControlledProps extends ViewState {
 /**
  * Type to use in an uncontrolled Map.
  * It allows only setting up an initial state and interactions come out of the box
+ * @public
  */
 export interface MapViewUncontrolledProps extends DisallowAll<ViewState> {
     /**
@@ -42,6 +46,7 @@ export interface MapViewUncontrolledProps extends DisallowAll<ViewState> {
 }
 /**
  * Props present in both ways of controlling a Map
+ * @public
  */
 export interface MapViewBaseProps {
     /**
@@ -82,9 +87,13 @@ export interface MapViewBaseProps {
 }
 /**
  * Props to configure a Map
+ * @public
  */
 export type MapViewProps = MapViewBaseProps & (MapViewControlledProps | MapViewUncontrolledProps);
-/** The Map component ref */
+/**
+ * The Map component ref
+ * @public
+ */
 export interface MapViewRef {
     /** The map component root element */
     readonly element: HTMLDivElement | null;

package/map/types/shapes.d.ts

@@ -1,3 +1,7 @@
-/** Available shapes to be used in the map. */
+/**
+ * Available shapes to be used in the map.
+ * @public
+ */
 export type MapShape = 'circle' | 'square' | 'diamond' | 'heart' | 'cross' | 'star' | 'triangle' | 'pin';
+/** @internal */
 export type SymbolType = 'shape' | 'icon' | 'emoji';

package/map/types/toolbar.d.ts

@@ -1,6 +1,9 @@
 import type { ToolbarPlacement, ZoomChangeHandler } from '@dynatrace/strato-components-preview/charts';
 export type ToolbarInteractionModes = 'zoom' | 'zoom-to-fit' | 'zoom-in' | 'zoom-out' | 'reset' | 'download-data';
-/** Props for the ChartInteractions component **/
+/**
+ * Props for the ChartInteractions component
+ * @public
+ */
 export interface ChartInteractionsProps {
     /** Callback called when any zoom event has been performed affecting the data timeframe */
     onZoomChange?: ZoomChangeHandler;

package/map/types/tooltip.d.ts

@@ -12,6 +12,7 @@ export type LayerTooltipHandler = DotLayerTooltipHandler | BubbleLayerTooltipHan
 /**
  * Dot Tooltip data payload for the tooltip handler callback
  * @typeParam T - Object extending Location
+ * @public
  */
 export interface DotLayerTooltipData<T extends Location = Location> {
     /** The hovered dot color */
@@ -23,11 +24,13 @@ export interface DotLayerTooltipData<T extends Location = Location> {
 }
 /**
  * Dot tooltip handler type
+ * @public
  */
 export type DotLayerTooltipHandler = (dotData: DotLayerTooltipData) => React.ReactNode | null;
 /**
  * Dot tooltip handler type
  * @typeParam T - Object extending Location
+ * @public
  */
 export interface DotLayerTooltipHandlerProps {
     /** The DotLayer tooltip handler template */
@@ -36,6 +39,7 @@ export interface DotLayerTooltipHandlerProps {
 /**
  * Bubble Tooltip data payload for the tooltip handler callback
  * @typeParam T - Object extending Location
+ * @public
  */
 export interface BubbleLayerTooltipData<T extends Location = Location> {
     /** The hovered bubble color */
@@ -47,11 +51,13 @@ export interface BubbleLayerTooltipData<T extends Location = Location> {
 }
 /**
  * Bubble Tooltip Component Props
+ * @public
  */
 export type BubbleLayerTooltipHandler = (closestDot: BubbleLayerTooltipData, dotsData: BubbleLayerTooltipData[]) => React.ReactNode | null;
 /**
  * Bubble Tooltip Component Props
  * @typeParam T - Object extending Location
+ * @public
  */
 export interface BubbleLayerTooltipHandlerProps {
     /** The BubbleLayer tooltip handler template */
@@ -60,6 +66,7 @@ export interface BubbleLayerTooltipHandlerProps {
 /**
  * Connection Tooltip data payload for the tooltip handler callback
  * @typeParam T - Object extending Connection
+ * @public
  */
 export interface ConnectionLayerTooltipData<T extends Connection = Connection> {
     /** The hovered connection color */
@@ -71,10 +78,12 @@ export interface ConnectionLayerTooltipData<T extends Connection = Connection> {
 }
 /**
  * Connection tooltip handler type
+ * @public
  */
 export type ConnectionLayerTooltipHandler = (connectionData: ConnectionLayerTooltipData) => React.ReactNode;
 /**
  * Connection Tooltip Component Props
+ * @public
  */
 export interface ConnectionLayerTooltipHandlerProps {
     /** The ConnectionLayer tooltip handler template */
@@ -83,6 +92,7 @@ export interface ConnectionLayerTooltipHandlerProps {
 /**
  * Choropleth Tooltip data payload for the tooltip handler callback
  * @typeParam T - Object extending a record of string keys and any type of values
+ * @public
  */
 export interface ChoroplethLayerTooltipData<T extends Record<string, unknown> = Record<string, unknown>> {
     /** The hovered region color */
@@ -94,14 +104,19 @@ export interface ChoroplethLayerTooltipData<T extends Record<string, unknown> =
 }
 /**
  * Choropleth tooltip handler type
+ * @public
  */
 export type ChoroplethLayerTooltipHandler = (regionData: ChoroplethLayerTooltipData) => React.ReactNode;
 /**
  * Choropleth Tooltip Component Props
+ * @public
  */
 export interface ChoroplethLayerTooltipHandlerProps {
     /** The ChoroplethLayer tooltip handler template */
     children?: ChoroplethLayerTooltipHandler | null;
 }
-/** Map Geo Tooltip Props */
+/**
+ * Map Geo Tooltip Props
+ * @public
+ */
 export type ChartTooltip = ChartTooltipSlotsType & ChartTooltipTemplateType;

package/map/utils/attach-image-from-shape.d.ts

@@ -1,3 +1,3 @@
-import type { MapRef } from 'react-map-gl/maplibre';
+import type { MapRef } from '@vis.gl/react-maplibre';
 import type { MapShape } from '../types/shapes.js';
 export declare const attachImageFromShape: (map: MapRef, shape: MapShape, name: string, outputSize?: number) => void;

package/map/utils/attach-image-from-shape.js

@@ -38,6 +38,9 @@ const attachImageFromShape = (map, shape, name, outputSize) => {
       import_constants.DEFAULT_INPUT_ICON_SIZE,
       (0, import_create_bitmap_config_options.createBitmapConfigOptions)(outputSize)
     ).then((bitmap) => {
+      if (!map) {
+        return;
+      }
       (0, import_attach_image_to_map.attachImageToMap)(map, bitmap, name);
     });
   });

package/map/utils/attach-image-from-string.d.ts

@@ -1,3 +1,3 @@
-import type { MapRef } from 'react-map-gl/maplibre';
+import type { MapRef } from '@vis.gl/react-maplibre';
 import type { MapShape } from '../types/shapes.js';
 export declare const attachImageFromString: (map: MapRef, shape: MapShape | string, suffix?: string, outputSize?: number) => void;

package/map/utils/attach-image-from-text.d.ts

@@ -1,2 +1,2 @@
-import type { MapRef } from 'react-map-gl/maplibre';
+import type { MapRef } from '@vis.gl/react-maplibre';
 export declare const attachImageFromText: (map: MapRef, text: string, name: string, outputSize?: number) => void;

package/map/utils/attach-image-to-map.d.ts

@@ -1,2 +1,2 @@
-import type { MapRef } from 'react-map-gl/maplibre';
+import type { MapRef } from '@vis.gl/react-maplibre';
 export declare const attachImageToMap: (map: MapRef, bitmap: ImageBitmap | HTMLImageElement, iconName: string, sdf?: boolean) => void;

package/map/utils/attach-image-to-map.js

@@ -22,10 +22,17 @@ __export(attach_image_to_map_exports, {
 module.exports = __toCommonJS(attach_image_to_map_exports);
 const attachImageToMap = (map, bitmap, iconName, sdf = true) => {
   const pixelRatio = devicePixelRatio;
-  if (!map.hasImage(iconName)) {
-    map.addImage(iconName, bitmap, { sdf, pixelRatio });
-  } else {
-    map.removeImage(iconName);
-    map.addImage(iconName, bitmap, { sdf, pixelRatio });
+  try {
+    if (!map.hasImage(iconName)) {
+      map.addImage(iconName, bitmap, { sdf, pixelRatio });
+    } else {
+      map.removeImage(iconName);
+      map.addImage(iconName, bitmap, { sdf, pixelRatio });
+    }
+  } catch (error) {
+    if (error instanceof Error) {
+      return;
+    }
+    throw error;
   }
 };

package/map/utils/build-scale-from-legend-config.js

@@ -26,6 +26,7 @@ module.exports = __toCommonJS(build_scale_from_legend_config_exports);
 var import_charts = require("@dynatrace/strato-components-preview/charts");
 var import_build_categorical_scale = require("./build-categorical-scale.js");
 var import_constants = require("../constants.js");
+var import_create_categorical_color_scheme_from_custom_color_object = require("./create-categorical-color-scheme-from-custom-color-object.js");
 var import_create_categorical_color_scheme_from_legend_props = require("./create-categorical-color-scheme-from-legend-props.js");
 const isThresholdLegend = (legendConfig) => legendConfig.type === "threshold";
 const isSequentialLegend = (legendConfig) => legendConfig.type === "sequential";
@@ -43,7 +44,10 @@ const buildScaleFromLegendConfig = (mapLegendConfig, categories) => {
       mapLegendConfig.colorPalette
     );
     const isCustomColorObject = !(isDefaultColorPalette || isArrayOfColors);
-    const colorPaletteObject = isCustomColorObject ? mapLegendConfig.colorPalette : (0, import_create_categorical_color_scheme_from_legend_props.createCategoricalColorSchemeFromLegendProps)(
+    const colorPaletteObject = isCustomColorObject ? (0, import_create_categorical_color_scheme_from_custom_color_object.createCategoricalColorSchemeFromCustomColorObject)(
+      mapLegendConfig.colorPalette,
+      categories ?? []
+    ) : (0, import_create_categorical_color_scheme_from_legend_props.createCategoricalColorSchemeFromLegendProps)(
       mapLegendConfig.colorPalette,
       categories ?? []
     );

package/map/utils/create-categorical-color-scheme-from-custom-color-object.d.ts

@@ -0,0 +1,5 @@
+type CustomCategoricalColorObject = {
+    [key: string]: string;
+};
+export declare const createCategoricalColorSchemeFromCustomColorObject: (colorPalette: CustomCategoricalColorObject, categories: string[]) => CustomCategoricalColorObject;
+export {};

package/map/utils/create-categorical-color-scheme-from-custom-color-object.js

@@ -0,0 +1,35 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var create_categorical_color_scheme_from_custom_color_object_exports = {};
+__export(create_categorical_color_scheme_from_custom_color_object_exports, {
+  createCategoricalColorSchemeFromCustomColorObject: () => createCategoricalColorSchemeFromCustomColorObject
+});
+module.exports = __toCommonJS(create_categorical_color_scheme_from_custom_color_object_exports);
+var import_constants = require("../constants.js");
+const createCategoricalColorSchemeFromCustomColorObject = (colorPalette, categories) => {
+  let obj = { ...colorPalette };
+  categories.forEach((categoryName, index) => {
+    if (!obj[categoryName]) {
+      obj = {
+        ...obj,
+        [categoryName]: import_constants.DEFAULT_BASIC_SHAPE_COLOR_TOKEN.Default
+      };
+    }
+  });
+  return obj;
+};

package/map/utils/extract-layers-data.d.ts

@@ -2,10 +2,11 @@ import React from 'react';
 /**
  * Extract layers data
  * @param children - MapView children
- * @param valueAccessor - MapView Layer valueAccessor
+ * @param valueAccessors - MapView Layer valueAccessor
  * @returns flattened data array
  */
-export declare const extractLayersData: (children: React.ReactNode, valueAccessor?: string) => {
+export declare const extractLayersData: (children: React.ReactNode, valueAccessors: Map<string, string>) => {
     flattenData: Record<string, unknown>[];
     categories: string[];
+    legendDomain: [number, number];
 };

package/map/utils/extract-layers-data.js

@@ -42,9 +42,20 @@ const addCategory = (extendedDataPoint, valueAccessor) => {
     return extendedDataPoint[valueAccessor];
   }
 };
-const extractLayersData = (children, valueAccessor) => {
+const updateDomain = (domain, value) => {
+  const [min, max] = domain;
+  if (value < min) {
+    return [value, max];
+  }
+  if (value > max) {
+    return [min, value];
+  }
+  return domain;
+};
+const extractLayersData = (children, valueAccessors) => {
   let flattenData = [];
   const categoriesSet = /* @__PURE__ */ new Set();
+  let legendDomain = [Infinity, -Infinity];
   import_react.default.Children.forEach(children, (child) => {
     if ((0, import_is_component.isComponent)(child, import_BubbleLayer.BubbleLayer) || (0, import_is_component.isComponent)(child, import_DotLayer.DotLayer)) {
       const { data } = child.props;
@@ -53,22 +64,38 @@ const extractLayersData = (children, valueAccessor) => {
           ...dataPoint,
           "layer-name": child.props.layerId
         };
-        const category = addCategory(extendedDataPoint, valueAccessor);
+        const category = addCategory(
+          extendedDataPoint,
+          valueAccessors.get(child.props.layerId)
+        );
         category && categoriesSet.add(category);
+        if (typeof category === "number") {
+          legendDomain = updateDomain(legendDomain, category);
+        }
         flattenData = flattenData.concat(extendedDataPoint);
       });
     } else if ((0, import_is_component.isComponent)(child, import_ConnectionLayer.ConnectionLayer)) {
       const { data } = child.props;
       data.forEach((connection, connectionIndex) => {
-        connection.path.forEach((path, pathIndex) => {
-          const parsedPath = {
-            ...path,
-            "connection-name": `connection-${connectionIndex + 1}`,
-            "connection-item-index": pathIndex,
-            "layer-name": child.props.layerId
-          };
-          flattenData.push(parsedPath);
-        });
+        if (connection.path.length >= 2) {
+          const category = addCategory(
+            connection,
+            valueAccessors.get(child.props.layerId)
+          );
+          category && categoriesSet.add(category);
+          if (typeof category === "number") {
+            legendDomain = updateDomain(legendDomain, category);
+          }
+          connection.path.forEach((path, pathIndex) => {
+            const parsedPath = {
+              ...path,
+              "connection-name": `connection-${connectionIndex + 1}`,
+              "connection-item-index": pathIndex,
+              "layer-name": child.props.layerId
+            };
+            flattenData.push(parsedPath);
+          });
+        }
       });
     } else if ((0, import_is_component.isComponent)(child, import_ChoroplethLayer.ChoroplethLayer)) {
       const { data, regionAccessor } = child.props;
@@ -79,11 +106,21 @@ const extractLayersData = (children, valueAccessor) => {
           region,
           "layer-name": child.props.layerId
         };
-        const category = addCategory(choroplethLayerData, valueAccessor);
+        const category = addCategory(
+          choroplethLayerData,
+          valueAccessors.get(child.props.layerId)
+        );
         category && categoriesSet.add(category);
+        if (typeof category === "number") {
+          legendDomain = updateDomain(legendDomain, category);
+        }
         flattenData.push(choroplethLayerData);
       });
     }
   });
-  return { flattenData, categories: [...categoriesSet] };
+  return {
+    flattenData,
+    categories: [...categoriesSet],
+    legendDomain
+  };
 };