plotly / plotly/react-plotly.js

Ability to add div element next to chart

Aberta
#110 0 comentários 0 reações 0 responsáveis Ver no GitHub

Ninguém assumiu esta issue ainda.

Linguagem predominante
JavaScript
Estrelas
1.1k
Forks
138
Merge médio
3d 2h
PRs com merge (30d)
4

Descrição

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.

Guia de contribuição

Nenhum guia de contribuição indexado para este repositório

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Direção de pesquisa

A issue identifica apenas um componente do react-plotly.js com handlers onClick e onHover; nenhum arquivo do repositório ou teste é mencionado. Primeiro, determine se elementos React externos são compatíveis com o componente e, em seguida, inspecione a documentação de tratamento de eventos ou os entry points. O trabalho estará concluído quando houver uma forma claramente documentada ou implementada de exibir o elemento solicitado após um clique no gráfico.

Escrita pelo modelo de indexação a partir do texto da issue.

Avaliação

Stack de tecnologia
javascript, react
Domínio
data-visualization, frontend
Tipo de issue
Funcionalidade
Dificuldade
4/5
Tempo estimado
3-5 dias
Status de atividade
Estagnada
Clareza
Precisa de esclarecimento
Facilidade para iniciantes
25/100

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.