More Heatmap samples

Author: joadan

docs/BlazorApexCharts.Docs.Server/Properties/launchSettings.json

@@ -3,7 +3,7 @@
     "IIS Express": {
       "commandName": "IISExpress",
       "launchBrowser": true,
-      "launchUrl": "rangebar-charts",
+      "launchUrl": "heatmap-charts",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }

docs/BlazorApexCharts.Docs/BlazorApexCharts.Docs.csproj

@@ -21,4 +21,8 @@
     <ProjectReference Include="..\..\src\Blazor-ApexCharts\Blazor-ApexCharts.csproj" />
   </ItemGroup>
 
+  <ItemGroup>
+    <Folder Include="Components\Issues\" />
+  </ItemGroup>
+
 </Project>

docs/BlazorApexCharts.Docs/Components/ChartTypes/HeatmapCharts/Basic.razor

@@ -1,7 +1,7 @@
 <DemoContainer>
     <ApexChart TItem="SupportIncident"
                Title="Incident Severity"
-               Options="options">
+               >
 
         @foreach (var source in incidents.GroupBy(e => e.Source))
         {
@@ -18,13 +18,5 @@
 
 @code {
     private List<SupportIncident> incidents { get; set; } = SampleData.GetSupportIncidents();
-    private ApexChartOptions<SupportIncident> options;
-
-    protected override void OnInitialized()
-    {
-        options = new ApexChartOptions<SupportIncident>
-            {
-                Colors = new List<string> { "#008FFB" }
-            };
-    }
+   
     }

docs/BlazorApexCharts.Docs/Components/ChartTypes/HeatmapCharts/Colors.razor

@@ -0,0 +1,38 @@
+<DemoContainer>
+    <ApexChart TItem="SupportIncident"
+               Title="Incident Severity"
+               Options="options">
+
+        @foreach (var source in incidents.GroupBy(e => e.Source).OrderBy(e => e.Key))
+        {
+            <ApexPointSeries TItem="SupportIncident"
+                         Items="source.OrderBy(e=>e.WeekNumber)"
+                         Name="@source.Key.ToString()"
+                         SeriesType="SeriesType.Heatmap"
+                         Color="@GetColor(source.Key)"
+                         XValue="@(e => e.WeekName)"
+                         YAggregate="@(e => (int)e.Average(a=>a.Severity))" />
+        }
+
+    </ApexChart>
+</DemoContainer>
+
+@code {
+    private List<SupportIncident> incidents { get; set; } = SampleData.GetSupportIncidents();
+    private ApexChartOptions<SupportIncident> options = new();
+
+    private string GetColor(IncidentSource source)
+    {
+        switch (source)
+        {
+            case IncidentSource.Internal:
+                return "#FF0000";
+            case IncidentSource.ThirdParty:
+                return "#0000FF";
+            case IncidentSource.Integration:
+                return "#FF00FF";
+            default:
+                return "#008FFB";
+        }
+    }
+}

docs/BlazorApexCharts.Docs/Components/ChartTypes/HeatmapCharts/HeatmapCharts.razor

@@ -8,7 +8,22 @@
         </Snippet>
     </CodeSnippet>
 
+    <CodeSnippet Title="One color" ClassName=@typeof(OneColor).ToString()>
+        <Snippet>
+            <OneColor />
+        </Snippet>
+    </CodeSnippet>
 
+    <CodeSnippet Title="Series Color" ClassName=@typeof(Colors).ToString()>
+        <Snippet>
+            <Colors />
+        </Snippet>
+    </CodeSnippet>
 
+    <CodeSnippet Title=NoShade ClassName=@typeof(NoShade).ToString()>
+        <Snippet>
+            <NoShade />
+        </Snippet>
+    </CodeSnippet>
 
 </DocExamples>

docs/BlazorApexCharts.Docs/Components/ChartTypes/HeatmapCharts/NoShade.razor

@@ -0,0 +1,62 @@
+<DemoContainer>
+    <ApexChart TItem="SupportIncident"
+               Title="Incident Severity"
+               Options="options"
+                Debug>
+
+        @foreach (var source in incidents.GroupBy(e => e.Source))
+        {
+            <ApexPointSeries TItem="SupportIncident"
+                         Items="source.OrderBy(e=>e.WeekNumber)"
+                         Name="@source.Key.ToString()"
+                         SeriesType="SeriesType.Heatmap"
+                         XValue="@(e => e.WeekName)"
+                         YAggregate="@(e => (int)e.Average(a=>a.Severity))" 
+                         ShowDataLabels=true
+                         />
+        }
+
+    </ApexChart>
+</DemoContainer>
+
+@code {
+    private List<SupportIncident> incidents { get; set; } = SampleData.GetSupportIncidents();
+    private ApexChartOptions<SupportIncident> options;
+
+    protected override void OnInitialized()
+    {
+        options = new ApexChartOptions<SupportIncident>
+            {
+                Stroke = new Stroke
+                {
+                    Width = 0
+                },
+                PlotOptions = new PlotOptions
+                {
+                    Heatmap = new PlotOptionsHeatmap
+                    {
+                        EnableShades = false,
+                        Radius = 300,
+                        ColorScale = new PlotOptionsHeatmapColorScale
+                        {
+                            Ranges = new List<PlotOptionsHeatmapColorScaleRange> {
+                            new PlotOptionsHeatmapColorScaleRange {
+                                Color = "#0000FF",
+                                From = 0,
+                                To=50
+                            },
+                            {
+                            new PlotOptionsHeatmapColorScaleRange
+                            {
+                                Color = "#FF0000",
+                                From = 50,
+                                To = 100
+                            }
+                        }
+                    }
+                        }
+                    }
+                }
+            };
+    }
+}

docs/BlazorApexCharts.Docs/Components/ChartTypes/HeatmapCharts/OneColor.razor

@@ -0,0 +1,30 @@
+<DemoContainer>
+    <ApexChart TItem="SupportIncident"
+               Title="Incident Severity"
+               Options="options">
+
+        @foreach (var source in incidents.GroupBy(e => e.Source))
+        {
+            <ApexPointSeries TItem="SupportIncident"
+                         Items="source.OrderBy(e=>e.WeekNumber)"
+                         Name="@source.Key.ToString()"
+                         SeriesType="SeriesType.Heatmap"
+                         XValue="@(e => e.WeekName)"
+                         YAggregate="@(e => (int)e.Average(a=>a.Severity))" />
+        }
+
+    </ApexChart>
+</DemoContainer>
+
+@code {
+    private List<SupportIncident> incidents { get; set; } = SampleData.GetSupportIncidents();
+    private ApexChartOptions<SupportIncident> options;
+
+    protected override void OnInitialized()
+    {
+        options = new ApexChartOptions<SupportIncident>
+            {
+                Colors = new List<string> { "#008FFB" }
+            };
+    }
+    }