Optimizely content statistics graph-component

SiteStatistics.razor

@page "/sitestatistics"

@using EPiServer.Web
@using MudBlazor.Charts

@inject IContentLoader _contentLoader
@inject IContentTypeRepository _contentTypeRepository
@inject ISiteDefinitionRepository _siteDefinitionRepository

<h3>Some basic site content metrics</h3>

<MudStack AlignItems="AlignItems.Center" Class="mt-4" Row="true">
    <MudText>Select site:</MudText>
    <MudChipSet @bind-SelectedValue="SelectedSite" T="ContentReference" CheckMark SelectionMode="SelectionMode.SingleSelection">
        @foreach (var site in Sites)
        {
            <MudChip Text="@site.Name" Value="@site.SiteContentReference" Color="@GetRandomColor()" />
        }
    </MudChipSet>
</MudStack>

<MudGrid Class="align-items: flex-start" Justify="Justify.Center" AlignItems="AlignItems.Center">
    <MudItem xs="12" sm="6">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-8">
            <MudText Typo="Typo.caption">Created and updated</MudText>
            <div>
                <MudChart ChartSeries="CreatedAndUpdatedBarSeries" ChartType="ChartType.Bar" XAxisLabels="@AxisXMonths" Width="100%" Height="350px"></MudChart>
            </div>
        </MudPaper>
    </MudItem>

    <MudItem xs="12" sm="6">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-8">
            <MudText Typo="Typo.caption">Content type useage</MudText>
            <div>
                <MudChart ChartType="ChartType.Pie" InputData="@ByContentTypeName().Select(x => x.Count).ToArray()" InputLabels="@ByContentTypeName().Select(x => $"{x.Name} ({x.Percentage.ToString("F1")}%)").ToArray()" Width="100%" Height="350px"></MudChart>
            </div>
        </MudPaper>
    </MudItem>

    <MudItem xs="12" sm="6">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-8">
            <MudText Typo="Typo.caption">Created time of day</MudText>
            <div>
                <MudChart ChartType="ChartType.Pie" InputData="@ByCreatedDateHour().Select(x => x.Count).ToArray()" InputLabels="@ByCreatedDateHour().Select(x => $"{x.Name} ({x.Percentage.ToString("F1")}%)").ToArray()" Width="100%" Height="350px"></MudChart>
            </div>
        </MudPaper>
    </MudItem>

    <MudItem xs="12" sm="6">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-8">
            <MudText Typo="Typo.caption">Updated time of day</MudText>
            <div>
                <MudChart ChartType="ChartType.Pie" InputData="@ByChangedDateHour().Select(x => x.Count).ToArray()" InputLabels="@ByChangedDateHour().Select(x => $"{x.Name} ({x.Percentage.ToString("F1")}%)").ToArray()" Width="100%" Height="350px"></MudChart>
            </div>
        </MudPaper>
    </MudItem>

    <MudItem xs="12" sm="6">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-8">
            <MudText Typo="Typo.caption">Created by</MudText>
            <div>
                <MudChart ChartType="ChartType.Pie" InputData="@ByCreatedBy().Select(x => x.Count).ToArray()" InputLabels="@ByCreatedBy().Select(x => $"{x.Name} ({x.Percentage.ToString("F1")}%)").ToArray()" Width="100%" Height="350px"></MudChart>
            </div>
        </MudPaper>
    </MudItem>
    <MudItem xs="12" sm="6">
        <MudPaper Class="d-flex align-center justify-center mud-width-full py-8">
            <MudText Typo="Typo.caption">Created by avatars</MudText>
            <MudStack Justify="Justify.FlexStart">
                @foreach (var item in createdByItems)
                {
                    if (!string.IsNullOrEmpty(item.Name))
                    {
                        <MudStack AlignItems="AlignItems.Center" Row="true">
                            <MudAvatar Color="Color.Success">@(item.Name.Substring(0, 1).ToUpper())</MudAvatar>
                            <MudText>@item.Percentage.ToString("F1")%</MudText>
                        </MudStack>
                    }
                    else
                    {
                        <MudAvatar Color="Color.Error">?</MudAvatar>
                    }
                }
            </MudStack>
        </MudPaper>
    </MudItem>
</MudGrid>

