Skip to content

Commit

Permalink
Font validate style, move defaults to weight (#8877)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kurkle
kurkle committed Apr 10, 2021
1 parent 9e70913 commit f8885ce
Show file tree
Hide file tree
Showing 13 changed files with 53 additions and 46 deletions.
2 changes: 1 addition & 1 deletion docs/configuration/title.md
View file
Expand Up @@ -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.

Expand Down
4 changes: 2 additions & 2 deletions docs/configuration/tooltip.md
View file
Expand Up @@ -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.
Expand All @@ -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.
Expand Down
4 changes: 2 additions & 2 deletions docs/getting-started/v3-migration.md
View file
Expand Up @@ -147,7 +147,7 @@ options: {
font: function(context) {
if (context.tick && context.tick.major) {
return {
style: 'bold',
weight: 'bold',
color: '#FF0000'
};
}
Expand Down Expand Up @@ -186,7 +186,7 @@ options: {
font: function(context) {
if (context.tick && context.tick.major) {
return {
style: 'bold'
weight: 'bold'
};
}
}
Expand Down
4 changes: 2 additions & 2 deletions docs/samples/scale-options/titles.md
View file
Expand Up @@ -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}
Expand All @@ -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}
}
Expand Down
2 changes: 1 addition & 1 deletion docs/samples/scales/time-max-span.md
View file
Expand Up @@ -101,7 +101,7 @@ const config = {
font: function(context) {
if (context.tick && context.tick.major) {
return {
style: 'bold',
weight: 'bold',
};
}
}
Expand Down
9 changes: 8 additions & 1 deletion src/helpers/helpers.options.js
View file
Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand All @@ -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: ''
};
Expand Down
2 changes: 1 addition & 1 deletion src/plugins/plugin.title.js
View file
Expand Up @@ -148,7 +148,7 @@ export default {
align: 'center',
display: false,
font: {
style: 'bold',
weight: 'bold',
},
fullSize: true,
padding: 10,
Expand Down
4 changes: 2 additions & 2 deletions src/plugins/plugin.tooltip.js
View file
Expand Up @@ -1143,7 +1143,7 @@ export default {
backgroundColor: 'rgba(0,0,0,0.8)',
titleColor: '#fff',
titleFont: {
style: 'bold',
weight: 'bold',
},
titleSpacing: 2,
titleMarginBottom: 6,
Expand All @@ -1157,7 +1157,7 @@ export default {
footerSpacing: 2,
footerMarginTop: 6,
footerFont: {
style: 'bold',
weight: 'bold',
},
footerAlign: 'left',
padding: 6,
Expand Down
2 changes: 1 addition & 1 deletion test/fixtures/scale.timeseries/financial-daily.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

18 changes: 9 additions & 9 deletions test/specs/helpers.options.tests.js
View file
Expand Up @@ -112,16 +112,16 @@ describe('Chart.helpers.options', function() {
Object.assign(Chart.defaults.font, {
family: 'foobar',
size: 42,
style: 'xxxyyy',
style: 'oblique 9deg',
lineHeight: 1.5
});

expect(toFont({})).toEqual({
family: 'foobar',
lineHeight: 63,
size: 42,
string: 'xxxyyy 42px foobar',
style: 'xxxyyy',
string: 'oblique 9deg 42px foobar',
style: 'oblique 9deg',
weight: null
});

Expand All @@ -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
});
});
Expand All @@ -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
});
});
Expand Down
8 changes: 4 additions & 4 deletions test/specs/plugin.title.tests.js
View file
Expand Up @@ -14,7 +14,7 @@ describe('Plugin.title', function() {
fullSize: true,
weight: 2000,
font: {
style: 'bold'
weight: 'bold'
},
padding: 10,
text: ''
Expand Down Expand Up @@ -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']
Expand Down Expand Up @@ -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']
Expand Down Expand Up @@ -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']
Expand Down
36 changes: 18 additions & 18 deletions test/specs/plugin.tooltip.tests.js
View file
Expand Up @@ -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,
});

Expand All @@ -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,
});

Expand Down Expand Up @@ -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,
}));

Expand All @@ -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,
});

Expand Down Expand Up @@ -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,
}));

Expand All @@ -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,
}));

Expand Down Expand Up @@ -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,
});

Expand All @@ -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,
});

Expand Down Expand Up @@ -1341,7 +1341,7 @@ describe('Plugin.Tooltip', function() {
// Title
titleFont: {
family: defaults.font.family,
style: 'bold',
weight: 'bold',
size: defaults.font.size,
},
titleColor: '#fff',
Expand All @@ -1352,7 +1352,7 @@ describe('Plugin.Tooltip', function() {
// Footer
footerFont: {
family: defaults.font.family,
style: 'bold',
weight: 'bold',
size: defaults.font.size,
},
footerColor: '#fff',
Expand Down Expand Up @@ -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']},
Expand All @@ -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: []}
]));
Expand All @@ -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']},
Expand All @@ -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: []}
]));
Expand All @@ -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']},
Expand All @@ -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: []}
]));
Expand All @@ -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']},
Expand All @@ -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: []}
]));
Expand Down

0 comments on commit f8885ce

Please sign in to comment.