IMP: Add new chart component, cleanup home page and navigations.

Mehdi-Aghaei · Jul 24, 2024 · bc49bc6 · bc49bc6
1 parent 5bb71db
commit bc49bc6
Show file tree

Hide file tree

Showing 11 changed files with 215 additions and 41 deletions.
diff --git a/Pandemic.Tracker.Web/Components/Layout/MainLayout.razor b/Pandemic.Tracker.Web/Components/Layout/MainLayout.razor
@@ -1,12 +1,9 @@
 @inherits LayoutComponentBase
 
-<div class="page">
+<Navbar/>
 
-    <main>
-        <article class="content px-4">
-            @Body
-        </article>
-    </main>
+<div class="container mt-4">
+    @Body
 </div>
 
 <div id="blazor-error-ui">

diff --git a/Pandemic.Tracker.Web/Components/Layout/Navbar.razor b/Pandemic.Tracker.Web/Components/Layout/Navbar.razor
@@ -0,0 +1,18 @@
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="/">Pandemic Tracker</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+            <ul class="navbar-nav ml-auto">
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="/">Home</NavLink>
+                </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="/chart-list">Charts</NavLink>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
diff --git a/Pandemic.Tracker.Web/Components/Pages/BarChart.razor b/Pandemic.Tracker.Web/Components/Pages/BarChart.razor
@@ -0,0 +1,35 @@
+@page "/bar-chart"
+@rendermode InteractiveServer
+@inject CountryService CountryService
+
+<ApexChart TItem="Country" Title="Country Data">
+    <ApexPointSeries TItem="Country"
+                     Items="Countries"
+                     Name="Cases"
+                     SeriesType="SeriesType.Bar"
+                     XValue="e => e.Name"
+                     YValue="e=> (decimal)e.Cases" />
+
+    <ApexPointSeries TItem="Country"
+                     Items="Countries"
+                     Name="Deaths"
+                     SeriesType="SeriesType.Bar"
+                     XValue="e => e.Name"
+                     YValue="e=> (decimal)e.Deaths" />
+
+    <ApexPointSeries TItem="Country"
+                     Items="Countries"
+                     Name="Recovered"
+                     SeriesType="SeriesType.Bar"
+                     XValue="e => e.Name"
+                     YValue="e=> (decimal)e.Recovered" />
+</ApexChart>
+
+@code {
+    public List<Country> Countries { get; set; } = [];
+
+    protected override void OnInitialized()
+    {
+        Countries = CountryService.GetCountriesStatic().Take(20).ToList();
+    }
+}
diff --git a/Pandemic.Tracker.Web/Components/Pages/ChartList.razor b/Pandemic.Tracker.Web/Components/Pages/ChartList.razor
@@ -0,0 +1,13 @@
+@page "/chart-list"
+@rendermode InteractiveServer
+
+<div class="container mt-5">
+    <h1 class="mb-4">Charts</h1>
+    <div class="list-group">
+        <a href="/bar-chart" class="list-group-item list-group-item-action bg-primary text-white mb-2">Bar Chart: Total Cases, Deaths, and Recovered</a>
+        <a href="/line-chart" class="list-group-item list-group-item-action bg-success text-white mb-2">Line Chart: Cases, Deaths, and Recovered Over Time</a>
+        <a href="/pie-chart" class="list-group-item list-group-item-action bg-info text-white mb-2">Pie Chart: Countries recovered per one million </a>
+        <a href="/heat-map" class="list-group-item list-group-item-action bg-warning text-dark mb-2">Heat Map: Cases per One Million</a>
+        <a href="/scatter-plot" class="list-group-item list-group-item-action bg-danger text-white mb-2">Scatter Plot: Cases vs. Population</a>
+    </div>
+</div>
diff --git a/Pandemic.Tracker.Web/Components/Pages/CountryChart.razor b/Pandemic.Tracker.Web/Components/Pages/CountryChart.razor
diff --git a/Pandemic.Tracker.Web/Components/Pages/HeatMap.razor b/Pandemic.Tracker.Web/Components/Pages/HeatMap.razor
@@ -0,0 +1,20 @@
+@page "/heat-map"
+@rendermode InteractiveServer
+@inject CountryService CountryService
+
+<ApexChart TItem="Country">
+    <ApexPointSeries TItem="Country"
+                       Items="Countries"
+                       SeriesType="SeriesType.Heatmap"
+                       XValue="e => e.Name"
+                       YValue="e => (decimal)e.CasesPerOneMillion" />
+</ApexChart>
+
+@code {
+    public List<Country> Countries { get; set; } = [];
+
+    protected override void OnInitialized()
+    {
+        Countries = CountryService.GetCountriesStatic().Take(20).ToList();
+    }
+}
diff --git a/Pandemic.Tracker.Web/Components/Pages/Home.razor b/Pandemic.Tracker.Web/Components/Pages/Home.razor
@@ -1,7 +1,48 @@
 @page "/"
 
-<PageTitle>Home</PageTitle>
+<div class="container mt-5">
+    <div class="jumbotron bg-primary text-white text-center p-5">
+        <h1 class="display-4">Pandemic Tracker</h1>
+        <hr class="my-4">
+        <p>This app currently only covers COVID-19. Stay informed with updated data and visualizations.</p>
+        <a href="/chart-list" class="btn btn-light btn-lg mt-3">Navigate to Charts</a>
+    </div>
 
