diff --git a/src/components/Rankings.jsx b/src/components/Rankings.jsx
index 74cbd5d..c2c5f16 100644
--- a/src/components/Rankings.jsx
+++ b/src/components/Rankings.jsx
@@ -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 = () => {
{(area === 'countries') && (
- <>
+
)}
{(['total', 'today', 'yesterday', 'countries'].includes(area)) && (
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,
diff --git a/src/store/selectors/ranks.js b/src/store/selectors/ranks.js
index 24b0004..46bc91c 100644
--- a/src/store/selectors/ranks.js
+++ b/src/store/selectors/ranks.js
@@ -13,4 +13,5 @@ export const selectStats = (state) => [
state.ranks.cHistStats,
state.ranks.histStats,
state.ranks.pDailyStats,
+ state.ranks.pHourlyStats,
];