kb-tilelayout-add-remove-tiles

tilelayout/add-remove-tiles/AddRemoveTiles.sln

@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 16
+VisualStudioVersion = 16.0.30907.101
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "AddRemoveTiles", "AddRemoveTiles\AddRemoveTiles.csproj", "{8C7C76F1-E9B7-423D-8C67-E20C8A32B42C}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{8C7C76F1-E9B7-423D-8C67-E20C8A32B42C}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{8C7C76F1-E9B7-423D-8C67-E20C8A32B42C}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{8C7C76F1-E9B7-423D-8C67-E20C8A32B42C}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{8C7C76F1-E9B7-423D-8C67-E20C8A32B42C}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {DB4DA000-662F-4EF7-A507-DCAA9C6D5ABF}
+	EndGlobalSection
+EndGlobal

tilelayout/add-remove-tiles/AddRemoveTiles/AddRemoveTiles.csproj

@@ -0,0 +1,19 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+
+  <PropertyGroup>
+    <TargetFramework>net5.0</TargetFramework>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Telerik.UI.for.Blazor" Version="2.24.0" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Content Update="wwwroot\css\site.css">
+      <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+      <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+    </Content>
+  </ItemGroup>
+
+</Project>

tilelayout/add-remove-tiles/AddRemoveTiles/App.razor

@@ -0,0 +1,9 @@
+<Router AppAssembly="typeof(Program).Assembly">
+  <Found Context="routeData">
+    <RouteView RouteData="routeData" DefaultLayout="typeof(MainLayout)" />
+  </Found>
+  <NotFound>
+    <h1>Page not found</h1>
+    <p>Sorry, but there's nothing here!</p>
+  </NotFound>
+</Router>

tilelayout/add-remove-tiles/AddRemoveTiles/Components/ResizeContext.cs

@@ -0,0 +1,14 @@
+using System;
+
+namespace AddRemoveTiles.Components.Tiles
+{
+    public class ResizeContext
+    {
+        public event EventHandler OnResizeInvoked;
+
+        public void NotifyResizeInvoked()
+        {
+            OnResizeInvoked.Invoke(null, new EventArgs());
+        }
+    }
+}

tilelayout/add-remove-tiles/AddRemoveTiles/Components/TileContentFactory.razor

@@ -0,0 +1,39 @@
+@using AddRemoveTiles.Components.Tiles
+@using AddRemoveTiles.Models
+
+@switch (TileContent)
+{
+    case "TotalStreams":
+        <TotalStreams></TotalStreams>
+        break;
+    case "TotalDownloads":
+        <TotalDownloads></TotalDownloads>
+        break;
+    case "TotalReach":
+        <TotalReach></TotalReach>
+        break;
+    case "TotalRevenue":
+        <TotalRevenue></TotalRevenue>
+        break;
+    case "WeeklyRecap":
+        <WeeklyRecap Podcasts="@Podcasts"></WeeklyRecap>
+        break;
+    case "PerformanceTrend":
+        <PerformanceTrend Podcasts="@Podcasts"></PerformanceTrend>
+        break;
+    case "TopEpisodes":
+        <TopEpisodes Podcasts="@Podcasts"></TopEpisodes>
+        break;
+
+    default:
+        break;
+}
+
+
+@code {
+    [Parameter]
+    public string TileContent { get; set; }
+
+    [Parameter]
+    public IEnumerable<PodcastViewModel> Podcasts { get; set; }
+}

tilelayout/add-remove-tiles/AddRemoveTiles/Components/Tiles/ChartTileContentBase.cs

@@ -0,0 +1,31 @@
+using System;
+using Microsoft.AspNetCore.Components;
+
+namespace AddRemoveTiles.Components.Tiles
+{
+    public abstract class ChartTileContentBase : ComponentBase, IDisposable
+    {
+        [CascadingParameter]
+        public ResizeContext ResizeContext { get; set; }
+
+        protected override void OnInitialized()
+        {
+            if (ResizeContext != null)
+            {
+                ResizeContext.OnResizeInvoked += Resize;
+            }
+
+            base.OnInitialized();
+        }
+
+        public void Dispose()
+        {
+            if (ResizeContext != null)
+            {
+                ResizeContext.OnResizeInvoked -= Resize;
+            }
+        }
+
+        public abstract void Resize(object sender, EventArgs e);
+    }
+}

