PAS-448 | update module style in reports (#581)

* update top modules to use the panel component

* fixing nAn render

* update spec

Author: merissaacosta

src/AdminConsole/Components/Pages/App/Reporting.razor

@@ -107,8 +107,8 @@
         if (lastActiveUserReport != null)
         {
             double totalUsers = lastActiveUserReport.TotalUsers;
-            SummaryItems.Add(new TrendingCardsStats.Item("Daily Active Users", lastActiveUserReport.DailyActiveUsers, TrendingCardsStats.ValueTypes.Integer, "({0} of total)", lastActiveUserReport.DailyActiveUsers / totalUsers, TrendingCardsStats.ValueTypes.Percentage));
-            SummaryItems.Add(new TrendingCardsStats.Item("Weekly Active Users", lastActiveUserReport.WeeklyActiveUsers, TrendingCardsStats.ValueTypes.Integer, "({0} of total)", lastActiveUserReport.WeeklyActiveUsers / totalUsers, TrendingCardsStats.ValueTypes.Percentage));
+            SummaryItems.Add(new TrendingCardsStats.Item("Daily Active Users", lastActiveUserReport.DailyActiveUsers, TrendingCardsStats.ValueTypes.Integer, "({0} of total)", totalUsers == 0 ? 0 : lastActiveUserReport.DailyActiveUsers / totalUsers, TrendingCardsStats.ValueTypes.Percentage));
+            SummaryItems.Add(new TrendingCardsStats.Item("Weekly Active Users", lastActiveUserReport.WeeklyActiveUsers, TrendingCardsStats.ValueTypes.Integer, "({0} of total)", totalUsers == 0 ? 0 : lastActiveUserReport.WeeklyActiveUsers / totalUsers, TrendingCardsStats.ValueTypes.Percentage));
         }
         return true;
     }

src/AdminConsole/Components/Shared/Stats/TrendingCardsStats.razor

@@ -1,16 +1,19 @@
 @using System.Globalization
 @inherits BaseCardStats
 
+
 @if (Items.Count > 0)
 {
     <dl class="@Class">
         @foreach (var item in Items)
         {
-            <div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-2 bg-white px-4 py-10 sm:px-6 xl:px-8">
-                <dt class="text-sm font-medium leading-6 text-gray-500">@item.Label</dt>
-                <dd class="text-xs font-medium text-gray-700">@string.Format(item.SubLabel, item.GetSubValue())</dd>
-                <dd class="w-full flex-none text-3xl font-medium leading-10 tracking-tight text-gray-900">@item.GetValue()</dd>
-            </div>
+            <Panel>
+                <div class="flex flex-wrap items-baseline justify-between">
+                    <dt class="text-sm font-medium leading-6 text-gray-500">@item.Label</dt>
+                    <dd class="text-xs font-medium text-gray-700">@string.Format(item.SubLabel, item.GetSubValue())</dd>
+                    <dd class="w-full flex-none text-3xl font-medium leading-10 tracking-tight text-gray-900">@item.GetValue()</dd>
+                </div>
+            </Panel>
         }
     </dl>
 }
@@ -39,7 +42,7 @@
         public string GetValue() => Format(Value, Type);
 
         public string GetSubValue() => Format(SubValue, SubType);
-        
+
         private string Format(double value, ValueTypes type)
         {
             switch (type)
@@ -49,7 +52,7 @@
                 case ValueTypes.Integer:
                     return value.ToString("N0", CultureInfo.InvariantCulture);
                 case ValueTypes.Percentage:
-                    return value.ToString("P2", CultureInfo.InvariantCulture);
+                    return value.ToString("P2", CultureInfo.InvariantCulture).Replace(" ", string.Empty);
                 default:
                     throw new ArgumentOutOfRangeException();
             }

tests/AdminConsole.Tests/Components/Shared/Stats/TrendingCardsStatsTests.cs

@@ -56,9 +56,9 @@ public void TrendingCardsStats_Renders_ExpectedCardsWithExpectedContent()
 
         // Assert
         var cards = cut.Nodes[0].ChildNodes;
-        cards[0].MarkupMatches("<div diff:ignoreAttributes><dt diff:ignoreAttributes>Title 1</dt><dd diff:ignoreAttributes>Sub 4.00 %</dd><dd diff:ignoreAttributes>1</dd></div>");
-        cards[1].MarkupMatches("<div diff:ignoreAttributes><dt diff:ignoreAttributes>Title 2</dt><dd diff:ignoreAttributes>Sub 2.00 %</dd><dd diff:ignoreAttributes>2.00</dd></div>");
-        cards[2].MarkupMatches("<div diff:ignoreAttributes><dt diff:ignoreAttributes>Title 3</dt><dd diff:ignoreAttributes>Sub 1</dd><dd diff:ignoreAttributes>300.00 %</dd></div>");
+        cards[0].MarkupMatches("<div diff:ignoreAttributes><div diff:ignoreAttributes><div diff:ignoreAttributes><dt diff:ignoreAttributes>Title 1</dt><dd diff:ignoreAttributes>Sub 4.00%</dd><dd diff:ignoreAttributes>1</dd></div></div></div>");
+        cards[1].MarkupMatches("<div diff:ignoreAttributes><div diff:ignoreAttributes><div diff:ignoreAttributes><dt diff:ignoreAttributes>Title 2</dt><dd diff:ignoreAttributes>Sub 2.00%</dd><dd diff:ignoreAttributes>2.00</dd></div></div></div>");
+        cards[2].MarkupMatches("<div diff:ignoreAttributes><div diff:ignoreAttributes><div diff:ignoreAttributes><dt diff:ignoreAttributes>Title 3</dt><dd diff:ignoreAttributes>Sub 1</dd><dd diff:ignoreAttributes>300.00%</dd></div></div></div>");
     }
 
     [Fact]