diff --git a/packages/carbon-graphs/CHANGELOG.md b/packages/carbon-graphs/CHANGELOG.md index beba4c348..089c25bc1 100644 --- a/packages/carbon-graphs/CHANGELOG.md +++ b/packages/carbon-graphs/CHANGELOG.md @@ -1,6 +1,8 @@ # ChangeLog ## Unreleased +* Fixed + * Fixed tick values overlapping on X-axis by rotating 15,30,45. ## 2.23.3 - (September 25, 2023) diff --git a/packages/carbon-graphs/src/js/helpers/axis.js b/packages/carbon-graphs/src/js/helpers/axis.js index 82afb248e..35b09a241 100644 --- a/packages/carbon-graphs/src/js/helpers/axis.js +++ b/packages/carbon-graphs/src/js/helpers/axis.js @@ -881,6 +881,8 @@ const getY2AxisYPosition = (config) => calculateVerticalPadding(config); const createAxes = (axis, scale, config, canvasSVG) => { getAxesScale(axis, scale, config); prepareHAxis(scale, axis, config, prepareHorizontalAxis); + // eslint-disable-next-line no-use-before-define + const rotateAngle = config.rotateAngle ? calculateRotateAngleBasedOnWidth(config) : undefined; canvasSVG .append('g') .classed(styles.axis, true) @@ -893,7 +895,11 @@ const createAxes = (axis, scale, config, canvasSVG) => { )})`, ) .call(axis.x) - .call(resetD3FontSize); + .call(resetD3FontSize) + .attr('id', 'x') + .selectAll('text') + .style('text-anchor', config.rotateAngle ? 'end' : 'middle') + .attr('transform', () => `rotate(${rotateAngle})`); canvasSVG .append('g') .classed(styles.axis, true) @@ -922,7 +928,18 @@ const createAxes = (axis, scale, config, canvasSVG) => { .call(resetD3FontSize); } }; - +const calculateRotateAngleBasedOnWidth = (config) => { + const containerWidth = config.canvasWidth; + // Define thresholds for rotation based on container width + const thresholdSmall = 400; + const thresholdMedium = 800; + if (containerWidth < thresholdSmall) { + return -45; // rotate by -45 degrees for small screens + } if (containerWidth < thresholdMedium) { + return -30; // rotate by -30 degrees for medium screens + } + return -15; // rotate by -15 degrees for larger screens +}; /** * X Axis's position vertically relative to the canvas * diff --git a/packages/terra-graphs-docs/CHANGELOG.md b/packages/terra-graphs-docs/CHANGELOG.md index 1408c34a7..1bf7215a7 100644 --- a/packages/terra-graphs-docs/CHANGELOG.md +++ b/packages/terra-graphs-docs/CHANGELOG.md @@ -1,6 +1,9 @@ # ChangeLog ## 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/example-datasets/graphConfigObjects/General/generalDefaultXAxisOverlapping.js b/packages/terra-graphs-docs/src/example-datasets/graphConfigObjects/General/generalDefaultXAxisOverlapping.js new file mode 100644 index 000000000..a5ecf43d2 --- /dev/null +++ b/packages/terra-graphs-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, + rotateAngle: true, + 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(), + ], + 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.de_DE, +}); + +export default getLineTimeseriesConfig; diff --git a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Documentation/Graph.1.graph.mdx b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Documentation/Graph.1.graph.mdx index 8227f9c24..8ccd6aaed 100644 --- a/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Documentation/Graph.1.graph.mdx +++ b/packages/terra-graphs-docs/src/terra-dev-site/graph/CoreConfiguration.b/Documentation/Graph.1.graph.mdx @@ -28,6 +28,7 @@ It is required for the following graphs: const graphConfig = { axis: , bindTo: , + rotateAngle: false, allowCalibration: , bindLegendTo: , clickPassThrough: { @@ -70,6 +71,7 @@ const graphConfig = { |------------------------|----------|------------------------------------------------|----------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | axis | object | - | yes | See [Axis](./Axes). | | bindTo | string | - | yes | DOM ID to bind the graph container to. | +| rotateAngle | boolean | `false` | no | To rotate tickvalues anticlockwise `15`,`30`,`45` degrees with respect to the width of the x-axis. | | allowCalibration | boolean | `true` | no | Toggle to allow calibration to adjust the y axis. | | bindLegendTo | string | `null` | no | If DOM id provided, binds legend into that container (Example: `"#legendContainer"`). | | clickPassThrough | object | `{}` | no | See [clickPassThrough](#clickpassthrough). | diff --git a/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/Axes/XAxisTickValuesOverlapping.test.jsx b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/Axes/XAxisTickValuesOverlapping.test.jsx new file mode 100644 index 000000000..d683c46d7 --- /dev/null +++ b/packages/terra-graphs-docs/src/terra-dev-site/test/graphs/General/Axes/XAxisTickValuesOverlapping.test.jsx @@ -0,0 +1,31 @@ +import React from 'react'; +import utils from '@cerner/carbon-graphs/lib/js/helpers/utils'; +import LineGraph from '@cerner/terra-graphs-docs/lib/terra-graphs-src/components/Line/LineGraph'; +import '@cerner/terra-graphs-docs/lib/terra-dev-site/ExampleGraphContainer/ExampleGraphContainer.module.scss'; +import getGraphConfig from '@cerner/terra-graphs-docs/lib/example-datasets/graphConfigObjects/General/generalDefaultXAxisOverlapping'; +import exampleData1 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/dataset1'; +import exampleData2 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/dataset2'; +import exampleData3 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/dataset3'; +import exampleData4 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/dataset4'; +import exampleData5 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/dataset5'; +import exampleData6 from '@cerner/terra-graphs-docs/lib/example-datasets/dataObjects/Line/dataset6'; + +const graphConfig = utils.deepClone(getGraphConfig('#xAxisTicksVlauesOverlapping')); +const dataset = [ + utils.deepClone(exampleData1), + utils.deepClone(exampleData2), + utils.deepClone(exampleData3), + utils.deepClone(exampleData4), + utils.deepClone(exampleData5), + utils.deepClone(exampleData6), +]; + +const timeoutArray = [0, 750, 750 * 2, 750 * 3, 750 * 4, 750 * 5, 750 * 6]; + +export default () => ( + <> +
+ + ; + +);