Merge branch 'main' into upgrade-terra-functional-testing

cerner · Nov 29, 2023 · 1dd3264 · 1dd3264
2 parents 94e13b0 + 92346cd
commit 1dd3264
Show file tree

Hide file tree

Showing 16 changed files with 260 additions and 16 deletions.
diff --git a/package.json b/package.json
@@ -66,7 +66,7 @@
     "eslint-config-prettier": "^6.11.0",
     "eslint-config-standard": "^14.1.1",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-jsdoc": "^24.0.6",
+    "eslint-plugin-jsdoc": "25",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-standard": "^4.0.1",

diff --git a/packages/carbon-graphs/CHANGELOG.md b/packages/carbon-graphs/CHANGELOG.md
@@ -2,6 +2,21 @@
 
 ## Unreleased
 
+## 2.24.0 - (November 27, 2023)
+
+* Added
+  * Added prop `tickLabelsRotation` to allow rotation of x-axis tick labels to prevent overlap.
+
+## 2.23.3 - (September 25, 2023)
+
+* Fixed
+  * Unlocked `d3-transition` and removed `d3-dispatch` dependency to fix transition reference error.
+
+## 2.23.2 - (September 20, 2023)
+
+* Fixed
+  * Fixed transition reference error by adding the missing `d3-dispatch` dependency.
+
 ## 2.23.1 - (August 21, 2023)
 
 * Fixed

diff --git a/packages/carbon-graphs/package.json b/packages/carbon-graphs/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@cerner/carbon-graphs",
   "main": "lib/Graphs.js",
-  "version": "2.23.1",
+  "version": "2.24.0",
   "description": "A graphing library built using d3 based on Cerner design standards",
   "repository": {
     "type": "git",
@@ -65,7 +65,7 @@
     "d3-time": "1",
     "d3-time-format": "2",
     "d3-timer": "1",
-    "d3-transition": "1.3.0"
+    "d3-transition": "1"
   },
   "devDependencies": {
     "@cerner/carbon-site-helpers": "^1.11.3",

diff --git a/packages/carbon-graphs/src/js/controls/Graph/Graph.js b/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);

diff --git a/packages/carbon-graphs/src/js/helpers/axis.js b/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;

diff --git a/packages/carbon-graphs/src/js/helpers/constants.js b/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,
 };
diff --git a/packages/carbon-graphs/src/js/helpers/utils.js b/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,
 };
diff --git a/packages/carbon-graphs/tests/unit/controls/Graph/Graph-spec.js b/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);

diff --git a/packages/carbon-graphs/tests/unit/controls/Graph/GraphAxes-spec.js b/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) {

diff --git a/packages/terra-graphs-docs/CHANGELOG.md b/packages/terra-graphs-docs/CHANGELOG.md
@@ -2,6 +2,21 @@
 
 ## Unreleased
 
+## 1.7.0 - (November 27, 2023)
+
+* Added
+  * Added examples for the Xaxis Overlapping tick values.
+
+## 1.6.0 - (September 25, 2023)
+
+* Changed
+  * Minor dependency version bump
+
+## 1.5.0 - (September 20, 2023)
+
+* Changed
+  * Minor dependency version bump
+
 ## 1.4.1 - (August 21, 2023)
 
 * Added

diff --git a/packages/terra-graphs-docs/package.json b/packages/terra-graphs-docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cerner/terra-graphs-docs",
-  "version": "1.4.1",
+  "version": "1.7.0",
   "description": "A react based dev-site that has documentation and example graphs",
   "repository": {
     "type": "git",
@@ -28,7 +28,7 @@
   },
   "homepage": "https://github.com/cerner/terra-graphs#readme",
   "dependencies": {
-    "@cerner/carbon-graphs": "^2.23.1",
+    "@cerner/carbon-graphs": "^2.24.0",
     "classnames": "^2.2.5",
     "d3-selection": "1",
     "details-polyfill": "^1.2.0",

diff --git a/...hs-docs/src/example-datasets/graphConfigObjects/General/generalDefaultXAxisOverlapping.js b/...hs-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;
diff --git a/...ocs/src/terra-dev-site/graph/CoreConfiguration.b/Documentation/Axes.3.graph.mdx b/...ocs/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. 

diff --git a/...graph/CoreConfiguration.b/Examples/Axes.1/XAxisTickLabelOrientation.8.graph.mdx b/...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>