Replace chart.js with apexcharts

We seem to have all features, and can add timezone awareness! Fixes #75 Signed-off-by: Jo Vandeginste <Jo.Vandeginste@kuleuven.be>
jovandeginste · Apr 18, 2024 · 046f8c4 · 046f8c4
1 parent ac1dd12
commit 046f8c4
Show file tree

Hide file tree

Showing 20 changed files with 374 additions and 431 deletions.
diff --git a/Makefile b/Makefile
@@ -54,15 +54,15 @@ clean-dist:
 
 build-dist: clean-dist
 	mkdir -p ./assets/dist/
-	cp -v ./node_modules/chart.js/dist/chart.umd.js ./assets/dist/chart.js
-	cp -v ./node_modules/chartjs-adapter-date-fns/dist/chartjs-adapter-date-fns.bundle.min.js ./assets/dist/
 	cp -v ./node_modules/fullcalendar/index.global.min.js ./assets/dist/fullcalendar.min.js
 	cp -v ./node_modules/leaflet/dist/leaflet.css ./assets/dist/
 	cp -v ./node_modules/leaflet/dist/leaflet.js ./assets/dist/
 	cp -v ./node_modules/sorttable/sorttable.js ./assets/dist/
 	cp -v ./node_modules/shareon/dist/shareon.iife.js  ./assets/dist/
 	cp -v ./node_modules/shareon/dist/shareon.min.css ./assets/dist/
 	cp -R ./node_modules/@fortawesome/fontawesome-free/ ./assets/dist/fontawesome/
+	cp -v ./node_modules/apexcharts/dist/apexcharts.min.js ./assets/dist/
+	cp -v ./node_modules/apexcharts/dist/apexcharts.css ./assets/dist/
 
 
 watch-tw:

diff --git a/README.md b/README.md
@@ -283,7 +283,7 @@ database storage is a single SQLite file.
   - [FullCalendar](https://fullcalendar.io/)
   - [Leaflet](https://leafletjs.com/)
   - [sorttable](https://www.kryogenix.org/code/browser/sorttable/)
-  - [Chart.js](https://cdn.jsdelivr.net/npm/chart.js)
+  - [apexcharts](https://apexcharts.com/)
 - Docker
 
 The application uses OpenStreetMap as its map provider and for geocoding a GPS

diff --git a/assets/output.css b/assets/output.css
@@ -1768,10 +1768,6 @@ table {
   visibility: collapse;
 }
 
-.static {
-  position: static;
-}
-
 .fixed {
   position: fixed;
 }
@@ -1800,6 +1796,10 @@ table {
   float: right;
 }
 
+.m-1 {
+  margin: 0.25rem;
+}
+
 .-mr-5 {
   margin-right: -1.25rem;
 }
@@ -1848,10 +1848,6 @@ table {
   height: 300px;
 }
 
-.h-\[400px\] {
-  height: 400px;
-}
-
 .min-h-\[450px\] {
   min-height: 450px;
 }
@@ -1958,6 +1954,12 @@ table {
   overflow-y: hidden;
 }
 
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -2861,10 +2863,6 @@ table {
   .xl\:hidden {
     display: none;
   }
-
-  .xl\:h-\[600px\] {
-    height: 600px;
-  }
 }
 
 @media (min-width: 1536px) {

diff --git a/docs/dashboard-responsive.png b/docs/dashboard-responsive.png
diff --git a/docs/dashboard.png b/docs/dashboard.png
diff --git a/docs/login.png b/docs/login.png
diff --git a/docs/responsive.png b/docs/responsive.png
diff --git a/docs/single_workout-dark.png b/docs/single_workout-dark.png
diff --git a/docs/single_workout-light.png b/docs/single_workout-light.png
diff --git a/docs/single_workout-responsive.png b/docs/single_workout-responsive.png
diff --git a/docs/single_workout-theme.jpg b/docs/single_workout-theme.jpg
diff --git a/docs/statistics-responsive.png b/docs/statistics-responsive.png
diff --git a/docs/statistics.png b/docs/statistics.png
diff --git a/docs/upload_workouts.png b/docs/upload_workouts.png
diff --git a/docs/workout_overview.png b/docs/workout_overview.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,8 +5,7 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.5.1",
-    "chart.js": "^4.4.2",
-    "chartjs-adapter-date-fns": "^3.0.0",
+    "apexcharts": "^3.48.0",
     "fullcalendar": "^6.1.11",
     "leaflet": "^1.9.4",
     "shareon": "^2.5.0",