From ac61ace1a7757e37fc11a8b047ce8463b1cb8cd1 Mon Sep 17 00:00:00 2001
From: Peace <syneffort@gmail.com>
Date: Wed, 19 Jun 2024 16:37:12 +0900
Subject: [PATCH] radzen chart

---
 .../Components/Pages/Home.razor               | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/HelloBlazorServer/HelloBlazorServer/Components/Pages/Home.razor b/HelloBlazorServer/HelloBlazorServer/Components/Pages/Home.razor
index a0a0b2b..6afd5a3 100644
--- a/HelloBlazorServer/HelloBlazorServer/Components/Pages/Home.razor
+++ b/HelloBlazorServer/HelloBlazorServer/Components/Pages/Home.razor
@@ -14,6 +14,7 @@
         </RadzenCard>
     </div>
 </div>
+
 <div class="row my-5">
     <RadzenText TextStyle="TextStyle.DisplayH6">💡 자세히 찾아보기</RadzenText>
     <RadzenStack Orientation="Orientation.Horizontal">
@@ -73,10 +74,55 @@
     </div>
 </div>
 
+<div class="row my-5">
+    <div class="col-sm-12 col-lg-8">
+        <RadzenText TextStyle="TextStyle.DisplayH6">💡 행정동 인구수 Top 10</RadzenText>
+        <RadzenCard>
+            <RadzenChart ColorScheme="ColorScheme.Palette">
+                <RadzenLineSeries Title="총 인구(Line)"
+                                  Data="@_populations?.OrderByDescending(c => c.TotalPopulation).Take(10)"
+                                  CategoryProperty="AdministrativeAgency"
+                                  ValueProperty="TotalPopulation"
+                                  LineType="LineType.Dashed">
+                    <RadzenMarkers MarkerType="MarkerType.Auto" />
+                    <RadzenSeriesDataLabels Visible="_isShowDataLabel" />
+                </RadzenLineSeries>
+                <RadzenColumnSeries Title="총 인구(Column)"
+                                    Data="@_populations?.OrderByDescending(c => c.TotalPopulation).Take(10)"
+                                    CategoryProperty="AdministrativeAgency"
+                                    ValueProperty="TotalPopulation">
+                    
+                </RadzenColumnSeries>
+                <RadzenLegend Position="LegendPosition.Bottom"/>
+                <RadzenColumnOptions Radius="5" Width="50"/>
+                <RadzenCategoryAxis Padding="5"/>
+                <RadzenValueAxis Min="0" Max="60000" Step="10000">
+                    <RadzenGridLines Visible="true"/>
+                    <RadzenAxisTitle Text="총 인구"/>
+                </RadzenValueAxis>
+            </RadzenChart>
+        </RadzenCard>
+    </div>
+    <div class="col-sm-12 col-lg-4">
+        <RadzenText TextStyle="TextStyle.DisplayH6">💡 행정동 인구수 Top 10</RadzenText>
+        <RadzenCard>
+            <RadzenChart ColorScheme="ColorScheme.Palette">
+                <RadzenPieSeries Title="총 인구(Pie)"
+                                 Data="@_populations?.OrderByDescending(c => c.TotalPopulation).Take(10)"
+                                 CategoryProperty="AdministrativeAgency"
+                                 ValueProperty="TotalPopulation">
+                </RadzenPieSeries>
+            </RadzenChart>
+        </RadzenCard>
+    </div>
+</div>
+
 @code {
     private IEnumerable<GangnamguPopulation> _populations;
     private IEnumerable<string>? _administrativeAgency;
 
+    private bool _isShowDataLabel = true;
+
     private string _value = string.Empty;
     private string _selectTotalPopulation = string.Empty;
     private string _selectMalePopulation = string.Empty;