plotly / plotly/react-plotly.js

Ability to add div element next to chart

Abierto
#110 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Lenguaje dominante
JavaScript
Estrellas
1.1k
Forks
138
Merge medio
3 d 2 h
PR fusionados (30 d)
4

Descripción

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.

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Línea de trabajo

El issue solo identifica un componente de react-plotly.js con handlers onClick y onHover; no se mencionan archivos del repositorio ni tests. Primero hay que determinar si el componente admite elementos React externos y, después, inspeccionar su documentación sobre el manejo de eventos o sus puntos de entrada. Se consideraría completado cuando exista una forma claramente documentada o implementada de mostrar el elemento solicitado después de hacer clic en un gráfico.

Escrito por el modelo de indexación a partir del texto del issue.

Evaluación

Stack tecnológico
javascript, react
Área
data-visualization, frontend
Tipo de issue
Nueva funcionalidad
Dificultad
4/5
Tiempo estimado
3-5 días
Estado de actividad
Estancado
Claridad
Necesita aclaración
Aptitud para principiantes
25/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.