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