analytics/lib/plausible_web/templates/stats/countries_preview.html.eex
2019-09-02 12:29:19 +01:00

23 lines
1.1 KiB
Elixir

<div class="text-center">
<h2>Top Countries</h2>
<div class="text-grey-darker mt-1">by visitors</div>
</div>
<div class="mt-8">
<%= for {key, count} <- @top_countries do %>
<div class="flex items-center justify-between my-2">
<span class="truncate" style="max-width: 80%;"><%= key %></span>
<span title="<%= count %>"><%= large_number_format(count) %></span>
</div>
<%= bar(count, @top_countries, :indigo) %>
<% end %>
</div>
<%= if Enum.count(@top_countries) >= 5 do %>
<div class="text-center">
<a href="/<%= @site.domain %>/countries<%= query_params(@query) %>" data-pushstate class="font-bold text-sm text-grey-dark hover:text-red transition tracking-wide">
<svg style="fill: #8795a1;" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-maximize"><path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"/></svg>
MORE
</a>
</div>
<% end %>