patternfly / patternfly/patternfly-react
getInteractiveLegendEvents onLegendClick not called with ChartBar in ChartStack + ChartAxis
Nessuno ha ancora preso questa issue.
- Lingua principale
- TypeScript
- Stelle
- 862
- Fork
- 392
- Merge medio
- 4g 8h
- PR unite (30g)
- 9
Descrizione
Description
getInteractiveLegendEvents's onLegendClick callback is never invoked when ChartBar components are wrapped in ChartStack (or ChartGroup) alongside ChartAxis. The same setup with ChartArea instead of ChartBar works correctly.
Steps to reproduce
- Create a
ChartwithChartAxis,ChartBarinside aChartStack, and aChartLegend - Pass
getInteractiveLegendEvents({ chartNames, legendName, onLegendClick })to Chart'seventsprop - Click a legend item
onLegendClickis never called
Minimal reproduction
<Chart
events={getInteractiveLegendEvents({
chartNames: [['bar-0'], ['bar-1'], ['bar-2']],
isHidden,
legendName: 'legend',
onLegendClick: handleLegendClick,
})}
legendComponent={<ChartLegend name="legend" data={legendData} />}
containerComponent={<ChartContainer />}
>
<ChartAxis />
<ChartAxis dependentAxis />
<ChartStack>
<ChartBar name="bar-0" data={data[0]} />
<ChartBar name="bar-1" data={data[1]} />
<ChartBar name="bar-2" data={data[2]} />
</ChartStack>
</Chart>
Full repro: https://github.com/sachaudh/pf-legend-click-repro
What works vs what doesn't
| Setup | onLegendClick fires? |
|---|---|
| ChartArea + ChartStack + ChartAxis | Yes |
| ChartBar + ChartAxis (no wrapper) | Yes |
| ChartBar + ChartStack (no ChartAxis) | Yes |
| ChartBar + ChartStack + ChartAxis | No |
| ChartBar + ChartGroup + ChartAxis | No |
All three ingredients are required to trigger the bug: ChartBar, a ChartStack/ChartGroup wrapper, and ChartAxis.
Workaround
Apply click events directly to ChartLegend's events prop instead of relying on Chart-level event dispatch:
const legendClickEvents = [
{ target: 'data', eventHandlers: { onClick: handleClick } },
{ target: 'labels', eventHandlers: { onClick: handleClick } },
];
<ChartLegend name="legend" data={legendData} events={legendClickEvents} />
Affected version
@patternfly/react-charts v8.4.1, Victory v37.3.6
Jira Issue: PF-3666
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Direzione di ricerca
Inizia con getInteractiveLegendEvents e con il percorso di distribuzione degli eventi di Chart utilizzato da ChartBar, ChartStack o ChartGroup e ChartAxis. Riproduci l'esempio minimo, confrontalo con i casi funzionanti di ChartArea e ChartBar non avvolto, quindi verifica che onLegendClick venga attivato per entrambi i tipi di wrapper quando ChartAxis è presente.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- react, typescript
- Ambito
- frontend
- Tipo di issue
- Bug
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Tranquilla
- Chiarezza
- Abbastanza chiara
- Idoneità per principianti
- 55/100