mirror of
https://github.com/ae-utbm/sith.git
synced 2024-11-01 03:48:04 +00:00
Migrate chartjs to npm
This commit is contained in:
parent
cdf9519a9f
commit
7e1734aed5
16
core/static/vendored/chart/Chart.bundle.min.js
vendored
16
core/static/vendored/chart/Chart.bundle.min.js
vendored
File diff suppressed because one or more lines are too long
17
package-lock.json
generated
17
package-lock.json
generated
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -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
91
subscription/static/webpack/subscription/stats-index.ts
Normal 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,
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
});
|
@ -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 %}
|
Loading…
Reference in New Issue
Block a user