v2.2.1 (#188)

* ChicletSlicer v2.1.9 (#155) (#156) * apply numeric orientation values (#158) * apply numeric orientation values * use localization manager * fix rework * audit fix * moved condition fix into update() * removed debugger statement * yet another audit fix * Dev (#161) * ChicletSlicer v2.1.9 (#155) * apply numeric orientation values (#158) * apply numeric orientation values * use localization manager * fix rework * audit fix * moved condition fix into update() * removed debugger statement * yet another audit fix --------- Co-authored-by: Nikita Grachev <v-grniki@microsoft.com> * V2.1.11 (#163) * apply numeric orientation values * use localization manager * fix rework * audit fix * moved condition fix into update() * removed debugger statement * yet another audit fix * bug fix build * version bump * disable tailoring function by default xd * update changelog * 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 --------- Co-authored-by: Nikita Grachev <v-grniki@microsoft.com> Co-authored-by: MulyukovAidar <v-aimulyukov@microsoft.com>
microsoft · Dec 9, 2024 · 078cd9c · 078cd9c
1 parent 2c971a5
commit 078cd9c
Show file tree

Hide file tree

Showing 10 changed files with 422 additions and 197 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,17 @@
+## 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
+
+## 2.1.10.0
+* Backward compatibility fix for orientation
+
 ## 2.1.0.0
 * Removed InteractivityUtils and SelectionManager
 * Added TupleFilter and jsonFilers

diff --git a/capabilities.json b/capabilities.json
@@ -217,6 +217,11 @@
                         "numeric": true
                     }
                 },
