From cea8546824c578f86b8f0245fafdf81bacc5c1d3 Mon Sep 17 00:00:00 2001 From: Eliz Date: Sun, 15 Sep 2019 23:34:04 +0300 Subject: [PATCH 01/11] Add label alignment option to axis label title --- docs/axes/labelling.md | 1 + src/core/core.scale.js | 42 +++++++++++++++++++++++++++++++++++------- 2 files changed, 36 insertions(+), 7 deletions(-) diff --git a/docs/axes/labelling.md b/docs/axes/labelling.md index 96c5eae3784..63645ed6caa 100644 --- a/docs/axes/labelling.md +++ b/docs/axes/labelling.md @@ -9,6 +9,7 @@ The scale label configuration is nested under the scale configuration in the `sc | Name | Type | Default | Description | ---- | ---- | ------- | ----------- | `display` | `boolean` | `false` | If true, display the axis title. +| `labelAlign` | `string` | `center` | Alignment of the axis title. Possible options are `start`, `center` and `end` | `labelString` | `string` | `''` | The text for the title. (i.e. "# of People" or "Response Choices"). | `lineHeight` | number|string | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)). | `fontColor` | `Color` | `'#666'` | Font color for scale title. diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 8f532ca754f..c953cbc4434 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1205,28 +1205,56 @@ var Scale = Element.extend({ var scaleLabelFont = helpers.options._parseFont(scaleLabel); var scaleLabelPadding = helpers.options.toPadding(scaleLabel.padding); var halfLineHeight = scaleLabelFont.lineHeight / 2; + var scaleLabelAlign = scaleLabel.labelAlign; var position = options.position; var rotation = 0; - var scaleLabelX, scaleLabelY; + var scaleLabelX, scaleLabelY, textAlign; if (me.isHorizontal()) { - scaleLabelX = me.left + me.width / 2; // midpoint of the width - scaleLabelY = position === 'bottom' - ? me.bottom - halfLineHeight - scaleLabelPadding.bottom - : me.top + halfLineHeight + scaleLabelPadding.top; + switch (scaleLabelAlign) + { + case 'start': + scaleLabelX = me.left; + textAlign = 'left'; + break; + case 'end': + scaleLabelX = me.left + me.width; + textAlign = 'right'; + break; + default: + scaleLabelX = me.left + me.width / 2; + textAlign = 'center'; + } + scaleLabelY = position === 'top' + ? me.top + halfLineHeight + scaleLabelPadding.top + : me.bottom - halfLineHeight - scaleLabelPadding.bottom; } else { var isLeft = position === 'left'; scaleLabelX = isLeft ? me.left + halfLineHeight + scaleLabelPadding.top : me.right - halfLineHeight - scaleLabelPadding.top; - scaleLabelY = me.top + me.height / 2; + var height = me.height; + switch (scaleLabelAlign) + { + case 'start': + scaleLabelY = me.top + ( isLeft ? height : 0 ); + textAlign = isLeft ? 'left' : 'right'; + break; + case 'end': + scaleLabelY = me.top + ( isLeft ? 0 : height ); + textAlign = isLeft ? 'left' : 'right'; + break; + default: + scaleLabelY = me.top + height / 2; + textAlign = 'center'; + } rotation = isLeft ? -0.5 * Math.PI : 0.5 * Math.PI; } ctx.save(); ctx.translate(scaleLabelX, scaleLabelY); ctx.rotate(rotation); - ctx.textAlign = 'center'; + ctx.textAlign = textAlign; ctx.textBaseline = 'middle'; ctx.fillStyle = scaleLabelFontColor; // render in correct colour ctx.font = scaleLabelFont.string; From 7ecdf3a2e26a6ed0cf0b3111a2ba9b10bc3a50db Mon Sep 17 00:00:00 2001 From: Eliz Date: Mon, 16 Sep 2019 11:28:39 +0300 Subject: [PATCH 02/11] Documentation and style fixes --- docs/axes/labelling.md | 2 +- src/core/core.scale.js | 10 ++++------ 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/docs/axes/labelling.md b/docs/axes/labelling.md index 63645ed6caa..aa7a2b6b1ef 100644 --- a/docs/axes/labelling.md +++ b/docs/axes/labelling.md @@ -9,7 +9,7 @@ The scale label configuration is nested under the scale configuration in the `sc | Name | Type | Default | Description | ---- | ---- | ------- | ----------- | `display` | `boolean` | `false` | If true, display the axis title. -| `labelAlign` | `string` | `center` | Alignment of the axis title. Possible options are `start`, `center` and `end` +| `labelAlign` | `string` | `'center'` | Alignment of the axis title. Possible options are `'start'`, `'center'` and `'end'` | `labelString` | `string` | `''` | The text for the title. (i.e. "# of People" or "Response Choices"). | `lineHeight` | number|string | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)). | `fontColor` | `Color` | `'#666'` | Font color for scale title. diff --git a/src/core/core.scale.js b/src/core/core.scale.js index c953cbc4434..7c1f532cc66 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1211,8 +1211,7 @@ var Scale = Element.extend({ var scaleLabelX, scaleLabelY, textAlign; if (me.isHorizontal()) { - switch (scaleLabelAlign) - { + switch (scaleLabelAlign) { case 'start': scaleLabelX = me.left; textAlign = 'left'; @@ -1234,14 +1233,13 @@ var Scale = Element.extend({ ? me.left + halfLineHeight + scaleLabelPadding.top : me.right - halfLineHeight - scaleLabelPadding.top; var height = me.height; - switch (scaleLabelAlign) - { + switch (scaleLabelAlign) { case 'start': - scaleLabelY = me.top + ( isLeft ? height : 0 ); + scaleLabelY = me.top + (isLeft ? height : 0); textAlign = isLeft ? 'left' : 'right'; break; case 'end': - scaleLabelY = me.top + ( isLeft ? 0 : height ); + scaleLabelY = me.top + (isLeft ? 0 : height); textAlign = isLeft ? 'left' : 'right'; break; default: From c9c7f481f1bbbdf3d86565f64d346320eb7a54bc Mon Sep 17 00:00:00 2001 From: Eliz Date: Mon, 16 Sep 2019 13:52:04 +0300 Subject: [PATCH 03/11] Fix alignment based on position --- src/core/core.scale.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 7c1f532cc66..9d368cf4e58 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1232,18 +1232,17 @@ var Scale = Element.extend({ scaleLabelX = isLeft ? me.left + halfLineHeight + scaleLabelPadding.top : me.right - halfLineHeight - scaleLabelPadding.top; - var height = me.height; switch (scaleLabelAlign) { case 'start': - scaleLabelY = me.top + (isLeft ? height : 0); - textAlign = isLeft ? 'left' : 'right'; + scaleLabelY = me.top + (isLeft ? me.height : 0); + textAlign = 'left'; break; case 'end': - scaleLabelY = me.top + (isLeft ? 0 : height); - textAlign = isLeft ? 'left' : 'right'; + scaleLabelY = me.top + (isLeft ? 0 : me.height); + textAlign = 'right'; break; default: - scaleLabelY = me.top + height / 2; + scaleLabelY = me.top + me.height / 2; textAlign = 'center'; } rotation = isLeft ? -0.5 * Math.PI : 0.5 * Math.PI; From dc048133e87d9879506f32a33eb669d2f46f21e3 Mon Sep 17 00:00:00 2001 From: Eliz Date: Thu, 19 Sep 2019 19:39:16 +0300 Subject: [PATCH 04/11] Use start as bottom --- src/core/core.scale.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 9d368cf4e58..af7ff15abe1 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1214,11 +1214,11 @@ var Scale = Element.extend({ switch (scaleLabelAlign) { case 'start': scaleLabelX = me.left; - textAlign = 'left'; + textAlign = me.reverse ? 'right' : 'left'; break; case 'end': scaleLabelX = me.left + me.width; - textAlign = 'right'; + textAlign = me.reverse ? 'left' : 'right'; break; default: scaleLabelX = me.left + me.width / 2; @@ -1229,17 +1229,18 @@ var Scale = Element.extend({ : me.bottom - halfLineHeight - scaleLabelPadding.bottom; } else { var isLeft = position === 'left'; + var startsAtBottom = !me.options.ticks.reverse; scaleLabelX = isLeft ? me.left + halfLineHeight + scaleLabelPadding.top : me.right - halfLineHeight - scaleLabelPadding.top; switch (scaleLabelAlign) { case 'start': - scaleLabelY = me.top + (isLeft ? me.height : 0); - textAlign = 'left'; + scaleLabelY = me.top + (startsAtBottom ? me.height : 0); + textAlign = (startsAtBottom ^ !isLeft) ? 'left' : 'right'; break; case 'end': - scaleLabelY = me.top + (isLeft ? 0 : me.height); - textAlign = 'right'; + scaleLabelY = me.top + (startsAtBottom ? 0 : me.height); + textAlign = (startsAtBottom ^ !isLeft) ? 'right' : 'left'; break; default: scaleLabelY = me.top + me.height / 2; From 4fe3f2e72fea62e186f8357fd660337401266c78 Mon Sep 17 00:00:00 2001 From: Eliz Date: Thu, 19 Sep 2019 23:06:51 +0300 Subject: [PATCH 05/11] use isreverse for reverse option --- src/core/core.scale.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/core/core.scale.js b/src/core/core.scale.js index af7ff15abe1..ceefa27dbb4 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1209,16 +1209,17 @@ var Scale = Element.extend({ var position = options.position; var rotation = 0; var scaleLabelX, scaleLabelY, textAlign; + var isReverse = me.options.ticks.reverse; if (me.isHorizontal()) { switch (scaleLabelAlign) { case 'start': scaleLabelX = me.left; - textAlign = me.reverse ? 'right' : 'left'; + textAlign = isReverse ? 'right' : 'left'; break; case 'end': scaleLabelX = me.left + me.width; - textAlign = me.reverse ? 'left' : 'right'; + textAlign = isReverse ? 'left' : 'right'; break; default: scaleLabelX = me.left + me.width / 2; @@ -1229,7 +1230,7 @@ var Scale = Element.extend({ : me.bottom - halfLineHeight - scaleLabelPadding.bottom; } else { var isLeft = position === 'left'; - var startsAtBottom = !me.options.ticks.reverse; + var startsAtBottom = !isReverse; scaleLabelX = isLeft ? me.left + halfLineHeight + scaleLabelPadding.top : me.right - halfLineHeight - scaleLabelPadding.top; From 1f40f09a8e648492010d0c0090c4004667ad22f3 Mon Sep 17 00:00:00 2001 From: Eliz Date: Sat, 5 Oct 2019 02:13:47 +0300 Subject: [PATCH 06/11] Replace labelAlign with align --- docs/axes/labelling.md | 2 +- src/core/core.scale.js | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/axes/labelling.md b/docs/axes/labelling.md index aa7a2b6b1ef..f92f9be42f2 100644 --- a/docs/axes/labelling.md +++ b/docs/axes/labelling.md @@ -9,7 +9,7 @@ The scale label configuration is nested under the scale configuration in the `sc | Name | Type | Default | Description | ---- | ---- | ------- | ----------- | `display` | `boolean` | `false` | If true, display the axis title. -| `labelAlign` | `string` | `'center'` | Alignment of the axis title. Possible options are `'start'`, `'center'` and `'end'` +| `align` | `string` | `'center'` | Alignment of the axis title. Possible options are `'start'`, `'center'` and `'end'` | `labelString` | `string` | `''` | The text for the title. (i.e. "# of People" or "Response Choices"). | `lineHeight` | number|string | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)). | `fontColor` | `Color` | `'#666'` | Font color for scale title. diff --git a/src/core/core.scale.js b/src/core/core.scale.js index ceefa27dbb4..731e1d54727 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1205,14 +1205,14 @@ var Scale = Element.extend({ var scaleLabelFont = helpers.options._parseFont(scaleLabel); var scaleLabelPadding = helpers.options.toPadding(scaleLabel.padding); var halfLineHeight = scaleLabelFont.lineHeight / 2; - var scaleLabelAlign = scaleLabel.labelAlign; + var scaleAlign = scaleLabel.align; var position = options.position; var rotation = 0; var scaleLabelX, scaleLabelY, textAlign; var isReverse = me.options.ticks.reverse; if (me.isHorizontal()) { - switch (scaleLabelAlign) { + switch (scaleAlign) { case 'start': scaleLabelX = me.left; textAlign = isReverse ? 'right' : 'left'; @@ -1234,7 +1234,7 @@ var Scale = Element.extend({ scaleLabelX = isLeft ? me.left + halfLineHeight + scaleLabelPadding.top : me.right - halfLineHeight - scaleLabelPadding.top; - switch (scaleLabelAlign) { + switch (scaleAlign) { case 'start': scaleLabelY = me.top + (startsAtBottom ? me.height : 0); textAlign = (startsAtBottom ^ !isLeft) ? 'left' : 'right'; From 7da5f6b4d48585e83db707f3cc6f9f1773835262 Mon Sep 17 00:00:00 2001 From: Eliz Date: Sat, 5 Oct 2019 13:28:14 +0300 Subject: [PATCH 07/11] Rename the variable --- src/core/core.scale.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 731e1d54727..9b61b07bc10 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1205,14 +1205,14 @@ var Scale = Element.extend({ var scaleLabelFont = helpers.options._parseFont(scaleLabel); var scaleLabelPadding = helpers.options.toPadding(scaleLabel.padding); var halfLineHeight = scaleLabelFont.lineHeight / 2; - var scaleAlign = scaleLabel.align; + var scaleLabelAlign = scaleLabel.align; var position = options.position; var rotation = 0; var scaleLabelX, scaleLabelY, textAlign; var isReverse = me.options.ticks.reverse; if (me.isHorizontal()) { - switch (scaleAlign) { + switch (scaleLabelAlign) { case 'start': scaleLabelX = me.left; textAlign = isReverse ? 'right' : 'left'; @@ -1234,7 +1234,7 @@ var Scale = Element.extend({ scaleLabelX = isLeft ? me.left + halfLineHeight + scaleLabelPadding.top : me.right - halfLineHeight - scaleLabelPadding.top; - switch (scaleAlign) { + switch (scaleLabelAlign) { case 'start': scaleLabelY = me.top + (startsAtBottom ? me.height : 0); textAlign = (startsAtBottom ^ !isLeft) ? 'left' : 'right'; From b5c2d2f38cadace1028a3b3ca8c0194e8d9134a0 Mon Sep 17 00:00:00 2001 From: Eliz Date: Mon, 7 Oct 2019 15:39:52 +0300 Subject: [PATCH 08/11] Review comments ... --- src/core/core.scale.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 9b61b07bc10..3e2e6b93961 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1208,8 +1208,8 @@ var Scale = Element.extend({ var scaleLabelAlign = scaleLabel.align; var position = options.position; var rotation = 0; - var scaleLabelX, scaleLabelY, textAlign; var isReverse = me.options.ticks.reverse; + var scaleLabelX, scaleLabelY, textAlign; if (me.isHorizontal()) { switch (scaleLabelAlign) { @@ -1237,11 +1237,11 @@ var Scale = Element.extend({ switch (scaleLabelAlign) { case 'start': scaleLabelY = me.top + (startsAtBottom ? me.height : 0); - textAlign = (startsAtBottom ^ !isLeft) ? 'left' : 'right'; + textAlign = startsAtBottom ^ !isLeft ? 'left' : 'right'; break; case 'end': scaleLabelY = me.top + (startsAtBottom ? 0 : me.height); - textAlign = (startsAtBottom ^ !isLeft) ? 'right' : 'left'; + textAlign = startsAtBottom ^ !isLeft ? 'right' : 'left'; break; default: scaleLabelY = me.top + me.height / 2; From 2c7df51555a4318ce70f6efacfa9d02fe61b6596 Mon Sep 17 00:00:00 2001 From: Eliz Date: Mon, 7 Oct 2019 15:50:26 +0300 Subject: [PATCH 09/11] Update ternary operation --- src/core/core.scale.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core/core.scale.js b/src/core/core.scale.js index 3e2e6b93961..a6f76e20b35 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1237,11 +1237,11 @@ var Scale = Element.extend({ switch (scaleLabelAlign) { case 'start': scaleLabelY = me.top + (startsAtBottom ? me.height : 0); - textAlign = startsAtBottom ^ !isLeft ? 'left' : 'right'; + textAlign = startsAtBottom === isLeft ? 'left' : 'right'; break; case 'end': scaleLabelY = me.top + (startsAtBottom ? 0 : me.height); - textAlign = startsAtBottom ^ !isLeft ? 'right' : 'left'; + textAlign = startsAtBottom === isLeft ? 'right' : 'left'; break; default: scaleLabelY = me.top + me.height / 2; From 2ca863ec5922208f35b9da689fcd69bc8637ae5c Mon Sep 17 00:00:00 2001 From: Eliz Date: Sat, 19 Oct 2019 01:56:41 +0300 Subject: [PATCH 10/11] Fix horizontal layout issue --- src/core/core.scale.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/core/core.scale.js b/src/core/core.scale.js index a6f76e20b35..f1e51b3e1bf 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1214,11 +1214,11 @@ var Scale = Element.extend({ if (me.isHorizontal()) { switch (scaleLabelAlign) { case 'start': - scaleLabelX = me.left; + scaleLabelX = me.left + (isReverse ? me.width : 0); textAlign = isReverse ? 'right' : 'left'; break; case 'end': - scaleLabelX = me.left + me.width; + scaleLabelX = me.left + (isReverse ? 0 : me.width); textAlign = isReverse ? 'left' : 'right'; break; default: From ff3c5ed63243b273b7ed3436f744f25ec1624bf1 Mon Sep 17 00:00:00 2001 From: Eliz Date: Sat, 19 Oct 2019 02:15:28 +0300 Subject: [PATCH 11/11] Remove unnecessary variable --- src/core/core.scale.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/core/core.scale.js b/src/core/core.scale.js index f1e51b3e1bf..6d6e105425b 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -1230,18 +1230,17 @@ var Scale = Element.extend({ : me.bottom - halfLineHeight - scaleLabelPadding.bottom; } else { var isLeft = position === 'left'; - var startsAtBottom = !isReverse; scaleLabelX = isLeft ? me.left + halfLineHeight + scaleLabelPadding.top : me.right - halfLineHeight - scaleLabelPadding.top; switch (scaleLabelAlign) { case 'start': - scaleLabelY = me.top + (startsAtBottom ? me.height : 0); - textAlign = startsAtBottom === isLeft ? 'left' : 'right'; + scaleLabelY = me.top + (isReverse ? 0 : me.height); + textAlign = isReverse === isLeft ? 'right' : 'left'; break; case 'end': - scaleLabelY = me.top + (startsAtBottom ? 0 : me.height); - textAlign = startsAtBottom === isLeft ? 'right' : 'left'; + scaleLabelY = me.top + (isReverse ? me.height : 0); + textAlign = isReverse === isLeft ? 'left' : 'right'; break; default: scaleLabelY = me.top + me.height / 2;