diff --git a/packages/carbon-graphs/CHANGELOG.md b/packages/carbon-graphs/CHANGELOG.md index a0a100868..7bb44855e 100644 --- a/packages/carbon-graphs/CHANGELOG.md +++ b/packages/carbon-graphs/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Fixed + * Fixed inconsistent ticks rotation when allowCalibration for x-axis is true. + ## 2.24.0 - (November 27, 2023) * Added diff --git a/packages/carbon-graphs/src/js/controls/Graph/Graph.js b/packages/carbon-graphs/src/js/controls/Graph/Graph.js index 7e5880aa8..71f4178c2 100644 --- a/packages/carbon-graphs/src/js/controls/Graph/Graph.js +++ b/packages/carbon-graphs/src/js/controls/Graph/Graph.js @@ -293,7 +293,9 @@ class Graph extends Construct { createRegionContainer(this.config, this.svg); createGrid(this.axis, this.scale, this.config, this.svg); createContentContainer(this.config, this.svg); - createAxes(this.axis, this.scale, this.config, this.svg); + if (utils.isUndefined(this.config.axis.x.allowCalibration) || !this.config.axis.x.allowCalibration) { + createAxes(this.axis, this.scale, this.config, this.svg); + } createXAxisInfoRow(this.axis, this.scale, this.config, this.svg); createLabel(this.config, this.svg, this); createAxisReferenceLine(this.axis, this.scale, this.config, this.svg); @@ -416,6 +418,9 @@ class Graph extends Construct { }); this.resize(); + if (utils.isDefined(this.config.axis.x.allowCalibration) && this.config.axis.x.allowCalibration) { + createAxes(this.axis, this.scale, this.config, this.svg); + } return this; } diff --git a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_large/general-spec/x-axis_timeseries_allowcalibration_enabled_ticks_rotated.png b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_large/general-spec/x-axis_timeseries_allowcalibration_enabled_ticks_rotated.png new file mode 100644 index 000000000..566e915a1 Binary files /dev/null and b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_large/general-spec/x-axis_timeseries_allowcalibration_enabled_ticks_rotated.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_medium/general-spec/x-axis_timeseries_allowcalibration_enabled_ticks_rotated.png b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_medium/general-spec/x-axis_timeseries_allowcalibration_enabled_ticks_rotated.png new file mode 100644 index 000000000..6eb4a3757 Binary files /dev/null and b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_medium/general-spec/x-axis_timeseries_allowcalibration_enabled_ticks_rotated.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_tiny/general-spec/x-axis_timeseries_allowcalibration_enabled_ticks_rotated.png b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_tiny/general-spec/x-axis_timeseries_allowcalibration_enabled_ticks_rotated.png new file mode 100644 index 000000000..254fe5ca0 Binary files /dev/null and b/packages/carbon-graphs/tests/wdio/Graphs/General/__snapshots__/reference/terra-default-theme/en/chrome_tiny/general-spec/x-axis_timeseries_allowcalibration_enabled_ticks_rotated.png differ diff --git a/packages/carbon-graphs/tests/wdio/Graphs/General/general-spec.js b/packages/carbon-graphs/tests/wdio/Graphs/General/general-spec.js index dd17ae83b..ab8ae295a 100644 --- a/packages/carbon-graphs/tests/wdio/Graphs/General/general-spec.js +++ b/packages/carbon-graphs/tests/wdio/Graphs/General/general-spec.js @@ -80,6 +80,11 @@ Terra.describeViewports('General', ['tiny', 'medium', 'large'], () => { Terra.validates.screenshot('x-axis_timeseries_allowcalibration_enabled', { selector: '.carbon-graph-container' }); }); + it('validates timeseries x-axis allowCalibration enabled graph container with ticks rotated', () => { + browser.url('/raw/tests/cerner-terra-graphs-docs/graphs/general/axes/allow-calibration-enabled-timeseries-x-axis-ticks-rotated'); + Terra.validates.screenshot('x-axis_timeseries_allowcalibration_enabled_ticks_rotated', { selector: '.carbon-graph-container' }); + }); + it('validates x-axis allowCalibration enabled graph container', () => { browser.url('/raw/tests/cerner-terra-graphs-docs/graphs/general/axes/allow-calibration-enabled-x-axis'); Terra.validates.screenshot('x-axis_allowcalibration_enabled', { selector: '.carbon-graph-container' }); diff --git a/packages/terra-graphs-docs/CHANGELOG.md b/packages/terra-graphs-docs/CHANGELOG.md index 832ad9f18..bcd3a1f48 100644 --- a/packages/terra-graphs-docs/CHANGELOG.md +++ b/packages/terra-graphs-docs/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Added + * Added examples for the Xaxis calibration enabled with rotated ticks. + ## 1.7.0 - (November 27, 2023) * Added diff --git a/packages/terra-graphs-docs/src/example-datasets/graphConfigObjects/General/timeseriesConfigXCalibrationEnabledTicksRotated.js b/packages/terra-graphs-docs/src/example-datasets/graphConfigObjects/General/timeseriesConfigXCalibrationEnabledTicksRotated.js new file mode 100644 index 000000000..d784045aa --- /dev/null +++ b/packages/terra-graphs-docs/src/example-datasets/graphConfigObjects/General/timeseriesConfigXCalibrationEnabledTicksRotated.js @@ -0,0 +1,33 @@ +import Carbon from '@cerner/carbon-graphs/lib/js/carbon'; + +const getConfig = (id) => ({ + bindTo: id, + axis: { + x: { + type: Carbon.helpers.AXIS_TYPE.TIME_SERIES, + label: 'Datetime', + lowerLimit: new Date(2016, 0, 1, 9, 0).toISOString(), + upperLimit: new Date(2016, 0, 1, 15, 59).toISOString(), + allowCalibration: true, + ticks: { tickLabelsRotation: -45 }, + }, + y: { + label: 'Line Set A', + lowerLimit: 10, + upperLimit: 30, + }, + y2: { + show: false, + label: 'Line Set B', + lowerLimit: 0, + upperLimit: 250, + }, + }, + showLabel: true, + showLegend: true, + showShapes: true, + showVGrid: true, + showHGrid: true, +}); + +export default getConfig; diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/Axes/AllowCalibrationEnabledTimeseriesXAxisTicksRotated.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/Axes/AllowCalibrationEnabledTimeseriesXAxisTicksRotated.test.jsx new file mode 100644 index 000000000..b23cfea0a --- /dev/null +++ b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/Axes/AllowCalibrationEnabledTimeseriesXAxisTicksRotated.test.jsx @@ -0,0 +1,29 @@ +import React from 'react'; +import Carbon from '@cerner/carbon-graphs/lib/js/carbon'; +import utils from '@cerner/carbon-graphs/lib/js/helpers/utils'; +import '@cerner/terra-graphs-docs/lib/terra-graphs-src/components/Graph.module.scss'; +import '@cerner/terra-graphs-docs/lib/terra-graphs-src/components/Line/LineGraph.module.scss'; +import ExampleGraphContainer from '@cerner/terra-graphs-docs/lib/terra-dev-site/ExampleGraphContainer/ExampleGraphContainer'; +import getConfig from '@cerner/terra-graphs-docs/lib/example-datasets/graphConfigObjects/General/timeseriesConfigXCalibrationEnabledTicksRotated'; +import exampleData from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/datasetTimeseries1'; + +/* +Please refer to the documentation below to see the graphConfig and data objects +*/ + +const graphConfig = utils.deepClone(getConfig('#allowCalibrationXTimeseriesTicksRotated')); +const dataset = utils.deepClone(exampleData); + +const AllowCalibrationExample = () => { + React.useEffect(() => { + const graph = Carbon.api.graph(graphConfig); + graph.loadContent(Carbon.api.line(dataset)); + }, []); + + return ( + + ); +}; + +export default AllowCalibrationExample; +