@dynatrace/strato-geo 1.0.3 → 1.2.1

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

@@ -10,9 +10,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];
   React.Children.forEach(children, (child) => {
     if (isComponent(child, BubbleLayer) || isComponent(child, DotLayer)) {
       const { data } = child.props;
@@ -21,22 +32,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 (isComponent(child, 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 (isComponent(child, ChoroplethLayer)) {
       const { data, regionAccessor } = child.props;
@@ -47,13 +74,23 @@ 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
+  };
 };
 export {
   extractLayersData

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/utils/extract-layers-data.ts"],
-  "sourcesContent": ["import { isString } from 'lodash-es';\nimport React from 'react';\n\nimport { isComponent } from './is-component.js';\nimport { BubbleLayer } from '../components/BubbleLayer/BubbleLayer.js';\nimport { ChoroplethLayer } from '../components/ChoroplethLayer/ChoroplethLayer.js';\nimport { ConnectionLayer } from '../components/ConnectionLayer/ConnectionLayer.js';\nimport { DotLayer } from '../components/DotLayer/DotLayer.js';\n\nconst addCategory = (\n  extendedDataPoint: Record<string, unknown>,\n  valueAccessor?: string,\n) => {\n  if (valueAccessor && extendedDataPoint[valueAccessor]) {\n    return extendedDataPoint[valueAccessor];\n  }\n};\n\n/**\n * Extract layers data\n * @param children - MapView children\n * @param valueAccessor - MapView Layer valueAccessor\n * @returns flattened data array\n */\nexport const extractLayersData = (\n  children: React.ReactNode,\n  valueAccessor?: string,\n) => {\n  let flattenData: Record<string, unknown>[] = [];\n  const categoriesSet = new Set<string>();\n\n  React.Children.forEach(children, (child) => {\n    if (isComponent(child, BubbleLayer) || isComponent(child, DotLayer)) {\n      const { data } = child.props;\n\n      data.forEach((dataPoint) => {\n        const extendedDataPoint = {\n          ...dataPoint,\n          'layer-name': child.props.layerId,\n        };\n\n        const category = addCategory(extendedDataPoint, valueAccessor);\n        category && categoriesSet.add(category as string);\n\n        flattenData = flattenData.concat(extendedDataPoint);\n      });\n    } else if (isComponent(child, ConnectionLayer)) {\n      const { data } = child.props;\n\n      data.forEach((connection, connectionIndex) => {\n        connection.path.forEach((path, pathIndex) => {\n          const parsedPath = {\n            ...path,\n            'connection-name': `connection-${connectionIndex + 1}`,\n            'connection-item-index': pathIndex,\n            'layer-name': child.props.layerId,\n          };\n\n          flattenData.push(parsedPath);\n        });\n      });\n    } else if (isComponent(child, ChoroplethLayer)) {\n      const { data, regionAccessor } = child.props;\n\n      data.forEach((dataEntry) => {\n        const region = isString(regionAccessor)\n          ? dataEntry[regionAccessor]\n          : regionAccessor(dataEntry);\n\n        const choroplethLayerData = {\n          ...dataEntry,\n          region,\n          'layer-name': child.props.layerId,\n        };\n\n        const category = addCategory(choroplethLayerData, valueAccessor);\n        category && categoriesSet.add(category as string);\n\n        flattenData.push(choroplethLayerData);\n      });\n    }\n  });\n\n  return { flattenData, categories: [...categoriesSet] };\n};\n"],
-  "mappings": "AAAA,SAAS,gBAAgB;AACzB,OAAO,WAAW;AAElB,SAAS,mBAAmB;AAC5B,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AAEzB,MAAM,cAAc,CAClB,mBACA,kBACG;AACH,MAAI,iBAAiB,kBAAkB,aAAa,GAAG;AACrD,WAAO,kBAAkB,aAAa;AAAA,EACxC;AACF;AAQO,MAAM,oBAAoB,CAC/B,UACA,kBACG;AACH,MAAI,cAAyC,CAAC;AAC9C,QAAM,gBAAgB,oBAAI,IAAY;AAEtC,QAAM,SAAS,QAAQ,UAAU,CAAC,UAAU;AAC1C,QAAI,YAAY,OAAO,WAAW,KAAK,YAAY,OAAO,QAAQ,GAAG;AACnE,YAAM,EAAE,KAAK,IAAI,MAAM;AAEvB,WAAK,QAAQ,CAAC,cAAc;AAC1B,cAAM,oBAAoB;AAAA,UACxB,GAAG;AAAA,UACH,cAAc,MAAM,MAAM;AAAA,QAC5B;AAEA,cAAM,WAAW,YAAY,mBAAmB,aAAa;AAC7D,oBAAY,cAAc,IAAI,QAAkB;AAEhD,sBAAc,YAAY,OAAO,iBAAiB;AAAA,MACpD,CAAC;AAAA,IACH,WAAW,YAAY,OAAO,eAAe,GAAG;AAC9C,YAAM,EAAE,KAAK,IAAI,MAAM;AAEvB,WAAK,QAAQ,CAAC,YAAY,oBAAoB;AAC5C,mBAAW,KAAK,QAAQ,CAAC,MAAM,cAAc;AAC3C,gBAAM,aAAa;AAAA,YACjB,GAAG;AAAA,YACH,mBAAmB,cAAc,kBAAkB,CAAC;AAAA,YACpD,yBAAyB;AAAA,YACzB,cAAc,MAAM,MAAM;AAAA,UAC5B;AAEA,sBAAY,KAAK,UAAU;AAAA,QAC7B,CAAC;AAAA,MACH,CAAC;AAAA,IACH,WAAW,YAAY,OAAO,eAAe,GAAG;AAC9C,YAAM,EAAE,MAAM,eAAe,IAAI,MAAM;AAEvC,WAAK,QAAQ,CAAC,cAAc;AAC1B,cAAM,SAAS,SAAS,cAAc,IAClC,UAAU,cAAc,IACxB,eAAe,SAAS;AAE5B,cAAM,sBAAsB;AAAA,UAC1B,GAAG;AAAA,UACH;AAAA,UACA,cAAc,MAAM,MAAM;AAAA,QAC5B;AAEA,cAAM,WAAW,YAAY,qBAAqB,aAAa;AAC/D,oBAAY,cAAc,IAAI,QAAkB;AAEhD,oBAAY,KAAK,mBAAmB;AAAA,MACtC,CAAC;AAAA,IACH;AAAA,EACF,CAAC;AAED,SAAO,EAAE,aAAa,YAAY,CAAC,GAAG,aAAa,EAAE;AACvD;",
+  "sourcesContent": ["import { isString } from 'lodash-es';\nimport React from 'react';\n\nimport { isComponent } from './is-component.js';\nimport { BubbleLayer } from '../components/BubbleLayer/BubbleLayer.js';\nimport { ChoroplethLayer } from '../components/ChoroplethLayer/ChoroplethLayer.js';\nimport { ConnectionLayer } from '../components/ConnectionLayer/ConnectionLayer.js';\nimport { DotLayer } from '../components/DotLayer/DotLayer.js';\n\nconst addCategory = (\n  extendedDataPoint: Record<string, unknown>,\n  valueAccessor?: string,\n) => {\n  if (valueAccessor && extendedDataPoint[valueAccessor]) {\n    return extendedDataPoint[valueAccessor];\n  }\n};\n\nconst updateDomain = (\n  domain: [number, number],\n  value: number,\n): [number, number] => {\n  const [min, max] = domain;\n  if (value < min) {\n    return [value, max];\n  }\n  if (value > max) {\n    return [min, value];\n  }\n  return domain;\n};\n\n/**\n * Extract layers data\n * @param children - MapView children\n * @param valueAccessors - MapView Layer valueAccessor\n * @returns flattened data array\n */\nexport const extractLayersData = (\n  children: React.ReactNode,\n  valueAccessors: Map<string, string>,\n) => {\n  let flattenData: Record<string, unknown>[] = [];\n  const categoriesSet = new Set<string>();\n  let legendDomain: [number, number] = [Infinity, -Infinity];\n\n  React.Children.forEach(children, (child) => {\n    if (isComponent(child, BubbleLayer) || isComponent(child, DotLayer)) {\n      const { data } = child.props;\n\n      data.forEach((dataPoint) => {\n        const extendedDataPoint = {\n          ...dataPoint,\n          'layer-name': child.props.layerId,\n        };\n\n        const category = addCategory(\n          extendedDataPoint,\n          valueAccessors.get(child.props.layerId),\n        );\n\n        category && categoriesSet.add(category as string);\n\n        if (typeof category === 'number') {\n          legendDomain = updateDomain(legendDomain, category);\n        }\n\n        flattenData = flattenData.concat(extendedDataPoint);\n      });\n    } else if (isComponent(child, ConnectionLayer)) {\n      const { data } = child.props;\n\n      data.forEach((connection, connectionIndex) => {\n        if (connection.path.length >= 2) {\n          const category = addCategory(\n            connection,\n            valueAccessors.get(child.props.layerId),\n          );\n\n          category && categoriesSet.add(category as string);\n\n          if (typeof category === 'number') {\n            legendDomain = updateDomain(legendDomain, category);\n          }\n\n          connection.path.forEach((path, pathIndex) => {\n            const parsedPath = {\n              ...path,\n              'connection-name': `connection-${connectionIndex + 1}`,\n              'connection-item-index': pathIndex,\n              'layer-name': child.props.layerId,\n            };\n\n            flattenData.push(parsedPath);\n          });\n        }\n      });\n    } else if (isComponent(child, ChoroplethLayer)) {\n      const { data, regionAccessor } = child.props;\n\n      data.forEach((dataEntry) => {\n        const region = isString(regionAccessor)\n          ? dataEntry[regionAccessor]\n          : regionAccessor(dataEntry);\n\n        const choroplethLayerData = {\n          ...dataEntry,\n          region,\n          'layer-name': child.props.layerId,\n        };\n\n        const category = addCategory(\n          choroplethLayerData,\n          valueAccessors.get(child.props.layerId),\n        );\n\n        category && categoriesSet.add(category as string);\n\n        if (typeof category === 'number') {\n          legendDomain = updateDomain(legendDomain, category);\n        }\n\n        flattenData.push(choroplethLayerData);\n      });\n    }\n  });\n\n  return {\n    flattenData,\n    categories: [...categoriesSet],\n    legendDomain,\n  };\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/map/utils/iterate-config-slots.js

@@ -12,7 +12,7 @@ import { CategoricalLegend } from "../slots/CategoricalLegend.js";
 import { ChartInteractions } from "../slots/ChartInteractions.js";
 import { SequentialLegend } from "../slots/SequentialLegend.js";
 import { ThresholdLegend } from "../slots/ThresholdLegend.js";
-const iterateConfigSlots = (children) => {
+const iterateConfigSlots = (children, legendDomain) => {
   let slots = {
     toolbar: void 0,
     interactions: void 0,
@@ -55,7 +55,9 @@ const iterateConfigSlots = (children) => {
               colorPalette: DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE,
               position: DEFAULT_MAP_POSITION,
               ratio: DEFAULT_MAP_LEGEND_RATIO,
-              ...legend
+              ...legend,
+              min: legend.min ?? legendDomain[0],
+              max: legend.max ?? legendDomain[1]
             }
           };
           break;

package/esm/map/utils/iterate-config-slots.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/utils/iterate-config-slots.ts"],
-  "sourcesContent": ["import React from 'react';\nimport { isElement } from 'react-is';\n\nimport { ChartToolbar } from '@dynatrace/strato-components-preview/charts';\n\nimport {\n  DEFAULT_BASE_LAYER_RULES,\n  DEFAULT_MAP_LEGEND_RATIO,\n  DEFAULT_MAP_POSITION,\n  DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE,\n} from '../constants.js';\nimport { BaseLayer } from '../slots/BaseLayer.js';\nimport { CategoricalLegend } from '../slots/CategoricalLegend.js';\nimport { ChartInteractions } from '../slots/ChartInteractions.js';\nimport { SequentialLegend } from '../slots/SequentialLegend.js';\nimport { ThresholdLegend } from '../slots/ThresholdLegend.js';\nimport type { MapConfig } from '../types/configuration.js';\nimport type { ChartInteractionsConfig } from '../types/toolbar.js';\n\n/**\n * Generate map config based on slots\n * @param children - Map children\n * @returns Map slot config\n */\nexport const iterateConfigSlots = (children: React.ReactNode) => {\n  let slots: MapConfig = {\n    toolbar: undefined,\n    interactions: undefined,\n    legend: undefined,\n    baseLayer: DEFAULT_BASE_LAYER_RULES,\n  };\n\n  React.Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case ChartInteractions: {\n          const { children, ...previousInteractions } = child.props;\n\n          const interactions = iterateChartInteractionsSlots(children);\n\n          slots = {\n            ...slots,\n            interactions: {\n              ...previousInteractions,\n              ...interactions,\n            },\n          };\n          break;\n        }\n\n        case ChartToolbar: {\n          const { children, ...toolbar } = child.props;\n          const childrenToolbar = iterateChartToolbarSlots(children);\n\n          slots = {\n            ...slots,\n            toolbar: {\n              ...toolbar,\n              ...childrenToolbar,\n            },\n          };\n          break;\n        }\n\n        case SequentialLegend: {\n          const { children, ...legend } = child.props;\n\n          slots = {\n            ...slots,\n            legend: {\n              type: 'sequential',\n              colorPalette: DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE,\n              position: DEFAULT_MAP_POSITION,\n              ratio: DEFAULT_MAP_LEGEND_RATIO,\n              ...legend,\n            },\n          };\n          break;\n        }\n\n        case CategoricalLegend: {\n          const { children, ...legend } = child.props;\n\n          slots = {\n            ...slots,\n            legend: {\n              type: 'categorical',\n              position: DEFAULT_MAP_POSITION,\n              ...legend,\n            },\n          };\n          break;\n        }\n\n        case ThresholdLegend: {\n          const { children, ...legend } = child.props;\n\n          slots = {\n            ...slots,\n            legend: {\n              type: 'threshold',\n              position: DEFAULT_MAP_POSITION,\n              ratio: DEFAULT_MAP_LEGEND_RATIO,\n              ...legend,\n            },\n          };\n          break;\n        }\n\n        case BaseLayer: {\n          slots = {\n            ...slots,\n            baseLayer: {\n              ...slots.baseLayer,\n              ...child.props,\n            },\n          };\n          break;\n        }\n      }\n    }\n  });\n\n  return slots;\n};\n\nconst iterateChartInteractionsSlots = (children: React.ReactElement[]) => {\n  let interactions: ChartInteractionsConfig = {};\n\n  React.Children.forEach(children, (childInteractions) => {\n    if (isElement(childInteractions)) {\n      switch (childInteractions.type) {\n        case ChartInteractions.Zoom:\n          interactions = { ...interactions, zoom: { enabled: true } };\n          break;\n        case ChartInteractions.ZoomToFit:\n          interactions = { ...interactions, zoomToFit: { enabled: true } };\n          break;\n      }\n    }\n  });\n\n  return interactions;\n};\n\n/**\n * Generates chart config based on slots\n * @param children - CharInteraction children\n * @returns ChartInteraction slot config\n */\nconst iterateChartToolbarSlots = (children: React.ReactElement[]) => {\n  let toolbar = {};\n\n  React.Children.forEach(children, (childToolbar) => {\n    if (\n      isElement(childToolbar) &&\n      childToolbar.type === ChartToolbar.DownloadData\n    ) {\n      toolbar = {\n        ...toolbar,\n        downloadData: { enabled: true },\n      };\n    }\n  });\n\n  return toolbar;\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import React from 'react';\nimport { isElement } from 'react-is';\n\nimport { ChartToolbar } from '@dynatrace/strato-components-preview/charts';\n\nimport {\n  DEFAULT_BASE_LAYER_RULES,\n  DEFAULT_MAP_LEGEND_RATIO,\n  DEFAULT_MAP_POSITION,\n  DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE,\n} from '../constants.js';\nimport { BaseLayer } from '../slots/BaseLayer.js';\nimport { CategoricalLegend } from '../slots/CategoricalLegend.js';\nimport { ChartInteractions } from '../slots/ChartInteractions.js';\nimport { SequentialLegend } from '../slots/SequentialLegend.js';\nimport { ThresholdLegend } from '../slots/ThresholdLegend.js';\nimport type { MapConfig } from '../types/configuration.js';\nimport type { ChartInteractionsConfig } from '../types/toolbar.js';\n\n/**\n * Generate map config based on slots\n * @param children - Map children\n * @param legendDomain - Domain containing min and max value relevant for legend\n * @returns Map slot config\n */\nexport const iterateConfigSlots = (\n  children: React.ReactNode,\n  legendDomain: [number, number],\n) => {\n  let slots: MapConfig = {\n    toolbar: undefined,\n    interactions: undefined,\n    legend: undefined,\n    baseLayer: DEFAULT_BASE_LAYER_RULES,\n  };\n\n  React.Children.forEach(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case ChartInteractions: {\n          const { children, ...previousInteractions } = child.props;\n\n          const interactions = iterateChartInteractionsSlots(children);\n\n          slots = {\n            ...slots,\n            interactions: {\n              ...previousInteractions,\n              ...interactions,\n            },\n          };\n          break;\n        }\n\n        case ChartToolbar: {\n          const { children, ...toolbar } = child.props;\n          const childrenToolbar = iterateChartToolbarSlots(children);\n\n          slots = {\n            ...slots,\n            toolbar: {\n              ...toolbar,\n              ...childrenToolbar,\n            },\n          };\n          break;\n        }\n\n        case SequentialLegend: {\n          const { children, ...legend } = child.props;\n\n          slots = {\n            ...slots,\n            legend: {\n              type: 'sequential',\n              colorPalette: DEFAULT_SEQUENTIAL_LEGEND_COLOR_PALETTE,\n              position: DEFAULT_MAP_POSITION,\n              ratio: DEFAULT_MAP_LEGEND_RATIO,\n              ...legend,\n              min: legend.min ?? legendDomain[0],\n              max: legend.max ?? legendDomain[1],\n            },\n          };\n\n          break;\n        }\n\n        case CategoricalLegend: {\n          const { children, ...legend } = child.props;\n\n          slots = {\n            ...slots,\n            legend: {\n              type: 'categorical',\n              position: DEFAULT_MAP_POSITION,\n              ...legend,\n            },\n          };\n          break;\n        }\n\n        case ThresholdLegend: {\n          const { children, ...legend } = child.props;\n\n          slots = {\n            ...slots,\n            legend: {\n              type: 'threshold',\n              position: DEFAULT_MAP_POSITION,\n              ratio: DEFAULT_MAP_LEGEND_RATIO,\n              ...legend,\n            },\n          };\n          break;\n        }\n\n        case BaseLayer: {\n          slots = {\n            ...slots,\n            baseLayer: {\n              ...slots.baseLayer,\n              ...child.props,\n            },\n          };\n          break;\n        }\n      }\n    }\n  });\n\n  return slots;\n};\n\nconst iterateChartInteractionsSlots = (children: React.ReactElement[]) => {\n  let interactions: ChartInteractionsConfig = {};\n\n  React.Children.forEach(children, (childInteractions) => {\n    if (isElement(childInteractions)) {\n      switch (childInteractions.type) {\n        case ChartInteractions.Zoom:\n          interactions = { ...interactions, zoom: { enabled: true } };\n          break;\n        case ChartInteractions.ZoomToFit:\n          interactions = { ...interactions, zoomToFit: { enabled: true } };\n          break;\n      }\n    }\n  });\n\n  return interactions;\n};\n\n/**\n * Generates chart config based on slots\n * @param children - CharInteraction children\n * @returns ChartInteraction slot config\n */\nconst iterateChartToolbarSlots = (children: React.ReactElement[]) => {\n  let toolbar = {};\n\n  React.Children.forEach(children, (childToolbar) => {\n    if (\n      isElement(childToolbar) &&\n      childToolbar.type === ChartToolbar.DownloadData\n    ) {\n      toolbar = {\n        ...toolbar,\n        downloadData: { enabled: true },\n      };\n    }\n  });\n\n  return toolbar;\n};\n"],
+  "mappings": "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",
   "names": ["children"]
 }

package/esm/map/utils/set-layers-id.js

@@ -1,3 +1,4 @@
+import { isUndefined } from "lodash-es";
 import React from "react";
 import { isElement } from "react-is";
 import { BubbleLayer as _BubbleLayer } from "../components/BubbleLayer/BubbleLayer.js";
@@ -8,6 +9,12 @@ import { BubbleLayer } from "../slots/BubbleLayer.js";
 import { ChoroplethLayer } from "../slots/ChoroplethLayer.js";
 import { ConnectionLayer } from "../slots/ConnectionLayer.js";
 import { DotLayer } from "../slots/DotLayer.js";
+const sanitizeData = (child, key) => {
+  return child.props.data.filter((datapoint) => {
+    const value = datapoint[key];
+    return !(value === null || isUndefined(value));
+  });
+};
 const layers = new WeakMap([
   [BubbleLayer, { component: _BubbleLayer, prefix: "bubble" }],
   [DotLayer, { component: _DotLayer, prefix: "dot" }],
@@ -17,7 +24,7 @@ const layers = new WeakMap([
 const setLayersId = (children) => {
   const layerIds = [];
   let index = 0;
-  let valueAccessor;
+  const valueAccessors = /* @__PURE__ */ new Map();
   const parsedChildren = React.Children.map(children, (child) => {
     if (isElement(child)) {
       switch (child.type) {
@@ -26,14 +33,15 @@ const setLayersId = (children) => {
         case ChoroplethLayer:
         case DotLayer: {
           const layer = layers.get(child.type);
+          const layerId = `${layer?.prefix}-${index}`;
           if (child.props.color === "legend" && child.props.valueAccessor) {
-            valueAccessor = child.props.valueAccessor;
+            valueAccessors.set(layerId, child.props.valueAccessor);
           }
-          const layerId = `${layer?.prefix}-${index}`;
           index += 1;
           layerIds.push(layerId);
           const newProps = {
             ...child.props,
+            data: valueAccessors.get(layerId) ? sanitizeData(child, valueAccessors.get(layerId)) : child.props.data,
             layerId
           };
           return {
@@ -50,7 +58,7 @@ const setLayersId = (children) => {
     }
     return child;
   });
-  return { layerIds, parsedChildren, valueAccessor };
+  return { layerIds, parsedChildren, valueAccessors };
 };
 export {
   setLayersId

package/esm/map/utils/set-layers-id.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/utils/set-layers-id.ts"],
-  "sourcesContent": ["import React from 'react';\nimport { isElement } from 'react-is';\n\nimport { BubbleLayer as _BubbleLayer } from '../components/BubbleLayer/BubbleLayer.js';\nimport { ChoroplethLayer as _ChoroplethLayer } from '../components/ChoroplethLayer/ChoroplethLayer.js';\nimport { ConnectionLayer as _ConnectionLayer } from '../components/ConnectionLayer/ConnectionLayer.js';\nimport { DotLayer as _DotLayer } from '../components/DotLayer/DotLayer.js';\nimport { BubbleLayer } from '../slots/BubbleLayer.js';\nimport { ChoroplethLayer } from '../slots/ChoroplethLayer.js';\nimport { ConnectionLayer } from '../slots/ConnectionLayer.js';\nimport { DotLayer } from '../slots/DotLayer.js';\nimport type { InternalBubbleLayerProps } from '../types/bubble-layer.js';\nimport type { InternalChoroplethLayerProps } from '../types/choropleth-layer.js';\nimport type { InternalConnectionLayerProps } from '../types/connection-layer.js';\nimport type { InternalDotLayerProps } from '../types/dot-layer.js';\n\nconst layers = new WeakMap<\n  React.JSXElementConstructor<never>,\n  { prefix: string; component: React.JSXElementConstructor<never> }\n>([\n  [BubbleLayer, { component: _BubbleLayer, prefix: 'bubble' }],\n  [DotLayer, { component: _DotLayer, prefix: 'dot' }],\n  [ChoroplethLayer, { component: _ChoroplethLayer, prefix: 'choropleth' }],\n  [ConnectionLayer, { component: _ConnectionLayer, prefix: 'connection' }],\n]);\n\n/**\n * Set layers id to layer slots provided by the consumer.\n * @param children - MapView children\n * @returns An array with all the layers IDs and the children using the layer component\n */\nexport const setLayersId = (children: React.ReactNode) => {\n  const layerIds: string[] = [];\n  let index = 0;\n  let valueAccessor: string | undefined;\n\n  const parsedChildren = React.Children.map(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case BubbleLayer:\n        case ConnectionLayer:\n        case ChoroplethLayer:\n        case DotLayer: {\n          const layer = layers.get(child.type);\n\n          if (child.props.color === 'legend' && child.props.valueAccessor) {\n            valueAccessor = child.props.valueAccessor;\n          }\n          const layerId = `${layer?.prefix}-${index}`;\n          index += 1;\n\n          layerIds.push(layerId);\n\n          const newProps: React.PropsWithChildren<\n            | InternalBubbleLayerProps<never>\n            | InternalConnectionLayerProps<never>\n            | InternalDotLayerProps<never>\n            | InternalChoroplethLayerProps<never>\n          > = {\n            ...child.props,\n            layerId,\n          };\n\n          return {\n            ...child,\n            key: layerId,\n            props: newProps,\n            type: layer?.component,\n          };\n        }\n        default: {\n          return child;\n        }\n      }\n    }\n\n    return child;\n  }) as React.ReactNode;\n\n  return { layerIds, parsedChildren, valueAccessor };\n};\n"],
-  "mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,iBAAiB;AAE1B,SAAS,eAAe,oBAAoB;AAC5C,SAAS,mBAAmB,wBAAwB;AACpD,SAAS,mBAAmB,wBAAwB;AACpD,SAAS,YAAY,iBAAiB;AACtC,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AAMzB,MAAM,SAAS,IAAI,QAGjB;AAAA,EACA,CAAC,aAAa,EAAE,WAAW,cAAc,QAAQ,SAAS,CAAC;AAAA,EAC3D,CAAC,UAAU,EAAE,WAAW,WAAW,QAAQ,MAAM,CAAC;AAAA,EAClD,CAAC,iBAAiB,EAAE,WAAW,kBAAkB,QAAQ,aAAa,CAAC;AAAA,EACvE,CAAC,iBAAiB,EAAE,WAAW,kBAAkB,QAAQ,aAAa,CAAC;AACzE,CAAC;AAOM,MAAM,cAAc,CAAC,aAA8B;AACxD,QAAM,WAAqB,CAAC;AAC5B,MAAI,QAAQ;AACZ,MAAI;AAEJ,QAAM,iBAAiB,MAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AAC7D,QAAI,UAAU,KAAK,GAAG;AACpB,cAAQ,MAAM,MAAM;AAAA,QAClB,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK,UAAU;AACb,gBAAM,QAAQ,OAAO,IAAI,MAAM,IAAI;AAEnC,cAAI,MAAM,MAAM,UAAU,YAAY,MAAM,MAAM,eAAe;AAC/D,4BAAgB,MAAM,MAAM;AAAA,UAC9B;AACA,gBAAM,UAAU,GAAG,OAAO,MAAM,IAAI,KAAK;AACzC,mBAAS;AAET,mBAAS,KAAK,OAAO;AAErB,gBAAM,WAKF;AAAA,YACF,GAAG,MAAM;AAAA,YACT;AAAA,UACF;AAEA,iBAAO;AAAA,YACL,GAAG;AAAA,YACH,KAAK;AAAA,YACL,OAAO;AAAA,YACP,MAAM,OAAO;AAAA,UACf;AAAA,QACF;AAAA,QACA,SAAS;AACP,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC;AAED,SAAO,EAAE,UAAU,gBAAgB,cAAc;AACnD;",
+  "sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport React, { type ReactElement } from 'react';\nimport { isElement } from 'react-is';\n\nimport { BubbleLayer as _BubbleLayer } from '../components/BubbleLayer/BubbleLayer.js';\nimport { ChoroplethLayer as _ChoroplethLayer } from '../components/ChoroplethLayer/ChoroplethLayer.js';\nimport { ConnectionLayer as _ConnectionLayer } from '../components/ConnectionLayer/ConnectionLayer.js';\nimport { DotLayer as _DotLayer } from '../components/DotLayer/DotLayer.js';\nimport { BubbleLayer } from '../slots/BubbleLayer.js';\nimport { ChoroplethLayer } from '../slots/ChoroplethLayer.js';\nimport { ConnectionLayer } from '../slots/ConnectionLayer.js';\nimport { DotLayer } from '../slots/DotLayer.js';\nimport type { InternalBubbleLayerProps } from '../types/bubble-layer.js';\nimport type { InternalChoroplethLayerProps } from '../types/choropleth-layer.js';\nimport type { InternalConnectionLayerProps } from '../types/connection-layer.js';\nimport type { InternalDotLayerProps } from '../types/dot-layer.js';\n\nconst sanitizeData = (child: ReactElement, key: string) => {\n  return child.props.data.filter((datapoint: Location) => {\n    const value = datapoint[key as keyof Location];\n    return !(value === null || isUndefined(value));\n  });\n};\n\nconst layers = new WeakMap<\n  React.JSXElementConstructor<never>,\n  { prefix: string; component: React.JSXElementConstructor<never> }\n>([\n  [BubbleLayer, { component: _BubbleLayer, prefix: 'bubble' }],\n  [DotLayer, { component: _DotLayer, prefix: 'dot' }],\n  [ChoroplethLayer, { component: _ChoroplethLayer, prefix: 'choropleth' }],\n  [ConnectionLayer, { component: _ConnectionLayer, prefix: 'connection' }],\n]);\n\n/**\n * Set layers id to layer slots provided by the consumer.\n * @param children - MapView children\n * @returns An array with all the layers IDs and the children using the layer component\n */\nexport const setLayersId = (children: React.ReactNode) => {\n  const layerIds: string[] = [];\n  let index = 0;\n  const valueAccessors = new Map<string, string>();\n\n  const parsedChildren = React.Children.map(children, (child) => {\n    if (isElement(child)) {\n      switch (child.type) {\n        case BubbleLayer:\n        case ConnectionLayer:\n        case ChoroplethLayer:\n        case DotLayer: {\n          const layer = layers.get(child.type);\n\n          const layerId = `${layer?.prefix}-${index}`;\n\n          if (child.props.color === 'legend' && child.props.valueAccessor) {\n            valueAccessors.set(layerId, child.props.valueAccessor);\n          }\n\n          index += 1;\n\n          layerIds.push(layerId);\n\n          const newProps: React.PropsWithChildren<\n            | InternalBubbleLayerProps<never>\n            | InternalConnectionLayerProps<never>\n            | InternalDotLayerProps<never>\n            | InternalChoroplethLayerProps<never>\n          > = {\n            ...child.props,\n            data: valueAccessors.get(layerId)\n              ? sanitizeData(child, valueAccessors.get(layerId)!)\n              : child.props.data,\n            layerId,\n          };\n\n          return {\n            ...child,\n            key: layerId,\n            props: newProps,\n            type: layer?.component,\n          };\n        }\n        default: {\n          return child;\n        }\n      }\n    }\n\n    return child;\n  }) as React.ReactNode;\n\n  return { layerIds, parsedChildren, valueAccessors };\n};\n"],
+  "mappings": "AAAA,SAAS,mBAAmB;AAC5B,OAAO,WAAkC;AACzC,SAAS,iBAAiB;AAE1B,SAAS,eAAe,oBAAoB;AAC5C,SAAS,mBAAmB,wBAAwB;AACpD,SAAS,mBAAmB,wBAAwB;AACpD,SAAS,YAAY,iBAAiB;AACtC,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AAMzB,MAAM,eAAe,CAAC,OAAqB,QAAgB;AACzD,SAAO,MAAM,MAAM,KAAK,OAAO,CAAC,cAAwB;AACtD,UAAM,QAAQ,UAAU,GAAqB;AAC7C,WAAO,EAAE,UAAU,QAAQ,YAAY,KAAK;AAAA,EAC9C,CAAC;AACH;AAEA,MAAM,SAAS,IAAI,QAGjB;AAAA,EACA,CAAC,aAAa,EAAE,WAAW,cAAc,QAAQ,SAAS,CAAC;AAAA,EAC3D,CAAC,UAAU,EAAE,WAAW,WAAW,QAAQ,MAAM,CAAC;AAAA,EAClD,CAAC,iBAAiB,EAAE,WAAW,kBAAkB,QAAQ,aAAa,CAAC;AAAA,EACvE,CAAC,iBAAiB,EAAE,WAAW,kBAAkB,QAAQ,aAAa,CAAC;AACzE,CAAC;AAOM,MAAM,cAAc,CAAC,aAA8B;AACxD,QAAM,WAAqB,CAAC;AAC5B,MAAI,QAAQ;AACZ,QAAM,iBAAiB,oBAAI,IAAoB;AAE/C,QAAM,iBAAiB,MAAM,SAAS,IAAI,UAAU,CAAC,UAAU;AAC7D,QAAI,UAAU,KAAK,GAAG;AACpB,cAAQ,MAAM,MAAM;AAAA,QAClB,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK;AAAA,QACL,KAAK,UAAU;AACb,gBAAM,QAAQ,OAAO,IAAI,MAAM,IAAI;AAEnC,gBAAM,UAAU,GAAG,OAAO,MAAM,IAAI,KAAK;AAEzC,cAAI,MAAM,MAAM,UAAU,YAAY,MAAM,MAAM,eAAe;AAC/D,2BAAe,IAAI,SAAS,MAAM,MAAM,aAAa;AAAA,UACvD;AAEA,mBAAS;AAET,mBAAS,KAAK,OAAO;AAErB,gBAAM,WAKF;AAAA,YACF,GAAG,MAAM;AAAA,YACT,MAAM,eAAe,IAAI,OAAO,IAC5B,aAAa,OAAO,eAAe,IAAI,OAAO,CAAE,IAChD,MAAM,MAAM;AAAA,YAChB;AAAA,UACF;AAEA,iBAAO;AAAA,YACL,GAAG;AAAA,YACH,KAAK;AAAA,YACL,OAAO;AAAA,YACP,MAAM,OAAO;AAAA,UACf;AAAA,QACF;AAAA,QACA,SAAS;AACP,iBAAO;AAAA,QACT;AAAA,MACF;AAAA,IACF;AAEA,WAAO;AAAA,EACT,CAAC;AAED,SAAO,EAAE,UAAU,gBAAgB,eAAe;AACpD;",
   "names": []
 }

package/esm/map/utils/tooltip-type-guards.js

@@ -6,7 +6,7 @@ const isDotTooltipTemplate = (template) => typeof template === typeof DotLayerTo
 const isBubbleTooltipTemplate = (template) => typeof template === typeof BubbleLayerTooltip;
 const isConnectionTooltipTemplate = (template) => typeof template === typeof ConnectionLayerTooltip;
 const isChoroplethTooltipTemplate = (template) => typeof template === typeof ChoroplethLayerTooltip;
-const isConnection = (data) => "path" in data;
+const isConnection = (data) => "path" in data.data;
 const isRegion = (data) => "name" in data;
 export {
   isBubbleTooltipTemplate,

package/esm/map/utils/tooltip-type-guards.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/utils/tooltip-type-guards.ts"],
-  "sourcesContent": ["import { BubbleLayerTooltip } from '../slots/BubbleLayerTooltip.js';\nimport { ChoroplethLayerTooltip } from '../slots/ChoroplethLayerTooltip.js';\nimport { ConnectionLayerTooltip } from '../slots/ConnectionLayerTooltip.js';\nimport { DotLayerTooltip } from '../slots/DotLayerTooltip.js';\nimport type {\n  BubbleLayerTooltipHandler,\n  ChoroplethLayerTooltipData,\n  ChoroplethLayerTooltipHandler,\n  ConnectionLayerTooltipData,\n  ConnectionLayerTooltipHandler,\n  DotLayerTooltipHandler,\n  LayerTooltipData,\n  LayerTooltipHandler,\n} from '../types/tooltip.js';\n\n/**\n * Type guards for tooltip template\n * @param template -\n */\nexport const isDotTooltipTemplate = (\n  template?: LayerTooltipHandler,\n): template is DotLayerTooltipHandler =>\n  typeof template === typeof DotLayerTooltip;\n\nexport const isBubbleTooltipTemplate = (\n  template?: LayerTooltipHandler,\n): template is BubbleLayerTooltipHandler =>\n  typeof template === typeof BubbleLayerTooltip;\n\nexport const isConnectionTooltipTemplate = (\n  template?: LayerTooltipHandler,\n): template is ConnectionLayerTooltipHandler =>\n  typeof template === typeof ConnectionLayerTooltip;\n\nexport const isChoroplethTooltipTemplate = (\n  template?: LayerTooltipHandler,\n): template is ChoroplethLayerTooltipHandler =>\n  typeof template === typeof ChoroplethLayerTooltip;\n\n/**\n * Type guards for map types in tooltip context\n * @param data -\n */\nexport const isConnection = (\n  data: LayerTooltipData,\n): data is ConnectionLayerTooltipData => 'path' in data;\n\nexport const isRegion = (\n  data: LayerTooltipData,\n): data is ChoroplethLayerTooltipData => 'name' in data;\n"],
-  "mappings": "AAAA,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,SAAS,uBAAuB;AAgBzB,MAAM,uBAAuB,CAClC,aAEA,OAAO,aAAa,OAAO;AAEtB,MAAM,0BAA0B,CACrC,aAEA,OAAO,aAAa,OAAO;AAEtB,MAAM,8BAA8B,CACzC,aAEA,OAAO,aAAa,OAAO;AAEtB,MAAM,8BAA8B,CACzC,aAEA,OAAO,aAAa,OAAO;AAMtB,MAAM,eAAe,CAC1B,SACuC,UAAU;AAE5C,MAAM,WAAW,CACtB,SACuC,UAAU;",
+  "sourcesContent": ["import { BubbleLayerTooltip } from '../slots/BubbleLayerTooltip.js';\nimport { ChoroplethLayerTooltip } from '../slots/ChoroplethLayerTooltip.js';\nimport { ConnectionLayerTooltip } from '../slots/ConnectionLayerTooltip.js';\nimport { DotLayerTooltip } from '../slots/DotLayerTooltip.js';\nimport type {\n  BubbleLayerTooltipHandler,\n  ChoroplethLayerTooltipData,\n  ChoroplethLayerTooltipHandler,\n  ConnectionLayerTooltipData,\n  ConnectionLayerTooltipHandler,\n  DotLayerTooltipHandler,\n  LayerTooltipData,\n  LayerTooltipHandler,\n} from '../types/tooltip.js';\n\n/**\n * Type guards for tooltip template\n * @param template -\n */\nexport const isDotTooltipTemplate = (\n  template?: LayerTooltipHandler,\n): template is DotLayerTooltipHandler =>\n  typeof template === typeof DotLayerTooltip;\n\nexport const isBubbleTooltipTemplate = (\n  template?: LayerTooltipHandler,\n): template is BubbleLayerTooltipHandler =>\n  typeof template === typeof BubbleLayerTooltip;\n\nexport const isConnectionTooltipTemplate = (\n  template?: LayerTooltipHandler,\n): template is ConnectionLayerTooltipHandler =>\n  typeof template === typeof ConnectionLayerTooltip;\n\nexport const isChoroplethTooltipTemplate = (\n  template?: LayerTooltipHandler,\n): template is ChoroplethLayerTooltipHandler =>\n  typeof template === typeof ChoroplethLayerTooltip;\n\n/**\n * Type guards for map types in tooltip context\n * @param data -\n */\nexport const isConnection = (\n  data: LayerTooltipData,\n): data is ConnectionLayerTooltipData => 'path' in data.data;\n\nexport const isRegion = (\n  data: LayerTooltipData,\n): data is ChoroplethLayerTooltipData => 'name' in data;\n"],
+  "mappings": "AAAA,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,SAAS,uBAAuB;AAgBzB,MAAM,uBAAuB,CAClC,aAEA,OAAO,aAAa,OAAO;AAEtB,MAAM,0BAA0B,CACrC,aAEA,OAAO,aAAa,OAAO;AAEtB,MAAM,8BAA8B,CACzC,aAEA,OAAO,aAAa,OAAO;AAEtB,MAAM,8BAA8B,CACzC,aAEA,OAAO,aAAa,OAAO;AAMtB,MAAM,eAAe,CAC1B,SACuC,UAAU,KAAK;AAEjD,MAAM,WAAW,CACtB,SACuC,UAAU;",
   "names": []
 }

package/esm/map/utils/use-set-map-initial-configuration.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/utils/use-set-map-initial-configuration.ts"],
-  "sourcesContent": ["import { isNil } from 'lodash-es';\nimport { useCallback } from 'react';\nimport { MapRef } from 'react-map-gl/maplibre';\n\nexport const useSetMapInitialConfiguration = () =>\n  useCallback((mapRef: MapRef) => {\n    if (isNil(mapRef)) {\n      return;\n    }\n\n    mapRef.getMap()?.touchZoomRotate?.disableRotation();\n  }, []);\n"],
-  "mappings": "AAAA,SAAS,aAAa;AACtB,SAAS,mBAAmB;AAGrB,MAAM,gCAAgC,MAC3C,YAAY,CAAC,WAAmB;AAC9B,MAAI,MAAM,MAAM,GAAG;AACjB;AAAA,EACF;AAEA,SAAO,OAAO,GAAG,iBAAiB,gBAAgB;AACpD,GAAG,CAAC,CAAC;",
+  "sourcesContent": ["import { MapRef } from '@vis.gl/react-maplibre';\nimport { isNil } from 'lodash-es';\nimport { useCallback } from 'react';\n\nexport const useSetMapInitialConfiguration = () =>\n  useCallback((mapRef: MapRef) => {\n    if (isNil(mapRef)) {\n      return;\n    }\n\n    mapRef.getMap()?.touchZoomRotate?.disableRotation();\n  }, []);\n"],
+  "mappings": "AACA,SAAS,aAAa;AACtB,SAAS,mBAAmB;AAErB,MAAM,gCAAgC,MAC3C,YAAY,CAAC,WAAmB;AAC9B,MAAI,MAAM,MAAM,GAAG;AACjB;AAAA,EACF;AAEA,SAAO,OAAO,GAAG,iBAAiB,gBAAgB;AACpD,GAAG,CAAC,CAAC;",
   "names": []
 }

package/index.d.ts

@@ -8,7 +8,7 @@ export { ChoroplethLayer } from './map/slots/ChoroplethLayer.js';
 export { Tooltip, TooltipAtoms } from './map/slots/Tooltip.js';
 export type { MapViewProps, MapViewBaseProps, MapViewUncontrolledProps, MapViewControlledProps, DisallowAll, ViewState, MapViewRef, } from './map/types/map-view.js';
 export type { BaseLayerProps } from './map/types/base-layer.js';
-export type { Connection, ConnectionLayerProps, CurvedLine, } from './map/types/connection-layer.js';
+export type { Connection, ConnectionLayerBaseProps, ConnectionLayerProps, CurvedLine, } from './map/types/connection-layer.js';
 export type { DotLayerBaseProps, DotLayerProps, } from './map/types/dot-layer.js';
 export type { BubbleLayerBaseProps, BubbleLayerProps, ScaleNoneProps, ScaleRadiusProps, } from './map/types/bubble-layer.js';
 export type { ChoroplethLayerBaseProps, ChoroplethLayerProps, } from './map/types/choropleth-layer.js';
@@ -17,7 +17,7 @@ export type { MapShape } from './map/types/shapes.js';
 export type { ChartInteractionsProps } from './map/types/toolbar.js';
 export type { ErrorStateSlotProps } from './map/slots/states/ErrorStateSlot.js';
 export type { BaseLegendProps, CategoricalLegendProps, SequentialLegendProps, ThresholdLegendProps, } from './map/types/legend.js';
-export type { LocationColorProps, LegendColorLayerProps, ChoroplethCustomColorProps, } from './map/types/coloring.js';
+export type { LocationColorProps, LegendColorLayerProps, ChoroplethCustomColorProps, ConnectionColorProps, } from './map/types/coloring.js';
 export { SequentialLegend } from './map/slots/SequentialLegend.js';
 export { ThresholdLegend } from './map/slots/ThresholdLegend.js';
 export { CategoricalLegend } from './map/slots/CategoricalLegend.js';

package/map/MapView.d.ts

@@ -3,7 +3,7 @@ import type { MapViewProps, MapViewRef } from './types/map-view.js';
 import './styles/react-mapgl-styles.css';
 /**
  * The `MapView` is a component that renders a map with various geospatial data layers.
- * @beta
+ * @public
  */
 export declare const MapView: ((props: React.PropsWithChildren<MapViewProps> & React.RefAttributes<MapViewRef>) => React.ReactElement | null) & {
     ErrorState: (props: import("./slots/states/ErrorStateSlot.js").ErrorStateSlotProps) => null;

package/map/MapView.js

@@ -64,22 +64,25 @@ const _MapView = (0, import_react.forwardRef)(
       truncationMode,
       ...remaining
     } = props;
-    const { layerIds, parsedChildren, valueAccessor } = (0, import_set_layers_id.setLayersId)(children);
-    const { flattenData: layersData, categories } = (0, import_extract_layers_data.extractLayersData)(
-      parsedChildren,
-      valueAccessor
-    );
-    const config = (0, import_iterate_config_slots.iterateConfigSlots)(children);
+    const { layerIds, parsedChildren, valueAccessors } = (0, import_set_layers_id.setLayersId)(children);
+    const {
+      flattenData: layersData,
+      categories,
+      legendDomain
+    } = (0, import_extract_layers_data.extractLayersData)(parsedChildren, valueAccessors);
+    const config = (0, import_iterate_config_slots.iterateConfigSlots)(children, legendDomain);
     const isLegendHidden = !config.legend || !!config.legend.hidden;
     const legendPosition = config.legend?.position;
     const legendRatio = config.legend?.ratio;
     const legendOnRatioChange = config.legend?.onRatioChange;
-    const { isMapEnabled, isLoading, baseFeatureCollection, error } = (0, import_use_load_map_base_layer.useLoadMapBaseLayer)(config.baseLayer);
+    const { isMapEnabled, isFetchingFeatures, baseFeatureCollection, error } = (0, import_use_load_map_base_layer.useLoadMapBaseLayer)(config.baseLayer);
+    const [isMapLoaded, setIsMapLoaded] = (0, import_react.useState)(false);
     const { errorState } = (0, import_get_map_states_template.getMapStatesTemplates)(children);
     const chartHeight = (0, import_charts._coerceSizeValue)(props.height) || import_constants.DEFAULT_MAP_HEIGHT;
     const containerStyles = { width: "100%", ...costumerStyle };
     const chartLayoutRef = (0, import_charts._useAutoLegendRefresh)(layersData);
-    const mapUnavailable = !isLoading && !isMapEnabled || error;
+    const mapUnavailable = !isFetchingFeatures && !isMapEnabled || error;
+    const isLoading = isFetchingFeatures || !isMapLoaded;
     return /* @__PURE__ */ import_react.default.createElement(
       "div",
       {
@@ -91,7 +94,7 @@ const _MapView = (0, import_react.forwardRef)(
       mapUnavailable ? /* @__PURE__ */ import_react.default.createElement(
         import_MapUnavailable.MapUnavailable,
         {
-          isLoading,
+          isFetchingFeatures,
           isDisabled: !isMapEnabled,
           chartHeight,
           error
@@ -118,6 +121,7 @@ const _MapView = (0, import_react.forwardRef)(
               import_MapContent.MapContent,
               {
                 ref: forwardedRef,
+                onMapLoad: () => setIsMapLoaded(true),
                 ...remaining
               },
               parsedChildren

package/map/components/BubbleLayer/BubbleCircleLayer.js

@@ -30,8 +30,8 @@ __export(BubbleCircleLayer_exports, {
   BubbleCircleLayer: () => BubbleCircleLayer
 });
 module.exports = __toCommonJS(BubbleCircleLayer_exports);
+var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_react = __toESM(require("react"));
-var import_maplibre = require("react-map-gl/maplibre");
 var import_use_size_interpolation = require("./hooks/use-size-interpolation.js");
 var import_build_stick_to_distance_expressions = require("./utils/build-stick-to-distance-expressions.js");
 var import_constants = require("../../constants.js");
@@ -42,7 +42,7 @@ const BubbleCircleLayer = ({
   const sizeInterpolation = (0, import_use_size_interpolation.useSizeInterpolation)();
   const radiusExpression = sizeInterpolation === "fixed" ? import_constants.DEFAULT_RADIUS_EXPRESSION : (0, import_build_stick_to_distance_expressions.buildCircleStickToDistanceExpression)();
   return /* @__PURE__ */ import_react.default.createElement(
-    import_maplibre.Layer,
+    import_react_maplibre.Layer,
     {
       type: "circle",
       id,
@@ -59,7 +59,7 @@ const BubbleCircleLayer = ({
           "case",
           ["boolean", ["feature-state", "legendHover"], true],
           import_constants.BUBBLE_DEFAULT_OPACITY,
-          import_constants.LEGEND_DIM_OPACITY
+          import_constants.SHAPE_OPACITY_DIMMED
         ],
         "circle-stroke-width": import_constants.BUBBLE_STROKE,
         "circle-stroke-color": [
@@ -71,8 +71,8 @@ const BubbleCircleLayer = ({
         "circle-stroke-opacity": [
           "case",
           ["boolean", ["feature-state", "legendHover"], true],
-          import_constants.SHAPE_OPACITY,
-          import_constants.LEGEND_DIM_OPACITY
+          import_constants.SHAPE_OPACITY_DEFAULT,
+          import_constants.SHAPE_OPACITY_DIMMED
         ]
       }
     }

package/map/components/BubbleLayer/BubbleLayer.js

@@ -30,8 +30,8 @@ __export(BubbleLayer_exports, {
   BubbleLayer: () => BubbleLayer
 });
 module.exports = __toCommonJS(BubbleLayer_exports);
+var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_react = __toESM(require("react"));
-var import_maplibre = require("react-map-gl/maplibre");
 var import_BubbleCircleLayer = require("./BubbleCircleLayer.js");
 var import_BubbleLayerTooltip = require("./BubbleLayerTooltip.js");
 var import_BubbleOutlineLayer = require("./BubbleOutlineLayer.js");
@@ -76,7 +76,7 @@ const BubbleLayer = (props) => {
     radiusScale
   );
   const tooltipTemplate = (0, import_use_tooltip_template.useTooltipTemplate)(children, import_BubbleLayerTooltip2.BubbleLayerTooltip);
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_size_interpolation_context.SizeInterpolationContext.Provider, { value: sizeInterpolation }, /* @__PURE__ */ import_react.default.createElement(import_maplibre.Source, { id: sourceId, type: "geojson", data: dataGeoJson, generateId: true }, /* @__PURE__ */ import_react.default.createElement(import_BubbleCircleLayer.BubbleCircleLayer, { id: layerId, source: sourceId }), /* @__PURE__ */ import_react.default.createElement(import_BubbleOutlineLayer.BubbleOutlineLayer, { beforeId: layerId, source: sourceId }))), /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_size_interpolation_context.SizeInterpolationContext.Provider, { value: sizeInterpolation }, /* @__PURE__ */ import_react.default.createElement(import_react_maplibre.Source, { id: sourceId, type: "geojson", data: dataGeoJson, generateId: true }, /* @__PURE__ */ import_react.default.createElement(import_BubbleCircleLayer.BubbleCircleLayer, { id: layerId, source: sourceId }), /* @__PURE__ */ import_react.default.createElement(import_BubbleOutlineLayer.BubbleOutlineLayer, { beforeId: layerId, source: sourceId }))), /* @__PURE__ */ import_react.default.createElement(
     import_BubbleLayerTooltip.BubbleLayerTooltip,
     {
       layerId,

package/map/components/BubbleLayer/BubbleOutlineLayer.js

@@ -30,8 +30,8 @@ __export(BubbleOutlineLayer_exports, {
   BubbleOutlineLayer: () => BubbleOutlineLayer
 });
 module.exports = __toCommonJS(BubbleOutlineLayer_exports);
+var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_react = __toESM(require("react"));
-var import_maplibre = require("react-map-gl/maplibre");
 var import_charts = require("@dynatrace/strato-components-preview/charts");
 var import_use_size_interpolation = require("./hooks/use-size-interpolation.js");
 var import_add_outline_size = require("./utils/add-outline-size.js");
@@ -47,7 +47,7 @@ const BubbleOutlineLayer = ({
   const sizeInterpolation = (0, import_use_size_interpolation.useSizeInterpolation)();
   const outlineRadiusExpression = sizeInterpolation === "fixed" ? DEFAULT_OUTLINE_RADIUS_EXPRESSION : (0, import_build_stick_to_distance_expressions.buildOutlineStickToDistanceExpression)();
   return /* @__PURE__ */ import_react.default.createElement(
-    import_maplibre.Layer,
+    import_react_maplibre.Layer,
     {
       type: "circle",
       beforeId,

package/map/components/BubbleLayer/utils/parse-bubble-data-to-geo-json.d.ts

@@ -1,22 +1,6 @@
 import type { ScaleLinear, ScaleLogarithmic } from 'd3-scale';
+import type GeoJSON from 'geojson';
 import type { Location } from '../../../types/location.js';
 type RadiusScale = ScaleLinear<number, number> | ScaleLogarithmic<number, number> | ((value: number) => number);
-export declare const parseBubbleDataToGeoJSON: <T extends Location>(data: T[], color: string | ((item: T) => string), radius: number | ((item: T) => number), scale: RadiusScale) => {
-    type: string;
-    features: {
-        type: string;
-        properties: {
-            data: T;
-        } & Omit<T, "latitude" | "longitude"> & {
-            __color: string;
-            __hoveredColor: string;
-            __radius: number;
-            __lat: number;
-        };
-        geometry: {
-            type: string;
-            coordinates: number[];
-        };
-    }[];
-};
+export declare const parseBubbleDataToGeoJSON: <T extends Location>(data: T[], color: string | ((item: T) => string), radius: number | ((item: T) => number), scale: RadiusScale) => GeoJSON.FeatureCollection;
 export {};

package/map/components/ChoroplethLayer/ChoroplethLayer.d.ts

@@ -1,6 +1,6 @@
 import React, { type PropsWithChildren } from 'react';
 import type { InternalChoroplethLayerProps } from '../../types/choropleth-layer.js';
 export declare const ChoroplethLayer: {
-    <T extends Record<string, unknown>>(props: PropsWithChildren<InternalChoroplethLayerProps<T>>): React.JSX.Element;
+    <T extends Record<string, unknown>>(props: PropsWithChildren<InternalChoroplethLayerProps<T>>): React.JSX.Element | undefined;
     displayName: string;
 };

package/map/components/ChoroplethLayer/ChoroplethLayer.js

@@ -30,8 +30,8 @@ __export(ChoroplethLayer_exports, {
   ChoroplethLayer: () => ChoroplethLayer
 });
 module.exports = __toCommonJS(ChoroplethLayer_exports);
+var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_react = __toESM(require("react"));
-var import_maplibre = require("react-map-gl/maplibre");
 var import_charts = require("@dynatrace/strato-components-preview/charts");
 var import_ChoroplethLayerTooltip = require("./ChoroplethLayerTooltip.js");
 var import_parse_region_data_to_geo_json = require("./utils/parse-region-data-to-geo-json.js");
@@ -61,51 +61,71 @@ const ChoroplethLayer = (props) => {
     children,
     import_ChoroplethLayerTooltip2.ChoroplethLayerTooltip
   );
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_maplibre.Source, { id: sourceId, type: "geojson", data: dataGeoJSON, generateId: true }, /* @__PURE__ */ import_react.default.createElement(
-    import_maplibre.Layer,
+  return dataGeoJSON && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_react_maplibre.Source, { id: sourceId, type: "geojson", data: dataGeoJSON, generateId: true }, /* @__PURE__ */ import_react.default.createElement(
+    import_react_maplibre.Layer,
     {
       id: layerId,
-      type: "fill",
       source: sourceId,
+      type: "fill",
       paint: {
-        "fill-color": [
-          "case",
-          ["boolean", ["feature-state", "active"], false],
-          ["get", "__color"],
-          ["boolean", ["feature-state", "hover"], false],
-          ["get", "__hoveredColor"],
-          ["get", "__color"]
-        ],
+        "fill-color": ["get", "__color"],
         "fill-opacity": [
           "case",
-          ["boolean", ["feature-state", "legendHover"], true],
-          import_constants.SHAPE_OPACITY,
-          import_constants.LEGEND_DIM_OPACITY
+          ["==", ["feature-state", "legendHover"], false],
+          import_constants.SHAPE_OPACITY_DIMMED,
+          ["==", ["feature-state", "active"], true],
+          import_constants.SHAPE_OPACITY_DEFAULT,
+          ["==", ["feature-state", "hover"], true],
+          import_constants.SHAPE_OPACITY_DEFAULT,
+          ["==", ["feature-state", "legendHover"], true],
+          import_constants.SHAPE_OPACITY_DEFAULT,
+          ["==", ["feature-state", "isAnyActive"], true],
+          import_constants.SHAPE_OPACITY_DIMMED,
+          import_constants.SHAPE_OPACITY_DEFAULT
         ]
       }
     }
   ), /* @__PURE__ */ import_react.default.createElement(
-    import_maplibre.Layer,
+    import_react_maplibre.Layer,
     {
-      type: "line",
       source: sourceId,
+      type: "line",
       paint: {
-        "line-color": (0, import_charts._getCanvasColor)(import_constants.DEFAULT_COUNTRIES_BORDER_COLOR)
+        "line-color": [
+          "case",
+          ["==", ["feature-state", "active"], true],
+          (0, import_charts._getCanvasColor)(import_constants.DEFAULT_BOUNDARIES_BORDER_COLOR),
+          ["==", ["feature-state", "hover"], true],
+          (0, import_charts._getCanvasColor)(import_constants.DEFAULT_BOUNDARIES_BORDER_COLOR),
+          (0, import_charts._getCanvasColor)(import_constants.DEFAULT_BOUNDARIES_BORDER_COLOR)
+        ],
+        "line-width": [
+          "case",
+          ["==", ["feature-state", "active"], true],
+          import_constants.ACTIVE_BORDER_WIDTH_OUTER,
+          ["==", ["feature-state", "hover"], true],
+          import_constants.ACTIVE_BORDER_WIDTH_OUTER,
+          ["==", ["get", "region_type"], "REGION"],
+          import_constants.REGION_BORDER_WIDTH,
+          import_constants.COUNTRY_BORDER_WIDTH
+        ]
       }
     }
   ), /* @__PURE__ */ import_react.default.createElement(
-    import_maplibre.Layer,
+    import_react_maplibre.Layer,
     {
-      type: "line",
       source: sourceId,
+      type: "line",
       paint: {
         "line-color": [
           "case",
-          ["boolean", ["feature-state", "active"], false],
+          ["==", ["feature-state", "active"], true],
+          (0, import_charts._getCanvasColor)(import_constants.ACTIVE_COLOR),
+          ["==", ["feature-state", "hover"], true],
           (0, import_charts._getCanvasColor)(import_constants.ACTIVE_COLOR),
           (0, import_charts._getCanvasColor)(import_constants.TRANSPARENT_BORDER_COLOR)
         ],
-        "line-width": import_constants.ACTIVE_STATE_BORDERS_WIDTH
+        "line-width": import_constants.ACTIVE_BORDER_WIDTH_INNER
       }
     }
   )), /* @__PURE__ */ import_react.default.createElement(