[carbon-graphs] Add multiple value region support for line graphs (#359)

Author: sycombs

package-lock.json

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added support for multiple value regions for line graph.
+
 ## 2.25.0 - (April 5, 2024)
 
 * Added

packages/carbon-graphs/CHANGELOG.md

@@ -391,37 +391,54 @@ const getValueRegionSubset = (dataTarget, getXDataValues) => {
     color: undefined,
     values: [],
   };
-  let previousColor;
-  dataTarget.values.forEach((value) => {
-    if (
-      !utils.isEmpty(value.region)
-            && !utils.isEmpty(value.region.start)
-            && !utils.isEmpty(value.region.end)
-    ) {
-      // If the color is different, then move it to new region set
-      if (previousColor !== value.region.color) {
-        if (valueRegion.values.length > 0) {
+  let continuousRegions = [];
+
+  const isValidValueRegion = (region) => (!utils.isEmpty(region) && !utils.isEmpty(region.start) && !utils.isEmpty(region.end));
+
+  dataTarget.values.forEach((value, index) => {
+    if (!utils.isEmpty(value.regions)) {
+      const previousValueRegions = index > 0 ? dataTarget.values[index - 1].regions : null;
+      const previousColors = previousValueRegions ? previousValueRegions.map(r => isValidValueRegion(r) && r.color) : [];
+
+      value.regions.forEach((region) => {
+        if (isValidValueRegion(region)) {
+          // If the color is not present in the previous value regions, then move it to new region set
+          if (!previousColors.includes(region.color)) {
+            if (valueRegion.values.length > 0) {
+              valueRegionSubset.push(valueRegion);
+            }
+
+            valueRegion = {
+              color: region.color,
+              values: [],
+            };
+
+            // Remove colors that are no longer being used
+            continuousRegions = continuousRegions.filter((r) => r.color !== region.color);
+            continuousRegions.push(valueRegion);
+          }
+
+          const adjacentValueRegions = continuousRegions.find(r => r.color === region.color);
+          adjacentValueRegions.values.push({
+            x: getXDataValues(value.x),
+            start: region.start,
+            end: region.end,
+          });
+        } else {
           valueRegionSubset.push(valueRegion);
+          valueRegion = {
+            color: undefined,
+            values: [],
+          };
         }
-        valueRegion = {
-          color: value.region.color,
-          values: [],
-        };
-      }
-      previousColor = value.region.color;
-      valueRegion.color = value.region.color;
-      valueRegion.values.push({
-        x: getXDataValues(value.x),
-        start: value.region.start,
-        end: value.region.end,
       });
     } else {
       valueRegionSubset.push(valueRegion);
-      previousColor = undefined;
       valueRegion = {
         color: undefined,
         values: [],
       };
+      continuousRegions = [];
     }
   });
   valueRegionSubset.push(valueRegion);

packages/carbon-graphs/src/js/controls/Line/helpers/helpers.js

@@ -104,6 +104,22 @@ Terra.describeViewports('LineGraph ', ['tiny', 'medium', 'large'], () => {
         browser.url('/raw/tests/cerner-terra-graphs-docs/graphs/line-graph/regions/line/value-region');
         Terra.validates.screenshot('value_region', { selector: '.carbon-graph-container' });
       });
+
+      it('validates multiple value regions graph container', () => {
+        browser.url('/raw/tests/cerner-terra-graphs-docs/graphs/line-graph/regions/line/multiple-value-regions');
+        Terra.validates.screenshot('multiple_value_regions', { selector: '.carbon-graph-container' });
+      });
+
+      it('validates multiple value regions with spanning region graph container', () => {
+        browser.url('/raw/tests/cerner-terra-graphs-docs/graphs/line-graph/regions/line/multiple-value-regions-spanning');
+        Terra.validates.screenshot('multiple_value_regions_spanning', { selector: '.carbon-graph-container' });
+      });
+
+      it('validates multiple value regions with overlapping region graph container', () => {
+        browser.url('/raw/tests/cerner-terra-graphs-docs/graphs/line-graph/regions/line/multiple-value-regions-overlapping');
+        Terra.validates.screenshot('multiple_value_regions_overlapping', { selector: '.carbon-graph-container' });
+      });
+
       describe('Y2-Axis', () => {
         beforeEach(() => browser.url('/raw/tests/cerner-terra-graphs-docs/graphs/line-graph/regions/line/y-2-axis'));
 
@@ -130,6 +146,14 @@ Terra.describeViewports('LineGraph ', ['tiny', 'medium', 'large'], () => {
         Terra.validates.screenshot('multiple_line_region', { selector: '.carbon-graph-container' });
       });
 
+      it('validates multiple value regions graph container', () => {
+        browser.url('/raw/tests/cerner-terra-graphs-docs/graphs/line-graph/regions/multi-line/multiple-value-regions');
+
+        const element = $('.carbon-legend').$$('li');
+        element[3].moveTo();
+        Terra.validates.screenshot('multiline_multiple_value_regions', { selector: '.carbon-graph-container' });
+      });
+
       describe('when hovered on multiple line region legends', () => {
         let element = null;
         beforeEach(() => {

packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_large/line-graph-spec/multiline_multiple_value_regions.png

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added tests for multiple value regions.
+
 ## 1.10.0 - (April 19, 2024)
 
 * Added

packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_large/line-graph-spec/multiple_value_regions.png

@@ -0,0 +1,104 @@
+import Carbon from '@cerner/carbon-graphs';
+import { loadPopup } from '@cerner/terra-graphs-docs/lib/example-datasets/popup';
+
+// Dataset to be used in a multiline graph with value regions
+const data = {
+  key: 'uid_4',
+  label: {
+    display: 'Data Label 4',
+  },
+  color: Carbon.helpers.COLORS.PURPLE,
+  shape: Carbon.helpers.SHAPES.DARK.SQUARE,
+  onClick: loadPopup,
+  legendOptions: {
+    showLine: true,
+    showShape: true,
+  },
+  values: [{
+    x: 85,
+    y: -5,
+    regions: [{
+      start: -10,
+      end: 0,
+      color: Carbon.helpers.COLORS.LAVENDER,
+    }, {
+      start: 0,
+      end: 10,
+      color: Carbon.helpers.COLORS.GREY,
+    }],
+  }, {
+    x: 115,
+    y: -10,
+    regions: [{
+      start: -15,
+      end: -5,
+      color: Carbon.helpers.COLORS.LAVENDER,
+    }, {
+      start: 5,
+      end: 15,
+      color: Carbon.helpers.COLORS.GREY,
+    }],
+  }, {
+    x: 155,
+    y: -15,
+    regions: [{
+      start: -20,
+      end: -10,
+      color: Carbon.helpers.COLORS.LAVENDER,
+    }, {
+      start: 10,
+      end: 20,
+      color: Carbon.helpers.COLORS.GREY,
+    }],
+  }, {
+    x: 175,
+    y: -20,
+    regions: [{
+      start: -25,
+      end: -15,
+      color: Carbon.helpers.COLORS.LAVENDER,
+    }, {
+      start: 15,
+      end: 25,
+      color: Carbon.helpers.COLORS.GREY,
+    }],
+  }, {
+    x: 225,
+    y: -15,
+    regions: [{
+      start: -20,
+      end: -10,
+      color: Carbon.helpers.COLORS.LAVENDER,
+    }, {
+      start: 10,
+      end: 20,
+      color: Carbon.helpers.COLORS.GREY,
+    }],
+  }, {
+    x: 255,
+    y: -10,
+    regions: [{
+      start: -15,
+      end: -5,
+      color: Carbon.helpers.COLORS.LAVENDER,
+    }, {
+      start: 5,
+      end: 15,
+      color: Carbon.helpers.COLORS.GREY,
+    }],
+  }, {
+    x: 275,
+    y: -5,
+    regions: [{
+      start: -10,
+      end: -0,
+      color: Carbon.helpers.COLORS.LAVENDER,
+    }, {
+      start: 0,
+      end: 10,
+      color: Carbon.helpers.COLORS.GREY,
+    }],
+  }],
+};
+
+export default data;

packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_large/line-graph-spec/multiple_value_regions_overlapping.png

@@ -14,47 +14,47 @@ const data = {
       x: new Date(2016, 0, 1, 1, 5).toISOString(),
       y: 5,
       isCritical: false,
-      region: {
+      regions: [{
         start: 3,
         end: 8,
         color: Carbon.helpers.COLORS.GREY,
-      },
+      }],
     },
     {
       x: new Date(2016, 0, 1, 2, 15).toISOString(),
       y: 11,
-      region: {
+      regions: [{
         start: 4,
         end: 14,
         color: Carbon.helpers.COLORS.GREY,
-      },
+      }],
     },
     {
       x: new Date(2016, 0, 1, 3, 15).toISOString(),
       y: 12,
-      region: {
+      regions: [{
         start: 5,
         end: 15,
         color: Carbon.helpers.COLORS.GREY,
-      },
+      }],
     },
     {
       x: new Date(2016, 0, 1, 4, 15).toISOString(),
       y: 16,
-      region: {
+      regions: [{
         start: 10,
         end: 20,
         color: Carbon.helpers.COLORS.GREY,
-      },
+      }],
     },
     {
       x: new Date(2016, 0, 1, 5, 15).toISOString(),
       y: 17,
-      region: {
+      regions: [{
         start: 10,
         end: 20,
         color: Carbon.helpers.COLORS.GREY,
-      },
+      }],
     },
     {
       x: new Date(2016, 0, 1, 6, 15).toISOString(),
@@ -63,68 +63,68 @@ const data = {
     {
       x: new Date(2016, 0, 1, 7, 0).toISOString(),
       y: 11,
-      region: {
+      regions: [{
         start: 8,
         end: 15,
-      },
+      }],
     },
     {
       x: new Date(2016, 0, 1, 8, 15).toISOString(),
       y: 12,
-      region: {
+      regions: [{
         start: 8,
         end: 15,
-      },
+      }],
     },
     {
       x: new Date(2016, 0, 1, 9, 45).toISOString(),
       y: 16,
-      region: {
+      regions: [{
         start: 10,
         end: 20,
-      },
+      }],
     },
     {
       x: new Date(2016, 0, 1, 12, 15).toISOString(),
       y: 17,
-      region: {
+      regions: [{
         start: 10,
         end: 20,
-      },
+      }],
     },
     {
       x: new Date(2016, 0, 1, 13, 15).toISOString(),
       y: 28,
-      region: {
+      regions: [{
         start: 10,
         end: 20,
-      },
+      }],
       isCritical: true,
     },
     {
       x: new Date(2016, 0, 1, 14, 15).toISOString(),
       y: 12,
-      region: {
+      regions: [{
         start: 8,
         end: 15,
-      },
+      }],
     },
     {
       x: new Date(2016, 0, 1, 19, 45).toISOString(),
       y: 13,
-      region: {
+      regions: [{
         start: 9,
         end: 16,
-      },
+      }],
     },
     {
       x: new Date(2016, 0, 1, 21, 15).toISOString(),
       y: 14,
-      region: {
+      regions: [{
         start: 9,
         end: 16,
         color: Carbon.helpers.COLORS.GREY,
-      },
+      }],
     },
   ],
 };