From: Evert Timberg Date: Wed, 14 Oct 2020 12:27:54 +0000 (-0400) Subject: Shorten alignment settings for axes (#7886) X-Git-Tag: v3.0.0-beta.4~2 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=1ca60808b4ccf630ea91cfe7077ae821879eab5d;p=thirdparty%2FChart.js.git Shorten alignment settings for axes (#7886) * Rename crossAlignment to crossAlign * Update alignment to align for cartesian axes --- diff --git a/docs/docs/axes/cartesian/index.mdx b/docs/docs/axes/cartesian/index.mdx index d31a64366..b1d8d68f7 100644 --- a/docs/docs/axes/cartesian/index.mdx +++ b/docs/docs/axes/cartesian/index.mdx @@ -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 diff --git a/samples/scales/label-text-alignment.html b/samples/scales/label-text-alignment.html index 4e542692f..ac3d9f6b4 100644 --- a/samples/scales/label-text-alignment.html +++ b/samples/scales/label-text-alignment.html @@ -87,13 +87,13 @@ x: { display: true, ticks: { - alignment: xAlign, + align: xAlign, } }, y: { display: true, ticks: { - alignment: yAlign + align: yAlign } } }, diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 5dc8d7e2d..14225354d 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -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 { diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-bottom-center.js b/test/fixtures/core.scale/crossAlignment/cross-align-bottom-center.js index 5eae38856..46121d273 100644 --- a/test/fixtures/core.scale/crossAlignment/cross-align-bottom-center.js +++ b/test/fixtures/core.scale/crossAlignment/cross-align-bottom-center.js @@ -13,7 +13,7 @@ module.exports = { scales: { x: { ticks: { - crossAlignment: 'center', + crossAlign: 'center', }, }, } diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-bottom-far.js b/test/fixtures/core.scale/crossAlignment/cross-align-bottom-far.js index f7daff226..aa305d0ce 100644 --- a/test/fixtures/core.scale/crossAlignment/cross-align-bottom-far.js +++ b/test/fixtures/core.scale/crossAlignment/cross-align-bottom-far.js @@ -13,7 +13,7 @@ module.exports = { scales: { x: { ticks: { - crossAlignment: 'far', + crossAlign: 'far', }, }, } diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-bottom-near.js b/test/fixtures/core.scale/crossAlignment/cross-align-bottom-near.js index 69175babc..210831529 100644 --- a/test/fixtures/core.scale/crossAlignment/cross-align-bottom-near.js +++ b/test/fixtures/core.scale/crossAlignment/cross-align-bottom-near.js @@ -13,7 +13,7 @@ module.exports = { scales: { x: { ticks: { - crossAlignment: 'near', + crossAlign: 'near', }, }, } diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-left-center.js b/test/fixtures/core.scale/crossAlignment/cross-align-left-center.js index d51df0aa3..59aa67d18 100644 --- a/test/fixtures/core.scale/crossAlignment/cross-align-left-center.js +++ b/test/fixtures/core.scale/crossAlignment/cross-align-left-center.js @@ -15,7 +15,7 @@ module.exports = { y: { position: 'left', ticks: { - crossAlignment: 'center', + crossAlign: 'center', }, }, } diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-left-far.js b/test/fixtures/core.scale/crossAlignment/cross-align-left-far.js index 0e1232c92..de119d18c 100644 --- a/test/fixtures/core.scale/crossAlignment/cross-align-left-far.js +++ b/test/fixtures/core.scale/crossAlignment/cross-align-left-far.js @@ -15,7 +15,7 @@ module.exports = { y: { position: 'left', ticks: { - crossAlignment: 'far', + crossAlign: 'far', }, }, } diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-left-near.js b/test/fixtures/core.scale/crossAlignment/cross-align-left-near.js index 591e92c66..6531612e1 100644 --- a/test/fixtures/core.scale/crossAlignment/cross-align-left-near.js +++ b/test/fixtures/core.scale/crossAlignment/cross-align-left-near.js @@ -15,7 +15,7 @@ module.exports = { y: { position: 'left', ticks: { - crossAlignment: 'near', + crossAlign: 'near', }, }, } diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-right-center.js b/test/fixtures/core.scale/crossAlignment/cross-align-right-center.js index 4e56f15b0..10a41b228 100644 --- a/test/fixtures/core.scale/crossAlignment/cross-align-right-center.js +++ b/test/fixtures/core.scale/crossAlignment/cross-align-right-center.js @@ -15,7 +15,7 @@ module.exports = { y: { position: 'right', ticks: { - crossAlignment: 'center', + crossAlign: 'center', }, }, } diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-right-far.js b/test/fixtures/core.scale/crossAlignment/cross-align-right-far.js index fc7906f46..adbdb32d2 100644 --- a/test/fixtures/core.scale/crossAlignment/cross-align-right-far.js +++ b/test/fixtures/core.scale/crossAlignment/cross-align-right-far.js @@ -15,7 +15,7 @@ module.exports = { y: { position: 'right', ticks: { - crossAlignment: 'far', + crossAlign: 'far', }, }, } diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-right-near.js b/test/fixtures/core.scale/crossAlignment/cross-align-right-near.js index acdc5bca7..cd8e94e35 100644 --- a/test/fixtures/core.scale/crossAlignment/cross-align-right-near.js +++ b/test/fixtures/core.scale/crossAlignment/cross-align-right-near.js @@ -15,7 +15,7 @@ module.exports = { y: { position: 'right', ticks: { - crossAlignment: 'near', + crossAlign: 'near', }, }, } diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-top-center.js b/test/fixtures/core.scale/crossAlignment/cross-align-top-center.js index 4ed7034d6..31386b773 100644 --- a/test/fixtures/core.scale/crossAlignment/cross-align-top-center.js +++ b/test/fixtures/core.scale/crossAlignment/cross-align-top-center.js @@ -14,7 +14,7 @@ module.exports = { x: { position: 'top', ticks: { - crossAlignment: 'center', + crossAlign: 'center', }, }, } diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-top-far.js b/test/fixtures/core.scale/crossAlignment/cross-align-top-far.js index 2d6f8ceb3..c4606b715 100644 --- a/test/fixtures/core.scale/crossAlignment/cross-align-top-far.js +++ b/test/fixtures/core.scale/crossAlignment/cross-align-top-far.js @@ -14,7 +14,7 @@ module.exports = { x: { position: 'top', ticks: { - crossAlignment: 'far', + crossAlign: 'far', }, }, } diff --git a/test/fixtures/core.scale/crossAlignment/cross-align-top-near.js b/test/fixtures/core.scale/crossAlignment/cross-align-top-near.js index e2a97974e..c89e3c01a 100644 --- a/test/fixtures/core.scale/crossAlignment/cross-align-top-near.js +++ b/test/fixtures/core.scale/crossAlignment/cross-align-top-near.js @@ -14,7 +14,7 @@ module.exports = { x: { position: 'top', ticks: { - crossAlignment: 'near', + crossAlign: 'near', }, }, } diff --git a/test/fixtures/core.scale/label-align-center.js b/test/fixtures/core.scale/label-align-center.js index 1e9907bf9..d0a5a04de 100644 --- a/test/fixtures/core.scale/label-align-center.js +++ b/test/fixtures/core.scale/label-align-center.js @@ -13,12 +13,12 @@ module.exports = { scales: { x: { ticks: { - alignment: 'center', + align: 'center', }, }, y: { ticks: { - alignment: 'center', + align: 'center', } } } diff --git a/test/fixtures/core.scale/label-align-end.js b/test/fixtures/core.scale/label-align-end.js index 19a0e8ad3..d7b19fe13 100644 --- a/test/fixtures/core.scale/label-align-end.js +++ b/test/fixtures/core.scale/label-align-end.js @@ -13,12 +13,12 @@ module.exports = { scales: { x: { ticks: { - alignment: 'end', + align: 'end', }, }, y: { ticks: { - alignment: 'end', + align: 'end', } } } diff --git a/test/fixtures/core.scale/label-align-start.js b/test/fixtures/core.scale/label-align-start.js index b5284cd96..3edcb6500 100644 --- a/test/fixtures/core.scale/label-align-start.js +++ b/test/fixtures/core.scale/label-align-start.js @@ -13,12 +13,12 @@ module.exports = { scales: { x: { ticks: { - alignment: 'start', + align: 'start', }, }, y: { ticks: { - alignment: 'start', + align: 'start', } } } diff --git a/types/scales/index.d.ts b/types/scales/index.d.ts index 81e1cce2f..4324b0188 100644 --- a/types/scales/index.d.ts +++ b/types/scales/index.d.ts @@ -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