From 7cb5008ea14463ab3316363812bae98674e8a501 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Sat, 4 Jan 2020 21:41:07 -0500 Subject: [PATCH 1/2] Add alignment options for title plugin. Alignment can be set to 'start', 'center'. or 'end'. A new sample has been added as well. --- docs/configuration/title.md | 9 ++ samples/samples.js | 6 ++ samples/title/alignment.html | 143 +++++++++++++++++++++++++++++++ src/plugins/plugin.title.js | 60 +++++++++---- test/specs/plugin.title.tests.js | 1 + 5 files changed, 204 insertions(+), 15 deletions(-) create mode 100644 samples/title/alignment.html diff --git a/docs/configuration/title.md b/docs/configuration/title.md index f072cb6674b..89fca80490f 100644 --- a/docs/configuration/title.md +++ b/docs/configuration/title.md @@ -7,6 +7,7 @@ The title configuration is passed into the `options.title` namespace. The global | Name | Type | Default | Description | ---- | ---- | ------- | ----------- +| `align` | `string` | `'center'` | Alignment of the title. [more...](#align) | `display` | `boolean` | `false` | Is the title shown? | `position` | `string` | `'top'` | Position of title. [more...](#position) | `fontSize` | `number` | `12` | Font size. @@ -24,6 +25,14 @@ Possible title position values are: * `'bottom'` * `'right'` +## Align + +Alignment of the title. Options are: + +* `'start'` +* `'center'` +* `'end'` + ## Example Usage The example below would enable a title of 'Custom Chart Title' on the chart that is created. diff --git a/samples/samples.js b/samples/samples.js index d95a3fe7e4f..c85cac37a4d 100644 --- a/samples/samples.js +++ b/samples/samples.js @@ -167,6 +167,12 @@ title: 'Callbacks', path: 'legend/callbacks.html' }] + }, { + title: 'Title', + items: [{ + title: 'Alignment', + path: 'title/alignment.html' + }] }, { title: 'Tooltip', items: [{ diff --git a/samples/title/alignment.html b/samples/title/alignment.html new file mode 100644 index 00000000000..84bb0da61ec --- /dev/null +++ b/samples/title/alignment.html @@ -0,0 +1,143 @@ + + + + + Legend Positions + + + + + + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ + + + diff --git a/src/plugins/plugin.title.js b/src/plugins/plugin.title.js index 452f921e7a4..9a25699ef1a 100644 --- a/src/plugins/plugin.title.js +++ b/src/plugins/plugin.title.js @@ -6,6 +6,7 @@ const helpers = require('../helpers/index'); const layouts = require('../core/core.layouts'); defaults._set('title', { + align: 'center', display: false, fontStyle: 'bold', fullWidth: true, @@ -128,35 +129,64 @@ class Title extends Element { // Actually draw the title block on the canvas draw() { - var me = this; - var ctx = me.ctx; - var opts = me.options; + const me = this; + const ctx = me.ctx; + const opts = me.options; if (!opts.display) { return; } - var fontOpts = helpers.options._parseFont(opts); - var lineHeight = fontOpts.lineHeight; - var offset = lineHeight / 2 + me._padding.top; - var rotation = 0; - var top = me.top; - var left = me.left; - var bottom = me.bottom; - var right = me.right; - var maxWidth, titleX, titleY; + const fontOpts = helpers.options._parseFont(opts); + const lineHeight = fontOpts.lineHeight; + const offset = lineHeight / 2 + me._padding.top; + let rotation = 0; + const top = me.top; + const left = me.left; + const bottom = me.bottom; + const right = me.right; + let maxWidth, titleX, titleY; + let align; ctx.fillStyle = helpers.valueOrDefault(opts.fontColor, defaults.fontColor); // render in correct colour ctx.font = fontOpts.string; // Horizontal if (me.isHorizontal()) { - titleX = left + ((right - left) / 2); // midpoint of the width + switch (opts.align) { + case 'start': + titleX = left; + align = 'left'; + break; + case 'end': + titleX = right; + align = 'right'; + break; + default: + titleX = left + ((right - left) / 2); + align = 'center'; + break; + } + titleY = top + offset; maxWidth = right - left; } else { titleX = opts.position === 'left' ? left + offset : right - offset; - titleY = top + ((bottom - top) / 2); + + switch (opts.align) { + case 'start': + titleY = opts.position === 'left' ? bottom : top; + align = 'left'; + break; + case 'end': + titleY = opts.position === 'left' ? top : bottom; + align = 'right'; + break; + default: + titleY = top + ((bottom - top) / 2); + align = 'center'; + break; + } maxWidth = bottom - top; rotation = Math.PI * (opts.position === 'left' ? -0.5 : 0.5); } @@ -164,7 +194,7 @@ class Title extends Element { ctx.save(); ctx.translate(titleX, titleY); ctx.rotate(rotation); - ctx.textAlign = 'center'; + ctx.textAlign = align; ctx.textBaseline = 'middle'; var text = opts.text; diff --git a/test/specs/plugin.title.tests.js b/test/specs/plugin.title.tests.js index 66b9d0f9094..084285599fe 100644 --- a/test/specs/plugin.title.tests.js +++ b/test/specs/plugin.title.tests.js @@ -5,6 +5,7 @@ var Title = Chart.plugins.getAll().find(p => p.id === 'title')._element; describe('Title block tests', function() { it('Should have the correct default config', function() { expect(Chart.defaults.title).toEqual({ + align: 'center', display: false, position: 'top', fullWidth: true, From 34ab22fe714cb1168ecb8224c30b631794fb6570 Mon Sep 17 00:00:00 2001 From: Evert Timberg Date: Sat, 4 Jan 2020 21:41:37 -0500 Subject: [PATCH 2/2] Update sample file title --- samples/title/alignment.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/samples/title/alignment.html b/samples/title/alignment.html index 84bb0da61ec..770db6a3513 100644 --- a/samples/title/alignment.html +++ b/samples/title/alignment.html @@ -2,7 +2,7 @@ - Legend Positions + Title Positions & Alignment