github.com/sdqri/sequined@v0.0.0-20240421190656-fc6bf956f4d8/internal/dashboard/templates/dashboard.html.tmpl (about) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Dashboard</title> 7 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> 8 <script src="https://unpkg.com/htmx.org/dist/htmx.js"></script> 9 <script src="https://go-echarts.github.io/go-echarts-assets/assets/echarts.min.js"></script> 10 <style> 11 .sidebar { 12 background-color: white; 13 height: 100vh; 14 transition: width 0.3s ease; 15 overflow-x: hidden; 16 } 17 .sidebar-brand { 18 padding: 20px; 19 text-align: center; 20 } 21 .sidebar-brand img { 22 border-radius: 100px; 23 max-width: 80%; 24 } 25 .sidebar-item { 26 padding: 10px; 27 cursor: pointer; 28 } 29 .sidebar-item.active { 30 background-color: #e9ecef; 31 } 32 </style> 33 </head> 34 <body> 35 <div class="container-fluid"> 36 <div class="row"> 37 <!-- Sidebar --> 38 <div class="col-md-2 sidebar" id="sidebar"> 39 <div class="sidebar-brand" id="brand"> 40 <img src="https://github.com/sdqri/sequined/raw/master/docs/sequined-main.jpg" alt="Sequined Logo"> 41 <h3 class="mt-2">Sequined Dashboard</h3> 42 </div> 43 <hr/> 44 <div class="sidebar-options"> 45 <div class="sidebar-item active" onclick="showAnalytics()"> 46 <i class="fas fa-chart-line mr-2"></i> <span class="menu-text">Analytics</span> 47 </div> 48 <div class="sidebar-item" onclick="showGraph()"> 49 <i class="fas fa-chart-bar mr-2"></i> <span class="menu-text">Graph</span> 50 </div> 51 </div> 52 </div> 53 54 <!-- Content --> 55 <div class="col-md-10 content" style="margin-top: 5rem;" id="content"> 56 <div id="analyticsContent" class="row justify-content-md-center"> 57 <div id="freshnesscard" class="card col-md-10 mx-2"> 58 <div class="card-body"> 59 <h5 class="card-title">Freshness</h5> 60 <div id="freshnesscard" hx-get="/charts/freshness?bucket-duration=10m&duration=1h&ip=127.0.0.1" hx-trigger="load, every 10s" hx-swap="innerHTML" hx-target="#freshnesscard"> 61 </div> 62 </div> 63 </div> 64 <div class="card col-md-10 mx-2"> 65 <div class="card-body"> 66 <h5 class="card-title">Age</h5> 67 <div id="agecard" hx-get="/charts/age?bucket-duration=10m&duration=1h&ip=127.0.0.1" hx-trigger="load, every 10s" hx-swap="innerHTML" hx-target="#agecard"> 68 </div> 69 </div> 70 </div> 71 </div> 72 <div id="graphContent" class="row justify-content-md-center" style="display: none;"> 73 <div id="tree" class="card col-md-10 mx-2"> 74 <div class="card-body"> 75 <h5 class="card-title">Graph</h5> 76 <div id="treechart" hx-get="/charts/tree" hx-trigger="load, every 10s" hx-swap="innerHTML" hx-target="#treechart"> 77 </div> 78 </div> 79 </div> 80 </div> 81 </div> 82 </div> 83 84 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> 85 <script> 86 function showAnalytics() { 87 document.getElementById("analyticsContent").style.display = "flex"; 88 document.getElementById("graphContent").style.display = "none"; 89 document.querySelector(".sidebar-item.active").classList.remove("active"); 90 document.querySelectorAll(".sidebar-item")[0].classList.add("active"); 91 } 92 93 function showGraph() { 94 document.getElementById("analyticsContent").style.display = "none"; 95 document.getElementById("graphContent").style.display = "flex"; 96 document.querySelector(".sidebar-item.active").classList.remove("active"); 97 document.querySelectorAll(".sidebar-item")[1].classList.add("active"); 98 } 99 100 </script> 101 </body> 102 </html> 103