codeant-ai-for-open-source[bot] commented on code in PR #44147:
URL: https://github.com/apache/superset/pull/44147#discussion_r4073370542
##########
superset-frontend/plugins/plugin-chart-echarts/src/Pie/transformProps.ts:
##########
@@ -592,6 +602,10 @@ export default function transformProps(
legendOrientation,
showLegend,
theme,
+ false, // zoomable — Pie charts do not use the zoom control
+ undefined, // legendState — not tracked per-item in Pie
+ undefined, // padding — Pie passes width instead
+ width, // horizontalLegendWidth: truncate long category names in
Top/Bottom legends
Review Comment:
✅ **CodeAnt verified this suggestion was addressed in subsequent commits and
marked this thread resolved** as of `ec07afb`.
The horizontal legend width is now constrained by passing `Math.min(width,
250)` to `getLegendProps`, preventing each item from receiving the full chart
width.
<sub>If that's not right, unresolve this thread and CodeAnt will leave it
open.</sub>
<!-- codeant-auto-resolve-reply -->
##########
superset-frontend/plugins/plugin-chart-echarts/src/utils/series.ts:
##########
@@ -825,6 +834,51 @@ export function getLegendProps(
const getLegendWidth = (paddingWidth: number) =>
Math.max(paddingWidth - MARGIN_GUTTER, MIN_LEGEND_WIDTH);
+ /**
+ * Returns a legend tooltip config that:
+ * 1. Only appears when the label is actually truncated (name wider than
maxTextWidth)
+ * 2. Positions the tooltip ABOVE the legend item to avoid overlapping the
chart
+ */
+ const makeLegendTooltip = (maxTextWidth: number): any => ({
+ show: true,
+ confine: false, // allow tooltip to render above the canvas boundary
+ position: (
+ _pos: [number, number],
+ _params: unknown,
+ _el: unknown,
+ elRect: { x: number; y: number; width: number; height: number },
+ size: { contentSize: [number, number]; viewSize: [number, number] },
+ ) => {
+ const tooltipWidth = size.contentSize[0];
+ const tooltipHeight = size.contentSize[1];
+ // Center horizontally over the hovered legend item
+ const x = Math.min(
+ Math.max(elRect.x + elRect.width / 2 - tooltipWidth / 2, 0),
+ size.viewSize[0] - tooltipWidth,
+ );
+ // Place above the legend item; negative y appears above canvas with
confine:false
+ const y = elRect.y - tooltipHeight - 8;
+ return [x, y];
+ },
+ formatter: (params: { name: string }) => {
+ // Suppress tooltip when text fits — approx 7.5px per char at default
font size
+ const approxMaxChars = Math.floor(maxTextWidth / 7.5);
+ return params.name.length > approxMaxChars ? params.name : '';
+ },
Review Comment:
✅ **CodeAnt verified this suggestion was addressed in subsequent commits and
marked this thread resolved** as of `ec07afb`.
The legend tooltip formatter now wraps truncated category names with
`escape(params.name)` before returning them as HTML.
<sub>If that's not right, unresolve this thread and CodeAnt will leave it
open.</sub>
<!-- codeant-auto-resolve-reply -->
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
