Can't disable sunburst default animation
Ninguém assumiu esta issue ainda.
Avaliação
- Dificuldade
- 3/5
- Tempo estimado
- 1-2 dias
- Facilidade para iniciantes
- 35/100
- Tipo de issue
- Bug
- Clareza
- Razoavelmente clara
- Status de atividade
- Estagnada
- Stack de tecnologia
- javascript, nextjs, react
- Domínio
- data-visualization, frontend
Direção de pesquisa
Comece pelo tratamento de onSunburstClick do componente Plot e pelo comportamento de clique do sunburst do Plotly. Compare-o com o callback onClick funcional e identifique um teste de regressão focado em impedir o zoom padrão. Está concluído quando o callback puder suprimir o comportamento padrão do sunburst e ainda receber o evento.
Escrita pelo modelo de indexação a partir do texto da issue.
Descrição
Using NextJS 13, passing onSunburstClick={() => false} to the Plot component does not disable the default behaviour of clicking in a sunburst node and zooming in to that node.
The component I'm creating:
import {
Content,
ContextualHelp,
Flex,
Heading,
Slider,
} from '@adobe/react-spectrum';
import plotly, { Font, PlotData } from 'plotly.js';
import { useState } from 'react';
import createPlotComponent from 'react-plotly.js/factory';
const Plot = createPlotComponent(plotly);
interface SunburstPlotData extends Partial<PlotData> {
outsidetextfont?: Partial<Font>;
leaf?: { opacity?: number };
maxdepth?: number;
}
// NOTE: to access the taxon id:
// e.points[0].customdata
export default function TaxonSunburst() {
const [maxDepthValue, setMaxDepthValue] = useState<number>(3);
const data: SunburstPlotData[] = [
{
type: 'sunburst',
// NOTE: this is for the taxon names
labels: [
'Eve',
'Cain',
'Seth',
'Enos',
'Noam',
'Abel',
'Awan',
'Enoch',
'Azura',
],
// NOTE: this is going to be used for the taxids
customdata: [1, 2, 3, 4, 5, 6, 7, 8, 9],
// NOTE: parent of each taxon
parents: ['', 'Eve', 'Eve', 'Seth', 'Seth', 'Eve', 'Eve', 'Awan', 'Eve'],
// NOTE: paper counts per taxon
values: [10, 14, 12, 10, 2, 6, 6, 4, 4],
outsidetextfont: { size: 20, color: '#377eb8' },
leaf: { opacity: 0.4 },
marker: { line: { width: 2 } },
maxdepth: maxDepthValue,
},
];
return (
<Flex
direction="column"
alignItems="center"
marginY="size-200"
maxWidth="100%"
>
<Slider
label="Depth"
minValue={1}
maxValue={3}
value={maxDepthValue}
onChange={setMaxDepthValue}
isFilled
contextualHelp={
<ContextualHelp>
<Heading>What is depth?</Heading>
<Content>
Depth controls the maximum taxonomic level that is shown in the
plot.
</Content>
</ContextualHelp>
}
/>
<Plot
data={data}
style={{ width: '100%' }}
layout={{ autosize: true }}
useResizeHandler
onSunburstClick={() => false}
/>
</Flex>
);
}
In order for SSR to work properly, I'm loading the component like so (from my pages/index.tsx):
// ...
import dynamic from 'next/dynamic';
// ...
const TaxonSunburst = dynamic(import('../components/TaxonSunburst'), {
ssr: false,
loading: () => (
<Flex
justifyContent="center"
marginY="size-200"
>
<ProgressCircle
aria-label="Loading sunburst plot"
isIndeterminate
/>
</Flex>
),
});
The onClick event works properly. Also, modifying onSunburstClick with something like onSunburstClick={() => alert("test")} also works. I would like to disable the default behaviour of the sunburst plots.
- Linguagem predominante
- JavaScript
- Estrelas
- 1.1k
- Forks
- 138
- Merge médio
- 3d 2h
- PRs com merge (30d)
- 4
Guia de contribuição
Nenhum guia de contribuição indexado para este repositório
Primeiros passos
- Leia a issue inteira e depois o guia de contribuição do projeto.
- Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
- Faça um fork do repositório e trabalhe em uma branch.
- Abra um pull request que referencie o número da issue.
Mais de plotly/react-plotly.js
-
P3 plotly-internal size: 1 task
Dificuldade 3/5 1-2 dias Facilidade para iniciantes 45/100
plotly/react-plotly.js#386 ·
-
enhancement P3 size: 1
Dificuldade 3/5 1-2 dias Facilidade para iniciantes 65/100
plotly/react-plotly.js#380 · 7 comentários ·
-
Dificuldade 4/5 3-5 dias Facilidade para iniciantes 48/100
plotly/react-plotly.js#358 · 1 comentário ·
-
Dificuldade 4/5 3-5 dias Facilidade para iniciantes 35/100
plotly/react-plotly.js#354 ·
-
Dificuldade 3/5 1-2 dias Facilidade para iniciantes 30/100
plotly/react-plotly.js#353 · 1 comentário ·
Todas as issues de plotly/react-plotly.js
Issues semelhantes
-
bug
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 76/100
avniproject/avni-client#2135 ·
-
automated broken-link
Dificuldade 1/5 Menos de uma hora Facilidade para iniciantes 85/100
-
agent/security hive/hosted-available-lke648397-260827-5n31 security
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 84/100
-
enhancement
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 70/100
babalae/bettergi-scripts-list#3674 ·
-
A-Release-Notes C-Editing D-Modest S-Ready-For-Implementation
Dificuldade 2/5 1-3 horas Facilidade para iniciantes 72/100
bevyengine/bevy-website#2595 ·