feat: charts by tier are ready

WotBlitzStatisticsPro.Blazor/Model/ChartByTierItem.cs

@@ -0,0 +1,4 @@
+namespace WotBlitzStatisticsPro.Blazor.Model
+{
+    public record ChartByTierItem(string Tier, int Value, string Color);
+}

WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoStatistics.razor

@@ -9,5 +9,10 @@
     <div id="battlesByNation" style="width: 33%; min-width: 300px; height:500px; margin-top: 10px;"></div>
     <div id="winRateByNation" style="width: 33%; min-width: 300px; height: 500px; margin-top: 10px; "></div>
     <div id="avgDmgByNation" style="width: 33%; min-width: 300px; height: 500px; margin-top: 10px; "></div>
+</div>
+<div class="chartsRow">
+    <div id="battlesByTier" style="width: 33%; min-width: 300px; height:600px; margin-top: 10px;"></div>
+    <div id="winRateByTier" style="width: 33%; min-width: 300px; height: 600px; margin-top: 10px; "></div>
+    <div id="avgDmgByTier" style="width: 33%; min-width: 300px; height: 600px; margin-top: 10px; "></div>
 </div>
     @*<div id="stacked" style="width:300px; height:500px; margin-top: 20px"></div>*@

WotBlitzStatisticsPro.Blazor/Pages/PlayerInfoStatisticsBase.cs

@@ -28,6 +28,10 @@ namespace WotBlitzStatisticsPro.Blazor.Pages
                 await ChartsService.BuildBarChartWinRatesByNation("winRateByNation", TanksList);
                 await ChartsService.BuildBarChartAvgDmgByNation("avgDmgByNation", TanksList);
 
+                await ChartsService.BuildBarChartBattlesByTier("battlesByTier", TanksList);
+                await ChartsService.BuildBarChartWinRatesByTier("winRateByTier", TanksList);
+                await ChartsService.BuildBarChartAvgDmgByTier("avgDmgByTier", TanksList);
+
                 //await ChartsService.BuildStackedBarChart("stacked");
             }
         }

WotBlitzStatisticsPro.Blazor/Resources/App.de.resx

@@ -129,6 +129,9 @@
   <data name="Avg damage by tank types" xml:space="preserve">
     <value>Mittlerer Schaden dem Panzertype</value>
   </data>
+  <data name="Avg damage by tier" xml:space="preserve">
+    <value>Mittlerer Schaden dem Rang</value>
+  </data>
   <data name="Battles" xml:space="preserve">
     <value>Gefechte</value>
   </data>
@@ -138,6 +141,9 @@
   <data name="Battles by tank types" xml:space="preserve">
     <value>Gefechte dem Panzertype</value>
   </data>
+  <data name="Battles by tier" xml:space="preserve">
+    <value>Gefechte dem Rang</value>
+  </data>
   <data name="Cancel" xml:space="preserve">
     <value>Abbrechen</value>
   </data>
@@ -234,6 +240,9 @@
   <data name="Win rate by tank types" xml:space="preserve">
     <value>Panzertypensieg</value>
   </data>
+  <data name="Win rate by tier" xml:space="preserve">
+    <value>Sieg dem Rang</value>
+  </data>
   <data name="years ago" xml:space="preserve">
     <value>vor Jahren</value>
   </data>

WotBlitzStatisticsPro.Blazor/Resources/App.ru.resx

@@ -129,6 +129,9 @@
   <data name="Avg damage by tank types" xml:space="preserve">
     <value>Средний урон по типу танка</value>
   </data>
+  <data name="Avg damage by tier" xml:space="preserve">
+    <value>Средний урон по уровню</value>
+  </data>
   <data name="Battles" xml:space="preserve">
     <value>Количество боёв</value>
   </data>
@@ -138,6 +141,9 @@
   <data name="Battles by tank types" xml:space="preserve">
     <value>Количество боёв по типу танка</value>
   </data>
+  <data name="Battles by tier" xml:space="preserve">
+    <value>Количество боёв по уровню</value>
+  </data>
   <data name="Cancel" xml:space="preserve">
     <value>Отмена</value>
   </data>
@@ -234,6 +240,9 @@
   <data name="Win rate by tank types" xml:space="preserve">
     <value>Процент побед по типу танка</value>
   </data>
+  <data name="Win rate by tier" xml:space="preserve">
+    <value>Процент побед по уровню</value>
+  </data>
   <data name="years ago" xml:space="preserve">
     <value>лет назад</value>
   </data>

WotBlitzStatisticsPro.Blazor/Services/ChartService.cs

@@ -5,6 +5,7 @@ using Microsoft.Extensions.Localization;
 using Microsoft.JSInterop;
 using WotBlitzStatisticsPro.Blazor.GraphQl;
 using WotBlitzStatisticsPro.Blazor.Helpers;
