added alt+click behavior; added workaround for viewmode update (#165)

* added alt+click behavior; added workaround for viewmode update

* update json filters only on data update

* lint fix

* v2.2.1

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 2.2.1.0
+* json filters bug fix
+
+## 2.2.0.0
+* restored Alt + click selection behavior
+* fixed viewmode update with forced selection scenario
+
 ## 2.1.11.0
 * text tailoring disabled by default
 * added formatting setting for text tailoring

package.json

@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-chicletslicer",
-  "version": "2.1.11.0",
+  "version": "2.2.1.0",
   "author": {
     "name": "Microsoft",
     "email": "pbicvsupport@microsoft.com"

pbiviz.json

@@ -1,10 +1,10 @@
 {
   "visual": {
     "name": "chicletSlicer",
-    "displayName": "ChicletSlicer 2.1.11.0",
+    "displayName": "ChicletSlicer 2.2.1.0",
     "guid": "ChicletSlicer1448559807354",
     "visualClassName": "ChicletSlicer",
-    "version": "2.1.11.0",
+    "version": "2.2.1.0",
     "description": "Use this slicer to display image and/or text buttons that act as an in-canvas filter. Define additional properties for the layout & selection to customize this slicer to meet your specific needs",
     "supportUrl": "https://community.powerbi.com",
     "gitHubUrl": "https://github.com/Microsoft/PowerBI-visuals-ChicletSlicer"

src/chicletSlicer.ts

@@ -75,6 +75,7 @@ import VisualTooltipDataItem = powerbi.extensibility.VisualTooltipDataItem;
 
 import { ExternalLinksTelemetry } from "./telemetry";
 
+
 import IFilter = powerbi.IFilter;
 
 const enum ChicletBorderStyle {
@@ -155,6 +156,8 @@ export class ChicletSlicer implements IVisual {
     private telemetry: ExternalLinksTelemetry;
     private renderFiltered: (searchText: string) => void;
 
+
+
     constructor(options: VisualConstructorOptions) {
         this.root = d3Select(options.element);
         this.visualHost = options.host;
@@ -194,7 +197,10 @@ export class ChicletSlicer implements IVisual {
 
         this.resetScrollbarPosition = false;
 
-        this.jsonFilters = options.jsonFilters;
+        // reassign filters only when data update 
+        if (options.type & powerbi.VisualUpdateType.Data) {
+            this.jsonFilters = options.jsonFilters;
+        }
         if (this.jsonFilters && this.jsonFilters[0] && this.jsonFilters[0]?.target.length === 0) {
             this.resetScrollbarPosition = true;
         }
@@ -203,7 +209,7 @@ export class ChicletSlicer implements IVisual {
         // orientation bug fix (v2.1.9)
         const orientationValue = options.dataViews[0].metadata.objects?.general?.orientation;
         const hasNumericOrientation = !isNaN(orientationValue as any);
-        if (hasNumericOrientation){
+        if (hasNumericOrientation) {
             this.formattingSettings.generalCardSettings.orientation.value = ChicletSlicerSettingsModel.getOldOrientationSettings(orientationValue as number, this.localizationManager); // actual fix
         }
 
@@ -214,7 +220,7 @@ export class ChicletSlicer implements IVisual {
             this?.searchInput?.node()?.value,
             this.formattingSettings,
             this.visualHost,
-            options.jsonFilters);
+            this.jsonFilters);
 
         if (!slicerData) {
             this.clear();
@@ -577,8 +583,8 @@ export class ChicletSlicer implements IVisual {
                     ChicletSlicer.СhicletTotalInnerRightLeftPaddings -
                     ChicletSlicer.СellTotalInnerBorders -
                     settings.slicerTextCardSettings.outlineWeight.value;
-                return settings.slicerTextCardSettings.tailoring.value ? 
-                    textMeasurementService.getTailoredTextOrDefault(textProperties, maxWidth):
+                return settings.slicerTextCardSettings.tailoring.value ?
+                    textMeasurementService.getTailoredTextOrDefault(textProperties, maxWidth) :
                     textProperties.text;
             });
 

src/interfaces.ts

@@ -36,15 +36,15 @@ export interface ChicletSlicerData {
 
 export interface ChicletSlicerDataPoint {
     identity: any;
-    selected: boolean;
+    selected: boolean; // json filter
     category?: string;
     value?: number;
     mouseOver?: boolean;
     mouseOut?: boolean;
     isSelectAllDataPoint?: boolean;
     imageURL?: string;
     selectable?: boolean;
-    filtered?: boolean;
+    filtered?: boolean; // self filter
     id?: number;
     columnName?: any;
 }

src/webBehavior.ts

@@ -96,7 +96,7 @@ export class ChicletSlicerWebBehavior {
             }
         });
 
-        slicers.on("click", (event, dataPoint: ChicletSlicerDataPoint) => {
+        slicers.on("click", (event: MouseEvent, dataPoint: ChicletSlicerDataPoint) => {
             if (!dataPoint.selectable) {
                 return;
             }
@@ -109,7 +109,7 @@ export class ChicletSlicerWebBehavior {
 
             const selectedIndexes: number[] = this.dataPoints
                 .filter((dataPoint: ChicletSlicerDataPoint) => dataPoint.selected)
-                .map(dataPoint => dataPoint.id);
+                .map(dataPoint => dataPoint.id); // id guarantees correct order in category array
 
             if (settings.generalCardSettings.forcedSelection.value && selectedIndexes.length === 1) {
                 const availableDataPoints: ChicletSlicerDataPoint[] = this.dataPoints.map((dataPoint: ChicletSlicerDataPoint) => {
@@ -124,10 +124,38 @@ export class ChicletSlicerWebBehavior {
                 }
             }
 
-            if ((((<MouseEvent>event).ctrlKey || (<MouseEvent>event).metaKey)) || multiselect) {
-                this.handleSelection(dataPoint, true /* isMultiSelect */);
-            } else {
-                this.handleSelection(dataPoint, false /* isMultiSelect */);
+            // when holding alt
+            // selects all chiclets between last selected datapoint and current selected datapoint
+            // same as v1.6.3
+            if (event.altKey && multiselect) {
+                // selecting from last selected to current selected
+                let startIndex: number = selectedIndexes.length > 0
+                    ? (selectedIndexes[selectedIndexes.length - 1])
+                    : 0;
+                let endIndex = dataPoint.id;
+
+                // reverse selection
+                if (startIndex > endIndex) {
+                    [endIndex, startIndex] = [startIndex, endIndex];
+                }
+
+                for (const dp of this.dataPoints) {
+                    if (dp.id < startIndex || dp.id > endIndex) {
+                        dp.selected = false;
+                    }
+                    else {
+                        dp.selected = true;
+                    }
+                }
+
+                this.renderSelection();
+                this.saveSelection();
+
+            }
+            else {
+                // can select multiple chiclets at once
+                const multiselectEnabled = (<MouseEvent>event).ctrlKey || (<MouseEvent>event).metaKey || multiselect;
+                this.handleSelection(dataPoint, multiselectEnabled);
             }
         });
 
@@ -142,16 +170,17 @@ export class ChicletSlicerWebBehavior {
         });
 
         this.renderSelection();
-        this.forceSelection();
-    }
 
-    private forceSelection(): void {
-        if (!this.formattingSettings.generalCardSettings.forcedSelection.value) {
-            return;
+        // force selection
+        if (this.formattingSettings.generalCardSettings.forcedSelection.value) {
+            this.forceSelection();
         }
+    }
 
-        const isSelected: boolean = this.dataPoints.some((dataPoint: ChicletSlicerDataPoint) => dataPoint.selected);
-        if (!isSelected) {
+    private forceSelection(): void {
+        // checks if there is a datapoint that is already selected, selects first suitable otherwise
+        const selectedExists: boolean = this.dataPoints.some((dataPoint: ChicletSlicerDataPoint) => dataPoint.selected);
+        if (!selectedExists) {
             const dataPoint = this.dataPoints.find((dataPoint: ChicletSlicerDataPoint) => dataPoint.selectable && !dataPoint.filtered);
             if (dataPoint) {
                 dataPoint.selected = true;