fix(geo): highlight choropleth (#5095)

__tests__/plots/interaction/index.ts

@@ -60,3 +60,4 @@ export { aaplLineSliderFilterTranspose } from './appl-line-slider-filter-transpo
 export { alphabetIntervalFunnelLegendFilter } from './alphabet-interval-funnel-legend-filter';
 export { penguinsPointBrushHandleStyle } from './penguins-point-brush-handle-style';
 export { penguinsPointBrushHandleCustom } from './penguins-point-brush-handle-custom';
+export { unemploymentChoropleth } from './unemployment-choropleth';

__tests__/plots/interaction/unemployment-choropleth.ts

@@ -0,0 +1,47 @@
+import { tsv } from 'd3-fetch';
+import { feature } from 'topojson';
+import { autoType } from 'd3-dsv';
+import { G2Spec, ELEMENT_CLASS_NAME } from '../../../src';
+import { step } from './utils';
+
+export async function unemploymentChoropleth(): Promise<G2Spec> {
+  const us = await fetch('data/us-10m.json').then((res) => res.json());
+  const unemployment = await tsv('data/unemployment.tsv', autoType);
+  const counties = feature(us, us.objects.counties).features;
+  return {
+    type: 'geoPath',
+    coordinate: { type: 'albersUsa' },
+    data: {
+      value: counties,
+      transform: [
+        {
+          type: 'join',
+          join: unemployment,
+          on: ['id', 'id'],
+          select: ['rate'],
+        },
+      ],
+    },
+    scale: {
+      color: {
+        unknown: '#fff',
+      },
+    },
+    state: {
+      active: { fill: 'red' },
+    },
+    encode: {
+      color: 'rate',
+    },
+    legend: { color: { layout: { justifyContent: 'center' } } },
+    interaction: { elementHighlight: true },
+  };
+}
+
+unemploymentChoropleth.steps = ({ canvas }) => {
+  const { document } = canvas;
+  const elements = document.getElementsByClassName(ELEMENT_CLASS_NAME);
+  const e = elements.find((d) => d.__data__.title === 6071);
+  console.log(e.__data__);
+  return [step(e, 'pointerover')];
+};

__tests__/unit/api/composition.spec.ts

@@ -314,7 +314,7 @@ describe('Composition', () => {
     expectToCreateMarks(node);
   });
 
-  it('GeoView() should specify options by API', () => {
+  it('GeoPath() should specify options by API', () => {
     const node = new GeoPath();
     node
       .attr('paddingBottom', 10)
@@ -327,6 +327,7 @@ describe('Composition', () => {
       .attr('marginTop', 30)
       .attr('marginRight', 40)
       .encode('x', 'a')
+      .state('active', { fill: 'red' })
       .scale('color', { type: 'linear' })
       .attr('key', 'composition')
       .style('plotFill', 'red')
@@ -352,6 +353,7 @@ describe('Composition', () => {
       theme: { defaultColor: 'red' },
       scale: { color: { type: 'linear' } },
       encode: { x: 'a' },
+      state: { active: { fill: 'red' } },
     });
     expectToCreateMarks(node);
   });

src/api/composition/geoPath.ts

@@ -15,6 +15,7 @@ export interface GeoPath extends Mark, Composition {
   scale: ObjectAttribute<GeoPathSpec['scale'], GeoPath>;
   encode: ObjectAttribute<GeoPathSpec['encode'], GeoPath>;
   legend: ObjectAttribute<GeoPathSpec['legend'], GeoPath>;
+  state: ObjectAttribute<GeoPathSpec['state'], GeoPath>;
 }
 
 @defineProps([
@@ -26,6 +27,7 @@ export interface GeoPath extends Mark, Composition {
   { type: 'object', name: 'scale' },
   { type: 'object', name: 'encode' },
   { type: 'object', name: 'legend' },
+  { type: 'object', name: 'state' },
   ...nodeProps(mark),
 ])
 export class GeoPath extends CompositionNode<GeoPathComposition> {

src/geo/geoPath.ts

@@ -8,7 +8,8 @@ export type GeoPathOptions = Omit<GeoPathComposition, 'type'>;
  */
 export const GeoPath: CC<GeoPathOptions> = () => {
   return (options) => {
-    const { type, data, scale, encode, style, animate, key, ...rest } = options;
+    const { type, data, scale, encode, style, animate, key, state, ...rest } =
+      options;
     return [
       {
         type: 'geoView',
@@ -24,6 +25,7 @@ export const GeoPath: CC<GeoPathOptions> = () => {
             encode,
             style,
             animate,
+            state,
           },
         ],
       },