Blogifier Analytics #245

src/Blogifier.Admin/Components/Dashboard/AnalyticsComponent.razor

@@ -0,0 +1,153 @@
+@using ChartJs.Blazor
+@using ChartJs.Blazor.Common
+@using ChartJs.Blazor.Common.Enums
+@using ChartJs.Blazor.Util
+@using ChartJs.Blazor.BarChart
+@using System.Drawing
+
+@inject HttpClient _http
+@inject IStringLocalizer<Resource> _localizer
+
+<div class="dashboard-widget-card p-3">
+    <div class="list-toolbar">
+
+        <!--Time -->
+        <div class="dropdown dropdown-flush">
+            <button class="btn btn-link dropdown-toggle" type="button" id="dropdownPostAction" data-bs-toggle="dropdown" aria-expanded="false">
+                @_localizer["last"] 7 @_localizer["days"]
+            </button>
+            <div class="dropdown-menu" aria-labelledby="dropdownPostAction">
+                <button type="button" class="dropdown-item"><span>@_localizer["today"]</span></button>
+                <button type="button" class="dropdown-item"><span>@_localizer["yesterday"]</span></button>
+                <button type="button" class="dropdown-item"><span>@_localizer["last"] 7 @_localizer["days"]</span></button>
+                <button type="button" class="dropdown-item"><span>@_localizer["last"] 30 @_localizer["days"]</span></button>
+                <button type="button" class="dropdown-item"><span>@_localizer["last"] 90 @_localizer["days"]</span></button>
+            </div>
+        </div>
+        <!--/Time -->
+
+        <!-- Toggle between list or chart  -->
+        <div class="btn-group ms-auto" role="group" aria-label="Chart or List">
+            <button type="button" class="btn btn-link rounded-3">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-graph-up" viewBox="0 0 16 16">
+                    <path fill-rule="evenodd" d="M0 0h1v15h15v1H0V0zm10 3.5a.5.5 0 0 1 .5-.5h4a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-1 0V4.9l-3.613 4.417a.5.5 0 0 1-.74.037L7.06 6.767l-3.656 5.027a.5.5 0 0 1-.808-.588l4-5.5a.5.5 0 0 1 .758-.06l2.609 2.61L13.445 4H10.5a.5.5 0 0 1-.5-.5z"/>
+                </svg>
+            </button>
+            <button type="button" class="btn btn-link rounded-3 active">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ul" viewBox="0 0 16 16">
+                    <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5zm-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/>
+                </svg>
+            </button>
+        </div>
+        <!--/Toggle -->
+
+    </div>
+
+    <!-- List -->
+
+    <!--
+        The list of posts/pages in the selected time,
+        sorting by the higher visits.
+
+        Note:
+        A single visitor maybe visits 10 pages, so that's why we have Visits and Visitors.
+    -->
+
+    <ul class="list compact">
+        <li class="list-item">
+            <span class="list-title">Title</span>
+            <span class="list-text text-end col-2">Visits</span>
+            <span class="list-text text-end col-2">Visitors</span>
+        </li>
+        <li class="list-item">
+            <span class="list-title">Some post here</span>
+            <span class="list-text text-end col-2">700</span>
+            <span class="list-text text-end col-2">455</span>
+        </li>
+        <li class="list-item">
+            <span class="list-title">Some page here</span>
+            <span class="list-text text-end col-2">532</span>
+            <span class="list-text text-end col-2">125</span>
+        </li>
+        <li class="list-item">
+            <span class="list-title">Some post here</span>
+            <span class="list-text text-end col-2">245</span>
+            <span class="list-text text-end col-2">120</span>
+        </li>
+        <li class="list-item">
+            <span class="list-title">Some page here</span>
+            <span class="list-text text-end col-2">251</span>
+            <span class="list-text text-end col-2">100</span>
+        </li>
+    </ul>
+
+    <!--/List -->
+
+    <!-- Chart -->
+
+    <!--
+        Chart must show visits per day not by the title of the post.
+    -->
+	<Chart Config="_config"></Chart>
+    <!--/Chart -->
+
+</div>
+
+@code {
+    private BarConfig _config;
+
+    protected override async Task OnInitializedAsync()
+    {
+        _config = new BarConfig
+        {
+            Options = new BarOptions
+            {
+                Responsive = true,
+                Legend = new Legend
+                {
+                    Position = Position.Top
+                }
+            }
+        };
+
+        IDataset<int> dataset = new BarDataset<int>()
+        {
+            Label = "Latest Post Views",
+            BackgroundColor = ColorUtil.FromDrawingColor(Color.FromArgb(98, 42, 255)),
+            BorderWidth = 0
+        };
+
+        var model = await _http.GetFromJsonAsync<AnalyticsModel>("api/analytics");
+
+        if(model == null || model.LatestPostViews == null)
+        {
+            LoadData(dataset, TestData());
+        }
+        else
+        {
+            LoadData(dataset, model.LatestPostViews);
+        }
+        _config.Data.Datasets.Add(dataset);
+    }
+
+    protected void LoadData(IDataset<int> dataset, BarChartModel model)
+    {
+        foreach (var label in model.Labels)
+        {
+            _config.Data.Labels.Add(label);
+        }
+        foreach (var item in model.Data)
+        {
+            dataset.Add(item);
+        }
+    }
+
+    protected BarChartModel TestData()
+    {
+        return new BarChartModel()
+        {
+            Labels = new List<string>() { "Post One", "Post Two", "Post Three", "Post Four", "Post Five", "Post Six" },
+            Data = new List<int>() { 12036, 15350, 9457, 11104, 7938, 8136 }
+        };
+    }
+}

src/Blogifier.Admin/Pages/Dashboard/Admin.razor

@@ -7,6 +7,6 @@
     </div>
     <div class="dashboard-widgets col-lg-5">
         <TotalsComponent />
-        <BarChartComponent />
+        <AnalyticsComponent />
     </div>
 </div>

src/Blogifier.Admin/wwwroot/package.json

@@ -5,7 +5,7 @@
   "author": "https://github.com/farzindev",
   "private": true,
   "scripts": {
-    "sass": "node-sass --watch scss -o css --source-map true"
+    "start": "node-sass --watch scss -o css --source-map true"
   },
   "devDependencies": {
     "bootstrap": "^5.0.0-beta2",

src/Blogifier.Admin/wwwroot/scss/include/_buttons.scss

@@ -8,6 +8,8 @@
   &-link {
     font-weight: 500;
     box-shadow: none;
+    &.active,
+    &:active,
     &:focus {
       box-shadow: $input-focus-box-shadow;
     }

src/Blogifier.Admin/wwwroot/scss/include/_list.scss

@@ -125,6 +125,12 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+
+    .compact & {
+      line-height:2rem;
+      font-size:.75rem;
+    }
+
   }
 
   &-text {