+using WotBlitzStatisticsPro.Blazor.Model;
 
 namespace WotBlitzStatisticsPro.Blazor.Services
 {
@@ -483,10 +484,159 @@ namespace WotBlitzStatisticsPro.Blazor.Services
 
             await _jsRuntime.InvokeVoidAsync("eChartsInterop.BuildBarChartByNation", elementId, _localize.GetString("Avg damage by nation").Value, chartData);
         }
+        public async Task BuildBarChartBattlesByTier(string elementId, IEnumerable<ITank> tanks)
+        {
+            var battlesCountByTier = new Dictionary<int, long>();
+
+            foreach (var tank in tanks)
+            {
+                if (tank.Tier == 0)
+                {
+                    continue;
+                }
+                if (battlesCountByTier.ContainsKey(tank.Tier))
+                {
+                    battlesCountByTier[tank.Tier] += tank.Battles;
+                }
+                else
+                {
+                    battlesCountByTier.Add(tank.Tier, tank.Battles);
+                }
+            }
+
+            var values = new int[10];
+            for (int i = 0; i < values.Length; i++)
+            {
+                values[i] = 0;
+            }
+
+            for (int i = 1; i < 11; i++)
+            {
+                if(battlesCountByTier.ContainsKey(i))
+                {
+                    values[i - 1] = Convert.ToInt32(battlesCountByTier[i]);
+                }
+            }
+
+            var chartData = new List<ChartByTierItem>();
+            for (int i = 0; i < values.Length; i++)
+            {
+                chartData.Add(new ((i + 1).RomanNumber(), values[i], "#9FE3CE"));
+            }
+
+            await _jsRuntime.InvokeVoidAsync("eChartsInterop.BuildBarChartByTier", elementId, _localize.GetString("Battles by tier").Value, chartData.ToArray());
+        }
+
+        public async Task BuildBarChartWinRatesByTier(string elementId, IEnumerable<ITank> tanks)
+        {
+            var battlesCountByTier = new Dictionary<int, long>();
+            var winsCountByTier = new Dictionary<int, long>();
+
+            foreach (var tank in tanks)
+            {
+                if (tank.Tier == 0)
+                {
+                    continue;
+                }
+                if (battlesCountByTier.ContainsKey(tank.Tier))
+                {
+                    battlesCountByTier[tank.Tier] += tank.Battles;
+                }
+                else
+                {
+                    battlesCountByTier.Add(tank.Tier, tank.Battles);
+                }
+                if (winsCountByTier.ContainsKey(tank.Tier))
+                {
+                    winsCountByTier[tank.Tier] += tank.Wins;
+                }
+                else
+                {
+                    winsCountByTier.Add(tank.Tier, tank.Wins);
+                }
+            }
+
+            var values = new int[10];
+            for (int i = 0; i < values.Length; i++)
+            {
+                values[i] = 0;
+            }
+
+            for (int i = 1; i < 11; i++)
+            {
+                if (battlesCountByTier.ContainsKey(i))
+                {
+                    values[i - 1] = Convert.ToInt32(100 * winsCountByTier[i] /
+                                            battlesCountByTier[i]);
+                }
+            }
+
+            var chartData = new List<ChartByTierItem>();
+            for (int i = 0; i < values.Length; i++)
+            {
+                chartData.Add(new((i + 1).RomanNumber(), values[i], values[i].ScaleColor()));
+            }
+
+            await _jsRuntime.InvokeVoidAsync("eChartsInterop.BuildBarChartByTier", elementId, _localize.GetString("Win rate by tier").Value, chartData.ToArray());
+        }
+
+        public async Task BuildBarChartAvgDmgByTier(string elementId, IEnumerable<ITank> tanks)
+        {
+            var battlesCountByTier = new Dictionary<int, long>();
+            var dmgCountByTier = new Dictionary<int, long>();
+
+            foreach (var tank in tanks)
+            {
+                if (tank.Tier == 0)
+                {
+                    continue;
+                }
+                if (battlesCountByTier.ContainsKey(tank.Tier))
+                {
+                    battlesCountByTier[tank.Tier] += tank.Battles;
+                }
+                else
+                {
+                    battlesCountByTier.Add(tank.Tier, tank.Battles);
+                }
+                if (dmgCountByTier.ContainsKey(tank.Tier))
+                {
+                    dmgCountByTier[tank.Tier] += tank.DamageDealt;
+                }
+                else
+                {
+                    dmgCountByTier.Add(tank.Tier, tank.DamageDealt);
+                }
+            }
+
+            var values = new int[10];
+            for (int i = 0; i < values.Length; i++)
+            {
+                values[i] = 0;
+            }
+
+            for (int i = 1; i < 11; i++)
+            {
+                if (battlesCountByTier.ContainsKey(i))
+                {
+                    values[i - 1] = Convert.ToInt32(dmgCountByTier[i] /
+                                            battlesCountByTier[i]);
+                }
+            }
+
+            var chartData = new List<ChartByTierItem>();
+            for (int i = 0; i < values.Length; i++)
+            {
+                chartData.Add(new((i + 1).RomanNumber(), values[i], "#D98D8B"));
+            }
+
+            await _jsRuntime.InvokeVoidAsync("eChartsInterop.BuildBarChartByTier", elementId, _localize.GetString("Avg damage by tier").Value, chartData.ToArray());
+        }
 
         public async Task BuildStackedBarChart(string elementId)
         {
             await _jsRuntime.InvokeVoidAsync("eChartsInterop.BuildStackedBarChart", elementId);
         }
