CODEWITHSUNDEEP
javascriptnode.jsdiscorddiscord.jschart.js
Umutcan Yılmaz
Umutcan Yılmaz

Reputation: 73

Chart looks only grey, does not show the color - Chartjs,discordjs

I was designing a discord.js code that will show message and voice stats of a member which may lead to prizes according to leaderboard of it.

Normally, my graphs somehow should have been looking something like these graphs:

(the graphs shown above are respectively voice and message stats of a discord server)

But when I enter commands, it shows these colorless graphs: (it is not about its design but its colors)

Between those two graphs, there are no code differences, no node.js version changes, no platform changes or such.

I have been working on this project for a long time but after one month or so, I still could not find any error on my codes. Maybe I missed something. Can someone help me on this please? Thanks.

General stats command:

const { Client, Message, MessageEmbed, MessageAttachment } = require("discord.js");
const Stat = require("../../Models/Database/Stat");
const tm = require("../../Managers/TimeManager");

const moment = require("moment");
require("moment-duration-format");

const cm = require("../../Managers/ChartManager");

/**
 * @param {Client} client 
 * @param {Message} message 
 * @param {Array<String>} args 
 */
module.exports.execute = async(client, message, args) => {
    let victim = message.mentions.users.first() || client.users.cache.get(args[0]) || message.author;

    let embed = new MessageEmbed()
        .setAuthor(victim.username, victim.avatarURL({ dynamic: true }))
        .setFooter("İstatistik bilgileri");

    let data = await Stat.findOne({ Id: victim.id });
    if (!data) data = {};
    let day = await tm.getDay(message.guild.id);

    let dataMessage = new Array(day).fill(0, 0, day),
        dataVoice = new Array(day).fill(0, 0, day),
        dataColors = new Array(day).fill('rgba(0, 92, 210, 0.5)');

    if (data.Message) {
        let günlükmesaj = 0,
            haftalıkmesaj = 0,
            aylıkmesaj = 0,
            toplammesaj = 0;
        let days = Object.keys(data.Message);
        days.forEach(_day => {
            let sum = Object.values(data.Message[_day]).reduce((x, y) => x + y, 0);
            toplammesaj += sum;
            dataMessage[_day - 1] = sum;
            if (day == Number(_day)) günlükmesaj += sum;
            if (_day <= 7) haftalıkmesaj += sum;
            if (_day <= 30) aylıkmesaj += sum;
        });
        embed.addField(`Mesaj İstatistiği`, `
        __Toplam:__ \`${toplammesaj} mesaj\`

        Günlük: \`${günlükmesaj} mesaj\`
        Haftalık: \`${haftalıkmesaj} mesaj\`
        Aylık: \`${aylıkmesaj} mesaj\`
        `, true)
    }
    if (data.Voice) {
        let günlükses = 0,
            haftalıkses = 0,
            aylıkses = 0,
            toplamses = 0;
        let days = Object.keys(data.Voice);
        let max = Math.max(dataMessage);
        days.forEach(_day => {
            let sum = Object.values(data.Voice[_day]).reduce((x, y) => x + y, 0);
            if (isNaN(sum)) sum = 0;
            toplamses += sum;

            dataVoice[_day - 1] = (sum / (1000 * 60))
            if (day == Number(_day)) günlükses += sum;
            if (_day <= 7) haftalıkses += sum;
            if (_day <= 30) aylıkses += sum;
        });
        embed.addField(`Ses İstatistiği`, `
        __Toplam:__ \`${moment.duration(toplamses).format("H [saat, ] m [dakika]")}\`

        Günlük: \`${moment.duration(günlükses).format("H [saat, ] m [dakika]")}\`
        Haftalık: \`${moment.duration(haftalıkses).format("H [saat, ] m [dakika]")}\`
        Aylık: \`${moment.duration(aylıkses).format("H [saat, ] m [dakika]")}\`
        `, true)
    }

    let dataDate = [];
    for (let index = 0; index < day; index++) {
        let date = new Date(Date.now() - (1000 * 60 * 60 * 24 * (day - (index + 1))));
        dataDate.push(date.toTurkishFormatDate());
    }

    let buffer = await cm.ImageFromData({
        width: 600,
        height: 290,
        type: 'line',

        data: {
            labels: [].concat(dataDate),
            datasets: [{
                    label: "Toplam Mesaj İstatistiği (Adet)",
                    data: [].concat(dataMessage),
                    backgroundColor: [
                        'rgba(0, 112, 255, 0.25)'
                    ],
                    borderColor: [].concat(dataColors),
                    borderWidth: 1
                },
                {
                    label: "Toplam Ses İstatistiği (Dakika)",
                    data: dataVoice,
                    backgroundColor: [
                        'rgba(4, 255, 0, 0.25)'
                    ],
                    borderColor: [].concat(new Array(day).fill('rgba(4, 255, 0, 0.5)')),
                    borderWidth: 1
                }
            ]
        },
        options: {

        }
    });

    embed.setImage("attachment://Graph.png");
    let attachment = new MessageAttachment(buffer, "Graph.png");

    message.channel.csend({
        embeds: [embed],
        files: [attachment]
    });
}

