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

packages/carbon-graphs/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added prop `tickLabelsRotation` to allow rotation of x-axis tick labels to prevent overlap.
+
 ## 2.23.3 - (September 25, 2023)
 
 * Fixed

packages/carbon-graphs/src/js/controls/Graph/Graph.js

@@ -120,6 +120,11 @@ const beforeInit = (control) => {
     console.warn('allowCalibration for x-axis is a new feature that is currently a work in progress and may have stability issues. Use it at your own risk.');
     getAxesDataRange({}, constants.X_AXIS, control.config);
   }
+  const isInvalidTickLabelRotations = !utils.isDefined(control.config.axis.x.ticks.tickLabelsRotation) || !utils.validTickLabelRotations.has(control.config.axis.x.ticks.tickLabelsRotation);
+  if (isInvalidTickLabelRotations) {
+    control.config.axis.x.ticks.tickLabelsRotation = 0;
+    console.warn(`${control.config.axis.x.ticks.tickLabelsRotation} is an invalid value for tickLabelsRotation. Valid values are: 0, -45. Resorting to the default value of 0`);
+  }
 
   updateAxesDomain(control.config);
   updateXAxisDomain(control.config);

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

@@ -893,7 +893,25 @@ const createAxes = (axis, scale, config, canvasSVG) => {
       )})`,
     )
     .call(axis.x)
-    .call(resetD3FontSize);
+    .call(resetD3FontSize)
+    .attr('id', 'x')
+    .selectAll('text')
+    .style('text-anchor', () => {
+      if (!utils.isDefined(config.axis.x.ticks.tickLabelsRotation)) {
+        config.axis.x.ticks.tickLabelsRotation = 0;
+        return 'middle';
+      }
+      const rotation = config.axis.x.ticks.tickLabelsRotation;
+      if (rotation === 0) {
+        return 'middle';
+      } if (rotation !== 0) {
+        return 'end';
+      } if (!utils.validTickLabelRotations.has(rotation)) {
+        return 'middle';
+      }
+      return 'middle';
+    })
+    .attr('transform', () => `rotate(${config.axis.x.ticks.tickLabelsRotation})`);
   canvasSVG
     .append('g')
     .classed(styles.axis, true)
@@ -922,7 +940,6 @@ const createAxes = (axis, scale, config, canvasSVG) => {
       .call(resetD3FontSize);
   }
 };
-
 /**
  * X Axis's position vertically relative to the canvas
  *
@@ -1122,6 +1139,13 @@ const getXAxisHeight = (config) => {
   const dummy = d3.select('body').append('div');
   const svg = dummy.append('svg');
   const group = svg.append('g').call(axis);
+  if (config.axis.x.ticks && config.axis.x.ticks.tickLabelsRotation !== 0) {
+    // Add extra padding for rotated tick labels
+    group.selectAll('.tick text').attr('transform', `rotate(${config.axis.x.ticks.tickLabelsRotation})`);
+    const rotatedTickLabelsHeight = group.node().getBoundingClientRect().height;
+    dummy.remove();
+    return rotatedTickLabelsHeight;
+  }
   const { height } = group.node().getBoundingClientRect();
   dummy.remove();
   return height;
@@ -1205,10 +1229,16 @@ const getAxisLabelWidth = (label, axis, config) => {
  * @param {string} label - Label text
  * @returns {number} label height
  */
-const getAxisLabelHeight = (label) => {
+const getAxisLabelHeight = (label, tickLabelsRotation) => {
   const dummy = d3.select('body').append('div');
   const svg = dummy.append('svg');
   const grouper = svg.append('g');
+
+  if (tickLabelsRotation) {
+    // Adding extra padding for rotated labels
+    grouper.attr('transform', `rotate(${tickLabelsRotation * constants.DEFAULT_OVERLAPPING_PADDING})`);
+  }
+
   buildAxisLabel(grouper, label);
   const { height } = grouper.node().getBoundingClientRect();
   dummy.remove();
@@ -1293,7 +1323,8 @@ const calculateAxesLabelSize = (config) => {
   config.axisLabelWidths.y2 = 0;
   if (config.showLabel) {
     if (config.axis.x.label) {
-      config.axisLabelHeights.x = getAxisLabelHeight(config.axis.x.label);
+      const tickLabelsRotation = config.axis.x.ticks && config.axis.x.ticks.tickLabelsRotation;
+      config.axisLabelHeights.x = getAxisLabelHeight(config.axis.x.label, tickLabelsRotation);
     }
     if (config.axis.y.label) {
       config.axisLabelWidths.y = constants.DEFAULT_CHARACTER_SVG_ELEMENT_WIDTH;

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

@@ -316,4 +316,5 @@ export default {
   DEFAULT_LEGEND_LINE_WIDTH: 28,
   DEFAULT_LEGEND_LINE_WIDTH_WITH_SYMBOL: 18,
   LEGEND_LINE_POSITION: 1.5,
+  DEFAULT_OVERLAPPING_PADDING: 0.55,
 };

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

@@ -217,6 +217,12 @@ const getEpocFromDateString = (dateISO) => parseInt(new Date(dateISO).getTime(),
  * @returns {object typeof Date} - Date object based on epoc
  */
 const getDateFromEpoc = (epocDate) => new Date(epocDate);
+/**
+ * Enum for tick label rotations.
+ * @readonly
+ * @enum {number}
+ */
+const validTickLabelRotations = new Set([0, -45]);
 
 /**
  * @enum {Function}
@@ -242,4 +248,5 @@ export default {
   notEmpty,
   parseDateTime,
   sanitize,
+  validTickLabelRotations,
 };

packages/carbon-graphs/tests/unit/controls/Graph/Graph-spec.js

@@ -361,15 +361,13 @@ describe('Graph', () => {
       expect(graph.config.showVGrid).toEqual(true);
       expect(graph.config.dimension).toEqual({});
       expect(graph.config.axis.x.type).toEqual(AXIS_TYPE.DEFAULT);
-      expect(graph.config.axis.x.ticks).toEqual({});
+      expect(graph.config.axis.x.ticks).toEqual({ tickLabelsRotation: 0 });
       expect(graph.config.axis.x.rangeRounding).toEqual(true);
       expect(graph.config.axis.y.ticks).toEqual({});
       expect(graph.config.axis.y.rangeRounding).toEqual(true);
       expect(graph.config.axis.x.show).toEqual(true);
       expect(graph.config.axis.y.show).toEqual(true);
-      expect(graph.config.axis.x.orientation).toEqual(
-        AXES_ORIENTATION.X.BOTTOM,
-      );
+      expect(graph.config.axis.x.orientation).toEqual(AXES_ORIENTATION.X.BOTTOM);
       expect(graph.config.axisPadding.y).toEqual(true);
       expect(graph.config.axisInfoRowLabelHeight).toEqual(0);
     });
@@ -454,7 +452,7 @@ describe('Graph', () => {
       expect(graph.config.dimension).toEqual({});
       expect(graph.config.axis.x.type).toEqual(AXIS_TYPE.TIME_SERIES);
       expect(graph.config.axis.x.rangeRounding).toEqual(true);
-      expect(graph.config.axis.x.ticks).toEqual({});
+      expect(graph.config.axis.x.ticks).toEqual({ tickLabelsRotation: 0 });
       expect(graph.config.axis.y.ticks).toEqual({});
       expect(graph.config.axis.y.rangeRounding).toEqual(true);
       expect(graph.config.axis.x.show).toEqual(true);
@@ -857,7 +855,7 @@ describe('Graph', () => {
       expect(graph.config.showVGrid).toEqual(true);
       expect(graph.config.dimension).toEqual({});
       expect(graph.config.axis.x.type).toEqual(AXIS_TYPE.DEFAULT);
-      expect(graph.config.axis.x.ticks).toEqual({});
+      expect(graph.config.axis.x.ticks).toEqual({ tickLabelsRotation: 0 });
       expect(graph.config.axis.y.ticks).toEqual({});
       expect(graph.config.axis.x.show).toEqual(true);
       expect(graph.config.axis.y.show).toEqual(true);

packages/carbon-graphs/tests/unit/controls/Graph/GraphAxes-spec.js

@@ -2931,6 +2931,54 @@ describe('Graph - Axes', () => {
       });
     });
   });
+  describe('Tick Labels Rotation', () => {
+    it('tickLabelsRotation values will be 0', () => {
+      const localeAxisObj = utils.deepClone(axisTimeSeries);
+      localeAxisObj.x = {
+        type: 'timeseries',
+        label: 'Some X Label',
+        lowerLimit: new Date(2017, 0).toISOString(),
+        upperLimit: new Date(2017, 6).toISOString(),
+      };
+      localeAxisObj.x.ticks = {
+        tickLabelsRotation: 0,
+      };
+      graph = new Graph(getAxes(localeAxisObj));
+      expect(graph.config.axis.x.ticks.tickLabelsRotation).toBe(0);
+    });
+    it('tickLabelsRotation values will be -45', () => {
+      const localeAxisObj = utils.deepClone(axisTimeSeries);
+      localeAxisObj.x = {
+        type: 'timeseries',
+        label: 'Some X Label',
+        lowerLimit: new Date(2017, 0).toISOString(),
+        upperLimit: new Date(2017, 6).toISOString(),
+      };
+      localeAxisObj.x.ticks = {
+        tickLabelsRotation: -45,
+      };
+      graph = new Graph(getAxes(localeAxisObj));
+      expect(graph.config.axis.x.ticks.tickLabelsRotation).toBe(-45);
+    });
+    it('uses the default value of zero of tickLabelsRotation it is invalid', () => {
+      const localeAxisObj = utils.deepClone(axisTimeSeries);
+      localeAxisObj.x.ticks = {
+        tickLabelsRotation: 23,
+      };
+      graph = new Graph(getAxes(localeAxisObj));
+
+      expect(graph.config.axis.x.ticks.tickLabelsRotation).toBe(0);
+    });
+    it('uses the default value of zero if tickLabelsRotation is undefind', () => {
+      const localeAxisObj = utils.deepClone(axisTimeSeries);
+      localeAxisObj.x.ticks = {
+        // tickLabelsRotation is undefind
+      };
+      graph = new Graph(getAxes(localeAxisObj));
+
+      expect(graph.config.axis.x.ticks.tickLabelsRotation).toBe(0);
+    });
+  });
   describe('when graph is destroyed', () => {
     it('should remove div element for the popup tooltip', () => {
       if (graph !== null) {

packages/terra-graphs-docs/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added examples for the Xaxis Overlapping tick values.
+
 ## 1.6.0 - (September 25, 2023)
 
 * Changed

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,
+  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(),
+        ],
+        tickLabelsRotation: -45,
+        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.en_US,
+});
+
+export default getLineTimeseriesConfig;

packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Documentation/Axes.3.graph.mdx

@@ -34,6 +34,7 @@ axis: {
         suppressingTrailingZeros: <bool>,
         ticks: <Ticks object>,
         type: <string>
+        rotateAngle: <integer>,
     },
     y: {
         lowerLimit: <number> or <Date>,
@@ -80,7 +81,8 @@ axis: {
 | show                  | boolean        | `true`                     | no       | Toggle for showing the axis.                                                                                                                                                                                                                                          |
 | suppressTrailingZeros | boolean        | `false`                    | no       | Toggle to suppress tick values's trailing zeros when default d3 tick formatting is used. For X axis, this property works only when X axis type is set to AXIS_TYPE.DEFAULT. Specifying `~` in the tick format takes precedence over `suppressTrailingZeros` property. |
 | ticks                 | object         | `null`                     | no       | See [Ticks](./Ticks).                                                                                                                                                                                                                                                 |
-| type                  | string         | `AXIS_TYPE.DEFAULT`        | no       | See [type](#type). Normal number value or time-based. Only for x-axis.                                                                                                                                                                                                |
+| type                  | string         | `AXIS_TYPE.DEFAULT`        | no       | See [type](#type). Normal number value or time-based. Only for x-axis.                                                                                                                                                                                                |    
+| tickLabelsRotation    | integer        | -                          | no       | Sets the rotation of the x-axis tick labels to `0º` or `-45º`. Accepted values: 0 or -45. Only for x-axis.                                                                                                                                                            |
 
 - ### `allowCalibration`
     Set calibration for the axis. 

packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Examples/Axes.1/XAxisTickLabelOrientation.8.graph.mdx

@@ -0,0 +1,31 @@
+import LineGraph from '../../../example/Graphs-Carbon/General/Axes/XAxisTickLabelOrientation?dev-site-example';
+import GraphConfig from '@cerner/terra-graphs-docs/lib/example-datasets/graphConfigObjects/General/generalDefaultXAxisOverlapping.js?dev-site-codeblock';
+require('details-polyfill');
+
+# X-Axis Tick Label orientation
+
+This is a simple timeseries line graph with x-axis ticks label orientation `tickLabelsRotation = -45`. Tick label rotation is used to prevent labels from overlapping in a narrow viewport or due to long tick labels.
+
+## Getting Started
+
+- Install with [npmjs](https://www.npmjs.com):
+  - `npm i @cerner/carbon-graphs --save-dev`
+
+## Usage
+```js
+import Carbon from '@cerner/carbon-graphs/dist/js/carbon-graphs.js';
+import '@cerner/carbon-graphs/dist/css/carbon-graphs.css';
+```
+
+## Example
+<LineGraph />
+
+<details>
+<summary style={{fontSize: 24 }}>
+<b>Data</b>
+</summary>
+
+### Graph Config object
+<GraphConfig />
+
+</details>

packages/terra-graphs-docs/src/terra-dev-site/graph/example/Graphs-Carbon/General/Axes/XAxisTickLabelOrientation.jsx

@@ -0,0 +1,23 @@
+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 ExampleGraphContainer from '@cerner/terra-graphs-docs/lib/terra-dev-site/ExampleGraphContainer/ExampleGraphContainer';
+import getGraphConfig from '@cerner/terra-graphs-docs/lib/example-datasets/graphConfigObjects/General/generalDefaultXAxisOverlapping';
+
+/*
+Please refer to the documentation below to see the graphConfig and data objects
+*/
+
+const graphConfig = utils.deepClone(getGraphConfig('#XAxisTickLabelOrientation'));
+
+const XAxisTickLabelOrientationGeneralExample = () => {
+  React.useEffect(() => {
+    Carbon.api.graph(graphConfig);
+  }, []);
+  return (
+    <ExampleGraphContainer id="XAxisTickLabelOrientation" />
+  );
+};
+
+export default XAxisTickLabelOrientationGeneralExample;

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

@@ -0,0 +1,19 @@
+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 exampleData from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/General/datasetTimeseries1';
+
+const graphConfig = utils.deepClone(getGraphConfig('#xAxisTicksVlauesOverlapping'));
+const dataset = [utils.deepClone(exampleData)];
+
+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} />
+    ;
+  </>
+);