plotly / plotly/react-plotly.js
Graphs do not render in PopOS React App
Dieses Issue hat noch niemand übernommen.
- Vorherrschende Sprache
- JavaScript
- Sterne
- 1.1k
- Forks
- 138
- Ø Merge
- 3 T. 2 Std.
- Gemergte PRs (30 T.)
- 4
Beschreibung
I am making a React app using Plotly connected to a flask backend. However, my graphs only display as white squares that when hovered over display the plotly toolbar.
This is a picture of what it looks like: here
When I use the command npm start, I get this message which might have something to do with it:
WARNING in ./node_modules/plotly.js/dist/plotly.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/home/david/Programming/Python-Projects/Investment-Hunter-Web/frontend/node_modules/plotly.js/dist/maplibre-gl-unminified.js.map' file: Error: ENOENT: no such file or directory, open '/home/david/Programming/Python-Projects/Investment-Hunter-Web/frontend/node_modules/plotly.js/dist/maplibre-gl-unminified.js.map'
Can anyone help me figure out why my plotly graphs are not displaying at all?
My code seems relatively straightforward as I hard coded the numbers to begin with just to get something going:
import React from 'react';
import Plot from 'react-plotly.js'
function Portfolio() {
const growthPortfolio = [{
values: [19, 26, 55],
labels: ['Residential', 'Non-Residential', 'Utility'],
type: 'pie',
hole: 0.4,
}]
const valuePortfolio = [{
values: [30, 40, 30],
labels: ['Residential', 'Non-Residential', 'Utility'],
type: 'pie',
hole: 0.4,
}]
const totalPortfolio = [{
values: [45, 35, 20],
labels: ['Residential', 'Non-Residential', 'Utility'],
type: 'pie',
hole: 0.4,
}]
return (
<div>
<Plot data={growthPortfolio} />
<Plot data={valuePortfolio} />
<Plot data={totalPortfolio}/>
</div>
);
}
export default Portfolio;
Beitragsleitfaden
Für dieses Repository ist kein Beitragsleitfaden indexiert
Erste Schritte
- Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
- Forke das Repository und arbeite in einem Branch.
- Öffne einen Pull Request, der die Issue-Nummer nennt.
Rechercherichtung
Beginne mit der React-Komponente, die die drei -Elemente enthält, und reproduziere die leeren Diagramme mit npm start auf der gemeldeten Pop!_OS-Konfiguration. Überprüfe die Browserausgabe und ermittle, ob die Source-Map-Warnung mit dem Rendering-Fehler zusammenhängt. Als abgeschlossen gilt, dass die fest codierten Kreisdiagramme sichtbar gerendert werden und die Ursache dokumentiert ist.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Bewertung
- Tech-Stack
- javascript, react
- Bereich
- data-visualization, frontend
- Issue-Typ
- Bug
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Aktivitätsstatus
- Veraltet
- Klarheit
- Muss geklärt werden
- Anfängerfreundlichkeit
- 30/100