@code {
    private string[] AxisXMonths = new[]
    {
        "January", "February", "March", "April", "May", "June",
        "July", "August", "September", "October", "November", "December"
    };

    private List<PageData> SitesPageData => _contentLoader.GetDescendents(SelectedSite).Select(_contentLoader.Get<PageData>).ToList();
    private List<SiteInfo> Sites => _siteDefinitionRepository.List().Select(site => new SiteInfo { Name = site.Name, SiteContentReference = site.StartPage }).ToList();
    private List<ChartSeries> CreatedAndUpdatedBarSeries;
    private List<ChartStatisticsItem> createdByItems;

    private ContentReference SelectedSite;

    protected override void OnInitialized()
    {
        SelectedSite = Sites.First().SiteContentReference;

        CreatedAndUpdatedBarSeries = new List<ChartSeries>()
        {
            new ChartSeries() { Name = "Created", Data = ByPublishedDateMonth().Select(x => x.Count).ToArray() },
            new ChartSeries() { Name = "Updated", Data = ByChangedDateMonth().Select(y => y.Count).ToArray() }
        };

        createdByItems = ByCreatedBy();
    }

    private List<ChartStatisticsItem> ByPublishedDateMonth()
    {
        var items = SitesPageData
            .Where(page => page.StartPublish.HasValue)
            .GroupBy(page => page.StartPublish.Value.ToString("yyyy-MM"))
            .Select(group => new ChartStatisticsItem
                {
                    Name = group.Key,
                    Count = group.Count()
                })
            .ToList();

        CalculatePercentages(items);
        return items;
    }

    private List<ChartStatisticsItem> ByChangedDateMonth()
    {
        var items = SitesPageData
            .GroupBy(page => page.Changed.ToString("yyyy-MM"))
            .Select(group => new ChartStatisticsItem
                {
                    Name = group.Key,
                    Count = group.Count()
                })
            .ToList();

        CalculatePercentages(items);
        return items;
    }

    private List<ChartStatisticsItem> ByContentTypeName()
    {
        string ContentTypeName(int contentTypeId)
        {
            return _contentTypeRepository.Load(contentTypeId).Name;
        }

        var items = SitesPageData
            .GroupBy(page => page.ContentTypeID)
            .Select(group => new ChartStatisticsItem
                {
                    Name = ContentTypeName(group.Key),
                    Count = group.Count()
                })
            .ToList();

        CalculatePercentages(items);
        return items;
    }

    private List<ChartStatisticsItem> ByCreatedDateHour()
    {
        var items = SitesPageData
            .Where(page => page.StartPublish.HasValue)
            .GroupBy(page => GetTimeGroup(page.StartPublish.Value))
            .Select(group => new ChartStatisticsItem
                {
                    Name = group.Key,
                    Count = group.Count()
                })
            .ToList();

        CalculatePercentages(items);
        return items;
    }

    private List<ChartStatisticsItem> ByChangedDateHour()
    {
        var items = SitesPageData
            .GroupBy(page => GetTimeGroup(page.Changed))
            .Select(group => new ChartStatisticsItem
                {
                    Name = group.Key,
                    Count = group.Count()
                })
            .ToList();

        CalculatePercentages(items);
        return items;
    }

    private List<ChartStatisticsItem> ByCreatedBy()
    {
        var items = SitesPageData
            .GroupBy(page => page.CreatedBy)
            .Select(group => new ChartStatisticsItem
                {
                    Name = group.Key,
                    Count = group.Count()
                })
            .ToList();

        CalculatePercentages(items);
        return items;
    }

    private void CalculatePercentages(List<ChartStatisticsItem> items)
    {
        double total = items.Sum(x => x.Count);
        foreach (var item in items)
        {
            item.Percentage = (item.Count / total) * 100;
        }
    }

    private string GetTimeGroup(DateTime dateTime)
    {
        int hour = dateTime.Hour;

        if (hour >= 0 && hour < 6)
            return "00:00 - 06:00";
        else if (hour >= 6 && hour < 12)
            return "06:00 - 12:00";
        else if (hour >= 12 && hour < 18)
            return "12:00 - 18:00";
        else
            return "18:00 - 00:00";
    }

    private MudBlazor.Color GetRandomColor()
    {
        var colors = Enum.GetValues(typeof(MudBlazor.Color));
        return (MudBlazor.Color)colors.GetValue(new Random().Next(colors.Length));
    }

    private class ChartStatisticsItem
    {
        public string Name { get; set; }
        public double Count { get; set; }
        public double Percentage { get; set; }
    }

    private class SiteInfo
    {
        public string Name { get; set; }
        public ContentReference SiteContentReference { get; set; }
    }
}

Optimizely Blazor component that displays some charts based on metrics based on a sites content.

• Pages published / updated per month
• When pages are published during the day
• When pages are updated during the day
• Who has created the most pages

How to use

Two good resources to get you started with optimizely and Blazor

• https://www.epinova.se/en/blog/2024/use-blazor-components-in-optimizely-cms-adminedit-interface/

• https://optimizely.blog/2022/04/blazor-server-mvc-with-optimizely/

MudBlazor

https://mudblazor.com/