Skip to content

Commit

Permalink
deploy: albertlauncher/documentation@27e99c4
Browse files Browse the repository at this point in the history
  • Loading branch information
@ManuelSchneid3r
ManuelSchneid3r committed Nov 11, 2024
1 parent c7137eb commit fd00746
Showing 1 changed file with 354 additions and 0 deletions.
354 changes: 354 additions & 0 deletions stats.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,354 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OS Usage Trends - Last 30 Days</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
chartContainer {
width: 100%; /* Full width of viewport */
padding: 20px; /* Optional padding */
box-sizing: border-box;
}
canvas {
width: 80%;
height: auto; /* Auto height to maintain aspect ratio */
margin: 0 auto;
}
</style>
</head>
<body>
<h1>Albert telemetry</h1>

<h2>User count</h2>
<span>
<p>Users</p>
<div class="chartContainer">
<canvas id="userCountChart"></canvas>
</div>

<p>Plugins</p>
<div class="chartContainer">
<canvas id="pluginChart"></canvas>
</div>

<p>Activations</p>
<div class="chartContainer">
<canvas id="activationsChart"></canvas>
</div>

<p>Versions</p>
<div class="chartContainer">
<canvas id="versionChart"></canvas>
</div>

<p>Operating systems</p>
<div class="chartContainer">
<canvas id="osChart"></canvas>
</div>

<p>Operating systems type</p>
<div class="chartContainer">
<canvas id="ostChart"></canvas>
</div>

<p>Countries</p>
<div class="chartContainer">
<canvas id="countryChart"></canvas>
</div>

<p>Terminal</p>
<div class="chartContainer">
<canvas id="termChart"></canvas>
</div>
</span>

<script>

function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++)
color += letters[Math.floor(Math.random() * 16)];
return color;
}

async function fetchData(url) {
try {
const response = await fetch(url, {
method: "GET",
headers: { "Content-Type": "application/json" }
});

if (!response.ok)
throw new Error(`HTTP error! Status: ${response.status}`);

return await response.json();;
} catch (error) {
throw new Error("Error fetching data:", error);
}
}

async function prepareGroupCountData(data) {
const dates = Object.keys(data).slice(0, -1); // Remove the last date (most recent)
const groups = [...new Set(dates.flatMap(date => Object.keys(data[date])))];
const datasets = [];
groups.forEach(group => {
const dataPoints = dates.map(date => data[date][group] || 0);

datasets.push({
label: group,
data: dataPoints,
fill: false,
borderColor: getRandomColor(),
tension: 0.1
});
});

return {
dates: dates,
datasets: datasets
};
}

async function initUserCountChart() {
data = await fetchData("http://80.211.205.88:80/usercount?days=60");
const dates = Object.keys(data).slice(0, -1); // Remove the last date (most recent)
const userCounts = dates.map(date => data[date] || 0);

const ctx = document.getElementById('userCountChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: dates,
datasets: [{
label: 'User Count',
data: userCounts,
fill: false,
borderColor: 'rgba(75, 192, 192, 1)', // Color for the line
tension: 0.1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
beginAtZero: false,
title: {
display: true,
text: 'Date'
}
},
y: {
beginAtZero: true,
title: {
display: true,
text: 'User Count'
},
ticks: {
stepSize: 50
}
}
},
plugins: {
legend: { display: true, position: 'bottom' }
}
}
});
}
initUserCountChart();

async function initOsTypesChart() {
data = await fetchData("http://80.211.205.88:80/operatingsystemstype?days=60");
const { dates, datasets } = await prepareGroupCountData(data);

const ctx = document.getElementById('ostChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: dates, // Use dates without the latest one
datasets: datasets
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: { beginAtZero: false },
y: { type: 'logarithmic', ticks: { stepSize: 50 } }
},
plugins: {
legend: { display: true, position: 'bottom' }
}
}
});
}
initOsTypesChart();

async function initOsChart() {
data = await fetchData("http://80.211.205.88:80/operatingsystems?days=60");
const { dates, datasets } = await prepareGroupCountData(data);

const ctx = document.getElementById('osChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: dates, // Use dates without the latest one
datasets: datasets
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: { beginAtZero: false },
y: { beginAtZero: false, type: 'logarithmic', ticks: { stepSize: 50 } }
},
plugins: {
legend: { display: true, position: 'bottom' }
}
}
});
}
initOsChart();

async function initVersionChart() {
data = await fetchData("http://80.211.205.88:80/versions?days=60");
const { dates, datasets } = await prepareGroupCountData(data);

const ctx = document.getElementById('versionChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: dates, // Use dates without the latest one
datasets: datasets
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: { beginAtZero: false },
y: { beginAtZero: false, ticks: { stepSize: 50 } }
},
plugins: {
legend: { display: true, position: 'bottom' }
}
}
});
}
initVersionChart();

async function initCountryChart() {
data = await fetchData("http://80.211.205.88:80/countries?days=60");
const { dates, datasets } = await prepareGroupCountData(data);

const ctx = document.getElementById('countryChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: dates, // Use dates without the latest one
datasets: datasets
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: { beginAtZero: false },
y: { beginAtZero: false, ticks: { stepSize: 50 } }
},
plugins: {
legend: { display: true, position: 'bottom' }
}
}
});
}
initCountryChart();

async function initTermChart() {
data = await fetchData("http://80.211.205.88:80/terminals?days=60");
const { dates, datasets } = await prepareGroupCountData(data);

const ctx = document.getElementById('termChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: dates, // Use dates without the latest one
datasets: datasets
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: { beginAtZero: false },
y: { beginAtZero: false, ticks: { stepSize: 50 } }
},
plugins: {
legend: { display: true, position: 'bottom' }
}
}
});
}
initTermChart();


async function initPluginChart() {
data = await fetchData("http://80.211.205.88:80/plugins?days=60");
const { dates, datasets } = await prepareGroupCountData(data);

const ctx = document.getElementById('pluginChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: dates, // Use dates without the latest one
datasets: datasets
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: { beginAtZero: false },
y: { beginAtZero: false, ticks: { stepSize: 50 } }
},
plugins: {
legend: { display: true, position: 'bottom' }
}
}
});
}
initPluginChart();


async function initActivationsChart() {
data = await fetchData("http://80.211.205.88:80/activations?days=60");
const { dates, datasets } = await prepareGroupCountData(data);

const ctx = document.getElementById('activationsChart').getContext('2d');
new Chart(ctx, {
type: 'line',
data: {
labels: dates, // Use dates without the latest one
datasets: datasets
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: { beginAtZero: false },
y: { beginAtZero: false, ticks: { stepSize: 50 } }
},
plugins: {
legend: { display: true, position: 'bottom' }
}
}
});
}
initActivationsChart();





</script>
</body>
</html>

0 comments on commit fd00746

Please sign in to comment.