ASP.NET Core 5.0 - Analytic Dashboard

This article will demonstrate the implementation of analytic data listing pages and a summary dashboard. I will assume you have downloaded the ASP.NET Core 5.0 - Homegrown Analytics Project or created a new ASP.NET Core 5.0 Razor Pages project. See Tutorial: Get started with Razor Pages in ASP.NET Core.

Bootstrap implements a css container class with a max-width of 1140px.

bootstrap.css:

@media (min-width: 1200px) {
  .container, .container-sm, .container-md, .container-lg, .container-xl {
    max-width: 1140px;
  }
}

The main layout wraps the container class around the RenderBody function which renders content pages.

Shared/ _Layout.cshtml:

<div class="container">
    <main role="main" class="pb-3">
        @RenderBody()
    </main>
    <partial name="_CookieConsentPartial" />
</div>

All content pages which reference the main layout have a 1140px max width. When displaying analytic data full screen on a 1920 X 1040 monitor, I would rather see data than white space.

The project implements an optional analytics layout and a container-max class to display more data on the listing pages.

The project implements ajax-modal.js on the listing pages to display all properties.

The project implements a summary Dashboard to display PageHit and Session properties with frequency counts and links to the PageHits and Sessions pages with the filter applied. The Dashboard includes links to the default PageHits, Sessions, NotFoundErrors, UserAgents, and CaptchaChallenges pages. All listing pages are filtered by 1, 3, 7, or 30 previous days.