fix ticks rotation

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

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;
   }
 

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' });

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

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;

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 (
+    <ExampleGraphContainer id="allowCalibrationXTimeseriesTicksRotated" />
+  );
+};
+
+export default AllowCalibrationExample;
+