Changed: DB Params
This commit is contained in:
20
assets/js/chart.js
Normal file
20
assets/js/chart.js
Normal file
File diff suppressed because one or more lines are too long
293
assets/js/chartUtils.js
Normal file
293
assets/js/chartUtils.js
Normal file
@@ -0,0 +1,293 @@
|
||||
function barChart(id, data, labels, tooltip, title, scale_label_x, scale_label_y) {
|
||||
const canvas = document.getElementById('bar_chart'+id)
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
data = data.map((item) => DecimalPrecision.round(item, 2));
|
||||
|
||||
// Gradient
|
||||
var gradient = ctx.createLinearGradient(0, 0, 0, 500);
|
||||
gradient.addColorStop(0, '#f4a260');
|
||||
gradient.addColorStop(1, '#2ec4b6');
|
||||
|
||||
// Data
|
||||
var displayData = {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: tooltip,
|
||||
data: data,
|
||||
backgroundColor: gradient,
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
responsive: true,
|
||||
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
text: scale_label_x,
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
text: scale_label_y,
|
||||
beginAtZero: true
|
||||
}
|
||||
},
|
||||
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: title,
|
||||
font: {
|
||||
size: 20,
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
var config = {
|
||||
type: 'bar',
|
||||
data: displayData,
|
||||
options: options
|
||||
};
|
||||
|
||||
new Chart(ctx, config);
|
||||
}
|
||||
|
||||
function barLineChart(id, data, labels, tooltip, title, scale_label_x, scale_label_y) {
|
||||
const canvas = document.getElementById('bar_line_chart'+id)
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
// Gradient
|
||||
const gradient = ctx.createLinearGradient(0, 0, 0, 500);
|
||||
gradient.addColorStop(0, '#f4a260');
|
||||
gradient.addColorStop(1, '#2ec4b6');
|
||||
|
||||
const sum = data.reduce((partialSum, a) => partialSum + a, 0);
|
||||
const percentage = data.map((item) => DecimalPrecision.round(item/sum*100, 2));
|
||||
var percentageTick = 100;
|
||||
var percentageTickSize = 20;
|
||||
|
||||
// Data
|
||||
const displayData = {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: "Percentage",
|
||||
data: percentage,
|
||||
borderColor: '#E0E1DD',
|
||||
backgroundColor: '#2ec4b6',
|
||||
yAxisID: 'y1',
|
||||
type: 'line',
|
||||
},
|
||||
{
|
||||
label: tooltip,
|
||||
data: data,
|
||||
backgroundColor: gradient,
|
||||
yAxisID: 'y',
|
||||
},
|
||||
|
||||
]
|
||||
};
|
||||
|
||||
// Options
|
||||
const options = {
|
||||
responsive: true,
|
||||
|
||||
scales: {
|
||||
x: {
|
||||
display: true,
|
||||
text: scale_label_x,
|
||||
},
|
||||
y: {
|
||||
display: true,
|
||||
text: scale_label_y,
|
||||
beginAtZero: true,
|
||||
max: Math.max.apply(null, data) + 1,
|
||||
},
|
||||
|
||||
y1: {
|
||||
display: true,
|
||||
position: 'right',
|
||||
beginAtZero: true,
|
||||
max: percentageTick,
|
||||
ticks: {
|
||||
stepSize: percentageTickSize,
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: title,
|
||||
font: {
|
||||
size: 20,
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
};
|
||||
|
||||
const config = {
|
||||
type: 'bar',
|
||||
data: displayData,
|
||||
options: options
|
||||
};
|
||||
|
||||
let barlinechart = new Chart(ctx, config);
|
||||
|
||||
// Actions
|
||||
const actions = [
|
||||
{
|
||||
name: "Toggle Tick",
|
||||
handler(chart) {
|
||||
if (percentageTick == 100 ) {
|
||||
percentageTick = Math.trunc(Math.max.apply(null, percentage) + 1);
|
||||
percentageTickSize = Math.trunc(percentageTick / 5);
|
||||
}
|
||||
else {
|
||||
percentageTick = 100;
|
||||
percentageTickSize = 20;
|
||||
}
|
||||
barlinechart.options.scales.y1.max = percentageTick;
|
||||
barlinechart.options.scales.y1.ticks.stepSize = percentageTickSize;
|
||||
chart.update();
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
actions.forEach((a, i) => {
|
||||
let button = document.createElement("button");
|
||||
button.id = "button"+i;
|
||||
button.innerText = a.name;
|
||||
button.onclick = () => a.handler(barlinechart);
|
||||
document.querySelector(".button_row").appendChild(button);
|
||||
});
|
||||
}
|
||||
|
||||
function pieChart(id, data, labels, tooltip, title, scale_label_x, scale_label_y) {
|
||||
const canvas = document.getElementById('pie_chart'+id)
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
// Data
|
||||
var displayData = {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: tooltip,
|
||||
data: data,
|
||||
backgroundColor: [
|
||||
'#f4a260',
|
||||
'#e77f7a',
|
||||
'#be6d8e',
|
||||
'#856490',
|
||||
'#4f597b',
|
||||
'#2f4858',
|
||||
],
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
responsive: true,
|
||||
};
|
||||
|
||||
var config = {
|
||||
type: 'pie',
|
||||
data: displayData,
|
||||
options: options
|
||||
};
|
||||
|
||||
new Chart(ctx, config);
|
||||
}
|
||||
|
||||
function doughnutChart(id, data, labels, tooltip, title, scale_label_x, scale_label_y) {
|
||||
const canvas = document.getElementById('doughnut_chart'+id)
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
// Data
|
||||
var displayData = {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: tooltip,
|
||||
data: data,
|
||||
backgroundColor: [
|
||||
'#f4a260',
|
||||
'#e77f7a',
|
||||
'#be6d8e',
|
||||
'#856490',
|
||||
'#4f597b',
|
||||
'#2f4858',
|
||||
],
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
responsive: true,
|
||||
};
|
||||
|
||||
var config = {
|
||||
type: 'doughnut',
|
||||
data: displayData,
|
||||
options: options
|
||||
};
|
||||
|
||||
new Chart(ctx, config);
|
||||
}
|
||||
|
||||
function polarChart(id, data, labels, tooltip, title, scale_label_x, scale_label_y) {
|
||||
const canvas = document.getElementById('polar_chart'+id)
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
// Data
|
||||
var displayData = {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: tooltip,
|
||||
data: data,
|
||||
backgroundColor: [
|
||||
'#f4a260',
|
||||
'#e77f7a',
|
||||
'#be6d8e',
|
||||
'#856490',
|
||||
'#4f597b',
|
||||
'#2f4858',
|
||||
],
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
// Options
|
||||
var options = {
|
||||
responsive: true,
|
||||
|
||||
scales: {
|
||||
x: {
|
||||
border: { display: true },
|
||||
grid: {
|
||||
display: false,
|
||||
drawOnChartArea: true,
|
||||
drawTicks: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
var config = {
|
||||
type: 'polarArea',
|
||||
data: displayData,
|
||||
options: config,
|
||||
};
|
||||
|
||||
new Chart(ctx, config);
|
||||
}
|
||||
1
assets/js/htmx.min.js
vendored
Normal file
1
assets/js/htmx.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
39
assets/js/utils.js
Normal file
39
assets/js/utils.js
Normal file
@@ -0,0 +1,39 @@
|
||||
var DecimalPrecision = (function() {
|
||||
if (Math.trunc === undefined) {
|
||||
Math.trunc = function(v) {
|
||||
return v < 0 ? Math.ceil(v) : Math.floor(v);
|
||||
};
|
||||
}
|
||||
var decimalAdjust = function myself(type, num, decimalPlaces) {
|
||||
if (type === 'round' && num < 0)
|
||||
return -myself(type, -num, decimalPlaces);
|
||||
var shift = function(value, exponent) {
|
||||
value = (value + 'e').split('e');
|
||||
return +(value[0] + 'e' + (+value[1] + (exponent || 0)));
|
||||
};
|
||||
var n = shift(num, +decimalPlaces);
|
||||
return shift(Math[type](n), -decimalPlaces);
|
||||
};
|
||||
return {
|
||||
// Decimal round (half away from zero)
|
||||
round: function(num, decimalPlaces) {
|
||||
return decimalAdjust('round', num, decimalPlaces);
|
||||
},
|
||||
// Decimal ceil
|
||||
ceil: function(num, decimalPlaces) {
|
||||
return decimalAdjust('ceil', num, decimalPlaces);
|
||||
},
|
||||
// Decimal floor
|
||||
floor: function(num, decimalPlaces) {
|
||||
return decimalAdjust('floor', num, decimalPlaces);
|
||||
},
|
||||
// Decimal trunc
|
||||
trunc: function(num, decimalPlaces) {
|
||||
return decimalAdjust('trunc', num, decimalPlaces);
|
||||
},
|
||||
// Format using fixed-point notation
|
||||
toFixed: function(num, decimalPlaces) {
|
||||
return decimalAdjust('round', num, decimalPlaces).toFixed(decimalPlaces);
|
||||
}
|
||||
};
|
||||
})();
|
||||
Reference in New Issue
Block a user