fix: poptip render (#360)

Author: lxfu1

src/ui/legend/category/item.ts

@@ -103,7 +103,10 @@ function styleOfMarker(group: Group): BaseStyleProps {
 }
 
 export class CategoryItem extends Component<CategoryItemStyleProps> {
-  constructor(options: CategoryItemOptions) {
+  // Key fields, used to pass extra info like id, index for poptip rendering
+  public keyFields: object = {};
+
+  constructor(options: CategoryItemOptions, keyFields?: Omit<CategoryItemOptions, 'style'>) {
     super(options, {
       span: [1, 1],
       marker: () => new Circle({ style: { r: 6 } }),
@@ -115,6 +118,7 @@ export class CategoryItem extends Component<CategoryItemStyleProps> {
       labelTextBaseline: 'middle',
       valueTextBaseline: 'middle',
     });
+    this.keyFields = keyFields || {};
   }
 
   private poptipGroup!: Poptip;
@@ -313,7 +317,7 @@ export class CategoryItem extends Component<CategoryItemStyleProps> {
       const label = typeof labelText === 'string' ? labelText : (labelText as DisplayObject)?.attr('text');
       const value = typeof valueText === 'string' ? valueText : (valueText as DisplayObject)?.attr('text');
       if (typeof poptip.render === 'function') {
-        return { html: poptip.render({ label, value, color: markerFill as string }) };
+        return { html: poptip.render({ ...this.keyFields, label, value, color: markerFill as string }) };
       }
       let html = '';
       if (typeof label === 'string' || typeof label === 'number') {

src/ui/legend/category/items.ts

@@ -34,7 +34,12 @@ type CallableItemStyle = CallableStyleProps<
 >;
 
 export type PoptipRender = {
-  render?: (params: { label: string | number; value: string | number; color?: string }) => string;
+  render?: (params: {
+    label: string | number;
+    value: string | number;
+    color?: string;
+    [key: string]: unknown;
+  }) => string;
 };
 
 export type CategoryItemsStyleProps = GroupStyleProps &
@@ -264,7 +269,7 @@ export class CategoryItems extends Component<CategoryItemsStyleProps> {
       .join(
         (enter) =>
           enter
-            .append(({ style }) => new CategoryItem({ style }))
+            .append(({ style, ...rest }) => new CategoryItem({ style }, rest))
             .attr('className', itemClassName)
             .on('click', function () {
               click?.(this);