From ddc72fcfbb5af05692ce529c7618cb1eb97b35f0 Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Thu, 19 Nov 2020 20:59:24 +0200 Subject: [PATCH] Align font options with CSS (#8066) * Align font options with CSS * Review comments --- docs/docs/axes/_common_ticks.md | 2 + docs/docs/general/fonts.md | 7 +-- docs/docs/getting-started/v3-migration.md | 8 +-- src/core/core.defaults.js | 21 +++---- src/core/core.scale.js | 16 +++-- src/core/core.typedRegistry.js | 5 +- src/elements/element.arc.js | 2 +- src/elements/element.bar.js | 4 +- src/elements/element.line.js | 4 +- src/elements/element.point.js | 4 +- src/helpers/helpers.options.js | 3 - src/plugins/plugin.legend.js | 6 +- src/plugins/plugin.title.js | 6 +- src/plugins/plugin.tooltip.js | 14 ++--- src/scales/scale.radialLinear.js | 11 +++- test/specs/controller.bubble.tests.js | 4 +- test/specs/controller.radar.tests.js | 12 ++-- test/specs/core.datasetController.tests.js | 6 +- test/specs/core.scale.tests.js | 6 +- test/specs/helpers.options.tests.js | 20 ++---- test/specs/plugin.title.tests.js | 1 + test/specs/plugin.tooltip.tests.js | 71 ++++++++++------------ test/specs/scale.radialLinear.tests.js | 2 + 23 files changed, 112 insertions(+), 123 deletions(-) diff --git a/docs/docs/axes/_common_ticks.md b/docs/docs/axes/_common_ticks.md index dd4f540e3..f9cb435f3 100644 --- a/docs/docs/axes/_common_ticks.md +++ b/docs/docs/axes/_common_ticks.md @@ -7,4 +7,6 @@ | `font` | `Font` | Yes | `defaults.font` | See [Fonts](../general/fonts.md) | `major` | `object` | | `{}` | [Major ticks configuration](./styling.mdx#major-tick-configuration). | `padding` | `number` | | `0` | Sets the offset of the tick labels from the axis +| `textStrokeColor` | `string` | `` | The color of the stroke around the text. +| `textStrokeWidth` | `number` | `0` | Stroke width around the text. | `z` | `number` | | `0` | z-index of tick layer. Useful when ticks are drawn on chart area. Values <= 0 are drawn under datasets, > 0 on top. diff --git a/docs/docs/general/fonts.md b/docs/docs/general/fonts.md index 0256113cd..14322b771 100644 --- a/docs/docs/general/fonts.md +++ b/docs/docs/general/fonts.md @@ -7,7 +7,7 @@ There are special global settings that can change all of the fonts on the chart. For example, in this chart the text will all be red except for the labels in the legend. ```javascript -Chart.defaults.font.color = 'red'; +Chart.defaults.font.size = 16; let chart = new Chart(ctx, { type: 'line', data: data, @@ -16,7 +16,7 @@ let chart = new Chart(ctx, { labels: { // This more specific font property overrides the global property font: { - color: 'black' + size: 14 } } } @@ -26,14 +26,11 @@ let chart = new Chart(ctx, { | Name | Type | Default | Description | ---- | ---- | ------- | ----------- -| `color` | `Color` | `'#666'` | Default font color for all text. | `family` | `string` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Default font family for all text, follows CSS font-family options. | `size` | `number` | `12` | Default font size (in px) for text. Does not apply to radialLinear scale point labels. | `style` | `string` | `'normal'` | Default font style. Does not apply to tooltip title or footer. Does not apply to chart title. Follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). | `weight` | `string` | `undefined` | Default font weight (boldness). (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight)). | `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)). -| `lineWidth` | `number` | `0` | Stroke width around the text. Currently only supported by [ticks](../axes/styling#tick-configuration). -| `strokeStyle` | `string` | `` | The color of the stroke around the text. Currently only supported by [ticks](../axes/styling#tick-configuration). ## Missing Fonts diff --git a/docs/docs/getting-started/v3-migration.md b/docs/docs/getting-started/v3-migration.md index 4326fd360..f7d59f301 100644 --- a/docs/docs/getting-started/v3-migration.md +++ b/docs/docs/getting-started/v3-migration.md @@ -101,8 +101,8 @@ A number of changes were made to the configuration options passed to the `Chart` * `global` namespace was removed from `defaults`. So `Chart.defaults.global` is now `Chart.defaults` * Dataset controller defaults were relocate to `controllers`. For example `Chart.defaults.line` is now `Chart.defaults.controllers.line` * `default` prefix was removed from defaults. For example `Chart.defaults.global.defaultColor` is now `Chart.defaults.color` -* `defaultColor` was renamed to `color` -* `defaultFontColor` was renamed to `font.color` +* `defaultColor` was split to `color`, `borderColor` and `backgroundColor` +* `defaultFontColor` was renamed to `color` * `defaultFontFamily` was renamed to `font.family` * `defaultFontSize` was renamed to `font.size` * `defaultFontStyle` was renamed to `font.style` @@ -169,11 +169,11 @@ options: { major: { enabled: true }, + color: (context) => context.tick && context.tick.major && '#FF0000', font: function(context) { if (context.tick && context.tick.major) { return { - style: 'bold', - color: '#FF0000' + style: 'bold' }; } } diff --git a/src/core/core.defaults.js b/src/core/core.defaults.js index d0bd316e8..30fc59134 100644 --- a/src/core/core.defaults.js +++ b/src/core/core.defaults.js @@ -23,7 +23,10 @@ function getScope(node, key) { */ export class Defaults { constructor() { - this.color = 'rgba(0,0,0,0.1)'; + this.backgroundColor = 'rgba(0,0,0,0.1)'; + this.borderColor = 'rgba(0,0,0,0.1)'; + this.color = '#666'; + this.controllers = {}; this.elements = {}; this.events = [ 'mousemove', @@ -33,31 +36,27 @@ export class Defaults { 'touchmove' ]; this.font = { - color: '#666', family: "'Helvetica Neue', 'Helvetica', 'Arial', sans-serif", size: 12, style: 'normal', lineHeight: 1.2, - weight: null, - lineWidth: 0, - strokeStyle: undefined + weight: null + }; + this.hover = { + onHover: null }; this.interaction = { mode: 'nearest', intersect: true }; - this.hover = { - onHover: null - }; this.maintainAspectRatio = true; this.onHover = null; this.onClick = null; - this.responsive = true; - this.showLine = true; this.plugins = {}; + this.responsive = true; this.scale = undefined; this.scales = {}; - this.controllers = {}; + this.showLine = true; } /** diff --git a/src/core/core.scale.js b/src/core/core.scale.js index ddec88a2e..e80a7f197 100644 --- a/src/core/core.scale.js +++ b/src/core/core.scale.js @@ -29,7 +29,6 @@ defaults.set('scale', { // grid line settings gridLines: { display: true, - color: 'rgba(0,0,0,0.1)', lineWidth: 1, drawBorder: true, drawOnChartArea: true, @@ -76,6 +75,10 @@ defaults.set('scale', { } }); +defaults.route('scale.ticks', 'color', '', 'color'); +defaults.route('scale.gridLines', 'color', '', 'borderColor'); +defaults.route('scale.scaleLabel', 'color', '', 'color'); + /** * Returns a new array containing numItems from arr * @param {any[]} arr @@ -1402,6 +1405,7 @@ export default class Scale extends Element { rotation, label, font, + color: optionTicks.color, textOffset, textAlign, textBaseline, @@ -1574,20 +1578,20 @@ export default class Scale extends Element { for (i = 0, ilen = items.length; i < ilen; ++i) { const item = items[i]; const tickFont = item.font; - const useStroke = tickFont.lineWidth > 0 && tickFont.strokeStyle !== ''; + const useStroke = optionTicks.textStrokeWidth > 0 && optionTicks.textStrokeColor !== ''; // Make sure we draw text in the correct color and font ctx.save(); ctx.translate(item.x, item.y); ctx.rotate(item.rotation); ctx.font = tickFont.string; - ctx.fillStyle = tickFont.color; + ctx.fillStyle = item.color; ctx.textAlign = item.textAlign; ctx.textBaseline = item.textBaseline; if (useStroke) { - ctx.strokeStyle = tickFont.strokeStyle; - ctx.lineWidth = tickFont.lineWidth; + ctx.strokeStyle = optionTicks.textStrokeColor; + ctx.lineWidth = optionTicks.textStrokeWidth; } const label = item.label; @@ -1678,7 +1682,7 @@ export default class Scale extends Element { ctx.rotate(rotation); ctx.textAlign = textAlign; ctx.textBaseline = 'middle'; - ctx.fillStyle = scaleLabelFont.color; + ctx.fillStyle = scaleLabel.color; ctx.font = scaleLabelFont.string; ctx.fillText(scaleLabel.labelString, 0, 0); ctx.restore(); diff --git a/src/core/core.typedRegistry.js b/src/core/core.typedRegistry.js index 187a3d161..d7435a263 100644 --- a/src/core/core.typedRegistry.js +++ b/src/core/core.typedRegistry.js @@ -94,10 +94,13 @@ function registerDefaults(item, scope, parentScope) { function routeDefaults(scope, routes) { Object.keys(routes).forEach(property => { + const propertyParts = property.split('.'); + const sourceName = propertyParts.pop(); + const sourceScope = [scope].concat(propertyParts).join('.'); const parts = routes[property].split('.'); const targetName = parts.pop(); const targetScope = parts.join('.'); - defaults.route(scope, property, targetScope, targetName); + defaults.route(sourceScope, sourceName, targetScope, targetName); }); } diff --git a/src/elements/element.arc.js b/src/elements/element.arc.js index 780203512..cd558dff2 100644 --- a/src/elements/element.arc.js +++ b/src/elements/element.arc.js @@ -221,5 +221,5 @@ ArcElement.defaults = { * @type {any} */ ArcElement.defaultRoutes = { - backgroundColor: 'color' + backgroundColor: 'backgroundColor' }; diff --git a/src/elements/element.bar.js b/src/elements/element.bar.js index 1375e9276..498fdfea7 100644 --- a/src/elements/element.bar.js +++ b/src/elements/element.bar.js @@ -263,6 +263,6 @@ BarElement.defaults = { * @type {any} */ BarElement.defaultRoutes = { - backgroundColor: 'color', - borderColor: 'color' + backgroundColor: 'backgroundColor', + borderColor: 'borderColor' }; diff --git a/src/elements/element.line.js b/src/elements/element.line.js index d9691741f..fc9fc3fb5 100644 --- a/src/elements/element.line.js +++ b/src/elements/element.line.js @@ -390,6 +390,6 @@ LineElement.defaults = { * @type {any} */ LineElement.defaultRoutes = { - backgroundColor: 'color', - borderColor: 'color' + backgroundColor: 'backgroundColor', + borderColor: 'borderColor' }; diff --git a/src/elements/element.point.js b/src/elements/element.point.js index 70b0e205c..b43af3cb1 100644 --- a/src/elements/element.point.js +++ b/src/elements/element.point.js @@ -84,6 +84,6 @@ PointElement.defaults = { * @type {any} */ PointElement.defaultRoutes = { - backgroundColor: 'color', - borderColor: 'color' + backgroundColor: 'backgroundColor', + borderColor: 'borderColor' }; diff --git a/src/helpers/helpers.options.js b/src/helpers/helpers.options.js index 980ca1563..8a445f6e9 100644 --- a/src/helpers/helpers.options.js +++ b/src/helpers/helpers.options.js @@ -125,14 +125,11 @@ export function toFont(options, fallback) { } const font = { - color: valueOrDefault(options.color, fallback.color), family: valueOrDefault(options.family, fallback.family), lineHeight: toLineHeight(valueOrDefault(options.lineHeight, fallback.lineHeight), size), - lineWidth: valueOrDefault(options.lineWidth, fallback.lineWidth), size, style: valueOrDefault(options.style, fallback.style), weight: valueOrDefault(options.weight, fallback.weight), - strokeStyle: valueOrDefault(options.strokeStyle, fallback.strokeStyle), string: '' }; diff --git a/src/plugins/plugin.legend.js b/src/plugins/plugin.legend.js index 115934e3a..ae8c03072 100644 --- a/src/plugins/plugin.legend.js +++ b/src/plugins/plugin.legend.js @@ -311,7 +311,7 @@ export class Legend extends Element { const rtlHelper = getRtlAdapter(opts.rtl, me.left, me._minSize.width); const ctx = me.ctx; const labelFont = toFont(labelOpts.font, me.chart.options.font); - const fontColor = labelFont.color; + const fontColor = labelOpts.color; const fontSize = labelFont.size; let cursor; @@ -542,8 +542,8 @@ export class Legend extends Element { // Canvas setup ctx.textAlign = rtlHelper.textAlign(textAlign); ctx.textBaseline = 'middle'; - ctx.strokeStyle = titleFont.color; - ctx.fillStyle = titleFont.color; + ctx.strokeStyle = titleOpts.color; + ctx.fillStyle = titleOpts.color; ctx.font = titleFont.string; ctx.fillText(titleOpts.text, x, y); diff --git a/src/plugins/plugin.title.js b/src/plugins/plugin.title.js index 5350495f9..f1bc4ef88 100644 --- a/src/plugins/plugin.title.js +++ b/src/plugins/plugin.title.js @@ -182,7 +182,7 @@ export class Title extends Element { ctx.save(); - ctx.fillStyle = fontOpts.color; + ctx.fillStyle = opts.color; ctx.font = fontOpts.string; ctx.translate(titleX, titleY); @@ -267,5 +267,9 @@ export default { position: 'top', text: '', weight: 2000 // by default greater than legend (1000) to be above + }, + + defaultRoutes: { + color: 'color' } }; diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js index 7a33d3967..057299080 100644 --- a/src/plugins/plugin.tooltip.js +++ b/src/plugins/plugin.tooltip.js @@ -653,7 +653,7 @@ export class Tooltip extends Element { titleFont = options.titleFont; titleSpacing = options.titleSpacing; - ctx.fillStyle = options.titleFont.color; + ctx.fillStyle = options.titleColor; ctx.font = titleFont.string; for (i = 0; i < length; ++i) { @@ -745,7 +745,7 @@ export class Tooltip extends Element { pt.x = getAlignedX(me, bodyAlignForCalculation); // Before body lines - ctx.fillStyle = bodyFont.color; + ctx.fillStyle = options.bodyColor; each(me.beforeBody, fillLineOfText); xLinePadding = displayColors && bodyAlignForCalculation !== 'right' @@ -803,7 +803,7 @@ export class Tooltip extends Element { footerFont = options.footerFont; - ctx.fillStyle = options.footerFont.color; + ctx.fillStyle = options.footerColor; ctx.font = footerFont.string; for (i = 0; i < length; ++i) { @@ -1098,22 +1098,22 @@ export default { custom: null, position: 'average', backgroundColor: 'rgba(0,0,0,0.8)', + titleColor: '#fff', titleFont: { style: 'bold', - color: '#fff', }, titleSpacing: 2, titleMarginBottom: 6, titleAlign: 'left', + bodyColor: '#fff', bodySpacing: 2, bodyFont: { - color: '#fff', }, bodyAlign: 'left', + footerColor: '#fff', footerSpacing: 2, footerMarginTop: 6, footerFont: { - color: '#fff', style: 'bold', }, footerAlign: 'left', @@ -1190,7 +1190,7 @@ export default { }; }, labelTextColor() { - return this.options.bodyFont.color; + return this.options.bodyColor; }, labelPointStyle(tooltipItem) { const meta = tooltipItem.chart.getDatasetMeta(tooltipItem.datasetIndex); diff --git a/src/scales/scale.radialLinear.js b/src/scales/scale.radialLinear.js index 4e2f5b9c1..b3ccacc7f 100644 --- a/src/scales/scale.radialLinear.js +++ b/src/scales/scale.radialLinear.js @@ -183,7 +183,7 @@ function drawPointLabels(scale) { const context = scale.getContext(i); const plFont = toFont(resolve([pointLabelOpts.font], context, i), scale.chart.options.font); ctx.font = plFont.string; - ctx.fillStyle = plFont.color; + ctx.fillStyle = pointLabelOpts.color; const angle = toDegrees(scale.getIndexAngle(i)); ctx.textAlign = getTextAlignForAngle(angle); @@ -499,7 +499,7 @@ export default class RadialLinearScale extends LinearScaleBase { ); } - ctx.fillStyle = tickFont.color; + ctx.fillStyle = tickOpts.color; ctx.fillText(tick.label, 0, -offset); }); @@ -526,7 +526,6 @@ RadialLinearScale.defaults = { angleLines: { display: true, - color: 'rgba(0,0,0,0.1)', lineWidth: 1, borderDash: [], borderDashOffset: 0.0 @@ -568,3 +567,9 @@ RadialLinearScale.defaults = { } } }; + +RadialLinearScale.defaultRoutes = { + 'angleLines.color': 'borderColor', + 'pointLabels.color': 'color', + 'ticks.color': 'color' +}; diff --git a/test/specs/controller.bubble.tests.js b/test/specs/controller.bubble.tests.js index f31513fbe..c43be925f 100644 --- a/test/specs/controller.bubble.tests.js +++ b/test/specs/controller.bubble.tests.js @@ -141,8 +141,8 @@ describe('Chart.controllers.bubble', function() { expect(meta.data[i].x).toBeCloseToPixel(expected.x); expect(meta.data[i].y).toBeCloseToPixel(expected.y); expect(meta.data[i].options).toEqual(jasmine.objectContaining({ - backgroundColor: Chart.defaults.color, - borderColor: Chart.defaults.color, + backgroundColor: Chart.defaults.backgroundColor, + borderColor: Chart.defaults.borderColor, borderWidth: 1, hitRadius: 1, radius: expected.r diff --git a/test/specs/controller.radar.tests.js b/test/specs/controller.radar.tests.js index c343bbd72..1948aa829 100644 --- a/test/specs/controller.radar.tests.js +++ b/test/specs/controller.radar.tests.js @@ -100,9 +100,9 @@ describe('Chart.controllers.radar', function() { tension: 0.1, }, point: { - backgroundColor: Chart.defaults.color, + backgroundColor: Chart.defaults.backgroundColor, borderWidth: 1, - borderColor: Chart.defaults.color, + borderColor: Chart.defaults.borderColor, hitRadius: 1, hoverRadius: 4, hoverBorderWidth: 1, @@ -139,9 +139,9 @@ describe('Chart.controllers.radar', function() { expect(meta.data[i].x).toBeCloseToPixel(expected.x); expect(meta.data[i].y).toBeCloseToPixel(expected.y); expect(meta.data[i].options).toEqual(jasmine.objectContaining({ - backgroundColor: Chart.defaults.color, + backgroundColor: Chart.defaults.backgroundColor, borderWidth: 1, - borderColor: Chart.defaults.color, + borderColor: Chart.defaults.borderColor, hitRadius: 1, radius: 3, pointStyle: 'circle', @@ -164,9 +164,9 @@ describe('Chart.controllers.radar', function() { expect(meta.data[i].controlPointNextX).toBeCloseToPixel(expected.cpnx); expect(meta.data[i].controlPointNextY).toBeCloseToPixel(expected.cpny); expect(meta.data[i].options).toEqual(jasmine.objectContaining({ - backgroundColor: Chart.defaults.color, + backgroundColor: Chart.defaults.backgroundColor, borderWidth: 1, - borderColor: Chart.defaults.color, + borderColor: Chart.defaults.borderColor, hitRadius: 1, radius: 3, pointStyle: 'circle', diff --git a/test/specs/core.datasetController.tests.js b/test/specs/core.datasetController.tests.js index 836b219bd..533dee62d 100644 --- a/test/specs/core.datasetController.tests.js +++ b/test/specs/core.datasetController.tests.js @@ -610,8 +610,8 @@ describe('Chart.DatasetController', function() { it('should resolve data element options to the default color', function() { var data0 = [0, 1, 2, 3, 4, 5]; - var oldColor = Chart.defaults.color; - Chart.defaults.color = 'red'; + var oldColor = Chart.defaults.borderColor; + Chart.defaults.borderColor = 'red'; var chart = acquireChart({ type: 'line', data: { @@ -626,7 +626,7 @@ describe('Chart.DatasetController', function() { expect(meta.data[0].options.borderColor).toBe('red'); // Reset old shared state - Chart.defaults.color = oldColor; + Chart.defaults.borderColor = oldColor; }); describe('_resolveOptions', function() { diff --git a/test/specs/core.scale.tests.js b/test/specs/core.scale.tests.js index 2062eacee..7922611db 100644 --- a/test/specs/core.scale.tests.js +++ b/test/specs/core.scale.tests.js @@ -7,13 +7,9 @@ describe('Core.scale', function() { it('should provide default scale label options', function() { expect(Chart.defaults.scale.scaleLabel).toEqual({ - // display property + color: Chart.defaults.color, display: false, - - // actual label labelString: '', - - // top/bottom padding padding: { top: 4, bottom: 4 diff --git a/test/specs/helpers.options.tests.js b/test/specs/helpers.options.tests.js index 6bad385c1..31beec8fe 100644 --- a/test/specs/helpers.options.tests.js +++ b/test/specs/helpers.options.tests.js @@ -1,4 +1,4 @@ -const {toLineHeight, toPadding, toFont, resolve, toTRBLCorners} = Chart.helpers; // from '../../src/helpers/helpers.options'; +const {toLineHeight, toPadding, toFont, resolve, toTRBLCorners} = Chart.helpers; describe('Chart.helpers.options', function() { describe('toLineHeight', function() { @@ -102,7 +102,6 @@ describe('Chart.helpers.options', function() { const defaultFont = Object.assign({}, Chart.defaults.font); Object.assign(Chart.defaults.font, { - color: 'bar', family: 'foobar', size: 42, style: 'xxxyyy', @@ -110,55 +109,44 @@ describe('Chart.helpers.options', function() { }); expect(toFont({})).toEqual({ - color: 'bar', family: 'foobar', lineHeight: 63, size: 42, string: 'xxxyyy 42px foobar', style: 'xxxyyy', - weight: null, - lineWidth: 0, - strokeStyle: undefined + weight: null }); Object.assign(Chart.defaults.font, defaultFont); }); it ('should return a font with given values', function() { expect(toFont({ - color: 'asd', family: 'bla', lineHeight: 8, size: 21, style: 'zzz' })).toEqual({ - color: 'asd', family: 'bla', lineHeight: 8 * 21, size: 21, string: 'zzz 21px bla', style: 'zzz', - weight: null, - lineWidth: 0, - strokeStyle: undefined + weight: null }); }); it ('should handle a string font size', function() { expect(toFont({ - color: 'asd', family: 'bla', lineHeight: 8, size: '21', style: 'zzz' })).toEqual({ - color: 'asd', family: 'bla', lineHeight: 8 * 21, size: 21, string: 'zzz 21px bla', style: 'zzz', - weight: null, - lineWidth: 0, - strokeStyle: undefined + weight: null }); }); it('should return null as a font string if size or family are missing', function() { diff --git a/test/specs/plugin.title.tests.js b/test/specs/plugin.title.tests.js index 69d592715..26c11d5e1 100644 --- a/test/specs/plugin.title.tests.js +++ b/test/specs/plugin.title.tests.js @@ -6,6 +6,7 @@ describe('Title block tests', function() { it('Should have the correct default config', function() { expect(Chart.defaults.plugins.title).toEqual({ align: 'center', + color: Chart.defaults.color, display: false, position: 'top', fullWidth: true, diff --git a/test/specs/plugin.tooltip.tests.js b/test/specs/plugin.tooltip.tests.js index b3ba80fc1..aa4356193 100644 --- a/test/specs/plugin.tooltip.tests.js +++ b/test/specs/plugin.tooltip.tests.js @@ -75,9 +75,9 @@ describe('Plugin.Tooltip', function() { expect(tooltip.options.yPadding).toEqual(6); expect(tooltip.xAlign).toEqual('left'); expect(tooltip.yAlign).toEqual('center'); + expect(tooltip.options.bodyColor).toEqual('#fff'); expect(tooltip.options.bodyFont).toEqual(jasmine.objectContaining({ - color: '#fff', family: defaults.font.family, style: defaults.font.style, size: defaults.font.size, @@ -88,8 +88,8 @@ describe('Plugin.Tooltip', function() { bodySpacing: 2, })); + expect(tooltip.options.titleColor).toEqual('#fff'); expect(tooltip.options.titleFont).toEqual(jasmine.objectContaining({ - color: '#fff', family: defaults.font.family, style: 'bold', size: defaults.font.size, @@ -101,8 +101,8 @@ describe('Plugin.Tooltip', function() { titleMarginBottom: 6, })); + expect(tooltip.options.footerColor).toEqual('#fff'); expect(tooltip.options.footerFont).toEqual(jasmine.objectContaining({ - color: '#fff', family: defaults.font.family, style: 'bold', size: defaults.font.size, @@ -142,11 +142,11 @@ describe('Plugin.Tooltip', function() { afterBody: [], footer: [], labelColors: [{ - borderColor: defaults.color, - backgroundColor: defaults.color + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor }, { - borderColor: defaults.color, - backgroundColor: defaults.color + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor }] })); @@ -241,7 +241,6 @@ describe('Plugin.Tooltip', function() { expect(tooltip.yAlign).toEqual('center'); expect(tooltip.options.bodyFont).toEqual(jasmine.objectContaining({ - color: '#fff', family: defaults.font.family, style: defaults.font.style, size: defaults.font.size, @@ -253,7 +252,6 @@ describe('Plugin.Tooltip', function() { })); expect(tooltip.options.titleFont).toEqual(jasmine.objectContaining({ - color: '#fff', family: defaults.font.family, style: 'bold', size: defaults.font.size, @@ -266,7 +264,6 @@ describe('Plugin.Tooltip', function() { })); expect(tooltip.options.footerFont).toEqual(jasmine.objectContaining({ - color: '#fff', family: defaults.font.family, style: 'bold', size: defaults.font.size, @@ -301,8 +298,8 @@ describe('Plugin.Tooltip', function() { expect(tooltip.labelTextColors).toEqual(['#fff']); expect(tooltip.labelColors).toEqual([{ - borderColor: defaults.color, - backgroundColor: defaults.color + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor }]); expect(tooltip.x).toBeCloseToPixel(267); @@ -396,7 +393,6 @@ describe('Plugin.Tooltip', function() { expect(tooltip.yAlign).toEqual('center'); expect(tooltip.options.bodyFont).toEqual(jasmine.objectContaining({ - color: '#fff', family: defaults.font.family, style: defaults.font.style, size: defaults.font.size, @@ -408,7 +404,6 @@ describe('Plugin.Tooltip', function() { })); expect(tooltip.options.titleFont).toEqual(jasmine.objectContaining({ - color: '#fff', family: defaults.font.family, style: 'bold', size: defaults.font.size, @@ -420,7 +415,6 @@ describe('Plugin.Tooltip', function() { })); expect(tooltip.options.footerFont).toEqual(jasmine.objectContaining({ - color: '#fff', family: defaults.font.family, style: 'bold', size: defaults.font.size, @@ -460,11 +454,11 @@ describe('Plugin.Tooltip', function() { footer: ['beforeFooter', 'footer', 'afterFooter'], labelTextColors: ['labelTextColor', 'labelTextColor'], labelColors: [{ - borderColor: defaults.color, - backgroundColor: defaults.color + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor }, { - borderColor: defaults.color, - backgroundColor: defaults.color + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor }], labelPointStyles: [{ pointStyle: 'labelPointStyle', @@ -580,11 +574,11 @@ describe('Plugin.Tooltip', function() { afterBody: [], footer: [], labelColors: [{ - borderColor: defaults.color, - backgroundColor: defaults.color + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor }, { - borderColor: defaults.color, - backgroundColor: defaults.color + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor }] })); @@ -651,11 +645,11 @@ describe('Plugin.Tooltip', function() { afterBody: [], footer: [], labelColors: [{ - borderColor: defaults.color, - backgroundColor: defaults.color + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor }, { - borderColor: defaults.color, - backgroundColor: defaults.color + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor }] })); @@ -723,11 +717,11 @@ describe('Plugin.Tooltip', function() { afterBody: [], footer: [], labelColors: [{ - borderColor: defaults.color, - backgroundColor: defaults.color + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor }, { - borderColor: defaults.color, - backgroundColor: defaults.color + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor }] })); @@ -794,8 +788,8 @@ describe('Plugin.Tooltip', function() { afterBody: [], footer: [], labelColors: [{ - borderColor: defaults.color, - backgroundColor: defaults.color + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor }] })); @@ -1229,7 +1223,6 @@ describe('Plugin.Tooltip', function() { expect(tooltip.yAlign).toEqual('top'); expect(tooltip.options.bodyFont).toEqual(jasmine.objectContaining({ - color: '#fff', family: defaults.font.family, style: defaults.font.style, size: defaults.font.size, @@ -1241,7 +1234,6 @@ describe('Plugin.Tooltip', function() { })); expect(tooltip.options.titleFont).toEqual(jasmine.objectContaining({ - color: '#fff', family: defaults.font.family, style: 'bold', size: defaults.font.size, @@ -1254,7 +1246,6 @@ describe('Plugin.Tooltip', function() { })); expect(tooltip.options.footerFont).toEqual(jasmine.objectContaining({ - color: '#fff', family: defaults.font.family, style: 'bold', size: defaults.font.size, @@ -1294,11 +1285,11 @@ describe('Plugin.Tooltip', function() { footer: ['beforeFooter', 'newline', 'footer', 'newline', 'afterFooter', 'newline'], labelTextColors: ['labelTextColor', 'labelTextColor'], labelColors: [{ - borderColor: defaults.color, - backgroundColor: defaults.color + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor }, { - borderColor: defaults.color, - backgroundColor: defaults.color + borderColor: defaults.borderColor, + backgroundColor: defaults.backgroundColor }] })); diff --git a/test/specs/scale.radialLinear.tests.js b/test/specs/scale.radialLinear.tests.js index dd0846d71..894df96d9 100644 --- a/test/specs/scale.radialLinear.tests.js +++ b/test/specs/scale.radialLinear.tests.js @@ -32,6 +32,7 @@ describe('Test the radial linear scale', function() { }, ticks: { + color: Chart.defaults.color, showLabelBackdrop: true, backdropColor: 'rgba(255,255,255,0.75)', backdropPaddingY: 2, @@ -40,6 +41,7 @@ describe('Test the radial linear scale', function() { }, pointLabels: { + color: Chart.defaults.color, display: true, font: { size: 10 -- 2.47.2