mirror of
https://github.com/DrMboga/WotBlitzStatisticsBlazor.git
synced 2026-10-21 02:17:20 +02:00
feat: charts by tier are ready
This commit is contained in:
1 parent
2578beb4e0
commit
07cda06fea
8 files changed
+297
No files matched your search
@@ -0,0 +1,4 @@
|
||||
namespace WotBlitzStatisticsPro.Blazor.Model
|
||||
{
|
||||
public record ChartByTierItem(string Tier, int Value, string Color);
|
||||
}
|
||||
@@ -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>*@
|
||||
@@ -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");
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
@@ -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',
|
||||
@@ -480,3 +592,4 @@ eChartsInterop.BuildStackedBarChart = function (elementId) {
|
||||
myChart.resize();
|
||||
};
|
||||
};
|
||||
|
||||
Reference in new issue
Block a user