plotly / plotly/react-plotly.js

Ability to add div element next to chart

Offen
#110 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

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 would like to add a div element next to the bar chart I have implemented using react-plotly.js.
The div element would appear next to the chart when onClick event is fired on the chart. I haven't seen any such example or any documentation related to add external div element to the chart. Is it possible to link chart to the external div element ?
I did attempt to implement it by doing the following:

<Plot
                    data={this.prepData(timelineData)}
                    onClick={(data) => {
                        this.renderCustomPanel(data);
                      }
                    onHover={(hover) => this.getHoverInfo(hover)}
                    type={'bar'}
                    layout={layout}
                    style={{ width: '95%' }}
/> 

renderCustomPanel(e) {
        const panelInfo = timelineData.map(i => `<span className="panel-info">
        <span className="tooltip-value" style='font-size:15px;display:block'>${i.duration} days <br> Start time: ${moment.unix(i.startTime).format('MMM-DD-YYYY h:mm:ss')} <br> End time:${moment.unix(i.endTime).format('MMM-DD-YYYY h:mm:ss')}</span></span>`);
        return panelInfo;
    }

The onClick function does call the function but doesn't display the div element. I did try applying css styles to the element but nothing works.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Das Issue identifiziert nur eine react-plotly.js -Komponente mit onClick- und onHover-Handlern; keine Repository-Dateien oder Tests werden genannt. Zuerst sollte festgestellt werden, ob externe React-Elemente von der Komponente unterstützt werden, anschließend sollten die Dokumentation zur Ereignisbehandlung oder die Einstiegspunkte untersucht werden. Erledigt wäre die Aufgabe, wenn es eine klar dokumentierte oder implementierte Möglichkeit gäbe, das angeforderte Element nach einem Diagrammklick anzuzeigen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
data-visualization, frontend
Issue-Typ
Feature
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.