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