module.exports.settings = {
    Commands: ["istatistikler", "istatistik"],
    Usage: "istatistik [@kişi|ID]",
    Description: "Sunucudaki genel ses ve mesaj istatistiğinle alakalı bilgi alırsın.",
    Category: "istatistikler",
    Activity: true,
    cooldown: 20000
}

Message stats command:

const { Client, Message, MessageEmbed, MessageAttachment } = require("discord.js");
const Stat = require("../../Models/Database/Stat");

const tm = require("../../Managers/TimeManager");

const cm = require("../../Managers/ChartManager");

module.exports.execute = async(client, message, args) => {
        let victim = message.mentions.users.first() || client.users.cache.get(args[0]) || message.author;

        let embed = new MessageEmbed()
            .setAuthor(victim.username, victim.avatarURL({ dynamic: true }))
            .setFooter(`${message.guild.name} sunucusuda ${victim.username} kişisinin bilgileri.`)

        let data = await Stat.findOne({ Id: victim.id }, { Voice: 0 });
        if (!data) data = {};
        let day = await tm.getDay(message.guild.id);
        embed.setDescription(`${victim} kişisinin ${day} gün boyunca yapmış olduğu mesaj aktifliği aşağıda detaylı olarak sıralanmıştır.`);
        embed.setColor("2f3136");

        let dataValue = new Array(day).fill(0);
        let dataDate = [];
        let dataColors = new Array(day).fill('rgba(0, 92, 210, 0.5)');

        if (data.Message) {
            let günlükmesaj = 0,
                haftalıkmesaj = 0,
                aylıkmesaj = 0,
                toplammesaj = 0;
            let days = Object.keys(data.Message);

            let haftalık = {},
                aylık = {},
                günlük = [];

            days.forEach(_day => {
                let sum = Object.values(data.Message[_day]).reduce((x, y) => x + y, 0);
                toplammesaj += sum;
                dataValue[_day - 1] = sum;

                if (day == Number(_day)) {
                    günlükmesaj += sum;
                    günlük = Object.keys(data.Message[_day]).map(e => Object.assign({ Channel: e, Value: data.Message[_day][e] }));
                }
                if (_day <= 7) {
                    haftalıkmesaj += sum;
                    let keys = Object.keys(data.Message[_day]);
                    keys.forEach(key => {
                        if (haftalık[key]) haftalık[key] += data.Message[_day][key];
                        else haftalık[key] = data.Message[_day][key];
                    });
                }
                if (_day <= 30) {
                    aylıkmesaj += sum;
                    let keys = Object.keys(data.Message[_day]);
                    keys.forEach(key => {
                        if (aylık[key]) aylık[key] += data.Message[_day][key];
                        else aylık[key] = data.Message[_day][key];
                    });
                }
            });
            embed.addField("**Günlük Mesaj İstatistiği**", `
        __Toplam:__ ${günlükmesaj} mesaj

        ${günlük.sort((x, y) => y.Value - x.Value).splice(0, 5).map((data, index) => {
            let channel = message.guild.channels.cache.get(data.Channel);
            return `\`${index + 1}.\` ${channel ? channel : "deleted-channel"}: \`${data.Value} mesaj\``;
        }).join("\n")}\n\n** **
        `);

        embed.addField("**Haftalık Mesaj İstatistiği**", `
        __Toplam:__ ${haftalıkmesaj} mesaj

        ${Object.keys(haftalık).sort((x, y) => haftalık[y] - haftalık[x]).splice(0, 5).map((data, index) => {
            let channel = message.guild.channels.cache.get(data);
            return `\`${index + 1}.\` ${channel ? channel : "deleted-channel"}: \`${haftalık[data]} mesaj\``;
        }).join("\n")}\n\n** **
        `);

        embed.addField("**Aylık Mesaj İstatistiği**", `
        __Toplam:__ ${haftalıkmesaj} mesaj

        ${Object.keys(aylık).sort((x, y) => aylık[y] - aylık[x]).splice(0, 5).map((data, index) => {
            let channel = message.guild.channels.cache.get(data);
            return `\`${index + 1}.\` ${channel ? channel : "deleted-channel"}: \`${aylık[data]} mesaj\``;
        }).join("\n")}\n\n** **
        `);

        embed.addField(`Genel Mesaj İstatistiği`, `
        __Toplam:__ ${toplammesaj} mesaj

        Günlük: \`${günlükmesaj} mesaj\`
        Haftalık: \`${haftalıkmesaj} mesaj\`
        Aylık: \`${aylıkmesaj} mesaj\`
        `, true)
    }
    else {
        embed.setDescription("Herhangi bir kayıt bulunamadı.");
    }

    for (let index = 0; index < day; index++) {
        let date = new Date(Date.now() - (1000 * 60 * 60 * 24 * (day - (index + 1))));
        dataDate.push(date.toTurkishFormatDate());
    }

    let buffer = await cm.ImageFromData({
        width: 600,
        height: 290,
        type: 'line',

        data: {
            labels: [].concat(dataDate),
            datasets: [{
                label: "Toplam Mesaj İstatistiği (Adet)",
                data: [].concat(dataValue),
                backgroundColor: [
                    'rgba(0, 112, 255, 0.25)'
                ],
                borderColor: [].concat(dataColors),
                borderWidth: 1
            }]
        },
        options: {

        }
    });

    embed.setImage("attachment://Graph.png");
    let attachment = new MessageAttachment(buffer, "Graph.png");

    message.channel.csend({
        embeds: [embed],
        files: [attachment]
    });
}
module.exports.settings = {
    Commands: ["mesajistatistikleri"],
    Usage: "mesajistatistikleri",
    Description: "Sunucudaki mesaj istatistiğinle alakalı bilgi alırsın.",
    Category: "istatistikler",
    Activity: true,
    cooldown: 15000
}

