Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Font: validate style, move defaults to weight #8877

Merged
merged 1 commit into from Apr 10, 2021
Merged

Font: validate style, move defaults to weight #8877

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/configuration/title.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop

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
Open in desktop
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
Open in desktop
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
Open in desktop
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