mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00:00
Fix hidden charts hanging the browser
Ensure width cannot be greater than maxWidth. Similar to `minSize.height` calculation.
This commit is contained in:
parent
86fb98eb37
commit
3ec6377f11
@ -356,7 +356,7 @@ module.exports = function(Chart) {
|
|||||||
} else {
|
} else {
|
||||||
largestTextWidth += me.options.ticks.padding;
|
largestTextWidth += me.options.ticks.padding;
|
||||||
}
|
}
|
||||||
minSize.width += largestTextWidth;
|
minSize.width = Math.min(me.maxWidth, minSize.width + largestTextWidth);
|
||||||
me.paddingTop = tickFont.size / 2;
|
me.paddingTop = tickFont.size / 2;
|
||||||
me.paddingBottom = tickFont.size / 2;
|
me.paddingBottom = tickFont.size / 2;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -145,18 +145,19 @@ module.exports = function(Chart) {
|
|||||||
var unitSizeInMilliSeconds = unitDefinition.size;
|
var unitSizeInMilliSeconds = unitDefinition.size;
|
||||||
var sizeInUnits = Math.ceil((max - min) / unitSizeInMilliSeconds);
|
var sizeInUnits = Math.ceil((max - min) / unitSizeInMilliSeconds);
|
||||||
var multiplier = 1;
|
var multiplier = 1;
|
||||||
|
var range = max - min;
|
||||||
|
|
||||||
if (unitDefinition.steps) {
|
if (unitDefinition.steps) {
|
||||||
// Have an array of steps
|
// Have an array of steps
|
||||||
var numSteps = unitDefinition.steps.length;
|
var numSteps = unitDefinition.steps.length;
|
||||||
for (var i = 0; i < numSteps && sizeInUnits > maxTicks; i++) {
|
for (var i = 0; i < numSteps && sizeInUnits > maxTicks; i++) {
|
||||||
multiplier = unitDefinition.steps[i];
|
multiplier = unitDefinition.steps[i];
|
||||||
sizeInUnits = Math.ceil((max - min) / (unitSizeInMilliSeconds * multiplier));
|
sizeInUnits = Math.ceil(range / (unitSizeInMilliSeconds * multiplier));
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
while (sizeInUnits > maxTicks) {
|
while (sizeInUnits > maxTicks && maxTicks > 0) {
|
||||||
++multiplier;
|
++multiplier;
|
||||||
sizeInUnits = Math.ceil((max - min) / (unitSizeInMilliSeconds * multiplier));
|
sizeInUnits = Math.ceil(range / (unitSizeInMilliSeconds * multiplier));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -471,4 +471,34 @@ describe('Time scale tests', function() {
|
|||||||
unit: 'day',
|
unit: 'day',
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
it('does not create a negative width chart when hidden', function() {
|
||||||
|
var chart = window.acquireChart({
|
||||||
|
type: 'line',
|
||||||
|
data: {
|
||||||
|
datasets: [{
|
||||||
|
data: []
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
scales: {
|
||||||
|
xAxes: [{
|
||||||
|
type: 'time',
|
||||||
|
time: {
|
||||||
|
min: moment().subtract(1, 'months'),
|
||||||
|
max: moment(),
|
||||||
|
}
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
responsive: true,
|
||||||
|
},
|
||||||
|
}, {
|
||||||
|
wrapper: {
|
||||||
|
style: 'display: none',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
expect(chart.scales['y-axis-0'].width).toEqual(0);
|
||||||
|
expect(chart.scales['y-axis-0'].maxWidth).toEqual(0);
|
||||||
|
expect(chart.width).toEqual(0);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user