Merge branch 'main' into fix-core-documenter-snapshot

Author: jperals

pages/03-core/core-line-chart.page.tsx

@@ -60,17 +60,17 @@ const dataC = baseline.map(({ x, y }) => ({ x, y: y === null ? null : y + random
 
 const series: Highcharts.SeriesOptionsType[] = [
   {
-    name: "A",
+    name: "Very Long Series Name for Network Traffic Analysis Data Points",
     type: "line",
     data: dataA,
   },
   {
-    name: "B",
+    name: "Extremely Detailed Performance Metrics for Cloud Infrastructure",
     type: "line",
     data: dataB,
   },
   {
-    name: "C",
+    name: "Comprehensive System Resource Utilization Measurements Over Time",
     type: "line",
     data: dataC,
   },

src/core/chart-api/chart-extra-context.tsx

@@ -5,6 +5,7 @@ import type Highcharts from "highcharts";
 
 import { NonCancelableEventHandler } from "../../internal/events";
 import { getChartSeries } from "../../internal/utils/chart-series";
+import { getSeriesData } from "../../internal/utils/series-data";
 import { ChartLabels } from "../i18n-utils";
 import { CoreChartProps, Rect } from "../interfaces";
 import { getGroupRect, isSeriesStacked } from "../utils";
@@ -99,13 +100,13 @@ function computeDerivedState(chart: Highcharts.Chart): ChartExtraContext.Derived
   for (const s of getChartSeries(chart.series)) {
     const seriesX = new Set<number>();
     if (s.visible) {
-      for (const d of s.data) {
+      for (const d of getSeriesData(s.data)) {
         // Points with y=null represent the absence of value, there is no need to include them and those
         // should have no impact on computed rects or navigation.
 
         // Although "d" can't be undefined according to Highcharts API, it does become undefined for chart containing more datapoints
         // than the cropThreshold for that series (specific cases of re-rendering the chart with updated options listening to setExteme updates)
-        if (d && d.visible && d.y !== null) {
+        if (d.visible && d.y !== null) {
           seriesX.add(d.x);
           allXSet.add(d.x);
           addPoint(d);

src/core/chart-api/chart-extra-highlight.ts

@@ -4,6 +4,7 @@
 import type Highcharts from "highcharts";
 
 import * as Styles from "../../internal/chart-styles";
+import { getSeriesData } from "../../internal/utils/series-data";
 import { getPointId, getSeriesId } from "../utils";
 import { ChartExtraContext } from "./chart-extra-context";
 
@@ -140,7 +141,7 @@ export class ChartExtraHighlight {
       if (prevState === "inactive") {
         inactiveSeriesIds.add(getSeriesId(s));
       }
-      for (const p of s.data) {
+      for (const p of getSeriesData(s.data)) {
         const prevState = this.pointState.get(getSeriesId(s))?.get(this.getPointKey(p));
         if (prevState) {
           this.setPointState(p, prevState);
@@ -183,7 +184,7 @@ export class ChartExtraHighlight {
         (overridden as SeriesSetStateWithLock)[SET_STATE_LOCK] = true;
         s.setState = overridden;
       }
-      for (const d of s.data) {
+      for (const d of getSeriesData(s.data)) {
         if ((d.setState as PointSetStateWithLock)[SET_STATE_LOCK] === undefined) {
           const original = d.setState;
           // The overridden setState method does nothing unless setState[SET_STATE_LOCK] === false.

src/core/chart-api/index.tsx

@@ -7,6 +7,7 @@ import type Highcharts from "highcharts";
 import { fireNonCancelableEvent } from "../../internal/events";
 import { ReadonlyAsyncStore } from "../../internal/utils/async-store";
 import { getChartSeries } from "../../internal/utils/chart-series";
+import { getSeriesData } from "../../internal/utils/series-data";
 import { Writeable } from "../../internal/utils/utils";
 import {
   getChartAccessibleDescription,
@@ -307,14 +308,15 @@ export class ChartAPI {
   private showMarkersForIsolatedPoints() {
     let shouldRedraw = false;
     for (const s of this.context.chart().series) {
-      for (let i = 0; i < s.data.length; i++) {
-        const isEligibleSeries = !isXThreshold(s) && s.type !== "scatter" && !s.data[i].options.marker?.enabled;
+      const seriesData = getSeriesData(s.data);
+      for (let i = 0; i < seriesData.length; i++) {
+        const isEligibleSeries = !isXThreshold(s) && s.type !== "scatter" && !seriesData[i].options.marker?.enabled;
         if (
           isEligibleSeries &&
-          (s.data[i - 1]?.y === undefined || s.data[i - 1]?.y === null) &&
-          (s.data[i + 1]?.y === undefined || s.data[i + 1]?.y === null)
+          (seriesData[i - 1]?.y === undefined || seriesData[i - 1]?.y === null) &&
+          (seriesData[i + 1]?.y === undefined || seriesData[i + 1]?.y === null)
         ) {
-          s.data[i].update({ marker: { enabled: true } }, false);
+          seriesData[i].update({ marker: { enabled: true } }, false);
           shouldRedraw = true;
         }
       }

src/internal/components/chart-legend/index.tsx

@@ -421,7 +421,7 @@ const LegendItemTrigger = forwardRef(
         onKeyDown={onKeyDown}
       >
         {marker}
-        <span>{label}</span>
+        <span className={styles["item-label"]}>{label}</span>
       </button>
     );
   },

src/internal/components/chart-legend/styles.scss

@@ -73,6 +73,7 @@
   background-color: transparent;
   cursor: pointer;
   opacity: 1;
+  max-inline-size: 100%;
 
   &:focus {
     outline: none;
@@ -94,6 +95,14 @@
   }
 }
 
+.item-label {
+  overflow: hidden;
+  display: -webkit-box;
+  line-clamp: 1;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+
 .actions {
   display: flex;
   align-items: center;

src/internal/utils/series-data.ts

@@ -0,0 +1,10 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Point } from "highcharts";
+
+// Although series data can't be undefined according to Highcharts API, it does become undefined for chart containing more datapoints
+// than the cropThreshold for that series (specific cases of re-rendering the chart with updated options listening to setExteme updates)
+export const getSeriesData = (data: Array<Point>): Array<Point> => {
+  return data.filter((d) => !!d);
+};