diff --git a/package-lock.json b/package-lock.json index b3506f4e2..af12250dd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -42061,7 +42061,7 @@ }, "packages/carbon-graphs": { "name": "@cerner/carbon-graphs", - "version": "2.26.0", + "version": "2.25.0", "license": "Apache-2.0", "dependencies": { "d3-array": "1", diff --git a/packages/carbon-graphs/CHANGELOG.md b/packages/carbon-graphs/CHANGELOG.md index 8472315cd..c57a39886 100644 --- a/packages/carbon-graphs/CHANGELOG.md +++ b/packages/carbon-graphs/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Added + * Added support for multiple value regions for line graph. + ## 2.25.0 - (April 5, 2024) * Added diff --git a/packages/carbon-graphs/src/js/controls/Line/helpers/helpers.js b/packages/carbon-graphs/src/js/controls/Line/helpers/helpers.js index 60041f154..840c772ec 100644 --- a/packages/carbon-graphs/src/js/controls/Line/helpers/helpers.js +++ b/packages/carbon-graphs/src/js/controls/Line/helpers/helpers.js @@ -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); diff --git a/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_large/line-graph-spec/multiline_multiple_value_regions.png b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_large/line-graph-spec/multiline_multiple_value_regions.png new file mode 100644 index 000000000..3eb9b9398 Binary files /dev/null and b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_large/line-graph-spec/multiline_multiple_value_regions.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_large/line-graph-spec/multiple_value_regions.png b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_large/line-graph-spec/multiple_value_regions.png new file mode 100644 index 000000000..ee3a26b1b Binary files /dev/null and b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_large/line-graph-spec/multiple_value_regions.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_large/line-graph-spec/multiple_value_regions_overlapping.png b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_large/line-graph-spec/multiple_value_regions_overlapping.png new file mode 100644 index 000000000..b2b584cef Binary files /dev/null and b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_large/line-graph-spec/multiple_value_regions_overlapping.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_large/line-graph-spec/multiple_value_regions_spanning.png b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_large/line-graph-spec/multiple_value_regions_spanning.png new file mode 100644 index 000000000..348e1e659 Binary files /dev/null and b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_large/line-graph-spec/multiple_value_regions_spanning.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_medium/line-graph-spec/multiline_multiple_value_regions.png b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_medium/line-graph-spec/multiline_multiple_value_regions.png new file mode 100644 index 000000000..e95bd6384 Binary files /dev/null and b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_medium/line-graph-spec/multiline_multiple_value_regions.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_medium/line-graph-spec/multiple_value_regions.png b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_medium/line-graph-spec/multiple_value_regions.png new file mode 100644 index 000000000..686690770 Binary files /dev/null and b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_medium/line-graph-spec/multiple_value_regions.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_medium/line-graph-spec/multiple_value_regions_overlapping.png b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_medium/line-graph-spec/multiple_value_regions_overlapping.png new file mode 100644 index 000000000..cc8cad0eb Binary files /dev/null and b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_medium/line-graph-spec/multiple_value_regions_overlapping.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_medium/line-graph-spec/multiple_value_regions_spanning.png b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_medium/line-graph-spec/multiple_value_regions_spanning.png new file mode 100644 index 000000000..3d2bfc8d8 Binary files /dev/null and b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_medium/line-graph-spec/multiple_value_regions_spanning.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_tiny/line-graph-spec/multiline_multiple_value_regions.png b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_tiny/line-graph-spec/multiline_multiple_value_regions.png new file mode 100644 index 000000000..aec55df17 Binary files /dev/null and b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_tiny/line-graph-spec/multiline_multiple_value_regions.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_tiny/line-graph-spec/multiple_value_regions.png b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_tiny/line-graph-spec/multiple_value_regions.png new file mode 100644 index 000000000..64d5af440 Binary files /dev/null and b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_tiny/line-graph-spec/multiple_value_regions.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_tiny/line-graph-spec/multiple_value_regions_overlapping.png b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_tiny/line-graph-spec/multiple_value_regions_overlapping.png new file mode 100644 index 000000000..604baa89b Binary files /dev/null and b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_tiny/line-graph-spec/multiple_value_regions_overlapping.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_tiny/line-graph-spec/multiple_value_regions_spanning.png b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_tiny/line-graph-spec/multiple_value_regions_spanning.png new file mode 100644 index 000000000..9cb640690 Binary files /dev/null and b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/__snapshots__/reference/terra-default-theme/en/chrome_tiny/line-graph-spec/multiple_value_regions_spanning.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/line-graph-spec.js b/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/line-graph-spec.js index c9b6e0784..18a63bf3b 100644 --- a/packages/carbon-graphs/tests/wdio/Graphs/LineGraph/line-graph-spec.js +++ b/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'); + + 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(() => { diff --git a/packages/terra-graphs-docs/CHANGELOG.md b/packages/terra-graphs-docs/CHANGELOG.md index d0b280ef0..60f55d3a6 100644 --- a/packages/terra-graphs-docs/CHANGELOG.md +++ b/packages/terra-graphs-docs/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Added + * Added tests for multiple value regions. + ## 1.10.0 - (April 19, 2024) * Added diff --git a/packages/terra-graphs-docs/src/example-datasets/dataObjects/Line/datasetRegions13.js b/packages/terra-graphs-docs/src/example-datasets/dataObjects/Line/datasetRegions13.js new file mode 100644 index 000000000..cc7684ff4 --- /dev/null +++ b/packages/terra-graphs-docs/src/example-datasets/dataObjects/Line/datasetRegions13.js @@ -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; diff --git a/packages/terra-graphs-docs/src/example-datasets/dataObjects/Line/datasetRegions7.js b/packages/terra-graphs-docs/src/example-datasets/dataObjects/Line/datasetRegions7.js index d22c9f280..8b1bf4e8c 100644 --- a/packages/terra-graphs-docs/src/example-datasets/dataObjects/Line/datasetRegions7.js +++ b/packages/terra-graphs-docs/src/example-datasets/dataObjects/Line/datasetRegions7.js @@ -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, - }, + }], }, ], }; diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/PairedResultGraph.e/Regions.c/ValueRegion.3.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/PairedResultGraph.e/Regions.c/ValueRegion.3.graph.mdx index b1a2f4b4a..3a9914b40 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/PairedResultGraph.e/Regions.c/ValueRegion.3.graph.mdx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/PairedResultGraph.e/Regions.c/ValueRegion.3.graph.mdx @@ -5,7 +5,7 @@ require('details-polyfill'); # Value region Paired Result Graph -This is simple paired result graph associated with valure regions(for high and low datapoints). +This is simple paired result graph associated with value regions(for high and low datapoints). ## Getting Started diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/example/Graphs-Carbon/PairedResultGraph/Regions/ValueRegion.jsx b/packages/terra-graphs-docs/src/terra-dev-site/graph/example/Graphs-Carbon/PairedResultGraph/Regions/ValueRegion.jsx index a2520dfaf..5c34cf81c 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/example/Graphs-Carbon/PairedResultGraph/Regions/ValueRegion.jsx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/example/Graphs-Carbon/PairedResultGraph/Regions/ValueRegion.jsx @@ -12,7 +12,7 @@ Please refer to the documentation below to see the graphConfig and data objects const graphConfig = utils.deepClone(pairedResultDefault('#pairedResultGraphValueRegion')); const dataset = [utils.deepClone(exampleData)]; -const ValueRegionPiaredResultExample = () => { +const ValueRegionPairedResultExample = () => { React.useEffect(() => { const graph = Carbon.api.graph(graphConfig); dataset.forEach((data) => { @@ -24,4 +24,4 @@ const ValueRegionPiaredResultExample = () => { ); }; -export default ValueRegionPiaredResultExample; +export default ValueRegionPairedResultExample; diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/LineGraph/Regions/Line/MultipleValueRegions.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/LineGraph/Regions/Line/MultipleValueRegions.test.jsx new file mode 100644 index 000000000..b445d091d --- /dev/null +++ b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/LineGraph/Regions/Line/MultipleValueRegions.test.jsx @@ -0,0 +1,245 @@ +import React from 'react'; +import Carbon from '@cerner/carbon-graphs'; +import utils from '@cerner/carbon-graphs/lib/js/helpers/utils'; +import { loadPopup } from '@cerner/terra-graphs-docs/lib/example-datasets/popup'; +import LineGraph from '@cerner/terra-graphs-docs/lib/terra-graphs-src/components/Line/LineGraph'; +import '@cerner/terra-graphs-docs/lib/terra-dev-site/ExampleGraphContainer/ExampleGraphContainer.module.scss'; +import getLineTimeseriesConfig from '@cerner/terra-graphs-docs/lib/example-datasets/graphConfigObjects/Line/lineTimeseries'; + +const exampleData = { + 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: 20, + end: 27, + color: Carbon.helpers.COLORS.LAVENDER, + }], + }, + { + x: new Date(2016, 0, 1, 2, 15).toISOString(), + y: 11, + regions: [{ + start: 4, + end: 14, + color: Carbon.helpers.COLORS.GREY, + }, + { + start: 22, + end: 29, + color: Carbon.helpers.COLORS.LAVENDER, + }], + }, + { + x: new Date(2016, 0, 1, 3, 15).toISOString(), + y: 12, + regions: [{ + start: 5, + end: 15, + color: Carbon.helpers.COLORS.GREY, + }, + { + start: 22, + end: 29, + color: Carbon.helpers.COLORS.LAVENDER, + }], + }, + { + x: new Date(2016, 0, 1, 4, 15).toISOString(), + y: 16, + regions: [{ + start: 10, + end: 20, + color: Carbon.helpers.COLORS.GREY, + }, + { + start: 22, + end: 29, + color: Carbon.helpers.COLORS.LAVENDER, + }], + }, + { + x: new Date(2016, 0, 1, 5, 15).toISOString(), + y: 17, + regions: [{ + start: 10, + end: 20, + color: Carbon.helpers.COLORS.GREY, + }, + { + start: 23, + end: 30, + color: Carbon.helpers.COLORS.LAVENDER, + }], + }, + { + x: new Date(2016, 0, 1, 6, 15).toISOString(), + y: 9, + }, + { + x: new Date(2016, 0, 1, 7, 0).toISOString(), + y: 11, + regions: [{ + start: 8, + end: 15, + }, + { + start: 18, + end: 25, + color: Carbon.helpers.COLORS.LAVENDER, + }, + { + start: 27, + end: 30, + color: Carbon.helpers.COLORS.ORANGE, + }], + }, + { + x: new Date(2016, 0, 1, 8, 15).toISOString(), + y: 12, + regions: [{ + start: 8, + end: 15, + }, + { + start: 18, + end: 25, + color: Carbon.helpers.COLORS.LAVENDER, + }, + { + start: 27, + end: 30, + color: Carbon.helpers.COLORS.ORANGE, + }], + }, + { + x: new Date(2016, 0, 1, 9, 45).toISOString(), + y: 16, + regions: [{ + start: 10, + end: 20, + }, + { + start: 22, + end: 27, + color: Carbon.helpers.COLORS.LAVENDER, + }, + { + start: 28, + end: 31, + color: Carbon.helpers.COLORS.ORANGE, + }], + }, + { + x: new Date(2016, 0, 1, 12, 15).toISOString(), + y: 17, + regions: [{ + start: 10, + end: 20, + }, + { + start: 22, + end: 27, + color: Carbon.helpers.COLORS.LAVENDER, + }, + { + start: 28, + end: 31, + color: Carbon.helpers.COLORS.ORANGE, + }], + }, + { + x: new Date(2016, 0, 1, 13, 15).toISOString(), + y: 28, + regions: [{ + start: 10, + end: 20, + }, + { + start: 28, + end: 31, + color: Carbon.helpers.COLORS.ORANGE, + }], + isCritical: true, + }, + { + x: new Date(2016, 0, 1, 14, 15).toISOString(), + y: 12, + regions: [{ + start: 8, + end: 15, + }, + { + start: 18, + end: 25, + color: Carbon.helpers.COLORS.LAVENDER, + }, + { + start: 27, + end: 30, + color: Carbon.helpers.COLORS.ORANGE, + }], + }, + { + x: new Date(2016, 0, 1, 19, 45).toISOString(), + y: 13, + regions: [{ + start: 9, + end: 16, + }, + { + start: 18, + end: 25, + color: Carbon.helpers.COLORS.LAVENDER, + }, + { + start: 28, + end: 31, + color: Carbon.helpers.COLORS.ORANGE, + }], + }, + { + 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.LAVENDER, + }, + { + start: 27, + end: 30, + color: Carbon.helpers.COLORS.ORANGE, + }], + }, + ], +}; + +const graphConfig = utils.deepClone(getLineTimeseriesConfig('#valueRegion')); +const dataset = [utils.deepClone(exampleData)]; + +export default () => ( + <> +
+ + +); diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/LineGraph/Regions/Line/MultipleValueRegionsOverlapping.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/LineGraph/Regions/Line/MultipleValueRegionsOverlapping.test.jsx new file mode 100644 index 000000000..84a8ad9cc --- /dev/null +++ b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/LineGraph/Regions/Line/MultipleValueRegionsOverlapping.test.jsx @@ -0,0 +1,193 @@ +import React from 'react'; +import Carbon from '@cerner/carbon-graphs'; +import utils from '@cerner/carbon-graphs/lib/js/helpers/utils'; +import { loadPopup } from '@cerner/terra-graphs-docs/lib/example-datasets/popup'; +import LineGraph from '@cerner/terra-graphs-docs/lib/terra-graphs-src/components/Line/LineGraph'; +import '@cerner/terra-graphs-docs/lib/terra-dev-site/ExampleGraphContainer/ExampleGraphContainer.module.scss'; +import getLineTimeseriesConfig from '@cerner/terra-graphs-docs/lib/example-datasets/graphConfigObjects/Line/lineTimeseries'; + +const exampleData = { + 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, + }, + ], + }, + { + x: new Date(2016, 0, 1, 2, 15).toISOString(), + y: 11, + regions: [ + { + start: 4, + end: 14, + color: Carbon.helpers.COLORS.GREY, + }, + ], + }, + { + x: new Date(2016, 0, 1, 3, 15).toISOString(), + y: 12, + regions: [ + { + start: 5, + end: 15, + color: Carbon.helpers.COLORS.GREY, + }, + ], + }, + { + x: new Date(2016, 0, 1, 4, 15).toISOString(), + y: 16, + regions: [{ + start: 10, + end: 20, + color: Carbon.helpers.COLORS.GREY, + + }, + { + start: 20, + end: 30, + color: Carbon.helpers.COLORS.LAVENDER, + }], + }, + { + x: new Date(2016, 0, 1, 5, 15).toISOString(), + y: 17, + regions: [{ + start: 10, + end: 20, + color: Carbon.helpers.COLORS.GREY, + }, + { + start: 20, + end: 30, + color: Carbon.helpers.COLORS.LAVENDER, + }], + }, + { + x: new Date(2016, 0, 1, 6, 15).toISOString(), + y: 9, + regions: [{ + start: 20, + end: 30, + color: Carbon.helpers.COLORS.LAVENDER, + }], + }, + { + x: new Date(2016, 0, 1, 7, 0).toISOString(), + y: 11, + regions: [{ + start: 8, + end: 15, + }, + { + start: 15, + end: 25, + color: Carbon.helpers.COLORS.LAVENDER, + }], + }, + { + x: new Date(2016, 0, 1, 8, 15).toISOString(), + y: 12, + regions: [{ + start: 8, + end: 15, + }, + { + start: 15, + end: 25, + color: Carbon.helpers.COLORS.LAVENDER, + }], + }, + { + x: new Date(2016, 0, 1, 9, 45).toISOString(), + y: 16, + regions: [{ + start: 10, + end: 20, + }], + }, + { + x: new Date(2016, 0, 1, 12, 15).toISOString(), + y: 17, + regions: [{ + start: 10, + end: 20, + }], + }, + { + x: new Date(2016, 0, 1, 13, 15).toISOString(), + y: 28, + regions: [{ + start: 10, + end: 20, + }], + isCritical: true, + }, + { + x: new Date(2016, 0, 1, 14, 15).toISOString(), + y: 12, + regions: [ + { + start: 8, + end: 15, + }, + ], + }, + { + x: new Date(2016, 0, 1, 19, 45).toISOString(), + y: 13, + regions: [ + { + start: 9, + end: 16, + }, + { + start: 20, + end: 30, + color: Carbon.helpers.COLORS.LAVENDER, + }, + ], + }, + { + x: new Date(2016, 0, 1, 21, 15).toISOString(), + y: 14, + regions: [ + { + start: 9, + end: 16, + color: Carbon.helpers.COLORS.GREY, + }, + { + start: 20, + end: 30, + color: Carbon.helpers.COLORS.LAVENDER, + }, + ], + }, + ], +}; + +const graphConfig = utils.deepClone(getLineTimeseriesConfig('#valueRegion')); +const dataset = [utils.deepClone(exampleData)]; + +export default () => ( + <> +
+ + +); diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/LineGraph/Regions/Line/MultipleValueRegionsSpanning.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/LineGraph/Regions/Line/MultipleValueRegionsSpanning.test.jsx new file mode 100644 index 000000000..8f1adb75e --- /dev/null +++ b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/LineGraph/Regions/Line/MultipleValueRegionsSpanning.test.jsx @@ -0,0 +1,231 @@ +import React from 'react'; +import Carbon from '@cerner/carbon-graphs'; +import utils from '@cerner/carbon-graphs/lib/js/helpers/utils'; +import { loadPopup } from '@cerner/terra-graphs-docs/lib/example-datasets/popup'; +import LineGraph from '@cerner/terra-graphs-docs/lib/terra-graphs-src/components/Line/LineGraph'; +import '@cerner/terra-graphs-docs/lib/terra-dev-site/ExampleGraphContainer/ExampleGraphContainer.module.scss'; +import getLineTimeseriesConfig from '@cerner/terra-graphs-docs/lib/example-datasets/graphConfigObjects/Line/lineTimeseries'; + +const exampleData = { + 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, + }, + ], + }, + ], +}; + +const graphConfig = utils.deepClone(getLineTimeseriesConfig('#valueRegion')); +const dataset = [utils.deepClone(exampleData)]; + +export default () => ( + <> +
+ + +); diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/LineGraph/Regions/Line/ValueRegion.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/LineGraph/Regions/Line/ValueRegion.test.jsx index 5143e6028..b03a39e97 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/LineGraph/Regions/Line/ValueRegion.test.jsx +++ b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/LineGraph/Regions/Line/ValueRegion.test.jsx @@ -1,9 +1,138 @@ import React from 'react'; +import Carbon from '@cerner/carbon-graphs'; import utils from '@cerner/carbon-graphs/lib/js/helpers/utils'; +import { loadPopup } from '@cerner/terra-graphs-docs/lib/example-datasets/popup'; import LineGraph from '@cerner/terra-graphs-docs/lib/terra-graphs-src/components/Line/LineGraph'; import '@cerner/terra-graphs-docs/lib/terra-dev-site/ExampleGraphContainer/ExampleGraphContainer.module.scss'; import getLineTimeseriesConfig from '@cerner/terra-graphs-docs/lib/example-datasets/graphConfigObjects/Line/lineTimeseries'; -import exampleData from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/datasetRegions7'; + +const exampleData = { + 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, + }], + }, + { + x: new Date(2016, 0, 1, 2, 15).toISOString(), + y: 11, + regions: [{ + start: 4, + end: 14, + color: Carbon.helpers.COLORS.GREY, + }], + }, + { + x: new Date(2016, 0, 1, 3, 15).toISOString(), + y: 12, + regions: [{ + start: 5, + end: 15, + color: Carbon.helpers.COLORS.GREY, + }], + }, + { + x: new Date(2016, 0, 1, 4, 15).toISOString(), + y: 16, + regions: [{ + start: 10, + end: 20, + color: Carbon.helpers.COLORS.GREY, + }], + }, + { + x: new Date(2016, 0, 1, 5, 15).toISOString(), + y: 17, + regions: [{ + start: 10, + end: 20, + color: Carbon.helpers.COLORS.GREY, + }], + }, + { + x: new Date(2016, 0, 1, 6, 15).toISOString(), + y: 9, + }, + { + x: new Date(2016, 0, 1, 7, 0).toISOString(), + y: 11, + regions: [{ + start: 8, + end: 15, + }], + }, + { + x: new Date(2016, 0, 1, 8, 15).toISOString(), + y: 12, + regions: [{ + start: 8, + end: 15, + }], + }, + { + x: new Date(2016, 0, 1, 9, 45).toISOString(), + y: 16, + regions: [{ + start: 10, + end: 20, + }], + }, + { + x: new Date(2016, 0, 1, 12, 15).toISOString(), + y: 17, + regions: [{ + start: 10, + end: 20, + }], + }, + { + x: new Date(2016, 0, 1, 13, 15).toISOString(), + y: 28, + regions: [{ + start: 10, + end: 20, + }], + isCritical: true, + }, + { + x: new Date(2016, 0, 1, 14, 15).toISOString(), + y: 12, + regions: [{ + start: 8, + end: 15, + }], + }, + { + x: new Date(2016, 0, 1, 19, 45).toISOString(), + y: 13, + regions: [{ + start: 9, + end: 16, + }], + }, + { + x: new Date(2016, 0, 1, 21, 15).toISOString(), + y: 14, + regions: [{ + start: 9, + end: 16, + color: Carbon.helpers.COLORS.GREY, + }], + }, + ], +}; const graphConfig = utils.deepClone(getLineTimeseriesConfig('#valueRegion')); const dataset = [utils.deepClone(exampleData)]; diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/LineGraph/Regions/MultiLine/MultipleValueRegions.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/LineGraph/Regions/MultiLine/MultipleValueRegions.test.jsx new file mode 100644 index 000000000..4deffaf39 --- /dev/null +++ b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/LineGraph/Regions/MultiLine/MultipleValueRegions.test.jsx @@ -0,0 +1,24 @@ +import React from 'react'; +import utils from '@cerner/carbon-graphs/lib/js/helpers/utils'; +import LineGraph from '@cerner/terra-graphs-docs/lib/terra-graphs-src/components/Line/LineGraph'; +import '@cerner/terra-graphs-docs/lib/terra-dev-site/ExampleGraphContainer/ExampleGraphContainer.module.scss'; +import getLineDefaultY2Config from '@cerner/terra-graphs-docs/lib/example-datasets/graphConfigObjects/Line/lineDefaultY2'; +import exampleData1 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/datasetRegions1'; +import exampleData2 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/datasetRegions2'; +import exampleData3 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/datasetRegions3'; +import exampleData4 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/datasetRegions13'; + +const graphConfig = utils.deepClone(getLineDefaultY2Config('#multipleline')); +const dataset = [ + utils.deepClone(exampleData1), + utils.deepClone(exampleData2), + utils.deepClone(exampleData3), + utils.deepClone(exampleData4), +]; + +export default () => ( + <> +
+ + +);