diff --git a/Helios/Views/Configurator/PanelDetails.cshtml b/Helios/Views/Configurator/PanelDetails.cshtml index c03fffc9cf1cbb45395f6ba8be531fe3901dd0e5..562c1663a1a666d527abe8482cb0540c1f1bcd6c 100644 --- a/Helios/Views/Configurator/PanelDetails.cshtml +++ b/Helios/Views/Configurator/PanelDetails.cshtml @@ -6,7 +6,9 @@ <div class="panelInfo"> <div class="graph"> - <p>Graph</p> + <div> + <canvas id="myChart"></canvas> + </div> </div> <div class="panelDetails"> <h5>Panel Details</h5> @@ -38,4 +40,47 @@ </li> </ul> </div> -</div> \ No newline at end of file +</div> + +<script> + const labels = ["01:00", "02:00", "03:00", "04:00", "05:00", "06:00", "07:00", "08:00", "09:00", "10:00", "11:00", "12:00"]; + const data = { + labels: labels, + datasets: [ + { + label: 'Summer', + data: [100, 98, 97, 87, 71, 60, 58, 59, 54, 45, 50, 55], + backgroundColor: 'rgb(33, 85, 239)', + borderColor: 'rgb(33, 85, 239)', + }, + { + label: 'Winter', + data: [100, 98, 97, 87, 71, 60, 55, 45, 42, 39, 36, 33, 30], + backgroundColor: 'rgb(239, 33, 31)', + borderColor: 'rgb(239, 33, 31)', + } + ] + }; + + const config = { + type: 'line', + data: data, + options: { + responsive: true, + plugins: { + legend: { + position: 'top', + }, + title: { + display: true, + text: 'Summer and Winter Performance Comparison (For demonstration purposes only!)' + } + } + }, + }; + + const myChart = new Chart( + document.getElementById('myChart'), + config + ); +</script> \ No newline at end of file diff --git a/Helios/Views/Shared/_Layout.cshtml b/Helios/Views/Shared/_Layout.cshtml index bf5432f276c4172eb2fd7d53bd0d57a6c1fdff1a..39d5ea4a8062483799e375357e5014bc50e53aa1 100644 --- a/Helios/Views/Shared/_Layout.cshtml +++ b/Helios/Views/Shared/_Layout.cshtml @@ -4,6 +4,7 @@ <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>@ViewData["Title"] - Helios</title> + <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js" integrity="sha512-QSkVNOCYLtj73J4hbmVoOV6KVZuMluZlioC+trLpewV8qMjsWqlIQvkn1KGX2StWvPMdWGBqim1xlC8krl1EKQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css" integrity="sha512-Ez0cGzNzHR1tYAv56860NLspgUGuQw16GiOOp/I2LuTmpSK9xDXlgJz3XN4cnpXWDmkNBKXR/VDMTCnAaEooxA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" /> <link rel="stylesheet" href="~/Helios.styles.css" asp-append-version="true" /> diff --git a/Helios/wwwroot/css/site.css b/Helios/wwwroot/css/site.css index 931aa11c2a8195959733058ef54bfb08acc939fe..8ecab40982e070b1f0b06b3df2e4ce79157c6334 100644 --- a/Helios/wwwroot/css/site.css +++ b/Helios/wwwroot/css/site.css @@ -28,7 +28,7 @@ body { .panelInfo { display: grid; grid-template-columns: 1fr 1fr 1fr; - grid-template-rows: 1fr 1fr; + grid-template-rows: 0.25fr 1fr; gap: 0px 0px; grid-auto-flow: row; grid-template-areas: