patternfly / patternfly/patternfly-react
getInteractiveLegendEvents onLegendClick not called with ChartBar in ChartStack + ChartAxis
还没有人认领这个 Issue。
- 主要语言
- TypeScript
- 星标
- 862
- 派生
- 392
- 平均合并
- 4 天 8 小时
- 30 天内合并 PR
- 9
描述
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
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
调研方向
从 getInteractiveLegendEvents 以及 ChartBar、ChartStack 或 ChartGroup 和 ChartAxis 使用的 Chart 事件分发路径开始。复现最小示例,将其与正常工作的 ChartArea 和未包装的 ChartBar 案例进行比较,然后验证在存在 ChartAxis 时,onLegendClick 是否会对两种 wrapper 类型都触发。
由索引模型根据 Issue 内容生成。
评估
- 技术栈
- react, typescript
- 领域
- frontend
- Issue 类型
- 缺陷
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 活跃度
- 冷清
- 描述清晰度
- 基本清楚
- 新手友好度
- 55/100