From 85a596ad0cb8897b7b5746652be6cce53b8602f7 Mon Sep 17 00:00:00 2001
From: Evgenii Elkin <7499112+EugeneElkin@users.noreply.github.com>
Date: Thu, 24 Dec 2020 16:52:18 +0300
Subject: [PATCH] Packages update + context menu support (#30)

---
 CHANGELOG.md      |  3 +++
 package-lock.json |  2 +-
 package.json      |  2 +-
 pbiviz.json       |  2 +-
 src/visual.ts     | 18 ++++++++++++++++++
 5 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b684b11..82a820b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## 2.0.7
+* Context menu support
+
 ## 2.0.6
 * API 3.4
 * Packages update
diff --git a/package-lock.json b/package-lock.json
index 675b14a..6f86e5e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "DualKpi",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 8c65129..fb61500 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "DualKpi",
   "displayName": "Dual KPI",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "Dual KPI efficiently visualizes two measures over time. It shows their trend based on a joint timeline, while absolute values may use different scales, for example Profit and Market share or Sales and Profit. Each KPI can be visualized as line chart or area chart. The visual has dynamic behavior and can show historical value and the change from the latest value when you hover over it. It also has small icons and labels to convey KPI definitions and alerts about data freshness. Customize colors, titles, axis properties, tooltips, and more, to create visually appealing and functional executive dashboards.",
   "author": {
     "name": "Microsoft",
diff --git a/pbiviz.json b/pbiviz.json
index 6d3bcb0..6850f14 100644
--- a/pbiviz.json
+++ b/pbiviz.json
@@ -4,7 +4,7 @@
     "displayName": "Dual KPI",
     "guid": "PBI_CV_3C80B1F2_09AF_4123_8E99_C3CBC46B23E0",
     "visualClassName": "DualKpi",
-    "version": "2.0.6",
+    "version": "2.0.7",
     "description": "Dual KPI efficiently visualizes two measures over time. It shows their trend based on a joint timeline, while absolute values may use different scales, for example Profit and Market share or Sales and Profit. Each KPI can be visualized as line chart or area chart. The visual has dynamic behavior and can show historical value and the change from the latest value when you hover over it. It also has small icons and labels to convey KPI definitions and alerts about data freshness. Customize colors, titles, axis properties, tooltips, and more, to create visually appealing and functional executive dashboards.",
     "supportUrl": "http://community.powerbi.com",
     "gitHubUrl": "https://github.com/Microsoft/powerbi-visuals-dualkpi"
diff --git a/src/visual.ts b/src/visual.ts
index 2a69fc4..42dac38 100644
--- a/src/visual.ts
+++ b/src/visual.ts
@@ -62,6 +62,7 @@ import ILocalizationManager = powerbi.extensibility.ILocalizationManager;
 import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
 import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
 import IColorPalette = powerbi.extensibility.IColorPalette;
+import ISelectionManager = powerbi.extensibility.ISelectionManager;
 
 import IValueFormatter = ValueFormatter.IValueFormatter;
 import valueFormatter = ValueFormatter;
@@ -235,6 +236,8 @@ export class DualKpi implements IVisual {
     private tooltipServiceWrapper: ITooltipServiceWrapper;
     private host: IVisualHost;
 
+    private selectionManager: ISelectionManager;
+
     constructor(options: VisualConstructorOptions) {
         if (window.location !== window.parent.location) {
             require("core-js/stable");
@@ -269,6 +272,21 @@ export class DualKpi implements IVisual {
                 rootElement: options.element,
                 handleTouchDelay: 0
             });
+
+
+        this.selectionManager = this.host.createSelectionManager();
+
+        const visualSelection = d3.select(this.target);
+        visualSelection.on("contextmenu", () => {
+            const mouseEvent: MouseEvent = d3.event as MouseEvent;
+            const eventTarget: EventTarget = mouseEvent.target;
+            let dataPoint: any = d3.select(<any>eventTarget).datum();
+            this.selectionManager.showContextMenu(dataPoint ? dataPoint.selectionId : {}, {
+                x: mouseEvent.clientX,
+                y: mouseEvent.clientY
+            });
+            mouseEvent.preventDefault();
+        });
     }
 
     private initMouseEvents(): void {