170 lines
5.3 KiB
JavaScript
170 lines
5.3 KiB
JavaScript
function createDiagonalPattern(color = '#ffffff') {
|
|
// create a 10x10 px canvas for the pattern's base shape
|
|
let shape = document.createElement('canvas')
|
|
shape.width = 10
|
|
shape.height = 10
|
|
|
|
// get the context for drawing
|
|
let c = shape.getContext('2d')
|
|
|
|
c.fillStyle = color + "60";
|
|
c.fillRect(0, 0, shape.width, shape.height);
|
|
|
|
// draw 1st line of the shape
|
|
c.strokeStyle = color;
|
|
c.lineWidth = 3;
|
|
c.lineCap = "round";
|
|
c.beginPath()
|
|
c.moveTo(2, 0)
|
|
c.lineTo(10, 8)
|
|
c.stroke()
|
|
// draw 2nd line of the shape
|
|
c.beginPath()
|
|
c.moveTo(0, 8)
|
|
c.lineTo(2, 10)
|
|
c.stroke()
|
|
// create the pattern from the shape
|
|
return c.createPattern(shape, 'repeat')
|
|
}
|
|
|
|
function historical_vs_current_chart(jsonData, element) {
|
|
const style = getComputedStyle(document.body);
|
|
const red_color = style.getPropertyValue("--pf-red");
|
|
const green_color = style.getPropertyValue("--pf-green");
|
|
const legend_bg = style.getPropertyValue("--pf-overlay2");
|
|
const config = {
|
|
type: "bar",
|
|
data: {
|
|
labels: jsonData.labels,
|
|
datasets: [{
|
|
label: "Historical",
|
|
data: [
|
|
jsonData.income_data[0],
|
|
jsonData.expenses_data[0]
|
|
],
|
|
backgroundColor: [
|
|
createDiagonalPattern(green_color),
|
|
createDiagonalPattern(red_color)
|
|
]
|
|
},
|
|
{
|
|
label: "Last 30 Days",
|
|
data: [
|
|
jsonData.income_data[1],
|
|
jsonData.expenses_data[1]
|
|
],
|
|
backgroundColor: [
|
|
green_color,
|
|
red_color
|
|
]
|
|
}]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
responsive: true,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: true,
|
|
labels: {
|
|
boxWidth: 20,
|
|
position: "bottom",
|
|
generateLabels: function(chart) {
|
|
var labels = Chart.defaults.plugins.legend.labels.generateLabels(chart);
|
|
for (var key in labels) {
|
|
if (labels[key].text == "Historical") {
|
|
labels[key].fillStyle = createDiagonalPattern(legend_bg);
|
|
} else {
|
|
labels[key].fillStyle = legend_bg;
|
|
}
|
|
|
|
labels[key].strokeStyle = "rgba(33, 44, 22, 0.7)";
|
|
}
|
|
return labels;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
new Chart(element, config);
|
|
|
|
}
|
|
|
|
function sparkline_summary_chart(jsonData, element) {
|
|
const style = getComputedStyle(document.body);
|
|
const red_color = style.getPropertyValue("--pf-red");
|
|
const green_color = style.getPropertyValue("--pf-green");
|
|
const line_color = style.getPropertyValue("--pf-overlay2");
|
|
const config = {
|
|
type: "line",
|
|
data: {
|
|
labels: jsonData.labels,
|
|
datasets: [{
|
|
label: "Historical",
|
|
data: jsonData.data,
|
|
borderColor: line_color,
|
|
backgroundColor: function(context) {
|
|
var value = context.dataset.data[context.dataIndex];
|
|
return value < 0 ? red_color : green_color;
|
|
},
|
|
}]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
responsive: true,
|
|
scales: {
|
|
y: {
|
|
ticks: {
|
|
display: true,
|
|
callback: function(value, index, values) {
|
|
if (value === 0) {
|
|
return value;
|
|
} else {
|
|
return null;
|
|
}
|
|
},
|
|
},
|
|
suggestedMin: 5
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
},
|
|
};
|
|
new Chart(element, config);
|
|
}
|
|
|
|
function fill_charts() {
|
|
document.querySelectorAll(".chartjs-chart").forEach(function (el) {
|
|
var url = el.dataset.chartEndpoint;
|
|
var type = el.dataset.chartType;
|
|
|
|
fetch(url)
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
console.log(response);
|
|
throw new Error("Fetch response was not ok!")
|
|
}
|
|
return response.json();
|
|
}).then(jsonData => {
|
|
if (type == "historical_vs_current") {
|
|
historical_vs_current_chart(jsonData, el);
|
|
} else if (type == "sparkline_summary") {
|
|
sparkline_summary_chart(jsonData, el);
|
|
}
|
|
}).catch(error => {
|
|
console.error("Unable to set up chart: ", error)
|
|
});
|
|
|
|
});
|
|
}
|
|
|
|
export {fill_charts}
|