Font validate style, move defaults to `weight` (#8877)

diff --git a/docs/configuration/title.md b/docs/configuration/title.md
index 4e9f30f004b1ebb71a56de5f1a57ada064c51f47..3bd78c07d2a4166fc9a34e37620cebab005289f3 100644 (file)
--- a/docs/configuration/title.md
+++ b/docs/configuration/title.md
@@ -13,7 +13,7 @@ Namespace: `options.plugins.title`, the global options for the chart title is de
 | `display` | `boolean` | `false` | Yes | Is the title shown?
 | `fullSize` | `boolean` | `true` | Yes | Marks that this box should take the full width/height of the canvas. If `false`, the box is sized and placed above/beside the chart area.
 | `position` | `string` | `'top'` | Yes | Position of title. [more...](#position)
-| `font` | `Font` | `{style: 'bold'}` | Yes | See [Fonts](../general/fonts.md)
+| `font` | `Font` | `{weight: 'bold'}` | Yes | See [Fonts](../general/fonts.md)
 | `padding` | [`Padding`](../general/padding.md) | `10` | Yes | Padding to apply around the title. Only `top` and `bottom` are implemented.
 | `text` | `string`\|`string[]` | `''` | Yes | Title text to display. If specified as an array, text is rendered on multiple lines.
 

diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md
index 145f083d90e030795072e3be73195573849b728d..3c9764488de3539811184c119e6b80cbac06818b 100644 (file)
--- a/docs/configuration/tooltip.md
+++ b/docs/configuration/tooltip.md
@@ -16,7 +16,7 @@ Namespace: `options.plugins.tooltip`, the global options for the chart tooltips
 | `filter` | `function` | | Filter tooltip items. [more...](#filter-callback)
 | `backgroundColor` | [`Color`](../general/colors.md) | `'rgba(0, 0, 0, 0.8)'` | Background color of the tooltip.
 | `titleColor` | [`Color`](../general/colors.md) | `'#fff'` | Color of title text.
-| `titleFont` | `Font` | `{style: 'bold'}` | See [Fonts](../general/fonts.md).
+| `titleFont` | `Font` | `{weight: 'bold'}` | See [Fonts](../general/fonts.md).
 | `titleAlign` | `string` | `'left'` | Horizontal alignment of the title text lines. [more...](#alignment)
 | `titleSpacing` | `number` | `2` | Spacing to add to top and bottom of each title line.
 | `titleMarginBottom` | `number` | `6` | Margin to add on bottom of title section.
@@ -25,7 +25,7 @@ Namespace: `options.plugins.tooltip`, the global options for the chart tooltips
 | `bodyAlign` | `string` | `'left'` | Horizontal alignment of the body text lines. [more...](#alignment)
 | `bodySpacing` | `number` | `2` | Spacing to add to top and bottom of each tooltip item.
 | `footerColor` | [`Color`](../general/colors.md) | `'#fff'` | Color of footer text.
-| `footerFont` | `Font` | `{style: 'bold'}` | See [Fonts](../general/fonts.md).
+| `footerFont` | `Font` | `{weight: 'bold'}` | See [Fonts](../general/fonts.md).
 | `footerAlign` | `string` | `'left'` | Horizontal alignment of the footer text lines. [more...](#alignment)
 | `footerSpacing` | `number` | `2` | Spacing to add to top and bottom of each footer line.
 | `footerMarginTop` | `number` | `6` | Margin to add before drawing the footer.

diff --git a/docs/getting-started/v3-migration.md b/docs/getting-started/v3-migration.md
index 7390801c502dea82b835f17861fe6062a22bfc33..8491b3d87ae9ee77443d50f97e5062b2dcf2b20c 100644 (file)
--- a/docs/getting-started/v3-migration.md
+++ b/docs/getting-started/v3-migration.md
@@ -147,7 +147,7 @@ options: {
         font: function(context) {
           if (context.tick && context.tick.major) {
             return {
-              style: 'bold',
+              weight: 'bold',
               color: '#FF0000'
             };
           }
@@ -186,7 +186,7 @@ options: {
         font: function(context) {
           if (context.tick && context.tick.major) {
             return {
-              style: 'bold'
+              weight: 'bold'
             };
           }
         }

diff --git a/docs/samples/scale-options/titles.md b/docs/samples/scale-options/titles.md
index fdb1ea9a6688a35d8e8286af054e49a9ea87472e..b8c1a9c364dab4b05ae733c971909a7cc2e63494 100644 (file)
--- a/docs/samples/scale-options/titles.md
+++ b/docs/samples/scale-options/titles.md
@@ -43,7 +43,7 @@ const config = {
           font: {
             family: 'Comic Sans MS',
             size: 20,
-            style: 'bold',
+            weight: 'bold',
             lineHeight: 1.2,
           },
           padding: {top: 20, left: 0, right: 0, bottom: 0}
@@ -59,7 +59,7 @@ const config = {
             family: 'Times',
             size: 20,
             style: 'normal',
-            lineHeight: 1.2,
+            lineHeight: 1.2
           },
           padding: {top: 30, left: 0, right: 0, bottom: 0}
         }

diff --git a/docs/samples/scales/time-max-span.md b/docs/samples/scales/time-max-span.md
index dc144c95e0b182df9cd51091b81443dbbc88ee97..25c509373ab954a3d36f8aa0124d31484e6978ae 100644 (file)
--- a/docs/samples/scales/time-max-span.md
+++ b/docs/samples/scales/time-max-span.md
@@ -101,7 +101,7 @@ const config = {
           font: function(context) {
             if (context.tick && context.tick.major) {
               return {
-                style: 'bold',
+                weight: 'bold',
               };
             }
           }

diff --git a/src/helpers/helpers.options.js b/src/helpers/helpers.options.js
index 70846e725eaf8a36b60d0e1db0d79f86dc51c257..7453a54bc548433696f11432bbc75b3098a08200 100644 (file)
--- a/src/helpers/helpers.options.js
+++ b/src/helpers/helpers.options.js
@@ -3,6 +3,7 @@ import {isArray, isObject, toDimension, valueOrDefault} from './helpers.core';
 import {toFontString} from './helpers.canvas';
 
 const LINE_HEIGHT = new RegExp(/^(normal|(\d+(?:\.\d+)?)(px|em|%)?)$/);
+const FONT_STYLE = new RegExp(/^(normal|italic|initial|inherit|unset|(oblique( -?[0-9]?[0-9]deg)?))$/);
 
 /**
  * @alias Chart.helpers.options
@@ -95,6 +96,7 @@ export function toPadding(value) {
   return obj;
 }
 
+
 /**
  * Parses font options and returns the font object.
  * @param {object} options - A object that contains font options to be parsed.
@@ -111,12 +113,17 @@ export function toFont(options, fallback) {
   if (typeof size === 'string') {
     size = parseInt(size, 10);
   }
+  let style = valueOrDefault(options.style, fallback.style);
+  if (style && !('' + style).match(FONT_STYLE)) {
+    console.warn('Invalid font style specified: "' + style + '"');
+    style = '';
+  }
 
   const font = {
     family: valueOrDefault(options.family, fallback.family),
     lineHeight: toLineHeight(valueOrDefault(options.lineHeight, fallback.lineHeight), size),
     size,
-    style: valueOrDefault(options.style, fallback.style),
+    style,
     weight: valueOrDefault(options.weight, fallback.weight),
     string: ''
   };

diff --git a/src/plugins/plugin.title.js b/src/plugins/plugin.title.js
index ba1f4ff67cf5046c9242af5616bf90872e702782..f55abdfbe7b6712e82cc79a21123539cb24e7842 100644 (file)
--- a/src/plugins/plugin.title.js
+++ b/src/plugins/plugin.title.js
@@ -148,7 +148,7 @@ export default {
     align: 'center',
     display: false,
     font: {
-      style: 'bold',
+      weight: 'bold',
     },
     fullSize: true,
     padding: 10,

diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js
index 419a8b8767cb48c70baa53fd26c4e4c07798338e..d77c387372a6138349bcac9af5087ca5414ac4c7 100644 (file)
--- a/src/plugins/plugin.tooltip.js
+++ b/src/plugins/plugin.tooltip.js
@@ -1143,7 +1143,7 @@ export default {
     backgroundColor: 'rgba(0,0,0,0.8)',
     titleColor: '#fff',
     titleFont: {
-      style: 'bold',
+      weight: 'bold',
     },
     titleSpacing: 2,
     titleMarginBottom: 6,
@@ -1157,7 +1157,7 @@ export default {
     footerSpacing: 2,
     footerMarginTop: 6,
     footerFont: {
-      style: 'bold',
+      weight: 'bold',
     },
     footerAlign: 'left',
     padding: 6,

diff --git a/test/fixtures/scale.timeseries/financial-daily.js b/test/fixtures/scale.timeseries/financial-daily.js
index 465f70f3d19628846112a896a76ef77434f3a9b8..52dcb9614d3d1beabaa096816fcc33772c1e9a87 100644 (file)
--- a/test/fixtures/scale.timeseries/financial-daily.js
+++ b/test/fixtures/scale.timeseries/financial-daily.js
@@ -27,7 +27,7 @@ module.exports = {
               enabled: true,
             },
             font: function(context) {
-              return context.tick && context.tick.major ? {style: 'bold'} : undefined;
+              return context.tick && context.tick.major ? {weight: 'bold'} : undefined;
             },
             source: 'data',
             autoSkip: true,

diff --git a/test/specs/helpers.options.tests.js b/test/specs/helpers.options.tests.js
index a71c6f37fe6ba1a8df0319e4366f577b9e6a21a6..c7186e1fb9602ee68d4f0abf33c6a46c0e712eaf 100644 (file)
--- a/test/specs/helpers.options.tests.js
+++ b/test/specs/helpers.options.tests.js
@@ -112,7 +112,7 @@ describe('Chart.helpers.options', function() {
       Object.assign(Chart.defaults.font, {
         family: 'foobar',
         size: 42,
-        style: 'xxxyyy',
+        style: 'oblique 9deg',
         lineHeight: 1.5
       });
 
@@ -120,8 +120,8 @@ describe('Chart.helpers.options', function() {
         family: 'foobar',
         lineHeight: 63,
         size: 42,
-        string: 'xxxyyy 42px foobar',
-        style: 'xxxyyy',
+        string: 'oblique 9deg 42px foobar',
+        style: 'oblique 9deg',
         weight: null
       });
 
@@ -132,13 +132,13 @@ describe('Chart.helpers.options', function() {
         family: 'bla',
         lineHeight: 8,
         size: 21,
-        style: 'zzz'
+        style: 'oblique -90deg'
       })).toEqual({
         family: 'bla',
         lineHeight: 8 * 21,
         size: 21,
-        string: 'zzz 21px bla',
-        style: 'zzz',
+        string: 'oblique -90deg 21px bla',
+        style: 'oblique -90deg',
         weight: null
       });
     });
@@ -147,13 +147,13 @@ describe('Chart.helpers.options', function() {
         family: 'bla',
         lineHeight: 8,
         size: '21',
-        style: 'zzz'
+        style: 'italic'
       })).toEqual({
         family: 'bla',
         lineHeight: 8 * 21,
         size: 21,
-        string: 'zzz 21px bla',
-        style: 'zzz',
+        string: 'italic 21px bla',
+        style: 'italic',
         weight: null
       });
     });

diff --git a/test/specs/plugin.title.tests.js b/test/specs/plugin.title.tests.js
index 7c1c25849cf33e0bfe654bf516a751722ed9f77f..564c509278bf7987dd2d4c28dec4b1575f40dd9e 100644 (file)
--- a/test/specs/plugin.title.tests.js
+++ b/test/specs/plugin.title.tests.js
@@ -14,7 +14,7 @@ describe('Plugin.title', function() {
       fullSize: true,
       weight: 2000,
       font: {
-        style: 'bold'
+        weight: 'bold'
       },
       padding: 10,
       text: ''
@@ -139,7 +139,7 @@ describe('Plugin.title', function() {
       args: [0]
     }, {
       name: 'setFont',
-      args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"],
+      args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"],
     }, {
       name: 'setFillStyle',
       args: ['#666']
@@ -200,7 +200,7 @@ describe('Plugin.title', function() {
       args: [-0.5 * Math.PI]
     }, {
       name: 'setFont',
-      args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"],
+      args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"],
     }, {
       name: 'setFillStyle',
       args: ['#666']
@@ -242,7 +242,7 @@ describe('Plugin.title', function() {
       args: [0.5 * Math.PI]
     }, {
       name: 'setFont',
-      args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"],
+      args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"],
     }, {
       name: 'setFillStyle',
       args: ['#666']

diff --git a/test/specs/plugin.tooltip.tests.js b/test/specs/plugin.tooltip.tests.js
index d7bc06682df1f7a9c713276fa513782d02b9c4fc..9cf619c5efa4ef2ba4420f75646f1b474997cf62 100644 (file)
--- a/test/specs/plugin.tooltip.tests.js
+++ b/test/specs/plugin.tooltip.tests.js
@@ -104,7 +104,7 @@ describe('Plugin.Tooltip', function() {
       expect(tooltip.options.titleColor).toEqual('#fff');
       expect(tooltip.options.titleFont).toEqualOptions({
         family: defaults.font.family,
-        style: 'bold',
+        weight: 'bold',
         size: defaults.font.size,
       });
 
@@ -117,7 +117,7 @@ describe('Plugin.Tooltip', function() {
       expect(tooltip.options.footerColor).toEqual('#fff');
       expect(tooltip.options.footerFont).toEqualOptions({
         family: defaults.font.family,
-        style: 'bold',
+        weight: 'bold',
         size: defaults.font.size,
       });
 
@@ -269,7 +269,7 @@ describe('Plugin.Tooltip', function() {
 
     expect(tooltip.options.titleFont).toEqual(jasmine.objectContaining({
       family: defaults.font.family,
-      style: 'bold',
+      weight: 'bold',
       size: defaults.font.size,
     }));
 
@@ -281,7 +281,7 @@ describe('Plugin.Tooltip', function() {
 
     expect(tooltip.options.footerFont).toEqualOptions({
       family: defaults.font.family,
-      style: 'bold',
+      weight: 'bold',
       size: defaults.font.size,
     });
 
@@ -422,7 +422,7 @@ describe('Plugin.Tooltip', function() {
 
     expect(tooltip.options.titleFont).toEqual(jasmine.objectContaining({
       family: defaults.font.family,
-      style: 'bold',
+      weight: 'bold',
       size: defaults.font.size,
     }));
 
@@ -433,7 +433,7 @@ describe('Plugin.Tooltip', function() {
 
     expect(tooltip.options.footerFont).toEqual(jasmine.objectContaining({
       family: defaults.font.family,
-      style: 'bold',
+      weight: 'bold',
       size: defaults.font.size,
     }));
 
@@ -1251,7 +1251,7 @@ describe('Plugin.Tooltip', function() {
 
     expect(tooltip.options.titleFont).toEqualOptions({
       family: defaults.font.family,
-      style: 'bold',
+      weight: 'bold',
       size: defaults.font.size,
     });
 
@@ -1263,7 +1263,7 @@ describe('Plugin.Tooltip', function() {
 
     expect(tooltip.options.footerFont).toEqualOptions({
       family: defaults.font.family,
-      style: 'bold',
+      weight: 'bold',
       size: defaults.font.size,
     });
 
@@ -1341,7 +1341,7 @@ describe('Plugin.Tooltip', function() {
           // Title
           titleFont: {
             family: defaults.font.family,
-            style: 'bold',
+            weight: 'bold',
             size: defaults.font.size,
           },
           titleColor: '#fff',
@@ -1352,7 +1352,7 @@ describe('Plugin.Tooltip', function() {
           // Footer
           footerFont: {
             family: defaults.font.family,
-            style: 'bold',
+            weight: 'bold',
             size: defaults.font.size,
           },
           footerColor: '#fff',
@@ -1440,7 +1440,7 @@ describe('Plugin.Tooltip', function() {
         {name: 'setTextAlign', args: ['left']},
         {name: 'setTextBaseline', args: ['middle']},
         {name: 'setFillStyle', args: ['#fff']},
-        {name: 'setFont', args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]},
+        {name: 'setFont', args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]},
         {name: 'fillText', args: ['title', 105, 112.2]},
         {name: 'setTextAlign', args: ['left']},
         {name: 'setTextBaseline', args: ['middle']},
@@ -1451,7 +1451,7 @@ describe('Plugin.Tooltip', function() {
         {name: 'setTextAlign', args: ['left']},
         {name: 'setTextBaseline', args: ['middle']},
         {name: 'setFillStyle', args: ['#fff']},
-        {name: 'setFont', args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]},
+        {name: 'setFont', args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]},
         {name: 'fillText', args: ['footer', 105, 153]},
         {name: 'restore', args: []}
       ]));
@@ -1466,7 +1466,7 @@ describe('Plugin.Tooltip', function() {
         {name: 'setTextAlign', args: ['right']},
         {name: 'setTextBaseline', args: ['middle']},
         {name: 'setFillStyle', args: ['#fff']},
-        {name: 'setFont', args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]},
+        {name: 'setFont', args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]},
         {name: 'fillText', args: ['title', 195, 112.2]},
         {name: 'setTextAlign', args: ['right']},
         {name: 'setTextBaseline', args: ['middle']},
@@ -1477,7 +1477,7 @@ describe('Plugin.Tooltip', function() {
         {name: 'setTextAlign', args: ['right']},
         {name: 'setTextBaseline', args: ['middle']},
         {name: 'setFillStyle', args: ['#fff']},
-        {name: 'setFont', args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]},
+        {name: 'setFont', args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]},
         {name: 'fillText', args: ['footer', 195, 153]},
         {name: 'restore', args: []}
       ]));
@@ -1492,7 +1492,7 @@ describe('Plugin.Tooltip', function() {
         {name: 'setTextAlign', args: ['center']},
         {name: 'setTextBaseline', args: ['middle']},
         {name: 'setFillStyle', args: ['#fff']},
-        {name: 'setFont', args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]},
+        {name: 'setFont', args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]},
         {name: 'fillText', args: ['title', 150, 112.2]},
         {name: 'setTextAlign', args: ['center']},
         {name: 'setTextBaseline', args: ['middle']},
@@ -1503,7 +1503,7 @@ describe('Plugin.Tooltip', function() {
         {name: 'setTextAlign', args: ['center']},
         {name: 'setTextBaseline', args: ['middle']},
         {name: 'setFillStyle', args: ['#fff']},
-        {name: 'setFont', args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]},
+        {name: 'setFont', args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]},
         {name: 'fillText', args: ['footer', 150, 153]},
         {name: 'restore', args: []}
       ]));
@@ -1518,7 +1518,7 @@ describe('Plugin.Tooltip', function() {
         {name: 'setTextAlign', args: ['right']},
         {name: 'setTextBaseline', args: ['middle']},
         {name: 'setFillStyle', args: ['#fff']},
-        {name: 'setFont', args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]},
+        {name: 'setFont', args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]},
         {name: 'fillText', args: ['title', 195, 112.2]},
         {name: 'setTextAlign', args: ['center']},
         {name: 'setTextBaseline', args: ['middle']},
@@ -1529,7 +1529,7 @@ describe('Plugin.Tooltip', function() {
         {name: 'setTextAlign', args: ['left']},
         {name: 'setTextBaseline', args: ['middle']},
         {name: 'setFillStyle', args: ['#fff']},
-        {name: 'setFont', args: ["bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]},
+        {name: 'setFont', args: ["normal bold 12px 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"]},
         {name: 'fillText', args: ['footer', 105, 153]},
         {name: 'restore', args: []}
       ]));

diff --git a/types/index.esm.d.ts b/types/index.esm.d.ts
index a0535beb3dae9d4e41a1fffc73e1bdfdb337906a..51ec1f7f622adce00ae36a7ef0d1efd5e5ab96b7 100644 (file)
--- a/types/index.esm.d.ts
+++ b/types/index.esm.d.ts
@@ -2434,7 +2434,7 @@ export interface TooltipOptions<TType extends ChartType> extends CoreInteraction
   titleColor: Scriptable<Color, ScriptableTooltipContext<TType>>;
   /**
    * See Fonts
-   * @default {style: 'bold'}
+   * @default {weight: 'bold'}
    */
   titleFont: Scriptable<FontSpec, ScriptableTooltipContext<TType>>;
   /**
@@ -2489,7 +2489,7 @@ export interface TooltipOptions<TType extends ChartType> extends CoreInteraction
   footerColor: Scriptable<Color, ScriptableTooltipContext<TType>>;
   /**
    * See Fonts
-   * @default {style: 'bold'}
+   * @default {weight: 'bold'}
    */
   footerFont: Scriptable<FontSpec, ScriptableTooltipContext<TType>>;
   /**