From 79d79eb7339098d125d8f6d52e0ed649233c187a Mon Sep 17 00:00:00 2001 From: UM100080 Date: Wed, 15 Nov 2023 15:37:00 +0530 Subject: [PATCH] updated comments --- packages/carbon-graphs/CHANGELOG.md | 5 +-- .../src/js/controls/Graph/Graph.js | 7 ++++ packages/carbon-graphs/src/js/helpers/axis.js | 33 +++++++++---------- .../carbon-graphs/src/js/helpers/constants.js | 1 + .../carbon-graphs/src/js/helpers/utils.js | 7 ++-- .../General/generalDefaultXAxisOverlapping.js | 4 +-- .../Documentation/Axes.3.graph.mdx | 2 +- 7 files changed, 31 insertions(+), 28 deletions(-) diff --git a/packages/carbon-graphs/CHANGELOG.md b/packages/carbon-graphs/CHANGELOG.md index 698ec9514..b9ee8d082 100644 --- a/packages/carbon-graphs/CHANGELOG.md +++ b/packages/carbon-graphs/CHANGELOG.md @@ -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) diff --git a/packages/carbon-graphs/src/js/controls/Graph/Graph.js b/packages/carbon-graphs/src/js/controls/Graph/Graph.js index e1b19bd44..554a4854c 100644 --- a/packages/carbon-graphs/src/js/controls/Graph/Graph.js +++ b/packages/carbon-graphs/src/js/controls/Graph/Graph.js @@ -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); diff --git a/packages/carbon-graphs/src/js/helpers/axis.js b/packages/carbon-graphs/src/js/helpers/axis.js index 2385f70a5..23f40410a 100644 --- a/packages/carbon-graphs/src/js/helpers/axis.js +++ b/packages/carbon-graphs/src/js/helpers/axis.js @@ -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) @@ -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(); @@ -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); @@ -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; diff --git a/packages/carbon-graphs/src/js/helpers/constants.js b/packages/carbon-graphs/src/js/helpers/constants.js index 15e96ed61..88676f54a 100644 --- 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: 5, }; diff --git a/packages/carbon-graphs/src/js/helpers/utils.js b/packages/carbon-graphs/src/js/helpers/utils.js index 1dfaeb11f..66e81d094 100644 --- a/packages/carbon-graphs/src/js/helpers/utils.js +++ b/packages/carbon-graphs/src/js/helpers/utils.js @@ -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} @@ -251,5 +248,5 @@ export default { notEmpty, parseDateTime, sanitize, - TickLabelRotations, + validTickLabelRotations, }; diff --git a/packages/terra-graphs-docs/src/example-datasets/graphConfigObjects/General/generalDefaultXAxisOverlapping.js b/packages/terra-graphs-docs/src/example-datasets/graphConfigObjects/General/generalDefaultXAxisOverlapping.js index 3d612005b..a7d041569 100644 --- a/packages/terra-graphs-docs/src/example-datasets/graphConfigObjects/General/generalDefaultXAxisOverlapping.js +++ b/packages/terra-graphs-docs/src/example-datasets/graphConfigObjects/General/generalDefaultXAxisOverlapping.js @@ -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', }, }, @@ -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; 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 77fd4667e..d09d4c08f 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. | -| 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.