feat: charts by tier are ready

This commit is contained in:
Mikhail Shabanov committed 2021-08-25 16:56:22 +02:00
1 parent 2578beb4e0
commit 07cda06fea
8 files changed
+298 -1

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',
@@ -479,4 +591,5 @@ eChartsInterop.BuildStackedBarChart = function (elementId) {
window.onresize = function () {
myChart.resize();
};
};
};