Mirrors/Chart.js
2
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2026-02-27 21:14:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

Use ResizeObserver and MutationObserver to detect detach/attach/resize (#7104)

Browse Source 
* Use Resize/MutationObserver to detect detach/attach/resize
* Cleanup
* Review update
* Restore infinite resize detection (#6011)
This commit is contained in:
Jukka Kurkela
2020-02-17 18:00:03 +02:00
committed by GitHub
parent 7397a41fac
commit bfe34214ac
17 changed files with 189 additions and 494 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
samples/advanced/content-security-policy.css
View File

@@ -1,20 +0,0 @@
.content {
max-width: 640px;
margin: auto;
padding: 1rem;
}
.note {
font-family: sans-serif;
color: #5050a0;
line-height: 1.4;
margin-bottom: 1rem;
padding: 1rem;
}
code {
background-color: #f5f5ff;
border: 1px solid #d0d0fa;
border-radius: 4px;
padding: 0.05rem 0.25rem;
}

27
samples/advanced/content-security-policy.html
View File

@@ -1,27 +0,0 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
<title>Scriptable > Bubble | Chart.js sample</title>
<link rel="stylesheet" type="text/css" href="../../dist/Chart.min.css">
<link rel="stylesheet" type="text/css" href="./content-security-policy.css">
<script src="../../dist/Chart.min.js"></script>
<script src="../utils.js"></script>
<script src="content-security-policy.js"></script>
</head>
<body>
<div class="content">
<div class="note">
In order to support a strict content security policy (<code>default-src 'self'</code>),
this page manually loads <code>Chart.min.css</code> and turns off the automatic style
injection by setting <code>Chart.platform.disableCSSInjection = true;</code>.
</div>
<div class="wrapper">
<canvas id="chart-0"></canvas>
</div>
</div>
</body>
</html>

53
samples/advanced/content-security-policy.js
View File

@@ -1,53 +0,0 @@
var utils = Samples.utils;
utils.srand(110);
// CSP: disable automatic style injection
Chart.platform.disableCSSInjection = true;
function generateData() {
var DATA_COUNT = 16;
var MIN_XY = -150;
var MAX_XY = 100;
var data = [];
var i;
for (i = 0; i < DATA_COUNT; ++i) {
data.push({
x: utils.rand(MIN_XY, MAX_XY),
y: utils.rand(MIN_XY, MAX_XY),
v: utils.rand(0, 1000)
});
}
return data;
}
window.addEventListener('load', function() {
new Chart('chart-0', {
type: 'bubble',
data: {
datasets: [{
backgroundColor: utils.color(0),
data: generateData()
}, {
backgroundColor: utils.color(1),
data: generateData()
}]
},
options: {
aspectRatio: 1,
legend: false,
tooltip: false,
elements: {
point: {
radius: function(context) {
var value = context.dataset.data[context.dataIndex];
var size = context.chart.width;
var base = Math.abs(value.v) / 1000;
return (size / 24) * base;
}
}
}
}
});
});

3
samples/samples.js
View File

@@ -244,9 +244,6 @@
items: [{
title: 'Progress bar',
path: 'advanced/progress-bar.html'
}, {
title: 'Content Security Policy',
path: 'advanced/content-security-policy.html'
}, {
title: 'Polar Area Radial Gradient',
path: 'advanced/radial-gradient.html'