/
HomeView.razor
283 lines (251 loc) · 10.4 KB
/
HomeView.razor
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
@*@using ChartJs.Blazor
@using ChartJs.Blazor.Common
@using ChartJs.Blazor.Common.Enums
@using ChartJs.Blazor.Util
@using ChartJs.Blazor.BarChart
@using System.Drawing
*@
@page "/admin"
@inject HttpClient _http
@inject IStringLocalizer<Resource> _localizer
@inject IToaster _toaster
@code {
//protected BarConfig _config = default!;
protected List<OptionItem> _dateOptions = default!;
protected List<PostVisit> _visits = default!;
protected bool _hideGraph = false;
protected bool _hideList = true;
protected AnalyticsDto? _analytics;
protected override async Task OnInitializedAsync()
{
//_config = new BarConfig
//{
// Options = new BarOptions
// {
// Responsive = true,
// Legend = new Legend
// {
// Position = Position.Top
// }
// }
//};
_dateOptions = new List<OptionItem>
{
new OptionItem { Id = 1, Title = _localizer["today"] },
new OptionItem { Id = 2, Title = _localizer["yesterday"] },
new OptionItem { Id = 3, Title = _localizer["7-days"] },
new OptionItem { Id = 4, Title = _localizer["30-days"] },
new OptionItem { Id = 5, Title = _localizer["90-days"] },
};
//Load();
_analytics = await _http.GetFromJsonAsync<AnalyticsDto>("api/analytics");
}
//protected void Load()
//{
// var dataset = new BarDataset<int>()
// {
// Label = "Latest Post Views",
// BackgroundColor = ColorUtil.FromDrawingColor(Color.FromArgb(98, 42, 255)),
// BorderWidth = 0
// };
// if (_analytics == null || _analytics.LatestPostViews == null)
// {
// LoadData(dataset, TestData());
// }
// else
// {
// _hideList = _analytics.DisplayType == AnalyticsListType.Graph;
// _hideGraph = _analytics.DisplayType == AnalyticsListType.List;
// LoadData(dataset, _analytics.LatestPostViews);
// }
// if (_config.Data.Datasets.Count > 0)
// {
// _config.Data.Datasets.Clear();
// }
// _config.Data.Datasets.Add(dataset);
//}
//protected void LoadData(IDataset<int> dataset, BarChartModel model)
//{
// _visits = new List<PostVisit>();
// var labels = model.Labels.ToList();
// var values = model.Data.ToList();
// //_config.Data.Labels.Clear();
// for (int i = 0; i < labels.Count; i++)
// {
// _config.Data.Labels.Add(labels[i]);
// dataset.Add(values[i]);
// _visits.Add(new PostVisit { Name = labels[i], Value = values[i] });
// }
// _visits = _visits.OrderByDescending(v => v.Value).ToList();
//}
protected async Task ToggleAnalyticsView(bool isGraph)
{
_hideGraph = await Task.FromResult(!isGraph);
_hideList = isGraph;
int typeId = isGraph ? 2 : 1;
Toast(await _http.PutAsJsonAsync<int>($"api/analytics/displayType/{typeId}", typeId));
}
protected void DateOptionSelect(int id)
{
//var blog = await _http.GetFromJsonAsync<BlogEitorDto>("api/blog");
//blog.AnalyticsPeriod = id;
//_analytics.DisplayPeriod = (AnalyticsPeriod)id;
//Toast(await _http.PutAsJsonAsync<Blog>("api/blog", blog));
//Load();
}
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 }
};
}
protected string PeriodLabel()
{
if (_analytics == null)
return "";
return _analytics.DisplayPeriod.ToString();
}
protected void Toast(HttpResponseMessage msg)
{
if (msg.IsSuccessStatusCode)
_toaster.Success(_localizer["completed"]);
else
_toaster.Error(_localizer["generic-error"]);
}
}
<PageTitleComponent Title="@_localizer["dashboard"]" />
<div class="container">
<div class="dashboard row no-gutters">
<div class="col-md-6">
<div class="row">
<div class="col-6">
<a class="dash-widget dash-link dash-btn d-flex justify-content-center align-items-center" href="/admin/blogs/editor/">
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="24" fill="currentColor" class="me-3 bi bi-pencil-fill" viewBox="0 0 16 16">
<path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z" />
</svg>
<span class="dash-btn-name">@_localizer["new-post"]</span>
</a>
</div>
<div class="col-6">
<a class="dash-widget dash-link dash-btn d-flex justify-content-center align-items-center" href="/admin/pages/editor/">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="me-3 bi" viewBox="0 0 24 24">
<path d="M3 12C3 10.8954 3.89543 10 5 10H19C20.1046 10 21 10.8954 21 12C21 13.1046 20.1046 14 19 14H5C3.89543 14 3 13.1046 3 12Z" />
<path d="M12 3C13.1046 3 14 3.89543 14 5L14 19C14 20.1046 13.1046 21 12 21C10.8954 21 10 20.1046 10 19L10 5C10 3.89543 10.8954 3 12 3Z" />
</svg>
<span class="dash-btn-name">@_localizer["new-page"]</span>
</a>
</div>
</div>
@if (_analytics != null)
{
<div class="row">
<div class="col-4">
<a class="dash-widget dash-link dash-stats" href="/admin/blogs/">
<span class="dash-stats-value">@_analytics.TotalPosts</span>
<span class="dash-stats-name">@_localizer["posts"]</span>
</a>
</div>
<div class="col-4">
<a class="dash-widget dash-link dash-stats" href="/admin/pages/">
<span class="dash-stats-value">@_analytics.TotalPages</span>
<span class="dash-stats-name">@_localizer["pages"]</span>
</a>
</div>
<div class="col-4">
<a class="dash-widget dash-link dash-stats" href="/admin/newsletter/subscribers/">
<span class="dash-stats-value">@_analytics.TotalSubscribers</span>
<span class="dash-stats-name">@_localizer["subscribers"]</span>
</a>
</div>
</div>
}
</div>
<div class="col-md-6">
<div class="dash-widget dash-pan">
<div class="dash-pan-header">
<div class="dash-pan-title me-auto">@_localizer["analytics"]</div>
<div class="dropdown dropdown-flush">
<a class="text-muted" type="button" id="dropdownAnalytics" data-bs-toggle="dropdown" aria-expanded="false"
href="#">
<span>@(_hideList ? _localizer["chart"] : _localizer["list"])</span> - <span>@PeriodLabel()</span>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z" />
</svg>
</a>
<div class="dropdown-menu dropdown-menu-end p-3" aria-labelledby="dropdownAnalytics">
<div class="mb-1 text-muted">@_localizer["date"]:</div>
<ul class="mb-3 list-unstyled">
@if (_dateOptions != null && _analytics != null)
{
foreach (var option in _dateOptions)
{
var cls = _analytics.DisplayPeriod == (AnalyticsPeriod)option.Id ? "py-1 px-2 rounded dropdown-item active" :
"py-1 px-2 rounded dropdown-item";
<li>
<button type="button" class="@cls" @onclick="() => DateOptionSelect(option.Id)">@option.Title</button>
</li>
}
}
</ul>
<div class="mb-1 text-muted">@_localizer["view"]:</div>
<div class="btn-group w-100" role="group" aria-label="Basic radio toggle button group">
@if (_hideList)
{
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked
@onchange="() => ToggleAnalyticsView(true)">
}
else
{
<input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off"
@onchange="() => ToggleAnalyticsView(true)">
}
<label class="btn btn-sm btn-outline-blogifier w-50" for="btnradio1">@_localizer["chart"]</label>
@if (_hideGraph)
{
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off" checked
@onchange="() => ToggleAnalyticsView(false)">
}
else
{
<input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off"
@onchange="() => ToggleAnalyticsView(false)">
}
<label class="btn btn-sm btn-outline-blogifier w-50" for="btnradio2">@_localizer["list"]</label>
</div>
</div>
</div>
</div>
<!--
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 hidden="@_hideList" class="dash-list">
<li class="dash-list-item">
<strong class="dash-list-title">@_localizer["title"]</strong>
<strong class="dash-list-text">@_localizer["visits"]</strong>
</li>
@if (_visits != null && _visits.Count > 0)
{
foreach (var visit in _visits)
{
<li class="dash-list-item">
<span class="dash-list-title">@visit.Name</span>
<span class="dash-list-text pe-2">@visit.Value</span>
</li>
}
}
</ul>
<!-- Chart must show visits per day not by the title of the post. -->
<div class="dash-pan-body" hidden="@_hideGraph">
@*<Chart Config="_config"></Chart>*@
</div>
</div>
</div>
</div>
</div>