@dynatrace/strato-components 3.7.1 → 3.9.0

package/charts/xy-chart/processing-strategies/strategies/line-series.js

@@ -20,16 +20,19 @@ __export(line_series_exports, {
   LineSeriesStrategy: () => LineSeriesStrategy
 });
 module.exports = __toCommonJS(line_series_exports);
-var import_base_series = require("./base-series.js");
+var import_fast_series = require("./fast-series.js");
 var import_gappable_series = require("./gappable-series.js");
 var import_is_valid_points_display = require("../../../core/components/canvas/utils/is-valid-points-display.js");
 var import_safe_get = require("../../../core/utils/safe-get.js");
+var import_single_line_name = require("../../../core/utils/single-line-name.js");
 var import_defaults = require("../../constants/defaults.js");
+var import_guards = require("../../types/guards.js");
 var import_type_guards = require("../../utils/type-guards.js");
 var import_get_datapoints = require("../utils/access-datapoint/get-datapoints.js");
 var import_get_calculated_linear_point = require("../utils/cast-data/get-calculated-linear-point.js");
 var import_get_linear_color_palette = require("../utils/coloring/get-linear-color-palette.js");
-class LineSeriesStrategy extends import_base_series.SeriesBaseStrategy {
+const GAP_FALSE_METADATA = { isGap: false };
+class LineSeriesStrategy extends import_fast_series.FastSeriesBaseStrategy {
   gapHelper;
   constructor(initializer) {
     super(initializer);
@@ -52,11 +55,12 @@ class LineSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       seriesNameAccessor,
       datum
     });
+    const name = (0, import_single_line_name.singleLineName)(seriesName);
     const color = this.getColor(
       datum,
       seriesProps,
       context.colorPalette,
-      seriesName,
+      name,
       seriesIndex
     );
     return {
@@ -66,7 +70,8 @@ class LineSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       actions: seriesProps.actions,
       pointsDisplay: seriesProps.pointsDisplay && (0, import_is_valid_points_display.isValidPointsDisplay)(seriesProps.pointsDisplay) ? seriesProps.pointsDisplay : import_defaults.DEFAULT_POINTS_DISPLAY,
       ...color,
-      name: seriesName
+      name,
+      nameSegments: Array.isArray(seriesName) ? seriesName : void 0
     };
   }
   getCalculationPoint(datapoint, xAxis, yAxis) {
@@ -140,6 +145,109 @@ class LineSeriesStrategy extends import_base_series.SeriesBaseStrategy {
       });
     }
   }