Voice stats command:

const { Client, Message, MessageEmbed, MessageAttachment } = require("discord.js");
const Stat = require("../../Models/Database/Stat");

const moment = require("moment");
require("moment-duration-format");

const tm = require("../../Managers/TimeManager");

const cm = require("../../Managers/ChartManager");


/**
 * @param {Client} client 
 * @param {Message} message 
 * @param {Array<String>} args 
 */
module.exports.execute = async(client, message, args) => {
        let victim = message.mentions.users.first() || client.users.cache.get(args[0]) || message.author;

        let embed = new MessageEmbed()
            .setAuthor(victim.username, victim.avatarURL({ dynamic: true }))
            .setFooter(`${message.guild.name} sunucusuda ${victim.username} kişisinin bilgileri.`)

        let data = await Stat.findOne({ Id: victim.id }, { Message: 0 });
        if (!data) data = {};
        let day = await tm.getDay(message.guild.id);
        embed.setDescription(`${victim} kişisinin ${day} gün boyunca yapmış olduğu ses aktifliği aşağıda detaylı olarak sıralanmıştır.`);
        embed.setColor("2f3136");

        let dataValue = new Array(day).fill(0);
        let dataDate = [];
        let dataColors = [];

        if (data.Voice) {
            let günlükses = 0,
                haftalıkses = 0,
                aylıkses = 0,
                toplamses = 0;
            let days = Object.keys(data.Voice);

            let haftalık = {},
                aylık = {},
                günlük = [];

            days.forEach(_day => {
                let sum = Object.values(data.Voice[_day]).reduce((x, y) => x + y, 0);
                toplamses += sum;
                dataValue[_day - 1] = convert(sum);
                dataColors.push('rgba(4, 255, 0, 0.5)');


                if (day == Number(_day)) {
                    günlükses += sum;
                    günlük = Object.keys(data.Voice[_day]).map(e => Object.assign({ Channel: e, Value: data.Voice[_day][e] }));
                }
                if (_day <= 7) {
                    haftalıkses += sum;
                    let keys = Object.keys(data.Voice[_day]);
                    keys.forEach(key => {
                        if (haftalık[key]) haftalık[key] += data.Voice[_day][key];
                        else haftalık[key] = data.Voice[_day][key];
                    });
                }
                if (_day <= 30) {
                    aylıkses += sum;
                    let keys = Object.keys(data.Voice[_day]);
                    keys.forEach(key => {
                        if (aylık[key]) aylık[key] += data.Voice[_day][key];
                        else aylık[key] = data.Voice[_day][key];
                    });
                }
            });
            embed.addField("**Günlük Ses İstatistiği**", `
        __Toplam:__ ${moment.duration(günlükses).format("H [saat, ] m [dakika]")}

        ${günlük.sort((x, y) => y.Value - x.Value).splice(0, 5).map((data, index) => {
            let channel = message.guild.channels.cache.get(data.Channel);
            return `\`${index + 1}.\` #${channel ? channel.name : "deleted-channel"}: \`${moment.duration(data.Value).format("H [saat, ] m [dakika]")}\``;
        }).join("\n")}\n\n** **
        `);

        embed.addField("**Haftalık Ses İstatistiği**", `
        __Toplam:__ ${moment.duration(haftalıkses).format("H [saat, ] m [dakika]")}

        ${Object.keys(haftalık).sort((x, y) => haftalık[y] - haftalık[x]).splice(0, 5).map((data, index) => {
            let channel = message.guild.channels.cache.get(data);
            return `\`${index + 1}.\` #${channel ? channel.name : "deleted-channel"}: \`${moment.duration(haftalık[data]).format("H [saat, ] m [dakika]")}\``;
        }).join("\n")}\n\n** **
        `);

        embed.addField("**Aylık Ses İstatistiği**", `
        __Toplam:__ ${moment.duration(aylıkses).format("H [saat, ] m [dakika]")}

        ${Object.keys(aylık).sort((x, y) => aylık[y] - aylık[x]).splice(0, 5).map((data, index) => {
            let channel = message.guild.channels.cache.get(data);
            return `\`${index + 1}.\` #${channel ? channel.name : "deleted-channel"}: \`${moment.duration(aylık[data]).format("H [saat, ] m [dakika]")}\``;
        }).join("\n")}\n\n** **
        `);

        embed.addField(`Genel Ses İstatistiği`, `
        __Toplam:__ ${moment.duration(toplamses).format("H [saat, ] m [dakika]")}

        Günlük: \`${moment.duration(günlükses).format("H [saat, ] m [dakika]")}\`
        Haftalık: \`${moment.duration(haftalıkses).format("H [saat, ] m [dakika]")}\`
        Aylık: \`${moment.duration(aylıkses).format("H [saat, ] m [dakika]")}\`
        `, true)
    }
    else {
        embed.setDescription("Herhangi bir kayıt bulunamadı.");
    }

    for (let index = 0; index < day; index++) {
        let date = new Date(Date.now() - (1000 * 60 * 60 * 24 * (day - (index + 1))));
        dataDate.push(date.toTurkishFormatDate());
    }

    let buffer = await cm.ImageFromData({
        width: 600,
        height: 290,
        type: 'line',

        data: {
            labels: [].concat(dataDate),
            datasets: [{
                label: "Toplam Ses İstatistiği (Dakika)",
                data: [].concat(dataValue),
                backgroundColor: [
                    'rgba(4, 255, 0, 0.25)'
                ],
                borderColor: [].concat(dataColors),
                borderWidth: 1
            }]
        },
        options: {

        }
    });

    embed.setImage("attachment://Graph.png");
    let attachment = new MessageAttachment(buffer, "Graph.png");

    message.channel.csend({
        embeds: [embed],
        files: [attachment]
    });
}


