@dynatrace/strato-components 3.13.2 → 3.14.0

package/esm/charts/core/hooks/useOverlayEventHandlers.js

@@ -1,10 +1,15 @@
+import {
+  useRef
+} from "react";
 import { isOwnEvent } from "../components/interactions-overlay/utils/is-own-event.js";
 import { useTooltip } from "../components/overlay-tooltip/contexts/TooltipContext.js";
 import { useTooltipActions } from "../components/overlay-tooltip/useTooltipActions.js";
+import { isTapGesture } from "../components/overlay-tooltip/utils/tap-gesture.js";
 const useOverlayEventHandlers = (options) => {
   const tooltipStore = useTooltip();
   const { hover, pin, unpin, outOfBounds } = useTooltipActions();
   const { getTooltipData } = options;
+  const touchStartPosRef = useRef(null);
   const onPointerMove = (event) => {
     if (!isOwnEvent(event) || tooltipStore.getState().pinned) {
       return;
@@ -19,25 +24,41 @@ const useOverlayEventHandlers = (options) => {
   const onPointerLeave = () => {
     outOfBounds();
   };
-  const onTouchEnd = (event) => {
+  const onTouchStart = (event) => {
     if (!isOwnEvent(event)) {
+      touchStartPosRef.current = null;
       return;
     }
-    if (event.cancelable) {
-      event.preventDefault();
+    const touch = event.changedTouches[0];
+    if (!touch) {
+      return;
+    }
+    touchStartPosRef.current = { x: touch.clientX, y: touch.clientY };
+  };
+  const onTouchEnd = (event) => {
+    if (!isOwnEvent(event)) {
+      return;
     }
     const touch = event.changedTouches[0];
     if (!touch) {
       return;
     }
+    const start = touchStartPosRef.current;
+    touchStartPosRef.current = null;
+    if (start !== null && !isTapGesture(start, touch)) {
+      return;
+    }
+    if (event.cancelable) {
+      event.preventDefault();
+    }
     const tooltipData = getTooltipData({
       clientX: touch.clientX,
       clientY: touch.clientY
     });
     const isPinned = tooltipStore.getState().pinned;
     if (isPinned) {
+      unpin();
       if (tooltipData) {
-        unpin();
         hover(touch, tooltipData);
       }
     } else if (tooltipData) {
@@ -62,6 +83,7 @@ const useOverlayEventHandlers = (options) => {
   return {
     onPointerMove,
     onPointerLeave,
+    onTouchStart,
     onTouchEnd,
     onClick
   };

package/esm/charts/core/hooks/useOverlayEventHandlers.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/core/hooks/useOverlayEventHandlers.ts"],
-  "sourcesContent": ["import {\n  type MouseEvent as ReactMouseEvent,\n  type TouchEvent as ReactTouchEvent,\n} from 'react';\n\nimport { isOwnEvent } from '../components/interactions-overlay/utils/is-own-event.js';\nimport { useTooltip } from '../components/overlay-tooltip/contexts/TooltipContext.js';\nimport type { Data } from '../components/overlay-tooltip/types.js';\nimport type { EventCoords } from '../components/overlay-tooltip/useTooltipActions.js';\nimport { useTooltipActions } from '../components/overlay-tooltip/useTooltipActions.js';\n\nexport type Options = {\n  getTooltipData: (coords: EventCoords) => Data | undefined;\n};\n\nexport const useOverlayEventHandlers = (options: Options) => {\n  const tooltipStore = useTooltip();\n  const { hover, pin, unpin, outOfBounds } = useTooltipActions();\n  const { getTooltipData } = options;\n\n  const onPointerMove = (event: ReactMouseEvent<HTMLDivElement>) => {\n    if (!isOwnEvent(event) || tooltipStore.getState().pinned) {\n      return;\n    }\n\n    const tooltipData = getTooltipData(event.nativeEvent);\n    if (tooltipData) {\n      hover(event.nativeEvent, tooltipData);\n    } else {\n      outOfBounds();\n    }\n  };\n\n  const onPointerLeave = () => {\n    outOfBounds();\n  };\n\n  // Handles tooltip pin/unpin on touch. Fires before pointerleave/outOfBounds so the\n  // pinned state survives the SET_OUT_BOUNDS action (which no-ops when pinned=true).\n  // Calling preventDefault() suppresses the subsequent synthetic click event so the\n  // desktop onClick path does not double-fire.\n  const onTouchEnd = (event: ReactTouchEvent<HTMLDivElement>) => {\n    if (!isOwnEvent(event)) {\n      return;\n    }\n\n    if (event.cancelable) {\n      event.preventDefault();\n    }\n\n    const touch = event.changedTouches[0];\n    if (!touch) {\n      return;\n    }\n\n    const tooltipData = getTooltipData({\n      clientX: touch.clientX,\n      clientY: touch.clientY,\n    });\n    const isPinned = tooltipStore.getState().pinned;\n\n    if (isPinned) {\n      if (tooltipData) {\n        unpin();\n        hover(touch, tooltipData);\n      }\n    } else if (tooltipData) {\n      pin(touch, tooltipData);\n    }\n  };\n\n  const onClick = (event: ReactMouseEvent<HTMLDivElement>) => {\n    if (!isOwnEvent(event)) {\n      return;\n    }\n\n    const tooltipData = getTooltipData(event.nativeEvent);\n    const isPinned = tooltipStore.getState().pinned;\n\n    if (isPinned) {\n      if (tooltipData) {\n        unpin();\n        hover(event.nativeEvent, tooltipData);\n      }\n    } else if (tooltipData) {\n      pin(event.nativeEvent, tooltipData);\n    }\n  };\n\n  return {\n    onPointerMove,\n    onPointerLeave,\n    onTouchEnd,\n    onClick,\n  };\n};\n"],
-  "mappings": "AAKA,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAG3B,SAAS,yBAAyB;AAM3B,MAAM,0BAA0B,CAAC,YAAqB;AAC3D,QAAM,eAAe,WAAW;AAChC,QAAM,EAAE,OAAO,KAAK,OAAO,YAAY,IAAI,kBAAkB;AAC7D,QAAM,EAAE,eAAe,IAAI;AAE3B,QAAM,gBAAgB,CAAC,UAA2C;AAChE,QAAI,CAAC,WAAW,KAAK,KAAK,aAAa,SAAS,EAAE,QAAQ;AACxD;AAAA,IACF;AAEA,UAAM,cAAc,eAAe,MAAM,WAAW;AACpD,QAAI,aAAa;AACf,YAAM,MAAM,aAAa,WAAW;AAAA,IACtC,OAAO;AACL,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,QAAM,iBAAiB,MAAM;AAC3B,gBAAY;AAAA,EACd;AAMA,QAAM,aAAa,CAAC,UAA2C;AAC7D,QAAI,CAAC,WAAW,KAAK,GAAG;AACtB;AAAA,IACF;AAEA,QAAI,MAAM,YAAY;AACpB,YAAM,eAAe;AAAA,IACvB;AAEA,UAAM,QAAQ,MAAM,eAAe,CAAC;AACpC,QAAI,CAAC,OAAO;AACV;AAAA,IACF;AAEA,UAAM,cAAc,eAAe;AAAA,MACjC,SAAS,MAAM;AAAA,MACf,SAAS,MAAM;AAAA,IACjB,CAAC;AACD,UAAM,WAAW,aAAa,SAAS,EAAE;AAEzC,QAAI,UAAU;AACZ,UAAI,aAAa;AACf,cAAM;AACN,cAAM,OAAO,WAAW;AAAA,MAC1B;AAAA,IACF,WAAW,aAAa;AACtB,UAAI,OAAO,WAAW;AAAA,IACxB;AAAA,EACF;AAEA,QAAM,UAAU,CAAC,UAA2C;AAC1D,QAAI,CAAC,WAAW,KAAK,GAAG;AACtB;AAAA,IACF;AAEA,UAAM,cAAc,eAAe,MAAM,WAAW;AACpD,UAAM,WAAW,aAAa,SAAS,EAAE;AAEzC,QAAI,UAAU;AACZ,UAAI,aAAa;AACf,cAAM;AACN,cAAM,MAAM,aAAa,WAAW;AAAA,MACtC;AAAA,IACF,WAAW,aAAa;AACtB,UAAI,MAAM,aAAa,WAAW;AAAA,IACpC;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import {\n  useRef,\n  type MouseEvent as ReactMouseEvent,\n  type TouchEvent as ReactTouchEvent,\n} from 'react';\n\nimport { isOwnEvent } from '../components/interactions-overlay/utils/is-own-event.js';\nimport { useTooltip } from '../components/overlay-tooltip/contexts/TooltipContext.js';\nimport type { Data } from '../components/overlay-tooltip/types.js';\nimport type { EventCoords } from '../components/overlay-tooltip/useTooltipActions.js';\nimport { useTooltipActions } from '../components/overlay-tooltip/useTooltipActions.js';\nimport { isTapGesture } from '../components/overlay-tooltip/utils/tap-gesture.js';\n\nexport type Options = {\n  getTooltipData: (coords: EventCoords) => Data | undefined;\n};\n\nexport const useOverlayEventHandlers = (options: Options) => {\n  const tooltipStore = useTooltip();\n  const { hover, pin, unpin, outOfBounds } = useTooltipActions();\n  const { getTooltipData } = options;\n  const touchStartPosRef = useRef<{ x: number; y: number } | null>(null);\n\n  const onPointerMove = (event: ReactMouseEvent<HTMLDivElement>) => {\n    if (!isOwnEvent(event) || tooltipStore.getState().pinned) {\n      return;\n    }\n\n    const tooltipData = getTooltipData(event.nativeEvent);\n    if (tooltipData) {\n      hover(event.nativeEvent, tooltipData);\n    } else {\n      outOfBounds();\n    }\n  };\n\n  const onPointerLeave = () => {\n    outOfBounds();\n  };\n\n  const onTouchStart = (event: ReactTouchEvent<HTMLDivElement>) => {\n    if (!isOwnEvent(event)) {\n      touchStartPosRef.current = null;\n      return;\n    }\n    const touch = event.changedTouches[0];\n    if (!touch) {\n      return;\n    }\n    touchStartPosRef.current = { x: touch.clientX, y: touch.clientY };\n  };\n\n  // Handles tooltip pin/unpin on touch. Fires before pointerleave/outOfBounds so the\n  // pinned state survives the SET_OUT_BOUNDS action (which no-ops when pinned=true).\n  // Calling preventDefault() suppresses the subsequent synthetic click event so the\n  // desktop onClick path does not double-fire. Movement tracking prevents a scroll\n  // gesture that starts and ends on the overlay from incorrectly unpinning the tooltip.\n  const onTouchEnd = (event: ReactTouchEvent<HTMLDivElement>) => {\n    if (!isOwnEvent(event)) {\n      return;\n    }\n\n    const touch = event.changedTouches[0];\n    if (!touch) {\n      return;\n    }\n\n    const start = touchStartPosRef.current;\n    touchStartPosRef.current = null;\n\n    if (start !== null && !isTapGesture(start, touch)) {\n      return;\n    }\n\n    if (event.cancelable) {\n      event.preventDefault();\n    }\n\n    const tooltipData = getTooltipData({\n      clientX: touch.clientX,\n      clientY: touch.clientY,\n    });\n    const isPinned = tooltipStore.getState().pinned;\n\n    if (isPinned) {\n      unpin();\n      if (tooltipData) {\n        hover(touch, tooltipData);\n      }\n    } else if (tooltipData) {\n      pin(touch, tooltipData);\n    }\n  };\n\n  const onClick = (event: ReactMouseEvent<HTMLDivElement>) => {\n    if (!isOwnEvent(event)) {\n      return;\n    }\n\n    const tooltipData = getTooltipData(event.nativeEvent);\n    const isPinned = tooltipStore.getState().pinned;\n\n    if (isPinned) {\n      if (tooltipData) {\n        unpin();\n        hover(event.nativeEvent, tooltipData);\n      }\n    } else if (tooltipData) {\n      pin(event.nativeEvent, tooltipData);\n    }\n  };\n\n  return {\n    onPointerMove,\n    onPointerLeave,\n    onTouchStart,\n    onTouchEnd,\n    onClick,\n  };\n};\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,OAGK;AAEP,SAAS,kBAAkB;AAC3B,SAAS,kBAAkB;AAG3B,SAAS,yBAAyB;AAClC,SAAS,oBAAoB;AAMtB,MAAM,0BAA0B,CAAC,YAAqB;AAC3D,QAAM,eAAe,WAAW;AAChC,QAAM,EAAE,OAAO,KAAK,OAAO,YAAY,IAAI,kBAAkB;AAC7D,QAAM,EAAE,eAAe,IAAI;AAC3B,QAAM,mBAAmB,OAAwC,IAAI;AAErE,QAAM,gBAAgB,CAAC,UAA2C;AAChE,QAAI,CAAC,WAAW,KAAK,KAAK,aAAa,SAAS,EAAE,QAAQ;AACxD;AAAA,IACF;AAEA,UAAM,cAAc,eAAe,MAAM,WAAW;AACpD,QAAI,aAAa;AACf,YAAM,MAAM,aAAa,WAAW;AAAA,IACtC,OAAO;AACL,kBAAY;AAAA,IACd;AAAA,EACF;AAEA,QAAM,iBAAiB,MAAM;AAC3B,gBAAY;AAAA,EACd;AAEA,QAAM,eAAe,CAAC,UAA2C;AAC/D,QAAI,CAAC,WAAW,KAAK,GAAG;AACtB,uBAAiB,UAAU;AAC3B;AAAA,IACF;AACA,UAAM,QAAQ,MAAM,eAAe,CAAC;AACpC,QAAI,CAAC,OAAO;AACV;AAAA,IACF;AACA,qBAAiB,UAAU,EAAE,GAAG,MAAM,SAAS,GAAG,MAAM,QAAQ;AAAA,EAClE;AAOA,QAAM,aAAa,CAAC,UAA2C;AAC7D,QAAI,CAAC,WAAW,KAAK,GAAG;AACtB;AAAA,IACF;AAEA,UAAM,QAAQ,MAAM,eAAe,CAAC;AACpC,QAAI,CAAC,OAAO;AACV;AAAA,IACF;AAEA,UAAM,QAAQ,iBAAiB;AAC/B,qBAAiB,UAAU;AAE3B,QAAI,UAAU,QAAQ,CAAC,aAAa,OAAO,KAAK,GAAG;AACjD;AAAA,IACF;AAEA,QAAI,MAAM,YAAY;AACpB,YAAM,eAAe;AAAA,IACvB;AAEA,UAAM,cAAc,eAAe;AAAA,MACjC,SAAS,MAAM;AAAA,MACf,SAAS,MAAM;AAAA,IACjB,CAAC;AACD,UAAM,WAAW,aAAa,SAAS,EAAE;AAEzC,QAAI,UAAU;AACZ,YAAM;AACN,UAAI,aAAa;AACf,cAAM,OAAO,WAAW;AAAA,MAC1B;AAAA,IACF,WAAW,aAAa;AACtB,UAAI,OAAO,WAAW;AAAA,IACxB;AAAA,EACF;AAEA,QAAM,UAAU,CAAC,UAA2C;AAC1D,QAAI,CAAC,WAAW,KAAK,GAAG;AACtB;AAAA,IACF;AAEA,UAAM,cAAc,eAAe,MAAM,WAAW;AACpD,UAAM,WAAW,aAAa,SAAS,EAAE;AAEzC,QAAI,UAAU;AACZ,UAAI,aAAa;AACf,cAAM;AACN,cAAM,MAAM,aAAa,WAAW;AAAA,MACtC;AAAA,IACF,WAAW,aAAa;AACtB,UAAI,MAAM,aAAa,WAAW;AAAA,IACpC;AAAA,EACF;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/charts/core/hooks/usePreventScrollOnWheel.js

@@ -1,9 +1,10 @@
 import { useEffect } from "react";
+import { shouldConsumeWheelEvent } from "../components/interactions-overlay/utils/interaction-mode.js";
 const isWheelEvent = (event) => "metaKey" in event || "ctrlKey" in event;
-function usePreventScrollOnWheel(targetRef) {
+function usePreventScrollOnWheel(targetRef, mode = "explore") {
   useEffect(() => {
     const handleWheel = (event) => {
-      if (isWheelEvent(event) && (event.metaKey || event.ctrlKey)) {
+      if (isWheelEvent(event) && shouldConsumeWheelEvent(event, mode)) {
         event.preventDefault();
       }
     };
@@ -14,7 +15,7 @@ function usePreventScrollOnWheel(targetRef) {
     return () => {
       targetRefCurrent.removeEventListener("wheel", handleWheel);
     };
-  }, [targetRef]);
+  }, [targetRef, mode]);
 }
 export {
   usePreventScrollOnWheel

package/esm/charts/core/hooks/usePreventScrollOnWheel.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/core/hooks/usePreventScrollOnWheel.ts"],
-  "sourcesContent": ["import { useEffect, type RefObject } from 'react';\n\n/**\n *\n * @param event - The event to check if it is a WheelEvent\n * @returns True if the event is a WheelEvent, false otherwise\n */\n\nconst isWheelEvent = (event: Event): event is WheelEvent =>\n  'metaKey' in event || 'ctrlKey' in event;\n\n/**\n * A custom React hook that prevents the default scrolling behavior of the page\n * when the Command (Mac) or Control (Windows) key is pressed while using the mouse wheel.\n *\n * @param targetRef - An optional React ref object pointing to a target HTMLDivElement\n * or SVGRectElement. If not provided, the event listener will be attached to the\n * document.\n */\nexport function usePreventScrollOnWheel(\n  targetRef?: RefObject<HTMLDivElement | null>,\n) {\n  useEffect(() => {\n    const handleWheel = (event: Event) => {\n      if (isWheelEvent(event) && (event.metaKey || event.ctrlKey)) {\n        event.preventDefault();\n      }\n    };\n\n    const targetRefCurrent = targetRef?.current ?? document;\n\n    targetRefCurrent.addEventListener('wheel', handleWheel, {\n      passive: false,\n    });\n\n    return () => {\n      targetRefCurrent.removeEventListener('wheel', handleWheel);\n    };\n  }, [targetRef]);\n}\n"],
-  "mappings": "AAAA,SAAS,iBAAiC;AAQ1C,MAAM,eAAe,CAAC,UACpB,aAAa,SAAS,aAAa;AAU9B,SAAS,wBACd,WACA;AACA,YAAU,MAAM;AACd,UAAM,cAAc,CAAC,UAAiB;AACpC,UAAI,aAAa,KAAK,MAAM,MAAM,WAAW,MAAM,UAAU;AAC3D,cAAM,eAAe;AAAA,MACvB;AAAA,IACF;AAEA,UAAM,mBAAmB,WAAW,WAAW;AAE/C,qBAAiB,iBAAiB,SAAS,aAAa;AAAA,MACtD,SAAS;AAAA,IACX,CAAC;AAED,WAAO,MAAM;AACX,uBAAiB,oBAAoB,SAAS,WAAW;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAChB;",
+  "sourcesContent": ["import { useEffect, type RefObject } from 'react';\n\nimport type { InteractionMode } from '../components/interactions-overlay/types.js';\nimport { shouldConsumeWheelEvent } from '../components/interactions-overlay/utils/interaction-mode.js';\n\n/**\n *\n * @param event - The event to check if it is a WheelEvent\n * @returns True if the event is a WheelEvent, false otherwise\n */\n\nconst isWheelEvent = (event: Event): event is WheelEvent =>\n  'metaKey' in event || 'ctrlKey' in event;\n\n/**\n * A custom React hook that prevents the default scrolling behavior of the page\n * when the Command (Mac), Control (Windows), or Option/Alt key is pressed while\n * using the mouse wheel.\n *\n * @param targetRef - An optional React ref object pointing to a target HTMLDivElement\n * or SVGRectElement. If not provided, the event listener will be attached to the\n * document.\n * @param mode - The active interaction mode. When `pan` or `zoom` is active, wheel\n * events are consumed regardless of modifier keys. Defaults to `explore`, where only\n * a temporary modifier (Alt / Cmd / Ctrl) consumes the event.\n */\nexport function usePreventScrollOnWheel(\n  targetRef?: RefObject<HTMLDivElement | null>,\n  mode: InteractionMode = 'explore',\n) {\n  useEffect(() => {\n    const handleWheel = (event: Event) => {\n      if (isWheelEvent(event) && shouldConsumeWheelEvent(event, mode)) {\n        event.preventDefault();\n      }\n    };\n\n    const targetRefCurrent = targetRef?.current ?? document;\n\n    targetRefCurrent.addEventListener('wheel', handleWheel, {\n      passive: false,\n    });\n\n    return () => {\n      targetRefCurrent.removeEventListener('wheel', handleWheel);\n    };\n  }, [targetRef, mode]);\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiC;AAG1C,SAAS,+BAA+B;AAQxC,MAAM,eAAe,CAAC,UACpB,aAAa,SAAS,aAAa;AAc9B,SAAS,wBACd,WACA,OAAwB,WACxB;AACA,YAAU,MAAM;AACd,UAAM,cAAc,CAAC,UAAiB;AACpC,UAAI,aAAa,KAAK,KAAK,wBAAwB,OAAO,IAAI,GAAG;AAC/D,cAAM,eAAe;AAAA,MACvB;AAAA,IACF;AAEA,UAAM,mBAAmB,WAAW,WAAW;AAE/C,qBAAiB,iBAAiB,SAAS,aAAa;AAAA,MACtD,SAAS;AAAA,IACX,CAAC;AAED,WAAO,MAAM;AACX,uBAAiB,oBAAoB,SAAS,WAAW;AAAA,IAC3D;AAAA,EACF,GAAG,CAAC,WAAW,IAAI,CAAC;AACtB;",
   "names": []
 }

package/esm/charts/core/types/color-palette.js

@@ -1,17 +1,27 @@
 import Colors from "@dynatrace/strato-design-tokens/colors";
 const themedColoringOptions = [
   "categorical",
+  "categorical-vivid",
   "purple-rain",
   "swamps",
   "fireplace",
   "blue-steel",
   "rainbow",
+  "neon",
+  "aurora",
+  "overdrive",
+  "tide",
   "categorical-inverted",
+  "categorical-vivid-inverted",
   "purple-rain-inverted",
   "swamps-inverted",
   "fireplace-inverted",
   "blue-steel-inverted",
-  "rainbow-inverted"
+  "rainbow-inverted",
+  "neon-inverted",
+  "aurora-inverted",
+  "overdrive-inverted",
+  "tide-inverted"
 ];
 const automaticColoringOptions = [
   "log-status",

package/esm/charts/core/types/color-palette.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/core/types/color-palette.ts"],
-  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport type { ColoredRange } from './colored-range.js';\n\n/**\n * Set of color palette options for themed coloring\n *\n * @internal\n */\nexport const themedColoringOptions = [\n  'categorical',\n  'purple-rain',\n  'swamps',\n  'fireplace',\n  'blue-steel',\n  'rainbow',\n  'categorical-inverted',\n  'purple-rain-inverted',\n  'swamps-inverted',\n  'fireplace-inverted',\n  'blue-steel-inverted',\n  'rainbow-inverted',\n] as const;\n\n/**\n * Set of color palette options for automatic coloring\n *\n * @internal\n */\nexport const automaticColoringOptions = [\n  'log-status',\n  'log-level',\n  'apdex',\n  'security-risk-level',\n  'vulnerability-status',\n  'threshold',\n  'status',\n  'log-status-inverted',\n  'log-level-inverted',\n  'apdex-inverted',\n  'security-risk-level-inverted',\n  'vulnerability-status-inverted',\n  'threshold-inverted',\n  'status-inverted',\n] as const;\n\n/**\n * Set of color palette options for sequential coloring\n *\n * @internal\n */\nexport const sequentialColoringOptions = [\n  'pink-purple',\n  'blue-turquoise',\n  'blue',\n  'grey',\n  'moss',\n  'turquoise',\n  'pink',\n  'yellow',\n  'petrol',\n  'purple',\n  'pear',\n  'brown',\n  'red',\n  'magenta',\n  'orange',\n  'pink-purple-inverted',\n  'blue-turquoise-inverted',\n  'blue-inverted',\n  'grey-inverted',\n  'moss-inverted',\n  'turquoise-inverted',\n  'pink-inverted',\n  'yellow-inverted',\n  'petrol-inverted',\n  'purple-inverted',\n  'pear-inverted',\n  'brown-inverted',\n  'red-inverted',\n  'magenta-inverted',\n  'orange-inverted',\n] as const;\n\n/**\n * Set of color palette options for diverging coloring\n *\n * @internal\n */\nexport const divergingColoringOptions = [\n  'orange-blue',\n  'red-blue',\n  'red-purple',\n  'blue-moss',\n  'purple-yellow',\n  'red-green',\n  'orange-petrol',\n  'pink-green',\n  'orange-blue-inverted',\n  'red-blue-inverted',\n  'red-purple-inverted',\n  'blue-moss-inverted',\n  'purple-yellow-inverted',\n  'red-green-inverted',\n  'orange-petrol-inverted',\n  'pink-green-inverted',\n] as const;\n\n/**\n * Set of color palettes to be used in visualizations\n * @public\n */\nexport const colorPaletteOptions = [\n  ...themedColoringOptions,\n  ...automaticColoringOptions,\n  ...sequentialColoringOptions,\n  ...divergingColoringOptions,\n] as const;\n\n/**\n * Representation of a color palette, chosen from predefined options.\n * @public\n */\nexport type ColorPalette = (typeof colorPaletteOptions)[number];\n\n/**\n * Representation of a custom color palette\n * @public\n */\nexport type CustomColorPalette = Record<string, string> | string[];\n\n/** @internal */\nexport type ThemedColorPalette = (typeof themedColoringOptions)[number];\n\n/** @internal */\nexport type AutomaticColorPalette = (typeof automaticColoringOptions)[number];\n\n/** @internal */\nexport type SequentialColorPalette = (typeof sequentialColoringOptions)[number];\n\n/** @internal */\nexport type DivergingColorPalette = (typeof divergingColoringOptions)[number];\n\n/** @internal */\nexport type ColorPaletteDefinition = Record<string, { Default: string }>;\n\n/**\n * Mode in which bars are colored when single dimension data is shown\n * @public\n */\nexport const colorPaletteModeOptions = ['single-color', 'multi-color'] as const;\n/**\n * @public\n */\nexport type ColorPaletteMode = (typeof colorPaletteModeOptions)[number];\n\n/**\n * Color for a timeseries in different actions.\n * Internal use only. Do not use.\n * @public\n */\nexport interface ColorToken {\n  Default: string;\n}\n\n/**\n * @internal\n */\nexport interface ShapeColor {\n  color: string;\n  stroke?: string;\n  opacity: number;\n}\n\n/**\n * @internal\n *\n * @param colorPalette - to check if it is a custom color palette\n */\nexport function isCustomColorPalette(\n  colorPalette: ColorPalette | CustomColorPalette | ColoredRange[],\n): colorPalette is CustomColorPalette {\n  return (\n    typeof colorPalette === 'object' &&\n    colorPalette !== null &&\n    (!Array.isArray(colorPalette) || colorPalette.length > 0)\n  );\n}\n\n/**\n * @internal\n *\n * @param colorPalette - to check if it is a custom color record palette\n */\nexport function isCustomColorRecordPalette(\n  colorPalette: ColorPalette | CustomColorPalette,\n): colorPalette is Record<string, string> {\n  return !Array.isArray(colorPalette);\n}\n\n/**\n * @internal\n *\n * @param colorPalette - to check if the color palette should be applied automatically\n */\nexport const shouldApplyAutomatically = (\n  colorPalette: ColorPalette,\n): colorPalette is AutomaticColorPalette => {\n  // @ts-expect-error -- Typescript complains because `ColorPalette` is a superset of `AutomaticColorPalette`, but the condition is meant for runtime\n  return automaticColoringOptions.includes(colorPalette);\n};\n\n/** Map defining color palettes for log status. */\nexport const logStatusMap = {\n  error: Colors.Charts.Logstatus.Error.Default,\n  warning: Colors.Charts.Logstatus.Warning.Default,\n  info: Colors.Charts.Logstatus.Info.Default,\n  none: Colors.Charts.Logstatus.None.Default,\n  warn: Colors.Charts.Logstatus.Warning.Default, // alias for warning\n};\n\n/**\n * Map defining color palettes for log levels.\n * @internal\n */\nexport const logLevelMap = {\n  emergency: Colors.Charts.Loglevel.Emergency.Default,\n  error: Colors.Charts.Loglevel.Error.Default,\n  alert: Colors.Charts.Loglevel.Alert.Default,\n  critical: Colors.Charts.Loglevel.Critical.Default,\n  severe: Colors.Charts.Loglevel.Severe.Default,\n  warning: Colors.Charts.Loglevel.Warning.Default,\n  notice: Colors.Charts.Loglevel.Notice.Default,\n  info: Colors.Charts.Loglevel.Info.Default,\n  debug: Colors.Charts.Loglevel.Debug.Default,\n  none: Colors.Charts.Loglevel.None.Default,\n  warn: Colors.Charts.Loglevel.Warning.Default, // alias for warning\n};\n\n/**\n * Map defining color palettes for log status.\n * @internal\n */\nexport const logStatusWithAlias = {\n  error: Colors.Charts.Logstatus.Error,\n  warning: Colors.Charts.Logstatus.Warning,\n  info: Colors.Charts.Logstatus.Info,\n  none: Colors.Charts.Logstatus.None,\n  warn: Colors.Charts.Logstatus.Warning, // alias for warning\n};\n\n/**\n * Map defining color palettes for log levels.\n * @internal\n */\nexport const logLevelWithAlias = {\n  emergency: Colors.Charts.Loglevel.Emergency,\n  error: Colors.Charts.Loglevel.Error,\n  alert: Colors.Charts.Loglevel.Alert,\n  critical: Colors.Charts.Loglevel.Critical,\n  severe: Colors.Charts.Loglevel.Severe,\n  warning: Colors.Charts.Loglevel.Warning,\n  notice: Colors.Charts.Loglevel.Notice,\n  info: Colors.Charts.Loglevel.Info,\n  debug: Colors.Charts.Loglevel.Debug,\n  none: Colors.Charts.Loglevel.None,\n  warn: Colors.Charts.Loglevel.Warning, // alias for warning\n};\n\n/**\n * Map defining color palettes for apdex values.\n * @internal\n */\nexport const apdexMap = {\n  excellent: Colors.Charts.Apdex.Excellent.Default,\n  good: Colors.Charts.Apdex.Good.Default,\n  fair: Colors.Charts.Apdex.Fair.Default,\n  poor: Colors.Charts.Apdex.Poor.Default,\n  unacceptable: Colors.Charts.Apdex.Unacceptable.Default,\n};\n\n/**\n * Map defining color palettes for security risk levels.\n * @internal\n */\nexport const securityRiskLevelMap = {\n  muted: Colors.Charts.SecurityRiskLevel.Muted.Default,\n  critical: Colors.Charts.SecurityRiskLevel.Critical.Default,\n  high: Colors.Charts.SecurityRiskLevel.High.Default,\n  medium: Colors.Charts.SecurityRiskLevel.Medium.Default,\n  low: Colors.Charts.SecurityRiskLevel.Low.Default,\n  none: Colors.Charts.SecurityRiskLevel.None.Default,\n};\n\n/**\n * Map defining color palettes for vulnerability status.\n * @internal\n */\nexport const vulnerabilityStatusMap = {\n  muted: Colors.Charts.VulnerabilityStatus.Muted.Default,\n  resolved: Colors.Charts.VulnerabilityStatus.Resolved.Default,\n  affected: Colors.Charts.VulnerabilityStatus.Affected.Default,\n};\n\n/**\n * Map defining color palettes for threshold values.\n * @internal\n */\nexport const thresholdMap = {\n  good: Colors.Charts.Threshold.Good.Default,\n  warning: Colors.Charts.Threshold.Warning.Default,\n  bad: Colors.Charts.Threshold.Bad.Default,\n};\n\n/**\n * Map defining color palettes for threshold values.\n * @internal\n */\nexport const statusMap = {\n  ideal: Colors.Charts.Status.Ideal.Default,\n  good: Colors.Charts.Status.Good.Default,\n  neutral: Colors.Charts.Status.Neutral.Default,\n  warning: Colors.Charts.Status.Warning.Default,\n  critical: Colors.Charts.Status.Critical.Default,\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport type { ColoredRange } from './colored-range.js';\n\n/**\n * Set of color palette options for themed coloring\n *\n * @internal\n */\nexport const themedColoringOptions = [\n  'categorical',\n  'categorical-vivid',\n  'purple-rain',\n  'swamps',\n  'fireplace',\n  'blue-steel',\n  'rainbow',\n  'neon',\n  'aurora',\n  'overdrive',\n  'tide',\n  'categorical-inverted',\n  'categorical-vivid-inverted',\n  'purple-rain-inverted',\n  'swamps-inverted',\n  'fireplace-inverted',\n  'blue-steel-inverted',\n  'rainbow-inverted',\n  'neon-inverted',\n  'aurora-inverted',\n  'overdrive-inverted',\n  'tide-inverted',\n] as const;\n\n/**\n * Set of color palette options for automatic coloring\n *\n * @internal\n */\nexport const automaticColoringOptions = [\n  'log-status',\n  'log-level',\n  'apdex',\n  'security-risk-level',\n  'vulnerability-status',\n  'threshold',\n  'status',\n  'log-status-inverted',\n  'log-level-inverted',\n  'apdex-inverted',\n  'security-risk-level-inverted',\n  'vulnerability-status-inverted',\n  'threshold-inverted',\n  'status-inverted',\n] as const;\n\n/**\n * Set of color palette options for sequential coloring\n *\n * @internal\n */\nexport const sequentialColoringOptions = [\n  'pink-purple',\n  'blue-turquoise',\n  'blue',\n  'grey',\n  'moss',\n  'turquoise',\n  'pink',\n  'yellow',\n  'petrol',\n  'purple',\n  'pear',\n  'brown',\n  'red',\n  'magenta',\n  'orange',\n  'pink-purple-inverted',\n  'blue-turquoise-inverted',\n  'blue-inverted',\n  'grey-inverted',\n  'moss-inverted',\n  'turquoise-inverted',\n  'pink-inverted',\n  'yellow-inverted',\n  'petrol-inverted',\n  'purple-inverted',\n  'pear-inverted',\n  'brown-inverted',\n  'red-inverted',\n  'magenta-inverted',\n  'orange-inverted',\n] as const;\n\n/**\n * Set of color palette options for diverging coloring\n *\n * @internal\n */\nexport const divergingColoringOptions = [\n  'orange-blue',\n  'red-blue',\n  'red-purple',\n  'blue-moss',\n  'purple-yellow',\n  'red-green',\n  'orange-petrol',\n  'pink-green',\n  'orange-blue-inverted',\n  'red-blue-inverted',\n  'red-purple-inverted',\n  'blue-moss-inverted',\n  'purple-yellow-inverted',\n  'red-green-inverted',\n  'orange-petrol-inverted',\n  'pink-green-inverted',\n] as const;\n\n/**\n * Set of color palettes to be used in visualizations\n * @public\n */\nexport const colorPaletteOptions = [\n  ...themedColoringOptions,\n  ...automaticColoringOptions,\n  ...sequentialColoringOptions,\n  ...divergingColoringOptions,\n] as const;\n\n/**\n * Representation of a color palette, chosen from predefined options.\n * @public\n */\nexport type ColorPalette = (typeof colorPaletteOptions)[number];\n\n/**\n * Representation of a custom color palette\n * @public\n */\nexport type CustomColorPalette = Record<string, string> | string[];\n\n/** @internal */\nexport type ThemedColorPalette = (typeof themedColoringOptions)[number];\n\n/** @internal */\nexport type AutomaticColorPalette = (typeof automaticColoringOptions)[number];\n\n/** @internal */\nexport type SequentialColorPalette = (typeof sequentialColoringOptions)[number];\n\n/** @internal */\nexport type DivergingColorPalette = (typeof divergingColoringOptions)[number];\n\n/** @internal */\nexport type ColorPaletteDefinition = Record<string, { Default: string }>;\n\n/**\n * Mode in which bars are colored when single dimension data is shown\n * @public\n */\nexport const colorPaletteModeOptions = ['single-color', 'multi-color'] as const;\n/**\n * @public\n */\nexport type ColorPaletteMode = (typeof colorPaletteModeOptions)[number];\n\n/**\n * Color for a timeseries in different actions.\n * Internal use only. Do not use.\n * @public\n */\nexport interface ColorToken {\n  Default: string;\n}\n\n/**\n * @internal\n */\nexport interface ShapeColor {\n  color: string;\n  stroke?: string;\n  opacity: number;\n}\n\n/**\n * @internal\n *\n * @param colorPalette - to check if it is a custom color palette\n */\nexport function isCustomColorPalette(\n  colorPalette: ColorPalette | CustomColorPalette | ColoredRange[],\n): colorPalette is CustomColorPalette {\n  return (\n    typeof colorPalette === 'object' &&\n    colorPalette !== null &&\n    (!Array.isArray(colorPalette) || colorPalette.length > 0)\n  );\n}\n\n/**\n * @internal\n *\n * @param colorPalette - to check if it is a custom color record palette\n */\nexport function isCustomColorRecordPalette(\n  colorPalette: ColorPalette | CustomColorPalette,\n): colorPalette is Record<string, string> {\n  return !Array.isArray(colorPalette);\n}\n\n/**\n * @internal\n *\n * @param colorPalette - to check if the color palette should be applied automatically\n */\nexport const shouldApplyAutomatically = (\n  colorPalette: ColorPalette,\n): colorPalette is AutomaticColorPalette => {\n  // @ts-expect-error -- Typescript complains because `ColorPalette` is a superset of `AutomaticColorPalette`, but the condition is meant for runtime\n  return automaticColoringOptions.includes(colorPalette);\n};\n\n/** Map defining color palettes for log status. */\nexport const logStatusMap = {\n  error: Colors.Charts.Logstatus.Error.Default,\n  warning: Colors.Charts.Logstatus.Warning.Default,\n  info: Colors.Charts.Logstatus.Info.Default,\n  none: Colors.Charts.Logstatus.None.Default,\n  warn: Colors.Charts.Logstatus.Warning.Default, // alias for warning\n};\n\n/**\n * Map defining color palettes for log levels.\n * @internal\n */\nexport const logLevelMap = {\n  emergency: Colors.Charts.Loglevel.Emergency.Default,\n  error: Colors.Charts.Loglevel.Error.Default,\n  alert: Colors.Charts.Loglevel.Alert.Default,\n  critical: Colors.Charts.Loglevel.Critical.Default,\n  severe: Colors.Charts.Loglevel.Severe.Default,\n  warning: Colors.Charts.Loglevel.Warning.Default,\n  notice: Colors.Charts.Loglevel.Notice.Default,\n  info: Colors.Charts.Loglevel.Info.Default,\n  debug: Colors.Charts.Loglevel.Debug.Default,\n  none: Colors.Charts.Loglevel.None.Default,\n  warn: Colors.Charts.Loglevel.Warning.Default, // alias for warning\n};\n\n/**\n * Map defining color palettes for log status.\n * @internal\n */\nexport const logStatusWithAlias = {\n  error: Colors.Charts.Logstatus.Error,\n  warning: Colors.Charts.Logstatus.Warning,\n  info: Colors.Charts.Logstatus.Info,\n  none: Colors.Charts.Logstatus.None,\n  warn: Colors.Charts.Logstatus.Warning, // alias for warning\n};\n\n/**\n * Map defining color palettes for log levels.\n * @internal\n */\nexport const logLevelWithAlias = {\n  emergency: Colors.Charts.Loglevel.Emergency,\n  error: Colors.Charts.Loglevel.Error,\n  alert: Colors.Charts.Loglevel.Alert,\n  critical: Colors.Charts.Loglevel.Critical,\n  severe: Colors.Charts.Loglevel.Severe,\n  warning: Colors.Charts.Loglevel.Warning,\n  notice: Colors.Charts.Loglevel.Notice,\n  info: Colors.Charts.Loglevel.Info,\n  debug: Colors.Charts.Loglevel.Debug,\n  none: Colors.Charts.Loglevel.None,\n  warn: Colors.Charts.Loglevel.Warning, // alias for warning\n};\n\n/**\n * Map defining color palettes for apdex values.\n * @internal\n */\nexport const apdexMap = {\n  excellent: Colors.Charts.Apdex.Excellent.Default,\n  good: Colors.Charts.Apdex.Good.Default,\n  fair: Colors.Charts.Apdex.Fair.Default,\n  poor: Colors.Charts.Apdex.Poor.Default,\n  unacceptable: Colors.Charts.Apdex.Unacceptable.Default,\n};\n\n/**\n * Map defining color palettes for security risk levels.\n * @internal\n */\nexport const securityRiskLevelMap = {\n  muted: Colors.Charts.SecurityRiskLevel.Muted.Default,\n  critical: Colors.Charts.SecurityRiskLevel.Critical.Default,\n  high: Colors.Charts.SecurityRiskLevel.High.Default,\n  medium: Colors.Charts.SecurityRiskLevel.Medium.Default,\n  low: Colors.Charts.SecurityRiskLevel.Low.Default,\n  none: Colors.Charts.SecurityRiskLevel.None.Default,\n};\n\n/**\n * Map defining color palettes for vulnerability status.\n * @internal\n */\nexport const vulnerabilityStatusMap = {\n  muted: Colors.Charts.VulnerabilityStatus.Muted.Default,\n  resolved: Colors.Charts.VulnerabilityStatus.Resolved.Default,\n  affected: Colors.Charts.VulnerabilityStatus.Affected.Default,\n};\n\n/**\n * Map defining color palettes for threshold values.\n * @internal\n */\nexport const thresholdMap = {\n  good: Colors.Charts.Threshold.Good.Default,\n  warning: Colors.Charts.Threshold.Warning.Default,\n  bad: Colors.Charts.Threshold.Bad.Default,\n};\n\n/**\n * Map defining color palettes for threshold values.\n * @internal\n */\nexport const statusMap = {\n  ideal: Colors.Charts.Status.Ideal.Default,\n  good: Colors.Charts.Status.Good.Default,\n  neutral: Colors.Charts.Status.Neutral.Default,\n  warning: Colors.Charts.Status.Warning.Default,\n  critical: Colors.Charts.Status.Critical.Default,\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/core/types/color-palettes-definitions.js

@@ -17,11 +17,16 @@ const colorPalettesWithAlias = prepareInvertedColorPalette({
 });
 const themedColoringMap = prepareInvertedColorPalette({
   categorical: Colors.Charts.Categorical,
+  "categorical-vivid": Colors.Charts.CategoricalVivid,
   "purple-rain": Colors.Charts.CategoricalThemed.PurpleRain,
   swamps: Colors.Charts.CategoricalThemed.Swamps,
   fireplace: Colors.Charts.CategoricalThemed.Fireplace,
   "blue-steel": Colors.Charts.CategoricalThemed.BlueSteel,
-  rainbow: Colors.Charts.Rainbow
+  rainbow: Colors.Charts.Rainbow,
+  neon: Colors.Charts.CategoricalThemed.Neon,
+  aurora: Colors.Charts.CategoricalThemed.Aurora,
+  overdrive: Colors.Charts.CategoricalThemed.Overdrive,
+  tide: Colors.Charts.CategoricalThemed.Tide
 });
 const internalAutomaticColoringMap = prepareInvertedColorPalette({
   apdex: Colors.Charts.Apdex,

package/esm/charts/core/types/color-palettes-definitions.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/core/types/color-palettes-definitions.ts"],
-  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport {\n  apdexMap,\n  type AutomaticColorPalette,\n  type ColorPalette,\n  type ColorPaletteDefinition,\n  type DivergingColorPalette,\n  logLevelMap,\n  logLevelWithAlias,\n  logStatusMap,\n  logStatusWithAlias,\n  securityRiskLevelMap,\n  type SequentialColorPalette,\n  statusMap,\n  type ThemedColorPalette,\n  thresholdMap,\n  vulnerabilityStatusMap,\n} from './color-palette.js';\nimport { prepareInvertedColorPalette } from '../utils/prepare-inverted-color-palette.js';\n\n/**\n * @internal\n */\nexport const colorPalettesWithAlias = prepareInvertedColorPalette({\n  'log-status': logStatusWithAlias,\n  'log-level': logLevelWithAlias,\n} as Record<string, ColorPaletteDefinition>);\n/**\n * Map associating themed coloring options with their respective color palettes.\n * @internal\n */\nconst themedColoringMap: Record<ThemedColorPalette, ColorPaletteDefinition> =\n  prepareInvertedColorPalette({\n    categorical: Colors.Charts.Categorical,\n    'purple-rain': Colors.Charts.CategoricalThemed.PurpleRain,\n    swamps: Colors.Charts.CategoricalThemed.Swamps,\n    fireplace: Colors.Charts.CategoricalThemed.Fireplace,\n    'blue-steel': Colors.Charts.CategoricalThemed.BlueSteel,\n    rainbow: Colors.Charts.Rainbow,\n  } as Record<string, ColorPaletteDefinition>);\n/**\n * Map associating automatic coloring options with their respective color palettes.\n * @internal\n */\nconst internalAutomaticColoringMap: Record<\n  AutomaticColorPalette,\n  ColorPaletteDefinition\n> = prepareInvertedColorPalette({\n  apdex: Colors.Charts.Apdex,\n  'security-risk-level': Colors.Charts.SecurityRiskLevel,\n  'vulnerability-status': Colors.Charts.VulnerabilityStatus,\n  threshold: Colors.Charts.Threshold,\n  status: Colors.Charts.Status,\n} as Record<string, ColorPaletteDefinition>);\n/**\n * Map associating automatic coloring options with their respective color palettes.\n * @internal\n */\nexport const automaticColoringMap: Record<\n  AutomaticColorPalette,\n  Record<string, string>\n> = prepareInvertedColorPalette({\n  'log-status': logStatusMap,\n  'log-level': logLevelMap,\n  apdex: apdexMap,\n  'security-risk-level': securityRiskLevelMap,\n  'vulnerability-status': vulnerabilityStatusMap,\n  threshold: thresholdMap,\n  status: statusMap,\n} as Record<string, Record<string, string>>);\n/**\n * Map associating sequential coloring options with their respective color palettes.\n * @internal\n */\nexport const sequentialColoringMap: Record<\n  SequentialColorPalette,\n  ColorPaletteDefinition\n> = prepareInvertedColorPalette({\n  'pink-purple': Colors.Charts.Sequential.PinkPurple,\n  'blue-turquoise': Colors.Charts.Sequential.BlueTurquoise,\n  blue: Colors.Charts.Sequential.Blue,\n  grey: Colors.Charts.Sequential.Grey,\n  moss: Colors.Charts.Sequential.Moss,\n  turquoise: Colors.Charts.Sequential.Turquoise,\n  pink: Colors.Charts.Sequential.Pink,\n  yellow: Colors.Charts.Sequential.Yellow,\n  petrol: Colors.Charts.Sequential.Petrol,\n  purple: Colors.Charts.Sequential.Purple,\n  pear: Colors.Charts.Sequential.Pear,\n  brown: Colors.Charts.Sequential.Brown,\n  red: Colors.Charts.Sequential.Red,\n  magenta: Colors.Charts.Sequential.Magenta,\n  orange: Colors.Charts.Sequential.Orange,\n} as Record<string, ColorPaletteDefinition>);\n/**\n * Map associating diverging coloring options with their respective color palettes.\n * @internal\n */\nexport const divergingColoringMap: Record<\n  DivergingColorPalette,\n  ColorPaletteDefinition\n> = prepareInvertedColorPalette({\n  'orange-blue': Colors.Charts.Diverging.OrangeBlue,\n  'red-blue': Colors.Charts.Diverging.RedBlue,\n  'red-purple': Colors.Charts.Diverging.RedPurple,\n  'blue-moss': Colors.Charts.Diverging.BlueMoss,\n  'purple-yellow': Colors.Charts.Diverging.PurpleYellow,\n  'red-green': Colors.Charts.Diverging.RedGreen,\n  'orange-petrol': Colors.Charts.Diverging.OrangePetrol,\n  'pink-green': Colors.Charts.Diverging.PinkGreen,\n} as Record<string, ColorPaletteDefinition>);\n/**\n * Map associating all color palette options with their respective color palettes.\n * @internal\n */\nexport const colorPaletteMap: Record<ColorPalette, ColorPaletteDefinition> = {\n  ...themedColoringMap,\n  ...internalAutomaticColoringMap,\n  ...colorPalettesWithAlias,\n  ...sequentialColoringMap,\n  ...divergingColoringMap,\n};\n"],
-  "mappings": "AAAA,OAAO,YAAY;AAEnB;AAAA,EACE;AAAA,EAKA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mCAAmC;AAKrC,MAAM,yBAAyB,4BAA4B;AAAA,EAChE,cAAc;AAAA,EACd,aAAa;AACf,CAA2C;AAK3C,MAAM,oBACJ,4BAA4B;AAAA,EAC1B,aAAa,OAAO,OAAO;AAAA,EAC3B,eAAe,OAAO,OAAO,kBAAkB;AAAA,EAC/C,QAAQ,OAAO,OAAO,kBAAkB;AAAA,EACxC,WAAW,OAAO,OAAO,kBAAkB;AAAA,EAC3C,cAAc,OAAO,OAAO,kBAAkB;AAAA,EAC9C,SAAS,OAAO,OAAO;AACzB,CAA2C;AAK7C,MAAM,+BAGF,4BAA4B;AAAA,EAC9B,OAAO,OAAO,OAAO;AAAA,EACrB,uBAAuB,OAAO,OAAO;AAAA,EACrC,wBAAwB,OAAO,OAAO;AAAA,EACtC,WAAW,OAAO,OAAO;AAAA,EACzB,QAAQ,OAAO,OAAO;AACxB,CAA2C;AAKpC,MAAM,uBAGT,4BAA4B;AAAA,EAC9B,cAAc;AAAA,EACd,aAAa;AAAA,EACb,OAAO;AAAA,EACP,uBAAuB;AAAA,EACvB,wBAAwB;AAAA,EACxB,WAAW;AAAA,EACX,QAAQ;AACV,CAA2C;AAKpC,MAAM,wBAGT,4BAA4B;AAAA,EAC9B,eAAe,OAAO,OAAO,WAAW;AAAA,EACxC,kBAAkB,OAAO,OAAO,WAAW;AAAA,EAC3C,MAAM,OAAO,OAAO,WAAW;AAAA,EAC/B,MAAM,OAAO,OAAO,WAAW;AAAA,EAC/B,MAAM,OAAO,OAAO,WAAW;AAAA,EAC/B,WAAW,OAAO,OAAO,WAAW;AAAA,EACpC,MAAM,OAAO,OAAO,WAAW;AAAA,EAC/B,QAAQ,OAAO,OAAO,WAAW;AAAA,EACjC,QAAQ,OAAO,OAAO,WAAW;AAAA,EACjC,QAAQ,OAAO,OAAO,WAAW;AAAA,EACjC,MAAM,OAAO,OAAO,WAAW;AAAA,EAC/B,OAAO,OAAO,OAAO,WAAW;AAAA,EAChC,KAAK,OAAO,OAAO,WAAW;AAAA,EAC9B,SAAS,OAAO,OAAO,WAAW;AAAA,EAClC,QAAQ,OAAO,OAAO,WAAW;AACnC,CAA2C;AAKpC,MAAM,uBAGT,4BAA4B;AAAA,EAC9B,eAAe,OAAO,OAAO,UAAU;AAAA,EACvC,YAAY,OAAO,OAAO,UAAU;AAAA,EACpC,cAAc,OAAO,OAAO,UAAU;AAAA,EACtC,aAAa,OAAO,OAAO,UAAU;AAAA,EACrC,iBAAiB,OAAO,OAAO,UAAU;AAAA,EACzC,aAAa,OAAO,OAAO,UAAU;AAAA,EACrC,iBAAiB,OAAO,OAAO,UAAU;AAAA,EACzC,cAAc,OAAO,OAAO,UAAU;AACxC,CAA2C;AAKpC,MAAM,kBAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;",
+  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport {\n  apdexMap,\n  type AutomaticColorPalette,\n  type ColorPalette,\n  type ColorPaletteDefinition,\n  type DivergingColorPalette,\n  logLevelMap,\n  logLevelWithAlias,\n  logStatusMap,\n  logStatusWithAlias,\n  securityRiskLevelMap,\n  type SequentialColorPalette,\n  statusMap,\n  type ThemedColorPalette,\n  thresholdMap,\n  vulnerabilityStatusMap,\n} from './color-palette.js';\nimport { prepareInvertedColorPalette } from '../utils/prepare-inverted-color-palette.js';\n\n/**\n * @internal\n */\nexport const colorPalettesWithAlias = prepareInvertedColorPalette({\n  'log-status': logStatusWithAlias,\n  'log-level': logLevelWithAlias,\n} as Record<string, ColorPaletteDefinition>);\n/**\n * Map associating themed coloring options with their respective color palettes.\n * @internal\n */\nconst themedColoringMap: Record<ThemedColorPalette, ColorPaletteDefinition> =\n  prepareInvertedColorPalette({\n    categorical: Colors.Charts.Categorical,\n    'categorical-vivid': Colors.Charts.CategoricalVivid,\n    'purple-rain': Colors.Charts.CategoricalThemed.PurpleRain,\n    swamps: Colors.Charts.CategoricalThemed.Swamps,\n    fireplace: Colors.Charts.CategoricalThemed.Fireplace,\n    'blue-steel': Colors.Charts.CategoricalThemed.BlueSteel,\n    rainbow: Colors.Charts.Rainbow,\n    neon: Colors.Charts.CategoricalThemed.Neon,\n    aurora: Colors.Charts.CategoricalThemed.Aurora,\n    overdrive: Colors.Charts.CategoricalThemed.Overdrive,\n    tide: Colors.Charts.CategoricalThemed.Tide,\n  } as Record<string, ColorPaletteDefinition>);\n/**\n * Map associating automatic coloring options with their respective color palettes.\n * @internal\n */\nconst internalAutomaticColoringMap: Record<\n  AutomaticColorPalette,\n  ColorPaletteDefinition\n> = prepareInvertedColorPalette({\n  apdex: Colors.Charts.Apdex,\n  'security-risk-level': Colors.Charts.SecurityRiskLevel,\n  'vulnerability-status': Colors.Charts.VulnerabilityStatus,\n  threshold: Colors.Charts.Threshold,\n  status: Colors.Charts.Status,\n} as Record<string, ColorPaletteDefinition>);\n/**\n * Map associating automatic coloring options with their respective color palettes.\n * @internal\n */\nexport const automaticColoringMap: Record<\n  AutomaticColorPalette,\n  Record<string, string>\n> = prepareInvertedColorPalette({\n  'log-status': logStatusMap,\n  'log-level': logLevelMap,\n  apdex: apdexMap,\n  'security-risk-level': securityRiskLevelMap,\n  'vulnerability-status': vulnerabilityStatusMap,\n  threshold: thresholdMap,\n  status: statusMap,\n} as Record<string, Record<string, string>>);\n/**\n * Map associating sequential coloring options with their respective color palettes.\n * @internal\n */\nexport const sequentialColoringMap: Record<\n  SequentialColorPalette,\n  ColorPaletteDefinition\n> = prepareInvertedColorPalette({\n  'pink-purple': Colors.Charts.Sequential.PinkPurple,\n  'blue-turquoise': Colors.Charts.Sequential.BlueTurquoise,\n  blue: Colors.Charts.Sequential.Blue,\n  grey: Colors.Charts.Sequential.Grey,\n  moss: Colors.Charts.Sequential.Moss,\n  turquoise: Colors.Charts.Sequential.Turquoise,\n  pink: Colors.Charts.Sequential.Pink,\n  yellow: Colors.Charts.Sequential.Yellow,\n  petrol: Colors.Charts.Sequential.Petrol,\n  purple: Colors.Charts.Sequential.Purple,\n  pear: Colors.Charts.Sequential.Pear,\n  brown: Colors.Charts.Sequential.Brown,\n  red: Colors.Charts.Sequential.Red,\n  magenta: Colors.Charts.Sequential.Magenta,\n  orange: Colors.Charts.Sequential.Orange,\n} as Record<string, ColorPaletteDefinition>);\n/**\n * Map associating diverging coloring options with their respective color palettes.\n * @internal\n */\nexport const divergingColoringMap: Record<\n  DivergingColorPalette,\n  ColorPaletteDefinition\n> = prepareInvertedColorPalette({\n  'orange-blue': Colors.Charts.Diverging.OrangeBlue,\n  'red-blue': Colors.Charts.Diverging.RedBlue,\n  'red-purple': Colors.Charts.Diverging.RedPurple,\n  'blue-moss': Colors.Charts.Diverging.BlueMoss,\n  'purple-yellow': Colors.Charts.Diverging.PurpleYellow,\n  'red-green': Colors.Charts.Diverging.RedGreen,\n  'orange-petrol': Colors.Charts.Diverging.OrangePetrol,\n  'pink-green': Colors.Charts.Diverging.PinkGreen,\n} as Record<string, ColorPaletteDefinition>);\n/**\n * Map associating all color palette options with their respective color palettes.\n * @internal\n */\nexport const colorPaletteMap: Record<ColorPalette, ColorPaletteDefinition> = {\n  ...themedColoringMap,\n  ...internalAutomaticColoringMap,\n  ...colorPalettesWithAlias,\n  ...sequentialColoringMap,\n  ...divergingColoringMap,\n};\n"],
+  "mappings": "AAAA,OAAO,YAAY;AAEnB;AAAA,EACE;AAAA,EAKA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EAEA;AAAA,EAEA;AAAA,EACA;AAAA,OACK;AACP,SAAS,mCAAmC;AAKrC,MAAM,yBAAyB,4BAA4B;AAAA,EAChE,cAAc;AAAA,EACd,aAAa;AACf,CAA2C;AAK3C,MAAM,oBACJ,4BAA4B;AAAA,EAC1B,aAAa,OAAO,OAAO;AAAA,EAC3B,qBAAqB,OAAO,OAAO;AAAA,EACnC,eAAe,OAAO,OAAO,kBAAkB;AAAA,EAC/C,QAAQ,OAAO,OAAO,kBAAkB;AAAA,EACxC,WAAW,OAAO,OAAO,kBAAkB;AAAA,EAC3C,cAAc,OAAO,OAAO,kBAAkB;AAAA,EAC9C,SAAS,OAAO,OAAO;AAAA,EACvB,MAAM,OAAO,OAAO,kBAAkB;AAAA,EACtC,QAAQ,OAAO,OAAO,kBAAkB;AAAA,EACxC,WAAW,OAAO,OAAO,kBAAkB;AAAA,EAC3C,MAAM,OAAO,OAAO,kBAAkB;AACxC,CAA2C;AAK7C,MAAM,+BAGF,4BAA4B;AAAA,EAC9B,OAAO,OAAO,OAAO;AAAA,EACrB,uBAAuB,OAAO,OAAO;AAAA,EACrC,wBAAwB,OAAO,OAAO;AAAA,EACtC,WAAW,OAAO,OAAO;AAAA,EACzB,QAAQ,OAAO,OAAO;AACxB,CAA2C;AAKpC,MAAM,uBAGT,4BAA4B;AAAA,EAC9B,cAAc;AAAA,EACd,aAAa;AAAA,EACb,OAAO;AAAA,EACP,uBAAuB;AAAA,EACvB,wBAAwB;AAAA,EACxB,WAAW;AAAA,EACX,QAAQ;AACV,CAA2C;AAKpC,MAAM,wBAGT,4BAA4B;AAAA,EAC9B,eAAe,OAAO,OAAO,WAAW;AAAA,EACxC,kBAAkB,OAAO,OAAO,WAAW;AAAA,EAC3C,MAAM,OAAO,OAAO,WAAW;AAAA,EAC/B,MAAM,OAAO,OAAO,WAAW;AAAA,EAC/B,MAAM,OAAO,OAAO,WAAW;AAAA,EAC/B,WAAW,OAAO,OAAO,WAAW;AAAA,EACpC,MAAM,OAAO,OAAO,WAAW;AAAA,EAC/B,QAAQ,OAAO,OAAO,WAAW;AAAA,EACjC,QAAQ,OAAO,OAAO,WAAW;AAAA,EACjC,QAAQ,OAAO,OAAO,WAAW;AAAA,EACjC,MAAM,OAAO,OAAO,WAAW;AAAA,EAC/B,OAAO,OAAO,OAAO,WAAW;AAAA,EAChC,KAAK,OAAO,OAAO,WAAW;AAAA,EAC9B,SAAS,OAAO,OAAO,WAAW;AAAA,EAClC,QAAQ,OAAO,OAAO,WAAW;AACnC,CAA2C;AAKpC,MAAM,uBAGT,4BAA4B;AAAA,EAC9B,eAAe,OAAO,OAAO,UAAU;AAAA,EACvC,YAAY,OAAO,OAAO,UAAU;AAAA,EACpC,cAAc,OAAO,OAAO,UAAU;AAAA,EACtC,aAAa,OAAO,OAAO,UAAU;AAAA,EACrC,iBAAiB,OAAO,OAAO,UAAU;AAAA,EACzC,aAAa,OAAO,OAAO,UAAU;AAAA,EACrC,iBAAiB,OAAO,OAAO,UAAU;AAAA,EACzC,cAAc,OAAO,OAAO,UAAU;AACxC,CAA2C;AAKpC,MAAM,kBAAgE;AAAA,EAC3E,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AAAA,EACH,GAAG;AACL;",
   "names": []
 }

package/esm/charts/core/typographyStyles.css

@@ -1,3 +1,3 @@
-._18u8ey50-3-13-2 {
+._18u8ey50-3-14-0 {
   font-feature-settings: 'ss01';
 }

package/esm/charts/core/typographyStyles.sty.js

@@ -1,5 +1,5 @@
 import "./typographyStyles.css";
-var replaceSlashedZero = "_18u8ey50-3-13-2";
+var replaceSlashedZero = "_18u8ey50-3-14-0";
 export {
   replaceSlashedZero
 };

package/esm/charts/core/typographyStyles.sty.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/charts/core/typographyStyles.css.ts"],
-  "sourcesContent": ["import './typographyStyles.css';\nexport var replaceSlashedZero = '_18u8ey50-3-13-2';"],
+  "sourcesContent": ["import './typographyStyles.css';\nexport var replaceSlashedZero = '_18u8ey50-3-14-0';"],
   "mappings": "AAAA,OAAO;AACA,IAAI,qBAAqB;",
   "names": []
 }

package/esm/charts/core/utils/apply-gap-policy.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/core/utils/apply-gap-policy.ts"],
-  "sourcesContent": ["import { convertTimeThreshold } from './timeThreshold.js';\nimport type {\n  NumericalGapPolicy,\n  NumericalThresholdGapPolicy,\n  ThresholdGapPolicy,\n  TimeGapPolicy,\n} from '../types/gap-policy.js';\n\n/**\n * Gets the threshold value in milliseconds.\n *\n * If gapPolicy === 'gap' or the threshold is invalid, it fallbacks to 0 (in that way, every gap will remain as gap)\n *\n * @param gapPolicy - given GapPolicy\n * @returns\n */\nexport function getThresholdValue(gapPolicy: TimeGapPolicy) {\n  return isThresholdGapPolicy(gapPolicy)\n    ? convertTimeThreshold(gapPolicy.threshold) ?? 0\n    : 0;\n}\n\n/**\n * Type guard to ensure we are working with the ThresholdGapPolicy.\n *\n * @param gapPolicy - given GapPolicy\n * @returns\n */\nfunction isThresholdGapPolicy(\n  gapPolicy: TimeGapPolicy,\n): gapPolicy is ThresholdGapPolicy {\n  return typeof gapPolicy === 'object' && 'threshold' in gapPolicy;\n}\n\nexport function getNumericalThresholdValue(gapPolicy: NumericalGapPolicy) {\n  return isNumericalThresholdGapPolicy(gapPolicy) &&\n    Number.isFinite(gapPolicy.threshold)\n    ? gapPolicy.threshold\n    : 0;\n}\n\nfunction isNumericalThresholdGapPolicy(\n  gapPolicy: NumericalGapPolicy,\n): gapPolicy is NumericalThresholdGapPolicy {\n  return typeof gapPolicy === 'object' && 'threshold' in gapPolicy;\n}\n"],
-  "mappings": "AAAA,SAAS,4BAA4B;AAgB9B,SAAS,kBAAkB,WAA0B;AAC1D,SAAO,qBAAqB,SAAS,IACjC,qBAAqB,UAAU,SAAS,KAAK,IAC7C;AACN;AAQA,SAAS,qBACP,WACiC;AACjC,SAAO,OAAO,cAAc,YAAY,eAAe;AACzD;AAEO,SAAS,2BAA2B,WAA+B;AACxE,SAAO,8BAA8B,SAAS,KAC5C,OAAO,SAAS,UAAU,SAAS,IACjC,UAAU,YACV;AACN;AAEA,SAAS,8BACP,WAC0C;AAC1C,SAAO,OAAO,cAAc,YAAY,eAAe;AACzD;",
+  "sourcesContent": ["import { convertTimeThreshold } from './timeThreshold.js';\nimport type {\n  NumericalGapPolicy,\n  NumericalThresholdGapPolicy,\n  ThresholdGapPolicy,\n  TimeGapPolicy,\n} from '../types/gap-policy.js';\n\n/**\n * Gets the threshold value in milliseconds.\n *\n * If gapPolicy === 'gap' or the threshold is invalid, it fallbacks to 0 (in that way, every gap will remain as gap)\n *\n * @param gapPolicy - given GapPolicy\n * @returns\n */\nexport function getThresholdValue(gapPolicy: TimeGapPolicy) {\n  return isThresholdGapPolicy(gapPolicy)\n    ? (convertTimeThreshold(gapPolicy.threshold) ?? 0)\n    : 0;\n}\n\n/**\n * Type guard to ensure we are working with the ThresholdGapPolicy.\n *\n * @param gapPolicy - given GapPolicy\n * @returns\n */\nfunction isThresholdGapPolicy(\n  gapPolicy: TimeGapPolicy,\n): gapPolicy is ThresholdGapPolicy {\n  return typeof gapPolicy === 'object' && 'threshold' in gapPolicy;\n}\n\nexport function getNumericalThresholdValue(gapPolicy: NumericalGapPolicy) {\n  return isNumericalThresholdGapPolicy(gapPolicy) &&\n    Number.isFinite(gapPolicy.threshold)\n    ? gapPolicy.threshold\n    : 0;\n}\n\nfunction isNumericalThresholdGapPolicy(\n  gapPolicy: NumericalGapPolicy,\n): gapPolicy is NumericalThresholdGapPolicy {\n  return typeof gapPolicy === 'object' && 'threshold' in gapPolicy;\n}\n"],
+  "mappings": "AAAA,SAAS,4BAA4B;AAgB9B,SAAS,kBAAkB,WAA0B;AAC1D,SAAO,qBAAqB,SAAS,IAChC,qBAAqB,UAAU,SAAS,KAAK,IAC9C;AACN;AAQA,SAAS,qBACP,WACiC;AACjC,SAAO,OAAO,cAAc,YAAY,eAAe;AACzD;AAEO,SAAS,2BAA2B,WAA+B;AACxE,SAAO,8BAA8B,SAAS,KAC5C,OAAO,SAAS,UAAU,SAAS,IACjC,UAAU,YACV;AACN;AAEA,SAAS,8BACP,WAC0C;AAC1C,SAAO,OAAO,cAAc,YAAY,eAAe;AACzD;",
   "names": []
 }

package/esm/charts/core/utils/zoom.js

@@ -44,10 +44,19 @@ const panningMove = (xScale, initialXScaleDomain, delta) => {
   }
   return [xScale.invert(rangeMin), xScale.invert(rangeMax)];
 };
+function adjustA11yConfigForExplore(config, hasExplore) {
+  const withoutExplore = config.filter((c) => !("explore" in c)).map((c) => ({ [Object.keys(c)[0]]: -1 }));
+  const base = hasExplore ? [{ explore: -1 }, ...withoutExplore] : withoutExplore;
+  if (base.length === 0) {
+    return base;
+  }
+  const firstKey = Object.keys(base[0])[0];
+  return [{ [firstKey]: 0 }, ...base.slice(1)];
+}
 function getA11yToolbarConfig(config) {
-  const { zoom, zoomX, download, intent } = config;
-  const a11YToolbar = [
-    ...[{ explore: 0 }],
+  const { zoom, zoomX, download, intent, hasExploreMenu = true } = config;
+  const controls = [
+    ...hasExploreMenu ? [{ explore: -1 }] : [],
     ...zoom?.enabled ? [{ "zoom-in": -1 }] : [],
     ...zoom?.enabled ? [{ "zoom-out": -1 }] : [],
     ...zoom?.enabled || zoomX?.enabled ? [{ reset: -1 }] : [],
@@ -55,7 +64,11 @@ function getA11yToolbarConfig(config) {
     ...intent ? [{ intent: -1 }] : [],
     ...[{ collapse: -1 }]
   ];
-  return a11YToolbar;
+  if (controls.length > 0) {
+    const firstKey = Object.keys(controls[0])[0];
+    controls[0] = { [firstKey]: 0 };
+  }
+  return controls;
 }
 function isSameDomain(currentDomain, initialDomain) {
   if (currentDomain === void 0) {
@@ -64,6 +77,7 @@ function isSameDomain(currentDomain, initialDomain) {
   return +currentDomain[0] === +initialDomain[0] && +currentDomain[1] === +initialDomain[1];
 }
 export {
+  adjustA11yConfigForExplore,
   getA11yToolbarConfig,
   handlePanningMovement,
   isDomainMaxZoom,

package/esm/charts/core/utils/zoom.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/charts/core/utils/zoom.ts"],
-  "sourcesContent": ["import type {\n  ScaleLinear,\n  ScaleLogarithmic,\n  ScaleSymLog,\n  ScaleTime,\n} from 'd3-scale';\nimport { inRange } from 'lodash-es';\n\nimport { GRAIL_MAX_DOMAIN, GRAIL_MIN_DOMAIN } from '../constants.js';\nimport { A11yToolbarTabIndex } from '../types/toolbar.js';\nimport { ChartZoomConfig } from '../types/zoom.js';\n\nexport type PanDirection = 'left' | 'right';\nexport type PanStepType = 'small' | 'large';\n\nconst PAN_LARGE_STEP = 0.02;\nconst PAN_SMALL_STEP = 0.01;\n\n/**\n * Checks if new domain is the initial zoom state.\n * @param newDomain - The targeted new domain.\n * @param initialDomain - The initial domain.\n * @returns A boolean that compares domains to verify if the zoom-out action reaches the initial zoom state.\n */\nexport function isDomainMinZoom(\n  newDomain: [number, number],\n  infiniteZoom: boolean,\n  initialDomain?: [number, number],\n) {\n  if (newDomain[0] <= +GRAIL_MIN_DOMAIN && newDomain[1] >= +GRAIL_MAX_DOMAIN) {\n    return true;\n  }\n\n  if (initialDomain === undefined || infiniteZoom) {\n    return false;\n  }\n\n  if (\n    (newDomain[0] === initialDomain[0] && newDomain[1] !== initialDomain[1]) ||\n    (newDomain[0] !== initialDomain[0] && newDomain[1] === initialDomain[1])\n  ) {\n    return false;\n  }\n\n  return !(\n    inRange(newDomain[0], initialDomain[0], initialDomain[1]) &&\n    inRange(newDomain[1], initialDomain[0], initialDomain[1])\n  );\n}\n\n/**\n * Checks if new domain is the maximum possible.\n * @param newDomain - The targeted new domain.\n * @returns A boolean that compares domain min and max values to verify if the zoom-in action reaches the max zoom limit.\n */\nexport function isDomainMaxZoom(\n  newDomain: [number, number],\n  initialDomain: [number, number],\n): boolean {\n  const newMinValue = newDomain[0];\n  const newMaxValue = newDomain[1];\n\n  const isEqualDomain = newMinValue === newMaxValue;\n  if (isEqualDomain) {\n    return true;\n  }\n\n  return initialDomain[0] > initialDomain[1]\n    ? newMaxValue > newMinValue\n    : newMinValue > newMaxValue;\n}\n\n/**\n * Get if it is at min or max zoom.\n *\n * @param initialDomain - the initial domain as number (number or timestamp) without zoom\n * @param nextDomain - the domain as number (number or timestamp) to be zoomed in\n * @param infiniteZoom - Enables or disabled the infiniteZoom.\n * @returns - if it is at min or max zoom.\n */\nexport function isZoomBoundaries(\n  initialDomain: [number, number],\n  nextDomain: [number, number],\n  infiniteZoom: boolean,\n) {\n  const isMinZoom = isDomainMinZoom(nextDomain, infiniteZoom, initialDomain);\n  const isMaxZoom = isDomainMaxZoom(nextDomain, initialDomain);\n\n  return { isMinZoom, isMaxZoom };\n}\n\n/**\n * Handles a new panning move.\n * @param xScale - The axis scale.\n * @param panDirection - The direction of the panning movement.\n * @param stepType - The scale of the panning.\n * @param initialXScaleDomain - The initial scale domain.\n * @returns The new domain.\n */\nexport const handlePanningMovement = (\n  xScale:\n    | ScaleLinear<number, number>\n    | ScaleLogarithmic<number, number>\n    | ScaleTime<number, number>\n    | ScaleSymLog<number, number>,\n  panDirection: PanDirection,\n  stepType: PanStepType,\n  initialXScaleDomain?: number[] | Date[],\n) => {\n  const [, width] = xScale.range();\n  const directionFactor = panDirection === 'left' ? 1 : -1;\n  const panStep =\n    (stepType === 'small' ? PAN_SMALL_STEP : PAN_LARGE_STEP) * width;\n\n  return panningMove(xScale, initialXScaleDomain, directionFactor * panStep);\n};\n\n/**\n * Calculates panning move given a domain and delta\n * @param xScale - Current scale of X-axis\n * @param initialXScaleDomain - Initial x-axis scale.\n * @param delta - Amount to pan: if positive sign, goes left; otherwise right\n * @returns void\n */\nconst panningMove = (\n  xScale:\n    | ScaleLinear<number, number>\n    | ScaleLogarithmic<number, number>\n    | ScaleTime<number, number>\n    | ScaleSymLog<number, number>,\n  initialXScaleDomain: number[] | Date[] | undefined,\n  delta: number,\n) => {\n  const [rangeMin, rangeMax] = xScale.range();\n  const [initialMin, initialMax] = initialXScaleDomain ?? [];\n  const newMin = xScale.invert(rangeMin - delta);\n  const newMax = xScale.invert(rangeMax - delta);\n\n  if (\n    (+newMin > +initialMin && +newMax < +initialMax) ||\n    !initialXScaleDomain\n  ) {\n    return [newMin, newMax];\n  }\n\n  return [xScale.invert(rangeMin), xScale.invert(rangeMax)];\n};\n\ninterface ConfigProps {\n  zoomX?: ChartZoomConfig;\n  pan?: ChartZoomConfig;\n  zoom?: ChartZoomConfig;\n  download?: { enabled: boolean };\n  intent?: boolean;\n}\n\nexport function getA11yToolbarConfig(config: ConfigProps) {\n  const { zoom, zoomX, download, intent } = config;\n\n  const a11YToolbar: A11yToolbarTabIndex[] = [\n    ...[{ explore: 0 }],\n    ...(zoom?.enabled ? [{ 'zoom-in': -1 }] : []),\n    ...(zoom?.enabled ? [{ 'zoom-out': -1 }] : []),\n    ...(zoom?.enabled || zoomX?.enabled ? [{ reset: -1 }] : []),\n    ...(download?.enabled ? [{ download: -1 }] : []),\n    ...(intent ? [{ intent: -1 }] : []),\n    ...[{ collapse: -1 }],\n  ];\n\n  return a11YToolbar;\n}\n\n/**\n * Checks if currentDomain and initialDomain are equal\n * @param currentDomain - The minimum and maximum date of the current domain.\n * @param initialDomain - The initial domain.\n * @returns boolean value\n */\n\nexport function isSameDomain(\n  currentDomain: (number | Date)[] | undefined,\n  initialDomain: (number | Date)[],\n) {\n  if (currentDomain === undefined) {\n    return true;\n  }\n  return (\n    +currentDomain[0] === +initialDomain[0] &&\n    +currentDomain[1] === +initialDomain[1]\n  );\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type {\n  ScaleLinear,\n  ScaleLogarithmic,\n  ScaleSymLog,\n  ScaleTime,\n} from 'd3-scale';\nimport { inRange } from 'lodash-es';\n\nimport { GRAIL_MAX_DOMAIN, GRAIL_MIN_DOMAIN } from '../constants.js';\nimport { A11yToolbarTabIndex } from '../types/toolbar.js';\nimport { ChartZoomConfig } from '../types/zoom.js';\n\nexport type PanDirection = 'left' | 'right';\nexport type PanStepType = 'small' | 'large';\n\nconst PAN_LARGE_STEP = 0.02;\nconst PAN_SMALL_STEP = 0.01;\n\n/**\n * Checks if new domain is the initial zoom state.\n * @param newDomain - The targeted new domain.\n * @param initialDomain - The initial domain.\n * @returns A boolean that compares domains to verify if the zoom-out action reaches the initial zoom state.\n */\nexport function isDomainMinZoom(\n  newDomain: [number, number],\n  infiniteZoom: boolean,\n  initialDomain?: [number, number],\n) {\n  if (newDomain[0] <= +GRAIL_MIN_DOMAIN && newDomain[1] >= +GRAIL_MAX_DOMAIN) {\n    return true;\n  }\n\n  if (initialDomain === undefined || infiniteZoom) {\n    return false;\n  }\n\n  if (\n    (newDomain[0] === initialDomain[0] && newDomain[1] !== initialDomain[1]) ||\n    (newDomain[0] !== initialDomain[0] && newDomain[1] === initialDomain[1])\n  ) {\n    return false;\n  }\n\n  return !(\n    inRange(newDomain[0], initialDomain[0], initialDomain[1]) &&\n    inRange(newDomain[1], initialDomain[0], initialDomain[1])\n  );\n}\n\n/**\n * Checks if new domain is the maximum possible.\n * @param newDomain - The targeted new domain.\n * @returns A boolean that compares domain min and max values to verify if the zoom-in action reaches the max zoom limit.\n */\nexport function isDomainMaxZoom(\n  newDomain: [number, number],\n  initialDomain: [number, number],\n): boolean {\n  const newMinValue = newDomain[0];\n  const newMaxValue = newDomain[1];\n\n  const isEqualDomain = newMinValue === newMaxValue;\n  if (isEqualDomain) {\n    return true;\n  }\n\n  return initialDomain[0] > initialDomain[1]\n    ? newMaxValue > newMinValue\n    : newMinValue > newMaxValue;\n}\n\n/**\n * Get if it is at min or max zoom.\n *\n * @param initialDomain - the initial domain as number (number or timestamp) without zoom\n * @param nextDomain - the domain as number (number or timestamp) to be zoomed in\n * @param infiniteZoom - Enables or disabled the infiniteZoom.\n * @returns - if it is at min or max zoom.\n */\nexport function isZoomBoundaries(\n  initialDomain: [number, number],\n  nextDomain: [number, number],\n  infiniteZoom: boolean,\n) {\n  const isMinZoom = isDomainMinZoom(nextDomain, infiniteZoom, initialDomain);\n  const isMaxZoom = isDomainMaxZoom(nextDomain, initialDomain);\n\n  return { isMinZoom, isMaxZoom };\n}\n\n/**\n * Handles a new panning move.\n * @param xScale - The axis scale.\n * @param panDirection - The direction of the panning movement.\n * @param stepType - The scale of the panning.\n * @param initialXScaleDomain - The initial scale domain.\n * @returns The new domain.\n */\nexport const handlePanningMovement = (\n  xScale:\n    | ScaleLinear<number, number>\n    | ScaleLogarithmic<number, number>\n    | ScaleTime<number, number>\n    | ScaleSymLog<number, number>,\n  panDirection: PanDirection,\n  stepType: PanStepType,\n  initialXScaleDomain?: number[] | Date[],\n) => {\n  const [, width] = xScale.range();\n  const directionFactor = panDirection === 'left' ? 1 : -1;\n  const panStep =\n    (stepType === 'small' ? PAN_SMALL_STEP : PAN_LARGE_STEP) * width;\n\n  return panningMove(xScale, initialXScaleDomain, directionFactor * panStep);\n};\n\n/**\n * Calculates panning move given a domain and delta\n * @param xScale - Current scale of X-axis\n * @param initialXScaleDomain - Initial x-axis scale.\n * @param delta - Amount to pan: if positive sign, goes left; otherwise right\n * @returns void\n */\nconst panningMove = (\n  xScale:\n    | ScaleLinear<number, number>\n    | ScaleLogarithmic<number, number>\n    | ScaleTime<number, number>\n    | ScaleSymLog<number, number>,\n  initialXScaleDomain: number[] | Date[] | undefined,\n  delta: number,\n) => {\n  const [rangeMin, rangeMax] = xScale.range();\n  const [initialMin, initialMax] = initialXScaleDomain ?? [];\n  const newMin = xScale.invert(rangeMin - delta);\n  const newMax = xScale.invert(rangeMax - delta);\n\n  if (\n    (+newMin > +initialMin && +newMax < +initialMax) ||\n    !initialXScaleDomain\n  ) {\n    return [newMin, newMax];\n  }\n\n  return [xScale.invert(rangeMin), xScale.invert(rangeMax)];\n};\n\ninterface ConfigProps {\n  zoomX?: ChartZoomConfig;\n  pan?: ChartZoomConfig;\n  zoom?: ChartZoomConfig;\n  download?: { enabled: boolean };\n  intent?: boolean;\n  /**\n   * Whether the explore ToolbarMenu trigger will be rendered in the initial toolbar state.\n   * When false, the first available control receives tabIndex=0 instead.\n   * @defaultValue true\n   */\n  hasExploreMenu?: boolean;\n}\n\n/**\n * Adjusts an existing a11y config array to add or remove the explore entry,\n * and re-promotes the first remaining entry to tabIndex=0.\n * Used when shouldShowMenu changes after the initial config was computed.\n */\nexport function adjustA11yConfigForExplore(\n  config: A11yToolbarTabIndex[],\n  hasExplore: boolean,\n): A11yToolbarTabIndex[] {\n  // Reset all tabIndices to -1 so the first-entry promotion below is the only source of 0.\n  const withoutExplore = config\n    .filter((c) => !('explore' in c))\n    .map((c) => ({ [Object.keys(c)[0]]: -1 }));\n\n  const base: A11yToolbarTabIndex[] = hasExplore\n    ? [{ explore: -1 }, ...withoutExplore]\n    : withoutExplore;\n\n  if (base.length === 0) {\n    return base;\n  }\n  const firstKey = Object.keys(base[0])[0];\n  return [{ [firstKey]: 0 }, ...base.slice(1)];\n}\n\nexport function getA11yToolbarConfig(config: ConfigProps) {\n  const { zoom, zoomX, download, intent, hasExploreMenu = true } = config;\n\n  const controls: A11yToolbarTabIndex[] = [\n    ...(hasExploreMenu ? [{ explore: -1 }] : []),\n    ...(zoom?.enabled ? [{ 'zoom-in': -1 }] : []),\n    ...(zoom?.enabled ? [{ 'zoom-out': -1 }] : []),\n    ...(zoom?.enabled || zoomX?.enabled ? [{ reset: -1 }] : []),\n    ...(download?.enabled ? [{ download: -1 }] : []),\n    ...(intent ? [{ intent: -1 }] : []),\n    ...[{ collapse: -1 }],\n  ];\n\n  if (controls.length > 0) {\n    const firstKey = Object.keys(controls[0])[0];\n    controls[0] = { [firstKey]: 0 };\n  }\n\n  return controls;\n}\n\n/**\n * Checks if currentDomain and initialDomain are equal\n * @param currentDomain - The minimum and maximum date of the current domain.\n * @param initialDomain - The initial domain.\n * @returns boolean value\n */\n\nexport function isSameDomain(\n  currentDomain: (number | Date)[] | undefined,\n  initialDomain: (number | Date)[],\n) {\n  if (currentDomain === undefined) {\n    return true;\n  }\n  return (\n    +currentDomain[0] === +initialDomain[0] &&\n    +currentDomain[1] === +initialDomain[1]\n  );\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/charts/flame/flame-chart/FlameChart.js

@@ -1,19 +1,24 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useCallback, useMemo, useState } from "react";
+import { useMemo } from "react";
 import { units } from "@dynatrace-sdk/units";
-import { iterateSlots } from "./utils/iterate-slots.js";
+import { Flex } from "../../../layouts/flex/Flex.js";
 import { ColorRule } from "../../core/slots/ColorRule.js";
 import { XYChart } from "../../xy-chart/XYChartRoot.js";
+import { FlameIsolationNav } from "../shared/components/isolation-nav/FlameIsolationNav.js";
+import { IsolateSegmentAction } from "../shared/components/tooltip/IsolateSegmentAction.js";
 import {
   DEPTH_FIELD,
   DISPLAY_NAME_FLAME_CHART,
   END_FIELD,
-  FLAME_ORIGINAL_IDX,
   START_FIELD,
   VALUE_FIELD,
   XY_DEFAULTS
 } from "../shared/constants.js";
+import { useFlameData } from "../shared/hooks/use-flame-data.js";
+import { useFlameOnEvent } from "../shared/hooks/use-flame-on-event.js";
+import { useFlameIsolationState } from "../shared/hooks/use-isolation-state.js";
 import { DefaultTooltip } from "./components/tooltip/DefaultTooltip.js";
+import { iterateSlots } from "./utils/iterate-slots.js";
 import { FlameChartTooltipSlot as Tooltip } from "../shared/slots/Tooltip.js";
 import { orderSpansHierarchically } from "../shared/utils/order-spans-hierarchically.js";
 import { resolveFlameTooltipContent } from "../shared/utils/resolve-flame-tooltip-content.js";
@@ -34,34 +39,36 @@ const FlameChartRoot = ({
   seriesActions,
   height,
   __globalActions,
+  onClick,
   children
 }) => {
+  const isolationEnabled = __globalActions === true;
+  const { isolatedId, isolate, goBack, goForward, canGoBack, canGoForward } = useFlameIsolationState();
+  const { isolatedRoot, effectiveData, visibleRootId, childrenByParentId } = useFlameData({
+    data,
+    idAccessor,
+    parentIdAccessor,
+    isolatedId,
+    isolationEnabled
+  });
   const orderedData = useMemo(() => {
-    const withIndex = data.map((datum, index) => ({
-      ...datum,
-      [FLAME_ORIGINAL_IDX]: index
-    }));
-    const ordered = orderSpansHierarchically(withIndex, {
+    const offset = isolatedRoot ? Number(isolatedRoot[startAccessor] ?? 0) : minTime ?? 0;
+    return orderSpansHierarchically(effectiveData, {
       spanIdAccessor: idAccessor,
       parentIdAccessor,
       x0Accessor: startAccessor,
-      x1Accessor: endAccessor
+      x1Accessor: endAccessor,
+      offset
     });
-    const offset = minTime ?? 0;
-    const output = new Array(ordered.length);
-    for (let i = 0; i < ordered.length; i++) {
-      const span = ordered[i];
-      const start = Number(span[startAccessor] ?? 0);
-      const end = Number(span[endAccessor] ?? 0);
-      output[i] = {
-        ...span,
-        [START_FIELD]: start - offset,
-        [END_FIELD]: end - offset,
-        [VALUE_FIELD]: end - start
-      };
-    }
-    return output;
-  }, [data, idAccessor, parentIdAccessor, startAccessor, endAccessor, minTime]);
+  }, [
+    effectiveData,
+    isolatedRoot,
+    idAccessor,
+    parentIdAccessor,
+    startAccessor,
+    endAccessor,
+    minTime
+  ]);
   const normalizedZoom = useMemo(() => {
     if (!currentZoom) {
       return void 0;
@@ -69,18 +76,38 @@ const FlameChartRoot = ({
     const offset = minTime ?? 0;
     return [currentZoom[0] - offset, currentZoom[1] - offset];
   }, [currentZoom, minTime]);
-  const [internalZoom, setInternalZoom] = useState(void 0);
-  const effectiveZoom = normalizedZoom ?? internalZoom;
-  const handleIsolate = useCallback((zoom) => {
-    setInternalZoom(zoom);
-  }, []);
+  const globalActions = useMemo(() => {
+    if (!isolationEnabled) {
+      return void 0;
+    }
+    return (datapoint) => {
+      const id = datapoint[idAccessor];
+      return [
+        /* @__PURE__ */ jsx(
+          IsolateSegmentAction,
+          {
+            onSelect: () => isolate(id),
+            disabled: id === visibleRootId
+          },
+          "isolate"
+        )
+      ];
+    };
+  }, [isolationEnabled, idAccessor, isolate, visibleRootId]);
   const { customTooltipTemplate, colorRules } = iterateSlots(children);
-  return /* @__PURE__ */ jsxs(
+  const handleOnEvent = useFlameOnEvent({
+    onClick,
+    data,
+    idAccessor,
+    childrenByParentId
+  });
+  const chart = /* @__PURE__ */ jsxs(
     XYChart,
     {
       data: orderedData,
       truncationMode,
       height,
+      __onEvent: handleOnEvent,
       children: [
         /* @__PURE__ */ jsx(
           XYChart.RectSeries,
@@ -102,7 +129,7 @@ const FlameChartRoot = ({
             type: "numerical",
             position: orientation === "bottom-up" ? "bottom" : "top",
             formatter: { input: units.time.millisecond },
-            currentZoom: effectiveZoom
+            currentZoom: isolatedRoot !== null ? void 0 : normalizedZoom
           }
         ),
         /* @__PURE__ */ jsx(
@@ -132,13 +159,28 @@ const FlameChartRoot = ({
               selfValueAccessor,
               valueFormatter,
               seriesActions,
-              onIsolate: __globalActions ? handleIsolate : void 0
+              globalActions
             }
           )
         ) })
       ]
     }
   );
+  if (!isolationEnabled) {
+    return chart;
+  }
+  return /* @__PURE__ */ jsxs(Flex, { flexDirection: "column", gap: 8, children: [
+    /* @__PURE__ */ jsx(
+      FlameIsolationNav,
+      {
+        canGoBack,
+        canGoForward,
+        onGoBack: goBack,
+        onGoForward: goForward
+      }
+    ),
+    chart
+  ] });
 };
 const FlameChart = Object.assign(FlameChartRoot, {
   Tooltip,
@@ -146,7 +188,6 @@ const FlameChart = Object.assign(FlameChartRoot, {
 });
 FlameChart.displayName = DISPLAY_NAME_FLAME_CHART;
 export {
-  FlameChart,
-  FlameChartRoot
+  FlameChart
 };
 //# sourceMappingURL=FlameChart.js.map