Merge pull request #195 from VisActor/feat/highlight

feat: support highlight inverse select
VisActor · Dec 26, 2024 · 515f13f · 515f13f
2 parents db227eb + b485feb
commit 515f13f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/common/changes/@visactor/vstory-core/feat-highlight_2024-12-25-09-50.json b/common/changes/@visactor/vstory-core/feat-highlight_2024-12-25-09-50.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vstory-core",
+      "comment": "feat: support highlight inverse select",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vstory-core"
+}
diff --git a/packages/vstory-player/src/processor/chart/highlight.ts b/packages/vstory-player/src/processor/chart/highlight.ts
@@ -19,7 +19,7 @@ export class VChartHighlightActionProcessor extends VChartBaseActionProcessor {
     }
 
     const { payload } = actionSpec as IChartHighlightAction;
-    const { value, animation, style = {} } = payload as IChartHighlightPayload;
+    const { value, inverse, animation, style = {} } = payload as IChartHighlightPayload;
     const isDatumEqual = (inputValue: any, elementDatum: any) =>
       Object.keys(inputValue).every(key => inputValue[key] === elementDatum[key]);
     const channel = {};
@@ -42,7 +42,7 @@ export class VChartHighlightActionProcessor extends VChartBaseActionProcessor {
               },
               duration: animation?.duration ?? 0
             },
-            partitioner: datum => isDatumEqual(value, datum)
+            partitioner: datum => (inverse ? !isDatumEqual(value, datum) : isDatumEqual(value, datum))
           });
         }
       });

diff --git a/packages/vstory-player/src/processor/chart/interface.ts b/packages/vstory-player/src/processor/chart/interface.ts
@@ -54,6 +54,7 @@ export interface IChartUpdateAction extends IAction<IChartUpdatePayload> {
 /************ Highlight **************/
 export interface IChartHighlightPayload extends IActionPayload {
   value: Datum;
+  inverse?: boolean;
   id: string | number;
   style: {
     [key: string]: number | string;