@dynatrace/strato-geo 1.6.1 → 1.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm/map/components/BubbleLayer/BubbleLayerTooltip.js +4 -2
- package/esm/map/components/BubbleLayer/BubbleLayerTooltip.js.map +2 -2
- package/esm/map/components/DefaultTooltip/utils/get-default-actions.js.map +1 -1
- package/esm/map/components/toolbar/buttons/MapDownloadDataButton.js.map +2 -2
- package/esm/map/components/toolbar/buttons/MapResetButton.js.map +2 -2
- package/esm/map/components/toolbar/buttons/MapZoomInOutButtons.js.map +2 -2
- package/esm/map/components/toolbar/buttons/MapZoomToFitButton.js.map +2 -2
- package/esm/map/hooks/use-active-interaction.js +4 -2
- package/esm/map/hooks/use-active-interaction.js.map +2 -2
- package/esm/map/hooks/use-hover-interaction.js +4 -2
- package/esm/map/hooks/use-hover-interaction.js.map +2 -2
- package/esm/map/utils/get-min-value-feature.js +6 -0
- package/esm/map/utils/get-min-value-feature.js.map +7 -0
- package/esm/map/utils/is-slot.js.map +2 -2
- package/esm/map/utils/set-layers-id.js +5 -2
- package/esm/map/utils/set-layers-id.js.map +2 -2
- package/map/components/BubbleLayer/BubbleLayerTooltip.js +4 -2
- package/map/hooks/use-active-interaction.js +4 -2
- package/map/hooks/use-hover-interaction.js +4 -2
- package/map/types/tooltip.d.ts +5 -4
- package/map/utils/get-min-value-feature.d.ts +2 -0
- package/map/utils/get-min-value-feature.js +25 -0
- package/map/utils/is-slot.d.ts +2 -2
- package/map/utils/set-layers-id.d.ts +3 -3
- package/map/utils/set-layers-id.js +2 -12
- package/package.json +3 -3
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { sortBy } from "lodash-es";
|
|
2
3
|
import { useRef } from "react";
|
|
3
4
|
import {
|
|
4
5
|
_ChartTooltip as ChartTooltip,
|
|
@@ -38,8 +39,9 @@ const BubbleLayerTooltip = (props) => {
|
|
|
38
39
|
data: customData
|
|
39
40
|
};
|
|
40
41
|
});
|
|
41
|
-
|
|
42
|
-
|
|
42
|
+
const sortedBubbles = sortBy(sanitizedData, ({ radius }) => radius);
|
|
43
|
+
closestPoint.current = sortedBubbles[0];
|
|
44
|
+
remainingPoints.current = sortedBubbles.slice(1);
|
|
43
45
|
}
|
|
44
46
|
return /* @__PURE__ */ jsx(
|
|
45
47
|
ChartTooltip,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/map/components/BubbleLayer/BubbleLayerTooltip.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useRef } from 'react';\n\nimport {\n _ChartTooltip as ChartTooltip,\n _useChartActionsMenu as useChartActionsMenu,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport {\n useMapTooltipPinnedState,\n useMapTooltipState,\n} from '../../store/selectors.js';\nimport type { Location } from '../../types/location.js';\nimport type {\n BubbleLayerTooltipData,\n BubbleLayerTooltipHandler,\n} from '../../types/tooltip.js';\n\ninterface BubbleTooltipStatePayload {\n __color: string;\n __hoveredColor: string;\n __radius: number;\n __lat: number;\n data: Location;\n}\n\nexport interface BubbleLayerTooltipProps {\n layerId: string;\n tooltipTemplate?: BubbleLayerTooltipHandler;\n}\n\nexport const BubbleLayerTooltip = (props: BubbleLayerTooltipProps) => {\n const { layerId, tooltipTemplate } = props;\n const {\n selectedItem: selectedItemId,\n actionsMenuRef,\n updateSelectedItem,\n onLeave,\n } = useChartActionsMenu();\n\n const tooltipRef = useRef<HTMLDivElement | null>(null);\n const { hoveredLayerId, data, position, visible, enabled } =\n useMapTooltipState<BubbleTooltipStatePayload>();\n const pinned = useMapTooltipPinnedState();\n\n const closestPoint = useRef<BubbleLayerTooltipData | null>(null);\n const remainingPoints = useRef<BubbleLayerTooltipData[]>([]);\n\n const forceHideTooltip =\n !pinned && (hoveredLayerId !== layerId || !visible || !enabled);\n\n if (!tooltipTemplate || forceHideTooltip || !position) {\n return null;\n }\n\n if (!pinned && data?.[0]) {\n const sanitizedData = data.map((bubbleProps) => {\n const {\n __color: color,\n __radius: radius,\n data: customData,\n } = bubbleProps;\n\n return {\n color,\n radius,\n data: customData,\n };\n });\n\n closestPoint.current =
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { sortBy } from 'lodash-es';\nimport { useRef } from 'react';\n\nimport {\n _ChartTooltip as ChartTooltip,\n _useChartActionsMenu as useChartActionsMenu,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport {\n useMapTooltipPinnedState,\n useMapTooltipState,\n} from '../../store/selectors.js';\nimport type { Location } from '../../types/location.js';\nimport type {\n BubbleLayerTooltipData,\n BubbleLayerTooltipHandler,\n} from '../../types/tooltip.js';\n\ninterface BubbleTooltipStatePayload {\n __color: string;\n __hoveredColor: string;\n __radius: number;\n __lat: number;\n data: Location;\n}\n\nexport interface BubbleLayerTooltipProps {\n layerId: string;\n tooltipTemplate?: BubbleLayerTooltipHandler;\n}\n\nexport const BubbleLayerTooltip = (props: BubbleLayerTooltipProps) => {\n const { layerId, tooltipTemplate } = props;\n const {\n selectedItem: selectedItemId,\n actionsMenuRef,\n updateSelectedItem,\n onLeave,\n } = useChartActionsMenu();\n\n const tooltipRef = useRef<HTMLDivElement | null>(null);\n const { hoveredLayerId, data, position, visible, enabled } =\n useMapTooltipState<BubbleTooltipStatePayload>();\n const pinned = useMapTooltipPinnedState();\n\n const closestPoint = useRef<BubbleLayerTooltipData | null>(null);\n const remainingPoints = useRef<BubbleLayerTooltipData[]>([]);\n\n const forceHideTooltip =\n !pinned && (hoveredLayerId !== layerId || !visible || !enabled);\n\n if (!tooltipTemplate || forceHideTooltip || !position) {\n return null;\n }\n\n if (!pinned && data?.[0]) {\n const sanitizedData = data.map((bubbleProps) => {\n const {\n __color: color,\n __radius: radius,\n data: customData,\n } = bubbleProps;\n\n return {\n color,\n radius,\n data: customData,\n };\n });\n\n const sortedBubbles = sortBy(sanitizedData, ({ radius }) => radius);\n closestPoint.current = sortedBubbles[0];\n remainingPoints.current = sortedBubbles.slice(1);\n }\n\n return (\n <ChartTooltip\n position={position}\n pinned={pinned}\n ref={tooltipRef}\n onMouseLeave={onLeave}\n actionSelectionValue={{\n selectedItemId,\n actionsMenuRef,\n updateSelectedItem,\n }}\n >\n {closestPoint.current\n ? tooltipTemplate(closestPoint.current, remainingPoints.current)\n : null}\n </ChartTooltip>\n );\n};\n\nBubbleLayerTooltip['displayName'] = 'BubbleLayerTooltip';\n"],
|
|
5
|
+
"mappings": "AA4EI;AA5EJ,SAAS,cAAc;AACvB,SAAS,cAAc;AAEvB;AAAA,EACE,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,OACnB;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAoBA,MAAM,qBAAqB,CAAC,UAAmC;AACpE,QAAM,EAAE,SAAS,gBAAgB,IAAI;AACrC,QAAM;AAAA,IACJ,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AAExB,QAAM,aAAa,OAA8B,IAAI;AACrD,QAAM,EAAE,gBAAgB,MAAM,UAAU,SAAS,QAAQ,IACvD,mBAA8C;AAChD,QAAM,SAAS,yBAAyB;AAExC,QAAM,eAAe,OAAsC,IAAI;AAC/D,QAAM,kBAAkB,OAAiC,CAAC,CAAC;AAE3D,QAAM,mBACJ,CAAC,WAAW,mBAAmB,WAAW,CAAC,WAAW,CAAC;AAEzD,MAAI,CAAC,mBAAmB,oBAAoB,CAAC,UAAU;AACrD,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,UAAU,OAAO,CAAC,GAAG;AACxB,UAAM,gBAAgB,KAAK,IAAI,CAAC,gBAAgB;AAC9C,YAAM;AAAA,QACJ,SAAS;AAAA,QACT,UAAU;AAAA,QACV,MAAM;AAAA,MACR,IAAI;AAEJ,aAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,MAAM;AAAA,MACR;AAAA,IACF,CAAC;AAED,UAAM,gBAAgB,OAAO,eAAe,CAAC,EAAE,OAAO,MAAM,MAAM;AAClE,iBAAa,UAAU,cAAc,CAAC;AACtC,oBAAgB,UAAU,cAAc,MAAM,CAAC;AAAA,EACjD;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,KAAK;AAAA,MACL,cAAc;AAAA,MACd,sBAAsB;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC,uBAAa,UACV,gBAAgB,aAAa,SAAS,gBAAgB,OAAO,IAC7D;AAAA;AAAA,EACN;AAEJ;AAEA,mBAAmB,aAAa,IAAI;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/map/components/DefaultTooltip/utils/get-default-actions.tsx"],
|
|
4
|
-
"sourcesContent": ["import
|
|
4
|
+
"sourcesContent": ["import { type PropsWithChildren, type ReactElement } from 'react';\nimport { FormattedMessage } from 'react-intl';\n\nimport { ChartSeriesAction } from '@dynatrace/strato-components-preview/charts';\nimport { CopyIcon } from '@dynatrace/strato-icons';\n\nimport { COPY_TO_CLIPBOARD_MESSAGES } from '../../../constants.js';\n\nexport const getDefaultActions = (\n onSelectCallback: () => void,\n): ReactElement<PropsWithChildren> => (\n <ChartSeriesAction>\n <ChartSeriesAction.Item key={'default-action'} onSelect={onSelectCallback}>\n <ChartSeriesAction.ItemIcon>\n <CopyIcon />\n </ChartSeriesAction.ItemIcon>\n <FormattedMessage {...COPY_TO_CLIPBOARD_MESSAGES.copyActionCoords} />\n </ChartSeriesAction.Item>\n </ChartSeriesAction>\n);\n"],
|
|
5
5
|
"mappings": "AAYI,SAEI,KAFJ;AAXJ,SAAS,wBAAwB;AAEjC,SAAS,yBAAyB;AAClC,SAAS,gBAAgB;AAEzB,SAAS,kCAAkC;AAEpC,MAAM,oBAAoB,CAC/B,qBAEA,oBAAC,qBACC,+BAAC,kBAAkB,MAAlB,EAA8C,UAAU,kBACvD;AAAA,sBAAC,kBAAkB,UAAlB,EACC,8BAAC,YAAS,GACZ;AAAA,EACA,oBAAC,oBAAkB,GAAG,2BAA2B,kBAAkB;AAAA,KAJxC,gBAK7B,GACF;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/map/components/toolbar/buttons/MapDownloadDataButton.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { DownloadIcon } from '@dynatrace/strato-icons';\n\nimport { useMapRawData } from '../../../hooks/use-map-raw-data.js';\nimport { buildAndDownloadCsv } from '../../../utils/build-and-download-csv.js';\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\nexport const MapDownloadDataButton = () => {\n const downloadDataButtonRef = useRef<HTMLButtonElement>(null);\n const intl = useIntl();\n const tabIndex = useA11yToolbarTabIndex('download-data');\n const data = useMapRawData();\n\n /** Handles the download button when event keydown.*/\n const handleDownloadDataKeyboard = (event: ReactKeyboardEvent) => {\n if (event.key === 'Enter') {\n buildAndDownloadCsv(data);\n }\n };\n\n /** Handles the download button when clicked. */\n const handleDownloadDataToolbar = () => {\n buildAndDownloadCsv(data);\n };\n\n return (\n <ChartToolbarRenderer.Control\n ref={downloadDataButtonRef}\n prefixIcon={<DownloadIcon />}\n tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.downloadData)}\n testId=\"map-toolbar-download\"\n onKeyDown={handleDownloadDataKeyboard}\n onClick={handleDownloadDataToolbar}\n tabIndex={tabIndex}\n placement=\"toolbar\"\n />\n );\n};\n"],
|
|
5
|
-
"mappings": "AAgCkB;AAhClB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,oBAAoB;AAE7B,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAEhC,MAAM,wBAAwB,MAAM;AACzC,QAAM,wBAAwB,
|
|
4
|
+
"sourcesContent": ["import { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { DownloadIcon } from '@dynatrace/strato-icons';\n\nimport { useMapRawData } from '../../../hooks/use-map-raw-data.js';\nimport { buildAndDownloadCsv } from '../../../utils/build-and-download-csv.js';\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\nexport const MapDownloadDataButton = () => {\n const downloadDataButtonRef = useRef<HTMLButtonElement | null>(null);\n const intl = useIntl();\n const tabIndex = useA11yToolbarTabIndex('download-data');\n const data = useMapRawData();\n\n /** Handles the download button when event keydown.*/\n const handleDownloadDataKeyboard = (event: ReactKeyboardEvent) => {\n if (event.key === 'Enter') {\n buildAndDownloadCsv(data);\n }\n };\n\n /** Handles the download button when clicked. */\n const handleDownloadDataToolbar = () => {\n buildAndDownloadCsv(data);\n };\n\n return (\n <ChartToolbarRenderer.Control\n ref={downloadDataButtonRef}\n prefixIcon={<DownloadIcon />}\n tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.downloadData)}\n testId=\"map-toolbar-download\"\n onKeyDown={handleDownloadDataKeyboard}\n onClick={handleDownloadDataToolbar}\n tabIndex={tabIndex}\n placement=\"toolbar\"\n />\n );\n};\n"],
|
|
5
|
+
"mappings": "AAgCkB;AAhClB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,oBAAoB;AAE7B,SAAS,qBAAqB;AAC9B,SAAS,2BAA2B;AACpC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAEhC,MAAM,wBAAwB,MAAM;AACzC,QAAM,wBAAwB,OAAiC,IAAI;AACnE,QAAM,OAAO,QAAQ;AACrB,QAAM,WAAW,uBAAuB,eAAe;AACvD,QAAM,OAAO,cAAc;AAG3B,QAAM,6BAA6B,CAAC,UAA8B;AAChE,QAAI,MAAM,QAAQ,SAAS;AACzB,0BAAoB,IAAI;AAAA,IAC1B;AAAA,EACF;AAGA,QAAM,4BAA4B,MAAM;AACtC,wBAAoB,IAAI;AAAA,EAC1B;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,gBAAa;AAAA,MAC1B,aAAa,KAAK,cAAc,iBAAiB,YAAY;AAAA,MAC7D,QAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,WAAU;AAAA;AAAA,EACZ;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/map/components/toolbar/buttons/MapResetButton.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { ResetIcon } from '@dynatrace/strato-icons';\n\nimport { useInitialViewContext } from '../../../hooks/use-initial-view-context.js';\nimport { useMapZoomState, useSetStateZoom } from '../../../store/store.js';\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\nexport const MapResetButton = () => {\n const { current: map } = useMap();\n const { longitude = 0, latitude = 0, zoom = 0 } = useInitialViewContext();\n const intl = useIntl();\n const { resetEnabled } = useMapZoomState();\n const setZoomState = useSetStateZoom();\n\n const resetButtonRef = useRef<HTMLButtonElement>(null);\n const tabIndex = useA11yToolbarTabIndex('reset');\n\n const handleReset = () => {\n map?.flyTo({ center: [longitude, latitude], zoom: zoom });\n setZoomState({ zoomToFitEnabled: true, resetEnabled: false });\n };\n\n const handleKeyDown = (event: ReactKeyboardEvent) => {\n if (event.code === 'Enter') {\n handleReset();\n }\n };\n\n return (\n <ChartToolbarRenderer.Control\n ref={resetButtonRef}\n prefixIcon={<ResetIcon />}\n tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionReset)}\n testId=\"map-toolbar-reset\"\n onKeyDown={handleKeyDown}\n onClick={handleReset}\n tabIndex={tabIndex}\n disabled={!resetEnabled}\n />\n );\n};\n"],
|
|
5
|
-
"mappings": "AAoCkB;AApClB,SAAS,cAAc;AACvB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,iBAAiB;AAE1B,SAAS,6BAA6B;AACtC,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAEhC,MAAM,iBAAiB,MAAM;AAClC,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,EAAE,YAAY,GAAG,WAAW,GAAG,OAAO,EAAE,IAAI,sBAAsB;AACxE,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,aAAa,IAAI,gBAAgB;AACzC,QAAM,eAAe,gBAAgB;AAErC,QAAM,iBAAiB,
|
|
4
|
+
"sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { ResetIcon } from '@dynatrace/strato-icons';\n\nimport { useInitialViewContext } from '../../../hooks/use-initial-view-context.js';\nimport { useMapZoomState, useSetStateZoom } from '../../../store/store.js';\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\nexport const MapResetButton = () => {\n const { current: map } = useMap();\n const { longitude = 0, latitude = 0, zoom = 0 } = useInitialViewContext();\n const intl = useIntl();\n const { resetEnabled } = useMapZoomState();\n const setZoomState = useSetStateZoom();\n\n const resetButtonRef = useRef<HTMLButtonElement | null>(null);\n const tabIndex = useA11yToolbarTabIndex('reset');\n\n const handleReset = () => {\n map?.flyTo({ center: [longitude, latitude], zoom: zoom });\n setZoomState({ zoomToFitEnabled: true, resetEnabled: false });\n };\n\n const handleKeyDown = (event: ReactKeyboardEvent) => {\n if (event.code === 'Enter') {\n handleReset();\n }\n };\n\n return (\n <ChartToolbarRenderer.Control\n ref={resetButtonRef}\n prefixIcon={<ResetIcon />}\n tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionReset)}\n testId=\"map-toolbar-reset\"\n onKeyDown={handleKeyDown}\n onClick={handleReset}\n tabIndex={tabIndex}\n disabled={!resetEnabled}\n />\n );\n};\n"],
|
|
5
|
+
"mappings": "AAoCkB;AApClB,SAAS,cAAc;AACvB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,iBAAiB;AAE1B,SAAS,6BAA6B;AACtC,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAEhC,MAAM,iBAAiB,MAAM;AAClC,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,EAAE,YAAY,GAAG,WAAW,GAAG,OAAO,EAAE,IAAI,sBAAsB;AACxE,QAAM,OAAO,QAAQ;AACrB,QAAM,EAAE,aAAa,IAAI,gBAAgB;AACzC,QAAM,eAAe,gBAAgB;AAErC,QAAM,iBAAiB,OAAiC,IAAI;AAC5D,QAAM,WAAW,uBAAuB,OAAO;AAE/C,QAAM,cAAc,MAAM;AACxB,SAAK,MAAM,EAAE,QAAQ,CAAC,WAAW,QAAQ,GAAG,KAAW,CAAC;AACxD,iBAAa,EAAE,kBAAkB,MAAM,cAAc,MAAM,CAAC;AAAA,EAC9D;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,SAAS,SAAS;AAC1B,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,aAAU;AAAA,MACvB,aAAa,KAAK,cAAc,iBAAiB,eAAe;AAAA,MAChE,QAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,UAAU,CAAC;AAAA;AAAA,EACb;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/map/components/toolbar/buttons/MapZoomInOutButtons.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { ZoomInIcon, ZoomOutIcon } from '@dynatrace/strato-icons';\n\nimport { useMapZoomState } from '../../../store/selectors.js';\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\ntype ZoomBehavior = 'zoom-in' | 'zoom-out';\nexport const MapZoomInOutButtons = () => {\n const { current: map } = useMap();\n const { zoomInEnabled, zoomOutEnabled } = useMapZoomState();\n\n const zoomInButtonRef = useRef<HTMLButtonElement>(null);\n const zoomButtonOutRef = useRef<HTMLButtonElement>(null);\n const intl = useIntl();\n const tabIndexIn = useA11yToolbarTabIndex('zoom-in');\n const tabIndexOut = useA11yToolbarTabIndex('zoom-out');\n\n const handleZoomKeyboardMode = (\n event: ReactKeyboardEvent,\n zoomBehavior: ZoomBehavior,\n ) => {\n if (event.code === 'Enter') {\n handleZoomStepToolbarMode(zoomBehavior);\n }\n };\n\n const handleZoomStepToolbarMode = (zoomBehavior: ZoomBehavior) => {\n if (zoomBehavior === 'zoom-in') {\n map?.zoomIn();\n }\n if (zoomBehavior === 'zoom-out') {\n map?.zoomOut();\n }\n };\n\n return (\n <>\n <ChartToolbarRenderer.Control\n ref={zoomInButtonRef}\n prefixIcon={<ZoomInIcon />}\n tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionZoomIn)}\n testId=\"map-toolbar-zoom-in\"\n onKeyDown={(event) => handleZoomKeyboardMode(event, 'zoom-in')}\n onClick={() => handleZoomStepToolbarMode('zoom-in')}\n tabIndex={tabIndexIn}\n disabled={!zoomInEnabled}\n />\n <ChartToolbarRenderer.Control\n ref={zoomButtonOutRef}\n prefixIcon={<ZoomOutIcon />}\n tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionZoomOut)}\n testId=\"map-toolbar-zoom-out\"\n onKeyDown={(event) => handleZoomKeyboardMode(event, 'zoom-out')}\n onClick={() => handleZoomStepToolbarMode('zoom-out')}\n tabIndex={tabIndexOut}\n disabled={!zoomOutEnabled}\n />\n </>\n );\n};\n"],
|
|
5
|
-
"mappings": "AAyCI,mBAGgB,KAHhB;AAzCJ,SAAS,cAAc;AACvB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,YAAY,mBAAmB;AAExC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAGhC,MAAM,sBAAsB,MAAM;AACvC,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,EAAE,eAAe,eAAe,IAAI,gBAAgB;AAE1D,QAAM,kBAAkB,
|
|
4
|
+
"sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { ZoomInIcon, ZoomOutIcon } from '@dynatrace/strato-icons';\n\nimport { useMapZoomState } from '../../../store/selectors.js';\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\ntype ZoomBehavior = 'zoom-in' | 'zoom-out';\nexport const MapZoomInOutButtons = () => {\n const { current: map } = useMap();\n const { zoomInEnabled, zoomOutEnabled } = useMapZoomState();\n\n const zoomInButtonRef = useRef<HTMLButtonElement | null>(null);\n const zoomButtonOutRef = useRef<HTMLButtonElement | null>(null);\n const intl = useIntl();\n const tabIndexIn = useA11yToolbarTabIndex('zoom-in');\n const tabIndexOut = useA11yToolbarTabIndex('zoom-out');\n\n const handleZoomKeyboardMode = (\n event: ReactKeyboardEvent,\n zoomBehavior: ZoomBehavior,\n ) => {\n if (event.code === 'Enter') {\n handleZoomStepToolbarMode(zoomBehavior);\n }\n };\n\n const handleZoomStepToolbarMode = (zoomBehavior: ZoomBehavior) => {\n if (zoomBehavior === 'zoom-in') {\n map?.zoomIn();\n }\n if (zoomBehavior === 'zoom-out') {\n map?.zoomOut();\n }\n };\n\n return (\n <>\n <ChartToolbarRenderer.Control\n ref={zoomInButtonRef}\n prefixIcon={<ZoomInIcon />}\n tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionZoomIn)}\n testId=\"map-toolbar-zoom-in\"\n onKeyDown={(event) => handleZoomKeyboardMode(event, 'zoom-in')}\n onClick={() => handleZoomStepToolbarMode('zoom-in')}\n tabIndex={tabIndexIn}\n disabled={!zoomInEnabled}\n />\n <ChartToolbarRenderer.Control\n ref={zoomButtonOutRef}\n prefixIcon={<ZoomOutIcon />}\n tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionZoomOut)}\n testId=\"map-toolbar-zoom-out\"\n onKeyDown={(event) => handleZoomKeyboardMode(event, 'zoom-out')}\n onClick={() => handleZoomStepToolbarMode('zoom-out')}\n tabIndex={tabIndexOut}\n disabled={!zoomOutEnabled}\n />\n </>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAyCI,mBAGgB,KAHhB;AAzCJ,SAAS,cAAc;AACvB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,YAAY,mBAAmB;AAExC,SAAS,uBAAuB;AAChC,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAGhC,MAAM,sBAAsB,MAAM;AACvC,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,EAAE,eAAe,eAAe,IAAI,gBAAgB;AAE1D,QAAM,kBAAkB,OAAiC,IAAI;AAC7D,QAAM,mBAAmB,OAAiC,IAAI;AAC9D,QAAM,OAAO,QAAQ;AACrB,QAAM,aAAa,uBAAuB,SAAS;AACnD,QAAM,cAAc,uBAAuB,UAAU;AAErD,QAAM,yBAAyB,CAC7B,OACA,iBACG;AACH,QAAI,MAAM,SAAS,SAAS;AAC1B,gCAA0B,YAAY;AAAA,IACxC;AAAA,EACF;AAEA,QAAM,4BAA4B,CAAC,iBAA+B;AAChE,QAAI,iBAAiB,WAAW;AAC9B,WAAK,OAAO;AAAA,IACd;AACA,QAAI,iBAAiB,YAAY;AAC/B,WAAK,QAAQ;AAAA,IACf;AAAA,EACF;AAEA,SACE,iCACE;AAAA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,KAAK;AAAA,QACL,YAAY,oBAAC,cAAW;AAAA,QACxB,aAAa,KAAK,cAAc,iBAAiB,gBAAgB;AAAA,QACjE,QAAO;AAAA,QACP,WAAW,CAAC,UAAU,uBAAuB,OAAO,SAAS;AAAA,QAC7D,SAAS,MAAM,0BAA0B,SAAS;AAAA,QAClD,UAAU;AAAA,QACV,UAAU,CAAC;AAAA;AAAA,IACb;AAAA,IACA;AAAA,MAAC,qBAAqB;AAAA,MAArB;AAAA,QACC,KAAK;AAAA,QACL,YAAY,oBAAC,eAAY;AAAA,QACzB,aAAa,KAAK,cAAc,iBAAiB,iBAAiB;AAAA,QAClE,QAAO;AAAA,QACP,WAAW,CAAC,UAAU,uBAAuB,OAAO,UAAU;AAAA,QAC9D,SAAS,MAAM,0BAA0B,UAAU;AAAA,QACnD,UAAU;AAAA,QACV,UAAU,CAAC;AAAA;AAAA,IACb;AAAA,KACF;AAEJ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/map/components/toolbar/buttons/MapZoomToFitButton.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { ZoomToFitIcon } from '@dynatrace/strato-icons';\n\nimport { FIT_BOUNDS_OPTIONS } from '../../../constants.js';\nimport { useDataBoundingBox } from '../../../hooks/use-data-bounding-box.js';\nimport { useMapZoomState, useSetStateZoom } from '../../../store/store.js';\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\nexport const MapZoomToFitButton = () => {\n const resetButtonRef = useRef<HTMLButtonElement>(null);\n const { current: map } = useMap();\n const tabIndex = useA11yToolbarTabIndex('zoom-to-fit');\n const intl = useIntl();\n const boundingBox = useDataBoundingBox();\n const { zoomToFitEnabled } = useMapZoomState();\n const setZoomState = useSetStateZoom();\n const handleZoomToFit = () => {\n map?.fitBounds(boundingBox, FIT_BOUNDS_OPTIONS);\n setZoomState({ zoomToFitEnabled: false, zoomToFitInProgress: true });\n };\n\n const handleKeyDown = (event: ReactKeyboardEvent) => {\n if (event.code === 'Enter') {\n handleZoomToFit();\n }\n };\n\n return (\n <ChartToolbarRenderer.Control\n ref={resetButtonRef}\n prefixIcon={<ZoomToFitIcon />}\n tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionZoomToFit)}\n testId=\"map-toolbar-zoom-to-fit\"\n onKeyDown={handleKeyDown}\n onClick={handleZoomToFit}\n tabIndex={tabIndex}\n disabled={!zoomToFitEnabled}\n />\n );\n};\n\nMapZoomToFitButton['displayName'] = 'MapZoomToFit';\n"],
|
|
5
|
-
"mappings": "AAmCkB;AAnClB,SAAS,cAAc;AACvB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,qBAAqB;AAE9B,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAEhC,MAAM,qBAAqB,MAAM;AACtC,QAAM,iBAAiB,
|
|
4
|
+
"sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { useRef, type KeyboardEvent as ReactKeyboardEvent } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { _ChartToolbarRenderer as ChartToolbarRenderer } from '@dynatrace/strato-components-preview/charts';\nimport { ZoomToFitIcon } from '@dynatrace/strato-icons';\n\nimport { FIT_BOUNDS_OPTIONS } from '../../../constants.js';\nimport { useDataBoundingBox } from '../../../hooks/use-data-bounding-box.js';\nimport { useMapZoomState, useSetStateZoom } from '../../../store/store.js';\nimport { TOOLBAR_MESSAGES } from '../constants.js';\nimport { useA11yToolbarTabIndex } from '../hooks/use-a11y-toolbar-tab-index.js';\n\nexport const MapZoomToFitButton = () => {\n const resetButtonRef = useRef<HTMLButtonElement | null>(null);\n const { current: map } = useMap();\n const tabIndex = useA11yToolbarTabIndex('zoom-to-fit');\n const intl = useIntl();\n const boundingBox = useDataBoundingBox();\n const { zoomToFitEnabled } = useMapZoomState();\n const setZoomState = useSetStateZoom();\n const handleZoomToFit = () => {\n map?.fitBounds(boundingBox, FIT_BOUNDS_OPTIONS);\n setZoomState({ zoomToFitEnabled: false, zoomToFitInProgress: true });\n };\n\n const handleKeyDown = (event: ReactKeyboardEvent) => {\n if (event.code === 'Enter') {\n handleZoomToFit();\n }\n };\n\n return (\n <ChartToolbarRenderer.Control\n ref={resetButtonRef}\n prefixIcon={<ZoomToFitIcon />}\n tooltipText={intl.formatMessage(TOOLBAR_MESSAGES.zoomActionZoomToFit)}\n testId=\"map-toolbar-zoom-to-fit\"\n onKeyDown={handleKeyDown}\n onClick={handleZoomToFit}\n tabIndex={tabIndex}\n disabled={!zoomToFitEnabled}\n />\n );\n};\n\nMapZoomToFitButton['displayName'] = 'MapZoomToFit';\n"],
|
|
5
|
+
"mappings": "AAmCkB;AAnClB,SAAS,cAAc;AACvB,SAAS,cAAwD;AACjE,SAAS,eAAe;AAExB,SAAS,yBAAyB,4BAA4B;AAC9D,SAAS,qBAAqB;AAE9B,SAAS,0BAA0B;AACnC,SAAS,0BAA0B;AACnC,SAAS,iBAAiB,uBAAuB;AACjD,SAAS,wBAAwB;AACjC,SAAS,8BAA8B;AAEhC,MAAM,qBAAqB,MAAM;AACtC,QAAM,iBAAiB,OAAiC,IAAI;AAC5D,QAAM,EAAE,SAAS,IAAI,IAAI,OAAO;AAChC,QAAM,WAAW,uBAAuB,aAAa;AACrD,QAAM,OAAO,QAAQ;AACrB,QAAM,cAAc,mBAAmB;AACvC,QAAM,EAAE,iBAAiB,IAAI,gBAAgB;AAC7C,QAAM,eAAe,gBAAgB;AACrC,QAAM,kBAAkB,MAAM;AAC5B,SAAK,UAAU,aAAa,kBAAkB;AAC9C,iBAAa,EAAE,kBAAkB,OAAO,qBAAqB,KAAK,CAAC;AAAA,EACrE;AAEA,QAAM,gBAAgB,CAAC,UAA8B;AACnD,QAAI,MAAM,SAAS,SAAS;AAC1B,sBAAgB;AAAA,IAClB;AAAA,EACF;AAEA,SACE;AAAA,IAAC,qBAAqB;AAAA,IAArB;AAAA,MACC,KAAK;AAAA,MACL,YAAY,oBAAC,iBAAc;AAAA,MAC3B,aAAa,KAAK,cAAc,iBAAiB,mBAAmB;AAAA,MACpE,QAAO;AAAA,MACP,WAAW;AAAA,MACX,SAAS;AAAA,MACT;AAAA,MACA,UAAU,CAAC;AAAA;AAAA,EACb;AAEJ;AAEA,mBAAmB,aAAa,IAAI;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -2,6 +2,7 @@ import { useMap } from "@vis.gl/react-maplibre";
|
|
|
2
2
|
import { isNil, isUndefined } from "lodash-es";
|
|
3
3
|
import { useCallback, useEffect } from "react";
|
|
4
4
|
import { BASE_LAYER_IDS } from "../constants.js";
|
|
5
|
+
import { getMinValueFeature } from "../utils/get-min-value-feature.js";
|
|
5
6
|
const useActiveInteraction = () => {
|
|
6
7
|
const map = useMap().current;
|
|
7
8
|
let featureId;
|
|
@@ -20,8 +21,9 @@ const useActiveInteraction = () => {
|
|
|
20
21
|
{ active: false }
|
|
21
22
|
);
|
|
22
23
|
}
|
|
23
|
-
|
|
24
|
-
|
|
24
|
+
const minFeature = getMinValueFeature(features);
|
|
25
|
+
featureId = minFeature.id;
|
|
26
|
+
sourceId = minFeature.layer.source;
|
|
25
27
|
const activeState = features[0].state.active;
|
|
26
28
|
map.setFeatureState(
|
|
27
29
|
{ source: sourceId, id: featureId },
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/map/hooks/use-active-interaction.ts"],
|
|
4
|
-
"sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { isNil, isUndefined } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport { useCallback, useEffect } from 'react';\n\nimport { BASE_LAYER_IDS } from '../constants.js';\n\nexport const useActiveInteraction = () => {\n const map = useMap().current!;\n\n let featureId: string | number | undefined;\n let sourceId: string | undefined;\n const handleClick = useCallback(\n ({ point }: MapLayerMouseEvent) => {\n const features = map.queryRenderedFeatures(point);\n const allFeatures = map.queryRenderedFeatures();\n\n const layerId = features?.[0]?.layer?.id;\n\n const hasHoveredFeatures =\n !isNil(features) && features.length > 0 && !isUndefined(layerId);\n const isBaseLayer = BASE_LAYER_IDS.includes(layerId);\n\n if (hasHoveredFeatures && !isBaseLayer) {\n if (!isUndefined(featureId) && !isUndefined(sourceId)) {\n // if there's already an active feature, remove the active state\n map.setFeatureState(\n { source: sourceId, id: featureId },\n { active: false },\n );\n }\n\n featureId =
|
|
5
|
-
"mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,OAAO,mBAAmB;AAEnC,SAAS,aAAa,iBAAiB;AAEvC,SAAS,sBAAsB;
|
|
4
|
+
"sourcesContent": ["import { useMap } from '@vis.gl/react-maplibre';\nimport { isNil, isUndefined } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport { useCallback, useEffect } from 'react';\n\nimport { BASE_LAYER_IDS } from '../constants.js';\nimport { getMinValueFeature } from '../utils/get-min-value-feature.js';\n\nexport const useActiveInteraction = () => {\n const map = useMap().current!;\n\n let featureId: string | number | undefined;\n let sourceId: string | undefined;\n const handleClick = useCallback(\n ({ point }: MapLayerMouseEvent) => {\n const features = map.queryRenderedFeatures(point);\n const allFeatures = map.queryRenderedFeatures();\n\n const layerId = features?.[0]?.layer?.id;\n\n const hasHoveredFeatures =\n !isNil(features) && features.length > 0 && !isUndefined(layerId);\n const isBaseLayer = BASE_LAYER_IDS.includes(layerId);\n\n if (hasHoveredFeatures && !isBaseLayer) {\n if (!isUndefined(featureId) && !isUndefined(sourceId)) {\n // if there's already an active feature, remove the active state\n map.setFeatureState(\n { source: sourceId, id: featureId },\n { active: false },\n );\n }\n\n const minFeature = getMinValueFeature(features);\n\n featureId = minFeature.id;\n sourceId = minFeature.layer.source;\n const activeState = features[0].state.active;\n\n // add the active state to the closest feature\n map.setFeatureState(\n { source: sourceId, id: featureId },\n { active: !activeState },\n );\n allFeatures.forEach((feature) => {\n if (feature.id !== undefined && feature.layer.source !== undefined) {\n map.setFeatureState(\n { source: feature.layer.source, id: feature.id },\n { isAnyActive: !activeState },\n );\n }\n }); //TODO: change to inactive\n } else {\n if (!isUndefined(featureId) && !isUndefined(sourceId)) {\n // remove the active state from the last active feature\n map.setFeatureState(\n { source: sourceId, id: featureId },\n { active: false },\n );\n allFeatures.forEach((feature) => {\n if (\n feature.id !== undefined &&\n feature.layer.source !== undefined\n ) {\n map.setFeatureState(\n { source: feature.layer.source, id: feature.id },\n { isAnyActive: false },\n );\n }\n });\n }\n }\n },\n [featureId, sourceId, map],\n );\n\n useEffect(() => {\n map.on('click', handleClick);\n return () => {\n map.off('click', handleClick);\n };\n }, []);\n};\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,cAAc;AACvB,SAAS,OAAO,mBAAmB;AAEnC,SAAS,aAAa,iBAAiB;AAEvC,SAAS,sBAAsB;AAC/B,SAAS,0BAA0B;AAE5B,MAAM,uBAAuB,MAAM;AACxC,QAAM,MAAM,OAAO,EAAE;AAErB,MAAI;AACJ,MAAI;AACJ,QAAM,cAAc;AAAA,IAClB,CAAC,EAAE,MAAM,MAA0B;AACjC,YAAM,WAAW,IAAI,sBAAsB,KAAK;AAChD,YAAM,cAAc,IAAI,sBAAsB;AAE9C,YAAM,UAAU,WAAW,CAAC,GAAG,OAAO;AAEtC,YAAM,qBACJ,CAAC,MAAM,QAAQ,KAAK,SAAS,SAAS,KAAK,CAAC,YAAY,OAAO;AACjE,YAAM,cAAc,eAAe,SAAS,OAAO;AAEnD,UAAI,sBAAsB,CAAC,aAAa;AACtC,YAAI,CAAC,YAAY,SAAS,KAAK,CAAC,YAAY,QAAQ,GAAG;AAErD,cAAI;AAAA,YACF,EAAE,QAAQ,UAAU,IAAI,UAAU;AAAA,YAClC,EAAE,QAAQ,MAAM;AAAA,UAClB;AAAA,QACF;AAEA,cAAM,aAAa,mBAAmB,QAAQ;AAE9C,oBAAY,WAAW;AACvB,mBAAW,WAAW,MAAM;AAC5B,cAAM,cAAc,SAAS,CAAC,EAAE,MAAM;AAGtC,YAAI;AAAA,UACF,EAAE,QAAQ,UAAU,IAAI,UAAU;AAAA,UAClC,EAAE,QAAQ,CAAC,YAAY;AAAA,QACzB;AACA,oBAAY,QAAQ,CAAC,YAAY;AAC/B,cAAI,QAAQ,OAAO,UAAa,QAAQ,MAAM,WAAW,QAAW;AAClE,gBAAI;AAAA,cACF,EAAE,QAAQ,QAAQ,MAAM,QAAQ,IAAI,QAAQ,GAAG;AAAA,cAC/C,EAAE,aAAa,CAAC,YAAY;AAAA,YAC9B;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH,OAAO;AACL,YAAI,CAAC,YAAY,SAAS,KAAK,CAAC,YAAY,QAAQ,GAAG;AAErD,cAAI;AAAA,YACF,EAAE,QAAQ,UAAU,IAAI,UAAU;AAAA,YAClC,EAAE,QAAQ,MAAM;AAAA,UAClB;AACA,sBAAY,QAAQ,CAAC,YAAY;AAC/B,gBACE,QAAQ,OAAO,UACf,QAAQ,MAAM,WAAW,QACzB;AACA,kBAAI;AAAA,gBACF,EAAE,QAAQ,QAAQ,MAAM,QAAQ,IAAI,QAAQ,GAAG;AAAA,gBAC/C,EAAE,aAAa,MAAM;AAAA,cACvB;AAAA,YACF;AAAA,UACF,CAAC;AAAA,QACH;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,WAAW,UAAU,GAAG;AAAA,EAC3B;AAEA,YAAU,MAAM;AACd,QAAI,GAAG,SAAS,WAAW;AAC3B,WAAO,MAAM;AACX,UAAI,IAAI,SAAS,WAAW;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,CAAC;AACP;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -7,6 +7,7 @@ import {
|
|
|
7
7
|
hasAssociatedFeatures,
|
|
8
8
|
isAssociatedFeature
|
|
9
9
|
} from "../utils/associated-features.js";
|
|
10
|
+
import { getMinValueFeature } from "../utils/get-min-value-feature.js";
|
|
10
11
|
const featureExists = (map, source, id) => {
|
|
11
12
|
const isSourcePresent = map.getSource(source) !== void 0;
|
|
12
13
|
return isSourcePresent && map.getFeatureState({
|
|
@@ -73,8 +74,9 @@ const useHoverInteraction = () => {
|
|
|
73
74
|
if (!isUndefined(featureId) && !isUndefined(sourceId)) {
|
|
74
75
|
blurFeature(map, sourceId, featureId);
|
|
75
76
|
}
|
|
76
|
-
|
|
77
|
-
|
|
77
|
+
const minFeature = getMinValueFeature(features);
|
|
78
|
+
featureId = minFeature.id;
|
|
79
|
+
sourceId = minFeature.layer.source;
|
|
78
80
|
if (!isUndefined(featureId)) {
|
|
79
81
|
hoverFeature(map, sourceId, featureId);
|
|
80
82
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/map/hooks/use-hover-interaction.ts"],
|
|
4
|
-
"sourcesContent": ["import type { MapRef } from '@vis.gl/react-maplibre';\nimport { useMap } from '@vis.gl/react-maplibre';\nimport { isNil, isString, isUndefined } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport { useCallback, useEffect } from 'react';\n\nimport { BASE_LAYER_IDS } from '../constants.js';\nimport {\n getAssociatedFeatures,\n hasAssociatedFeatures,\n isAssociatedFeature,\n} from '../utils/associated-features.js';\n\n/**\n * Checks whether a feature exists from a given source\n *\n * @param map -\n * @param source -\n * @param id -\n */\nconst featureExists = (\n map: MapRef,\n source: string,\n id: string | number,\n): boolean => {\n const isSourcePresent = map.getSource(source) !== undefined;\n\n return (\n isSourcePresent &&\n map.getFeatureState({\n source,\n id,\n }) !== undefined\n );\n};\n\n/**\n * Removes hovered state from a feature and its associated features from a given source\n * @param map -\n * @param source -\n * @param id -\n */\nconst blurFeature = (map: MapRef, source: string, id: string | number) => {\n map.setFeatureState({ source, id }, { hover: false });\n\n if (isString(id) && hasAssociatedFeatures(id)) {\n for (const associatedFeature of getAssociatedFeatures('connection')) {\n const associatedSource = `${source}-direction`;\n const associatedId = `${id}-${associatedFeature}`;\n\n if (featureExists(map, associatedSource, associatedId)) {\n map.setFeatureState(\n { source: associatedSource, id: associatedId },\n {\n hover: false,\n },\n );\n }\n }\n }\n};\n\n/**\n * Sets hovered state to a feature and its associated features from a given source\n * @param map -\n * @param source -\n * @param id -\n */\nconst hoverFeature = (map: MapRef, source: string, id: string | number) => {\n map.setFeatureState({ source, id }, { hover: true });\n\n if (isString(id) && hasAssociatedFeatures(id)) {\n for (const associatedFeature of getAssociatedFeatures('connection')) {\n const associatedSource = `${source}-direction`;\n const associatedId = `${id}-${associatedFeature}`;\n\n if (featureExists(map, associatedSource, associatedId)) {\n map.setFeatureState(\n { source: `${source}-direction`, id: `${id}-${associatedFeature}` },\n {\n hover: true,\n },\n );\n }\n }\n }\n};\n\n/**\n * Sets and removes hovered state to the features depending on mouse position\n */\nexport const useHoverInteraction = () => {\n const map = useMap().current;\n\n let featureId: string | number | undefined;\n let sourceId: string | undefined;\n\n const handleMouseOut = useCallback(\n ({ point }: MapLayerMouseEvent) => {\n if (!isNil(map) && !isUndefined(featureId) && !isUndefined(sourceId)) {\n blurFeature(map, sourceId, featureId);\n }\n },\n [featureId, sourceId, map],\n );\n\n const handleMouseMove = useCallback(\n ({ point }: MapLayerMouseEvent) => {\n if (!isNil(map)) {\n const features = map\n .queryRenderedFeatures(point)\n .filter((feature) => !isAssociatedFeature(feature.properties.id)); // associated features should only have hover state when the main feature is hovered\n\n map.getCanvas().style.cursor = 'grab';\n const layerId = features?.[0]?.layer?.id;\n\n const hasHoveredFeatures =\n !isNil(features) && features.length > 0 && !isUndefined(layerId);\n const isBaseLayer = BASE_LAYER_IDS.includes(layerId);\n\n if (hasHoveredFeatures && !isBaseLayer) {\n map.getCanvas().style.cursor = 'pointer';\n if (!isUndefined(featureId) && !isUndefined(sourceId)) {\n // if there's already a hovered feature, remove the hover state\n blurFeature(map, sourceId, featureId);\n }\n\n featureId =
|
|
5
|
-
"mappings": "AACA,SAAS,cAAc;AACvB,SAAS,OAAO,UAAU,mBAAmB;AAE7C,SAAS,aAAa,iBAAiB;AAEvC,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;
|
|
4
|
+
"sourcesContent": ["import type { MapRef } from '@vis.gl/react-maplibre';\nimport { useMap } from '@vis.gl/react-maplibre';\nimport { isNil, isString, isUndefined } from 'lodash-es';\nimport type { MapLayerMouseEvent } from 'maplibre-gl';\nimport { useCallback, useEffect } from 'react';\n\nimport { BASE_LAYER_IDS } from '../constants.js';\nimport {\n getAssociatedFeatures,\n hasAssociatedFeatures,\n isAssociatedFeature,\n} from '../utils/associated-features.js';\nimport { getMinValueFeature } from '../utils/get-min-value-feature.js';\n\n/**\n * Checks whether a feature exists from a given source\n *\n * @param map -\n * @param source -\n * @param id -\n */\nconst featureExists = (\n map: MapRef,\n source: string,\n id: string | number,\n): boolean => {\n const isSourcePresent = map.getSource(source) !== undefined;\n\n return (\n isSourcePresent &&\n map.getFeatureState({\n source,\n id,\n }) !== undefined\n );\n};\n\n/**\n * Removes hovered state from a feature and its associated features from a given source\n * @param map -\n * @param source -\n * @param id -\n */\nconst blurFeature = (map: MapRef, source: string, id: string | number) => {\n map.setFeatureState({ source, id }, { hover: false });\n\n if (isString(id) && hasAssociatedFeatures(id)) {\n for (const associatedFeature of getAssociatedFeatures('connection')) {\n const associatedSource = `${source}-direction`;\n const associatedId = `${id}-${associatedFeature}`;\n\n if (featureExists(map, associatedSource, associatedId)) {\n map.setFeatureState(\n { source: associatedSource, id: associatedId },\n {\n hover: false,\n },\n );\n }\n }\n }\n};\n\n/**\n * Sets hovered state to a feature and its associated features from a given source\n * @param map -\n * @param source -\n * @param id -\n */\nconst hoverFeature = (map: MapRef, source: string, id: string | number) => {\n map.setFeatureState({ source, id }, { hover: true });\n\n if (isString(id) && hasAssociatedFeatures(id)) {\n for (const associatedFeature of getAssociatedFeatures('connection')) {\n const associatedSource = `${source}-direction`;\n const associatedId = `${id}-${associatedFeature}`;\n\n if (featureExists(map, associatedSource, associatedId)) {\n map.setFeatureState(\n { source: `${source}-direction`, id: `${id}-${associatedFeature}` },\n {\n hover: true,\n },\n );\n }\n }\n }\n};\n\n/**\n * Sets and removes hovered state to the features depending on mouse position\n */\nexport const useHoverInteraction = () => {\n const map = useMap().current;\n\n let featureId: string | number | undefined;\n let sourceId: string | undefined;\n\n const handleMouseOut = useCallback(\n ({ point }: MapLayerMouseEvent) => {\n if (!isNil(map) && !isUndefined(featureId) && !isUndefined(sourceId)) {\n blurFeature(map, sourceId, featureId);\n }\n },\n [featureId, sourceId, map],\n );\n\n const handleMouseMove = useCallback(\n ({ point }: MapLayerMouseEvent) => {\n if (!isNil(map)) {\n const features = map\n .queryRenderedFeatures(point)\n .filter((feature) => !isAssociatedFeature(feature.properties.id)); // associated features should only have hover state when the main feature is hovered\n\n map.getCanvas().style.cursor = 'grab';\n const layerId = features?.[0]?.layer?.id;\n\n const hasHoveredFeatures =\n !isNil(features) && features.length > 0 && !isUndefined(layerId);\n const isBaseLayer = BASE_LAYER_IDS.includes(layerId);\n\n if (hasHoveredFeatures && !isBaseLayer) {\n map.getCanvas().style.cursor = 'pointer';\n if (!isUndefined(featureId) && !isUndefined(sourceId)) {\n // if there's already a hovered feature, remove the hover state\n blurFeature(map, sourceId, featureId);\n }\n\n const minFeature = getMinValueFeature(features);\n\n featureId = minFeature!.id;\n sourceId = minFeature!.layer.source;\n\n // add the hover state to the closest feature\n if (!isUndefined(featureId)) {\n hoverFeature(map, sourceId, featureId);\n }\n } else {\n map.getCanvas().style.cursor = 'grab';\n\n if (!isUndefined(featureId) && !isUndefined(sourceId)) {\n // remove the active state from the last hovered feature\n blurFeature(map, sourceId, featureId);\n }\n }\n }\n },\n [featureId, sourceId, map],\n );\n\n useEffect(() => {\n map?.on('mousemove', handleMouseMove);\n map?.on('mouseout', handleMouseOut);\n return () => {\n map?.off('mousemove', handleMouseMove);\n map?.off('mouseout', handleMouseOut);\n };\n }, []);\n};\n"],
|
|
5
|
+
"mappings": "AACA,SAAS,cAAc;AACvB,SAAS,OAAO,UAAU,mBAAmB;AAE7C,SAAS,aAAa,iBAAiB;AAEvC,SAAS,sBAAsB;AAC/B;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,0BAA0B;AASnC,MAAM,gBAAgB,CACpB,KACA,QACA,OACY;AACZ,QAAM,kBAAkB,IAAI,UAAU,MAAM,MAAM;AAElD,SACE,mBACA,IAAI,gBAAgB;AAAA,IAClB;AAAA,IACA;AAAA,EACF,CAAC,MAAM;AAEX;AAQA,MAAM,cAAc,CAAC,KAAa,QAAgB,OAAwB;AACxE,MAAI,gBAAgB,EAAE,QAAQ,GAAG,GAAG,EAAE,OAAO,MAAM,CAAC;AAEpD,MAAI,SAAS,EAAE,KAAK,sBAAsB,EAAE,GAAG;AAC7C,eAAW,qBAAqB,sBAAsB,YAAY,GAAG;AACnE,YAAM,mBAAmB,GAAG,MAAM;AAClC,YAAM,eAAe,GAAG,EAAE,IAAI,iBAAiB;AAE/C,UAAI,cAAc,KAAK,kBAAkB,YAAY,GAAG;AACtD,YAAI;AAAA,UACF,EAAE,QAAQ,kBAAkB,IAAI,aAAa;AAAA,UAC7C;AAAA,YACE,OAAO;AAAA,UACT;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAQA,MAAM,eAAe,CAAC,KAAa,QAAgB,OAAwB;AACzE,MAAI,gBAAgB,EAAE,QAAQ,GAAG,GAAG,EAAE,OAAO,KAAK,CAAC;AAEnD,MAAI,SAAS,EAAE,KAAK,sBAAsB,EAAE,GAAG;AAC7C,eAAW,qBAAqB,sBAAsB,YAAY,GAAG;AACnE,YAAM,mBAAmB,GAAG,MAAM;AAClC,YAAM,eAAe,GAAG,EAAE,IAAI,iBAAiB;AAE/C,UAAI,cAAc,KAAK,kBAAkB,YAAY,GAAG;AACtD,YAAI;AAAA,UACF,EAAE,QAAQ,GAAG,MAAM,cAAc,IAAI,GAAG,EAAE,IAAI,iBAAiB,GAAG;AAAA,UAClE;AAAA,YACE,OAAO;AAAA,UACT;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACF;AAKO,MAAM,sBAAsB,MAAM;AACvC,QAAM,MAAM,OAAO,EAAE;AAErB,MAAI;AACJ,MAAI;AAEJ,QAAM,iBAAiB;AAAA,IACrB,CAAC,EAAE,MAAM,MAA0B;AACjC,UAAI,CAAC,MAAM,GAAG,KAAK,CAAC,YAAY,SAAS,KAAK,CAAC,YAAY,QAAQ,GAAG;AACpE,oBAAY,KAAK,UAAU,SAAS;AAAA,MACtC;AAAA,IACF;AAAA,IACA,CAAC,WAAW,UAAU,GAAG;AAAA,EAC3B;AAEA,QAAM,kBAAkB;AAAA,IACtB,CAAC,EAAE,MAAM,MAA0B;AACjC,UAAI,CAAC,MAAM,GAAG,GAAG;AACf,cAAM,WAAW,IACd,sBAAsB,KAAK,EAC3B,OAAO,CAAC,YAAY,CAAC,oBAAoB,QAAQ,WAAW,EAAE,CAAC;AAElE,YAAI,UAAU,EAAE,MAAM,SAAS;AAC/B,cAAM,UAAU,WAAW,CAAC,GAAG,OAAO;AAEtC,cAAM,qBACJ,CAAC,MAAM,QAAQ,KAAK,SAAS,SAAS,KAAK,CAAC,YAAY,OAAO;AACjE,cAAM,cAAc,eAAe,SAAS,OAAO;AAEnD,YAAI,sBAAsB,CAAC,aAAa;AACtC,cAAI,UAAU,EAAE,MAAM,SAAS;AAC/B,cAAI,CAAC,YAAY,SAAS,KAAK,CAAC,YAAY,QAAQ,GAAG;AAErD,wBAAY,KAAK,UAAU,SAAS;AAAA,UACtC;AAEA,gBAAM,aAAa,mBAAmB,QAAQ;AAE9C,sBAAY,WAAY;AACxB,qBAAW,WAAY,MAAM;AAG7B,cAAI,CAAC,YAAY,SAAS,GAAG;AAC3B,yBAAa,KAAK,UAAU,SAAS;AAAA,UACvC;AAAA,QACF,OAAO;AACL,cAAI,UAAU,EAAE,MAAM,SAAS;AAE/B,cAAI,CAAC,YAAY,SAAS,KAAK,CAAC,YAAY,QAAQ,GAAG;AAErD,wBAAY,KAAK,UAAU,SAAS;AAAA,UACtC;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IACA,CAAC,WAAW,UAAU,GAAG;AAAA,EAC3B;AAEA,YAAU,MAAM;AACd,SAAK,GAAG,aAAa,eAAe;AACpC,SAAK,GAAG,YAAY,cAAc;AAClC,WAAO,MAAM;AACX,WAAK,IAAI,aAAa,eAAe;AACrC,WAAK,IAAI,YAAY,cAAc;AAAA,IACrC;AAAA,EACF,GAAG,CAAC,CAAC;AACP;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/map/utils/get-min-value-feature.ts"],
|
|
4
|
+
"sourcesContent": ["import { minBy } from 'lodash-es';\nimport { MapGeoJSONFeature } from 'maplibre-gl';\n\nexport const getMinValueFeature = (features: MapGeoJSONFeature[]) =>\n minBy(features, ({ properties: { __radius } }) => __radius) ?? features[0];\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,aAAa;AAGf,MAAM,qBAAqB,CAAC,aACjC,MAAM,UAAU,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,KAAK,SAAS,CAAC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/map/utils/is-slot.ts"],
|
|
4
|
-
"sourcesContent": ["import
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import {\n type JSXElementConstructor,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport { isElement } from 'react-is';\n\n/** @internal */\nexport const isSlot = <T>(\n child: ReactNode,\n slotType: JSXElementConstructor<T>,\n): child is ReactElement<T> => {\n return isElement(child) && child.type === slotType;\n};\n"],
|
|
5
|
+
"mappings": "AAKA,SAAS,iBAAiB;AAGnB,MAAM,SAAS,CACpB,OACA,aAC6B;AAC7B,SAAO,UAAU,KAAK,KAAK,MAAM,SAAS;AAC5C;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { isUndefined } from "lodash-es";
|
|
3
|
-
import
|
|
3
|
+
import {
|
|
4
|
+
Children,
|
|
5
|
+
isValidElement
|
|
6
|
+
} from "react";
|
|
4
7
|
import { isElement } from "react-is";
|
|
5
8
|
import { isSlot } from "./is-slot.js";
|
|
6
9
|
import { BubbleLayer as MapBubbleLayer } from "../components/BubbleLayer/BubbleLayer.js";
|
|
@@ -27,7 +30,7 @@ const setLayersId = (children) => {
|
|
|
27
30
|
const layerIds = [];
|
|
28
31
|
let index = 0;
|
|
29
32
|
const valueAccessors = /* @__PURE__ */ new Map();
|
|
30
|
-
const parsedChildren =
|
|
33
|
+
const parsedChildren = Children.map(children, (child) => {
|
|
31
34
|
if (isElement(child) && typeof child.type !== "string") {
|
|
32
35
|
const layer = layers.get(child.type);
|
|
33
36
|
if (layer !== void 0 && (isSlot(child, BubbleLayer) || isSlot(child, ConnectionLayer) || isSlot(child, ChoroplethLayer) || isSlot(child, DotLayer))) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/map/utils/set-layers-id.tsx"],
|
|
4
|
-
"sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["import { isUndefined } from 'lodash-es';\nimport {\n Children,\n isValidElement,\n type JSXElementConstructor,\n type ReactElement,\n type ReactNode,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { isSlot } from './is-slot.js';\nimport { BubbleLayer as MapBubbleLayer } from '../components/BubbleLayer/BubbleLayer.js';\nimport { ChoroplethLayer as MapChoroplethLayer } from '../components/ChoroplethLayer/ChoroplethLayer.js';\nimport { ConnectionLayer as MapConnectionLayer } from '../components/ConnectionLayer/ConnectionLayer.js';\nimport { DotLayer as MapDotLayer } 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 { LegendColorLayerProps } from '../types/coloring.js';\nimport type { Location } from '../types/location.js';\n\n// TODO: React 19 update\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst sanitizeData = (child: ReactElement<any>, 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<JSXElementConstructor<never>, { prefix: string }>([\n [BubbleLayer, { prefix: 'bubble' }],\n [DotLayer, { prefix: 'dot' }],\n [ChoroplethLayer, { prefix: 'choropleth' }],\n [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 = (\n children: ReactNode,\n): {\n layerIds: string[];\n parsedChildren: ReactNode;\n valueAccessors: Map<string, string>;\n} => {\n const layerIds: string[] = [];\n let index = 0;\n const valueAccessors = new Map<string, string>();\n\n const parsedChildren = Children.map(children, (child) => {\n if (isElement(child) && typeof child.type !== 'string') {\n const layer = layers.get(child.type);\n\n if (\n layer !== undefined &&\n (isSlot(child, BubbleLayer) ||\n isSlot(child, ConnectionLayer) ||\n isSlot(child, ChoroplethLayer) ||\n isSlot(child, DotLayer))\n ) {\n const layerId = `${layer?.prefix}-${index}`;\n\n if (\n isValidElement<LegendColorLayerProps>(child) &&\n child.props.color === 'legend' &&\n child.props.valueAccessor\n ) {\n valueAccessors.set(layerId, child.props.valueAccessor);\n }\n\n index += 1;\n\n layerIds.push(layerId);\n\n const data = valueAccessors.get(layerId)\n ? sanitizeData(child, valueAccessors.get(layerId)!)\n : child.props.data;\n\n if (isSlot(child, BubbleLayer)) {\n return (\n <MapBubbleLayer {...child.props} data={data} layerId={layerId} />\n );\n } else if (isSlot(child, ConnectionLayer)) {\n return (\n <MapConnectionLayer\n {...child.props}\n data={data}\n layerId={layerId}\n />\n );\n } else if (isSlot(child, DotLayer)) {\n return <MapDotLayer {...child.props} data={data} layerId={layerId} />;\n } else if (isSlot(child, ChoroplethLayer)) {\n return (\n <MapChoroplethLayer\n {...child.props}\n data={data}\n layerId={layerId}\n />\n );\n }\n }\n }\n return child;\n });\n\n return { layerIds, parsedChildren, valueAccessors };\n};\n"],
|
|
5
|
+
"mappings": "AAqFY;AArFZ,SAAS,mBAAmB;AAC5B;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AACP,SAAS,iBAAiB;AAE1B,SAAS,cAAc;AACvB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,mBAAmB,0BAA0B;AACtD,SAAS,mBAAmB,0BAA0B;AACtD,SAAS,YAAY,mBAAmB;AACxC,SAAS,mBAAmB;AAC5B,SAAS,uBAAuB;AAChC,SAAS,uBAAuB;AAChC,SAAS,gBAAgB;AAMzB,MAAM,eAAe,CAAC,OAA0B,QAAgB;AAC9D,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,QAA0D;AAAA,EAC3E,CAAC,aAAa,EAAE,QAAQ,SAAS,CAAC;AAAA,EAClC,CAAC,UAAU,EAAE,QAAQ,MAAM,CAAC;AAAA,EAC5B,CAAC,iBAAiB,EAAE,QAAQ,aAAa,CAAC;AAAA,EAC1C,CAAC,iBAAiB,EAAE,QAAQ,aAAa,CAAC;AAC5C,CAAC;AAOM,MAAM,cAAc,CACzB,aAKG;AACH,QAAM,WAAqB,CAAC;AAC5B,MAAI,QAAQ;AACZ,QAAM,iBAAiB,oBAAI,IAAoB;AAE/C,QAAM,iBAAiB,SAAS,IAAI,UAAU,CAAC,UAAU;AACvD,QAAI,UAAU,KAAK,KAAK,OAAO,MAAM,SAAS,UAAU;AACtD,YAAM,QAAQ,OAAO,IAAI,MAAM,IAAI;AAEnC,UACE,UAAU,WACT,OAAO,OAAO,WAAW,KACxB,OAAO,OAAO,eAAe,KAC7B,OAAO,OAAO,eAAe,KAC7B,OAAO,OAAO,QAAQ,IACxB;AACA,cAAM,UAAU,GAAG,OAAO,MAAM,IAAI,KAAK;AAEzC,YACE,eAAsC,KAAK,KAC3C,MAAM,MAAM,UAAU,YACtB,MAAM,MAAM,eACZ;AACA,yBAAe,IAAI,SAAS,MAAM,MAAM,aAAa;AAAA,QACvD;AAEA,iBAAS;AAET,iBAAS,KAAK,OAAO;AAErB,cAAM,OAAO,eAAe,IAAI,OAAO,IACnC,aAAa,OAAO,eAAe,IAAI,OAAO,CAAE,IAChD,MAAM,MAAM;AAEhB,YAAI,OAAO,OAAO,WAAW,GAAG;AAC9B,iBACE,oBAAC,kBAAgB,GAAG,MAAM,OAAO,MAAY,SAAkB;AAAA,QAEnE,WAAW,OAAO,OAAO,eAAe,GAAG;AACzC,iBACE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG,MAAM;AAAA,cACV;AAAA,cACA;AAAA;AAAA,UACF;AAAA,QAEJ,WAAW,OAAO,OAAO,QAAQ,GAAG;AAClC,iBAAO,oBAAC,eAAa,GAAG,MAAM,OAAO,MAAY,SAAkB;AAAA,QACrE,WAAW,OAAO,OAAO,eAAe,GAAG;AACzC,iBACE;AAAA,YAAC;AAAA;AAAA,cACE,GAAG,MAAM;AAAA,cACV;AAAA,cACA;AAAA;AAAA,UACF;AAAA,QAEJ;AAAA,MACF;AAAA,IACF;AACA,WAAO;AAAA,EACT,CAAC;AAED,SAAO,EAAE,UAAU,gBAAgB,eAAe;AACpD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -22,6 +22,7 @@ __export(BubbleLayerTooltip_exports, {
|
|
|
22
22
|
});
|
|
23
23
|
module.exports = __toCommonJS(BubbleLayerTooltip_exports);
|
|
24
24
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
25
|
+
var import_lodash_es = require("lodash");
|
|
25
26
|
var import_react = require("react");
|
|
26
27
|
var import_charts = require("@dynatrace/strato-components-preview/charts");
|
|
27
28
|
var import_selectors = require("../../store/selectors.js");
|
|
@@ -55,8 +56,9 @@ const BubbleLayerTooltip = (props) => {
|
|
|
55
56
|
data: customData
|
|
56
57
|
};
|
|
57
58
|
});
|
|
58
|
-
|
|
59
|
-
|
|
59
|
+
const sortedBubbles = (0, import_lodash_es.sortBy)(sanitizedData, ({ radius }) => radius);
|
|
60
|
+
closestPoint.current = sortedBubbles[0];
|
|
61
|
+
remainingPoints.current = sortedBubbles.slice(1);
|
|
60
62
|
}
|
|
61
63
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
62
64
|
import_charts._ChartTooltip,
|
|
@@ -25,6 +25,7 @@ var import_react_maplibre = require("@vis.gl/react-maplibre");
|
|
|
25
25
|
var import_lodash_es = require("lodash");
|
|
26
26
|
var import_react = require("react");
|
|
27
27
|
var import_constants = require("../constants.js");
|
|
28
|
+
var import_get_min_value_feature = require("../utils/get-min-value-feature.js");
|
|
28
29
|
const useActiveInteraction = () => {
|
|
29
30
|
const map = (0, import_react_maplibre.useMap)().current;
|
|
30
31
|
let featureId;
|
|
@@ -43,8 +44,9 @@ const useActiveInteraction = () => {
|
|
|
43
44
|
{ active: false }
|
|
44
45
|
);
|
|
45
46
|
}
|
|
46
|
-
|
|
47
|
-
|
|
47
|
+
const minFeature = (0, import_get_min_value_feature.getMinValueFeature)(features);
|
|
48
|
+
featureId = minFeature.id;
|
|
49
|
+
sourceId = minFeature.layer.source;
|
|
48
50
|
const activeState = features[0].state.active;
|
|
49
51
|
map.setFeatureState(
|
|
50
52
|
{ source: sourceId, id: featureId },
|
|
@@ -26,6 +26,7 @@ var import_lodash_es = require("lodash");
|
|
|
26
26
|
var import_react = require("react");
|
|
27
27
|
var import_constants = require("../constants.js");
|
|
28
28
|
var import_associated_features = require("../utils/associated-features.js");
|
|
29
|
+
var import_get_min_value_feature = require("../utils/get-min-value-feature.js");
|
|
29
30
|
const featureExists = (map, source, id) => {
|
|
30
31
|
const isSourcePresent = map.getSource(source) !== void 0;
|
|
31
32
|
return isSourcePresent && map.getFeatureState({
|
|
@@ -92,8 +93,9 @@ const useHoverInteraction = () => {
|
|
|
92
93
|
if (!(0, import_lodash_es.isUndefined)(featureId) && !(0, import_lodash_es.isUndefined)(sourceId)) {
|
|
93
94
|
blurFeature(map, sourceId, featureId);
|
|
94
95
|
}
|
|
95
|
-
|
|
96
|
-
|
|
96
|
+
const minFeature = (0, import_get_min_value_feature.getMinValueFeature)(features);
|
|
97
|
+
featureId = minFeature.id;
|
|
98
|
+
sourceId = minFeature.layer.source;
|
|
97
99
|
if (!(0, import_lodash_es.isUndefined)(featureId)) {
|
|
98
100
|
hoverFeature(map, sourceId, featureId);
|
|
99
101
|
}
|
package/map/types/tooltip.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
1
2
|
import type { _ChartTooltipSlotsType as ChartTooltipSlotsType, _ChartTooltipTemplateType as ChartTooltipTemplateType } from '@dynatrace/strato-components-preview/charts';
|
|
2
3
|
import type { Connection } from './connection-layer.js';
|
|
3
4
|
import type { Location } from './location.js';
|
|
@@ -26,7 +27,7 @@ export interface DotLayerTooltipData<T extends Location = Location> {
|
|
|
26
27
|
* Dot tooltip handler type
|
|
27
28
|
* @public
|
|
28
29
|
*/
|
|
29
|
-
export type DotLayerTooltipHandler = (dotData: DotLayerTooltipData) =>
|
|
30
|
+
export type DotLayerTooltipHandler = (dotData: DotLayerTooltipData) => ReactNode | null;
|
|
30
31
|
/**
|
|
31
32
|
* Dot tooltip handler type
|
|
32
33
|
* @typeParam T - Object extending Location
|
|
@@ -53,7 +54,7 @@ export interface BubbleLayerTooltipData<T extends Location = Location> {
|
|
|
53
54
|
* Bubble Tooltip Component Props
|
|
54
55
|
* @public
|
|
55
56
|
*/
|
|
56
|
-
export type BubbleLayerTooltipHandler = (closestDot: BubbleLayerTooltipData, dotsData: BubbleLayerTooltipData[]) =>
|
|
57
|
+
export type BubbleLayerTooltipHandler = (closestDot: BubbleLayerTooltipData, dotsData: BubbleLayerTooltipData[]) => ReactNode | null;
|
|
57
58
|
/**
|
|
58
59
|
* Bubble Tooltip Component Props
|
|
59
60
|
* @typeParam T - Object extending Location
|
|
@@ -80,7 +81,7 @@ export interface ConnectionLayerTooltipData<T extends Connection = Connection> {
|
|
|
80
81
|
* Connection tooltip handler type
|
|
81
82
|
* @public
|
|
82
83
|
*/
|
|
83
|
-
export type ConnectionLayerTooltipHandler = (connectionData: ConnectionLayerTooltipData) =>
|
|
84
|
+
export type ConnectionLayerTooltipHandler = (connectionData: ConnectionLayerTooltipData) => ReactNode;
|
|
84
85
|
/**
|
|
85
86
|
* Connection Tooltip Component Props
|
|
86
87
|
* @public
|
|
@@ -106,7 +107,7 @@ export interface ChoroplethLayerTooltipData<T extends Record<string, unknown> =
|
|
|
106
107
|
* Choropleth tooltip handler type
|
|
107
108
|
* @public
|
|
108
109
|
*/
|
|
109
|
-
export type ChoroplethLayerTooltipHandler = (regionData: ChoroplethLayerTooltipData) =>
|
|
110
|
+
export type ChoroplethLayerTooltipHandler = (regionData: ChoroplethLayerTooltipData) => ReactNode;
|
|
110
111
|
/**
|
|
111
112
|
* Choropleth Tooltip Component Props
|
|
112
113
|
* @public
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var get_min_value_feature_exports = {};
|
|
20
|
+
__export(get_min_value_feature_exports, {
|
|
21
|
+
getMinValueFeature: () => getMinValueFeature
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(get_min_value_feature_exports);
|
|
24
|
+
var import_lodash_es = require("lodash");
|
|
25
|
+
const getMinValueFeature = (features) => (0, import_lodash_es.minBy)(features, ({ properties: { __radius } }) => __radius) ?? features[0];
|
package/map/utils/is-slot.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { type JSXElementConstructor, type ReactElement, type ReactNode } from 'react';
|
|
2
2
|
/** @internal */
|
|
3
|
-
export declare const isSlot: <T>(child: ReactNode, slotType:
|
|
3
|
+
export declare const isSlot: <T>(child: ReactNode, slotType: JSXElementConstructor<T>) => child is ReactElement<T>;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
2
|
/**
|
|
3
3
|
* Set layers id to layer slots provided by the consumer.
|
|
4
4
|
* @param children - MapView children
|
|
5
5
|
* @returns An array with all the layers IDs and the children using the layer component
|
|
6
6
|
*/
|
|
7
|
-
export declare const setLayersId: (children:
|
|
7
|
+
export declare const setLayersId: (children: ReactNode) => {
|
|
8
8
|
layerIds: string[];
|
|
9
|
-
parsedChildren:
|
|
9
|
+
parsedChildren: ReactNode;
|
|
10
10
|
valueAccessors: Map<string, string>;
|
|
11
11
|
};
|
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
2
|
var __defProp = Object.defineProperty;
|
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
6
|
var __export = (target, all) => {
|
|
9
7
|
for (var name in all)
|
|
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
15
|
}
|
|
18
16
|
return to;
|
|
19
17
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
19
|
var set_layers_id_exports = {};
|
|
30
20
|
__export(set_layers_id_exports, {
|
|
@@ -33,7 +23,7 @@ __export(set_layers_id_exports, {
|
|
|
33
23
|
module.exports = __toCommonJS(set_layers_id_exports);
|
|
34
24
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
35
25
|
var import_lodash_es = require("lodash");
|
|
36
|
-
var import_react =
|
|
26
|
+
var import_react = require("react");
|
|
37
27
|
var import_react_is = require("react-is");
|
|
38
28
|
var import_is_slot = require("./is-slot.js");
|
|
39
29
|
var import_BubbleLayer = require("../components/BubbleLayer/BubbleLayer.js");
|
|
@@ -60,7 +50,7 @@ const setLayersId = (children) => {
|
|
|
60
50
|
const layerIds = [];
|
|
61
51
|
let index = 0;
|
|
62
52
|
const valueAccessors = /* @__PURE__ */ new Map();
|
|
63
|
-
const parsedChildren = import_react.
|
|
53
|
+
const parsedChildren = import_react.Children.map(children, (child) => {
|
|
64
54
|
if ((0, import_react_is.isElement)(child) && typeof child.type !== "string") {
|
|
65
55
|
const layer = layers.get(child.type);
|
|
66
56
|
if (layer !== void 0 && ((0, import_is_slot.isSlot)(child, import_BubbleLayer2.BubbleLayer) || (0, import_is_slot.isSlot)(child, import_ConnectionLayer2.ConnectionLayer) || (0, import_is_slot.isSlot)(child, import_ChoroplethLayer2.ChoroplethLayer) || (0, import_is_slot.isSlot)(child, import_DotLayer2.DotLayer))) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dynatrace/strato-geo",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.7.2",
|
|
4
4
|
"private": false,
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"lang": "lang/uncompiled",
|
|
@@ -47,8 +47,8 @@
|
|
|
47
47
|
"react-dom": "^18.0.0",
|
|
48
48
|
"react-intl": "^6.0.8 || ^7.0.0",
|
|
49
49
|
"react-is": "^18.0.0",
|
|
50
|
-
"@dynatrace/strato-components": "^1.6.
|
|
51
|
-
"@dynatrace/strato-components-preview": "^1.
|
|
50
|
+
"@dynatrace/strato-components": "^1.6.2",
|
|
51
|
+
"@dynatrace/strato-components-preview": "^1.7.2",
|
|
52
52
|
"@dynatrace/strato-design-tokens": "^1.0.1",
|
|
53
53
|
"@dynatrace/strato-icons": "^1.5.0"
|
|
54
54
|
},
|