Skip to content

Commit 15a3c3b

Browse files
rxturrxtur
committed
Blogifier Analytics #245 part 1
1 parent 7103fb0 commit 15a3c3b

File tree

2 files changed

+97
-89
lines changed

2 files changed

+97
-89
lines changed

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

+89-89
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@using ChartJs.Blazor
1+
@using ChartJs.Blazor
22
@using ChartJs.Blazor.Common
33
@using ChartJs.Blazor.Common.Enums
44
@using ChartJs.Blazor.Util
@@ -25,17 +25,16 @@
2525
</div>
2626
</div>
2727
<!--/Time -->
28-
2928
<!-- Toggle between list or chart -->
3029
<div class="btn-group ms-auto" role="group" aria-label="Chart or List">
31-
<button type="button" class="btn btn-link rounded-3">
30+
<button type="button" class="btn btn-link rounded-3" @onclick="() => ToggleAnalyticsView(true)">
3231
<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"/>
32+
<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" />
3433
</svg>
3534
</button>
36-
<button type="button" class="btn btn-link rounded-3 active">
35+
<button type="button" class="btn btn-link rounded-3 active" @onclick="() => ToggleAnalyticsView(false)">
3736
<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"/>
37+
<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" />
3938
</svg>
4039
</button>
4140
</div>
@@ -44,110 +43,111 @@
4443
</div>
4544

4645
<!-- List -->
47-
4846
<!--
4947
The list of posts/pages in the selected time,
5048
sorting by the higher visits.
5149
5250
Note:
5351
A single visitor maybe visits 10 pages, so that's why we have Visits and Visitors.
5452
-->
55-
56-
<ul class="list compact">
53+
<ul hidden="@_hideList" class="list compact">
5754
<li class="list-item">
5855
<span class="list-title">Title</span>
5956
<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>
8157
</li>
58+
@if (_visits != null && _visits.Count > 0)
59+
{
60+
foreach (var visit in _visits)
61+
{
62+
<li class="list-item">
63+
<span class="list-title">@visit.Name</span>
64+
<span class="list-text text-end col-2">@visit.Value</span>
65+
</li>
66+
}
67+
}
8268
</ul>
83-
8469
<!--/List -->
8570

8671
<!-- Chart -->
87-
8872
<!--
8973
Chart must show visits per day not by the title of the post.
9074
-->
91-
<Chart Config="_config"></Chart>
75+
<div hidden="@_hideGraph">
76+
<Chart Config="_config"></Chart>
77+
</div>
9278
<!--/Chart -->
9379

9480
</div>
9581

9682
@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-
}
83+
private BarConfig _config;
84+
protected List<PostVisit> _visits;
85+
86+
protected bool _hideGraph = true;
87+
protected bool _hideList = false;
88+
89+
protected override async Task OnInitializedAsync()
90+
{
91+
_config = new BarConfig
92+
{
93+
Options = new BarOptions
94+
{
95+
Responsive = true,
96+
Legend = new Legend
97+
{
98+
Position = Position.Top
99+
}
100+
}
101+
};
102+
103+
IDataset<int> dataset = new BarDataset<int>()
104+
{
105+
Label = "Latest Post Views",
106+
BackgroundColor = ColorUtil.FromDrawingColor(Color.FromArgb(98, 42, 255)),
107+
BorderWidth = 0
108+
};
109+
110+
var model = await _http.GetFromJsonAsync<AnalyticsModel>("api/analytics");
111+
112+
if (model == null || model.LatestPostViews == null)
113+
{
114+
LoadData(dataset, TestData());
115+
}
116+
else
117+
{
118+
LoadData(dataset, model.LatestPostViews);
119+
}
120+
_config.Data.Datasets.Add(dataset);
121+
}
122+
123+
protected void LoadData(IDataset<int> dataset, BarChartModel model)
124+
{
125+
_visits = new List<PostVisit>();
126+
var labels = model.Labels.ToList();
127+
var values = model.Data.ToList();
128+
129+
for (int i = 0; i < labels.Count; i++)
130+
{
131+
_config.Data.Labels.Add(labels[i]);
132+
dataset.Add(values[i]);
133+
134+
_visits.Add(new PostVisit { Name = labels[i], Value = values[i] });
135+
}
136+
_visits = _visits.OrderByDescending(v => v.Value).ToList();
137+
}
138+
139+
protected async Task ToggleAnalyticsView(bool isGraph)
140+
{
141+
_hideGraph = await Task.FromResult(!isGraph);
142+
_hideList = isGraph;
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+
}
153153
}

‎src/Blogifier.Shared/Models/PostVisit.cs

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
namespace Blogifier.Shared
2+
{
3+
public class PostVisit
4+
{
5+
public string Name { get; set; }
6+
public int Value { get; set; }
7+
}
8+
}

0 commit comments

Comments
 (0)