github_mirrors/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2025-01-23 22:40:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add better grouping and chart labeling for dev center analytics

Browse Source
This commit is contained in:
jelveh 2024-12-29 16:42:31 -08:00
parent 4f88ee37de
commit bc0e7e12b5
2 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/dev-center/index.html
View File

@ -56,12 +56,16 @@
margin-top: 20px;
padding: 20px;
border-radius: 10px;
background-color: #f2f4f5;
background-color: #f2f4f5eb;
width: 200px;
text-align: center;
float:left;
margin-right: 23px;
}
.analytics-card h3{
color: #838383;
font-weight: 500;
}
</style>
</head>

40
src/dev-center/js/dev-center.js
View File

@ -806,7 +806,8 @@ async function edit_app_section(cur_app_name) {
$('#analytics-users .count').html(cur_app.stats.user_count);
$('#analytics-opens .count').html(cur_app.stats.open_count);
// get analytics
render_analytics('today')
const filetype_association_input = document.querySelector('textarea[id=edit-app-filetype-associations]');
let tagify = new Tagify(filetype_association_input, {
pattern: /\.(?:[a-z0-9]+)|(?:[a-z]+\/(?:[a-z0-9.-]+|\*))/,
@ -2817,18 +2818,23 @@ $(document).on('click', '.copy-app-uid', function(e) {
});
$(document).on('change', '#analytics-period', async function(e) {
let period = $(this).val();
render_analytics(period);
});
async function render_analytics(period){
puter.ui.showSpinner();
// set a sensible stats_grouping based on the selected period
let stats_grouping;
if ($(this).val() === 'today' || $(this).val() === 'yesterday') {
if (period === 'today' || period === 'yesterday') {
stats_grouping = 'hour';
}
else if ($(this).val() === 'this_week' || $(this).val() === 'last_week' || $(this).val() === 'this_month' || $(this).val() === 'last_month' || $(this).val() === '7d' || $(this).val() === '30d') {
else if (period === 'this_week' || period === 'last_week' || period === 'this_month' || period === 'last_month' || period === '7d' || period === '30d') {
stats_grouping = 'day';
}
else if ($(this).val() === 'this_year' || $(this).val() === 'last_year' || $(this).val() === '12m' || $(this).val() === 'all') {
else if (period === 'this_year' || period === 'last_year' || period === '12m' || period === 'all') {
stats_grouping = 'month';
}
@ -2836,7 +2842,7 @@ $(document).on('change', '#analytics-period', async function(e) {
currently_editing_app.name,
{
icon_size: 16,
stats_period: $(this).val(),
stats_period: period,
stats_grouping: stats_grouping,
}
);
@ -2855,7 +2861,17 @@ $(document).on('change', '#analytics-period', async function(e) {
$('#analytics-opens').parent().after(container);
// Format the data
const labels = app.stats.grouped_stats.open_count.map(item => item.period);
const labels = app.stats.grouped_stats.open_count.map(item => {
const date = new Date(item.period);
// Different format based on grouping
if (stats_grouping === 'hour') {
return date.toLocaleString('en-US', { hour: 'numeric', hour12: true }).toLowerCase();
} else if (stats_grouping === 'day') {
return date.toLocaleString('en-US', { month: 'short', day: 'numeric' });
} else {
return date.toLocaleString('en-US', { month: 'short', year: 'numeric' });
}
});
const openData = app.stats.grouped_stats.open_count.map(item => item.count);
const userData = app.stats.grouped_stats.user_count.map(item => item.count);
@ -2891,6 +2907,10 @@ $(document).on('change', '#analytics-period', async function(e) {
title: {
display: true,
text: 'Period'
},
ticks: {
maxRotation: 45,
minRotation: 45
}
},
y: {
@ -2899,11 +2919,15 @@ $(document).on('change', '#analytics-period', async function(e) {
title: {
display: true,
text: 'Count'
},
ticks: {
precision: 0, // Show whole numbers only
stepSize: 1 // Increment by 1
}
}
}
},
}
});
puter.ui.hideSpinner();
});
}