added prop rotateAngle to avoid the overlapping x-axis tick values

packages/carbon-graphs/CHANGELOG.md

@@ -1,6 +1,8 @@
 # ChangeLog
 
 ## Unreleased
+* Fixed
+  * Fixed tick values overlapping on X-axis by rotating 15,30,45.
 
 ## 2.23.3 - (September 25, 2023)
 

packages/carbon-graphs/src/js/helpers/axis.js

@@ -881,6 +881,8 @@ const getY2AxisYPosition = (config) => calculateVerticalPadding(config);
 const createAxes = (axis, scale, config, canvasSVG) => {
   getAxesScale(axis, scale, config);
   prepareHAxis(scale, axis, config, prepareHorizontalAxis);
+  // eslint-disable-next-line no-use-before-define
+  const rotateAngle = config.rotateAngle ? calculateRotateAngleBasedOnWidth(config) : undefined;
   canvasSVG
     .append('g')
     .classed(styles.axis, true)
@@ -893,7 +895,11 @@ const createAxes = (axis, scale, config, canvasSVG) => {
       )})`,
     )
     .call(axis.x)
-    .call(resetD3FontSize);
+    .call(resetD3FontSize)
+    .attr('id', 'x')
+    .selectAll('text')
+    .style('text-anchor', config.rotateAngle ? 'end' : 'middle')
+    .attr('transform', () => `rotate(${rotateAngle})`);
   canvasSVG
     .append('g')
     .classed(styles.axis, true)
@@ -922,7 +928,18 @@ const createAxes = (axis, scale, config, canvasSVG) => {
       .call(resetD3FontSize);
   }
 };
-
+const calculateRotateAngleBasedOnWidth = (config) => {
+  const containerWidth = config.canvasWidth;
+  // Define thresholds for rotation based on container width
+  const thresholdSmall = 400;
+  const thresholdMedium = 800;
+  if (containerWidth < thresholdSmall) {
+    return -45; // rotate by -45 degrees for small screens
+  } if (containerWidth < thresholdMedium) {
+    return -30; // rotate by -30 degrees for medium screens
+  }
+  return -15; // rotate by -15 degrees for larger screens
+};
 /**
  * X Axis's position vertically relative to the canvas
  *

packages/terra-graphs-docs/CHANGELOG.md

@@ -1,6 +1,9 @@
 # ChangeLog
 
 ## Unreleased
+* Added
+  * Added a Prop `rotateAngle` for overlapping X-axis tick values.
+  * Added examples for the Xaxis Overlapping tick values.
 
 ## 1.6.0 - (September 25, 2023)
 

packages/terra-graphs-docs/src/example-datasets/graphConfigObjects/General/generalDefaultXAxisOverlapping.js

@@ -0,0 +1,49 @@
+import Carbon from '@cerner/carbon-graphs/lib/js/carbon';
+
+const getLineTimeseriesConfig = (id) => ({
+  bindTo: id,
+  rotateAngle: true,
+  axis: {
+    x: {
+      type: Carbon.helpers.AXIS_TYPE.TIME_SERIES,
+      label: 'Datetime',
+      lowerLimit: new Date(2016, 0, 1).toISOString(),
+      upperLimit: new Date(2016, 0, 12).toISOString(),
+      ticks: {
+        values: [
+          new Date(2016, 0, 1).toISOString(),
+          new Date(2016, 0, 2).toISOString(),
+          new Date(2016, 0, 3).toISOString(),
+          new Date(2016, 0, 4).toISOString(),
+          new Date(2016, 0, 5).toISOString(),
+          new Date(2016, 0, 6).toISOString(),
+          new Date(2016, 0, 7).toISOString(),
+          new Date(2016, 0, 8).toISOString(),
+          new Date(2016, 0, 9).toISOString(),
+          new Date(2016, 0, 10).toISOString(),
+          new Date(2016, 0, 11).toISOString(),
+        ],
+        format: '%Y, %X',
+      },
+    },
+    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,
+  locale: Carbon.helpers.LOCALE.de_DE,
+});
+
+export default getLineTimeseriesConfig;

packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Documentation/Graph.1.graph.mdx

@@ -28,6 +28,7 @@ It is required for the following graphs:
 const graphConfig = {
     axis: <Axis object>,
     bindTo: <string>,
+    rotateAngle: false,
     allowCalibration: <bool>,
     bindLegendTo: <string>,
     clickPassThrough: {
@@ -70,6 +71,7 @@ const graphConfig = {
 |------------------------|----------|------------------------------------------------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
 | axis                   | object   | -                                              | yes      | See [Axis](./Axes).                                                                                                                                                                         |
 | bindTo                 | string   | -                                              | yes      | DOM ID to bind the graph container to.                                                                                                                                                      |
+| rotateAngle            | boolean  | `false`                                        | no       | To rotate tickvalues anticlockwise `15`,`30`,`45` degrees with respect to the width of the x-axis.                                                                                          |
 | allowCalibration       | boolean  | `true`                                         | no       | Toggle to allow calibration to adjust the y axis.                                                                                                                                           |
 | bindLegendTo           | string   | `null`                                         | no       | If DOM id provided, binds legend into that container (Example: `"#legendContainer"`).                                                                                                       |
 | clickPassThrough       | object   | `{}`                                           | no       | See [clickPassThrough](#clickpassthrough).                                                                                                                                                  |

packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/Axes/XAxisTickValuesOverlapping.test.jsx

@@ -0,0 +1,31 @@
+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 getGraphConfig from '@cerner/terra-graphs-docs/lib/example-datasets/graphConfigObjects/General/generalDefaultXAxisOverlapping';
+import exampleData1 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/dataset1';
+import exampleData2 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/dataset2';
+import exampleData3 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/dataset3';
+import exampleData4 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/dataset4';
+import exampleData5 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/dataset5';
+import exampleData6 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/dataset6';
+
+const graphConfig = utils.deepClone(getGraphConfig('#xAxisTicksVlauesOverlapping'));
+const dataset = [
+  utils.deepClone(exampleData1),
+  utils.deepClone(exampleData2),
+  utils.deepClone(exampleData3),
+  utils.deepClone(exampleData4),
+  utils.deepClone(exampleData5),
+  utils.deepClone(exampleData6),
+];
+
+const timeoutArray = [0, 750, 750 * 2, 750 * 3, 750 * 4, 750 * 5, 750 * 6];
+
+export default () => (
+  <>
+    <div id="tooltip" className="initial-tooltip" />
+    <LineGraph graphID="xAxisTicksVlauesOverlapping" graphConfig={graphConfig} dataset={dataset} timeout={timeoutArray} />
+    ;
+  </>
+);