@dynatrace/strato-components 3.13.3 → 3.14.1

package/charts/sankey-chart/context/SankeyFormatter.context.js

@@ -21,6 +21,4 @@ __export(SankeyFormatter_context_exports, {
 });
 module.exports = __toCommonJS(SankeyFormatter_context_exports);
 var import_react = require("react");
-const SankeyFormatterContext = (0, import_react.createContext)(
-  String
-);
+const SankeyFormatterContext = (0, import_react.createContext)(String);

package/charts/sankey-chart/hooks/use-node-colors.js

@@ -25,16 +25,16 @@ var import_canvas_color = require("../../core/components/canvas/utils/canvas-col
 var import_build_categorical_color_scale = require("../../core/utils/build-categorical-color-scale.js");
 var import_SankeyColorPalette_context = require("../context/SankeyColorPalette.context.js");
 var import_SankeyData_context = require("../context/SankeyData.context.js");
-function buildPerNodeColorMap(nodes, colorPalette) {
+function buildPerNodeColorTokenMap(nodes, colorPalette) {
   const ids = nodes.map((n) => n.id);
   const scale = (0, import_build_categorical_color_scale.buildCategoricalColorScale)(colorPalette, ids);
-  const colorMap = /* @__PURE__ */ new Map();
+  const tokenMap = /* @__PURE__ */ new Map();
   for (const node of nodes) {
-    colorMap.set(node.id, (0, import_canvas_color.getCanvasColor)(scale(node.id)));
+    tokenMap.set(node.id, scale(node.id));
   }
-  return colorMap;
+  return tokenMap;
 }
-function buildColumnColorMap(nodes, colorPalette) {
+function buildColumnColorTokenMap(nodes, colorPalette) {
   const uniqueColumns = [
     ...new Set(
       nodes.map((n) => n.column).filter((c) => c !== void 0)
@@ -42,18 +42,23 @@ function buildColumnColorMap(nodes, colorPalette) {
   ].sort((a, b) => a - b);
   const columnKeys = uniqueColumns.map(String);
   const scale = (0, import_build_categorical_color_scale.buildCategoricalColorScale)(colorPalette, columnKeys);
-  const colorMap = /* @__PURE__ */ new Map();
+  const tokenMap = /* @__PURE__ */ new Map();
   for (const node of nodes) {
     const key = node.column !== void 0 ? String(node.column) : columnKeys[0] ?? "0";
-    colorMap.set(node.id, (0, import_canvas_color.getCanvasColor)(scale(key)));
+    tokenMap.set(node.id, scale(key));
   }
-  return colorMap;
+  return tokenMap;
 }
 function useNodeColors() {
   const { nodes } = (0, import_react.useContext)(import_SankeyData_context.SankeyDataContext);
   const colorPalette = (0, import_react.useContext)(import_SankeyColorPalette_context.SankeyColorPaletteContext);
-  return (0, import_react.useMemo)(() => {
+  const tokenMap = (0, import_react.useMemo)(() => {
     const hasColumnAssignment = nodes.some((n) => n.column !== void 0);
-    return hasColumnAssignment ? buildColumnColorMap(nodes, colorPalette) : buildPerNodeColorMap(nodes, colorPalette);
+    return hasColumnAssignment ? buildColumnColorTokenMap(nodes, colorPalette) : buildPerNodeColorTokenMap(nodes, colorPalette);
   }, [nodes, colorPalette]);
+  const colorMap = /* @__PURE__ */ new Map();
+  for (const [id, token] of tokenMap) {
+    colorMap.set(id, (0, import_canvas_color.getCanvasColor)(token));
+  }
+  return colorMap;
 }

package/charts/sankey-chart/providers/SankeyConfigProvider.d.ts

@@ -6,9 +6,10 @@ interface SankeyConfigProviderProps {
     nodesConfig: SankeyChartNodesProps;
     truncationMode: TruncationMode;
     colorPalette: ColorPalette | CustomColorPalette;
+    columnLabels: Record<number, string> | undefined;
 }
 export declare const SankeyConfigProvider: {
-    ({ nodesConfig, truncationMode, colorPalette, children, }: PropsWithChildren<SankeyConfigProviderProps>): import("react").JSX.Element;
+    ({ nodesConfig, truncationMode, colorPalette, columnLabels, children, }: PropsWithChildren<SankeyConfigProviderProps>): import("react").JSX.Element;
     displayName: string;
 };
 export {};

package/charts/sankey-chart/providers/SankeyConfigProvider.js

@@ -22,12 +22,14 @@ __export(SankeyConfigProvider_exports, {
 module.exports = __toCommonJS(SankeyConfigProvider_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_SankeyColorPalette_context = require("../context/SankeyColorPalette.context.js");
+var import_SankeyColumnLabels_context = require("../context/SankeyColumnLabels.context.js");
 var import_SankeyNodes_context = require("../context/SankeyNodes.context.js");
 var import_SankeyTruncationMode_context = require("../context/SankeyTruncationMode.context.js");
 const SankeyConfigProvider = ({
   nodesConfig,
   truncationMode,
   colorPalette,
+  columnLabels,
   children
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SankeyTruncationMode_context.SankeyTruncationModeContext.Provider, { value: truncationMode, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SankeyColorPalette_context.SankeyColorPaletteContext.Provider, { value: colorPalette, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SankeyNodes_context.SankeyNodesContext.Provider, { value: nodesConfig, children }) }) });
+}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SankeyTruncationMode_context.SankeyTruncationModeContext.Provider, { value: truncationMode, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SankeyColorPalette_context.SankeyColorPaletteContext.Provider, { value: colorPalette, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SankeyColumnLabels_context.SankeyColumnLabelsContext.Provider, { value: columnLabels, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SankeyNodes_context.SankeyNodesContext.Provider, { value: nodesConfig, children }) }) }) });
 SankeyConfigProvider.displayName = "SankeyConfigProvider";

package/charts/sankey-chart/types/sankey-props.d.ts

@@ -50,6 +50,10 @@ export interface SankeyChartBaseProps extends MaskingProps, StylingProps, DataTe
      * Unit for numeric volume values.
      */
     unit?: ChartUnit;
+    /**
+     * Labels to display above each column, keyed by zero-based column index.
+     */
+    columnLabels?: Record<number, string>;
     children?: ReactNode;
 }
 /**

package/charts/sankey-chart/utils/get-column-x-range.d.ts

@@ -0,0 +1,34 @@
+interface XRange {
+    readonly x0: number;
+    readonly x1: number;
+}
+interface NodeWithDepth {
+    readonly depth?: number;
+    /**
+     * The visual column index from the align function (e.g. sankeyJustify). Used
+     * as the map key when present so sink/source nodes repositioned by justify
+     * don't corrupt the x-range of their assigned depth column.
+     */
+    readonly layer?: number;
+    readonly x0?: number;
+    readonly x1?: number;
+}
+/**
+ * Builds a map from visual column index to the x-range covering all nodes in
+ * that column. Uses `layer` as the key when available (the actual column
+ * assigned by the align function), falling back to `depth`. When multiple
+ * nodes share the same column, the map stores the union of their x-extents.
+ */
+export declare function buildDepthToXRangeMap(nodes: ReadonlyArray<NodeWithDepth>): Map<number, XRange>;
+/**
+ * Returns the x-range for the given column depth index.
+ *
+ * - If the depth has layout nodes, returns their x-range directly.
+ * - If the depth is within the range of known depths but has no nodes,
+ *   linearly interpolates between the nearest known neighbors.
+ * - If the depth falls outside [minDepth, maxDepth], returns `undefined`
+ *   so the caller can silently skip it
+ */
+export declare function getXRangeForDepth(depth: number, depthToXRange: Map<number, XRange>, sortedDepths?: ReadonlyArray<number>): XRange | undefined;
+export {};
+//# sourceMappingURL=get-column-x-range.d.ts.map

package/charts/sankey-chart/utils/get-column-x-range.js

@@ -0,0 +1,73 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var get_column_x_range_exports = {};
+__export(get_column_x_range_exports, {
+  buildDepthToXRangeMap: () => buildDepthToXRangeMap,
+  getXRangeForDepth: () => getXRangeForDepth
+});
+module.exports = __toCommonJS(get_column_x_range_exports);
+function buildDepthToXRangeMap(nodes) {
+  const map = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    const key = node.layer ?? node.depth;
+    if (key === void 0 || node.x0 === void 0 || node.x1 === void 0) {
+      continue;
+    }
+    const existing = map.get(key);
+    if (existing === void 0) {
+      map.set(key, { x0: node.x0, x1: node.x1 });
+    } else {
+      map.set(key, {
+        x0: Math.min(existing.x0, node.x0),
+        x1: Math.max(existing.x1, node.x1)
+      });
+    }
+  }
+  return map;
+}
+function getXRangeForDepth(depth, depthToXRange, sortedDepths = [...depthToXRange.keys()].sort(
+  (a, b) => a - b
+)) {
+  const direct = depthToXRange.get(depth);
+  if (direct !== void 0) {
+    return direct;
+  }
+  if (depthToXRange.size === 0) {
+    return void 0;
+  }
+  const minDepth = sortedDepths[0];
+  const maxDepth = sortedDepths[sortedDepths.length - 1];
+  if (depth < minDepth || depth > maxDepth) {
+    return void 0;
+  }
+  const leftDepth = sortedDepths.filter((d) => d < depth).at(-1);
+  const rightDepth = sortedDepths.find((d) => d > depth);
+  if (leftDepth === void 0 || rightDepth === void 0) {
+    return void 0;
+  }
+  const leftRange = depthToXRange.get(leftDepth);
+  const rightRange = depthToXRange.get(rightDepth);
+  if (leftRange === void 0 || rightRange === void 0) {
+    return void 0;
+  }
+  const t = (depth - leftDepth) / (rightDepth - leftDepth);
+  return {
+    x0: leftRange.x0 + (rightRange.x0 - leftRange.x0) * t,
+    x1: leftRange.x1 + (rightRange.x1 - leftRange.x1) * t
+  };
+}

package/charts/sankey-chart/vendor/d3-sankey/align.d.ts

@@ -1,6 +1,7 @@
 interface NodeForAlign {
     depth?: number;
     height?: number;
+    column?: number;
     sourceLinks?: ReadonlyArray<unknown>;
     targetLinks?: ReadonlyArray<unknown>;
 }

package/charts/sankey-chart/vendor/d3-sankey/align.js

@@ -23,11 +23,17 @@ __export(align_exports, {
 });
 module.exports = __toCommonJS(align_exports);
 function justify(node, n) {
+  if (typeof node.column === "number") {
+    return node.column;
+  }
   return (node.sourceLinks?.length ?? 0) > 0 ? node.depth ?? 0 : n - 1;
 }
 function left(node) {
   return node.depth ?? 0;
 }
 function right(node, n) {
+  if (typeof node.column === "number") {
+    return node.column;
+  }
   return n - 1 - (node.height ?? 0);
 }

package/charts/sankey-chart/vendor/d3-sankey/sankey.js

@@ -133,27 +133,29 @@ function Sankey() {
   }
   function computeNodeDepths({ nodes }) {
     const n = nodes.length;
-    let current = new Set(nodes);
-    let next = /* @__PURE__ */ new Set();
-    let x = 0;
-    let iterations2 = 0;
-    while (current.size) {
-      let maxPinnedDepth = -1;
-      for (const node of current) {
-        node.depth = typeof node["column"] === "number" ? node["column"] : x;
-        if (typeof node["column"] === "number" && node["column"] > maxPinnedDepth) {
-          maxPinnedDepth = node["column"];
+    for (const node of nodes) {
+      node.depth = typeof node["column"] === "number" ? node["column"] : 0;
+    }
+    let changed = true;
+    let totalDepth = 0;
+    while (changed) {
+      changed = false;
+      for (const node of nodes) {
+        if (typeof node["column"] === "number") {
+          continue;
+        }
+        let floor = 0;
+        for (const { source } of node.targetLinks) {
+          floor = Math.max(floor, source.depth + 1);
         }
-        for (const { target } of node.sourceLinks) {
-          next.add(target);
+        if (floor > node.depth) {
+          node.depth = floor;
+          changed = true;
         }
       }
-      if (++iterations2 > n) {
+      if (++totalDepth > n) {
         throw new Error("circular link");
       }
-      x = Math.max(x + 1, maxPinnedDepth + 1);
-      current = next;
-      next = /* @__PURE__ */ new Set();
     }
   }
   function computeNodeHeights({ nodes }) {

package/charts/sankey-chart/vendor/d3-sankey/types.d.ts

@@ -8,6 +8,8 @@ export interface SankeyNodeMinimal<N extends SankeyExtraProperties, L extends Sa
     fixedValue?: number;
     index?: number;
     depth?: number;
+    /** The actual visual column index assigned by the align function (e.g. sankeyJustify). May differ from `depth` for sink/source nodes that are repositioned. */
+    layer?: number;
     height?: number;
     x0?: number;
     x1?: number;

package/charts/single-value/SingleValue.css

@@ -1,4 +1,4 @@
-._1sfgzlg0-3-13-3 {
+._1sfgzlg0-3-14-1 {
   height: inherit;
   width: inherit;
 }

package/charts/single-value/SingleValue.sty.js

@@ -21,4 +21,4 @@ __export(SingleValue_css_exports, {
 });
 module.exports = __toCommonJS(SingleValue_css_exports);
 var import_SingleValue_css_ts_vanilla = require("./SingleValue.css");
-var container = "_1sfgzlg0-3-13-3";
+var container = "_1sfgzlg0-3-14-1";

package/charts/single-value-grid/SingleValueGrid.css

@@ -1,7 +1,7 @@
-._1mx9zjb0-3-13-3 {
+._1mx9zjb0-3-14-1 {
   height: 100%;
   width: 100%;
 }
-._1mx9zjb0-3-13-3 > div {
+._1mx9zjb0-3-14-1 > div {
   overflow: hidden;
 }

package/charts/single-value-grid/SingleValueGrid.sty.js

@@ -21,4 +21,4 @@ __export(SingleValueGrid_css_exports, {
 });
 module.exports = __toCommonJS(SingleValueGrid_css_exports);
 var import_SingleValueGrid_css_ts_vanilla = require("./SingleValueGrid.css");
-var gridRows = "_1mx9zjb0-3-13-3";
+var gridRows = "_1mx9zjb0-3-14-1";

package/charts/single-value-grid/components/GlobalFontSizeVariables.css

@@ -1,4 +1,4 @@
-._eom86z0-3-13-3 {
+._eom86z0-3-14-1 {
   position: relative;
   width: 100%;
   height: 100%;

package/charts/single-value-grid/components/GlobalFontSizeVariables.sty.js

@@ -21,4 +21,4 @@ __export(GlobalFontSizeVariables_css_exports, {
 });
 module.exports = __toCommonJS(GlobalFontSizeVariables_css_exports);
 var import_GlobalFontSizeVariables_css_ts_vanilla = require("./GlobalFontSizeVariables.css");
-var fontSizeWrapper = "_eom86z0-3-13-3";
+var fontSizeWrapper = "_eom86z0-3-14-1";

package/charts/timeseries/TimeseriesChartInternal.js

@@ -93,11 +93,6 @@ const TimeseriesChartInternal = /* @__PURE__ */ (0, import_react.forwardRef)(({
   const { right: axisRightConfig, left: axisLeftConfig } = (0, import_useTimeseriesFilteredYAxis.useTimeseriesFilteredYAxis)();
   const { units } = (0, import_useTimeseriesFilteredData.useTimeseriesFilteredData)();
   const { hidden: legendHidden } = (0, import_useTimeseriesLegend.useTimeseriesLegend)();
-  const annotationsVisibleArea = (0, import_get_annotations_visible_area.getAnnotationsVisibleArea)(
-    tracksQuantity,
-    annotations.visibleTracksLimit,
-    numHiddenTracks
-  );
   const availableWidth = tracksQuantity && orientation === "vertical" ? width - import_constants2.SCROLLBAR_WIDTH : width;
   const isLegendHiddenOrVertical = orientation === "vertical" || legendHidden;
   const isLegendHiddenOrRight = orientation === "horizontal" || legendHidden;
@@ -108,14 +103,23 @@ const TimeseriesChartInternal = /* @__PURE__ */ (0, import_react.forwardRef)(({
     isLegendHiddenOrVertical
   );
   const chartGridHeight = height - (!tracksQuantity || isLegendHiddenOrRight ? import_constants4.OVERLAY_PADDING + import_constants4.BOTTOM_PADDING_ADJUSTMENT : 0);
-  const showAnnotations = (0, import_constants3.shouldShowAnnotations)(
-    chartGridHeight,
-    tracksQuantity
+  const annotationDisplayMode = (0, import_constants3.getAnnotationDisplayMode)(
+    height,
+    tracksQuantity,
+    true
+  );
+  const compactAnnotations = annotationDisplayMode === import_constants3.AnnotationDisplayMode.Compact;
+  const showAnnotations = annotationDisplayMode !== import_constants3.AnnotationDisplayMode.Hidden;
+  const annotationsVisibleArea = (0, import_get_annotations_visible_area.getAnnotationsVisibleArea)(
+    tracksQuantity,
+    compactAnnotations ? 1 : annotations.visibleTracksLimit,
+    numHiddenTracks,
+    compactAnnotations ? import_constants2.COMPACT_ANNOTATIONS_DIMENSIONS : void 0
   );
   const showAxes = (0, import_constants3.shouldShowAxes)(chartGridHeight);
   const chartGridRenderHeight = tracksQuantity && !isLegendHiddenOrRight && !showAnnotations ? chartGridHeight - import_constants4.OVERLAY_PADDING : chartGridHeight;
   const annotationsRowHeight = showAnnotations ? annotationsVisibleArea : 0;
-  const timeseriesGridTemplateRows = showAxes ? `minmax(0, ${annotationsRowHeight}px) minmax(60%, 1fr) minmax(0, auto)` : "0px 1fr 1px";
+  const timeseriesGridTemplateRows = showAxes ? `minmax(0, ${annotationsRowHeight}px) minmax(60%, 1fr) minmax(0, auto)` : `${annotationsRowHeight}px 1fr 1px`;
   (0, import_useChartInteractions.useChartInteractions)();
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
@@ -163,7 +167,7 @@ const TimeseriesChartInternal = /* @__PURE__ */ (0, import_react.forwardRef)(({
                 ] }),
                 showAxes && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesValueRightAxisArea.TimeseriesValueRightAxisArea, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesThresholdArea.TimeseriesThresholdArea, {}),
-                showAnnotations && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesChartAnnotationsArea.TimeseriesChartAnnotationsArea, {})
+                showAnnotations && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesChartAnnotationsArea.TimeseriesChartAnnotationsArea, { compact: compactAnnotations })
               ]
             }
           ) })

package/charts/timeseries/components/annotations-timeseries/TimeseriesChartAnnotationsArea.d.ts

@@ -1,2 +1,6 @@
-export declare const TimeseriesChartAnnotationsArea: () => import("react").JSX.Element;
+type TimeseriesChartAnnotationsAreaProps = {
+    compact?: boolean;
+};
+export declare const TimeseriesChartAnnotationsArea: ({ compact, }: TimeseriesChartAnnotationsAreaProps) => import("react").JSX.Element;
+export {};
 //# sourceMappingURL=TimeseriesChartAnnotationsArea.d.ts.map

package/charts/timeseries/components/annotations-timeseries/TimeseriesChartAnnotationsArea.js

@@ -32,7 +32,9 @@ var import_useAnnotationsConfig = require("../../hooks/useAnnotationsConfig.js")
 var import_useXScale = require("../../hooks/useXScale.js");
 var import_timeseries_grid_area_rules = require("../../types/timeseries-grid-area-rules.js");
 const COMPONENT_NAME = "AnnotationsChart";
-const TimeseriesChartAnnotationsArea = () => {
+const TimeseriesChartAnnotationsArea = ({
+  compact = false
+}) => {
   const config = (0, import_useAnnotationsConfig.useAnnotationsConfig)();
   const {
     tracks,
@@ -68,12 +70,16 @@ const TimeseriesChartAnnotationsArea = () => {
             tracks,
             width: availableWidth,
             scale,
-            showLabels: showLabels ?? import_constants.DEFAULT_SHOW_LABELS,
+            showLabels: compact ? false : showLabels ?? import_constants.DEFAULT_SHOW_LABELS,
             labelsOffset: labelOffset,
             annotationsActions: (annotation) => annotation && annotationsActions?.(annotation),
             markerGroupHover: handleUpdateIndicators,
             textOverflow,
             tooltipConfig: tooltip,
+            ...compact && {
+              dimensions: import_constants.COMPACT_ANNOTATIONS_DIMENSIONS,
+              showMarkerContent: false
+            },
             ...behaviorTrackingProps,
             "data-dt-component": COMPONENT_NAME
           }

package/charts/timeseries/components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.css

@@ -1,6 +1,6 @@
-._19z0vdp0-3-13-3 {
+._19z0vdp0-3-14-1 {
   position: relative;
 }
-._19z0vdp1-3-13-3 {
+._19z0vdp1-3-14-1 {
   touch-action: none;
 }

package/charts/timeseries/components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.sty.js

@@ -22,4 +22,4 @@ __export(TimeseriesTimeBottomAxisArea_css_exports, {
 module.exports = __toCommonJS(TimeseriesTimeBottomAxisArea_css_exports);
 var import_TimeseriesTimeBottomAxisArea_css_ts_vanilla = require("./TimeseriesTimeBottomAxisArea.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var timeBottomAxisContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_19z0vdp0-3-13-3", variantClassNames: { isTouchableDevice: { true: "_19z0vdp1-3-13-3" } }, defaultVariants: {}, compoundVariants: [] });
+var timeBottomAxisContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_19z0vdp0-3-14-1", variantClassNames: { isTouchableDevice: { true: "_19z0vdp1-3-14-1" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/timeseries/components/legend/TimeseriesChartLegend.js

@@ -93,6 +93,13 @@ const TimeseriesChartLegend = (0, import_react.memo)(() => {
     () => createItemData(dataPerVariant, seriesMap),
     [dataPerVariant, seriesMap]
   );
+  const itemIdsKey = (0, import_react.useMemo)(
+    () => legendItems.map((item) => item.id).join("\0"),
+    [legendItems]
+  );
+  (0, import_react.useEffect)(() => {
+    setState((prev) => ({ ...prev, filteredSeriesIds: /* @__PURE__ */ new Set() }));
+  }, [itemIdsKey]);
   const updateHighlightedSeries = (item) => {
     setState((prev) => ({
       ...prev,

package/charts/timeseries/components/overlays/TimeseriesOverlays.css

@@ -1,8 +1,8 @@
-._17fdb110-3-13-3 {
+._17fdb110-3-14-1 {
   z-index: 1;
   pointer-events: none;
 }
-._17fdb111-3-13-3 {
+._17fdb111-3-14-1 {
   top: -3.5px;
   left: -3.5px;
   width: calc(100% + 7px);
@@ -10,7 +10,7 @@
   z-index: 1;
   pointer-events: none;
 }
-._17fdb112-3-13-3 {
+._17fdb112-3-14-1 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);
@@ -18,7 +18,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._17fdb113-3-13-3 {
+._17fdb113-3-14-1 {
   cursor: crosshair;
   overflow: visible;
   pointer-events: none;

package/charts/timeseries/components/overlays/TimeseriesOverlays.sty.js

@@ -25,7 +25,7 @@ __export(TimeseriesOverlays_css_exports, {
 module.exports = __toCommonJS(TimeseriesOverlays_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../core/components/chart-grid/ChartGrid.css");
 var import_TimeseriesOverlays_css_ts_vanilla = require("./TimeseriesOverlays.css");
-var canvasPlot = "_17fdb110-3-13-3 _13lzg4k0-3-13-3";
-var crosshairLayout = "_17fdb113-3-13-3 _13lzg4k0-3-13-3";
-var datapointCanvasPlot = "_17fdb111-3-13-3 _13lzg4k0-3-13-3";
-var datapointIndicatorLayout = "_17fdb112-3-13-3 _13lzg4k0-3-13-3";
+var canvasPlot = "_17fdb110-3-14-1 _13lzg4k0-3-14-1";
+var crosshairLayout = "_17fdb113-3-14-1 _13lzg4k0-3-14-1";
+var datapointCanvasPlot = "_17fdb111-3-14-1 _13lzg4k0-3-14-1";
+var datapointIndicatorLayout = "_17fdb112-3-14-1 _13lzg4k0-3-14-1";

package/charts/timeseries/components/thresholds/ThresholdIndicators.css

@@ -1,6 +1,6 @@
-._9p8qi20-3-13-3 {
+._9p8qi20-3-14-1 {
   z-index: 2;
 }
-._9p8qi21-3-13-3 {
+._9p8qi21-3-14-1 {
   z-index: 0;
 }

package/charts/timeseries/components/thresholds/ThresholdIndicators.sty.js

@@ -23,5 +23,5 @@ __export(ThresholdIndicators_css_exports, {
 module.exports = __toCommonJS(ThresholdIndicators_css_exports);
 var import_ChartGrid_css_ts_vanilla = require("../../../core/components/chart-grid/ChartGrid.css");
 var import_ThresholdIndicators_css_ts_vanilla = require("./ThresholdIndicators.css");
-var thresholdPlotLine = "_9p8qi20-3-13-3 _13lzg4k0-3-13-3";
-var thresholdPlotRange = "_9p8qi21-3-13-3 _13lzg4k0-3-13-3";
+var thresholdPlotLine = "_9p8qi20-3-14-1 _13lzg4k0-3-14-1";
+var thresholdPlotRange = "_9p8qi21-3-14-1 _13lzg4k0-3-14-1";

package/charts/timeseries/components/toolbar/TimeseriesChartToolbar.js

@@ -67,6 +67,8 @@ const TimeseriesChartToolbar = ({
     isZoomEnabled,
     isDownloadEnabled
   });
+  const startsExpanded = !config?.collapsed;
+  const hasExploreMenu = menuDisplayMode === "always" || menuDisplayMode === "expanded" && startsExpanded || menuDisplayMode === "collapsed" && !startsExpanded;
   const onClose = () => selectionAreaRef ? selectionAreaRef.current?.focus() : void 0;
   const showDefaultToolbarDownloadButton = isDownloadEnabled && !config?.intents;
   const showMenuToolbarButton = isDownloadEnabled && !!config?.intents?.length;
@@ -83,8 +85,9 @@ const TimeseriesChartToolbar = ({
         zoomX,
         pan,
         zoom,
-        download: config.downloadData,
-        intent: !!config.intents
+        download: { enabled: showDefaultToolbarDownloadButton },
+        intent: !!config.intents,
+        hasExploreMenu
       }),
       zIndex: import_constants.ChartOverlaysElevation.toolbar,
       onMouseEnter,

package/charts/timeseries/constants.js

@@ -113,7 +113,8 @@ const initialState = {
   annotations: import_AnnotationsDataInitialState.initialSelectionState,
   zoom: {
     zoomInEnabled: true,
-    zoomOutEnabled: false
+    zoomOutEnabled: false,
+    panEnabled: false
   },
   currentDomain: void 0,
   select: void 0,

package/charts/timeseries/context/TimeseriesColorPalette.context.d.ts

@@ -1,3 +1,3 @@
 import { CustomColorPalette } from '../../core/types/color-palette.js';
-export declare const TimeseriesColorPaletteContext: import("react").Context<"apdex" | "apdex-inverted" | "blue" | "blue-inverted" | "blue-moss" | "blue-moss-inverted" | "blue-steel" | "blue-steel-inverted" | "blue-turquoise" | "blue-turquoise-inverted" | "brown" | "brown-inverted" | "categorical" | "categorical-inverted" | "fireplace" | "fireplace-inverted" | "grey" | "grey-inverted" | "log-level" | "log-level-inverted" | "log-status" | "log-status-inverted" | "magenta" | "magenta-inverted" | "moss" | "moss-inverted" | "orange" | "orange-blue" | "orange-blue-inverted" | "orange-inverted" | "orange-petrol" | "orange-petrol-inverted" | "pear" | "pear-inverted" | "petrol" | "petrol-inverted" | "pink" | "pink-green" | "pink-green-inverted" | "pink-inverted" | "pink-purple" | "pink-purple-inverted" | "purple" | "purple-inverted" | "purple-rain" | "purple-rain-inverted" | "purple-yellow" | "purple-yellow-inverted" | "rainbow" | "rainbow-inverted" | "red" | "red-blue" | "red-blue-inverted" | "red-green" | "red-green-inverted" | "red-inverted" | "red-purple" | "red-purple-inverted" | "security-risk-level" | "security-risk-level-inverted" | "status" | "status-inverted" | "swamps" | "swamps-inverted" | "threshold" | "threshold-inverted" | "turquoise" | "turquoise-inverted" | "vulnerability-status" | "vulnerability-status-inverted" | "yellow" | "yellow-inverted" | CustomColorPalette>;
+export declare const TimeseriesColorPaletteContext: import("react").Context<"apdex" | "apdex-inverted" | "aurora" | "aurora-inverted" | "blue" | "blue-inverted" | "blue-moss" | "blue-moss-inverted" | "blue-steel" | "blue-steel-inverted" | "blue-turquoise" | "blue-turquoise-inverted" | "brown" | "brown-inverted" | "categorical" | "categorical-inverted" | "categorical-vivid" | "categorical-vivid-inverted" | "fireplace" | "fireplace-inverted" | "grey" | "grey-inverted" | "log-level" | "log-level-inverted" | "log-status" | "log-status-inverted" | "magenta" | "magenta-inverted" | "moss" | "moss-inverted" | "neon" | "neon-inverted" | "orange" | "orange-blue" | "orange-blue-inverted" | "orange-inverted" | "orange-petrol" | "orange-petrol-inverted" | "overdrive" | "overdrive-inverted" | "pear" | "pear-inverted" | "petrol" | "petrol-inverted" | "pink" | "pink-green" | "pink-green-inverted" | "pink-inverted" | "pink-purple" | "pink-purple-inverted" | "purple" | "purple-inverted" | "purple-rain" | "purple-rain-inverted" | "purple-yellow" | "purple-yellow-inverted" | "rainbow" | "rainbow-inverted" | "red" | "red-blue" | "red-blue-inverted" | "red-green" | "red-green-inverted" | "red-inverted" | "red-purple" | "red-purple-inverted" | "security-risk-level" | "security-risk-level-inverted" | "status" | "status-inverted" | "swamps" | "swamps-inverted" | "threshold" | "threshold-inverted" | "tide" | "tide-inverted" | "turquoise" | "turquoise-inverted" | "vulnerability-status" | "vulnerability-status-inverted" | "yellow" | "yellow-inverted" | CustomColorPalette>;
 //# sourceMappingURL=TimeseriesColorPalette.context.d.ts.map

package/charts/timeseries/hooks/useColorPalette.d.ts

@@ -1,2 +1,2 @@
-export declare const useColorPalette: () => "apdex" | "apdex-inverted" | "blue" | "blue-inverted" | "blue-moss" | "blue-moss-inverted" | "blue-steel" | "blue-steel-inverted" | "blue-turquoise" | "blue-turquoise-inverted" | "brown" | "brown-inverted" | "categorical" | "categorical-inverted" | "fireplace" | "fireplace-inverted" | "grey" | "grey-inverted" | "log-level" | "log-level-inverted" | "log-status" | "log-status-inverted" | "magenta" | "magenta-inverted" | "moss" | "moss-inverted" | "orange" | "orange-blue" | "orange-blue-inverted" | "orange-inverted" | "orange-petrol" | "orange-petrol-inverted" | "pear" | "pear-inverted" | "petrol" | "petrol-inverted" | "pink" | "pink-green" | "pink-green-inverted" | "pink-inverted" | "pink-purple" | "pink-purple-inverted" | "purple" | "purple-inverted" | "purple-rain" | "purple-rain-inverted" | "purple-yellow" | "purple-yellow-inverted" | "rainbow" | "rainbow-inverted" | "red" | "red-blue" | "red-blue-inverted" | "red-green" | "red-green-inverted" | "red-inverted" | "red-purple" | "red-purple-inverted" | "security-risk-level" | "security-risk-level-inverted" | "status" | "status-inverted" | "swamps" | "swamps-inverted" | "threshold" | "threshold-inverted" | "turquoise" | "turquoise-inverted" | "vulnerability-status" | "vulnerability-status-inverted" | "yellow" | "yellow-inverted" | import("../../index.js").CustomColorPalette;
+export declare const useColorPalette: () => "apdex" | "apdex-inverted" | "aurora" | "aurora-inverted" | "blue" | "blue-inverted" | "blue-moss" | "blue-moss-inverted" | "blue-steel" | "blue-steel-inverted" | "blue-turquoise" | "blue-turquoise-inverted" | "brown" | "brown-inverted" | "categorical" | "categorical-inverted" | "categorical-vivid" | "categorical-vivid-inverted" | "fireplace" | "fireplace-inverted" | "grey" | "grey-inverted" | "log-level" | "log-level-inverted" | "log-status" | "log-status-inverted" | "magenta" | "magenta-inverted" | "moss" | "moss-inverted" | "neon" | "neon-inverted" | "orange" | "orange-blue" | "orange-blue-inverted" | "orange-inverted" | "orange-petrol" | "orange-petrol-inverted" | "overdrive" | "overdrive-inverted" | "pear" | "pear-inverted" | "petrol" | "petrol-inverted" | "pink" | "pink-green" | "pink-green-inverted" | "pink-inverted" | "pink-purple" | "pink-purple-inverted" | "purple" | "purple-inverted" | "purple-rain" | "purple-rain-inverted" | "purple-yellow" | "purple-yellow-inverted" | "rainbow" | "rainbow-inverted" | "red" | "red-blue" | "red-blue-inverted" | "red-green" | "red-green-inverted" | "red-inverted" | "red-purple" | "red-purple-inverted" | "security-risk-level" | "security-risk-level-inverted" | "status" | "status-inverted" | "swamps" | "swamps-inverted" | "threshold" | "threshold-inverted" | "tide" | "tide-inverted" | "turquoise" | "turquoise-inverted" | "vulnerability-status" | "vulnerability-status-inverted" | "yellow" | "yellow-inverted" | import("../../index.js").CustomColorPalette;
 //# sourceMappingURL=useColorPalette.d.ts.map

package/charts/timeseries/layout/TimeseriesChartGridLayout.d.ts

@@ -1,5 +1,5 @@
 export declare const TimeseriesChartGridLayout: {
-    (): import("react").JSX.Element;
+    (): import("react").JSX.Element | null;
     displayName: string;
 };
 //# sourceMappingURL=TimeseriesChartGridLayout.d.ts.map

package/charts/timeseries/layout/TimeseriesChartGridLayout.js

@@ -31,6 +31,9 @@ const TimeseriesChartGridLayout = () => {
   const { currentScale: xScale } = (0, import_useXScale.useXScales)();
   const { left, right } = (0, import_useYScales.useYScales)();
   const axisScale = left || right;
+  if (!axisScale) {
+    return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className: import_ChartGrid_css.plotLayout, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_Grid.Grid,
     {

package/charts/timeseries/providers/TimeseriesFilteredDataProvider.js

@@ -39,13 +39,15 @@ const TimeseriesFilteredDataProvider = ({ children }) => {
   } = (0, import_useTimeseriesData.useTimeseriesData)();
   const filteredSeriesIds = (0, import_selectors.useFilteredSeriesIdsState)();
   const hasId = (series) => filteredSeriesIds.has((0, import_safe_get.safeGet)(initialSeriesMap, series).id);
-  const filteredTimeseriesPerVariant = filteredSeriesIds.size > 0 ? {
+  const candidateFilter = filteredSeriesIds.size > 0 ? {
     ...dataPerVariant,
     line: dataPerVariant["line"].filter(hasId),
     bar: dataPerVariant["bar"].filter(hasId),
     area: dataPerVariant["area"].filter(hasId),
     band: dataPerVariant["band"].filter(hasId)
   } : dataPerVariant;
+  const allSeriesFiltered = filteredSeriesIds.size > 0 && candidateFilter.line.length === 0 && candidateFilter.bar.length === 0 && candidateFilter.area.length === 0 && candidateFilter.band.length === 0;
+  const filteredTimeseriesPerVariant = allSeriesFiltered ? dataPerVariant : candidateFilter;
   const {
     seriesMap,
     datapointsMap,