klmp200/Sith
1
0
Fork 0
mirror of https://github.com/ae-utbm/sith.git synced 2024-11-01 03:48:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Migrate chartjs to npm

Browse Source
This commit is contained in:
Antoine Bartuccio 2024-10-13 20:16:13 +02:00 committed by Bartuccio Antoine
parent cdf9519a9f
commit 7e1734aed5
6 changed files with 118 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
core/static/vendored/chart/Chart.bundle.min.js vendored
View File

File diff suppressed because one or more lines are too long

17
package-lock.json generated
View File

@ -15,6 +15,7 @@
"@zip.js/zip.js": "^2.7.52",
"3d-force-graph": "^1.73.4",
"alpinejs": "^3.14.1",
"chart.js": "^4.4.4",
"cytoscape": "^3.30.2",
"cytoscape-cxtmenu": "^3.5.0",
"cytoscape-klay": "^3.1.4",
@ -2169,6 +2170,11 @@
"integrity": "sha512-4JQNk+3mVzK3xh2rqd6RB4J46qUR19azEHBneZyTZM+c456qOrbbM/5xcR8huNCCcbVt7+UmizG6GuUvPvKUYg==",
"dev": true
},
"node_modules/@kurkle/color": {
"version": "0.3.2",
"resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz",
"integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw=="
},
"node_modules/@pkgjs/parseargs": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@ -3087,6 +3093,17 @@
"node": ">=8"
}
},
"node_modules/chart.js": {
"version": "4.4.4",
"resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.4.tgz",
"integrity": "sha512-emICKGBABnxhMjUjlYRR12PmOXhJ2eJjEHL2/dZlWjxRAZT1D8xplLFq5M0tMQK8ja+wBS/tuVEJB5C6r7VxJA==",
"dependencies": {
"@kurkle/color": "^0.3.0"
},
"engines": {
"pnpm": ">=8"
}
},
"node_modules/chokidar": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.1.tgz",

1
package.json
View File

@ -48,6 +48,7 @@
"@zip.js/zip.js": "^2.7.52",
"3d-force-graph": "^1.73.4",
"alpinejs": "^3.14.1",
"chart.js": "^4.4.4",
"cytoscape": "^3.30.2",
"cytoscape-cxtmenu": "^3.5.0",
"cytoscape-klay": "^3.1.4",

4
sith/settings.py
View File

@ -748,6 +748,4 @@ if SENTRY_DSN:
environment=SENTRY_ENV,
)
SITH_FRONT_DEP_VERSIONS = {
"https://github.com/chartjs/Chart.js/": "2.6.0",
}
SITH_FRONT_DEP_VERSIONS = {}

91
subscription/static/webpack/subscription/stats-index.ts Normal file
View File

@ -0,0 +1,91 @@
import { BarController, BarElement, CategoryScale, Chart, LinearScale } from "chart.js";
Chart.register(BarController, BarElement, CategoryScale, LinearScale);
function getRandomColor() {
const letters = "0123456789ABCDEF";
let color = "#";
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function getRandomColorUniq(list: string[]) {
let color = getRandomColor();
while (list.includes(color)) {
color = getRandomColor();
}
return color;
}
function hexToRgb(hex: string) {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
// biome-ignore lint/performance/useTopLevelRegex: Performance impact is minimal
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
const hexrgb = hex.replace(shorthandRegex, (_m, r, g, b) => {
return r + r + g + g + b + b;
});
// biome-ignore lint/performance/useTopLevelRegex: Performance impact is minimal
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hexrgb);
return result
? {
r: Number.parseInt(result[1], 16),
g: Number.parseInt(result[2], 16),
b: Number.parseInt(result[3], 16),
}
: null;
}
document.addEventListener("DOMContentLoaded", () => {
const ctx = (document.getElementById("statsChart") as HTMLCanvasElement).getContext(
"2d",
);
const labels: string[] = [];
const total: string[] = [];
const colors: string[] = [];
const colorsDimmed: string[] = [];
for (const element of Array.from(document.getElementsByClassName("types"))) {
labels.push(element.childNodes[0].textContent);
}
for (const element of Array.from(document.getElementsByClassName("total"))) {
total.push(element.childNodes[0].childNodes[0].textContent);
}
for (const _ of labels) {
colors.push(getRandomColorUniq(colors));
}
for (const element of colors) {
const rgbColor = hexToRgb(element);
colorsDimmed.push(`rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, 0.2)`);
}
for (const element of colors) {
const rgbColorDimmed = hexToRgb(element);
colorsDimmed.push(
`rgba(${rgbColorDimmed.r}, ${rgbColorDimmed.g}, ${rgbColorDimmed.b}, 0.2)`,
);
}
new Chart(ctx, {
type: "bar",
data: {
labels: labels,
datasets: [
{
label: document.getElementById("graphLabel").childNodes[0].textContent,
data: total,
backgroundColor: colorsDimmed,
borderColor: colors,
borderWidth: 1,
},
],
},
options: {
scales: {
y: {
beginAtZero: true,
},
},
},
});
});

91
subscription/templates/subscription/stats.jinja
View File

@ -6,17 +6,19 @@
{% block head %}
{{ super() }}
<script type="text/javascript" src="{{ static('vendored/chart/Chart.bundle.min.js') }}"></script>
<script src="{{ static('webpack/subscription/stats-index.ts') }}" defer></script>
{% endblock %}
{% block content %}
<p>
{{ form.start_date.label }}<br>
{{ form.start_date }}<br><br>
{{ form.end_date.label }}<br>
{{ form.end_date }}<br>
<p><input type="submit" value="{% trans %}Go{% endtrans %}" /></p>
<form>
{{ form.start_date.label }}<br>
{{ form.start_date }}<br><br>
{{ form.end_date.label }}<br>
{{ form.end_date }}<br>
<p><input type="submit" value="{% trans %}Go{% endtrans %}" /></p>
</form>
</p>
<canvas id="statsChart" width="400" height="200"></canvas>
@ -57,80 +59,3 @@
</table>
{% endblock %}
{% block script %}
{{ super() }}
<script>
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function getRandomColorUniq(list) {
var color = getRandomColor();
while (list.includes(color)){
color = getRandomColor();
}
return color;
}
function hexToRgb(hex) {
// Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, function(m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
var ctx = document.getElementById("statsChart").getContext('2d');
var labels = [];
var total = [];
var colors = [];
var colors_dimmed = [];
Array.from(document.getElementsByClassName("types")).forEach(function(element){
labels.push(element.childNodes[0].data);
});
Array.from(document.getElementsByClassName("total")).forEach(function(element){
total.push(element.childNodes[0].childNodes[0].data);
});
labels.forEach(function(element){
colors.push(getRandomColorUniq(colors));
});
colors.forEach(function(element){
var rgb_color = hexToRgb(element);
colors_dimmed.push('rgba(' + rgb_color.r + ', ' + rgb_color.g + ', ' + rgb_color.b + ', 0.2)');
});
console.log(colors);console.log(colors_dimmed);
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: labels,
datasets: [{
label: document.getElementById("graphLabel").childNodes[0].data,
data: total,
backgroundColor: colors_dimmed,
borderColor: colors,
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
{% endblock %}