first commit
This commit is contained in:
66
WebRoot/node_modules/chart.js/samples/charts/area/analyser.js
generated
vendored
Normal file
66
WebRoot/node_modules/chart.js/samples/charts/area/analyser.js
generated
vendored
Normal file
@ -0,0 +1,66 @@
|
||||
/* global Chart */
|
||||
|
||||
'use strict';
|
||||
|
||||
(function() {
|
||||
Chart.plugins.register({
|
||||
id: 'samples-filler-analyser',
|
||||
|
||||
beforeInit: function(chart, options) {
|
||||
this.element = document.getElementById(options.target);
|
||||
},
|
||||
|
||||
afterUpdate: function(chart) {
|
||||
var datasets = chart.data.datasets;
|
||||
var element = this.element;
|
||||
var stats = [];
|
||||
var meta, i, ilen, dataset;
|
||||
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (i = 0, ilen = datasets.length; i < ilen; ++i) {
|
||||
meta = chart.getDatasetMeta(i).$filler;
|
||||
if (meta) {
|
||||
dataset = datasets[i];
|
||||
stats.push({
|
||||
fill: dataset.fill,
|
||||
target: meta.fill,
|
||||
visible: meta.visible,
|
||||
index: i
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
this.element.innerHTML = '<table>' +
|
||||
'<tr>' +
|
||||
'<th>Dataset</th>' +
|
||||
'<th>Fill</th>' +
|
||||
'<th>Target (visibility)</th>' +
|
||||
'</tr>' +
|
||||
stats.map(function(stat) {
|
||||
var target = stat.target;
|
||||
var row =
|
||||
'<td><b>' + stat.index + '</b></td>' +
|
||||
'<td>' + JSON.stringify(stat.fill) + '</td>';
|
||||
|
||||
if (target === false) {
|
||||
target = 'none';
|
||||
} else if (isFinite(target)) {
|
||||
target = 'dataset ' + target;
|
||||
} else {
|
||||
target = 'boundary "' + target + '"';
|
||||
}
|
||||
|
||||
if (stat.visible) {
|
||||
row += '<td>' + target + '</td>';
|
||||
} else {
|
||||
row += '<td>(hidden)</td>';
|
||||
}
|
||||
|
||||
return '<tr>' + row + '</tr>';
|
||||
}).join('') + '</table>';
|
||||
}
|
||||
});
|
||||
}());
|
||||
121
WebRoot/node_modules/chart.js/samples/charts/area/line-boundaries.html
generated
vendored
Normal file
121
WebRoot/node_modules/chart.js/samples/charts/area/line-boundaries.html
generated
vendored
Normal file
@ -0,0 +1,121 @@
|
||||
<!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">
|
||||
<title>area > boundaries | Chart.js sample</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../style.css">
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<script src="analyser.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="wrapper col-2"><canvas id="chart-0"></canvas></div>
|
||||
<div class="wrapper col-2"><canvas id="chart-1"></canvas></div>
|
||||
<div class="wrapper col-2"><canvas id="chart-2"></canvas></div>
|
||||
<div class="wrapper col-2"><canvas id="chart-3"></canvas></div>
|
||||
|
||||
<div class="toolbar">
|
||||
<button onclick="toggleSmooth(this)">Smooth</button>
|
||||
<button onclick="randomize(this)">Randomize</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var presets = window.chartColors;
|
||||
var utils = Samples.utils;
|
||||
var inputs = {
|
||||
min: -100,
|
||||
max: 100,
|
||||
count: 8,
|
||||
decimals: 2,
|
||||
continuity: 1
|
||||
};
|
||||
|
||||
function generateData(config) {
|
||||
return utils.numbers(Chart.helpers.merge(inputs, config || {}));
|
||||
}
|
||||
|
||||
function generateLabels(config) {
|
||||
return utils.months(Chart.helpers.merge({
|
||||
count: inputs.count,
|
||||
section: 3
|
||||
}, config || {}));
|
||||
}
|
||||
|
||||
var options = {
|
||||
maintainAspectRatio: false,
|
||||
spanGaps: false,
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.000001
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
filler: {
|
||||
propagate: false
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
ticks: {
|
||||
autoSkip: false,
|
||||
maxRotation: 0
|
||||
}
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
[false, 'origin', 'start', 'end'].forEach(function(boundary, index) {
|
||||
|
||||
// reset the random seed to generate the same data for all charts
|
||||
utils.srand(8);
|
||||
|
||||
new Chart('chart-' + index, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: generateLabels(),
|
||||
datasets: [{
|
||||
backgroundColor: utils.transparentize(presets.red),
|
||||
borderColor: presets.red,
|
||||
data: generateData(),
|
||||
label: 'Dataset',
|
||||
fill: boundary
|
||||
}]
|
||||
},
|
||||
options: Chart.helpers.merge(options, {
|
||||
title: {
|
||||
text: 'fill: ' + boundary,
|
||||
display: true
|
||||
}
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function toggleSmooth(btn) {
|
||||
var value = btn.classList.toggle('btn-on');
|
||||
Chart.helpers.each(Chart.instances, function(chart) {
|
||||
chart.options.elements.line.tension = value ? 0.4 : 0.000001;
|
||||
chart.update();
|
||||
});
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function randomize() {
|
||||
var seed = utils.rand();
|
||||
Chart.helpers.each(Chart.instances, function(chart) {
|
||||
utils.srand(seed);
|
||||
|
||||
chart.data.datasets.forEach(function(dataset) {
|
||||
dataset.data = generateData();
|
||||
});
|
||||
|
||||
chart.update();
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
160
WebRoot/node_modules/chart.js/samples/charts/area/line-datasets.html
generated
vendored
Normal file
160
WebRoot/node_modules/chart.js/samples/charts/area/line-datasets.html
generated
vendored
Normal file
@ -0,0 +1,160 @@
|
||||
<!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">
|
||||
<title>area > datasets | Chart.js sample</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../style.css">
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<script src="analyser.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="wrapper">
|
||||
<canvas id="chart-0"></canvas>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<button onclick="togglePropagate(this)">Propagate</button>
|
||||
<button onclick="toggleSmooth(this)">Smooth</button>
|
||||
<button onclick="randomize(this)">Randomize</button>
|
||||
</div>
|
||||
<div id="chart-analyser" class="analyser"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var presets = window.chartColors;
|
||||
var utils = Samples.utils;
|
||||
var inputs = {
|
||||
min: 20,
|
||||
max: 80,
|
||||
count: 8,
|
||||
decimals: 2,
|
||||
continuity: 1
|
||||
};
|
||||
|
||||
function generateData() {
|
||||
return utils.numbers(inputs);
|
||||
}
|
||||
|
||||
function generateLabels() {
|
||||
return utils.months({count: inputs.count});
|
||||
}
|
||||
|
||||
utils.srand(42);
|
||||
|
||||
var data = {
|
||||
labels: generateLabels(),
|
||||
datasets: [{
|
||||
backgroundColor: utils.transparentize(presets.red),
|
||||
borderColor: presets.red,
|
||||
data: generateData(),
|
||||
hidden: true,
|
||||
label: 'D0'
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.orange),
|
||||
borderColor: presets.orange,
|
||||
data: generateData(),
|
||||
label: 'D1',
|
||||
fill: '-1'
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.yellow),
|
||||
borderColor: presets.yellow,
|
||||
data: generateData(),
|
||||
hidden: true,
|
||||
label: 'D2',
|
||||
fill: 1
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.green),
|
||||
borderColor: presets.green,
|
||||
data: generateData(),
|
||||
label: 'D3',
|
||||
fill: '-1'
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.blue),
|
||||
borderColor: presets.blue,
|
||||
data: generateData(),
|
||||
label: 'D4',
|
||||
fill: '-1'
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.grey),
|
||||
borderColor: presets.grey,
|
||||
data: generateData(),
|
||||
label: 'D5',
|
||||
fill: '+2'
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.purple),
|
||||
borderColor: presets.purple,
|
||||
data: generateData(),
|
||||
label: 'D6',
|
||||
fill: false
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.red),
|
||||
borderColor: presets.red,
|
||||
data: generateData(),
|
||||
label: 'D7',
|
||||
fill: 8
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.orange),
|
||||
borderColor: presets.orange,
|
||||
data: generateData(),
|
||||
hidden: true,
|
||||
label: 'D8',
|
||||
fill: 'end'
|
||||
}]
|
||||
};
|
||||
|
||||
var options = {
|
||||
maintainAspectRatio: false,
|
||||
spanGaps: false,
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.000001
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
yAxes: [{
|
||||
stacked: true
|
||||
}]
|
||||
},
|
||||
plugins: {
|
||||
filler: {
|
||||
propagate: false
|
||||
},
|
||||
'samples-filler-analyser': {
|
||||
target: 'chart-analyser'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new Chart('chart-0', {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: options
|
||||
});
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function togglePropagate(btn) {
|
||||
var value = btn.classList.toggle('btn-on');
|
||||
chart.options.plugins.filler.propagate = value;
|
||||
chart.update();
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function toggleSmooth(btn) {
|
||||
var value = btn.classList.toggle('btn-on');
|
||||
chart.options.elements.line.tension = value ? 0.4 : 0.000001;
|
||||
chart.update();
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function randomize() {
|
||||
chart.data.datasets.forEach(function(dataset) {
|
||||
dataset.data = generateData();
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
183
WebRoot/node_modules/chart.js/samples/charts/area/line-stacked.html
generated
vendored
Normal file
183
WebRoot/node_modules/chart.js/samples/charts/area/line-stacked.html
generated
vendored
Normal file
@ -0,0 +1,183 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Line Chart</title>
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<style>
|
||||
canvas {
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div style="width:75%;">
|
||||
<canvas id="canvas"></canvas>
|
||||
</div>
|
||||
<br>
|
||||
<br>
|
||||
<button id="randomizeData">Randomize Data</button>
|
||||
<button id="addDataset">Add Dataset</button>
|
||||
<button id="removeDataset">Remove Dataset</button>
|
||||
<button id="addData">Add Data</button>
|
||||
<button id="removeData">Remove Data</button>
|
||||
<script>
|
||||
var MONTHS = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
|
||||
var config = {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [{
|
||||
label: 'My First dataset',
|
||||
borderColor: window.chartColors.red,
|
||||
backgroundColor: window.chartColors.red,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}, {
|
||||
label: 'My Second dataset',
|
||||
borderColor: window.chartColors.blue,
|
||||
backgroundColor: window.chartColors.blue,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}, {
|
||||
label: 'My Third dataset',
|
||||
borderColor: window.chartColors.green,
|
||||
backgroundColor: window.chartColors.green,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}, {
|
||||
label: 'My Third dataset',
|
||||
borderColor: window.chartColors.yellow,
|
||||
backgroundColor: window.chartColors.yellow,
|
||||
data: [
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor(),
|
||||
randomScalingFactor()
|
||||
],
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Chart.js Line Chart - Stacked Area'
|
||||
},
|
||||
tooltips: {
|
||||
mode: 'index',
|
||||
},
|
||||
hover: {
|
||||
mode: 'index'
|
||||
},
|
||||
scales: {
|
||||
xAxes: [{
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Month'
|
||||
}
|
||||
}],
|
||||
yAxes: [{
|
||||
stacked: true,
|
||||
scaleLabel: {
|
||||
display: true,
|
||||
labelString: 'Value'
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
window.onload = function() {
|
||||
var ctx = document.getElementById('canvas').getContext('2d');
|
||||
window.myLine = new Chart(ctx, config);
|
||||
};
|
||||
|
||||
document.getElementById('randomizeData').addEventListener('click', function() {
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data = dataset.data.map(function() {
|
||||
return randomScalingFactor();
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
var colorNames = Object.keys(window.chartColors);
|
||||
document.getElementById('addDataset').addEventListener('click', function() {
|
||||
var colorName = colorNames[config.data.datasets.length % colorNames.length];
|
||||
var newColor = window.chartColors[colorName];
|
||||
var newDataset = {
|
||||
label: 'Dataset ' + config.data.datasets.length,
|
||||
borderColor: newColor,
|
||||
backgroundColor: newColor,
|
||||
data: [],
|
||||
};
|
||||
|
||||
for (var index = 0; index < config.data.labels.length; ++index) {
|
||||
newDataset.data.push(randomScalingFactor());
|
||||
}
|
||||
|
||||
config.data.datasets.push(newDataset);
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
document.getElementById('addData').addEventListener('click', function() {
|
||||
if (config.data.datasets.length > 0) {
|
||||
var month = MONTHS[config.data.labels.length % MONTHS.length];
|
||||
config.data.labels.push(month);
|
||||
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data.push(randomScalingFactor());
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('removeDataset').addEventListener('click', function() {
|
||||
config.data.datasets.splice(0, 1);
|
||||
window.myLine.update();
|
||||
});
|
||||
|
||||
document.getElementById('removeData').addEventListener('click', function() {
|
||||
config.data.labels.splice(-1, 1); // remove the label first
|
||||
|
||||
config.data.datasets.forEach(function(dataset) {
|
||||
dataset.data.pop();
|
||||
});
|
||||
|
||||
window.myLine.update();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
139
WebRoot/node_modules/chart.js/samples/charts/area/radar.html
generated
vendored
Normal file
139
WebRoot/node_modules/chart.js/samples/charts/area/radar.html
generated
vendored
Normal file
@ -0,0 +1,139 @@
|
||||
<!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">
|
||||
<title>area > radar | Chart.js sample</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../style.css">
|
||||
<script src="../../../dist/Chart.bundle.js"></script>
|
||||
<script src="../../utils.js"></script>
|
||||
<script src="analyser.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="content">
|
||||
<div class="wrapper" style="max-width: 512px; margin: auto">
|
||||
<canvas id="chart-0"></canvas>
|
||||
</div>
|
||||
<div class="toolbar">
|
||||
<button onclick="togglePropagate(this)">Propagate</button>
|
||||
<button onclick="toggleSmooth(this)">Smooth</button>
|
||||
<button onclick="randomize(this)">Randomize</button>
|
||||
</div>
|
||||
<div id="chart-analyser" class="analyser"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var presets = window.chartColors;
|
||||
var utils = Samples.utils;
|
||||
var inputs = {
|
||||
min: 8,
|
||||
max: 16,
|
||||
count: 8,
|
||||
decimals: 2,
|
||||
continuity: 1
|
||||
};
|
||||
|
||||
function generateData() {
|
||||
// radar chart doesn't support stacked values, let's do it manually
|
||||
var values = utils.numbers(inputs);
|
||||
inputs.from = values;
|
||||
return values;
|
||||
}
|
||||
|
||||
function generateLabels() {
|
||||
return utils.months({count: inputs.count});
|
||||
}
|
||||
|
||||
utils.srand(42);
|
||||
|
||||
var data = {
|
||||
labels: generateLabels(),
|
||||
datasets: [{
|
||||
backgroundColor: utils.transparentize(presets.red),
|
||||
borderColor: presets.red,
|
||||
data: generateData(),
|
||||
label: 'D0'
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.orange),
|
||||
borderColor: presets.orange,
|
||||
data: generateData(),
|
||||
hidden: true,
|
||||
label: 'D1',
|
||||
fill: '-1'
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.yellow),
|
||||
borderColor: presets.yellow,
|
||||
data: generateData(),
|
||||
label: 'D2',
|
||||
fill: 1
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.green),
|
||||
borderColor: presets.green,
|
||||
data: generateData(),
|
||||
label: 'D3',
|
||||
fill: false
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.blue),
|
||||
borderColor: presets.blue,
|
||||
data: generateData(),
|
||||
label: 'D4',
|
||||
fill: '-1'
|
||||
}, {
|
||||
backgroundColor: utils.transparentize(presets.purple),
|
||||
borderColor: presets.purple,
|
||||
data: generateData(),
|
||||
label: 'D5',
|
||||
fill: '-1'
|
||||
}]
|
||||
};
|
||||
|
||||
var options = {
|
||||
maintainAspectRatio: true,
|
||||
spanGaps: false,
|
||||
elements: {
|
||||
line: {
|
||||
tension: 0.000001
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
filler: {
|
||||
propagate: false
|
||||
},
|
||||
'samples-filler-analyser': {
|
||||
target: 'chart-analyser'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
var chart = new Chart('chart-0', {
|
||||
type: 'radar',
|
||||
data: data,
|
||||
options: options
|
||||
});
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function togglePropagate(btn) {
|
||||
var value = btn.classList.toggle('btn-on');
|
||||
chart.options.plugins.filler.propagate = value;
|
||||
chart.update();
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function toggleSmooth(btn) {
|
||||
var value = btn.classList.toggle('btn-on');
|
||||
chart.options.elements.line.tension = value ? 0.4 : 0.000001;
|
||||
chart.update();
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
function randomize() {
|
||||
inputs.from = [];
|
||||
chart.data.datasets.forEach(function(dataset) {
|
||||
dataset.data = generateData();
|
||||
});
|
||||
chart.update();
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user