archive-gh-me/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2025-12-08 20:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Shorten alignment settings for axes (#7886)

Browse Source 
* Rename crossAlignment to crossAlign
* Update alignment to align for cartesian axes
This commit is contained in:
Evert Timberg 2020-10-14 08:27:54 -04:00 committed by GitHub
parent c546c9583a
commit 1ca60808b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 47 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/docs/axes/cartesian/index.mdx
View File

@ -49,8 +49,8 @@ The following options are common to all cartesian axes but do not apply to other
| Name | Type | Default | Description
| ---- | ---- | ------- | -----------
| `alignment` | `string` | | `'center'` | The tick alignment along the axis. Can be `'start'`, `'center'`, or `'end'`.
| `crossAlignment` | `string` | | `'near'` | The tick alignment perpendicular to the axis. Can be `'near'`, `'center'`, or `'far'`. See [Tick Alignment](#tick-alignment)
| `align` | `string` | | `'center'` | The tick alignment along the axis. Can be `'start'`, `'center'`, or `'end'`.
| `crossAlign` | `string` | | `'near'` | The tick alignment perpendicular to the axis. Can be `'near'`, `'center'`, or `'far'`. See [Tick Alignment](#tick-alignment)
| `sampleSize` | `number` | `ticks.length` | The number of ticks to examine when deciding how many labels will fit. Setting a smaller value will be faster, but may be less accurate when there is large variability in label length.
| `autoSkip` | `boolean` | `true` | If true, automatically calculates how many labels can be shown and hides labels accordingly. Labels will be rotated up to `maxRotation` before skipping any. Turn `autoSkip` off to show all labels no matter what.
| `autoSkipPadding` | `number` | `0` | Padding between the ticks on the horizontal axis when `autoSkip` is enabled.
@ -62,7 +62,7 @@ The following options are common to all cartesian axes but do not apply to other
### Tick Alignment
The alignment of ticks is primarily controlled using two settings on the tick configuration object: `alignment` and `crossAlignment`. The `alignment` setting configures how labels align with the tick mark along the axis direction (i.e. horizontal for a horizontal axis and vertical for a vertical axis). The `crossAlignment` setting configures how labels align with the tick mark in the perpendicular direction (i.e. vertical for a horizontal axis and horizontal for a vertical axis). In the example below, the `crossAlignment` setting is used to left align the labels on the Y axis.
The alignment of ticks is primarily controlled using two settings on the tick configuration object: `align` and `crossAlign`. The `align` setting configures how labels align with the tick mark along the axis direction (i.e. horizontal for a horizontal axis and vertical for a vertical axis). The `crossAlign` setting configures how labels align with the tick mark in the perpendicular direction (i.e. vertical for a horizontal axis and horizontal for a vertical axis). In the example below, the `crossAlign` setting is used to left align the labels on the Y axis.
```jsx live
function exampleAlignment() {
@ -105,7 +105,7 @@ function exampleAlignment() {
},
y: {
ticks: {
crossAlignment: 'far',
crossAlign: 'far',
}
}
}
@ -117,7 +117,7 @@ function exampleAlignment() {
}
```
**Note:** the `crossAlignment` setting is not used the the tick rotation is not `0`, the axis position is `'center'` or the position is with respect to a data value.
**Note:** the `crossAlign` setting is not used the the tick rotation is not `0`, the axis position is `'center'` or the position is with respect to a data value.
### Axis ID

4
samples/scales/label-text-alignment.html
View File

@ -87,13 +87,13 @@
x: {
display: true,
ticks: {
alignment: xAlign,
align: xAlign,
}
},
y: {
display: true,
ticks: {
alignment: yAlign
align: yAlign
}
}
},

40
src/core/core.scale.js
View File

@ -62,8 +62,8 @@ defaults.set('scale', {
callback: Ticks.formatters.values,
minor: {},
major: {},
alignment: 'center',
crossAlignment: 'near',
align: 'center',
crossAlign: 'near',
}
});
@ -763,10 +763,10 @@ export default class Scale extends Element {
paddingRight = labelsBelowTicks ?
sinRotation * (lastLabelSize.height - lastLabelSize.offset) :
cosRotation * lastLabelSize.width + sinRotation * lastLabelSize.offset;
} else if (tickOpts.alignment === 'start') {
} else if (tickOpts.align === 'start') {
paddingLeft = 0;
paddingRight = lastLabelSize.width;
} else if (tickOpts.alignment === 'end') {
} else if (tickOpts.align === 'end') {
paddingLeft = firstLabelSize.width;
paddingRight = 0;
} else {
@ -791,10 +791,10 @@ export default class Scale extends Element {
let paddingTop = lastLabelSize.height / 2;
let paddingBottom = firstLabelSize.height / 2;
if (tickOpts.alignment === 'start') {
if (tickOpts.align === 'start') {
paddingTop = 0;
paddingBottom = firstLabelSize.height;
} else if (tickOpts.alignment === 'end') {
} else if (tickOpts.align === 'end') {
paddingTop = lastLabelSize.height;
paddingBottom = 0;
}
@ -1253,7 +1253,7 @@ export default class Scale extends Element {
const {position, ticks: optionTicks} = options;
const isHorizontal = me.isHorizontal();
const ticks = me.ticks;
const {alignment, crossAlignment, padding} = optionTicks;
const {align, crossAlign, padding} = optionTicks;
const tl = getTickMarkLength(options.gridLines);
const tickAndPadding = tl + padding;
const rotation = -toRadians(me.labelRotation);
@ -1296,9 +1296,9 @@ export default class Scale extends Element {
}
if (axis === 'y') {
if (alignment === 'start') {
if (align === 'start') {
textBaseline = 'top';
} else if (alignment === 'end') {
} else if (align === 'end') {
textBaseline = 'bottom';
}
}
@ -1317,20 +1317,20 @@ export default class Scale extends Element {
if (isHorizontal) {
x = pixel;
if (position === 'top') {
if (crossAlignment === 'near' || rotation !== 0) {
if (crossAlign === 'near' || rotation !== 0) {
textOffset = (Math.sin(rotation) * halfCount + 0.5) * lineHeight;
textOffset -= (rotation === 0 ? (lineCount - 0.5) : Math.cos(rotation) * halfCount) * lineHeight;
} else if (crossAlignment === 'center') {
} else if (crossAlign === 'center') {
textOffset = -1 * (labelSizes.highest.height / 2);
textOffset -= halfCount * lineHeight;
} else {
textOffset = (-1 * labelSizes.highest.height) + (0.5 * lineHeight);
}
} else if (position === 'bottom') {
if (crossAlignment === 'near' || rotation !== 0) {
if (crossAlign === 'near' || rotation !== 0) {
textOffset = Math.sin(rotation) * halfCount * lineHeight;
textOffset += (rotation === 0 ? 0.5 : Math.cos(rotation) * halfCount) * lineHeight;
} else if (crossAlignment === 'center') {
} else if (crossAlign === 'center') {
textOffset = labelSizes.highest.height / 2;
textOffset -= halfCount * lineHeight;
} else {
@ -1368,9 +1368,9 @@ export default class Scale extends Element {
let align = 'center';
if (ticks.alignment === 'start') {
if (ticks.align === 'start') {
align = 'left';
} else if (ticks.alignment === 'end') {
} else if (ticks.align === 'end') {
align = 'right';
}
@ -1380,7 +1380,7 @@ export default class Scale extends Element {
_getYAxisLabelAlignment(tl) {
const me = this;
const {position, ticks} = me.options;
const {crossAlignment, mirror, padding} = ticks;
const {crossAlign, mirror, padding} = ticks;
const labelSizes = me._getLabelSizes();
const tickAndPadding = tl + padding;
const widest = labelSizes.widest.width;
@ -1395,9 +1395,9 @@ export default class Scale extends Element {
} else {
x = me.right - tickAndPadding;
if (crossAlignment === 'near') {
if (crossAlign === 'near') {
textAlign = 'right';
} else if (crossAlignment === 'center') {
} else if (crossAlign === 'center') {
textAlign = 'center';
x -= (widest / 2);
} else {
@ -1412,9 +1412,9 @@ export default class Scale extends Element {
} else {
x = me.left + tickAndPadding;
if (crossAlignment === 'near') {
if (crossAlign === 'near') {
textAlign = 'left';
} else if (crossAlignment === 'center') {
} else if (crossAlign === 'center') {
textAlign = 'center';
x += widest / 2;
} else {

2
test/fixtures/core.scale/crossAlignment/cross-align-bottom-center.js vendored
View File

@ -13,7 +13,7 @@ module.exports = {
scales: {
x: {
ticks: {
crossAlignment: 'center',
crossAlign: 'center',
},
},
}

2
test/fixtures/core.scale/crossAlignment/cross-align-bottom-far.js vendored
View File

@ -13,7 +13,7 @@ module.exports = {
scales: {
x: {
ticks: {
crossAlignment: 'far',
crossAlign: 'far',
},
},
}

2
test/fixtures/core.scale/crossAlignment/cross-align-bottom-near.js vendored
View File

@ -13,7 +13,7 @@ module.exports = {
scales: {
x: {
ticks: {
crossAlignment: 'near',
crossAlign: 'near',
},
},
}

2
test/fixtures/core.scale/crossAlignment/cross-align-left-center.js vendored
View File

@ -15,7 +15,7 @@ module.exports = {
y: {
position: 'left',
ticks: {
crossAlignment: 'center',
crossAlign: 'center',
},
},
}

2
test/fixtures/core.scale/crossAlignment/cross-align-left-far.js vendored
View File

@ -15,7 +15,7 @@ module.exports = {
y: {
position: 'left',
ticks: {
crossAlignment: 'far',
crossAlign: 'far',
},
},
}

2
test/fixtures/core.scale/crossAlignment/cross-align-left-near.js vendored
View File

@ -15,7 +15,7 @@ module.exports = {
y: {
position: 'left',
ticks: {
crossAlignment: 'near',
crossAlign: 'near',
},
},
}

2
test/fixtures/core.scale/crossAlignment/cross-align-right-center.js vendored
View File

@ -15,7 +15,7 @@ module.exports = {
y: {
position: 'right',
ticks: {
crossAlignment: 'center',
crossAlign: 'center',
},
},
}

2
test/fixtures/core.scale/crossAlignment/cross-align-right-far.js vendored
View File

@ -15,7 +15,7 @@ module.exports = {
y: {
position: 'right',
ticks: {
crossAlignment: 'far',
crossAlign: 'far',
},
},
}

2
test/fixtures/core.scale/crossAlignment/cross-align-right-near.js vendored
View File

@ -15,7 +15,7 @@ module.exports = {
y: {
position: 'right',
ticks: {
crossAlignment: 'near',
crossAlign: 'near',
},
},
}

2
test/fixtures/core.scale/crossAlignment/cross-align-top-center.js vendored
View File

@ -14,7 +14,7 @@ module.exports = {
x: {
position: 'top',
ticks: {
crossAlignment: 'center',
crossAlign: 'center',
},
},
}

2
test/fixtures/core.scale/crossAlignment/cross-align-top-far.js vendored
View File

@ -14,7 +14,7 @@ module.exports = {
x: {
position: 'top',
ticks: {
crossAlignment: 'far',
crossAlign: 'far',
},
},
}

2
test/fixtures/core.scale/crossAlignment/cross-align-top-near.js vendored
View File

@ -14,7 +14,7 @@ module.exports = {
x: {
position: 'top',
ticks: {
crossAlignment: 'near',
crossAlign: 'near',
},
},
}

4
test/fixtures/core.scale/label-align-center.js vendored
View File

@ -13,12 +13,12 @@ module.exports = {
scales: {
x: {
ticks: {
alignment: 'center',
align: 'center',
},
},
y: {
ticks: {
alignment: 'center',
align: 'center',
}
}
}

4
test/fixtures/core.scale/label-align-end.js vendored
View File

@ -13,12 +13,12 @@ module.exports = {
scales: {
x: {
ticks: {
alignment: 'end',
align: 'end',
},
},
y: {
ticks: {
alignment: 'end',
align: 'end',
}
}
}

4
test/fixtures/core.scale/label-align-start.js vendored
View File

@ -13,12 +13,12 @@ module.exports = {
scales: {
x: {
ticks: {
alignment: 'start',
align: 'start',
},
},
y: {
ticks: {
alignment: 'start',
align: 'start',
}
}
}

4
types/scales/index.d.ts vendored
View File

@ -132,7 +132,7 @@ export interface ICartesianScaleOptions extends ICoreScaleOptions {
* The label alignment
* @default 'center'
*/
alignment: 'start' | 'center' | 'end';
align: 'start' | 'center' | 'end';
/**
* If true, automatically calculates how many labels can be shown and hides labels accordingly. Labels will be rotated up to maxRotation before skipping any. Turn autoSkip off to show all labels no matter what.
* @default true
@ -149,7 +149,7 @@ export interface ICartesianScaleOptions extends ICoreScaleOptions {
* This only applies when the rotation is 0 and the axis position is one of "top", "left", "right", or "bottom"
* @default 'near'
*/
crossAlignment: 'near' | 'center' | 'far';
crossAlign: 'near' | 'center' | 'far';
/**
* Distance in pixels to offset the label from the centre point of the tick (in the x direction for the x axis, and the y direction for the y axis). Note: this can cause labels at the edges to be cropped by the edge of the canvas