mirror of
https://github.com/ae-utbm/sith.git
synced 2024-11-29 04:24:25 +00:00
export graph to html function
This commit is contained in:
parent
71d155613f
commit
a44e8a68cb
@ -1,9 +1,51 @@
|
|||||||
import Chart from 'chart.js/auto';
|
import { paginated } from "#core:utils/api";
|
||||||
import {permanencyFetchPermanancies} from '#openapi'
|
import { exportToHtml } from "#core:utils/globals";
|
||||||
|
import { Chart } from "chart.js/auto";
|
||||||
|
import {
|
||||||
|
type PermanencyFetchPermananciesData,
|
||||||
|
permanencyFetchPermanancies,
|
||||||
|
} from "#openapi";
|
||||||
|
|
||||||
async function main() {
|
interface ActivityChartConfig {
|
||||||
console.log((await permanencyFetchPermanancies()).data)
|
canvas: HTMLCanvasElement;
|
||||||
|
startDate: Date;
|
||||||
|
counterId: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get permanancies from the last week using the API
|
||||||
|
|
||||||
|
exportToHtml("loadChart", loadChart);
|
||||||
|
|
||||||
|
async function loadChart(options: ActivityChartConfig) {
|
||||||
|
const permanancies = paginated(permanencyFetchPermanancies, {
|
||||||
|
query: {
|
||||||
|
counter: [options.counterId],
|
||||||
|
// biome-ignore lint/style/useNamingConvention: backend API uses snake_case
|
||||||
|
start_date: options.startDate.toISOString(),
|
||||||
|
},
|
||||||
|
} as PermanencyFetchPermananciesData).then((data) => {
|
||||||
|
console.log(data);
|
||||||
|
});
|
||||||
|
const chart = new Chart(options.canvas, {
|
||||||
|
type: "bar",
|
||||||
|
data: {
|
||||||
|
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
||||||
|
datasets: [
|
||||||
|
{
|
||||||
|
label: "# of Votes",
|
||||||
|
data: [12, 19, 3, 5, 2, 3],
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
options: {
|
||||||
|
scales: {
|
||||||
|
y: {
|
||||||
|
beginAtZero: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
main()
|
|
||||||
console.log("Hello from graph-index.ts");
|
console.log("Hello from graph-index.ts");
|
||||||
|
@ -5,9 +5,8 @@
|
|||||||
{% trans counter_name=counter %}{{ counter_name }} activity{% endtrans %}
|
{% trans counter_name=counter %}{{ counter_name }} activity{% endtrans %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block head %}
|
{% block additionnal_js %}
|
||||||
{{ super() }}
|
<script defer src="{{ static('webpack/graph-index.ts') }}"></script>
|
||||||
<script src="{{ static('webpack/graph-index.ts') }}"></script>
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{%- block additional_css -%}
|
{%- block additional_css -%}
|
||||||
@ -43,3 +42,16 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block script %}
|
||||||
|
{{super()}}
|
||||||
|
<script>
|
||||||
|
window.addEventListener("DOMContentLoaded", () => {
|
||||||
|
loadChart({
|
||||||
|
canvas: document.getElementById("activityChart"),
|
||||||
|
startDate: new Date().setDate(new Date().getDate() - 7),
|
||||||
|
counterId: {{ counter.id }},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
{% endblock %}
|
Loading…
Reference in New Issue
Block a user