patternfly / patternfly/patternfly-react

getInteractiveLegendEvents onLegendClick not called with ChartBar in ChartStack + ChartAxis

Abierto
#12,263 3 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Stale
Lenguaje dominante
TypeScript
Estrellas
862
Forks
392
Merge medio
4 d 8 h
PR fusionados (30 d)
9

Descripción

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
  1. Create a Chart with ChartAxis, ChartBar inside a ChartStack, and a ChartLegend
  2. Pass getInteractiveLegendEvents({ chartNames, legendName, onLegendClick }) to Chart's events prop
  3. Click a legend item
  4. onLegendClick is 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

Guía de contribución

Abrir la guía de contribución

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

Comienza con getInteractiveLegendEvents y la ruta de distribución de eventos de Chart utilizada por ChartBar, ChartStack o ChartGroup, y ChartAxis. Reproduce el ejemplo mínimo, compáralo con los casos funcionales de ChartArea y ChartBar sin envolver, y verifica después que onLegendClick se activa para ambos tipos de wrapper cuando ChartAxis está presente.

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

Evaluación

Stack tecnológico
react, typescript
Área
frontend
Tipo de issue
Error
Dificultad
3/5
Tiempo estimado
1-2 días
Estado de actividad
Tranquilo
Claridad
Bastante claro
Aptitud para principiantes
55/100

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.