Replace c3js with chart.js for major dep size reduction.

knadh · Dec 29, 2023 · ef77a7e · ef77a7e
1 parent af8b420
commit ef77a7e
Show file tree

Hide file tree

Showing 6 changed files with 163 additions and 537 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -14,7 +14,7 @@
     "axios": "^1.6.2",
     "buefy": "^0.9.25",
     "bulma": "^0.9.4",
-    "c3": "^0.7.20",
+    "chart.js": "^4.4.1",
     "codeflask": "^1.4.1",
     "dayjs": "^1.11.10",
     "indent.js": "^0.3.5",
@@ -23,6 +23,7 @@
     "tinymce": "^5.10.9",
     "turndown": "^7.1.2",
     "vue": "^2.7.14",
+    "vue-chartjs": "^5.3.0",
     "vue-i18n": "^8.28.2",
     "vue-router": "^3.2.0",
     "vuex": "^3.6.2"

diff --git a/frontend/src/assets/style.scss b/frontend/src/assets/style.scss
@@ -48,6 +48,10 @@ $menu-item-active-color: $primary;
 /* Buefy */
 $modal-background-background-color: rgba(0, 0, 0, .30);
 
+.line-chart {
+  min-height: 300px;
+}
+
 /* Import full Bulma and Buefy */
 @import "bulma";
 @import "buefy/src/scss/buefy";
@@ -744,26 +748,25 @@ section.campaigns {
   }
 }
 
-.campaign 
-
 section.analytics {
   .charts {
     position: relative;
     min-height: 100px;
   }
 
   .chart {
-    margin-bottom: 45px;
+    margin-bottom: 100px;
+    max-width: 100%;
   }
 
   .donut-container {
     position: relative;
   }
-  .donut {
-    bottom: 0px;
-    right: 0px;
-    position: absolute !important;
-  }
+}
+
+.chart canvas {
+  height: 400px;
+  max-width: 100%;
 }
 
 /* Campaign / template preview popup */