diff --git a/packages/vgrammar/__tests__/glyph/boxplot.test.ts b/packages/vgrammar/__tests__/glyph/boxplot.test.ts index 29f4075ef..ec7b77757 100644 --- a/packages/vgrammar/__tests__/glyph/boxplot.test.ts +++ b/packages/vgrammar/__tests__/glyph/boxplot.test.ts @@ -82,7 +82,7 @@ test('barBoxplot encode', function () { }); test('boxplot animation', function () { - const element = createSimpleBoxplotElement(getGlyph('boxplot')); + const element = createSimpleBoxplotElement(getGlyph('boxplot'), { transformType: 'rect' }); element.updateData('key', [{ key: 0 }], 'key', {} as any); element.initGraphicItem(); element.encodeItems( @@ -149,7 +149,7 @@ test('boxplot animation', function () { }); test('barBoxplot animation', function () { - const element = createSimpleBoxplotElement(getGlyph('barBoxplot')); + const element = createSimpleBoxplotElement(getGlyph('barBoxplot'), { transformType: 'rect' }); element.updateData('key', [{ key: 0 }], 'key', {} as any); element.initGraphicItem(); element.encodeItems( diff --git a/packages/vgrammar/__tests__/glyph/link-path.test.ts b/packages/vgrammar/__tests__/glyph/link-path.test.ts index 00a93c4a7..46dcaa7c4 100644 --- a/packages/vgrammar/__tests__/glyph/link-path.test.ts +++ b/packages/vgrammar/__tests__/glyph/link-path.test.ts @@ -4,7 +4,7 @@ import { createSimpleBoxplotElement } from '../util'; registerLinkPathGlyph(); -test('line path encode', function () { +test('link path encode', function () { const element = createSimpleBoxplotElement(getGlyph('linkPath')); element.updateData('key', [{ key: 0 }], 'key', {} as any); element.initGraphicItem(); @@ -31,3 +31,44 @@ test('line path encode', function () { 'M10,137C61,137,61,141,111,141\n L111,160C61,160,61,156,10,156Z' ); }); + +test('add state to a link path', function () { + const element = createSimpleBoxplotElement(getGlyph('linkPath')); + element.updateData('key', [{ key: 0 }], 'key', {} as any); + element.initGraphicItem(); + element.encodeItems( + element.items, + { + enter: { + x0: 10, + x1: 111, + y0: 146, + y1: 150, + thickness: 19, + round: true, + fill: 'pink', + fillOpacity: 0.5 + } + } as any, + {} + ); + element.encodeGraphic(); + + expect(element.getGraphicAttribute('fill')).toBe('pink'); + expect(element.getGraphicAttribute('ratio')).toBeUndefined(); + expect(element.getGraphicAttribute('path', undefined, 'back')).toEqual(''); + expect(element.getGraphicAttribute('path', undefined, 'front')).toEqual( + 'M10,137C61,137,61,141,111,141\n L111,160C61,160,61,156,10,156Z' + ); + + element.addState('selected', { ratio: 0.5, fill: 'red' }); + expect(element.getGraphicAttribute('path', undefined, 'back')).toEqual( + 'M10,137C61,137,61,141,111,141\n L111,160C61,160,61,156,10,156Z' + ); + expect(element.getGraphicAttribute('path', undefined, 'front')).toEqual( + `M10,137C61,137,61,141,111,141 + L111,151C61,151,61,147,10,147Z` + ); + expect(element.getGraphicAttribute('fill')).toBe('red'); + expect(element.getGraphicAttribute('ratio')).toBe(0.5); +}); diff --git a/packages/vgrammar/__tests__/util.ts b/packages/vgrammar/__tests__/util.ts index 0471eb25d..831afd77f 100644 --- a/packages/vgrammar/__tests__/util.ts +++ b/packages/vgrammar/__tests__/util.ts @@ -70,7 +70,13 @@ export function createSimpleElement( return createElement(mark); } -export function createSimpleBoxplotElement(glyphMeta: IGlyphMeta) { +export function createSimpleBoxplotElement( + glyphMeta: IGlyphMeta, + options?: { + transformType?: string; + markSpec?: any; + } +) { const mark = { markType: 'glyph', isLargeMode: () => false, @@ -85,7 +91,7 @@ export function createSimpleBoxplotElement(glyphMeta: IGlyphMeta) { view: getMockedView(), isProgressive: () => false, getGlyphConfig: () => null as any, - getAttributeTransforms: () => transformsByType.rect + getAttributeTransforms: () => transformsByType[options?.transformType ?? 'glyph'] } as any; mark.addGraphicItem = () => { return (createGlyphGraphicItem as any)(mark, glyphMeta, {});