From a8c361aa81e0743a36fa715d70f0fff5c84aed1e Mon Sep 17 00:00:00 2001
From: Ryan Zhang <eneblue@163.com>
Date: Thu, 18 Apr 2024 16:52:00 +0800
Subject: [PATCH] =?UTF-8?q?fix(HotMap):=20=E4=BF=AE=E6=94=B9HotMap=20hover?=
 =?UTF-8?q?=E7=9A=84=E6=97=B6=E6=A0=B7=E5=BC=8F=20(#384)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Zhang Rui <zhangrui@growingio.com>
---
 src/hot-map/framework.ts | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/hot-map/framework.ts b/src/hot-map/framework.ts
index b4a138a..b09e955 100644
--- a/src/hot-map/framework.ts
+++ b/src/hot-map/framework.ts
@@ -1,4 +1,4 @@
-import { isEmpty } from 'lodash';
+import { get, isEmpty } from 'lodash';
 import { ChartConfig, ChartOptions, ChartType } from '../interfaces';
 import { BaseChart, fetchConfig, generateChart } from '../core/framework';
 import { getShapeConfig } from '../utils/tools/shapeConfig';
@@ -51,10 +51,9 @@ export class HotMap extends BaseChart {
         style: {
           fill: '#fff',
           fontSize: 14,
-          // shadowBlur: 2,
-          shadowColor: 'rgba(0, 0, 0)',
         },
         content:
+          shapeConfig?.label?.content ||
           shapeConfig?.content ||
           ((val) => {
             return `${formatPercent(val?.[zField] || 0)}`;
@@ -63,6 +62,21 @@ export class HotMap extends BaseChart {
       .style({
         lineWidth: 1,
         stroke: '#fff',
+      })
+      .state({
+        active: {
+          style: (style) => {
+            const currentColor = get(style, 'shape.cfg.attrs.fill');
+            return {
+              lineWidth: 1,
+              stroke: '#fff',
+              shadowColor: `${currentColor}10`,
+              shadowBlur: 5,
+              cursor: 'pointer',
+              fill: currentColor,
+            };
+          },
+        },
       });
 
     this.instance.interaction('element-active');