Fix percentile index for line chart relational

Shopify · Jan 16, 2025 · f5d61c1 · f5d61c1
1 parent 1f18106
commit f5d61c1
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/...s/polaris-viz/src/components/LineChartRelational/components/RelatedAreas/RelatedAreas.tsx b/...s/polaris-viz/src/components/LineChartRelational/components/RelatedAreas/RelatedAreas.tsx
@@ -15,12 +15,10 @@ export interface RelatedAreaProps extends LineChartSlotProps {
 export function RelatedAreas({yScale, xScale, data}: RelatedAreaProps) {
   const [activeIndex, setActiveIndex] = useState(-1);
 
-  const lineSeries = data.filter(
-    (series) => series?.metadata?.relatedIndex == null,
+  const percentileIndex = data.findIndex(
+    (series) => series.metadata?.relatedIndex != null,
   );
 
-  const percentileIndex = lineSeries.length + 1;
-
   const {hiddenIndexes} = useExternalHideEvents();
   const {id} = useChartContext();
 

diff --git a/...iz/src/components/LineChartRelational/components/RelatedAreas/tests/RelatedAreas.test.tsx b/...iz/src/components/LineChartRelational/components/RelatedAreas/tests/RelatedAreas.test.tsx
@@ -60,4 +60,16 @@ describe('<RelatedAreas />', () => {
 
     expect(chart).toContainReactComponentTimes(Area, 2);
   });
+
+  it('sets the Area index to the index of the first related percentile series', () => {
+    const chart = mount(
+      <svg>
+        <RelatedAreas {...MOCK_PROPS} />
+      </svg>,
+    );
+
+    expect(chart).toContainReactComponent(Area, {
+      index: 1,
+    });
+  });
 });