Merge pull request 'refactor(charts): unify on Chart.js, remove Chartist' (#11) from integreat-unify-charts into staging

Reviewed-on: #11

.gitignore

@@ -51,3 +51,6 @@ sysco-poller/**/*.csv
 .tmp/**
 playwright-report/**
 test-results/**
+# Scratch dir for temp files (screenshots, logs, etc.); keep the dir, ignore contents
+/tmp/*
+!/tmp/.gitkeep

AGENTS.md

@@ -1,5 +1,9 @@
 # Integreat Development Guide
 
+## Temporary Files
+
+Write any temporary files (screenshots, scratch logs, generated artifacts, etc.) to the `./tmp/` directory at the repo root. Its contents are gitignored (only `.gitkeep` is tracked), so nothing there will be accidentally committed. Do not scatter temp files elsewhere in the repo or in the system `/tmp`.
+
 ## Build & Run Commands
 
 ### Build

src/clj/auto_ap/ssr/admin.clj

@@ -10,8 +10,7 @@
    [bidi.bidi :as bidi]
    [clj-time.coerce :as coerce]
    [clj-time.core :as time]
-   [datomic.api :as dc]
-   [hiccup2.core :as hiccup]))
+   [datomic.api :as dc]))
 
 (defn hourly-changes []
   (let [tx-instant-attr (:db/id (dc/pull (dc/db conn) '[:db/id] :db/txInstant))
@@ -56,34 +55,68 @@
                                  [:div
                                   [:h1.text-2xl.mb-3.font-bold "Growth in clients"]
                                   [:div
-                                   [:div {:class      "w-full h-64"
-                                          :id         "client-chart"
-                                          :data-chart (hx/json {:labels ["2 years ago" "1 year ago" "today"],
-                                                                :series [(for [n    [2 1 0]
-                                                                               :let [start (time/plus (time/now) (time/years (- n)))]]
-                                                                           (->> (dc/q '[:find (count ?c)
-                                                                                        :in $
-                                                                                        :where [?c :client/code]]
-                                                                                      (dc/as-of (dc/db conn) (coerce/to-date start)))
-                                                                                first
-                                                                                first))]})}]
-                                   [:script {:lang "javascript"}
-                                    (hiccup/raw
-                                     "new Chartist.Bar('#client-chart', JSON.parse(document.getElementById('client-chart').getAttribute('data-chart')))")]]]])
+                                   [:div.w-full.h-64
+                                    [:canvas.w-full.h-full {:x-data (hx/json {:chart  nil
+                                                                              :labels ["2 years ago" "1 year ago" "today"]
+                                                                              :data   (for [n    [2 1 0]
+                                                                                            :let [start (time/plus (time/now) (time/years (- n)))]]
+                                                                                        (->> (dc/q '[:find (count ?c)
+                                                                                                     :in $
+                                                                                                     :where [?c :client/code]]
+                                                                                                   (dc/as-of (dc/db conn) (coerce/to-date start)))
+                                                                                             first
+                                                                                             first))})
+                                                            :x-init "new Chart($el, {
+                        type: 'bar',
+                        data: {
+                          labels: labels,
+                          datasets: [{
+                            label: 'Clients',
+                            data: data,
+                            borderWidth: 1
+                          }]
+                        },
+                        options: {
+                          responsive: true,
+                          maintainAspectRatio: false,
+                          scales: {
+                            y: {
+                              beginAtZero: true
+                            }
+                          }
+                        }
+                      });"}]]]]])
 
               (com/content-card {:class "w-1/2"}
                                 [:div {:class "flex flex-col px-4 py-3 space-y-3"}
                                  [:div
                                   [:h1.text-2xl.mb-3.font-bold "Changes by hour"]
                                   [:div
-                                   [:div {:class      "w-full h-64"
-                                          :id         "changes"
-                                          :data-chart (hx/json {:labels (for [n (range -24 0)]
-                                                                          (format "%d" n)),
-                                                                :series [(hourly-changes)]})}]
-                                   [:script {:lang "javascript"}
-                                    (hiccup/raw
-                                     "new Chartist.Line('#changes', JSON.parse(document.getElementById('changes').getAttribute('data-chart')))")]]]])])
+                                   [:div.w-full.h-64
+                                    [:canvas.w-full.h-full {:x-data (hx/json {:chart  nil
+                                                                              :labels (for [n (range -24 0)]
+                                                                                        (format "%d" n))
+                                                                              :data   (hourly-changes)})
+                                                            :x-init "new Chart($el, {
+                        type: 'line',
+                        data: {
+                          labels: labels,
+                          datasets: [{
+                            label: 'Changes',
+                            data: data,
+                            borderWidth: 1
+                          }]
+                        },
+                        options: {
+                          responsive: true,
+                          maintainAspectRatio: false,
+                          scales: {
+                            y: {
+                              beginAtZero: true
+                            }
+                          }
+                        }
+                      });"}]]]]])])
    "Admin"))
 
 (def key->handler

src/clj/auto_ap/ssr/components/card.clj

@@ -14,5 +14,5 @@
   [:section (merge params {:class (hh/add-class " py-3 sm:py-5" (:class params))})
    [:div {:class (:max-w params "max-w-screen-2xl")}
     (into
-     [:div {:class "relative overflow-scroll shadow-md dark:bg-gray-800 sm:rounded-lg border-2 border-gray-200 dark:border-gray-900 bg-white"}]
+     [:div {:class "relative overflow-auto shadow-md dark:bg-gray-800 sm:rounded-lg border-2 border-gray-200 dark:border-gray-900 bg-white"}]
      children)]])

src/clj/auto_ap/ssr/ui.clj

@@ -23,8 +23,6 @@
      [:title (str "Integreat | " page-name)]
      [:link {:href "/css/font.min.css", :rel "stylesheet"}]
      [:link {:rel "icon" :type "image/png" :href "/favicon.png"}]
-     [:link {:rel "stylesheet" :href "//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css"}]
-     [:script {:src "//cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"}]
      [:link {:rel "stylesheet", :href "/output.css"}]
      [:script {:src "https://cdn.plaid.com/link/v2/stable/link-initialize.js"}]
      [:script {:src "https://cdn.jsdelivr.net/npm/@ryangjchandler/alpine-tooltip@1.x.x/dist/cdn.min.js" :defer true}]