Skip to content

Commit cfb176b

Browse files
farzindevfarzindev
committed
Blogifier Analytics @245 
1 parent 9443da9 commit cfb176b

File tree

9 files changed

+170
-78
lines changed

9 files changed

+170
-78
lines changed

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

Lines changed: 153 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,153 @@
1+
@using ChartJs.Blazor
2+
@using ChartJs.Blazor.Common
3+
@using ChartJs.Blazor.Common.Enums
4+
@using ChartJs.Blazor.Util
5+
@using ChartJs.Blazor.BarChart
6+
@using System.Drawing
7+
8+
@inject HttpClient _http
9+
@inject IStringLocalizer<Resource> _localizer
10+
11+
<div class="dashboard-widget-card p-3">
12+
<div class="list-toolbar">
13+
14+
<!--Time -->
15+
<div class="dropdown dropdown-flush">
16+
<button class="btn btn-link dropdown-toggle" type="button" id="dropdownPostAction" data-bs-toggle="dropdown" aria-expanded="false">
17+
@_localizer["last"] 7 @_localizer["days"]
18+
</button>
19+
<div class="dropdown-menu" aria-labelledby="dropdownPostAction">
20+
<button type="button" class="dropdown-item"><span>@_localizer["today"]</span></button>
21+
<button type="button" class="dropdown-item"><span>@_localizer["yesterday"]</span></button>
22+
<button type="button" class="dropdown-item"><span>@_localizer["last"] 7 @_localizer["days"]</span></button>
23+
<button type="button" class="dropdown-item"><span>@_localizer["last"] 30 @_localizer["days"]</span></button>
24+
<button type="button" class="dropdown-item"><span>@_localizer["last"] 90 @_localizer["days"]</span></button>
25+
</div>
26+
</div>
27+
<!--/Time -->
28+
29+
<!-- Toggle between list or chart -->
30+
<div class="btn-group ms-auto" role="group" aria-label="Chart or List">
31+
<button type="button" class="btn btn-link rounded-3">
32+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-graph-up" viewBox="0 0 16 16">
33+
<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"/>
34+
</svg>
35+
</button>
36+
<button type="button" class="btn btn-link rounded-3 active">
37+
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list-ul" viewBox="0 0 16 16">
38+
<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"/>
39+
</svg>
40+
</button>
41+
</div>
42+
<!--/Toggle -->
43+
44+
</div>
45+
46+
<!-- List -->
47+
48+
<!--
49+
The list of posts/pages in the selected time,
50+
sorting by the higher visits.
51+
52+
Note:
53+
A single visitor maybe visits 10 pages, so that's why we have Visits and Visitors.
54+
-->
55+
56+
<ul class="list compact">
57+
<li class="list-item">
58+
<span class="list-title">Title</span>
59+
<span class="list-text text-end col-2">Visits</span>
60+
<span class="list-text text-end col-2">Visitors</span>
61+
</li>
62+
<li class="list-item">
63+
<span class="list-title">Some post here</span>
64+
<span class="list-text text-end col-2">700</span>
65+
<span class="list-text text-end col-2">455</span>
66+
</li>
67+
<li class="list-item">
68+
<span class="list-title">Some page here</span>
69+
<span class="list-text text-end col-2">532</span>
70+
<span class="list-text text-end col-2">125</span>
71+
</li>
72+
<li class="list-item">
73+
<span class="list-title">Some post here</span>
74+
<span class="list-text text-end col-2">245</span>
75+
<span class="list-text text-end col-2">120</span>
76+
</li>
77+
<li class="list-item">
78+
<span class="list-title">Some page here</span>
79+
<span class="list-text text-end col-2">251</span>
80+
<span class="list-text text-end col-2">100</span>
81+
</li>
82+
</ul>
83+
84+
<!--/List -->
85+
86+
<!-- Chart -->
87+
88+
<!--
89+
Chart must show visits per day not by the title of the post.
90+
-->
91+
<Chart Config="_config"></Chart>
92+
<!--/Chart -->
93+
94+
</div>
95+
96+
@code {
97+
private BarConfig _config;
98+
99+
protected override async Task OnInitializedAsync()
100+
{
101+
_config = new BarConfig
102+
{
103+
Options = new BarOptions
104+
{
105+
Responsive = true,
106+
Legend = new Legend
107+
{
108+
Position = Position.Top
109+
}
110+
}
111+
};
112+
113+
IDataset<int> dataset = new BarDataset<int>()
114+
{
115+
Label = "Latest Post Views",
116+
BackgroundColor = ColorUtil.FromDrawingColor(Color.FromArgb(98, 42, 255)),
117+
BorderWidth = 0
118+
};
119+
120+
var model = await _http.GetFromJsonAsync<AnalyticsModel>("api/analytics");
121+
122+
if(model == null || model.LatestPostViews == null)
123+
{
124+
LoadData(dataset, TestData());
125+
}
126+
else
127+
{
128+
LoadData(dataset, model.LatestPostViews);
129+
}
130+
_config.Data.Datasets.Add(dataset);
131+
}
132+
133+
protected void LoadData(IDataset<int> dataset, BarChartModel model)
134+
{
135+
foreach (var label in model.Labels)
136+
{
137+
_config.Data.Labels.Add(label);
138+
}
139+
foreach (var item in model.Data)
140+
{
141+
dataset.Add(item);
142+
}
143+
}
144+
145+
protected BarChartModel TestData()
146+
{
147+
return new BarChartModel()
148+
{
149+
Labels = new List<string>() { "Post One", "Post Two", "Post Three", "Post Four", "Post Five", "Post Six" },
150+
Data = new List<int>() { 12036, 15350, 9457, 11104, 7938, 8136 }
151+
};
152+
}
153+
}

‎src/Blogifier.Admin/Components/Dashboard/BarChartComponent.razor‎

Lines changed: 0 additions & 72 deletions
This file was deleted.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,6 @@
77
</div>
88
<div class="dashboard-widgets col-lg-5">
99
<TotalsComponent />
10-
<BarChartComponent />
10+
<AnalyticsComponent />
1111
</div>
1212
</div>

‎src/Blogifier.Admin/wwwroot/css/app.css‎

Lines changed: 4 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Blogifier.Admin/wwwroot/css/app.css.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Blogifier.Admin/wwwroot/css/app.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/Blogifier.Admin/wwwroot/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
"author": "https://github.com/farzindev",
66
"private": true,
77
"scripts": {
8-
"sass": "node-sass --watch scss -o css --source-map true"
8+
"start": "node-sass --watch scss -o css --source-map true"
99
},
1010
"devDependencies": {
1111
"bootstrap": "^5.0.0-beta2",

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
&-link {
99
font-weight: 500;
1010
box-shadow: none;
11+
&.active,
12+
&:active,
1113
&:focus {
1214
box-shadow: $input-focus-box-shadow;
1315
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,12 @@
125125
white-space: nowrap;
126126
overflow: hidden;
127127
text-overflow: ellipsis;
128+
129+
.compact & {
130+
line-height:2rem;
131+
font-size:.75rem;
132+
}
133+
128134
}
129135

130136
&-text {

0 commit comments

Comments
 (0)