analytics/lib/plausible_web/templates/stats/stats.html.eex

<div class="pt-12"></div>
<div class="container pb-32" data-site-domain="<%= @site.domain %>">
  <div class="w-full sm:flex justify-between items-center">
    <h2 class="text-center sm:text-left sm:mr-8">Analytics for <%= link(@site.domain, to: "//" <> @site.domain, target: "_blank") %></h2>
    <div class="mt-4 sm:mt-0">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
      <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>

      <div class="flex">
        <%= if @query.period == "month" do %>
          <div class="flex rounded shadow bg-white mr-4 cursor-pointer">
            <%= link(to: "/#{@site.domain}?period=month&date=#{@query.date_range.first |> Timex.shift(months: -1) |> Timex.format!("{ISOdate}")}", class: "flex items-center px-2 border-r border-grey-light") do %>
              <svg class="fill-current h-4 w-4" style="transform: translateY(-2px);">
                <use xlink:href="#feather-chevron-left" />
              </svg>
            <% end %>
            <%= link(to: "/#{@site.domain}?period=month&date=#{@query.date_range.first |> Timex.shift(months: 1) |> Timex.format!("{ISOdate}")}", class: "flex items-center px-2") do %>
              <svg class="fill-current h-4 w-4" style="transform: translateY(-2px);">
                <use xlink:href="#feather-chevron-right" />
              </svg>
            <% end %>
          </div>
        <% end %>

        <%= if @query.period == "day" do %>
          <div class="flex rounded shadow bg-white mr-4 cursor-pointer">
            <%= link(to: "/#{@site.domain}?period=day&date=#{@query.date_range.first |> Timex.shift(days: -1) |> Timex.format!("{ISOdate}")}", class: "flex items-center px-2 border-r border-grey-light") do %>
              <svg class="fill-current h-4 w-4" style="transform: translateY(-2px);">
                <use xlink:href="#feather-chevron-left" />
              </svg>
            <% end %>
            <%= link(to: "/#{@site.domain}?period=day&date=#{@query.date_range.first |> Timex.shift(days: 1) |> Timex.format!("{ISOdate}")}", class: "flex items-center px-2") do %>
              <svg class="fill-current h-4 w-4" style="transform: translateY(-2px);">
                <use xlink:href="#feather-chevron-right" />
              </svg>
            <% end %>
          </div>
        <% end %>

        <div class="relative" style="height: 35.5px; width: 180px;">
          <div data-dropdown-trigger class="flex items-center justify-between hover:bg-grey-lighter rounded bg-white shadow px-4 pr-3 py-2 leading-tight cursor-pointer text-sm font-bold text-grey-darker h-full">
            <span class="mr-2"><%= timeframe_text(@site, @query) %></span>
            <svg class="text-pink fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
              <use xlink:href="#feather-chevron-down" />
            </svg>
          </div>

          <div data-dropdown style="top: 42px; right: 0px; width: 225px;" class="dropdown-content hidden absolute pin-r bg-white border border-grey-light rounded shadow z-10 font-bold text-sm text-grey-darker">
            <%= link("Today", to: "/#{@site.domain}?period=day", class: "block p-2 hover:bg-grey-lighter") %>
            <%= link("Last 7 days", to: "/#{@site.domain}?period=7d", class: "block px-2 py-3 hover:bg-grey-lighter") %>
            <%= link("This month", to: "/#{@site.domain}?period=month", class: "block p-2 hover:bg-grey-lighter") %>
            <%= link("Last month", to: "/#{@site.domain}?period=month&date=#{last_month(@site) |> Timex.format!("{ISOdate}")}", class: "block p-2 hover:bg-grey-lighter") %>
            <%= link("Last 3 months", to: "/#{@site.domain}?period=3mo", class: "block p-2 hover:bg-grey-lighter") %>
            <%= link("Last 6 months", to: "/#{@site.domain}?period=6mo", class: "block p-2 hover:bg-grey-lighter") %>
          </div>
        </div>
      </div>
      <div class="hidden block relative w-full sm:w-48" style="padding: 1px 0;">
        <input type="text" id="custom-daterange-trigger" class="bg-white cursor-default w-full appearance-none border border-grey-light rounded shadow py-2 px-4 text-grey-darker text-sm font-bold leading-tight appearance-none focus:outline-none focus:border-grey hover:border-grey" placeholder="Select date range" />
        <div class="pointer-events-none absolute pin-y pin-r flex items-center px-2 text-pink">
          <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"/></svg>
        </div>
      </div>
    </div>
  </div>

  <div class="w-full bg-white shadow-md rounded mt-6" id="main-graph" style="height: 460px;">
    <div class="loading pt-48 mx-auto"><div></div></div>
  </div>

  <div class="w-full block md:flex items-start justify-between mt-6">
    <div class="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4" id="referrer-stats">
      <div class="loading my-32 mx-auto"><div></div></div>
    </div>
    <div class="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4" id="pages-stats">
      <div class="loading my-32 mx-auto"><div></div></div>
    </div>
    <div class="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4" id="countries-stats">
      <div class="loading my-32 mx-auto"><div></div></div>
    </div>
  </div>

  <div class="w-full block md:flex items-start justify-between mt-6">
    <div class="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4" id="screen-sizes-stats">
      <div class="loading my-32 mx-auto"><div></div></div>
    </div>
    <div class="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4" id="operating-systems-stats">
      <div class="loading my-32 mx-auto"><div></div></div>
    </div>
    <div class="w-full md:w-31percent bg-white shadow-md rounded mt-4 p-4" id="browsers-stats">
      <div class="loading my-32 mx-auto"><div></div></div>
    </div>
  </div>
</div>