function convert(ms) {
    return (ms / (1000 * 60)).toFixed(0);
}

module.exports.settings = {
    Commands: ["sesistatistikleri"],
    Usage: "sesistatistikleri",
    Description: "Sunucudaki kendi ses istatistiğine bakarsın.",
    Category: "istatistikler",
    Activity: true,
    cooldown: 15000
}

Message leaderboard command:

const { Client, Message, MessageEmbed, MessageAttachment } = require("discord.js");
const Stat = require("../../Models/Database/Stat");
const Helper = require("../../Utils/Helper");

const tm = require("../../Managers/TimeManager");

const cm = require("../../Managers/ChartManager");

/**
 * @param {Client} client 
 * @param {Message} message 
 * @param {Array<String>} args 
 */
module.exports.execute = async(client, message, args) => {
    let embed = new MessageEmbed()
        .setAuthor(message.author.username, message.author.avatarURL({ dynamic: true }))
        .setFooter(`${message.guild.name} sunucusunun mesaj istatistikleri.`)
    let day = await tm.getDay(message.guild.id);
    embed.setDescription(`${message.guild.name} sunucusunda kullanıcıların **${day}** gün boyunca yapmış olduğu mesaj aktifliği aşağıda detaylı olarak sıralanmıştır.`);
    embed.setColor("2f3136");

    Stat.aggregate([
        { $project: { Voice: 0 } },
        { $sort: { AllMessage: -1 } }
    ]).limit(10).exec(async(err, docs) => {
        if (err) return message.reply("bir hata ile karşılaşıldı.");
        let users = [],
            usersToEmbed = [];

        if (docs.length > 0) {
            for (let index = 0; index < docs.length; index++) {
                const doc = docs[index];
                let stat = doc;
                if (!stat) continue;

                if (stat.AllMessage <= 0) continue;

                if (stat.Message) {
                    let days = Object.keys(stat.Message);
                    let dataValues = new Array(day).fill(0);
                    days.forEach(_day => {
                        let sum = Object.values(stat.Message[_day]).reduce((x, y) => x + y, 0);
                        dataValues[_day - 1] = sum;
                    });
                    let user = (await Helper.GetUser(doc.Id));
                    usersToEmbed.push({
                        User: user,
                        Value: dataValues.reduce((x, y) => x + y, 0)
                    });
                    let borderColors = new Array(dataValues.length).fill(getColor(index, "0.8"));
                    let backgroundColors = new Array(dataValues.length).fill(getColor(index, "0.1"))
                    let pointBackgroundColors = new Array(dataValues.length).fill(getColor(index, "1"));
                    let data = {
                        label: `${user.username}`,
                        data: dataValues,
                        backgroundColor: backgroundColors,
                        borderColor: borderColors,
                        pointBackgroundColor: pointBackgroundColors,
                        borderWidth: 1.5,
                    };
                    users.push(data);
                }
            }

            let dataDate = [];
            for (let index = 0; index < day; index++) {
                let date = new Date(Date.now() - (1000 * 60 * 60 * 24 * (day - (index + 1))));
                dataDate.push(date.toTurkishFormatDate());
            }

            let buffer = await cm.ImageFromData({
                width: 600,
                height: 290,
                type: 'line',
                data: {
                    labels: [].concat(dataDate),
                    datasets: users
                },
                options: {
                    legend: {
                        labels: {
                            fontColor: '#ffffff',
                            fontSize: 20
                        }
                    }
                }
            });
            embed.addField(`İlk 10 Genel Mesaj İstatistiği`, usersToEmbed.map((val, index) => `\`${index + 1}.\` ${val.User}(${val.User.username}): \`${val.Value} mesaj\``).join("\n"))
            embed.setImage("attachment://Graph.png");
            let attachment = new MessageAttachment(buffer, "Graph.png");

            message.channel.csend({
                embeds: [embed],
                files: [attachment]
            });
        } else {
            embed.addField("VERI KAYDI YOK!", "** **");
            return message.csend(embed);
        }
    });
}

