0

Tengo un problema, y es que estoy mostrando datos dinámicos de un gráfico con Chart.js, los datos vienen de la base de datos, y con esos datos se va armando el gráfico, el problema es que me está arrojando un error la función "map", a nivel de "localhost" funciona y trae los datos de la base de datos de AWS RDS y los muestra sin problemas pero al subirlo a AWS, me arroja ese error.

Pensé que era por la IP, que no tenía habilitado para realizar consultas a la base con cualquier IP pero lo modifiqué y sigue el mismo error.

Estoy usando Lambda con Express como servidor "serverless", API GATEWAY y AWS RDS.

Este es mi código:

grafico.js

let url = new URL(document.location.href);
let urln = document.location.pathname;
let regTransform = urln.replace(/\/dev\/grafico\//, '');
const nombreIndice = regTransform;
        const ctx = document.querySelector('#chart').getContext('2d');
        const image = new Image();
        image.src = '/img/logo-invrtir-charts.svg';
        const plugin = {
            id: 'custom_canvas_background_image',
            beforeDraw: (chart) => {
                if (image.complete) {
                const ctx = chart.ctx;
                const {top, left, width, height} = chart.chartArea;
                const x = left + width / 2 - image.width / 2;
                const y = top + height / 2 - image.height / 2;
                ctx.drawImage(image, x, y);
                } else {
                image.onload = () => chart.draw();
                }
            }
        };

        function totalChart(ctx, extraerdatos){
            const chart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: extraerdatos.map(item => new Intl.DateTimeFormat('ex-EC', {
                        month: 'short',
                        day: 'numeric'
                    }).format(new Date(item.fecha))),
                    datasets: [{
                        label: 'Precio Real',
                        data: extraerdatos.map((item) => {
                            if(item.preop > 0){
                                return item.preop;
                            }
                        }),
                        borderColor: '#ff944c',
                        backgroundColor: '#ff944c',
                        radius: 0
                        //Agregar Puntos
                    }, {
                        label: 'Precio Actual', 
                        data: extraerdatos.map((item) => {
                            if(item.propost > 0){
                                return item.propost;
                            }
                        }),
                        borderColor: '#ff944c',
                        backgroundColor: '#ff944c',
                        borderDash: [2],
                        radius: 0
                        //Editar Line Style - Agregar Puntos
                    }, {
                        label: 'P1',
                        data: extraerdatos.map((item) => {
                            if(item.p1 > 0){
                                return item.p1;
                            }
                        }),
                        borderColor: '#70a5f5',
                        backgroundColor: '#70a5f5',
                        radius: 0
                    }, {
                        label: 'P2',
                        data: extraerdatos.map((item) => {
                            if(item.p2 > 0){
                                return item.p2;
                            }
                        }),
                        borderColor: 'violet',
                        backgroundColor: 'violet',
                        radius: 0
                    }, {
                        label: 'P3',
                        data: extraerdatos.map((item) => {
                            if(item.p3 > 0){
                                return item.p3;
                            }
                        }),
                        borderColor: 'violet',
                        backgroundColor: 'violet',
                        radius: 0
                    },{
                        label: 'P4',
                        data: extraerdatos.map((item) => {
                            if(item.p4 > 0){
                                return item.p4;
                            }
                        }),
                        borderColor: 'violet',
                        backgroundColor: 'violet',
                        radius: 0
                    },{
                        label: 'PM',
                        data: extraerdatos.map((item) => {
                            if(item.pm > 0){
                                return item.pm;
                            }
                        }),
                        borderColor: '#00aa00',
                        backgroundColor: '#00aa00',
                        radius: 0
                    }, {
                        label: 'PM2',
                        data: extraerdatos.map((item) => {
                            if(item.pm2 > 0){
                                return item.pm2;
                            }
                        }),
                        borderColor: '#00aa00',
                        backgroundColor: '#00aa00',
                        radius: 0
                    },{
                        label: 'SL',
                        data: extraerdatos.map((item) => {
                            if(item.sl > 0){
                                return item.sl;
                            }
                        }),
                        borderColor: '#ff4c4d',
                        backgroundColor: '#ff4c4d',
                        radius: 0
                    }]
                },
                plugins: [plugin],
                options: {
                    layout: {
                        padding: {
                            left: 0,
                            right: 0
                        },
                    },
                    interaction: {
                        mode: 'index',
                        intersect: false,
                    },
                    responsive: true,
                    maintainAspectRatio: false,
                    scales: {
                        x: {
                            grid: {
                                display: false
                            },
                            ticks: {
                                callback: function(val, index) {
                                    return index % 15 === 0 ? this.getLabelForValue(val) : '';
                                },
                                maxRotation: 0,

                            },
                        },
                        y: {
                            grid: {
                                display: false
                            },
                        },
                    },
                    elements: {
                        line: {
                            borderWidth: 3,
                            fill: false,
                        },
                        point: {
                            pointStyles: 'line'
                        }
                    },
                    plugins: {
                        title: {
                            display: false,
                            text: nombreIndice,
                            font: {
                                size: 15,
                            },
                            color: '#FFF',
                            padding: 30
                        },
                        legend: {
                            position: 'bottom',
                            labels: {
                                padding: 20,
                                boxWidth: 2,
                                boxHeight: 2,
                                color: '#797b86',
                                font: {
                                    family: 'system-ui',
                                    size: 7
                                },
                            }
                        },
                        tooltip: {
                            backgroundColor: '#0584f6',
                            titleFontSize: 20,
                            xPadding: 20,
                            yPadding: 20,
                            bodyFontSize: 15,
                            bodySpacing: 10,
                            mode: 'x'
                        },
                    }
                },
                
            });
            for (let i = 0; i < extraerdatos.length; i++) {
                var p3Var = extraerdatos[i].p3++;
            }
            for (let i = 0; i < extraerdatos.length; i++) {
                var p4Var = extraerdatos[i].p4++;
            }
            for (let i = 0; i < extraerdatos.length; i++) {
                var pm2Var = extraerdatos[i].pm2++;
            }
            if (p3Var===0 && p4Var===0 && pm2Var===0) {
                chart.data.datasets.splice(4, 2);
                chart.data.datasets.splice(5, 1);
            }else if (p3Var===0 && p4Var===0 && pm2Var!=0){
                chart.data.datasets.splice(4, 2);
            }else if (p3Var===0 && p4Var!=0 && pm2Var===0) {
                chart.data.datasets.splice(4, 1);
                chart.data.datasets.splice(6, 1);
            }else if (p3Var===0 && p4Var!=0 && pm2Var!=0) {
                chart.data.datasets.splice(4, 1);
            }else if (p3Var!=0 && p4Var===0 && pm2Var===0) {
                chart.data.datasets.splice(5, 1);
                chart.data.datasets.splice(6, 1);
            }else if (p3Var!=0 && p4Var===0 && pm2Var!=0) {
                chart.data.datasets.splice(5, 1);
            }else if (p3Var!=0 && p4Var!=0 && pm2Var===0) {
                chart.data.datasets.splice(7, 1);
            }
            chart.update();
            if (chart.legend.legendItems.length >= 0) {
                chart.legend.legendItems.splice(1, 1);
            }
        }
        async function renderizarCharts() {
            const respuesta = await fetch('/graficos/grafico/' + nombreIndice).then((res) => {
                return res.json();
            }).then((json) => {
                var extraerDatos = json;
                totalChart(ctx, extraerDatos);
            });
        }
        renderizarCharts();

