Soy nuevo en Plotly y estoy tratando de hacer un PoC muy simple para actualizar un gráfico en tiempo real basado en eventos de SignalR (WebSocket).
Tengo lo siguiente en un Pen que funciona bien:
var data = [ { x: ['giraffes', 'orangutans', 'monkeys'], y: [20, 14, 23], type: 'bar' } ]; Plotly.newPlot('myDiv', data); setTimeout(() => { const newData = "\"1,2,3\""; // data is received like this in SignalR const data = newData.replace(/"/g,""); const result = [data.split(',')]; Plotly.restyle('myDiv', 'y', result); }, 2000);Ahora estoy intentando que funcione en un contexto Vue+SignalR:
const plotData = [ { x: ['giraffes', 'orangutans', 'monkeys'], y: [1, 1, 1], type: 'bar' } ]; Plotly.react('testplot', plotData); const app = new Vue({ el: '#app', data: data, methods: { ... } ); //... const connection = new signalR.HubConnectionBuilder() .withUrl(apiBaseUrl + '/api', { accessTokenFactory: () => { return generateAccessToken(data.username) } }) .configureLogging(signalR.LogLevel.Information) .build(); connection.on('newMessage', onNewMessage); //... function onNewMessage(message) { const data = message.Text.replace(/"/g, ""); const result = [data.split(',')]; Plotly.restyle('testplot', 'y', result); --> error here }; El result que estoy pasando para restyle es el mismo que en el Pen, [['1', '2', '3']] .
El error arrojado es:
Uncaught TypeError: Cannot read properties of undefined (reading 'map') at Object.r.coerceTraceIndices (plotly-2.4.2.min.js:58) at Object.D [as restyle] (plotly-2.4.2.min.js:58) at HubConnection.onNewMessage (index:207) at HubConnection.ts:367 at Array.forEach (<anonymous>) at HubConnection.invokeClientMethod (HubConnection.ts:367) at HubConnection.processIncomingData (HubConnection.ts:297) at WebSocketTransport.HubConnection.connection.onreceive (HubConnection.ts:54) at WebSocket.webSocket.onmessage (WebSocketTransport.ts:56) No puedo encontrar nada en línea que me diga qué podría causar el error. Estoy usando plotly-2.4.2.min.js en ambos casos y he probado otras versiones con el mismo resultado. El error proviene de que HTMLElement pierde su atributo de data por algún motivo.
Parece que algo sucede con Vue (con el que no estoy familiarizado) que elimina la propiedad .data de HTMLElement. Probé con este código:
var testPlotElemenet = document.getElementById('testplot'); if (testPlotElemenet.data) { Plotly.restyle(testPlotElemenet, 'y', result); } else { var testData = [ { x: ['giraffes', 'orangutans', 'monkeys'], y: [20, 14, 23], type: 'bar' } ]; Plotly.react(testPlotElemenet, testData); Plotly.restyle(testPlotElemenet, 'y', result); } Y la primera vez necesita recrear la trama, pero los siguientes mensajes funcionan y la propiedad .data tiene los valores esperados.
Al final, dado que no necesito Vue (estaba allí de un ejemplo de Microsoft que estaba usando), eliminé todo el código relacionado con Vue y el código funciona bien como en CodePen.