+
     }
 }

WotBlitzStatisticsPro.Blazor/Services/IChartsService.cs

@@ -12,6 +12,9 @@ namespace WotBlitzStatisticsPro.Blazor.Services
         Task BuildBarChartBattlesByNation(string elementId, IEnumerable<ITank> tanks);
         Task BuildBarChartWinRatesByNation(string elementId, IEnumerable<ITank> tanks);
         Task BuildBarChartAvgDmgByNation(string elementId, IEnumerable<ITank> tanks);
+        Task BuildBarChartBattlesByTier(string elementId, IEnumerable<ITank> tanks);
+        Task BuildBarChartWinRatesByTier(string elementId, IEnumerable<ITank> tanks);
+        Task BuildBarChartAvgDmgByTier(string elementId, IEnumerable<ITank> tanks);
         Task BuildStackedBarChart(string elementId);
     }
 }

WotBlitzStatisticsPro.Blazor/wwwroot/echarts/echarts-interop.js

@@ -339,6 +339,118 @@ eChartsInterop.BuildBarChartByNation = function (elementId, chartTitle, chartDat
         });
 };
 
+eChartsInterop.BuildBarChartByTier = function (elementId, chartTitle, chartData) {
+
+    var seriesLabel = {
+        show: true
+    }
+
+    // based on prepared DOM, initialize echarts instance
+    var myChart = echarts.init(document.getElementById(elementId), 'dark');
+
+    // specify chart configuration item and data
+    var option = {
+        title: {
+            text: chartTitle
+        },
+        toolbox: {
+            show: true,
+            feature: {
+                saveAsImage: {}
+            }
+        },
+        xAxis: {
+            type: 'value',
+            name: '',
+            axisLabel: {
+                formatter: '{value}'
+            }
+        },
+        yAxis: {
+            type: 'category',
+            data: ['X', 'IX', 'VIII', 'VII', 'VI', 'V', 'IV', 'III', 'II', 'I'],
+            axisTick: {
+                alignWithLabel: true
+            }
+        },
+        series: [
+            {
+                type: 'bar',
+                label: seriesLabel,
+                barWidth: '30px',
+                data: [
+                    {
+                        value: chartData[9].value,
+                        itemStyle: {
+                            color: chartData[9].color
+                        }
+                    },
+                    {
+                        value: chartData[8].value,
+                        itemStyle: {
+                            color: chartData[8].color
+                        }
+                    },
+                    {
+                        value: chartData[7].value,
+                        itemStyle: {
+                            color: chartData[7].color
+                        }
+                    },
+                    {
+                        value: chartData[6].value,
+                        itemStyle: {
+                            color: chartData[6].color
+                        }
+                    },
+                    {
+                        value: chartData[5].value,
+                        itemStyle: {
+                            color: chartData[5].color
+                        }
+                    },
+                    {
+                        value: chartData[4].value,
+                        itemStyle: {
+                            color: chartData[4].color
+                        }
+                    },
+                    {
+                        value: chartData[3].value,
+                        itemStyle: {
+                            color: chartData[3].color
+                        }
+                    },
+                    {
+                        value: chartData[2].value,
+                        itemStyle: {
+                            color: chartData[2].color
+                        }
+                    },
+                    {
+                        value: chartData[1].value,
+                        itemStyle: {
+                            color: chartData[1].color
+                        }
+                    },
+                    {
+                        value: chartData[0].value,
+                        itemStyle: {
+                            color: chartData[0].color
+                        }
+                    }
+                ]
+            }]
+    };
+
+    // use configuration item and data specified to show chart
+    myChart.setOption(option);
+    window.addEventListener('resize',
+        function () {
+            myChart.resize();
+        });
+}
+
 eChartsInterop.BuildStackedBarChart = function (elementId) {
     var tankTypes = {
         'HeavyTank': '/tank-type/vehicle.class.heavy.small.scale-200.png',
@@ -479,4 +591,5 @@ eChartsInterop.BuildStackedBarChart = function (elementId) {
     window.onresize = function () {
         myChart.resize();
     };
-};
+};
+