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

Commit

Permalink
updated comments
Browse files Browse the repository at this point in the history
  • Loading branch information
UM100080 authored and UM100080 committed Nov 15, 2023
1 parent 756d613 commit 79d79eb
Show file tree
Hide file tree
Showing 7 changed files with 31 additions and 28 deletions.
5 changes: 3 additions & 2 deletions packages/carbon-graphs/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
# ChangeLog

## Unreleased
* Fixed
* Added prop `rotateAngle` to allow rotation of x-axis tick labels to prevent overlap.

* Added
* Added prop `tickLabelsRotation` to allow rotation of x-axis tick labels to prevent overlap.

## 2.23.3 - (September 25, 2023)

Expand Down
7 changes: 7 additions & 0 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,6 +120,13 @@ 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.`);
}

updateAxesDomain(control.config);
updateXAxisDomain(control.config);
Expand Down
33 changes: 15 additions & 18 deletions packages/carbon-graphs/src/js/helpers/axis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -897,19 +897,17 @@ const createAxes = (axis, scale, config, canvasSVG) => {
.attr('id', 'x')
.selectAll('text')
.style('text-anchor', () => {
const validRotations = Object.values(utils.TickLabelRotations);
if (
utils.isDefined(config.axis.x.ticks.TickLabelRotations)
&& validRotations.includes(config.axis.x.ticks.TickLabelRotations)
utils.isDefined(config.axis.x.ticks.tickLabelsRotation)
&& utils.validTickLabelRotations.has(config.axis.x.ticks.tickLabelsRotation)
) {
const rotation = config.axis.x.ticks.TickLabelRotations;
console.warn(`tickLabelsRotation Using ${rotation} rotation for x-axis labels to avoid overlapping.`);
return rotation === utils.TickLabelRotations.NEGATIVE_45 ? 'end' : 'middle';
const rotation = config.axis.x.ticks.tickLabelsRotation;
return rotation === -45 ? 'end' : 'middle';
}
console.warn('Warning: Invalid tickLabelsRotation angle. Using default rotation (0 or -45) for x-axis labels.');
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.TickLabelRotations})`);
.attr('transform', () => `rotate(${config.axis.x.ticks.tickLabelsRotation})`);
canvasSVG
.append('g')
.classed(styles.axis, true)
Expand Down Expand Up @@ -1137,13 +1135,12 @@ 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.TickLabelRotations === -45) {
if (config.axis.x.ticks && config.axis.x.ticks.tickLabelsRotation === -45) {
// Add extra padding for rotated tick labels
const extraPadding = 5;
group.selectAll('.tick text').attr('transform', `rotate(${config.axis.x.ticks.TickLabelRotations})`);
const rotatedHeight = group.node().getBoundingClientRect().height;
group.selectAll('.tick text').attr('transform', `rotate(${config.axis.x.ticks.tickLabelsRotation})`);
const rotatedTickLabelsHeight = group.node().getBoundingClientRect().height;
dummy.remove();
return rotatedHeight + extraPadding;
return rotatedTickLabelsHeight + constants.DEFAULT_OVERLAPPING_PADDING;
}
const { height } = group.node().getBoundingClientRect();
dummy.remove();
Expand Down Expand Up @@ -1228,14 +1225,14 @@ const getAxisLabelWidth = (label, axis, config) => {
* @param {string} label - Label text
* @returns {number} label height
*/
const getAxisLabelHeight = (label, TickLabelRotations) => {
const getAxisLabelHeight = (label, tickLabelsRotation) => {
const dummy = d3.select('body').append('div');
const svg = dummy.append('svg');
const grouper = svg.append('g');

if (TickLabelRotations && TickLabelRotations === -45) {
if (tickLabelsRotation === -45) {
// Adding extra padding for rotated labels
grouper.attr('transform', `rotate(${TickLabelRotations})`);
grouper.attr('transform', `rotate(${tickLabelsRotation})`);
}

buildAxisLabel(grouper, label);
Expand Down Expand Up @@ -1322,8 +1319,8 @@ const calculateAxesLabelSize = (config) => {
config.axisLabelWidths.y2 = 0;
if (config.showLabel) {
if (config.axis.x.label) {
const TickLabelRotations = config.axis.x.ticks && config.axis.x.ticks.TickLabelRotations;
config.axisLabelHeights.x = getAxisLabelHeight(config.axis.x.label, TickLabelRotations);
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;
Expand Down
1 change: 1 addition & 0 deletions packages/carbon-graphs/src/js/helpers/constants.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: 5,
};
7 changes: 2 additions & 5 deletions packages/carbon-graphs/src/js/helpers/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,10 +222,7 @@ const getDateFromEpoc = (epocDate) => new Date(epocDate);
* @readonly
* @enum {number}
*/
const TickLabelRotations = {
DEFAULT: 0,
NEGATIVE_45: -45,
};
const validTickLabelRotations = new Set([0, -45]);

/**
* @enum {Function}
Expand All @@ -251,5 +248,5 @@ export default {
notEmpty,
parseDateTime,
sanitize,
TickLabelRotations,
validTickLabelRotations,
};
4 changes: 2 additions & 2 deletions ...hs-docs/src/example-datasets/graphConfigObjects/General/generalDefaultXAxisOverlapping.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const getLineTimeseriesConfig = (id) => ({
new Date(2016, 0, 10).toISOString(),
new Date(2016, 0, 11).toISOString(),
],
TickLabelRotations: -45,
tickLabelsRotation: -45,
format: '%Y, %X',
},
},
Expand All @@ -43,7 +43,7 @@ const getLineTimeseriesConfig = (id) => ({
showShapes: true,
showVGrid: true,
showHGrid: true,
locale: Carbon.helpers.LOCALE.de_DE,
locale: Carbon.helpers.LOCALE.es_ES,
});

export default getLineTimeseriesConfig;
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. |
| TickLabelRotations | integer | - | no | Sets the rotation of the tick labels to `-45º`. Only for x-axis. |
| tickLabelsRotation | integer | - | no | Sets the rotation of the tick labels to `0º` or `-45º`. Only for x-axis. |

- ### `allowCalibration`
Set calibration for the axis.
Expand Down

0 comments on commit 79d79eb

Please sign in to comment.