Skip to content

Commit

Permalink
Blogifier Analytics #245
Browse files Browse the repository at this point in the history
  • Loading branch information
@farzindev
farzindev committed Feb 26, 2021
1 parent 9443da9 commit 75f5652
Show file tree
Hide file tree
Showing 9 changed files with 170 additions and 78 deletions.
153 changes: 153 additions & 0 deletions src/Blogifier.Admin/Components/Dashboard/AnalyticsComponent.razor
View file
@@ -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 }
};
}
}
72 changes: 0 additions & 72 deletions src/Blogifier.Admin/Components/Dashboard/BarChartComponent.razor
View file

This file was deleted.

2 changes: 1 addition & 1 deletion src/Blogifier.Admin/Pages/Dashboard/Admin.razor
View file
Expand Up @@ -7,6 +7,6 @@
</div>
<div class="dashboard-widgets col-lg-5">
<TotalsComponent />
<BarChartComponent />
<AnalyticsComponent />
</div>
</div>
5 changes: 4 additions & 1 deletion src/Blogifier.Admin/wwwroot/css/app.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/Blogifier.Admin/wwwroot/css/app.css.map
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions src/Blogifier.Admin/wwwroot/css/app.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/Blogifier.Admin/wwwroot/package.json
View file
Expand Up @@ -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",
Expand Down
2 changes: 2 additions & 0 deletions src/Blogifier.Admin/wwwroot/scss/include/_buttons.scss
View file
Expand Up @@ -8,6 +8,8 @@
&-link {
font-weight: 500;
box-shadow: none;
&.active,
&:active,
&:focus {
box-shadow: $input-focus-box-shadow;
}
Expand Down
6 changes: 6 additions & 0 deletions src/Blogifier.Admin/wwwroot/scss/include/_list.scss
View file
Expand Up @@ -125,6 +125,12 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

.compact & {
line-height:2rem;
font-size:.75rem;
}

}

&-text {
Expand Down

1 comment on commit 75f5652

@farzindev
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Renamed the "BarChartComponent.razor" to "AnalyticsComponent.razor".
Added some HTML for the list of pages for Analytics Widget on the dashboard.
Also, I've added comments to the AnalyticsComponent.razor file which explains how it should work.

Please sign in to comment.