tilelayout/add-remove-tiles/AddRemoveTiles/Components/Tiles/PerformanceTrend.razor

@@ -0,0 +1,43 @@
+@using AddRemoveTiles.Models
+
+@inherits ChartTileContentBase
+
+<TelerikChart Width="100%" Height="100%" @ref="@ChartRef">
+    <ChartSeriesItems>
+        <ChartSeries Type="@ChartSeriesType.Column"
+                     Data="@Podcasts"
+                     Field="@( nameof(PodcastViewModel.Views) )"
+                     CategoryField="@( nameof(PodcastViewModel.Date) )"
+                     Aggregate="@ChartSeriesAggregate.Sum">
+        </ChartSeries>
+    </ChartSeriesItems>
+    <ChartCategoryAxes>
+        <ChartCategoryAxis Type="@ChartCategoryAxisType.Date" BaseUnit="@ChartCategoryAxisBaseUnit.Fit">
+            <ChartCategoryAxisLabels Format="{0:d MMM}">
+                <ChartCategoryAxisLabelsRotation Angle="@LabelsRotation" />
+            </ChartCategoryAxisLabels>
+            <ChartCategoryAxisMajorGridLines Visible="false" />
+            <ChartCategoryAxisMajorTicks Visible="false" />
+        </ChartCategoryAxis>
+    </ChartCategoryAxes>
+    <ChartValueAxes>
+        <ChartValueAxis>
+            <ChartValueAxisLabels Step="3" />
+        </ChartValueAxis>
+    </ChartValueAxes>
+</TelerikChart>
+
+@code {
+    [Parameter]
+    public IEnumerable<PodcastViewModel> Podcasts { get; set; }
+
+    TelerikChart ChartRef { get; set; }
+
+    string LabelsRotation = "auto";
+
+    public override void Resize(object sender, EventArgs e)
+    {
+        ChartRef.Refresh();
+    }
+}
+

tilelayout/add-remove-tiles/AddRemoveTiles/Components/Tiles/TopEpisodes.razor

@@ -0,0 +1,62 @@
+@using AddRemoveTiles.Models
+@using Telerik.DataSource
+@using Telerik.DataSource.Extensions
+
+<TelerikGrid Data=@TopNPodcasts TotalCount=@Total OnRead=@ReadItems
+             Sortable="true" Height="100%" Pageable="false" ScrollMode="@GridScrollMode.Scrollable"
+             OnStateInit="@((GridStateEventArgs<PodcastViewModel> args) => OnStateInit(args))">
+    <GridColumns>
+        <GridColumn Field="@( nameof(PodcastViewModel.Name) )" Title="Podcast Episode" Width="320px" />
+        <GridColumn Field="@( nameof(PodcastViewModel.Streams) )" Width="150px" />
+        <GridColumn Field="@( nameof(PodcastViewModel.Downloads) )" Width="150px" />
+    </GridColumns>
+</TelerikGrid>
+
+@code {
+    [Parameter]
+    public IEnumerable<PodcastViewModel> Podcasts { get; set; }
+
+    [Parameter]
+    public int TopN { get; set; } = 5;
+
+    IEnumerable<PodcastViewModel> TopNPodcasts { get; set; }
+    int Total { get; set; }
+    DataSourceRequest CurrentRequest { get; set; }
+
+    protected void ReadItems(GridReadEventArgs args)
+    {
+        CurrentRequest = args.Request;
+        UpdateTopEpisodes();
+    }
+
+    void UpdateTopEpisodes()
+    {
+        if (CurrentRequest != null && Podcasts != null)
+        {
+            CurrentRequest.PageSize = 5;
+            var datasourceResult = Podcasts.ToDataSourceResult(CurrentRequest);
+
+            TopNPodcasts = (datasourceResult.Data as IEnumerable<PodcastViewModel>).ToList();
+            Total = datasourceResult.Total;
+
+            StateHasChanged();
+        }
+    }
+
+    protected override void OnParametersSet()
+    {
+        UpdateTopEpisodes();
+        base.OnParametersSet();
+    }
+
+    void OnStateInit(GridStateEventArgs<PodcastViewModel> args)
+    {
+        args.GridState = new GridState<PodcastViewModel>()
+        {
+            SortDescriptors = new List<SortDescriptor>
+            {
+                new SortDescriptor { Member = nameof(PodcastViewModel.Streams), SortDirection = ListSortDirection.Descending }
+            }
+        };
+    }
+}

