[carbon-graphs] Add multiple value region support for line graphs

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

@@ -391,37 +391,55 @@ 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 continuousRegionSubset = [];
+
+  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 => r.color) : [];
+
+      value.regions.forEach((region) => {
+        if (!utils.isEmpty(region)
+                && !utils.isEmpty(region.start)
+                && !utils.isEmpty(region.end)
+        ) {
+          // 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
+            continuousRegionSubset = continuousRegionSubset.filter((r) => r.color !== region.color);
+            continuousRegionSubset.push(valueRegion);
+          }
+
+          const adjacentValueRegions = continuousRegionSubset.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: [],
       };
+      continuousRegionSubset = [];
     }
   });
   valueRegionSubset.push(valueRegion);

packages/carbon-graphs/tests/wdio/Graphs/LineGraph/line-graph-spec.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');
+
+        let 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/terra-graphs-docs/src/example-datasets/dataObjects/Line/datasetRegions10.js

@@ -0,0 +1,218 @@
+import Carbon from '@cerner/carbon-graphs';
+import { loadPopup } from '@cerner/terra-graphs-docs/lib/example-datasets/popup';
+
+const data = {
+  key: 'uid_7',
+  label: {
+    display: 'Data Label 7',
+  },
+  shape: Carbon.helpers.SHAPES.DARK.CIRCLE,
+  onClick: loadPopup,
+  yAxis: 'y',
+  values: [
+    {
+      x: new Date(2016, 0, 1, 1, 5).toISOString(),
+      y: 5,
+      isCritical: false,
+      regions: [
+        {
+          start: 3,
+          end: 8,
+          color: Carbon.helpers.COLORS.GREY,
+        },
+        {
+          start: 10,
+          end: 15,
+          color: Carbon.helpers.COLORS.LIGHT_GREEN,
+        },
+      ],
+    },
+    {
+      x: new Date(2016, 0, 1, 2, 15).toISOString(),
+      y: 11,
+      regions: [
+        {
+          start: 4,
+          end: 14,
+          color: Carbon.helpers.COLORS.GREY,
+        },
+        {
+          start: 15,
+          end: 25,
+          color: Carbon.helpers.COLORS.LIGHT_GREEN,
+        },
+      ],
+    },
+    {
+      x: new Date(2016, 0, 1, 3, 15).toISOString(),
+      y: 12,
+      regions: [
+        {
+          start: 5,
+          end: 15,
+          color: Carbon.helpers.COLORS.GREY,
+        },
+        {
+          start: 20,
+          end: 30,
+          color: Carbon.helpers.COLORS.LIGHT_GREEN,
+        },
+      ],
+    },
+    {
+      x: new Date(2016, 0, 1, 4, 15).toISOString(),
+      y: 16,
+      regions: [{
+        start: 10,
+        end: 20,
+        color: Carbon.helpers.COLORS.GREY,
+      },{
+        start: 21,
+        end: 36,
+        color: Carbon.helpers.COLORS.LIGHT_GREEN,
+      },],
+    },
+    {
+      x: new Date(2016, 0, 1, 5, 15).toISOString(),
+      y: 17,
+      regions: [{
+        start: 10,
+        end: 20,
+        color: Carbon.helpers.COLORS.GREY,
+      },{
+        start: 21,
+        end: 36,
+        color: Carbon.helpers.COLORS.LIGHT_GREEN,
+      },],
+    },
+    {
+      x: new Date(2016, 0, 1, 6, 15).toISOString(),
+      y: 9,
+      regions: [
+        {
+          start: 20,
+          end: 25,
+          color: Carbon.helpers.COLORS.LIGHT_GREEN,
+        },
+      ],
+    },
+    {
+      x: new Date(2016, 0, 1, 7, 0).toISOString(),
+      y: 11,
+      regions: [{
+        start: 8,
+        end: 15,
+      },
+      {
+        start: 17,
+        end: 24,
+        color: Carbon.helpers.COLORS.LIGHT_GREEN,
+      }],
+    },
+    {
+      x: new Date(2016, 0, 1, 8, 15).toISOString(),
+      y: 12,
+      regions: [{
+        start: 8,
+        end: 15,
+      },
+      {
+        start: 16,
+        end: 23,
+        color: Carbon.helpers.COLORS.LIGHT_GREEN,
+      }],
+    },
+    {
+      x: new Date(2016, 0, 1, 9, 45).toISOString(),
+      y: 16,
+      regions: [{
+        start: 10,
+        end: 20,
+      },
+      {
+        start: 23,
+        end: 30,
+        color: Carbon.helpers.COLORS.LIGHT_GREEN,
+      }],
+    },
+    {
+      x: new Date(2016, 0, 1, 12, 15).toISOString(),
+      y: 17,
+      regions: [
+        {
+          start: 10,
+          end: 20,
+        },
+        {
+          start: 22,
+          end: 30,
+          color: Carbon.helpers.COLORS.LIGHT_GREEN,
+        },
+      ],
+    },
+    {
+      x: new Date(2016, 0, 1, 13, 15).toISOString(),
+      y: 28,
+      regions: [
+        {
+          start: 10,
+          end: 20,
+        },
+        {
+          start: 22,
+          end: 30,
+          color: Carbon.helpers.COLORS.LIGHT_GREEN,
+        },
+      ],
+      isCritical: true,
+    },
+    {
+      x: new Date(2016, 0, 1, 14, 15).toISOString(),
+      y: 12,
+      regions: [
+        {
+          start: 8,
+          end: 15,
+        },
+        {
+          start: 17,
+          end: 24,
+          color: Carbon.helpers.COLORS.LIGHT_GREEN,
+        },
+      ],
+    },
+    {
+      x: new Date(2016, 0, 1, 19, 45).toISOString(),
+      y: 13,
+      regions: [
+        {
+          start: 9,
+          end: 16,
+        },
+        {
+          start: 18,
+          end: 25,
+          color: Carbon.helpers.COLORS.LIGHT_GREEN,
+        },
+      ],
+    },
+    {
+      x: new Date(2016, 0, 1, 21, 15).toISOString(),
+      y: 14,
+      regions: [
+        {
+          start: 9,
+          end: 16,
+          color: Carbon.helpers.COLORS.GREY,
+        },
+        {
+          start: 18,
+          end: 25,
+          color: Carbon.helpers.COLORS.LIGHT_GREEN,
+        },
+      ],
+    },
+  ],
+};
+
+export default data;