Use masks for areas with data instead of finding missing data

Shopify · May 27, 2024 · 738adfe · 738adfe
1 parent dbae7a0
commit 738adfe
Show file tree

Hide file tree

Showing 5 changed files with 718 additions and 40 deletions.
diff --git a/...ris-viz/src/components/LineChartRelational/components/MissingDataArea/MissingDataArea.tsx b/...ris-viz/src/components/LineChartRelational/components/MissingDataArea/MissingDataArea.tsx
@@ -14,36 +14,28 @@ function MissingDataAreaRaw({data, drawableHeight, xScale}: Props) {
   const selectedTheme = useTheme();
   const patternID = useRef(uniqueId('missingDataPattern'));
 
-  const nullIndexes: Set<number> = new Set([]);
-
-  data.forEach((series) => {
-    series.data.forEach(({value}, index) => {
-      if (value == null) {
-        nullIndexes.add(index);
-      }
-
-      const nextSeries = series.data[index + 1];
-      const previousSeries = series.data[index - 1];
+  const firstRelatedDataSeries = data.find(
+    ({metadata}) => metadata?.relatedIndex != null,
+  );
 
-      if (value == null && nextSeries && nextSeries.value != null) {
-        nullIndexes.add(index + 1);
-      }
+  if (firstRelatedDataSeries == null) {
+    return null;
+  }
 
-      if (value == null && previousSeries && previousSeries.value != null) {
-        nullIndexes.add(index - 1);
+  const indexesWithData = firstRelatedDataSeries.data
+    .map(({value}, index) => {
+      if (value != null) {
+        return index;
       }
-    });
-  });
+    })
+    .filter((item) => item != null);
 
-  if (nullIndexes.size === 0) {
+  if (indexesWithData.length === 0) {
     return null;
   }
 
-  const sortedIndexes = [...nullIndexes].sort(
-    (current, next) => current - next,
-  );
-
-  const groups = groupNumbersIntoRuns(sortedIndexes);
+  const groups = groupNumbersIntoRuns(indexesWithData);
+  const dataLength = firstRelatedDataSeries.data.length - 1;
 
   return (
     <Fragment>
@@ -65,23 +57,40 @@ function MissingDataAreaRaw({data, drawableHeight, xScale}: Props) {
             opacity="0.2"
           />
         </pattern>
-      </defs>
-      {groups.map((indexes, index) => {
-        const startIndex = Math.min(...indexes);
-        const endIndex = Math.max(...indexes);
-        const width = xScale(endIndex - startIndex);
-
-        return (
+        <mask id={`${patternID.current}-clip`}>
           <rect
-            key={index}
-            x={xScale(startIndex)}
+            x={xScale(0)}
             y={0}
             height={drawableHeight}
-            width={width}
-            fill={`url(#${patternID.current})`}
+            width={xScale(dataLength)}
+            fill="white"
           />
-        );
-      })}
+          {groups.map((indexes, index) => {
+            const startIndex = Math.min(...indexes);
+            const endIndex = Math.max(...indexes);
+            const width = xScale(endIndex - startIndex);
+
+            return (
+              <rect
+                key={index}
+                x={xScale(startIndex)}
+                y={0}
+                height={drawableHeight}
+                width={width}
+                fill="black"
+              />
+            );
+          })}
+        </mask>
+      </defs>
+      <rect
+        x={xScale(0)}
+        y={0}
+        height={drawableHeight}
+        width={xScale(dataLength)}
+        fill={`url(#${patternID.current})`}
+        mask={`url(#${patternID.current}-clip)`}
+      />
     </Fragment>
   );
 }

diff --git a/...iz/src/components/LineChartRelational/stories/chromatic/MissingData.chromatic.stories.tsx b/...iz/src/components/LineChartRelational/stories/chromatic/MissingData.chromatic.stories.tsx
@@ -17,6 +17,7 @@ import {MISSING_END_DATA} from './data/missing-end-data';
 import {MISSING_START_DATA} from './data/missing-start-data';
 import {MISSING_MIDDLE_DATA} from './data/missing-middle-data';
 import {MISSING_RANDOM_DATA} from './data/missing-random-data';
+import {MISSING_RANDOM_SINGLE_DATA} from './data/missing-random-single-data';
 
 const PROPS = {
   ...DEFAULT_PROPS,
@@ -50,3 +51,10 @@ MissingRandomData.args = {
   ...PROPS,
   data: MISSING_RANDOM_DATA,
 };
+
+export const MissingRandomSingleData: Story<LineChartProps> = Template.bind({});
+
+MissingRandomSingleData.args = {
+  ...PROPS,
+  data: MISSING_RANDOM_SINGLE_DATA,
+};