Skip to content

feat: legend 支持 render 配置 #7153

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Nov 5, 2025
Merged

feat: legend 支持 render 配置 #7153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
2aa1d8e
feat: legend 支持自定义 render 渲染
Oct 10, 2025
b16a75e
feat: auto change html legend style
moayuisuda Oct 12, 2025
f5cf34d
test: add render legend snapshots
Oct 13, 2025
4e774b7
feat: render legend change bind attr
Oct 16, 2025
5c43a00
fix: merge v5 and fix conflicts
Oct 16, 2025
a9bb52f
fix: ci test fail
Oct 17, 2025
34b861a
feat: legend-value event bind to container
Nov 5, 2025
1ff5490
feat: move HTMLLegend component
Nov 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1,568 changes: 1,568 additions & 0 deletions __tests__/integration/snapshots/static/alphaBeeswarmShape.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1,568 changes: 1,568 additions & 0 deletions __tests__/integration/snapshots/static/alphaBeeswarmTranspose.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
24 changes: 24 additions & 0 deletions __tests__/integration/snapshots/tooltip/interval-tooltip-render/step0.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<foreignObject xmlns="http://www.w3.org/2000/svg" width="608" height="23" x="16" y="16" class="legend-category-html" style="pointer-events: auto;">
<div xmlns="http://www.w3.org/1999/xhtml">
<div style="display: flex; gap: 10px; padding: 10px; background: rgb(245, 245, 245); border-radius: 4px;">
<div class="legend-item-inactive" legend-value="Type 1" style="display: flex; align-items: center; gap: 5px; cursor: pointer; opacity: 0.4;">
<div style="width: 12px; height: 12px; background-color: rgb(23, 131, 255); border-radius: 2px;"/>
<span style="font-size: 12px; color: rgb(51, 51, 51);">
Type 1
</span>
</div>
<div legend-value="Type 2" style="display: flex; align-items: center; gap: 5px; cursor: pointer; opacity: 1;">
<div style="width: 12px; height: 12px; background-color: rgb(0, 201, 201); border-radius: 2px;"/>
<span style="font-size: 12px; color: rgb(51, 51, 51);">
Type 2
</span>
</div>
<div legend-value="Type 3" style="display: flex; align-items: center; gap: 5px; cursor: pointer; opacity: 1;">
<div style="width: 12px; height: 12px; background-color: rgb(240, 136, 77); border-radius: 2px;"/>
<span style="font-size: 12px; color: rgb(51, 51, 51);">
Type 3
</span>
</div>
</div>
</div>
</foreignObject>
24 changes: 24 additions & 0 deletions __tests__/integration/snapshots/tooltip/interval-tooltip-render/step1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
<foreignObject xmlns="http://www.w3.org/2000/svg" width="608" height="23" x="16" y="16" class="legend-category-html" style="pointer-events: auto;">
<div xmlns="http://www.w3.org/1999/xhtml">
<div style="display: flex; gap: 10px; padding: 10px; background: rgb(245, 245, 245); border-radius: 4px;">
<div class="" legend-value="Type 1" style="display: flex; align-items: center; gap: 5px; cursor: pointer; opacity: 1;">
<div style="width: 12px; height: 12px; background-color: rgb(23, 131, 255); border-radius: 2px;"/>
<span style="font-size: 12px; color: rgb(51, 51, 51);">
Type 1
</span>
</div>
<div legend-value="Type 2" style="display: flex; align-items: center; gap: 5px; cursor: pointer; opacity: 1;">
<div style="width: 12px; height: 12px; background-color: rgb(0, 201, 201); border-radius: 2px;"/>
<span style="font-size: 12px; color: rgb(51, 51, 51);">
Type 2
</span>
</div>
<div legend-value="Type 3" style="display: flex; align-items: center; gap: 5px; cursor: pointer; opacity: 1;">
<div style="width: 12px; height: 12px; background-color: rgb(240, 136, 77); border-radius: 2px;"/>
<span style="font-size: 12px; color: rgb(51, 51, 51);">
Type 3
</span>
</div>
</div>
</div>
</foreignObject>
1 change: 1 addition & 0 deletions __tests__/plots/tooltip/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export { weatherLineInterval } from './weather-line-interval';
export { alphabetInterval1dMounted } from './alphabet-interval-1d-mounted';
export { indicesLineItems } from './indices-line-items';
export { flareTreemapPoptip } from './flare-treemap-poptip';
export { intervalTooltipRender } from './interval-tooltip-render';
export { flareTreemapPoptipCustom } from './flare-treemap-poptip-custom';
export { morleyBoxChannel } from './morley-box-channel';
export { alphabetIntervalMultiField } from './alphabet-interval-multi-field';
Expand Down
84 changes: 84 additions & 0 deletions __tests__/plots/tooltip/interval-tooltip-render.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import { G2Spec } from '../../../src';