+  isEligibleForFastPath(data, seriesProps, xAxis, yAxis) {
+    if (!(0, import_guards.isTime)(xAxis.type) || !(0, import_guards.isLinear)(yAxis.type)) {
+      return false;
+    }
+    const x0Acc = seriesProps.x0Accessor;
+    const x1Acc = seriesProps.x1Accessor;
+    const y0Acc = seriesProps.y0Accessor;
+    if (!x0Acc || !y0Acc) {
+      return false;
+    }
+    if (!(0, import_get_datapoints.isFlatStringPath)(x0Acc) || x1Acc !== void 0 && !(0, import_get_datapoints.isFlatStringPath)(x1Acc) || !(0, import_get_datapoints.isFlatStringPath)(y0Acc) || !(0, import_get_datapoints.isFlatStringPath)(seriesProps.seriesIdAccessor)) {
+      return false;
+    }
+    const d0 = data[0];
+    if (d0 === void 0) {
+      return false;
+    }
+    return d0[x0Acc] instanceof Date && typeof d0[y0Acc] === "number";
+  }
+  processFastPath(datum, seriesProps, xAxis, yAxis, context) {
+    const x0Acc = seriesProps.x0Accessor;
+    const x1Acc = seriesProps.x1Accessor;
+    const y0Acc = seriesProps.y0Accessor;
+    const seriesIdAccessor = seriesProps.seriesIdAccessor;
+    const d = datum;
+    const x0 = d[x0Acc];
+    const x1 = x1Acc ? d[x1Acc] : void 0;
+    const y0 = d[y0Acc];
+    const seriesId = d[seriesIdAccessor];
+    const isSeriesVisible = context.filteredSeriesIds === void 0 || context.filteredSeriesIds.has(seriesId);
+    const { seriesMap, seriesToMetadata } = context;
+    const dp = { ...datum, x0, x1, y0 };
+    let currentSeries = seriesMap.get(seriesId);
+    if (currentSeries === void 0) {
+      currentSeries = this.createSeries(
+        seriesId,
+        seriesProps,
+        xAxis,
+        yAxis
+      );
+      this.registerSeries(currentSeries, seriesId, context);
+      const metadata = this.createSeriesMetadata(
+        datum,
+        seriesProps,
+        xAxis,
+        yAxis,
+        seriesId,
+        context
+      );
+      seriesToMetadata.set(currentSeries, {
+        ...metadata,
+        isVisible: isSeriesVisible
+      });
+    }
+    if (isSeriesVisible) {
+      const gappedDatapoint = this.gapHelper.handleGapDetection(
+        dp,
+        currentSeries,
+        xAxis,
+        yAxis
+      );
+      if (gappedDatapoint) {
+        this.registerDatapoint(
+          gappedDatapoint,
+          { isGap: true },
+          currentSeries,
+          context
+        );
+      }
+    }
+    this.registerDatapoint(dp, GAP_FALSE_METADATA, currentSeries, context);
+    const centerMs = x1 ? (x0.getTime() + x1.getTime()) / 2 : x0.getTime();
+    const axisIdToScaleDomain = context.axisIdToScaleDomain;
+    const xDom = axisIdToScaleDomain.get(xAxis.id);
+    if (xDom === void 0) {
+      axisIdToScaleDomain.set(xAxis.id, { min: centerMs, max: centerMs });
+    } else if (centerMs < xDom.min) {
+      xDom.min = centerMs;
+    } else if (centerMs > xDom.max) {
+      xDom.max = centerMs;
+    }
+    if (isSeriesVisible) {
+      const yDom = axisIdToScaleDomain.get(yAxis.id);
+      if (yDom === void 0) {
+        axisIdToScaleDomain.set(yAxis.id, { min: y0, max: y0 });
+      } else {
+        if (yDom.min === void 0 || y0 < yDom.min) {
+          yDom.min = y0;
+        }
+        if (yDom.max === void 0 || y0 > yDom.max) {
+          yDom.max = y0;
+        }
+      }
+      context.axisWithSeries.add(xAxis.id);
+      context.axisWithSeries.add(yAxis.id);
+      const currentSeriesMetadata = (0, import_safe_get.safeGet)(seriesToMetadata, currentSeries);
+      this.addValue({
+        series: currentSeries,
+        datapoint: dp,
+        color: currentSeriesMetadata?.color
+      });
+    }
+  }
   getColor(datum, seriesProps, configColorPalette, seriesName, seriesIndex) {
     return (0, import_get_linear_color_palette.getLinearColor)(
       datum,

package/charts/xy-chart/processing-strategies/strategies/rect-series.d.ts

@@ -18,6 +18,7 @@ export declare class RectSeriesStrategy extends SeriesBaseStrategy<XYChartSelect
     };
     protected createSeriesMetadata(_datum: XYChartData, seriesProps: XYChartRectSeriesInternal, xAxis: XYChartAxisInternal, yAxis: XYChartAxisInternal, seriesId: string, context: MutableProcessingContext): {
         name: string;
+        nameSegments: string[] | undefined;
         xAxis: XYChartAxisInternal;
         yAxis: XYChartAxisInternal;
         actions: ((datapoint: import("../../types/xy-chart.js").XYChartRectSeriesActionItem, series?: import("../../types/xy-chart.js").XYChartRectSeries) => import("../../../index.js").SeriesActionsTemplate) | undefined;

package/charts/xy-chart/processing-strategies/strategies/rect-series.js

@@ -22,6 +22,7 @@ __export(rect_series_exports, {
 module.exports = __toCommonJS(rect_series_exports);
 var import_base_series = require("./base-series.js");
 var import_safe_get = require("../../../core/utils/safe-get.js");
+var import_single_line_name = require("../../../core/utils/single-line-name.js");
 var import_defaults = require("../../constants/defaults.js");
 var import_xy_chart_internals = require("../../types/xy-chart-internals.js");
 var import_type_guards = require("../../utils/type-guards.js");
@@ -56,8 +57,10 @@ class RectSeriesStrategy extends import_base_series.SeriesBaseStrategy {
     const color = this.getColor(seriesProps.colorPalette, context.colorPalette);
     const seriesIndex = this.getOrCreateSeriesIndex(seriesId, seriesIndexes);
     const seriesName = this.getSeriesName(intl, seriesIndex, void 0);
+    const name = (0, import_single_line_name.singleLineName)(seriesName);
     return {
-      name: seriesName,
+      name,
+      nameSegments: Array.isArray(seriesName) ? seriesName : void 0,
       xAxis,
       yAxis,
       actions: seriesProps.actions,

package/charts/xy-chart/processing-strategies/utils/series-naming/get-series-name.d.ts

@@ -1,4 +1,4 @@
 import type { IntlShape } from 'react-intl';
 import type { XYAccessorDataTypes, XYChartData } from '../../../types/xy-chart.js';
 export declare function getSeriesNameWithFallback(intl: IntlShape, seriesIndex: number, seriesNameFallback: XYAccessorDataTypes | undefined): string;
-export declare function getSeriesNameWithAccessor(intl: IntlShape, seriesIndex: number, seriesNameFallback: string | undefined, seriesNameAccessor: string | undefined, datum: XYChartData): string;
+export declare function getSeriesNameWithAccessor(intl: IntlShape, seriesIndex: number, seriesNameFallback: string | undefined, seriesNameAccessor: string | undefined, datum: XYChartData): string | string[];

package/charts/xy-chart/processing-strategies/utils/series-naming/get-series-name.js

@@ -29,13 +29,31 @@ function getSeriesNameWithFallback(intl, seriesIndex, seriesNameFallback) {
     index: seriesIndex + 1
   });
 }
+function getNameRawValue(datum, accessor) {
+  if (!accessor) {
+    return void 0;
+  }
+  const value = (0, import_get_datapoints.getDatumValue)(datum, accessor);
+  if (value === void 0 || value === null) {
+    return void 0;
+  }
+  if (Array.isArray(value)) {
+    const strings = value.filter(
+      (v) => v !== void 0 && v !== null && !(typeof v === "number" && Number.isNaN(v))
+    ).map(String);
+    return strings.length > 0 ? strings : void 0;
+  }
+  if (typeof value === "number" && Number.isNaN(value)) {
+    return void 0;
+  }
+  const stringValue = String(value);
+  return stringValue.length > 0 ? stringValue : void 0;
+}
 function getSeriesNameWithAccessor(intl, seriesIndex, seriesNameFallback, seriesNameAccessor, datum) {
-  const seriesNameFromAccessor = (0, import_get_datapoints.getDatumValue)(datum, seriesNameAccessor);
+  const seriesNameFromAccessor = getNameRawValue(datum, seriesNameAccessor);
+  if (Array.isArray(seriesNameFromAccessor)) {
+    return seriesNameFromAccessor;
+  }
   const finalSeriesName = seriesNameFromAccessor ?? seriesNameFallback;
-  const seriesNameValidated = getSeriesNameWithFallback(
-    intl,
-    seriesIndex,
-    finalSeriesName
-  );
-  return seriesNameValidated;
+  return getSeriesNameWithFallback(intl, seriesIndex, finalSeriesName);
 }

package/charts/xy-chart/providers/XYChartAnnotationsShownIndicatorsProvider.js

@@ -29,15 +29,13 @@ const XYChartAnnotationsShownIndicatorsProvider = ({
   children
 }) => {
   const { alwaysVisible, selectable } = (0, import_useXYChartAnnotationsIndicators.useXYChartAnnotationsIndicators)();
-  const { hoveredGroup } = (0, import_selectors.useAnnotationsState)();
+  const { data } = (0, import_selectors.useAnnotationsState)();
   const shownIndicators = (0, import_react.useMemo)(() => {
-    if (hoveredGroup && selectable.has(hoveredGroup)) {
-      const hoveredIndicator = selectable.get(hoveredGroup);
-      if (hoveredIndicator) {
-        return [hoveredIndicator, ...alwaysVisible];
-      }
-    }
-    return alwaysVisible;
-  }, [hoveredGroup, alwaysVisible, selectable]);
+    const hoveredIndicators = data?.flatMap(({ key }) => {
+      const indicator = selectable.get(key);
+      return indicator ? [indicator] : [];
+    }) ?? [];
+    return [...hoveredIndicators, ...alwaysVisible];
+  }, [data, alwaysVisible, selectable]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartAnnotationsShownIndicators_context.XYChartAnnotationsShownIndicatorsContext.Provider, { value: shownIndicators, children });
 };

package/charts/xy-chart/providers/XYChartAxesTicksProvider.js

@@ -33,6 +33,7 @@ var import_useFormatCategory = require("../hooks/useFormatCategory.js");
 var import_useVisibleAxesConfig = require("../hooks/useVisibleAxesConfig.js");
 var import_useVisibleAxesScales = require("../hooks/useVisibleAxesScales.js");
 var import_guards = require("../types/guards.js");
+var import_filter_out_of_range_ticks = require("../utils/filter-out-of-range-ticks.js");
 var import_generate_nice_unit_ticks = require("../utils/generate-nice-unit-ticks.js");
 var import_get_ticks_formatted_by_config = require("../utils/get-ticks-formatted-by-config.js");
 function getFormatter(numTicks, axisIdToFormatter, config, scale, formatCategory) {
@@ -84,13 +85,17 @@ function XYChartAxesTicksProvider({
     topScale,
     formatCategory
   ) : void 0;
-  const topTicks = getTicksForAxis(
-    topConfig,
-    horizontalNumTicks,
+  const topTicks = (0, import_filter_out_of_range_ticks.filterOutOfRangeTicks)(
+    getTicksForAxis(
+      topConfig,
+      horizontalNumTicks,
+      topScale,
+      topFormatter,
+      width,
+      "horizontal"
+    ),
     topScale,
-    topFormatter,
-    width,
-    "horizontal"
+    width
   );
   const bottomScale = scales.bottom;
   const bottomConfig = config.bottom;
@@ -101,13 +106,17 @@ function XYChartAxesTicksProvider({
     bottomScale,
     formatCategory
   ) : void 0;
-  const bottomTicks = getTicksForAxis(
-    bottomConfig,
-    horizontalNumTicks,
+  const bottomTicks = (0, import_filter_out_of_range_ticks.filterOutOfRangeTicks)(
+    getTicksForAxis(
+      bottomConfig,
+      horizontalNumTicks,
+      bottomScale,
+      bottomFormatter,
+      width,
+      "horizontal"
+    ),
     bottomScale,
-    bottomFormatter,
-    width,
-    "horizontal"
+    width
   );
   const leftScale = scales.left;
   const leftConfig = config.left;
@@ -118,13 +127,17 @@ function XYChartAxesTicksProvider({
     leftScale,
     formatCategory
   ) : void 0;
-  const leftTicks = getTicksForAxis(
-    leftConfig,
-    verticalNumTicks,
+  const leftTicks = (0, import_filter_out_of_range_ticks.filterOutOfRangeTicks)(
+    getTicksForAxis(
+      leftConfig,
+      verticalNumTicks,
+      leftScale,
+      leftFormatter,
+      height,
+      "vertical"
+    ),
     leftScale,
-    leftFormatter,
-    height,
-    "vertical"
+    height
   );
   const rightScale = scales.right;
   const rightConfig = config.right;
@@ -135,13 +148,17 @@ function XYChartAxesTicksProvider({
     rightScale,
     formatCategory
   ) : void 0;
-  const rightTicks = getTicksForAxis(
-    rightConfig,
-    verticalNumTicks,
+  const rightTicks = (0, import_filter_out_of_range_ticks.filterOutOfRangeTicks)(
+    getTicksForAxis(
+      rightConfig,
+      verticalNumTicks,
+      rightScale,
+      rightFormatter,
+      height,
+      "vertical"
+    ),
     rightScale,
-    rightFormatter,
-    height,
-    "vertical"
+    height
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_XYChartAxesTicks_context.XYChartAxesTicksContext.Provider,

package/charts/xy-chart/providers/XYChartOverlayPerformanceProvider.js

@@ -23,17 +23,14 @@ module.exports = __toCommonJS(XYChartOverlayPerformanceProvider_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_XYChartOverlayPerformance_context = require("../context/XYChartOverlayPerformance.context.js");
-var import_useAreaData = require("../hooks/useAreaData.js");
-var import_useBarData = require("../hooks/useBarData.js");
-var import_useBuildStrategy = require("../hooks/useBuildStrategy.js");
-var import_useDotData = require("../hooks/useDotData.js");
-var import_useLineData = require("../hooks/useLineData.js");
+var import_useBuildHoverGrid = require("../hooks/useBuildHoverGrid.js");
+var import_useBuildOverlayStrategy = require("../hooks/useBuildOverlayStrategy.js");
 var import_useXYChartData = require("../hooks/useXYChartData.js");
 var import_useXYChartScales = require("../hooks/useXYChartScales.js");
 var import_useXYChartTooltip = require("../hooks/useXYChartTooltip.js");
-var import_build_sorted_entries = require("../utils/build-sorted-entries.js");
 var import_query_closest_quadtree = require("../utils/query-closest-quadtree.js");
 var import_query_get_closest_point = require("../utils/query-get-closest-point.js");
+var import_query_hovered_grid = require("../utils/query-hovered-grid.js");
 var import_query_hovered = require("../utils/query-hovered.js");
 var import_query_shared = require("../utils/query-shared.js");
 var import_query_single = require("../utils/query-single.js");
@@ -44,55 +41,13 @@ const XYChartOverlayPerformanceProvider = ({
   const { datapointMetadataMap, axisIdToScaleDomain, seriesToMetadata } = (0, import_useXYChartData.useXYChartData)();
   const { variant } = (0, import_useXYChartTooltip.useXYChartTooltip)();
   const isSharedVariant = variant === "shared";
-  const { filteredSeriesWithDatapoints: barSeriesData } = (0, import_useBarData.useBarData)();
-  const { filteredSeriesWithDatapoints: dotSeriesData } = (0, import_useDotData.useDotData)();
-  const { filteredSeriesWithDatapoints: lineSeriesData } = (0, import_useLineData.useLineData)();
-  const { filteredSeriesWithDatapoints: areaSeriesData } = (0, import_useAreaData.useAreaData)();
-  const getBarPixelCenter = (0, import_react.useMemo)(
-    () => (0, import_build_sorted_entries.buildGetBarPixelCenter)(
-      axisIdToScales,
-      seriesToMetadata,
-      axisIdToScaleDomain,
-      datapointMetadataMap
-    ),
-    [
-      axisIdToScales,
-      seriesToMetadata,
-      axisIdToScaleDomain,
-      datapointMetadataMap
-    ]
-  );
-  const build = (0, import_react.useCallback)(
-    () => isSharedVariant ? (0, import_build_sorted_entries.buildSortedEntries)(
-      barSeriesData,
-      datapointMetadataMap,
-      getBarPixelCenter
-    ) : (0, import_query_closest_quadtree.buildQuadtrees)(
-      [...dotSeriesData, ...lineSeriesData, ...areaSeriesData],
-      axisIdToScales,
-      datapointMetadataMap,
-      seriesToMetadata,
-      axisIdToScaleDomain
-    ),
-    [
-      isSharedVariant,
-      barSeriesData,
-      datapointMetadataMap,
-      getBarPixelCenter,
-      dotSeriesData,
-      lineSeriesData,
-      areaSeriesData,
-      axisIdToScales,
-      seriesToMetadata,
-      axisIdToScaleDomain
-    ]
-  );
-  const buildResult = (0, import_useBuildStrategy.useBuildStrategy)(build);
+  const { buildResult, getBarPixelCenter, getLinearSeriesPixelCenter } = (0, import_useBuildOverlayStrategy.useBuildOverlayStrategy)();
+  const seriesIdToHoverGrid = (0, import_useBuildHoverGrid.useBuildHoverGrid)();
   const sortedEntries = isSharedVariant ? buildResult : void 0;
   const seriesIdToTree = isSharedVariant ? void 0 : buildResult;
   const context = (0, import_react.useMemo)(() => {
     if (isSharedVariant) {
-      const queryAllHovered = (0, import_query_hovered.buildQueryAllHovered)(
+      const queryAllHovered = seriesIdToHoverGrid ? (0, import_query_hovered_grid.buildQueryAllHoveredFromGrid)(seriesIdToHoverGrid) : (0, import_query_hovered.buildQueryAllHovered)(
         axisIdToScales,
         datapointMetadataMap,
         seriesToMetadata,
@@ -103,11 +58,12 @@ const XYChartOverlayPerformanceProvider = ({
           sortedEntries,
           queryAllHovered,
           getBarPixelCenter,
+          getLinearSeriesPixelCenter,
           datapointMetadataMap
         )
       };
     }
-    const queryHovered = (0, import_query_hovered.buildQueryHovered)(
+    const queryHovered = seriesIdToHoverGrid ? (0, import_query_hovered_grid.buildQueryHoveredFromGrid)(seriesIdToHoverGrid) : (0, import_query_hovered.buildQueryHovered)(
       axisIdToScales,
       datapointMetadataMap,
       seriesToMetadata,
@@ -125,7 +81,9 @@ const XYChartOverlayPerformanceProvider = ({
       datapointMetadataMap,
       axisIdToScaleDomain
     );
-    return { query: (0, import_query_single.buildQuerySingle)(queryClosest, queryHovered) };
+    return {
+      query: (0, import_query_single.buildQuerySingle)(queryClosest, queryHovered, datapointMetadataMap)
+    };
   }, [
     axisIdToScales,
     datapointMetadataMap,
@@ -134,7 +92,9 @@ const XYChartOverlayPerformanceProvider = ({
     isSharedVariant,
     sortedEntries,
     getBarPixelCenter,
-    seriesIdToTree
+    getLinearSeriesPixelCenter,
+    seriesIdToTree,
+    seriesIdToHoverGrid
   ]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartOverlayPerformance_context.XYChartOverlayPerformanceContext.Provider, { value: context, children });
 };

package/charts/xy-chart/providers/XYChartScalesProvider.js

@@ -25,6 +25,7 @@ var import_useGridPlotSize = require("../../core/components/chart-grid/hooks/use
 var import_XYChartScales_context = require("../context/XYChartScales.context.js");
 var import_useXYChartData = require("../hooks/useXYChartData.js");
 var import_selectors = require("../store/selectors.js");
+var import_build_axis_id_to_min_bar_size = require("../utils/build-axis-id-to-min-bar-size.js");
 var import_generate_scales_by_axis_id = require("../utils/generate-scales-by-axis-id.js");
 const XYChartScalesProvider = ({ children }) => {
   const { width, height } = (0, import_useGridPlotSize.useGridPlotSize)();
@@ -32,15 +33,21 @@ const XYChartScalesProvider = ({ children }) => {
   const {
     axisIdToScaleDomain: initialDomainScaleMap,
     axes,
-    axisIdToDimension
+    axisIdToDimension,
+    seriesWithDatapoints
   } = (0, import_useXYChartData.useXYChartData)();
+  const axisIdToMinBarSize = (0, import_build_axis_id_to_min_bar_size.buildAxisIdToMinBarSize)(
+    seriesWithDatapoints,
+    axes
+  );
   const axisIdToScales = (0, import_generate_scales_by_axis_id.generateScalesByAxisId)(
     axes,
     initialDomainScaleMap,
     zoomedDomainScaleMap,
     axisIdToDimension,
     width,
-    height
+    height,
+    axisIdToMinBarSize
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_XYChartScales_context.XYChartScalesContext.Provider, { value: axisIdToScales, children });
 };

package/charts/xy-chart/slots/Annotations/Marker.d.ts

@@ -17,6 +17,8 @@ export interface XYChartAnnotationsMarkerProps {
      *  @defaultValue Colors.Charts.Categorical.Color01.Default
      */
     colorAccessor?: string;
+    /** Indicates what data field from the data object should be used as the symbol color of each marker */
+    symbolColorAccessor?: string;
     /** Indicates what data field from the data object should be used as the title of each marker */
     titleAccessor?: string;
     /** letter/emoji/icon/glyph or Unicode character */

package/charts/xy-chart/types/xy-chart-internals.d.ts

@@ -304,6 +304,7 @@ export interface AreaSeriesWithDatapoints {
 export type AnyDatapoint = RectDatapointInternal | DotDatapoint | LineDatapoint | BarDatapoint | AreaDatapoint;
 export type BaseMetadata = {
     name: string;
+    nameSegments?: string[];
     xAxis: XYChartAxisInternal;
     yAxis: XYChartAxisInternal;
     colorPalette: XYChartColorPalette;

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

@@ -20,7 +20,7 @@ import type { ValueRepresentation } from '../../core/types/scales.js';
 import type { SeriesActionsTemplate } from '../../core/types/series-actions-template.js';
 import { BaseThresholdConfig } from '../../core/types/thresholds.js';
 import type { ChartToolbarConfig } from '../../core/types/toolbar.js';
-import type { ChartTooltipConfigProps } from '../../core/types/tooltip.js';
+import type { ChartTooltipConfigProps, SeriesDisplayMode } from '../../core/types/tooltip.js';
 import { XYChartAnnotationsConfigProps } from '../context/XYChartAnnotationsConfig.context.js';
 import type { XYChartSelectProps } from '../slots/Select.js';
 /**
@@ -494,6 +494,12 @@ export interface XYChartNumericalAxisProps extends XYChartAxisBaseProps {
      * @defaultValue 'absolute'
      */
     valueRepresentation?: ValueRepresentation;
+    /**
+     * Whether to allow decimal values on the axis ticks. When `false`, only whole-integer ticks
+     * are shown. If filtering leaves fewer than 2 ticks, the axis falls back to decimal ticks.
+     * @defaultValue true
+     */
+    allowDecimals?: boolean;
 }
 /**
  * Props for the categorical axis
@@ -622,6 +628,14 @@ export type XYChartTooltipProps = {
      * @internal
      */
     _variant?: _XYChartTooltipVariant;
+    /**
+     * The tooltip items display mode.
+     *
+     * If this prop is `undefined`, XYChart renders series names in single-line mode by default.
+     * Set this prop to `'multi-line'` to render array-based series names on separate lines.
+     * @defaultValue 'single-line'
+     */
+    _seriesDisplayMode?: SeriesDisplayMode;
 };
 /**
  * Props for the XYChart.Legend slot component

package/charts/xy-chart/utils/build-and-download-csv.js

@@ -27,7 +27,8 @@ var import_download = require("../../../core/utils/download.js");
 var import_constants = require("../../core/constants.js");
 const getSeriesName = (metadata) => {
   return (series) => {
-    return metadata.get(series)?.name;
+    const name = metadata.get(series)?.name;
+    return name !== void 0 ? name : "";
   };
 };
 const buildAndDownloadCsv = (data, seriesMetadata, datapointMetadata, downloadDataCallback) => {

package/charts/xy-chart/utils/build-axis-id-to-min-bar-size.d.ts

@@ -0,0 +1,2 @@
+import { useXYChartData } from '../hooks/useXYChartData.js';
+export declare function buildAxisIdToMinBarSize(seriesWithDatapoints: ReturnType<typeof useXYChartData>['seriesWithDatapoints'], axes: ReturnType<typeof useXYChartData>['axes']): Map<string, number>;

package/charts/xy-chart/utils/build-axis-id-to-min-bar-size.js

@@ -0,0 +1,46 @@
+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 build_axis_id_to_min_bar_size_exports = {};
+__export(build_axis_id_to_min_bar_size_exports, {
+  buildAxisIdToMinBarSize: () => buildAxisIdToMinBarSize
+});
+module.exports = __toCommonJS(build_axis_id_to_min_bar_size_exports);
+var import_type_guards = require("./type-guards.js");
+var import_defaults = require("../constants/defaults.js");
+var import_guards = require("../types/guards.js");
+function buildAxisIdToMinBarSize(seriesWithDatapoints, axes) {
+  const result = /* @__PURE__ */ new Map();
+  for (const series of seriesWithDatapoints) {
+    if (!(0, import_type_guards.isBarSeries)(series) || !series.hasLabels) {
+      continue;
+    }
+    const yAxis = axes.find((a) => a.id === series.yAxisId);
+    const xAxis = axes.find((a) => a.id === series.xAxisId);
+    let categoricalAxisId;
+    if (yAxis && (0, import_guards.isCategorical)(yAxis.type)) {
+      categoricalAxisId = series.yAxisId;
+    } else if (xAxis && (0, import_guards.isCategorical)(xAxis.type)) {
+      categoricalAxisId = series.xAxisId;
+    }
+    if (!categoricalAxisId) {
+      continue;
+    }
+    result.set(categoricalAxisId, import_defaults.MIN_LABELED_BAR_SIZE);
+  }
+  return result;
+}