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

2026-03-03 06:54:02 +01:00 · 2021-04-10 22:58:11 +03:00
parent 9e70913bed
commit f8885ce7a2
13 changed files with 53 additions and 46 deletions
--- 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.

--- 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.
--- 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'
            };
          }
        }
--- 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}
        }
--- 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',
              };
            }
          }
--- 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: ''
  };
--- 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,
--- 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,
--- 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,
--- 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
      });
    });
--- 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']
--- 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: []}
      ]));
--- 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>>;
  /**