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