Delay chart load

pull/1/head
Made Baruna 2021-03-29 09:37:41 +08:00
parent f248203bda
commit 8c0bc5533a
1 changed files with 79 additions and 77 deletions

View File

@ -242,90 +242,92 @@
await tick(); await tick();
new Chart(pieChart, { setTimeout(() => {
type: 'pie', new Chart(pieChart, {
data: { type: 'pie',
labels: ['Total Pulls', 'Total 5*', 'Total 4*'], data: {
datasets: [ labels: ['Total Pulls', 'Total 5*', 'Total 4*'],
{ datasets: [
label: 'total', {
data: [currentPulls.length, allLegendary.length, allRare.length], label: 'total',
backgroundColor: ['rgba(107, 161, 192, 0.7)', 'rgba(255, 177, 63, 0.7)', 'rgba(210, 143, 214, 0.7)'], data: [currentPulls.length, allLegendary.length, allRare.length],
borderColor: ['#6BA1C0', '#FFB13F', '#D28FD6'], backgroundColor: ['rgba(107, 161, 192, 0.7)', 'rgba(255, 177, 63, 0.7)', 'rgba(210, 143, 214, 0.7)'],
borderWidth: 1, borderColor: ['#6BA1C0', '#FFB13F', '#D28FD6'],
borderWidth: 1,
},
],
},
options: {
responsive: true,
legend: {
display: false,
},
tooltips: {
mode: 'dataset',
}, },
],
},
options: {
responsive: true,
legend: {
display: false,
}, },
tooltips: { });
mode: 'dataset',
},
},
});
new Chart(bannerChart, { new Chart(bannerChart, {
type: 'bar', type: 'bar',
data: { data: {
labels, labels,
datasets: [ datasets: [
{ {
label: '5* pulls', label: '5* pulls',
data: totalLegendaryEachBanner, data: totalLegendaryEachBanner,
backgroundColor: 'rgba(255, 177, 63, 0.7)', backgroundColor: 'rgba(255, 177, 63, 0.7)',
borderColor: '#FFB13F', borderColor: '#FFB13F',
borderWidth: 1, borderWidth: 1,
},
{
label: '4* pulls',
data: totalRareEachBanner,
backgroundColor: 'rgba(210, 143, 214, 0.7)',
borderColor: '#D28FD6',
borderWidth: 1,
},
{
label: 'Total pulls',
data: totalEachBanner,
backgroundColor: backgrounds,
borderColor: borders,
borderWidth: 1,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false,
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
title: (tooltipItem) => {
return selectedBanners[tooltipItem[0].index].name;
}, },
label: (tooltipItem, data) => { {
const label = data.datasets[tooltipItem.datasetIndex].label; label: '4* pulls',
const value = data: totalRareEachBanner,
tooltipItem.datasetIndex === 2 backgroundColor: 'rgba(210, 143, 214, 0.7)',
? data.datasets[0].data[tooltipItem.index] + borderColor: '#D28FD6',
data.datasets[1].data[tooltipItem.index] + borderWidth: 1,
data.datasets[2].data[tooltipItem.index] },
: tooltipItem.value; {
return `${label}: ${value}`; label: 'Total pulls',
data: totalEachBanner,
backgroundColor: backgrounds,
borderColor: borders,
borderWidth: 1,
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
legend: {
display: false,
},
tooltips: {
mode: 'index',
intersect: false,
callbacks: {
title: (tooltipItem) => {
return selectedBanners[tooltipItem[0].index].name;
},
label: (tooltipItem, data) => {
const label = data.datasets[tooltipItem.datasetIndex].label;
const value =
tooltipItem.datasetIndex === 2
? data.datasets[0].data[tooltipItem.index] +
data.datasets[1].data[tooltipItem.index] +
data.datasets[2].data[tooltipItem.index]
: tooltipItem.value;
return `${label}: ${value}`;
},
}, },
}, },
scales: {
yAxes: [{ stacked: true, gridLines: { color: '#2d3748' } }],
xAxes: [{ stacked: true }],
},
}, },
scales: { });
yAxes: [{ stacked: true, gridLines: { color: '#2d3748' } }], }, 500);
xAxes: [{ stacked: true }],
},
},
});
} }
function sortPulls() { function sortPulls() {