graficos.js

const express = require('express');
const router = express.Router();

const pool = require('../database');

router.get('/grafico/:indice', async (req, res) => {
    const time = new Date();
    const day = time.getDate();
    time.setDate(day+15);
    const month = time.getMonth() + 1;
    const timeQuery = time.getFullYear() + '-' + month + '-' + time.getDate();
    const { indice } = req.params;
    const datos = await pool.query('SELECT * FROM datos WHERE indice = ? AND fecha <= ?', [indice, timeQuery]);
    const datosExtraidos = JSON.stringify(datos);
    res.send(datosExtraidos);
});

module.exports = router;

Y este es el error:

main.js?attr=6Bjd7U1eVWxRrCApX5Hu3iTa8nCD9p_YHwolliF3SB1Y6Q_XOSzZ_LjCvtFHdx1ZHT41qB5HIAD8rVEeux4VdtHQiwf-WRRkyLJ57KhMIYqYx2Kua64CEjO7U9zvIFqN:2671 GET https://oabb7m937k.execute-api.us-east-2.amazonaws.com/grafico/UNH.44361 403
fetchCallImpl @ main.js?attr=6Bjd7U1eVWxRrCApX5Hu3iTa8nCD9p_YHwolliF3SB1Y6Q_XOSzZ_LjCvtFHdx1ZHT41qB5HIAD8rVEeux4VdtHQiwf-WRRkyLJ57KhMIYqYx2Kua64CEjO7U9zvIFqN:2671
window.fetch @ main.js?attr=6Bjd7U1eVWxRrCApX5Hu3iTa8nCD9p_YHwolliF3SB1Y6Q_XOSzZ_LjCvtFHdx1ZHT41qB5HIAD8rVEeux4VdtHQiwf-WRRkyLJ57KhMIYqYx2Kua64CEjO7U9zvIFqN:2673
renderizarCharts @ grafico.js:237
(anonymous) @ grafico.js:244
grafico.js:27 Uncaught (in promise) TypeError: extraerdatos.map is not a function
    at totalChart (grafico.js:27)
    at grafico.js:241
    at async renderizarCharts (grafico.js:237)
totalChart @ grafico.js:27
(anonymous) @ grafico.js:241
async function (async)
renderizarCharts @ grafico.js:239
(anonymous) @ grafico.js:244
favicon.ico:1 GET https://oabb7m937k.execute-api.us-east-2.amazonaws.com/favicon.ico 403

Error función .map

1 respuesta 1

0

Ya conseguí la solución, era un problema con el endpoint.

Tenía que agregar "/dev/" al principio de las URL del código.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.