Add chartbeatlengths

commands/100-games/chartbeatlengths.js

@@ -0,0 +1,149 @@
+const { createCanvas } = require('canvas');
+const { Chart } = require('chart.js/auto');
+const ChartDataLabels = require('chartjs-plugin-datalabels');
+const fs = require('fs');
+const { getUserRegistration, getBeatenGames, checkGameStorageId } = require('../../databaseHelperFunctions.js');
+const { getGameJson, getTimesToBeat } = require('../../igdbHelperFunctions.js');
+const { SlashCommandBuilder, EmbedBuilder } = require('discord.js');
+
+module.exports = {
+  data: new SlashCommandBuilder()
+	.setName('chartbeatlengths')
+	.setDescription('Generate a line graph of the games beat over time')
+    .addUserOption(option => option.setName('user1').setDescription('The user to check')),
+	async execute(interaction) {
+
+    await interaction.deferReply();
+
+    let user = interaction.user;
+    const userOption = interaction.options.getUser('user1');
+
+
+    if (userOption) {
+        user = userOption;
+    }
+
+    const userDatabaseEntry = await getUserRegistration(user);
+    if (!userDatabaseEntry) return interaction.editReply({ content: `Issue checking registration with "${user.username}".`, ephemeral: true });
+
+    const beatenGamesDatabaseEntries = await getBeatenGames(userDatabaseEntry.id);
+
+    if (!beatenGamesDatabaseEntries || beatenGamesDatabaseEntries.length == 0) {
+        const embed = new EmbedBuilder()
+        .setTitle(`${user.username}'s beat games lengths`)
+        .setDescription(`${user.username} has not beat any games`)
+        .setColor(0xFF0000);
+        return interaction.editReply({ embeds: [embed] });
+    }
+
+    const gameIds = [];
+
+    for (let i = 0; i < beatenGamesDatabaseEntries.length; i++) {
+        const game = await checkGameStorageId(beatenGamesDatabaseEntries[i].gameId);
+        gameIds.push(game.igdb_id);
+    }
+
+    const beatGameIGDBEntries = await getGameJson(String.prototype.concat(`where id = (${gameIds}); fields *; limit ${gameIds.length};`));
+
+    const timeData = await getTimesToBeat(`where game_id = (${gameIds}); fields *; limit ${gameIds.length};`);
+
+    if (!timeData || timeData.length == 0) {
+        const embed = new EmbedBuilder()
+        .setTitle(`${user.username}'s beat games lengths`)
+        .setThumbnail(user.avatarURL())
+        .setDescription('Not enough data to calculate a valid number.')
+        .setTimestamp()
+        .setFooter({ text: 'The Ochulus • 100 Games Challenge', iconURL: interaction.client.user.avatarURL() })
+        .setColor(0xFF0000);
+        return interaction.editReply({ embeds: [embed] });
+    }
+
+    // TODO: Code to generate data here
+    const labels = [];
+    const values = [];
+    const backgroundColors = [];
+
+    for (let i = 0; i < timeData.length; i++) {
+        if (timeData[i])
+        {
+            if (timeData[i].normally)
+            {
+                values.push(timeData[i].normally / 3600);
+                const game = beatGameIGDBEntries.filter(item => item.id == timeData[i].game_id);
+                labels.push(game[0].name);
+                backgroundColors.push(`rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.5)`);
+            }
+            else if (timeData[i].hastily)
+            {
+                values.push(timeData[i].hastily / 3600);
+                const game = beatGameIGDBEntries.filter(item => item.id == timeData[i].game_id);
+                labels.push(game[0].name);
+                backgroundColors.push(`rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 0.5)`);
+            }
+        }
+    }
+
+    // Create a canvas
+    const canvas = createCanvas(1920, 1080);
+
+    // Chart data
+    const data = {
+        labels: labels,
+        datasets: [
+        {
+            label: 'Games Beat',
+            data: values,
+            borderColor: backgroundColors,
+            backgroundColor: backgroundColors,
+            borderWidth: 8,
+            color: 'white',
+        },
+        ],
+    };
+
+    // Chart configuration
+    const config = {
+        type: 'pie',
+        data,
+        plugins: [ChartDataLabels],
+        options: {
+            plugins: {
+                title: {
+                    display: true,
+                    text: `${user.username}'s beat games lengths`,
+                    font: {
+                        size: 64,
+                        family: 'Tahoma',
+                    },
+                    color: 'white',
+                },
+                legend: {
+                    display: false,
+                },
+                datalabels: {
+                    color: 'white',
+                    formatter: (value, context) => {
+                        return context.chart.data.labels[context.dataIndex];
+                    },
+                    anchor: 'center',
+                    align: 'end',
+                    offset: 200,
+                },
+            },
+        },
+    };
+
+    // Create the chart
+    const chart = new Chart(canvas, config);
+
+    // Save the chart as an image
+    const buffer = canvas.toBuffer('image/png');
+    fs.writeFileSync('./tempbeattimeline.png', buffer);
+
+    // Use the image in your embed
+    return interaction.editReply({
+        files: ['./tempbeattimeline.png'],
+    });
+
+	},
+};

package-lock.json

@@ -12,6 +12,7 @@
         "axios": "^1.9.0",
         "canvas": "^3.0.0",
         "chart.js": "^4.4.7",
+        "chartjs-plugin-datalabels": "^2.2.0",
         "discord.js": "^14.14.1",
         "dotenv": "^16.3.1",
         "sequelize": "^6.35.1",
@@ -762,6 +763,15 @@
         "pnpm": ">=8"
       }
     },
+    "node_modules/chartjs-plugin-datalabels": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/chartjs-plugin-datalabels/-/chartjs-plugin-datalabels-2.2.0.tgz",
+      "integrity": "sha512-14ZU30lH7n89oq+A4bWaJPnAG8a7ZTk7dKf48YAzMvJjQtjrgg5Dpk9f+LbjCF6bpx3RAGTeL13IXpKQYyRvlw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "chart.js": ">=3.0.0"
+      }
+    },
     "node_modules/chownr": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",

package.json

@@ -13,6 +13,7 @@
     "axios": "^1.9.0",
     "canvas": "^3.0.0",
     "chart.js": "^4.4.7",
+    "chartjs-plugin-datalabels": "^2.2.0",
     "discord.js": "^14.14.1",
     "dotenv": "^16.3.1",
     "sequelize": "^6.35.1",