-<h1>Hello everyone!</h1>
+    <div class="row mt-5">
+        <div class="col-md-6 mb-4">
+            <div class="card h-100 shadow-sm">
+                <div class="card-body">
+                    <h5 class="card-title">Real-Time Data Visualization</h5>
+                    <p class="card-text">Easily grasp intricate information through visual depictions with our robust data visualization tools.</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 mb-4">
+            <div class="card h-100 shadow-sm">
+                <div class="card-body">
+                    <h5 class="card-title">API Architecture</h5>
+                    <p class="card-text">Ensure consistent functionality with a strong architectural foundation, even with changes in data provisioning APIs.</p>
+                </div>
+            </div>
+        </div>
+    </div>
 
-Welcome to Pandemic Tracker.
+    <div class="row mt-3">
+        <div class="col-md-6 mb-4">
+            <div class="card h-100 shadow-sm">
+                <div class="card-body">
+                    <h5 class="card-title">Data Exportation</h5>
+                    <p class="card-text">Export data in CSV format for further analysis or record-keeping, enhancing usability and flexibility.</p>
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6 mb-4">
+            <div class="card h-100 shadow-sm">
+                <div class="card-body">
+                    <h5 class="card-title">Public Health Informatics</h5>
+                    <p class="card-text">Leverage technology to improve the accessibility and utility of health-related data during critical periods.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/Pandemic.Tracker.Web/Components/Pages/LineChart.razor b/Pandemic.Tracker.Web/Components/Pages/LineChart.razor
@@ -0,0 +1,36 @@
+@page "/line-chart"
+@rendermode InteractiveServer
+@inject CountryService CountryService
+
+
+<ApexChart TItem="Country">
+    <ApexPointSeries TItem="Country"
+                     Items="Countries"
+                     Name="Cases"
+                     SeriesType="SeriesType.Line"
+                     XValue="e => e.CreatedDate"
+                     YValue="e => (decimal)e.Cases" />
+
+    <ApexPointSeries TItem="Country"
+                     Items="Countries"
+                     Name="Deaths"
+                     SeriesType="SeriesType.Line"
+                     XValue="e => e.CreatedDate"
+                     YValue="e => (decimal)e.Deaths" />
+
+    <ApexPointSeries TItem="Country"
+                     Items="Countries"
+                     Name="Recovered"
+                     SeriesType="SeriesType.Line"
+                     XValue="e => e.CreatedDate"
+                     YValue="e => (decimal)e.Recovered" />
+</ApexChart>
+
+@code {
+    public List<Country> Countries { get; set; } = [];
+
+    protected override void OnInitialized()
+    {
+        Countries = CountryService.GetCountriesStatic().Take(20).ToList();
+    }
+}
diff --git a/Pandemic.Tracker.Web/Components/Pages/PieChart.razor b/Pandemic.Tracker.Web/Components/Pages/PieChart.razor
@@ -0,0 +1,22 @@
+@page "/pie-chart"
+@rendermode InteractiveServer
+@inject CountryService CountryService
+
+<ApexChart TItem="Country" Title="Countries recovered per one million">
+
+    <ApexPointSeries TItem="Country"
+                     Items="Countries"
+                     Name="Recovered"
+                     SeriesType="SeriesType.Pie"
+                     XValue="e => e.Name"
+                     YValue="e => (decimal)e.RecoveredPerOneMillion" />
+</ApexChart>
+
+@code {
+    public List<Country> Countries { get; set; } = [];
+
+    protected override void OnInitialized()
+    {
+        Countries = CountryService.GetCountriesStatic().Take(10).ToList();
+    }
+}
diff --git a/Pandemic.Tracker.Web/Components/Pages/ScatterPlot.razor b/Pandemic.Tracker.Web/Components/Pages/ScatterPlot.razor
@@ -0,0 +1,21 @@
+@page "/scatter-plot"
+@rendermode InteractiveServer
+@inject CountryService CountryService
+
+<ApexChart TItem="Country">
+    <ApexPointSeries TItem="Country"
+                     Items="Countries"
+                     Name="Cases vs Population"
+                     SeriesType="SeriesType.Scatter"
+                     XValue="e => (decimal)e.Population"
+                     YValue="e => (decimal)e.Cases" />
+</ApexChart>
+
+@code {
+    public List<Country> Countries { get; set; } = [];
+
+    protected override void OnInitialized()
+    {
+        Countries = CountryService.GetCountriesStatic().Take(20).ToList();
+    }
+}
diff --git a/Pandemic.Tracker.sln b/Pandemic.Tracker.sln
@@ -1,11 +1,10 @@
-
 Microsoft Visual Studio Solution File, Format Version 12.00
 # Visual Studio Version 17
 VisualStudioVersion = 17.9.34607.119
 MinimumVisualStudioVersion = 10.0.40219.1
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Pandemic.Tracker.Web", "Pandemic.Tracker.Web\Pandemic.Tracker.Web.csproj", "{A49F7E08-3CEB-45C8-8855-CBDC46EA567E}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Pandemic.Tracker.Web", "Pandemic.Tracker.Web\Pandemic.Tracker.Web.csproj", "{A49F7E08-3CEB-45C8-8855-CBDC46EA567E}"
 EndProject
-Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Pandemic.Tracker.Web.Unit.Tests", "Pandemic.Tracker.Web.Unit.Tests\Pandemic.Tracker.Web.Unit.Tests.csproj", "{B5F4D6C2-02A6-495A-9574-6CE2AC35595B}"
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Pandemic.Tracker.Web.Unit.Tests", "Pandemic.Tracker.Web.Unit.Tests\Pandemic.Tracker.Web.Unit.Tests.csproj", "{B5F4D6C2-02A6-495A-9574-6CE2AC35595B}"
 EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
@@ -29,3 +28,4 @@ Global
 		SolutionGuid = {04F50B84-66C3-4DFA-8D96-B86DAF0892D4}
 	EndGlobalSection
 EndGlobal
+bal