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