@dynatrace/strato-components 3.7.1 → 3.9.0

package/charts/pie/utils/normalize-pie-data.js

@@ -0,0 +1,38 @@
+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 normalize_pie_data_exports = {};
+__export(normalize_pie_data_exports, {
+  normalizePieData: () => normalizePieData
+});
+module.exports = __toCommonJS(normalize_pie_data_exports);
+var import_access_value = require("../../../core/utils/accessors/access-value.js");
+function normalizePieData(input) {
+  const { data, labelAccessor, valueAccessor, unit } = input;
+  if (labelAccessor && valueAccessor) {
+    const slices = data.map((datapoint) => {
+      const color = (0, import_access_value.accessValue)(datapoint, "color");
+      return {
+        category: String((0, import_access_value.accessValue)(datapoint, labelAccessor) ?? ""),
+        value: Number((0, import_access_value.accessValue)(datapoint, valueAccessor) ?? 0),
+        ...typeof color === "string" ? { color } : {}
+      };
+    });
+    return { slices, unit };
+  }
+  return data;
+}

package/charts/pie/utils/pie-config.js

@@ -83,7 +83,8 @@ function buildPieChartConfig(props, contextConfig, slots) {
     slots.grouping
   );
   const legend = getLegendConfiguration(contextConfig.legend, slots.legend);
-  const formatter = props.formatter ?? contextConfig.formatter ?? (0, import_defaultUnitFormatter.defaultUnitFormatter)(props.data.unit, 0);
+  const resolvedUnit = Array.isArray(props.data) ? props.unit : props.data.unit;
+  const formatter = props.formatter ?? contextConfig.formatter ?? (0, import_defaultUnitFormatter.defaultUnitFormatter)(resolvedUnit, 0);
   const truncationMode = props.truncationMode ?? contextConfig.truncationMode ?? import_constants.DEFAULT_TRUNCATION_MODE;
   const toolbar = getToolbarConfiguration(contextConfig.toolbar, slots.toolbar);
   const seriesActions = props.seriesActions ?? contextConfig.seriesActions ?? void 0;

package/charts/pie/utils/sanitize-toolbar-intents.d.ts

@@ -0,0 +1,2 @@
+import type { PieDonutConfig } from '../types/pie-chart.config.js';
+export declare const sanitizeToolbarIntents: (config: PieDonutConfig) => PieDonutConfig;

package/charts/{tree-map/hooks/useSetOverlayState.js → pie/utils/sanitize-toolbar-intents.js}

