export graph to html function

counter/static/webpack/graph-index.ts

@@ -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");

counter/templates/counter/activity.jinja

@@ -5,9 +5,8 @@
   {% trans counter_name=counter %}{{ counter_name }} activity{% endtrans %}
 {% 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 %}
 
 {%- block additional_css -%}
@@ -43,3 +42,16 @@
     </div>
   </div>
 {% 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 %}