fixed container charts

CHANGELOG.md

@@ -4,7 +4,8 @@
 * Views are now HTML instead of EJS.
 * Improved Dockerfile.
 * Express sessions configured to use memorystore.
-* 
+* Improved chart rendering.
+* Fixed chart scaling.
 
 ## v0.20 (Jan 20th 2024) - The rewrite. Jumping all the way to v0.20.
 * Changed to ES6 imports.

components/containerCard.js

@@ -3,7 +3,8 @@ export const containerCard = (data) => {
   
   let { name, service, state, external_port, internal_port, ports, link } = data;
   let wrapped = name;
-  let chart = name;
+  
+  let chartName = name.replace(/-/g, '');
 
   if (name.length > 13) {
     wrapped = name.slice(0, 10) + '...';
@@ -111,8 +112,18 @@ export const containerCard = (data) => {
               </span>
             </div>
           </div>
-          <div class="chart-sm" data-hx-get="/chart" data-hx-trigger="every 2s" name="${name}" data-hx-target="#${name}_chart" hx-swap="innerHTML">
-            <div id="${name}_chart"></div>
+          
+          <script>
+              var ${chartName}chart = new ApexCharts(document.querySelector("#${chartName}_chart"), options);
+          </script>
+
+          <div class="chart-sm">
+            <div id="${chartName}_chart" data-hx-trigger="every 4s" data-hx-get="/chart" name="${chartName}">
+              <script>
+                ${chartName}chart.render();
+              </script>
+            </div>
+            
           </div>
         </div>
       </div>

server.js

@@ -46,10 +46,10 @@ app.use([
 app.listen(port, async () => {
     async function init() {
         try { await sequelize.authenticate().then(
-            () => { console.log('DB Connection: ✔️') }); } 
+            () => { console.log('DB Connection: ✔️') }); }
             catch { console.log('DB Connection: ❌'); }
         try { await sequelize.sync().then( // check out that formatting
-            () => { console.log('Synced Models: ✔️') }); } 
+            () => { console.log('Synced Models: ✔️') }); }
             catch { console.log('Synced Models: ❌'); }
     }
     await init().then(() => { 
@@ -263,62 +263,16 @@ router.get('/click', async (req, res) => {
 // container charts
 router.get('/chart', async (req, res) => {
     let name = req.header('hx-trigger-name');
+
     let chart = `
     <script>
-    var options = {
-        chart: {
-          type: "line",
-          height: 40.0,
-          sparkline: {
-            enabled: true
-          },
-          animations: {
-            enabled: false
-          }
-        },
-        fill: {
-          opacity: 1
-        },
-        stroke: {
-          width: [2, 1],
-          dashArray: [0, 3],
-          lineCap: "round",
-          curve: "smooth"
-        },
-        series: [{
-          name: "CPU",
-          data: [0,10,0,10,0,10,0,10,0,10]
+        ${name}chart.updateSeries([{
+            data: [0,10,0,20,0,30,0,40,0,50]
         }, {
-          name: "RAM",
-          data: [0,5,0,5,0,5,0,5,0,5]
-        }],
-        tooltip: {
-          enabled: false
-        },
-        grid: {
-          strokeDashArray: 4
-        },
-        xaxis: {
-          labels: {
-            padding: 0
-          },
-          tooltip: {
-            enabled: false
-          }
-        },
-        yaxis: {
-          labels: {
-            padding: 4
-          }
-        },
-        colors: [tabler.getColor("primary"), tabler.getColor("gray-600")],
-        legend: {
-          show: false
-        }
-    }
-
-    var chart = new ApexCharts(document.querySelector("#${name}_chart"), options);
-    chart.render();
+            data: [10,0,30,0,0,50,0,0,70,0]
+        }])
     </script>`
+
     res.send(chart);
+      
 });

views/dashboard.html

@@ -1014,6 +1014,61 @@
 
   <script src="/libs/apexcharts/dist/apexcharts.min.js"></script>
   <script src="/js/tabler.min.js"></script>
+  <script>
+    var options = {
+        chart: {
+          type: "line",
+          height: 40.0,
+          sparkline: {
+            enabled: true
+          },
+          animations: {
+            enabled: false
+          }
+        },
+        fill: {
+          opacity: 1
+        },
+        stroke: {
+          width: [2, 1],
+          dashArray: [0, 3],
+          lineCap: "round",
+          curve: "smooth"
+        },
+        series: [{
+          name: "CPU",
+          data: [0,0,0,0,0,0,0,0,0,0]
+        }, {
+          name: "RAM",
+          data: [0,0,0,0,0,0,0,0,0,0]
+        }],
+        tooltip: {
+          enabled: false
+        },
+        grid: {
+          strokeDashArray: 4
+        },
+        xaxis: {
+          labels: {
+            padding: 0
+          },
+          tooltip: {
+            enabled: false
+          }
+        },
+        yaxis: {
+          min: 0,
+          max: 100,
+          labels: {
+            padding: 4
+          }
+        },
+        colors: [tabler.getColor("primary"), tabler.getColor("gray-600")],
+        legend: {
+          show: false
+        }
+    }
+  </script>
 
   </body>
 </html>

views/login.html

@@ -17,7 +17,6 @@
         font-feature-settings: "cv03", "cv04", "cv11";
       }
     </style>
-    <script src="https://unpkg.com/htmx.org@1.9.10" integrity="sha384-D1Kt99CQMDuVetoL1lrYwg5t+9QdHe7NLX/SoJYkXDFfX37iInKRy5xLSi8nO7UC" crossorigin="anonymous"></script>
   </head>
   <body  class=" d-flex flex-column">
     <script src="/js/demo-theme.js"></script>
@@ -75,8 +74,6 @@
         </div>
       </div>
     </div>
-
-    <button class="btn btn-success" hx-get="/click" hx-trigger="click" hx-swap="innerHTML" id="incriment">0</button>
  
     <!-- Libs JS -->
     <!-- Tabler Core -->