diff --git a/packages/carbon-graphs/src/js/controls/Graph/Graph.js b/packages/carbon-graphs/src/js/controls/Graph/Graph.js index 554a4854c..a68c3957c 100644 --- a/packages/carbon-graphs/src/js/controls/Graph/Graph.js +++ b/packages/carbon-graphs/src/js/controls/Graph/Graph.js @@ -120,12 +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); } - if ( - utils.isDefined(control.config.axis.x.ticks.tickLabelsRotation) - && utils.validTickLabelRotations.has(control.config.axis.x.ticks.tickLabelsRotation) - ) { - const rotation = control.config.axis.x.ticks.tickLabelsRotation; - console.warn(`tickLabelsRotation Using ${rotation} rotation for x-axis labels to avoid overlapping.`); + if (!utils.isDefined(control.config.axis.x.ticks.tickLabelsRotation)) { + control.config.axis.x.ticks.tickLabelsRotation = 0; + } else if (!utils.validTickLabelRotations.has(control.config.axis.x.ticks.tickLabelsRotation)) { + 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`); + control.config.axis.x.ticks.tickLabelsRotation = 0; } updateAxesDomain(control.config); diff --git a/packages/carbon-graphs/src/js/helpers/axis.js b/packages/carbon-graphs/src/js/helpers/axis.js index 23f40410a..b888b77d3 100644 --- a/packages/carbon-graphs/src/js/helpers/axis.js +++ b/packages/carbon-graphs/src/js/helpers/axis.js @@ -897,17 +897,21 @@ const createAxes = (axis, scale, config, canvasSVG) => { .attr('id', 'x') .selectAll('text') .style('text-anchor', () => { - if ( - utils.isDefined(config.axis.x.ticks.tickLabelsRotation) - && utils.validTickLabelRotations.has(config.axis.x.ticks.tickLabelsRotation) - ) { - const rotation = config.axis.x.ticks.tickLabelsRotation; - return rotation === -45 ? 'end' : 'middle'; + 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 === -45) { + return 'end'; + } if (!utils.validTickLabelRotations.has(rotation)) { + return 'middle'; } - console.warn('Warning: Invalid tickLabelsRotation angle. Valid values are (0 or -45) for x-axis labels.'); return 'middle'; }) - .attr('transform', () => `rotate(${config.axis.x.ticks.tickLabelsRotation})`); + .attr('transform', () => `rotate(${config.axis.x.ticks.tickLabelsRotation === -45 ? -45 : 0})`); canvasSVG .append('g') .classed(styles.axis, true) @@ -1230,7 +1234,7 @@ const getAxisLabelHeight = (label, tickLabelsRotation) => { const svg = dummy.append('svg'); const grouper = svg.append('g'); - if (tickLabelsRotation === -45) { + if (tickLabelsRotation !== 0) { // Adding extra padding for rotated labels grouper.attr('transform', `rotate(${tickLabelsRotation})`); } diff --git a/packages/carbon-graphs/tests/unit/controls/Graph/Graph-spec.js b/packages/carbon-graphs/tests/unit/controls/Graph/Graph-spec.js index ce9a7f0e7..70b8cd40c 100644 --- 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 index d7908920c..239b8bcaf 100644 --- 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,102 @@ describe('Graph - Axes', () => { }); }); }); + describe('Tick Labels Rotation', () => { + fit('tickLabelsRotation values will be 0 or -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 = { + format: '%b %Y', + show: true, + lowerStepTickValues: [ + new Date(2017, 1).toISOString(), + new Date(2017, 5).toISOString(), + new Date(2017, 9).toISOString(), + ], + midpointTickValues: [ + new Date(2017, 3).toISOString(), + new Date(2017, 7).toISOString(), + new Date(2017, 11).toISOString(), + ], + upperStepTickValues: [ + new Date(2016, 11).toISOString(), + new Date(2018, 1).toISOString(), + ], + tickLabelsRotation: 0, + }; + graph = new Graph(getAxes(localeAxisObj)); + expect(localeAxisObj.x.ticks.tickLabelsRotation).toBe(0); + }); + fit('tickLabelsRotation values will be 0 or -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 = { + format: '%b %Y', + show: true, + lowerStepTickValues: [ + new Date(2017, 1).toISOString(), + new Date(2017, 5).toISOString(), + new Date(2017, 9).toISOString(), + ], + midpointTickValues: [ + new Date(2017, 3).toISOString(), + new Date(2017, 7).toISOString(), + new Date(2017, 11).toISOString(), + ], + upperStepTickValues: [ + new Date(2016, 11).toISOString(), + new Date(2018, 1).toISOString(), + ], + tickLabelsRotation: -45, + }; + graph = new Graph(getAxes(localeAxisObj)); + expect(localeAxisObj.x.ticks.tickLabelsRotation).toBe(-45); + }); + fit('tickLabelsRotation default zero', () => { + 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 = { + format: '%b %Y', + show: true, + lowerStepTickValues: [ + new Date(2017, 1).toISOString(), + new Date(2017, 5).toISOString(), + new Date(2017, 9).toISOString(), + ], + midpointTickValues: [ + new Date(2017, 3).toISOString(), + new Date(2017, 7).toISOString(), + new Date(2017, 11).toISOString(), + ], + upperStepTickValues: [ + new Date(2016, 11).toISOString(), + new Date(2018, 1).toISOString(), + ], + tickLabelsRotation: 23, + }; + // Spy on console.warn + spyOn(console, 'warn'); + // Call the code that logs the warning + graph = new Graph(getAxes(localeAxisObj)); + + expect(console.warn).toHaveBeenCalledWith('23 is an invalid value for tickLabelsRotation. Valid values are: 0, -45. Resorting to the default value of 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 index 1bf7215a7..e71f1da6b 100644 --- a/packages/terra-graphs-docs/CHANGELOG.md +++ b/packages/terra-graphs-docs/CHANGELOG.md @@ -2,7 +2,6 @@ ## 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) diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Documentation/Axes.3.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Documentation/Axes.3.graph.mdx index d09d4c08f..5e4d3788b 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Documentation/Axes.3.graph.mdx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Documentation/Axes.3.graph.mdx @@ -82,7 +82,7 @@ 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. | -| tickLabelsRotation | integer | - | no | Sets the rotation of the tick labels to `0º` or `-45º`. 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.