diff --git a/counter/static/webpack/graph-index.ts b/counter/static/webpack/graph-index.ts index 7c979a7f..885345d7 100644 --- a/counter/static/webpack/graph-index.ts +++ b/counter/static/webpack/graph-index.ts @@ -1,9 +1,51 @@ -import Chart from 'chart.js/auto'; -import {permanencyFetchPermanancies} from '#openapi' +import { paginated } from "#core:utils/api"; +import { exportToHtml } from "#core:utils/globals"; +import { Chart } from "chart.js/auto"; +import { + type PermanencyFetchPermananciesData, + permanencyFetchPermanancies, +} from "#openapi"; -async function main() { - console.log((await permanencyFetchPermanancies()).data) +interface ActivityChartConfig { + 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"); diff --git a/counter/templates/counter/activity.jinja b/counter/templates/counter/activity.jinja index a8cc996b..00f5294b 100644 --- a/counter/templates/counter/activity.jinja +++ b/counter/templates/counter/activity.jinja @@ -5,9 +5,8 @@ {% trans counter_name=counter %}{{ counter_name }} activity{% endtrans %} {% endblock %} -{% block head %} - {{ super() }} - +{% block additionnal_js %} + {% endblock %} {%- block additional_css -%} @@ -43,3 +42,16 @@ {% endblock %} + +{% block script %} + {{super()}} + +{% endblock %} \ No newline at end of file