Align font options with CSS (#8066)

* Align font options with CSS

* Review comments

diff --git a/docs/docs/axes/_common_ticks.md b/docs/docs/axes/_common_ticks.md
index dd4f540e36ca7bba037c98a4b92ac274e9be9638..f9cb435f3cde9a8f26a137d9a295d4452af5f0d8 100644 (file)
--- 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 0256113cd58c8bed562e912e8e2cc419a1085782..14322b771fa8ec5587993d3145407200524fb42b 100644 (file)
--- 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` | <code>number&#124;string</code> | `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 4326fd360454b46082f21115b54b3b48b37ec8a3..f7d59f3015277ed8e3192a8f4341fe213fb7b0cc 100644 (file)
--- 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 d0bd316e8360eb987ab05cc8e8a526d7771780da..30fc591343cdb66827a05b703880e4d841b001fd 100644 (file)
--- 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 ddec88a2e372fbcd09e5e3083e30234cc17d40d0..e80a7f197abf5b1482ef85a873b0c75017b6f51f 100644 (file)
--- 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 187a3d1617beeaa58fff316c1c730f8683f9e6f7..d7435a2638b0288aef195e7deef86f3b3a52283c 100644 (file)
--- 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 78020351228b7d91f7d121205c71517bac789e9b..cd558dff204cff37b70e060a0d5a61981d887ebf 100644 (file)
--- 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 1375e9276ea4985de0f969cfc310ae1b470276ed..498fdfea716d095cde0f29a0362c8a58527e12b9 100644 (file)
--- 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 d9691741f306de88fb10a7f93c1fd4df7f0299fa..fc9fc3fb5337809c681a94d7257c234a82046ee5 100644 (file)
--- 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 70b0e205cb4fc6cd39ad6ac8302c10a728288fd3..b43af3cb1277a3dbc72da5892fe2f6f9c4c77710 100644 (file)
--- 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 980ca15634cb4cb1a243a90cfb9297c0b91ac037..8a445f6e950b33dbef1007874d81dfdcd16311ef 100644 (file)
--- 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 115934e3a52f288e064c0e54be0b76265cbda2b4..ae8c03072ac939135c96cbc553d9b664ece4534a 100644 (file)
--- 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 5350495f9c8eb5eba048329a76250ddbdefa3af7..f1bc4ef884aa5ffd677ffe9b176cf0df0d86b6ff 100644 (file)
--- 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 7a33d39676d027aca729598ddda1e2bb52b90edb..0572990804b2965b786b864a479b55ef62f488ed 100644 (file)
--- 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 4e2f5b9c1e6472a8d738ed66279c08f2227d76cd..b3ccacc7faedfe7730f657bf5bcf093f99b71f54 100644 (file)
--- 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 f31513fbe5fe439df33056451115f1dafb069676..c43be925f4facf9018a682af7dfe8ac771325a54 100644 (file)
--- 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 c343bbd72a6d97f94d4be1e2335f51117c7872df..1948aa829d8e1ce20faec3cb1e17fb1242a3a2e8 100644 (file)
--- 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 836b219bdf8d72ee0d1105965338c47f83a32807..533dee62def7b6998d537ad96d8288447c8fb94e 100644 (file)
--- 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 2062eacee07e11b4ff2c03cfd02cefb7c79f4dfe..7922611dbc9e685b543dcc67b43e92be7d1d895f 100644 (file)
--- 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 6bad385c1222d25c06299ae99a55f2927ad7205f..31beec8fe8ebc44119b0da1ca4c5a68fe5edb926 100644 (file)
--- 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 69d592715ddf9abadfc5b3fe23165b8c0c01ed2c..26c11d5e144ca72abc642bf1ca954849cb865ef9 100644 (file)
--- 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 b3ba80fc1b300da66a8f2723c5109478fa325fcb..aa4356193c261141d238c2c52c36059ed3ee63b5 100644 (file)
--- 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 dd0846d71789bd8d1dd4a831b7b48673fcdd0e2b..894df96d9657cb585eccea1d09604ec206e4b004 100644 (file)
--- 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