Merge pull request #1792 from Shopify/jorge/fix-precentile-active-lin…

…e-index Fix percentile index for line chart relational
Shopify · Jan 16, 2025 · c6a6e0e · c6a6e0e
2 parents a53dd3f + 0248560
commit c6a6e0e
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md
@@ -7,6 +7,10 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## Unreleased
 
+### Fixed
+
+- Fixed issue in `<LineChartRelational />` where the `percentileIndex` was not being set correctly.
+
 ### Added
 
 - Added Tooltips to `<FunnelChartNext />`

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,
+    });
+  });
 });