const colors = [
    'rgba(240, 255, 0, <f>)',
    'rgba(147, 255, 0, <f>)',
    'rgba(0, 255, 4, <f>)',
    'rgba(0, 255, 182, <f>)',
    'rgba(0, 240, 255, <f>)',
    'rgba(0, 124, 255, <f>)',
    'rgba(81, 0, 255, <f>)',
    'rgba(182, 0, 255, <f>)',
    'rgba(255, 0, 220, <f>)',
    'rgba(255, 0, 85, <f>)',
]

function getColor(index, x) {
    let color = colors[index].replace("<f>", x);
    return color;
}

module.exports.settings = {
    Commands: ["mesajsıralaması", "mesajsiralamasi"],
    Usage: "mesajsıralaması",
    Description: "Sunucudaki mesaj sıralamasına bakarsın.",
    Category: "istatistikler",
    Activity: true,
    cooldown: 30000
}

I think there is an common error between those codes, but I couldn't find anything that is similar.

Upvotes: 7

Views: 1158

Answers (1)

Ahmed Benn
Ahmed Benn

Reputation: 142

The color you're getting now is the default color the library has set rgba(0, 0, 0, 0.1), and this is because you're giving an array instead of a string or a canvas pattern/gradient object borderColor: [].concat(dataColors). General stats command line 97

For more info you can check here https://www.chartjs.org/docs/latest/general/colors.html

Upvotes: 1

Related Questions