From cea8546824c578f86b8f0245fafdf81bacc5c1d3 Mon Sep 17 00:00:00 2001
From: Eliz <elizkilic@gmail.com>
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` | <code>number|string</code> | `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 <elizkilic@gmail.com>
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` | <code>number|string</code> | `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 <elizkilic@gmail.com>
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 <elizkilic@gmail.com>
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 <elizkilic@gmail.com>
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 <elizkilic@gmail.com>
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` | <code>number|string</code> | `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 <elizkilic@gmail.com>
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 <elizkilic@gmail.com>
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 <elizkilic@gmail.com>
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 <elizkilic@gmail.com>
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 <elizkilic@gmail.com>
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;