feat(sales-dashboard-sample): WC-accurate pivot dashboard

BlazorGridExamples/Program.cs

@@ -26,13 +26,16 @@
     typeof(IgbCarouselModule),
     typeof(IgbCategoryChartModule),
     typeof(IgbPieChartModule),
-    typeof(IgbSelectModule));
+    typeof(IgbSelectModule),
+    typeof(IgbDropdownModule),
+    typeof(IgbPivotGridModule),
+    typeof(IgbPivotDataSelectorModule));
 
 // Register Data Services for samples
 builder.Services.AddScoped<HRService>();
 builder.Services.AddScoped<InventoryService>();
 builder.Services.AddScoped<FinancialService>();
 builder.Services.AddScoped<FleetService>();
-builder.Services.AddScoped<SalesService>();
+builder.Services.AddScoped<SalesDataService>();
 
 await builder.Build().RunAsync();

BlazorGridExamples/wwwroot/scripts/shell-interop.js

@@ -24,6 +24,29 @@ window.shellInterop = {
     openTab: function (url) {
         window.open(url, '_blank', 'noopener');
     },
+    shrinkSelectorSearch: function () {
+        const apply = () => {
+            const sel = document.querySelector('#sales-section igc-pivot-data-selector');
+            if (!sel) return;
+            const deep = (root, fn) => {
+                for (const el of root.querySelectorAll('*')) {
+                    fn(el);
+                    if (el.shadowRoot) deep(el.shadowRoot, fn);
+                }
+            };
+            deep(sel, (el) => {
+                if (el.tagName === 'INPUT' && el.placeholder === 'Search') {
+                    el.style.setProperty('font-size', '13px', 'important');
+                } else if (el.className && ('' + el.className).includes('header-title')) {
+                    el.style.setProperty('font-size', '14px', 'important');
+                    el.style.setProperty('font-weight', '700', 'important');
+                }
+            });
+        };
+        apply();
+        let n = 0;
+        const iv = setInterval(() => { apply(); if (++n > 15) clearInterval(iv); }, 300);
+    },
     registerFullscreenListener: function (dotnetRef) {
         const handler = () => {
             const isFs = !!(document.fullscreenElement || document.webkitFullscreenElement);

samples/SalesGrid/Models/PivotSalesData.cs

@@ -0,0 +1,27 @@
+using System.Text.Json.Serialization;
+
+namespace SalesGrid.Models;
+
+public class PivotSalesDataItem
+{
+    [JsonPropertyName("Country")]
+    public string Country { get; set; } = "";
+
+    [JsonPropertyName("Store")]
+    public string Store { get; set; } = "";
+
+    [JsonPropertyName("Brand")]
+    public string Brand { get; set; } = "";
+
+    [JsonPropertyName("Sale")]
+    public double Sale { get; set; }
+
+    [JsonPropertyName("Cost")]
+    public double Cost { get; set; }
+
+    [JsonPropertyName("Date")]
+    public string Date { get; set; } = "";
+
+    [JsonIgnore]
+    public double Profit => Sale - Cost;
+}

samples/SalesGrid/SalesGrid.csproj

@@ -4,6 +4,11 @@
     <TargetFramework>net10.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
+    <!-- The IgbPivot* configuration objects (dimensions, values, aggregators) are built in
+         C# via property setters - the documented pivot configuration pattern - which trips
+         BL0005 ("component parameter set outside of its component"). There is no warning-clean
+         alternative for the pivot config, so suppress it for this project. -->
+    <NoWarn>$(NoWarn);BL0005</NoWarn>
   </PropertyGroup>