Rename LayoutItem.fullWidth to fullSize (#8358)

This commit is contained in:
Jukka Kurkela 2021-01-31 20:44:44 +02:00 committed by GitHub
parent b50fba3759
commit ad84d285d8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 37 additions and 35 deletions

View File

@ -15,7 +15,7 @@ The legend configuration is passed into the `options.plugins.legend` namespace.
| `align` | `string` | `'center'` | Alignment of the legend. [more...](#align) | `align` | `string` | `'center'` | Alignment of the legend. [more...](#align)
| `maxHeight` | `number` | | Maximum height of the legend, in pixels | `maxHeight` | `number` | | Maximum height of the legend, in pixels
| `maxWidth` | `number` | | Maximum width of the legend, in pixels | `maxWidth` | `number` | | Maximum width of the legend, in pixels
| `fullWidth` | `boolean` | `true` | Marks that this box should take the full width of the canvas (pushing down other boxes). This is unlikely to need to be changed in day-to-day use. | `fullSize` | `boolean` | `true` | Marks that this box should take the full width/height of the canvas (moving other boxes). This is unlikely to need to be changed in day-to-day use.
| `onClick` | `function` | | A callback that is called when a click event is registered on a label item. Arguments: `[event, legendItem, legend]`. | `onClick` | `function` | | A callback that is called when a click event is registered on a label item. Arguments: `[event, legendItem, legend]`.
| `onHover` | `function` | | A callback that is called when a 'mousemove' event is registered on top of a label item. Arguments: `[event, legendItem, legend]`. | `onHover` | `function` | | A callback that is called when a 'mousemove' event is registered on top of a label item. Arguments: `[event, legendItem, legend]`.
| `onLeave` | `function` | | A callback that is called when a 'mousemove' event is registered outside of a previously hovered label item. Arguments: `[event, legendItem, legend]`. | `onLeave` | `function` | | A callback that is called when a 'mousemove' event is registered outside of a previously hovered label item. Arguments: `[event, legendItem, legend]`.

View File

@ -402,6 +402,7 @@ The following properties were renamed during v3 development:
* `helpers.callCallback` was renamed to `helpers.callback` * `helpers.callCallback` was renamed to `helpers.callback`
* `helpers.drawRoundedRectangle` was renamed to `helpers.roundedRect` * `helpers.drawRoundedRectangle` was renamed to `helpers.roundedRect`
* `helpers.getValueOrDefault` was renamed to `helpers.valueOrDefault` * `helpers.getValueOrDefault` was renamed to `helpers.valueOrDefault`
* `LayoutItem.fullWidth` was renamed to `LayoutItem.fullSize`
* `Scale.calculateTickRotation` was renamed to `Scale.calculateLabelRotation` * `Scale.calculateTickRotation` was renamed to `Scale.calculateLabelRotation`
* `Tooltip.options.legendColorBackgroupd` was renamed to `Tooltip.options.multiKeyBackground` * `Tooltip.options.legendColorBackgroupd` was renamed to `Tooltip.options.multiKeyBackground`
@ -434,6 +435,7 @@ The private APIs listed below were renamed:
* `DatasetController.onDataUnshift` was renamed to `DatasetController._onDataUnshift` * `DatasetController.onDataUnshift` was renamed to `DatasetController._onDataUnshift`
* `DatasetController.removeElements` was renamed to `DatasetController._removeElements` * `DatasetController.removeElements` was renamed to `DatasetController._removeElements`
* `DatasetController.resyncElements` was renamed to `DatasetController._resyncElements` * `DatasetController.resyncElements` was renamed to `DatasetController._resyncElements`
* `LayoutItem.isFullWidth` was renamed to `LayoutItem.isFullSize`
* `RadialLinearScale.setReductions` was renamed to `RadialLinearScale._setReductions` * `RadialLinearScale.setReductions` was renamed to `RadialLinearScale._setReductions`
* `Scale.handleMargins` was renamed to `Scale._handleMargins` * `Scale.handleMargins` was renamed to `Scale._handleMargins`

View File

@ -324,7 +324,7 @@ class Chart {
each(scales, (scale) => { each(scales, (scale) => {
// Set LayoutItem parameters for backwards compatibility // Set LayoutItem parameters for backwards compatibility
scale.fullWidth = scale.options.fullWidth; scale.fullSize = scale.options.fullSize;
scale.position = scale.options.position; scale.position = scale.options.position;
scale.weight = scale.options.weight; scale.weight = scale.options.weight;
layouts.addBox(me, scale); layouts.addBox(me, scale);

View File

@ -49,11 +49,11 @@ function setLayoutDims(layouts, params) {
layout = layouts[i]; layout = layouts[i];
// store dimensions used instead of available chartArea in fitBoxes // store dimensions used instead of available chartArea in fitBoxes
if (layout.horizontal) { if (layout.horizontal) {
layout.width = layout.box.fullWidth && params.availableWidth; layout.width = layout.box.fullSize && params.availableWidth;
layout.height = params.hBoxMaxHeight; layout.height = params.hBoxMaxHeight;
} else { } else {
layout.width = params.vBoxMaxWidth; layout.width = params.vBoxMaxWidth;
layout.height = layout.box.fullWidth && params.availableHeight; layout.height = layout.box.fullSize && params.availableHeight;
} }
} }
} }
@ -166,7 +166,7 @@ function fitBoxes(boxes, chartArea, params) {
refit = true; refit = true;
} }
} }
if (!box.fullWidth) { // fullWidth boxes don't need to be re-fitted in any case if (!box.fullSize) { // fullSize boxes don't need to be re-fitted in any case
refitBoxes.push(layout); refitBoxes.push(layout);
} }
} }
@ -184,8 +184,8 @@ function placeBoxes(boxes, chartArea, params) {
layout = boxes[i]; layout = boxes[i];
box = layout.box; box = layout.box;
if (layout.horizontal) { if (layout.horizontal) {
box.left = box.fullWidth ? userPadding.left : chartArea.left; box.left = box.fullSize ? userPadding.left : chartArea.left;
box.right = box.fullWidth ? params.outerWidth - userPadding.right : chartArea.left + chartArea.w; box.right = box.fullSize ? params.outerWidth - userPadding.right : chartArea.left + chartArea.w;
box.top = y; box.top = y;
box.bottom = y + box.height; box.bottom = y + box.height;
box.width = box.right - box.left; box.width = box.right - box.left;
@ -193,8 +193,8 @@ function placeBoxes(boxes, chartArea, params) {
} else { } else {
box.left = x; box.left = x;
box.right = x + box.width; box.right = x + box.width;
box.top = box.fullWidth ? userPadding.top : chartArea.top; box.top = box.fullSize ? userPadding.top : chartArea.top;
box.bottom = box.fullWidth ? params.outerHeight - userPadding.right : chartArea.top + chartArea.h; box.bottom = box.fullSize ? params.outerHeight - userPadding.right : chartArea.top + chartArea.h;
box.height = box.bottom - box.top; box.height = box.bottom - box.top;
x = box.right; x = box.right;
} }
@ -219,7 +219,7 @@ defaults.set('layout', {
* @prop {string} position - The position of the item in the chart layout. Possible values are * @prop {string} position - The position of the item in the chart layout. Possible values are
* 'left', 'top', 'right', 'bottom', and 'chartArea' * 'left', 'top', 'right', 'bottom', and 'chartArea'
* @prop {number} weight - The weight used to sort the item. Higher weights are further away from the chart area * @prop {number} weight - The weight used to sort the item. Higher weights are further away from the chart area
* @prop {boolean} fullWidth - if true, and the item is horizontal, then push vertical boxes down * @prop {boolean} fullSize - if true, and the item is horizontal, then push vertical boxes down
* @prop {function} isHorizontal - returns true if the layout item is horizontal (ie. top or bottom) * @prop {function} isHorizontal - returns true if the layout item is horizontal (ie. top or bottom)
* @prop {function} update - Takes two parameters: width and height. Returns size of item * @prop {function} update - Takes two parameters: width and height. Returns size of item
* @prop {function} draw - Draws the element * @prop {function} draw - Draws the element
@ -249,7 +249,7 @@ export default {
} }
// initialize item with default values // initialize item with default values
item.fullWidth = item.fullWidth || false; item.fullSize = item.fullSize || false;
item.position = item.position || 'top'; item.position = item.position || 'top';
item.weight = item.weight || 0; item.weight = item.weight || 0;
// @ts-ignore // @ts-ignore
@ -284,7 +284,7 @@ export default {
* @param {object} options - the new item options. * @param {object} options - the new item options.
*/ */
configure(chart, item, options) { configure(chart, item, options) {
const props = ['fullWidth', 'position', 'weight']; const props = ['fullSize', 'position', 'weight'];
const ilen = props.length; const ilen = props.length;
let i = 0; let i = 0;
let prop; let prop;

View File

@ -906,8 +906,8 @@ export default class Scale extends Element {
/** /**
* @return {boolean} * @return {boolean}
*/ */
isFullWidth() { isFullSize() {
return this.options.fullWidth; return this.options.fullSize;
} }
/** /**

View File

@ -65,7 +65,7 @@ export class Legend extends Element {
this._margins = undefined; this._margins = undefined;
this.position = undefined; this.position = undefined;
this.weight = undefined; this.weight = undefined;
this.fullWidth = undefined; this.fullSize = undefined;
} }
update(maxWidth, maxHeight, margins) { update(maxWidth, maxHeight, margins) {
@ -540,7 +540,7 @@ export default {
display: true, display: true,
position: 'top', position: 'top',
align: 'center', align: 'center',
fullWidth: true, fullSize: true,
reverse: false, reverse: false,
weight: 1000, weight: 1000,

View File

@ -23,7 +23,7 @@ export class Title extends Element {
this.height = undefined; this.height = undefined;
this.position = undefined; this.position = undefined;
this.weight = undefined; this.weight = undefined;
this.fullWidth = undefined; this.fullSize = undefined;
} }
update(maxWidth, maxHeight) { update(maxWidth, maxHeight) {
@ -170,7 +170,7 @@ export default {
font: { font: {
style: 'bold', style: 'bold',
}, },
fullWidth: true, fullSize: true,
padding: 10, padding: 10,
position: 'top', position: 'top',
text: '', text: '',

View File

@ -206,7 +206,7 @@ describe('Chart.layouts', function() {
x2: { x2: {
type: 'category', type: 'category',
position: 'top', position: 'top',
fullWidth: true, fullSize: true,
offset: false offset: false
}, },
y: { y: {

View File

@ -7,7 +7,7 @@ describe('Legend block tests', function() {
display: true, display: true,
position: 'top', position: 'top',
align: 'center', align: 'center',
fullWidth: true, // marks that this box should take the full width of the canvas (pushing down other boxes) fullSize: true,
reverse: false, reverse: false,
weight: 1000, weight: 1000,
@ -768,7 +768,7 @@ describe('Legend block tests', function() {
options: { options: {
plugins: { plugins: {
legend: { legend: {
fullWidth: true, fullSize: true,
position: 'top', position: 'top',
weight: 150 weight: 150
} }
@ -776,16 +776,16 @@ describe('Legend block tests', function() {
} }
}); });
expect(chart.legend.fullWidth).toBe(true); expect(chart.legend.fullSize).toBe(true);
expect(chart.legend.position).toBe('top'); expect(chart.legend.position).toBe('top');
expect(chart.legend.weight).toBe(150); expect(chart.legend.weight).toBe(150);
chart.options.plugins.legend.fullWidth = false; chart.options.plugins.legend.fullSize = false;
chart.options.plugins.legend.position = 'left'; chart.options.plugins.legend.position = 'left';
chart.options.plugins.legend.weight = 42; chart.options.plugins.legend.weight = 42;
chart.update(); chart.update();
expect(chart.legend.fullWidth).toBe(false); expect(chart.legend.fullSize).toBe(false);
expect(chart.legend.position).toBe('left'); expect(chart.legend.position).toBe('left');
expect(chart.legend.weight).toBe(42); expect(chart.legend.weight).toBe(42);
}); });

View File

@ -9,7 +9,7 @@ describe('Title block tests', function() {
color: Chart.defaults.color, color: Chart.defaults.color,
display: false, display: false,
position: 'top', position: 'top',
fullWidth: true, fullSize: true,
weight: 2000, weight: 2000,
font: { font: {
style: 'bold' style: 'bold'
@ -291,7 +291,7 @@ describe('Title block tests', function() {
options: { options: {
plugins: { plugins: {
title: { title: {
fullWidth: true, fullSize: true,
position: 'top', position: 'top',
weight: 150 weight: 150
} }
@ -299,16 +299,16 @@ describe('Title block tests', function() {
} }
}); });
expect(chart.titleBlock.fullWidth).toBe(true); expect(chart.titleBlock.fullSize).toBe(true);
expect(chart.titleBlock.position).toBe('top'); expect(chart.titleBlock.position).toBe('top');
expect(chart.titleBlock.weight).toBe(150); expect(chart.titleBlock.weight).toBe(150);
chart.options.plugins.title.fullWidth = false; chart.options.plugins.title.fullSize = false;
chart.options.plugins.title.position = 'left'; chart.options.plugins.title.position = 'left';
chart.options.plugins.title.weight = 42; chart.options.plugins.title.weight = 42;
chart.update(); chart.update();
expect(chart.titleBlock.fullWidth).toBe(false); expect(chart.titleBlock.fullSize).toBe(false);
expect(chart.titleBlock.position).toBe('left'); expect(chart.titleBlock.position).toBe('left');
expect(chart.titleBlock.weight).toBe(42); expect(chart.titleBlock.weight).toBe(42);
}); });

10
types/index.esm.d.ts vendored
View File

@ -717,7 +717,7 @@ export const layouts: {
configure( configure(
chart: Chart, chart: Chart,
item: LayoutItem, item: LayoutItem,
options: { fullWidth?: number; position?: LayoutPosition; weight?: number } options: { fullSize?: number; position?: LayoutPosition; weight?: number }
): void; ): void;
/** /**
@ -1222,7 +1222,7 @@ export interface Scale<O extends CoreScaleOptions = CoreScaleOptions> extends El
fit(): void; fit(): void;
afterFit(): void; afterFit(): void;
isFullWidth(): boolean; isFullSize(): boolean;
} }
export const Scale: { export const Scale: {
prototype: Scale; prototype: Scale;
@ -2022,10 +2022,10 @@ export interface LegendOptions {
*/ */
align: TextAlign; align: TextAlign;
/** /**
* Marks that this box should take the full width of the canvas (pushing down other boxes). This is unlikely to need to be changed in day-to-day use. * Marks that this box should take the full width/height of the canvas (moving other boxes). This is unlikely to need to be changed in day-to-day use.
* @default true * @default true
*/ */
fullWidth: boolean; fullSize: boolean;
/** /**
* Legend will show datasets in reverse order. * Legend will show datasets in reverse order.
* @default false * @default false
@ -2145,7 +2145,7 @@ export interface TitleOptions {
*/ */
color: Color; color: Color;
font: FontSpec; font: FontSpec;
// fullWidth: boolean; // fullSize: boolean;
/** /**
* Adds padding above and below the title text if a single number is specified. It is also possible to change top and bottom padding separately. * Adds padding above and below the title text if a single number is specified. It is also possible to change top and bottom padding separately.
*/ */

2
types/layout.d.ts vendored
View File

@ -14,7 +14,7 @@ export interface LayoutItem {
/** /**
* if true, and the item is horizontal, then push vertical boxes down * if true, and the item is horizontal, then push vertical boxes down
*/ */
fullWidth: boolean; fullSize: boolean;
/** /**
* Width of item. Must be valid after update() * Width of item. Must be valid after update()
*/ */