play with canvas sizes
This commit is contained in:
parent
857dd5f195
commit
b432f193ca
|
@ -60,6 +60,7 @@ const Rankings = () => {
|
|||
cHistStats,
|
||||
histStats,
|
||||
pDailyStats,
|
||||
pHourlyStats,
|
||||
] = useSelector(selectStats, shallowEqual);
|
||||
const isDarkMode = useSelector(selectIsDarkMode);
|
||||
|
||||
|
@ -81,7 +82,7 @@ const Rankings = () => {
|
|||
if (area !== 'charts') {
|
||||
return null;
|
||||
}
|
||||
return getOnlineStatsData(onlineStats);
|
||||
return getOnlineStatsData(onlineStats, pHourlyStats);
|
||||
}, [area, onlineStats]);
|
||||
|
||||
const onlineOpts = useMemo(() => {
|
||||
|
@ -183,10 +184,9 @@ const Rankings = () => {
|
|||
</div>
|
||||
<br />
|
||||
{(area === 'countries') && (
|
||||
<>
|
||||
<div style={{ height: 300, paddingBottom: 16 }}>
|
||||
<Pie options={cPieOpts} data={cPieData} />
|
||||
<br />
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
{(['total', 'today', 'yesterday', 'countries'].includes(area)) && (
|
||||
<table style={{
|
||||
|
|
|
@ -4,7 +4,7 @@ import { colorFromText } from './utils';
|
|||
export function getCHistChartOpts(isDarkMode) {
|
||||
const options = {
|
||||
responsive: true,
|
||||
aspectRatio: 1.2,
|
||||
aspectRatio: 1.4,
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
|
@ -99,7 +99,16 @@ export function getOnlineStatsOpts(isDarkMode) {
|
|||
drawBorder: false,
|
||||
},
|
||||
},
|
||||
y: {
|
||||
A: {
|
||||
type: 'linear',
|
||||
position: 'left',
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
},
|
||||
},
|
||||
B: {
|
||||
type: 'linear',
|
||||
position: 'right',
|
||||
grid: {
|
||||
drawBorder: false,
|
||||
},
|
||||
|
@ -115,7 +124,7 @@ export function getOnlineStatsOpts(isDarkMode) {
|
|||
},
|
||||
title: {
|
||||
display: true,
|
||||
text: t`Players Online per full hour`,
|
||||
text: t`Players and Pixels per hour`,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
@ -127,20 +136,25 @@ export function getOnlineStatsOpts(isDarkMode) {
|
|||
color: sColor,
|
||||
};
|
||||
options.scales.x.grid.color = lColor;
|
||||
options.scales.y.ticks = {
|
||||
options.scales.A.ticks = {
|
||||
color: sColor,
|
||||
};
|
||||
options.scales.y.grid.color = lColor;
|
||||
options.scales.A.grid.color = lColor;
|
||||
options.scales.B.ticks = {
|
||||
color: sColor,
|
||||
};
|
||||
options.scales.B.grid.color = lColor;
|
||||
options.plugins.title.color = sColor;
|
||||
}
|
||||
return options;
|
||||
}
|
||||
|
||||
export function getOnlineStatsData(onlineStats) {
|
||||
export function getOnlineStatsData(onlineStats, pHourlyStats) {
|
||||
const labels = [];
|
||||
const data = [];
|
||||
const onData = [];
|
||||
const pxlData = [];
|
||||
let ts = Date.now();
|
||||
let c = onlineStats.length;
|
||||
let c = Math.max(onlineStats.length, pHourlyStats.length);
|
||||
while (c) {
|
||||
c -= 1;
|
||||
const date = new Date(ts);
|
||||
|
@ -148,15 +162,31 @@ export function getOnlineStatsData(onlineStats) {
|
|||
const key = hours || `${date.getMonth() + 1} / ${date.getDate()}`;
|
||||
labels.unshift(String(key));
|
||||
ts -= 1000 * 3600;
|
||||
data.push(onlineStats[c]);
|
||||
if (onlineStats.length > c) {
|
||||
onData.push(onlineStats[c]);
|
||||
} else {
|
||||
onData.push(null);
|
||||
}
|
||||
if (pHourlyStats.length > c) {
|
||||
pxlData.push(pHourlyStats[c]);
|
||||
} else {
|
||||
pxlData.push(null);
|
||||
}
|
||||
}
|
||||
return {
|
||||
labels,
|
||||
datasets: [{
|
||||
yAxisID: 'A',
|
||||
label: 'Players',
|
||||
data,
|
||||
data: onData,
|
||||
borderColor: '#3fadda',
|
||||
backgroundColor: '#3fadda',
|
||||
}, {
|
||||
yAxisID: 'B',
|
||||
label: 'Pixels',
|
||||
data: pxlData,
|
||||
borderColor: '#d067b6',
|
||||
backgroundColor: '#d067b6',
|
||||
}],
|
||||
};
|
||||
}
|
||||
|
@ -164,7 +194,7 @@ export function getOnlineStatsData(onlineStats) {
|
|||
export function getHistChartOpts(isDarkMode) {
|
||||
const options = {
|
||||
responsive: true,
|
||||
aspectRatio: 1.4,
|
||||
aspectRatio: 1.5,
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
|
@ -255,6 +285,7 @@ export function getHistChartData(histStats) {
|
|||
export function getCPieOpts(isDarkMode) {
|
||||
const options = {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false,
|
||||
|
|
|
@ -13,4 +13,5 @@ export const selectStats = (state) => [
|
|||
state.ranks.cHistStats,
|
||||
state.ranks.histStats,
|
||||
state.ranks.pDailyStats,
|
||||
state.ranks.pHourlyStats,
|
||||
];
|
||||
|
|
Loading…
Reference in New Issue
Block a user