diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js index 75670f30723..335bbea4197 100644 --- a/docs/.vuepress/config.js +++ b/docs/.vuepress/config.js @@ -217,6 +217,11 @@ module.exports = { ] }, { + title: 'Subtitle', + children: [ + 'subtitle/basic', + ] + }, { title: 'Tooltip', children: [ 'tooltip/position', @@ -304,6 +309,7 @@ module.exports = { 'configuration/layout', 'configuration/legend', 'configuration/title', + 'configuration/subtitle', 'configuration/tooltip', 'configuration/elements', 'configuration/decimation' diff --git a/docs/configuration/subtitle.md b/docs/configuration/subtitle.md new file mode 100644 index 00000000000..41fa26d077f --- /dev/null +++ b/docs/configuration/subtitle.md @@ -0,0 +1,28 @@ +# Subtitle + +Subtitle is a second title placed under the main title, by default. It has exactly the same configuration options with the main [title](./title.md). + +## Subtitle Configuration + +Namespace: `options.plugins.subtitle`. The global defaults for subtitle are configured in `Chart.defaults.plugins.subtitle`. + +Excactly the same configuration options with [title](./title.md) are available for subtitle, the namespaces only differ. + +## Example Usage + +The example below would enable a title of 'Custom Chart Subtitle' on the chart that is created. + +```javascript +var chart = new Chart(ctx, { + type: 'line', + data: data, + options: { + plugins: { + subtitle: { + display: true, + text: 'Custom Chart Subtitle' + } + } + } +}); +``` diff --git a/docs/samples/subtitle/basic.md b/docs/samples/subtitle/basic.md new file mode 100644 index 00000000000..d53d157a675 --- /dev/null +++ b/docs/samples/subtitle/basic.md @@ -0,0 +1,55 @@ +# Basic + +This sample shows basic usage of subtitle. + +```js chart-editor +// +const DATA_COUNT = 7; +const NUMBER_CFG = {count: DATA_COUNT, min: -100, max: 100}; +const data = { + labels: Utils.months({count: DATA_COUNT}), + datasets: [ + { + label: 'Dataset 1', + data: Utils.numbers(NUMBER_CFG), + fill: false, + borderColor: Utils.CHART_COLORS.red, + backgroundColor: Utils.transparentize(Utils.CHART_COLORS.red, 0.5), + }, + ] +}; +// + +// +const config = { + type: 'line', + data: data, + options: { + plugins: { + title: { + display: true, + text: 'Chart Title', + }, + subtitle: { + display: true, + text: 'Chart Subtitle', + color: 'blue', + font: { + size: 12, + family: 'tahoma', + weight: 'normal', + style: 'italic' + }, + padding: { + bottom: 10 + } + } + } + } +}; +// + +module.exports = { + config: config, +}; +``` diff --git a/src/plugins/index.js b/src/plugins/index.js index 6a228f013e8..eb76545ed4f 100644 --- a/src/plugins/index.js +++ b/src/plugins/index.js @@ -1,5 +1,6 @@ export {default as Decimation} from './plugin.decimation'; export {default as Filler} from './plugin.filler'; export {default as Legend} from './plugin.legend'; +export {default as SubTitle} from './plugin.subtitle'; export {default as Title} from './plugin.title'; export {default as Tooltip} from './plugin.tooltip'; diff --git a/src/plugins/plugin.subtitle.js b/src/plugins/plugin.subtitle.js new file mode 100644 index 00000000000..b68ccb3baed --- /dev/null +++ b/src/plugins/plugin.subtitle.js @@ -0,0 +1,53 @@ +import {Title} from './plugin.title'; +import layouts from '../core/core.layouts'; + +const map = new WeakMap(); + +export default { + id: 'subtitle', + + start(chart, _args, options) { + const title = new Title({ + ctx: chart.ctx, + options, + chart + }); + + layouts.configure(chart, title, options); + layouts.addBox(chart, title); + map.set(chart, title); + }, + + stop(chart) { + layouts.removeBox(chart, map.get(chart)); + map.delete(chart); + }, + + beforeUpdate(chart, _args, options) { + const title = map.get(chart); + layouts.configure(chart, title, options); + title.options = options; + }, + + defaults: { + align: 'center', + display: false, + font: { + weight: 'normal', + }, + fullSize: true, + padding: 0, + position: 'top', + text: '', + weight: 1500 // by default greater than legend (1000) and smaller that title (2000) + }, + + defaultRoutes: { + color: 'color' + }, + + descriptors: { + _scriptable: true, + _indexable: false, + }, +}; diff --git a/test/fixtures/plugin.subtitle/basic.js b/test/fixtures/plugin.subtitle/basic.js new file mode 100644 index 00000000000..273d3215f64 --- /dev/null +++ b/test/fixtures/plugin.subtitle/basic.js @@ -0,0 +1,41 @@ + +module.exports = { + config: { + type: 'scatter', + data: { + datasets: [{ + data: [{x: 0, y: 0}, {x: 1, y: 1}, {x: 2, y: 2}], + backgroundColor: 'red', + radius: 1, + hoverRadius: 0 + }], + }, + options: { + scales: { + x: {display: false}, + y: {display: false} + }, + plugins: { + legend: false, + title: { + display: true, + text: 'Title Text', + }, + subtitle: { + display: true, + text: 'SubTitle Text', + }, + filler: false, + tooltip: false + }, + }, + + }, + options: { + spriteText: true, + canvas: { + height: 400, + width: 400 + } + } +}; diff --git a/test/fixtures/plugin.subtitle/basic.png b/test/fixtures/plugin.subtitle/basic.png new file mode 100644 index 00000000000..795ebad6953 Binary files /dev/null and b/test/fixtures/plugin.subtitle/basic.png differ diff --git a/test/specs/plugin.subtitle.tests.js b/test/specs/plugin.subtitle.tests.js new file mode 100644 index 00000000000..10d8ac0a1cb --- /dev/null +++ b/test/specs/plugin.subtitle.tests.js @@ -0,0 +1,3 @@ +describe('plugin.subtitle', function() { + describe('auto', jasmine.fixture.specs('plugin.subtitle')); +});