tilelayout/add-remove-tiles/AddRemoveTiles/Components/Tiles/TotalDownloads.razor

@@ -0,0 +1,13 @@
+@using AddRemoveTiles.Services
+
+@inject DashboardDataService DataService
+
+<h2>@Downloads.ToString("N0")</h2>
+
+@code{
+    int Downloads { get; set; }
+    protected override async Task OnInitializedAsync()
+    {
+        Downloads = await DataService.GetDownloads();
+    }
+}

tilelayout/add-remove-tiles/AddRemoveTiles/Components/Tiles/TotalReach.razor

@@ -0,0 +1,13 @@
+@using AddRemoveTiles.Services
+
+@inject DashboardDataService DataService
+
+<h2>@Reach.ToString("N0")</h2>
+
+@code{
+    int Reach { get; set; }
+    protected override async Task OnInitializedAsync()
+    {
+        Reach = await DataService.GetReach();
+    }
+}

tilelayout/add-remove-tiles/AddRemoveTiles/Components/Tiles/TotalRevenue.razor

@@ -0,0 +1,13 @@
+@using AddRemoveTiles.Services
+
+@inject DashboardDataService DataService
+
+<h2>@Revenue.ToString("C0")</h2>
+
+@code{
+    double Revenue { get; set; }
+    protected override async Task OnInitializedAsync()
+    {
+        Revenue = await DataService.GetRevenue();
+    }
+}

tilelayout/add-remove-tiles/AddRemoveTiles/Components/Tiles/TotalStreams.razor

@@ -0,0 +1,14 @@
+@using AddRemoveTiles.Services
+
+@inject DashboardDataService DataService
+
+<h2>@Streams.ToString("N0")</h2>
+
+@code{
+    int Streams { get; set; }
+    protected override async Task OnInitializedAsync()
+    {
+        Streams = await DataService.GetStreams();
+    }
+}
+

tilelayout/add-remove-tiles/AddRemoveTiles/Components/Tiles/WeeklyRecap.razor

@@ -0,0 +1,43 @@
+@using AddRemoveTiles.Models
+
+@inherits ChartTileContentBase
+
+<TelerikChart Width="100%" Height="100%" @ref="@ChartRef">
+    <ChartSeriesItems>
+        <ChartSeries Type="@ChartSeriesType.Line"
+                     Data="@Podcasts"
+                     Field="@( nameof(PodcastViewModel.Downloads) )"
+                     CategoryField="@( nameof(PodcastViewModel.Date) )"
+                     Aggregate="@ChartSeriesAggregate.Sum">
+        </ChartSeries>
+    </ChartSeriesItems>
+    <ChartCategoryAxes>
+        <ChartCategoryAxis Type="@ChartCategoryAxisType.Date" BaseUnit="@ChartCategoryAxisBaseUnit.Fit">
+            <ChartCategoryAxisLabels Format="{0:d MMM}">
+                <ChartCategoryAxisLabelsRotation Angle="@LabelsRotation" />
+            </ChartCategoryAxisLabels>
+            <ChartCategoryAxisMajorGridLines Visible="false" />
+            <ChartCategoryAxisMajorTicks Visible="false" />
+        </ChartCategoryAxis>
+    </ChartCategoryAxes>
+    <ChartValueAxes>
+        <ChartValueAxis>
+            <ChartValueAxisLabels Step="4" />
+        </ChartValueAxis>
+    </ChartValueAxes>
+</TelerikChart>
+
+@code {
+    [Parameter]
+    public IEnumerable<PodcastViewModel> Podcasts { get; set; }
+
+    TelerikChart ChartRef { get; set; }
+
+    string LabelsRotation = "auto";
+
+    public override void Resize(object sender, EventArgs e)
+    {
+        ChartRef.Refresh();
+    }
+}
+

tilelayout/add-remove-tiles/AddRemoveTiles/Models/PlatformViewModel.cs

@@ -0,0 +1,13 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace AddRemoveTiles.Models
+{
+    public class PlatformViewModel
+    {
+        public string Category { get; set; }
+        public int Views { get; set; }
+    }
+}