mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00:00
Rename LayoutItem.fullWidth to fullSize (#8358)
This commit is contained in:
parent
b50fba3759
commit
ad84d285d8
@ -15,7 +15,7 @@ The legend configuration is passed into the `options.plugins.legend` namespace.
|
||||
| `align` | `string` | `'center'` | Alignment of the legend. [more...](#align)
|
||||
| `maxHeight` | `number` | | Maximum height 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]`.
|
||||
| `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]`.
|
||||
|
||||
@ -402,6 +402,7 @@ The following properties were renamed during v3 development:
|
||||
* `helpers.callCallback` was renamed to `helpers.callback`
|
||||
* `helpers.drawRoundedRectangle` was renamed to `helpers.roundedRect`
|
||||
* `helpers.getValueOrDefault` was renamed to `helpers.valueOrDefault`
|
||||
* `LayoutItem.fullWidth` was renamed to `LayoutItem.fullSize`
|
||||
* `Scale.calculateTickRotation` was renamed to `Scale.calculateLabelRotation`
|
||||
* `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.removeElements` was renamed to `DatasetController._removeElements`
|
||||
* `DatasetController.resyncElements` was renamed to `DatasetController._resyncElements`
|
||||
* `LayoutItem.isFullWidth` was renamed to `LayoutItem.isFullSize`
|
||||
* `RadialLinearScale.setReductions` was renamed to `RadialLinearScale._setReductions`
|
||||
* `Scale.handleMargins` was renamed to `Scale._handleMargins`
|
||||
|
||||
|
||||
@ -324,7 +324,7 @@ class Chart {
|
||||
|
||||
each(scales, (scale) => {
|
||||
// Set LayoutItem parameters for backwards compatibility
|
||||
scale.fullWidth = scale.options.fullWidth;
|
||||
scale.fullSize = scale.options.fullSize;
|
||||
scale.position = scale.options.position;
|
||||
scale.weight = scale.options.weight;
|
||||
layouts.addBox(me, scale);
|
||||
|
||||
@ -49,11 +49,11 @@ function setLayoutDims(layouts, params) {
|
||||
layout = layouts[i];
|
||||
// store dimensions used instead of available chartArea in fitBoxes
|
||||
if (layout.horizontal) {
|
||||
layout.width = layout.box.fullWidth && params.availableWidth;
|
||||
layout.width = layout.box.fullSize && params.availableWidth;
|
||||
layout.height = params.hBoxMaxHeight;
|
||||
} else {
|
||||
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;
|
||||
}
|
||||
}
|
||||
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);
|
||||
}
|
||||
}
|
||||
@ -184,8 +184,8 @@ function placeBoxes(boxes, chartArea, params) {
|
||||
layout = boxes[i];
|
||||
box = layout.box;
|
||||
if (layout.horizontal) {
|
||||
box.left = box.fullWidth ? userPadding.left : chartArea.left;
|
||||
box.right = box.fullWidth ? params.outerWidth - userPadding.right : chartArea.left + chartArea.w;
|
||||
box.left = box.fullSize ? userPadding.left : chartArea.left;
|
||||
box.right = box.fullSize ? params.outerWidth - userPadding.right : chartArea.left + chartArea.w;
|
||||
box.top = y;
|
||||
box.bottom = y + box.height;
|
||||
box.width = box.right - box.left;
|
||||
@ -193,8 +193,8 @@ function placeBoxes(boxes, chartArea, params) {
|
||||
} else {
|
||||
box.left = x;
|
||||
box.right = x + box.width;
|
||||
box.top = box.fullWidth ? userPadding.top : chartArea.top;
|
||||
box.bottom = box.fullWidth ? params.outerHeight - userPadding.right : chartArea.top + chartArea.h;
|
||||
box.top = box.fullSize ? userPadding.top : chartArea.top;
|
||||
box.bottom = box.fullSize ? params.outerHeight - userPadding.right : chartArea.top + chartArea.h;
|
||||
box.height = box.bottom - box.top;
|
||||
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
|
||||
* '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 {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} update - Takes two parameters: width and height. Returns size of item
|
||||
* @prop {function} draw - Draws the element
|
||||
@ -249,7 +249,7 @@ export default {
|
||||
}
|
||||
|
||||
// initialize item with default values
|
||||
item.fullWidth = item.fullWidth || false;
|
||||
item.fullSize = item.fullSize || false;
|
||||
item.position = item.position || 'top';
|
||||
item.weight = item.weight || 0;
|
||||
// @ts-ignore
|
||||
@ -284,7 +284,7 @@ export default {
|
||||
* @param {object} options - the new item options.
|
||||
*/
|
||||
configure(chart, item, options) {
|
||||
const props = ['fullWidth', 'position', 'weight'];
|
||||
const props = ['fullSize', 'position', 'weight'];
|
||||
const ilen = props.length;
|
||||
let i = 0;
|
||||
let prop;
|
||||
|
||||
@ -906,8 +906,8 @@ export default class Scale extends Element {
|
||||
/**
|
||||
* @return {boolean}
|
||||
*/
|
||||
isFullWidth() {
|
||||
return this.options.fullWidth;
|
||||
isFullSize() {
|
||||
return this.options.fullSize;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -65,7 +65,7 @@ export class Legend extends Element {
|
||||
this._margins = undefined;
|
||||
this.position = undefined;
|
||||
this.weight = undefined;
|
||||
this.fullWidth = undefined;
|
||||
this.fullSize = undefined;
|
||||
}
|
||||
|
||||
update(maxWidth, maxHeight, margins) {
|
||||
@ -540,7 +540,7 @@ export default {
|
||||
display: true,
|
||||
position: 'top',
|
||||
align: 'center',
|
||||
fullWidth: true,
|
||||
fullSize: true,
|
||||
reverse: false,
|
||||
weight: 1000,
|
||||
|
||||
|
||||
@ -23,7 +23,7 @@ export class Title extends Element {
|
||||
this.height = undefined;
|
||||
this.position = undefined;
|
||||
this.weight = undefined;
|
||||
this.fullWidth = undefined;
|
||||
this.fullSize = undefined;
|
||||
}
|
||||
|
||||
update(maxWidth, maxHeight) {
|
||||
@ -170,7 +170,7 @@ export default {
|
||||
font: {
|
||||
style: 'bold',
|
||||
},
|
||||
fullWidth: true,
|
||||
fullSize: true,
|
||||
padding: 10,
|
||||
position: 'top',
|
||||
text: '',
|
||||
|
||||
@ -206,7 +206,7 @@ describe('Chart.layouts', function() {
|
||||
x2: {
|
||||
type: 'category',
|
||||
position: 'top',
|
||||
fullWidth: true,
|
||||
fullSize: true,
|
||||
offset: false
|
||||
},
|
||||
y: {
|
||||
|
||||
@ -7,7 +7,7 @@ describe('Legend block tests', function() {
|
||||
display: true,
|
||||
position: 'top',
|
||||
align: 'center',
|
||||
fullWidth: true, // marks that this box should take the full width of the canvas (pushing down other boxes)
|
||||
fullSize: true,
|
||||
reverse: false,
|
||||
weight: 1000,
|
||||
|
||||
@ -768,7 +768,7 @@ describe('Legend block tests', function() {
|
||||
options: {
|
||||
plugins: {
|
||||
legend: {
|
||||
fullWidth: true,
|
||||
fullSize: true,
|
||||
position: 'top',
|
||||
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.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.weight = 42;
|
||||
chart.update();
|
||||
|
||||
expect(chart.legend.fullWidth).toBe(false);
|
||||
expect(chart.legend.fullSize).toBe(false);
|
||||
expect(chart.legend.position).toBe('left');
|
||||
expect(chart.legend.weight).toBe(42);
|
||||
});
|
||||
|
||||
@ -9,7 +9,7 @@ describe('Title block tests', function() {
|
||||
color: Chart.defaults.color,
|
||||
display: false,
|
||||
position: 'top',
|
||||
fullWidth: true,
|
||||
fullSize: true,
|
||||
weight: 2000,
|
||||
font: {
|
||||
style: 'bold'
|
||||
@ -291,7 +291,7 @@ describe('Title block tests', function() {
|
||||
options: {
|
||||
plugins: {
|
||||
title: {
|
||||
fullWidth: true,
|
||||
fullSize: true,
|
||||
position: 'top',
|
||||
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.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.weight = 42;
|
||||
chart.update();
|
||||
|
||||
expect(chart.titleBlock.fullWidth).toBe(false);
|
||||
expect(chart.titleBlock.fullSize).toBe(false);
|
||||
expect(chart.titleBlock.position).toBe('left');
|
||||
expect(chart.titleBlock.weight).toBe(42);
|
||||
});
|
||||
|
||||
10
types/index.esm.d.ts
vendored
10
types/index.esm.d.ts
vendored
@ -717,7 +717,7 @@ export const layouts: {
|
||||
configure(
|
||||
chart: Chart,
|
||||
item: LayoutItem,
|
||||
options: { fullWidth?: number; position?: LayoutPosition; weight?: number }
|
||||
options: { fullSize?: number; position?: LayoutPosition; weight?: number }
|
||||
): void;
|
||||
|
||||
/**
|
||||
@ -1222,7 +1222,7 @@ export interface Scale<O extends CoreScaleOptions = CoreScaleOptions> extends El
|
||||
fit(): void;
|
||||
afterFit(): void;
|
||||
|
||||
isFullWidth(): boolean;
|
||||
isFullSize(): boolean;
|
||||
}
|
||||
export const Scale: {
|
||||
prototype: Scale;
|
||||
@ -2022,10 +2022,10 @@ export interface LegendOptions {
|
||||
*/
|
||||
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
|
||||
*/
|
||||
fullWidth: boolean;
|
||||
fullSize: boolean;
|
||||
/**
|
||||
* Legend will show datasets in reverse order.
|
||||
* @default false
|
||||
@ -2145,7 +2145,7 @@ export interface TitleOptions {
|
||||
*/
|
||||
color: Color;
|
||||
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.
|
||||
*/
|
||||
|
||||
2
types/layout.d.ts
vendored
2
types/layout.d.ts
vendored
@ -14,7 +14,7 @@ export interface LayoutItem {
|
||||
/**
|
||||
* if true, and the item is horizontal, then push vertical boxes down
|
||||
*/
|
||||
fullWidth: boolean;
|
||||
fullSize: boolean;
|
||||
/**
|
||||
* Width of item. Must be valid after update()
|
||||
*/
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user