@@ -15,25 +15,16 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var useSetOverlayState_exports = {};
-__export(useSetOverlayState_exports, {
-  useSetOverlayState: () => useSetOverlayState
+var sanitize_toolbar_intents_exports = {};
+__export(sanitize_toolbar_intents_exports, {
+  sanitizeToolbarIntents: () => sanitizeToolbarIntents
 });
-module.exports = __toCommonJS(useSetOverlayState_exports);
-var import_selectors = require("../store/selectors.js");
-const useSetOverlayState = () => {
-  const setState = (0, import_selectors.useSetState)();
-  const setToolbarVisible = (toolbarVisible) => {
-    setState((prev) => {
-      return {
-        ...prev,
-        overlay: {
-          toolbarVisible
-        }
-      };
-    });
-  };
+module.exports = __toCommonJS(sanitize_toolbar_intents_exports);
+var import_get_toolbar_config_without_intents = require("../../core/components/toolbar/utils/get-toolbar-config-without-intents.js");
+const sanitizeToolbarIntents = (config) => {
+  const toolbar = config.toolbar ? (0, import_get_toolbar_config_without_intents.getToolbarConfigWithoutIntents)(config.toolbar) : void 0;
   return {
-    setToolbarVisible
+    ...config,
+    toolbar
   };
 };

package/charts/single-value/SingleValue.css

@@ -1,4 +1,4 @@
-._1sfgzlg0-3-7-1 {
+._1sfgzlg0-3-9-0 {
   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-7-1";
+var container = "_1sfgzlg0-3-9-0";

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

@@ -1,7 +1,7 @@
-._1mx9zjb0-3-7-1 {
+._1mx9zjb0-3-9-0 {
   height: 100%;
   width: 100%;
 }
-._1mx9zjb0-3-7-1 > div {
+._1mx9zjb0-3-9-0 > 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-7-1";
+var gridRows = "_1mx9zjb0-3-9-0";

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

@@ -1,4 +1,4 @@
-._eom86z0-3-7-1 {
+._eom86z0-3-9-0 {
   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-7-1";
+var fontSizeWrapper = "_eom86z0-3-9-0";

package/charts/timeseries/TimeseriesChart.d.ts

@@ -1,7 +1,7 @@
 import { type PropsWithChildren } from 'react';
 import type { TimeseriesChartProps } from './types/timeseries-props.js';
 import type { TimeseriesChartRef } from './types/timeseries-ref.js';
-import type { _XYChartAdoptionProps } from '../xy-chart-adoption/types/props.js';
+import type { _XYChartAdoptionProps } from '../xy-chart-adoption/shared/types/props.js';
 export declare const TimeseriesChartSwitcher: (props: TimeseriesChartProps & _XYChartAdoptionProps & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<TimeseriesChartRef>) => import("react").ReactElement | null;

package/charts/timeseries/TimeseriesChartInternal.d.ts

@@ -1,5 +1,9 @@
 import type { TimeseriesChartConfiguration } from './types/timeseries-config.js';
 import type { TimeseriesChartRef } from './types/timeseries-ref.js';
+export declare function computeChartPadding(axisLeftConfig: unknown, axisRightConfig: unknown, unitsCount: number, isLegendHiddenOrVertical: boolean): {
+    hasLeftPadding: boolean;
+    hasRightPadding: boolean;
+};
 export interface _TimeseriesChartProps {
     config: TimeseriesChartConfiguration;
 }

package/charts/timeseries/TimeseriesChartInternal.js

@@ -17,12 +17,12 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var TimeseriesChartInternal_exports = {};
 __export(TimeseriesChartInternal_exports, {
-  TimeseriesChartInternal: () => TimeseriesChartInternal
+  TimeseriesChartInternal: () => TimeseriesChartInternal,
+  computeChartPadding: () => computeChartPadding
 });
 module.exports = __toCommonJS(TimeseriesChartInternal_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_constants = require("./components/annotations-timeseries/constants.js");
 var import_TimeseriesAnnotationsIndicators = require("./components/annotations-timeseries/TimeseriesAnnotationsIndicators.js");
 var import_TimeseriesChartAnnotationsArea = require("./components/annotations-timeseries/TimeseriesChartAnnotationsArea.js");
 var import_TimeseriesTimeBottomAxisArea = require("./components/axes/TimeseriesTimeBottomAxisArea/TimeseriesTimeBottomAxisArea.js");
@@ -31,7 +31,7 @@ var import_TimeseriesValueRightAxisArea = require("./components/axes/TimeseriesV
 var import_TimeseriesChartOverlays = require("./components/overlays/TimeseriesChartOverlays.js");
 var import_ThresholdIndicators = require("./components/thresholds/ThresholdIndicators.js");
 var import_TimeseriesThresholdArea = require("./components/thresholds/TimeseriesThresholdArea.js");
-var import_constants2 = require("./constants.js");
+var import_constants = require("./constants.js");
 var import_useAnnotationsConfig = require("./hooks/useAnnotationsConfig.js");
 var import_useChartInteractions = require("./hooks/useChartInteractions.js");
 var import_useTimeseriesFilteredData = require("./hooks/useTimeseriesFilteredData.js");
@@ -43,14 +43,26 @@ var import_TimeseriesChartProviders = require("./providers/TimeseriesChartProvid
 var import_timeseries_grid_area_rules = require("./types/timeseries-grid-area-rules.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
 var import_defaultChartValues_css = require("../../core/styles/defaultChartValues.sty.js");
-var import_constants3 = require("../core/components/annotations/constants.js");
+var import_constants2 = require("../core/components/annotations/constants.js");
 var import_get_annotations_visible_area = require("../core/components/annotations/utils/get-annotations-visible-area.js");
 var import_ChartGridRoot = require("../core/components/chart-grid/ChartGridRoot.js");
+var import_constants3 = require("../core/components/chart-grid/constants.js");
 var import_useChartLayoutLoading = require("../core/components/chart-layout/hooks/useChartLayoutLoading.js");
 var import_useChartLayoutOrientation = require("../core/components/chart-layout/hooks/useChartLayoutOrientation.js");
 var import_useGraphSize = require("../core/components/chart-layout/hooks/useGraphSize.js");
 var import_ChartLoaderOverlay = require("../core/components/chart-loader-overlay/ChartLoaderOverlay.js");
 var import_constants4 = require("../core/components/data-point/constants.js");
+function computeChartPadding(axisLeftConfig, axisRightConfig, unitsCount, isLegendHiddenOrVertical) {
+  const singleUnit = unitsCount === 1 && isLegendHiddenOrVertical;
+  const paddingRight = Boolean(
+    !axisLeftConfig && !axisRightConfig && singleUnit || axisLeftConfig && axisRightConfig && singleUnit || axisLeftConfig && isLegendHiddenOrVertical
+  );
+  const onlyRightAxis = !axisLeftConfig && Boolean(axisRightConfig);
+  return {
+    hasLeftPadding: onlyRightAxis,
+    hasRightPadding: onlyRightAxis || paddingRight
+  };
+}
 const timeseriesGridTemplateAreas = `
   "${import_timeseries_grid_area_rules.AREAS.annotations} ${import_timeseries_grid_area_rules.AREAS.annotations} ${import_timeseries_grid_area_rules.AREAS.annotations} . ."
   "${import_timeseries_grid_area_rules.AREAS.leftAxis} ${import_timeseries_grid_area_rules.AREAS.leftThreshold} plot ${import_timeseries_grid_area_rules.AREAS.rightThreshold} ${import_timeseries_grid_area_rules.AREAS.rightAxis}"
@@ -79,19 +91,24 @@ const TimeseriesChartInternal = /* @__PURE__ */ (0, import_react.forwardRef)(({
     annotations.visibleTracksLimit,
     numHiddenTracks
   );
-  const timeseriesGridTemplateRows = `minmax(0, ${annotationsVisibleArea + (tracksQuantity && import_constants.ANNOTATIONS_PADDING_BOTTOM)}px)  minmax(60%, 1fr) minmax(0, auto)`;
-  const availableWidth = tracksQuantity && orientation === "vertical" ? width - import_constants3.SCROLLBAR_WIDTH : width;
+  const availableWidth = tracksQuantity && orientation === "vertical" ? width - import_constants2.SCROLLBAR_WIDTH : width;
   const isLegendHiddenOrVertical = orientation === "vertical" || legendHidden;
   const isLegendHiddenOrRight = orientation === "horizontal" || legendHidden;
-  const bothConfigsUndefinedAndOneUnit = !axisLeftConfig && !axisRightConfig && units.length === 1 && isLegendHiddenOrVertical;
-  const bothConfigsSetAndOneUnit = axisLeftConfig && axisRightConfig && units.length === 1 && isLegendHiddenOrVertical;
-  const leftConfigSetAndVertical = axisLeftConfig && isLegendHiddenOrVertical;
-  const rightConfigSet = axisRightConfig;
-  const paddingRight = bothConfigsUndefinedAndOneUnit || bothConfigsSetAndOneUnit || leftConfigSetAndVertical;
-  const onlyRightAxis = !axisLeftConfig && rightConfigSet;
-  const hasLeftPadding = onlyRightAxis;
-  const hasRightPadding = hasLeftPadding || paddingRight;
+  const { hasLeftPadding, hasRightPadding } = computeChartPadding(
+    axisLeftConfig,
+    axisRightConfig,
+    units.length,
+    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 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";
   (0, import_useChartInteractions.useChartInteractions)();
   if (!height || !width) {
     return null;
@@ -100,17 +117,17 @@ const TimeseriesChartInternal = /* @__PURE__ */ (0, import_react.forwardRef)(({
     "div",
     {
       style: {
-        paddingTop: tracksQuantity ? 0 : import_constants4.OVERLAY_PADDING,
+        paddingTop: showAnnotations ? 0 : import_constants4.OVERLAY_PADDING,
         paddingLeft: hasLeftPadding ? import_constants4.OVERLAY_PADDING : 0
       },
       className: import_defaultChartValues_css.defaultChartSize,
-      "aria-label": import_constants2.TIMESERIES_ARIA_LABEL,
+      "aria-label": import_constants.TIMESERIES_ARIA_LABEL,
       role: "img",
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
         import_ChartGridRoot.ChartGrid,
         {
           width: availableWidth - (hasRightPadding ? import_constants4.OVERLAY_PADDING : 0),
-          height: chartGridHeight,
+          height: chartGridRenderHeight,
           gridTemplateAreas: timeseriesGridTemplateAreas,
           gridTemplateColumns: timeseriesGridTemplateColumns,
           gridTemplateRows: timeseriesGridTemplateRows,
@@ -122,11 +139,11 @@ const TimeseriesChartInternal = /* @__PURE__ */ (0, import_react.forwardRef)(({
               forwardedRef,
               chartRef,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesValueLeftAxisArea.TimeseriesValueLeftAxisArea, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesTimeBottomAxisArea.TimeseriesTimeBottomAxisArea, {}),
+                showAxes && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesValueLeftAxisArea.TimeseriesValueLeftAxisArea, {}),
+                showAxes && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesTimeBottomAxisArea.TimeseriesTimeBottomAxisArea, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_ChartGridRoot.ChartGrid.PlotArea, { children: [
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesChartPlot.TimeseriesChartPlot, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesAnnotationsIndicators.TimeseriesAnnotationsIndicators, {}),
+                  showAnnotations && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesAnnotationsIndicators.TimeseriesAnnotationsIndicators, {}),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                     import_ChartLoaderOverlay.ChartLoaderOverlay,
                     {
@@ -137,9 +154,9 @@ const TimeseriesChartInternal = /* @__PURE__ */ (0, import_react.forwardRef)(({
                   ),
                   /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ThresholdIndicators.ThresholdIndicators, { indicatorType: "line" })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesValueRightAxisArea.TimeseriesValueRightAxisArea, {}),
+                showAxes && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesValueRightAxisArea.TimeseriesValueRightAxisArea, {}),
                 /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesThresholdArea.TimeseriesThresholdArea, {}),
-                !!tracksQuantity && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesChartAnnotationsArea.TimeseriesChartAnnotationsArea, {})
+                showAnnotations && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TimeseriesChartAnnotationsArea.TimeseriesChartAnnotationsArea, {})
               ]
             }
           ) })
@@ -148,4 +165,4 @@ const TimeseriesChartInternal = /* @__PURE__ */ (0, import_react.forwardRef)(({
     }
   );
 });
-TimeseriesChartInternal.displayName = import_constants2.DISPLAY_NAME;
+TimeseriesChartInternal.displayName = import_constants.DISPLAY_NAME;

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

@@ -21,11 +21,10 @@ __export(TimeseriesChartAnnotationsArea_exports, {
 });
 module.exports = __toCommonJS(TimeseriesChartAnnotationsArea_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_constants = require("./constants.js");
 var import_useBehavioralTrackingProps = require("../../../../core/hooks/useBehavioralTrackingProps.js");
 var import_AnnotationsTimeDisplay = require("../../../core/components/annotations/components/displays/AnnotationsTimeDisplay.js");
 var import_AnnotationsScrollWrapper = require("../../../core/components/annotations/components/overlays/AnnotationsScrollWrapper.js");
-var import_constants2 = require("../../../core/components/annotations/constants.js");
+var import_constants = require("../../../core/components/annotations/constants.js");
 var import_ChartGridRoot = require("../../../core/components/chart-grid/ChartGridRoot.js");
 var import_useGridPlotSize = require("../../../core/components/chart-grid/hooks/useGridPlotSize.js");
 var import_selectors = require("../../hooks/store/selectors.js");
@@ -37,7 +36,7 @@ const TimeseriesChartAnnotationsArea = () => {
   const config = (0, import_useAnnotationsConfig.useAnnotationsConfig)();
   const {
     tracks,
-    showLabels = import_constants2.DEFAULT_SHOW_LABELS,
+    showLabels = import_constants.DEFAULT_SHOW_LABELS,
     annotationsActions,
     tooltip
   } = config;
@@ -55,37 +54,30 @@ const TimeseriesChartAnnotationsArea = () => {
       }
     }));
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_ChartGridRoot.ChartGrid.GridArea,
-    {
-      paddingBottom: import_constants.ANNOTATIONS_PADDING_BOTTOM,
-      gridArea: import_timeseries_grid_area_rules.AREAS.annotations,
-      children: ({ availableWidth, availableHeight }) => {
-        const labelOffset = availableWidth - width;
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_AnnotationsScrollWrapper.AnnotationsScrollWrapper,
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ChartGridRoot.ChartGrid.GridArea, { gridArea: import_timeseries_grid_area_rules.AREAS.annotations, children: ({ availableWidth, availableHeight }) => {
+    const labelOffset = availableWidth - width;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_AnnotationsScrollWrapper.AnnotationsScrollWrapper,
+      {
+        height: availableHeight,
+        width: availableWidth + import_constants.SCROLLBAR_THRESHOLD,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_AnnotationsTimeDisplay.AnnotationsTimeDisplay,
           {
-            height: availableHeight,
-            width: availableWidth + import_constants2.SCROLLBAR_THRESHOLD,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              import_AnnotationsTimeDisplay.AnnotationsTimeDisplay,
-              {
-                tracks,
-                width: availableWidth,
-                scale,
-                showLabels: showLabels ?? import_constants2.DEFAULT_SHOW_LABELS,
-                labelsOffset: labelOffset,
-                annotationsActions: (annotation) => annotation && annotationsActions?.(annotation),
-                markerGroupHover: handleUpdateIndicators,
-                textOverflow: import_constants2.DEFAULT_INTEGRATION_TEXT_OVERFLOW,
-                tooltipConfig: tooltip,
-                ...behaviorTrackingProps,
-                "data-dt-component": COMPONENT_NAME
-              }
-            )
+            tracks,
+            width: availableWidth,
+            scale,
+            showLabels: showLabels ?? import_constants.DEFAULT_SHOW_LABELS,
+            labelsOffset: labelOffset,
+            annotationsActions: (annotation) => annotation && annotationsActions?.(annotation),
+            markerGroupHover: handleUpdateIndicators,
+            textOverflow: import_constants.DEFAULT_TEXT_OVERFLOW,
+            tooltipConfig: tooltip,
+            ...behaviorTrackingProps,
+            "data-dt-component": COMPONENT_NAME
           }
-        );
+        )
       }
-    }
-  );
+    );
+  } });
 };

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

@@ -1,6 +1,6 @@
-._19z0vdp0-3-7-1 {
+._19z0vdp0-3-9-0 {
   position: relative;
 }
-._19z0vdp1-3-7-1 {
+._19z0vdp1-3-9-0 {
   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-7-1", variantClassNames: { isTouchableDevice: { true: "_19z0vdp1-3-7-1" } }, defaultVariants: {}, compoundVariants: [] });
+var timeBottomAxisContainer = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_19z0vdp0-3-9-0", variantClassNames: { isTouchableDevice: { true: "_19z0vdp1-3-9-0" } }, defaultVariants: {}, compoundVariants: [] });

package/charts/timeseries/components/overlays/TimeseriesChartOverlaysBorder.js

@@ -23,15 +23,19 @@ module.exports = __toCommonJS(TimeseriesChartOverlaysBorder_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_lodash_es = require("lodash");
 var import_ChartOverlaysBorder = require("../../../core/components/overlays/ChartOverlaysBorder.js");
+var import_useAnnotationsConfig = require("../../hooks/useAnnotationsConfig.js");
 var import_useYScales = require("../../hooks/useYScales.js");
 const TimeseriesChartOverlaysBorder = () => {
   const { left, right } = (0, import_useYScales.useYScales)();
+  const { tracks } = (0, import_useAnnotationsConfig.useAnnotationsConfig)();
+  const visibleTracksCount = tracks.filter((track) => !track.hidden).length;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_ChartOverlaysBorder.ChartOverlaysBorder,
     {
       left: !(0, import_lodash_es.isUndefined)(left),
       right: !(0, import_lodash_es.isUndefined)(right),
-      bottom: true
+      bottom: true,
+      topSeparator: visibleTracksCount > 1
     }
   );
 };

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

@@ -1,8 +1,8 @@
-._17fdb110-3-7-1 {
+._17fdb110-3-9-0 {
   z-index: 1;
   pointer-events: none;
 }
-._17fdb111-3-7-1 {
+._17fdb111-3-9-0 {
   top: -3.5px;
   left: -3.5px;
   width: calc(100% + 7px);
@@ -10,7 +10,7 @@
   z-index: 1;
   pointer-events: none;
 }
-._17fdb112-3-7-1 {
+._17fdb112-3-9-0 {
   top: -7px;
   left: -7px;
   width: calc(100% + 14px);
@@ -18,7 +18,7 @@
   z-index: 2;
   pointer-events: none;
 }
-._17fdb113-3-7-1 {
+._17fdb113-3-9-0 {
   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-7-1 _13lzg4k0-3-7-1";
-var crosshairLayout = "_17fdb113-3-7-1 _13lzg4k0-3-7-1";
-var datapointCanvasPlot = "_17fdb111-3-7-1 _13lzg4k0-3-7-1";
-var datapointIndicatorLayout = "_17fdb112-3-7-1 _13lzg4k0-3-7-1";
+var canvasPlot = "_17fdb110-3-9-0 _13lzg4k0-3-9-0";
+var crosshairLayout = "_17fdb113-3-9-0 _13lzg4k0-3-9-0";
+var datapointCanvasPlot = "_17fdb111-3-9-0 _13lzg4k0-3-9-0";
+var datapointIndicatorLayout = "_17fdb112-3-9-0 _13lzg4k0-3-9-0";

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

@@ -1,6 +1,6 @@
-._9p8qi20-3-7-1 {
+._9p8qi20-3-9-0 {
   z-index: 2;
 }
-._9p8qi21-3-7-1 {
+._9p8qi21-3-9-0 {
   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-7-1 _13lzg4k0-3-7-1";
-var thresholdPlotRange = "_9p8qi21-3-7-1 _13lzg4k0-3-7-1";
+var thresholdPlotLine = "_9p8qi20-3-9-0 _13lzg4k0-3-9-0";
+var thresholdPlotRange = "_9p8qi21-3-9-0 _13lzg4k0-3-9-0";

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

@@ -74,7 +74,6 @@ const TimeseriesChartToolbar = ({
   return !(0, import_lodash_es.isUndefined)(config) && anyInteractionEnabled ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_ChartToolbarRenderer.ChartToolbarRenderer,
     {
-      visible: false,
       handlerRef,
       visibleWhenMouseInBounds: true,
       collapsed: config.collapsed,

package/charts/timeseries/slots/Tooltip.d.ts

@@ -4,7 +4,10 @@ import type { SeriesDisplayMode, TooltipVariant } from '../../core/types/tooltip
  * @public
  */
 export interface TimeseriesChartTooltipProps {
-    /** Whether the tooltip should contain datapoints from all series for the selected timestamp, or just the closest one. */
+    /**
+     * Whether the tooltip should contain datapoints from all series for the selected timestamp, or just the closest one.
+     * @defaultValue 'single'
+     */
     variant?: TooltipVariant;
     /** The tooltip items display mode. When it's undefined and variant is 'shared', then set to 'single-line', if variant is 'single', then set to 'multi-line'. */
     seriesDisplayMode?: SeriesDisplayMode;

package/charts/top-list/TopList.css

@@ -1,4 +1,4 @@
-._jwlby60-3-7-1 {
+._jwlby60-3-9-0 {
   width: 100%;
   overflow-y: auto;
 }

package/charts/top-list/TopList.d.ts

@@ -5,6 +5,18 @@ export type { TopListProps };
  * A horizontal ranked-bar chart with labels inside bars and a hidden numerical
  * axis, implemented as a wrapper around XYChart. When the list has more items
  * than fit in `height`, the viewport becomes scrollable.
+ *
+ * Slots such as `<TopList.ColorRule>` can be passed as children to customize
+ * bar colors per datapoint; they are forwarded to the internal `XYChart`.
  * @public
  */
-export declare const TopList: (props: TopListProps & import("react").RefAttributes<XYChartRef>) => import("react").ReactElement | null;
+export declare const TopList: ((props: TopListProps & import("react").RefAttributes<XYChartRef>) => import("react").ReactElement | null) & {
+    /**
+     * Apply a conditional color override to bars matching the rule. Same
+     * component reference as `XYChart.ColorRule` and `TimeseriesChart.ColorRule`.
+     */
+    ColorRule: {
+        (_props: import("../index.js").ColorRuleProps): null;
+        displayName: string;
+    };
+};

package/charts/top-list/TopList.js

@@ -17,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var TopList_exports = {};
 __export(TopList_exports, {
-  TopList: () => TopList
+  TopList: () => TopList2
 });
 module.exports = __toCommonJS(TopList_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -25,10 +25,12 @@ var import_react = require("react");
 var import_constants = require("./constants.js");
 var import_TopList_css = require("./TopList.sty.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
+var import_ColorRule = require("../core/slots/ColorRule.js");
 var import_coerceSizeValue = require("../core/utils/coerceSizeValue.js");
 var import_defaults = require("../xy-chart/constants/defaults.js");
 var import_XYChartRoot = require("../xy-chart/XYChartRoot.js");
-const TopList = (0, import_react.forwardRef)(function TopList2({
+const COMPONENT_NAME_BEHAVIOURAL_TRACKING = "TopList";
+const TopListRoot = (0, import_react.forwardRef)(function TopList({
   data,
   labelAccessor,
   valueAccessor,
@@ -37,22 +39,25 @@ const TopList = (0, import_react.forwardRef)(function TopList2({
   valueFormatter,
   seriesIdAccessor,
   seriesNameAccessor,
+  comparator,
+  children,
   height = import_defaults.DEFAULT_CHART_HEIGHT,
+  // @ts-expect-error - We want to allow overriding data-dt-component as we use the component internally in other Strato components, but it should not appear in the public API.
+  "data-dt-component": componentName = COMPONENT_NAME_BEHAVIOURAL_TRACKING,
   ...xyChartProps
 }, forwardedRef) {
   const internalRef = (0, import_react.useRef)(null);
   const mergedRef = (0, import_useMergeRefs.useMergeRefs)([internalRef, forwardedRef]);
   const onScroll = (0, import_react.useCallback)(() => internalRef.current?.reset(), []);
   const dataWithSyntheticSeries = (0, import_react.useMemo)(() => {
-    if (seriesIdAccessor !== void 0) {
-      return data;
-    }
-    return data.map((d) => ({
+    const mapped = seriesIdAccessor !== void 0 ? data : data.map((d) => ({
       ...d,
       [import_constants.SERIES_ID_KEY]: "series",
       [import_constants.SERIES_NAME_KEY]: "Series"
     }));
-  }, [data, seriesIdAccessor]);
+    const sortDescending = (a, b) => Number(b[valueAccessor]) - Number(a[valueAccessor]);
+    return [...mapped].sort(comparator ?? sortDescending);
+  }, [comparator, data, seriesIdAccessor, valueAccessor]);
   const viewportPx = (0, import_coerceSizeValue.coerceSizeValueToPixels)(height) ?? import_defaults.DEFAULT_CHART_HEIGHT;
   const contentHeight = Math.max(viewportPx, data.length * import_constants.ROW_HEIGHT);
   const legend = seriesIdAccessor === void 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartRoot.XYChart.Legend, { hidden: true });
@@ -62,6 +67,7 @@ const TopList = (0, import_react.forwardRef)(function TopList2({
       className: import_TopList_css.scrollContainer,
       style: { height: (0, import_coerceSizeValue.coerceSizeValue)(height) },
       onScroll,
+      "data-dt-component": componentName,
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         import_XYChartRoot.XYChart,
         {
@@ -104,10 +110,19 @@ const TopList = (0, import_react.forwardRef)(function TopList2({
                 formatter: categoryFormatter
               }
             ),
-            legend
+            legend,
+            children
           ]
         }
       )
     }
   );
 });
+const TopList2 = Object.assign(TopListRoot, {
+  /**
+   * Apply a conditional color override to bars matching the rule. Same
+   * component reference as `XYChart.ColorRule` and `TimeseriesChart.ColorRule`.
+   */
+  ColorRule: import_ColorRule.ColorRule
+});
+TopList2.displayName = "TopList";

package/charts/top-list/TopList.sty.js

@@ -21,4 +21,4 @@ __export(TopList_css_exports, {
 });
 module.exports = __toCommonJS(TopList_css_exports);
 var import_TopList_css_ts_vanilla = require("./TopList.css");
-var scrollContainer = "_jwlby60-3-7-1";
+var scrollContainer = "_jwlby60-3-9-0";