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

Commit

Permalink
prop type changed as integer
Browse files Browse the repository at this point in the history
  • Loading branch information
UM100080 authored and UM100080 committed Nov 7, 2023
1 parent ade981b commit 3a9d13e
Show file tree
Hide file tree
Showing 5 changed files with 12 additions and 21 deletions.
2 changes: 1 addition & 1 deletion packages/carbon-graphs/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

## Unreleased
* Fixed
* Fixed tick values overlapping on X-axis by rotating 15,30,45.
* Added prop `rotateAngle` to allow rotation of x-axis tick labels to prevent overlap.

## 2.23.3 - (September 25, 2023)

Expand Down
23 changes: 7 additions & 16 deletions packages/carbon-graphs/src/js/helpers/axis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -881,8 +881,6 @@ 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)
Expand All @@ -898,8 +896,13 @@ const createAxes = (axis, scale, config, canvasSVG) => {
.call(resetD3FontSize)
.attr('id', 'x')
.selectAll('text')
.style('text-anchor', config.rotateAngle ? 'end' : 'middle')
.attr('transform', () => `rotate(${rotateAngle})`);
.style('text-anchor', () => {
if (config.axis.x.ticks.rotateAngle !== undefined) {
return config.axis.x.ticks.rotateAngle >= 0 ? 'start' : 'end';
}
return 'middle';
})
.attr('transform', () => `rotate(${config.axis.x.ticks.rotateAngle})`);
canvasSVG
.append('g')
.classed(styles.axis, true)
Expand Down Expand Up @@ -928,18 +931,6 @@ 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
*
Expand Down
2 changes: 1 addition & 1 deletion ...hs-docs/src/example-datasets/graphConfigObjects/General/generalDefaultXAxisOverlapping.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ 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,
Expand All @@ -23,6 +22,7 @@ const getLineTimeseriesConfig = (id) => ({
new Date(2016, 0, 10).toISOString(),
new Date(2016, 0, 11).toISOString(),
],
rotateAngle: -45,
format: '%Y, %X',
},
},
Expand Down
4 changes: 3 additions & 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 @@ -34,6 +34,7 @@ axis: {
suppressingTrailingZeros: <bool>,
ticks: <Ticks object>,
type: <string>
rotateAngle: <integer>,
},
y: {
lowerLimit: <number> or <Date>,
Expand Down Expand Up @@ -80,7 +81,8 @@ axis: {
| show | boolean | `true` | no | Toggle for showing the 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. |
| type | string | `AXIS_TYPE.DEFAULT` | no | See [type](#type). Normal number value or time-based. Only for x-axis. |
| rotateAngle | integer | - | no | allows consumer to add a rotateAngle to x-axis to avoid the overlapping (angle will be in between `+90` to `-90` Positive values move in clock wise direction & negative values moves in anticlock wise direction).Only for x-axis. |

- ### `allowCalibration`
Set calibration for the axis.
Expand Down
2 changes: 0 additions & 2 deletions ...cs/src/terra-dev-site/graph/CoreConfiguration.b/Documentation/Graph.1.graph.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ It is required for the following graphs:
const graphConfig = {
axis: <Axis object>,
bindTo: <string>,
rotateAngle: false,
allowCalibration: <bool>,
bindLegendTo: <string>,
clickPassThrough: {
Expand Down Expand Up @@ -71,7 +70,6 @@ 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). |
Expand Down

0 comments on commit 3a9d13e

Please sign in to comment.