export function intervalTooltipRender(): G2Spec {
return {
type: 'point',
height: 300,
data: [
{ name: 'A', value: 10, category: 'Type 1' },
{ name: 'B', value: 20, category: 'Type 2' },
{ name: 'C', value: 15, category: 'Type 1' },
{ name: 'D', value: 25, category: 'Type 3' },
],
encode: {
x: 'name',
y: 'value',
color: 'category',
},
legend: {
color: {
render: (
items: Array<{ id: string; label: string; color: string }>,
) => {
const container = document.createElement('div');
container.style.cssText =
'display: flex; gap: 10px; padding: 10px; background: #f5f5f5; border-radius: 4px;';

items.forEach(
(item: { id: string; label: string; color: string }) => {
const itemEl = document.createElement('div');
itemEl.style.cssText =
'display: flex; align-items: center; gap: 5px; cursor: pointer;';
itemEl.setAttribute('legend-value', item.id);

const colorBox = document.createElement('div');
colorBox.style.cssText = `width: 12px; height: 12px; background-color: ${item.color}; border-radius: 2px;`;

const label = document.createElement('span');
label.textContent = item.label;
label.style.cssText = 'font-size: 12px; color: #333;';

itemEl.appendChild(colorBox);
itemEl.appendChild(label);
container.appendChild(itemEl);
},
);

return container;
},
},
},
};
}

intervalTooltipRender.className = 'legend-category-html';

intervalTooltipRender.steps = ({ canvas }) => {
const { document } = canvas;
const legend = document
.getElementsByClassName('legend-category-html')[0]

Check failure on line 59 in __tests__/plots/tooltip/interval-tooltip-render.ts

View workflow job for this annotation

GitHub Actions / build

__tests__/integration/spec-tooltip.spec.ts > Tooltips > [Tooltip]: intervalTooltipRender 

TypeError: Cannot read properties of undefined (reading 'attributes')
 ❯ intervalTooltipRender.steps __tests__/plots/tooltip/interval-tooltip-render.ts:59:54
 ❯ __tests__/integration/spec-tooltip.spec.ts:34:23
.attributes.innerHTML.querySelector('[legend-value]');

return [
{
changeState: async () => {
legend?.dispatchEvent(
new CustomEvent('click', {
offsetX: 5,
offsetY: 5,
}),
);
},
},
{
changeState: async () => {
legend?.dispatchEvent(
new CustomEvent('click', {
offsetX: 5,
offsetY: 5,
}),
);
},
},
];
};
9 changes: 9 additions & 0 deletions src/component/legendCategory.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import type { DisplayObject } from '@antv/g';
import { HTML } from '@antv/g';
import { Category } from '@antv/component';
import { last } from '@antv/util';
import { format } from '@antv/vendor/d3-format';
Expand Down Expand Up @@ -240,6 +241,7 @@ export const LegendCategory: GCC<LegendCategoryOptions> = (options) => {
title,
cols,
itemMarker,
render,
...style
} = options;

Expand Down Expand Up @@ -272,6 +274,13 @@ export const LegendCategory: GCC<LegendCategoryOptions> = (options) => {
Object.assign({}, legendTheme, filterEmptyIds(legendStyle), style),
);

// If render is provided, use HTML to render.
if (render) {
return new Category({
style: { ...categoryStyle, x: bbox.x, y: bbox.y, render },
});
}

const layoutWrapper = new LegendCategoryLayout({
style: {
x: bbox.x,
Expand Down
Loading
Loading