+                "tailoring": {
+                    "type": {
+                        "bool": true
+                    }  
+                },
                 "height": {
                     "type": {
                         "numeric": true

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "powerbi-visuals-chicletslicer",
-  "version": "2.1.9.0",
+  "version": "2.2.1.0",
   "author": {
     "name": "Microsoft",
     "email": "pbicvsupport@microsoft.com"
@@ -59,7 +59,7 @@
     "powerbi-visuals-api": "~5.4.0",
     "powerbi-visuals-utils-colorutils": "^6.0.1",
     "powerbi-visuals-utils-dataviewutils": "^6.0.1",
-    "powerbi-visuals-utils-formattingutils": "^6.0.1",
+    "powerbi-visuals-utils-formattingutils": "^6.1.0",
     "powerbi-visuals-utils-svgutils": "^6.0.1",
     "powerbi-visuals-utils-tooltiputils": "^6.0.1",
     "powerbi-visuals-utils-typeutils": "^6.0.1"

diff --git a/pbiviz.json b/pbiviz.json
@@ -1,10 +1,10 @@
 {
   "visual": {
     "name": "chicletSlicer",
-    "displayName": "ChicletSlicer 2.1.9.0",
+    "displayName": "ChicletSlicer 2.2.1.0",
     "guid": "ChicletSlicer1448559807354",
     "visualClassName": "ChicletSlicer",
-    "version": "2.1.9.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"

diff --git a/src/chicletSlicer.ts b/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,20 +197,30 @@ 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;
         }
-
         this.formattingSettings = this.formattingSettingsService.populateFormattingSettingsModel(ChicletSlicerSettingsModel, options.dataViews);
+
+        // orientation bug fix (v2.1.9)
+        const orientationValue = options.dataViews[0].metadata.objects?.general?.orientation;
+        const hasNumericOrientation = !isNaN(orientationValue as any);
+        if (hasNumericOrientation) {
+            this.formattingSettings.generalCardSettings.orientation.value = ChicletSlicerSettingsModel.getOldOrientationSettings(orientationValue as number, this.localizationManager); // actual fix
+        }
+
         this.formattingSettings.setLocalizedOptions(this.localizationManager);
 
         const slicerData: ChicletSlicerData = ChicletSlicer.converter(
             options.dataViews[0],
             this?.searchInput?.node()?.value,
             this.formattingSettings,
             this.visualHost,
-            options.jsonFilters);
+            this.jsonFilters);
 
         if (!slicerData) {
             this.clear();
@@ -570,7 +583,9 @@ export class ChicletSlicer implements IVisual {
                     ChicletSlicer.СhicletTotalInnerRightLeftPaddings -
                     ChicletSlicer.СellTotalInnerBorders -
                     settings.slicerTextCardSettings.outlineWeight.value;
-                return textMeasurementService.getTailoredTextOrDefault(textProperties, maxWidth);
+                return settings.slicerTextCardSettings.tailoring.value ?
+                    textMeasurementService.getTailoredTextOrDefault(textProperties, maxWidth) :
+                    textProperties.text;
             });
 
             rowSelection.style("padding", PixelConverter.toString(settings.slicerTextCardSettings.padding.value));

diff --git a/src/chicletSlicerSettingsModel.ts b/src/chicletSlicerSettingsModel.ts
@@ -8,18 +8,18 @@ import Model = formattingSettings.Model;
 
 import IEnumMember = powerbi.IEnumMember;
 
-const orientationOptions : IEnumMember[] = [
+const orientationOptions: IEnumMember[] = [
     { displayName: "Visual_Orientation_Horizontal", value: "Horizontal" },
     { displayName: "Visual_Orientation_Vertical", value: "Vertical" },
 ]
 
-const showDisabledOptions : IEnumMember[] = [
+const showDisabledOptions: IEnumMember[] = [
     { displayName: "Visual_ShowDisabled_Inplace", value: "Inplace" },
     { displayName: "Visual_ShowDisabled_Bottom", value: "Bottom" },
     { displayName: "Visual_ShowDisabled_Hide", value: "Hide" },
 ]
 
-const outlineOptions : IEnumMember[] = [
+const outlineOptions: IEnumMember[] = [
     { displayName: "formattingHeaderOutlineTypeNone", value: "None" },
     { displayName: "formattingHeaderOutlineTypeBottomOnly", value: "BottomOnly" },
     { displayName: "formattingHeaderOutlineTypeTopOnly", value: "TopOnly" },
@@ -28,7 +28,7 @@ const outlineOptions : IEnumMember[] = [
     { displayName: "formattingHeaderOutlineTypeFrame", value: "Frame" },
 ]
 
-const borderStyleOptions : IEnumMember[] = [
+const borderStyleOptions: IEnumMember[] = [
     { displayName: "Visual_OutlineStyle_Rounded", value: "Rounded" },
     { displayName: "Visual_OutlineStyle_Cut", value: "Cut" },
     { displayName: "Visual_OutlineStyle_Square", value: "Square" },
@@ -303,6 +303,13 @@ export class SlicerTextCardSettings extends Card {
         }
     });
 
+    tailoring = new formattingSettings.ToggleSwitch({
+        name: "tailoring",
+        displayNameKey: "Visual_Enable_Tailoring",
+        value: false,
+        topLevelToggle: false
+    })
+
     height = new formattingSettings.NumUpDown({
         name: "height",
         displayNameKey: "Visual_Height",
@@ -330,7 +337,7 @@ export class SlicerTextCardSettings extends Card {
     background = new formattingSettings.ColorPicker({
         name: "background",
         displayNameKey: "Visual_Background",
-        value: { value : null }
+        value: { value: null }
     });
 
     transparency = new formattingSettings.Slider({
@@ -369,7 +376,7 @@ export class SlicerTextCardSettings extends Card {
         displayNameKey: "Visual_OutlineColor",
         value: { value: "#000000" }
     });
-    
+
     outlineWeight = new formattingSettings.NumUpDown({
         name: "outlineWeight",
         displayNameKey: "Visual_OutlineWeight",
@@ -409,7 +416,7 @@ export class SlicerTextCardSettings extends Card {
 
     name: string = "rows";
     displayNameKey: string = "Visual_Chiclets";
-    slices = [this.textSize, this.height, this.width, this.background, this.transparency, this.selectedColor, this.hoverColor, 
+    slices = [this.textSize, this.tailoring, this.height, this.width, this.background, this.transparency, this.selectedColor, this.hoverColor, 
                 this.unselectedColor, this.disabledColor, this.outlineColor, this.outlineWeight, this.fontColor, this.padding, this.borderStyle]
 
     revertToDefaultDescriptors: [
@@ -557,7 +564,7 @@ export class TooltipsCardSettings extends Card {
 }
 
 export class SlicerItemContainer extends Card {
-    public marginTop: number = 5;
+    public marginTop: number = 0;
     public marginLeft: number = 0;
 }
 
@@ -569,11 +576,11 @@ export class Margin extends Card {
 }
 
 export class HeaderText extends Card {
-    public marginTop: number = 5;
+    public marginTop: number = 0;
     public marginLeft: number = 0;
 }
 
-export class ChicletSlicerSettingsModel extends Model { 
+export class ChicletSlicerSettingsModel extends Model {
     generalCardSettings = new GeneralCardSettings();
     headerCardSettings = new HeaderCardSettings();
     slicerTextCardSettings = new SlicerTextCardSettings();
@@ -582,15 +589,35 @@ export class ChicletSlicerSettingsModel extends Model {
     slicerItemContainer = new SlicerItemContainer();
     margin = new Margin();
     headerText = new HeaderText();
-    
+
     cards = [this.generalCardSettings, this.headerCardSettings, this.slicerTextCardSettings, this.imagesCardSettings, this.tooltipsCardSettings];
 
     setLocalizedOptions(localizationManager: ILocalizationManager) {
         this.setLocalizedDisplayName(borderStyleOptions, localizationManager);
         this.setLocalizedDisplayName(orientationOptions, localizationManager);
         this.setLocalizedDisplayName(outlineOptions, localizationManager);
         this.setLocalizedDisplayName(showDisabledOptions, localizationManager);
-    }   
+    }
+
+    public static getOldOrientationSettings(orientationValue: number, localizationManager?: ILocalizationManager): IEnumMember {
+        switch (orientationValue) {
+            case 1:
+                return {
+                    "displayName": localizationManager?.getDisplayName("Horizontal") || "Horizontal",
+                    "value": "Horizontal"
+                };
+            case 2:
+                return {
+                    "displayName": localizationManager?.getDisplayName("Vertical") || "Vertical",
+                    "value": "Vertical"
+                };
+            default: // Horizontal is default
+                return {
+                    "displayName": localizationManager?.getDisplayName("Horizontal") || "Horizontal",
+                    "value": "Horizontal"
+                };
+        }
+    }
 
     public setLocalizedDisplayName(options: IEnumMember[], localizationManager: ILocalizationManager) {
         options.forEach(option => {

diff --git a/src/interfaces.ts b/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;
 }

diff --git a/src/webBehavior.ts b/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;

diff --git a/stringResources/en-US/resources.resjson b/stringResources/en-US/resources.resjson
@@ -50,5 +50,6 @@
 	"Visual_Selection": "Selection",
 	"Visual_show": "Show",
 	"Visual_Description_Transparency": "Set transparency for background color",
-	"Visual_Tooltips": "Tooltips"
+	"Visual_Tooltips": "Tooltips",
+	"Visual_Enable_Tailoring": "Crop text"
 }