Skip to content
This repository has been archived by the owner on May 24, 2024. It is now read-only.

Commit

Permalink
default zero rotation
Browse files Browse the repository at this point in the history
  • Loading branch information
UM100080 authored and UM100080 committed Nov 17, 2023
1 parent 79d79eb commit f0183ce
Show file tree
Hide file tree
Showing 6 changed files with 119 additions and 23 deletions.
11 changes: 5 additions & 6 deletions packages/carbon-graphs/src/js/controls/Graph/Graph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
22 changes: 13 additions & 9 deletions packages/carbon-graphs/src/js/helpers/axis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -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})`);
}
Expand Down
10 changes: 4 additions & 6 deletions packages/carbon-graphs/tests/unit/controls/Graph/Graph-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down
96 changes: 96 additions & 0 deletions packages/carbon-graphs/tests/unit/controls/Graph/GraphAxes-spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
1 change: 0 additions & 1 deletion packages/terra-graphs-docs/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down
2 changes: 1 addition & 1 deletion ...ocs/src/terra-dev-site/graph/CoreConfiguration.b/Documentation/Axes.3.graph.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down

0 comments on commit f0183ce

Please sign in to comment.