9eaff67318
* Update styling and refine features for analytics page * Remove follower reference from js * Update html * Adjust test
91 lines
3.4 KiB
Text
91 lines
3.4 KiB
Text
<nav class="crayons-tabs crayons-tabs--analytics" aria-label="<%= t("views.stats.period.aria_label") %>">
|
|
<ul class="crayons-tabs__list">
|
|
<li>
|
|
<button data-text="<%= t("views.stats.period.week") %>" class="crayons-tabs__item crayons-tabs__item--current" id="week-button" aria-current="page"><%= t("views.stats.period.week") %></button>
|
|
</li>
|
|
<li>
|
|
<button data-text="<%= t("views.stats.period.month") %>" class="crayons-tabs__item" id="month-button"><%= t("views.stats.period.month") %></button>
|
|
</li>
|
|
<li>
|
|
<button data-text="<%= t("views.stats.period.infinity") %>" class="crayons-tabs__item" id="infinity-button"><%= t("views.stats.period.infinity") %></button>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="summary-stats">
|
|
<div class="summary-stats__col crayons-card mx-5">
|
|
<div id="readers-card" class="py-3"></div>
|
|
</div>
|
|
<div class="summary-stats__col crayons-card mx-5">
|
|
<div id="reactions-card" class="py-3"></div>
|
|
</div>
|
|
<div class="summary-stats__col crayons-card mx-5">
|
|
<div id="comments-card" class="py-3"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="graphs my-2">
|
|
<div class="graphs__col crayons-card mx-5">
|
|
<h2 class="mt-5 mx-5"><%= t("views.stats.readers") %></h2>
|
|
<div class="charts-container">
|
|
<canvas id="readers-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid xl:grid-cols-2 gap-4 mx-5 mb-2">
|
|
<div class="graphs__col crayons-card">
|
|
<h2 class="mt-5 mx-5"><%= t("views.stats.reactions") %></h2>
|
|
<div class="charts-container">
|
|
<canvas id="reactions-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="graphs__col crayons-card">
|
|
<h2 class="mt-5 mx-5"><%= t("views.stats.comments") %></h2>
|
|
<div class="charts-container">
|
|
<canvas id="comments-chart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid xl:grid-cols-2 gap-4 mx-5 ">
|
|
<div class="crayons-card p-2">
|
|
<h2 class="mt-5 mx-5"><%= t("views.stats.traffic.text") %></h2>
|
|
<table class="w-100 m-auto crayons-table">
|
|
<thead>
|
|
<tr>
|
|
<th class="align-left"><%= t("views.stats.traffic.source") %></th>
|
|
<th class="align-right"><%= t("views.stats.traffic.views") %></th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody id="referrers-container">
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<% if @reactions && @reactions.any? %>
|
|
<div class="crayons-card p-4 overflow-auto" style="max-height:calc(100vh - 150px)">
|
|
<h2 class="crayons-subtitle mb-2">
|
|
<%= t("views.stats.reactions_history") %>
|
|
</h2>
|
|
<% @reactions.each do |reaction| %>
|
|
<div class="fs-sm py-2 flex items-center">
|
|
<div class="mr-3 relative">
|
|
<img class="crayons-avatar h-8 w-8" style="height: 30px; width: 30px;" src="<%= reaction.user.profile_image_90 %>" width="25" height="25">
|
|
<img class="crayons-avatar absolute -right-1 -bottom-1 border-base-inverted" style="height: 20px; width: 20px;" src="/assets/<%= reaction.reaction_category.icon %>.svg" width="16" height="16">
|
|
</div>
|
|
<div class="flex-1 flex items-center justify-between">
|
|
<div>
|
|
<strong><%= reaction.category %></strong>
|
|
by <a href="<%= URL.user(reaction.user) %>" class="fw-bold"><%= reaction.user.name %></a>
|
|
</div>
|
|
<div class="fs-xs">
|
|
<%= reaction.readable_date %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
<% end %>
|
|
</div>
|