Add OnObject functionality

capabilities.json

@@ -175,20 +175,40 @@
                         }
                     }
                 },
+                "maxWidth": {
+                    "displayName": "Maximum width",
+                    "displayNameKey": "Visual_MaxWidth",
+                    "type": {
+                        "numeric": true
+                    }
+                },
                 "fontSize": {
-                    "displayName": "Text Size",
-                    "displayNameKey": "Visual_TextSize",
                     "type": {
                         "formatting": {
                             "fontSize": true
                         }
                     }
                 },
-                "maxWidth": {
-                    "displayName": "Maximum width",
-                    "displayNameKey": "Visual_MaxWidth",
+                "fontFamily": {
                     "type": {
-                        "numeric": true
+                        "formatting": {
+                            "fontFamily": true
+                        }
+                    }
+                },
+                "fontBold": {
+                    "type": {
+                        "bool": true
+                    }
+                },
+                "fontItalic": {
+                    "type": {
+                        "bool": true
+                    }
+                },
+                "fontUnderline": {
+                    "type": {
+                        "bool": true
                     }
                 }
             }
@@ -456,6 +476,8 @@
     "privileges": [],
     "supportsHighlight": true,
     "supportsKeyboardFocus": true,
+    "supportsOnObjectFormatting": true,
+    "enablePointerEventsFormatMode": true,
     "sorting": {
         "default": {}
     },

package.json

@@ -82,9 +82,10 @@
     "moment": "^2.29.4",
     "playwright-chromium": "^1.41.1",
     "powerbi-models": "1.14.0",
-    "powerbi-visuals-api": "~5.7.0",
-    "powerbi-visuals-tools": "^5.4.0",
+    "powerbi-visuals-api": "shafeeqz/powerbi-visuals-api#dev/shafeeqazzam/api_5_8_0",
+    "powerbi-visuals-utils-onobjectformatting": "shafeeqz/powerbi-visuals-utils-onobjectformatting#dev/shafeeqazzam/add-onobject-formatting-utils",
     "powerbi-visuals-utils-testutils": "^6.0.3",
+    "powerbi-visuals-tools": "^5.4.0",
     "style-loader": "3.3.4",
     "ts-loader": "9.5.1",
     "ts-node": "10.9.2",

pbiviz.json

@@ -9,7 +9,7 @@
     "supportUrl": "https://community.powerbi.com",
     "gitHubUrl": "https://github.com/Microsoft/powerbi-visuals-bulletchart"
   },
-  "apiVersion": "5.7.0",
+  "apiVersion": "5.8.0",
   "author": {
     "name": "Microsoft",
     "email": "[email protected]"

src/BulletChartSettingsModel.ts

@@ -6,6 +6,23 @@ import {SimpleSlice} from "powerbi-visuals-utils-formattingmodel/lib/FormattingS
 import IEnumMember = powerbi.IEnumMember;
 import {BulletChartOrientation} from "./BulletChartOrientation";
 import ILocalizationManager = powerbi.extensibility.ILocalizationManager;
+import {BarRectType} from "./dataInterfaces";
+
+export const BulletChartObjectNames = {
+    Labels: { name: "labels", displayName: "Category labels" },
+    Axis: { name: "axis", displayName: "Axis" },
+    SyncAxis: { name: "syncAxis", displayName: "Sync axis" },
+    Orientation: { name: "orientation", displayName: "Orientation" },
+    Colors: { name: "colors", displayName: "Colors" },
+    // used for subselection
+    Minimum: { name: BarRectType.Minimum, displayName: "Minimum" },
+    NeedsImprovement: { name: BarRectType.NeedsImprovement, displayName: "Needs Improvement" },
+    Satisfactory: { name: BarRectType.Satisfactory, displayName: "Satisfactory" },
+    Good: { name: BarRectType.Good, displayName: "Good" },
+    VeryGood: { name: BarRectType.VeryGood, displayName: "Very good" },
+    Bullet: { name: BarRectType.Bullet, displayName: "Bullet" },
+} as const;
+
 
 class TextSizeDefaults {
     public static readonly DefaultSize = 11;
@@ -20,6 +37,41 @@ const orientationOptions: IEnumMember[] = [
     { value: BulletChartOrientation.VerticalBottom, displayName: "Visual_Orientation_VerticalBottom" },
 ];
 
+
+class BaseFontCardSettings extends Card {
+    font = new formattingSettings.FontControl({
+        name: "font",
+        displayName: "Font",
+        displayNameKey: "Visual_Font",
+        fontSize: new formattingSettings.NumUpDown({
+            name: "fontSize",
+            displayName: "Text Size",
+            displayNameKey: "Visual_TextSize",
+            value: TextSizeDefaults.DefaultSize,
+            options: {
+                minValue: { value: TextSizeDefaults.MinSize, type: powerbi.visuals.ValidatorType.Min },
+                maxValue: { value: TextSizeDefaults.MaxSize, type: powerbi.visuals.ValidatorType.Max },
+            }
+        }),
+        fontFamily: new formattingSettings.FontPicker({
+            name: "fontFamily",
+            value: "Arial, sans-serif",
+        }),
+        bold: new formattingSettings.ToggleSwitch({
+            name: "fontBold",
+            value: false,
+        }),
+        italic: new formattingSettings.ToggleSwitch({
+            name: "fontItalic",
+            value: false,
+        }),
+        underline: new formattingSettings.ToggleSwitch({
+            name: "fontUnderline",
+            value: false,
+        }),
+    });
+}
+
 class DataValuesCard extends Card {
     targetValue = new formattingSettings.NumUpDown({
         name: "targetValue",
@@ -124,7 +176,7 @@ class TooltipsCard extends Card {
     slices = [this.valueCustomName, this.targetCustomName, this.target2CustomName];
 }
 
-class LabelsCard extends Card {
+class LabelsCard extends BaseFontCardSettings {
     show: SimpleSlice<boolean> = new formattingSettings.ToggleSwitch({
         name: "show",
         displayName: "Show",
@@ -143,28 +195,17 @@ class LabelsCard extends Card {
         value: { value: "#000000" }
     });
 
-    fontSize = new formattingSettings.NumUpDown({
-        name: "fontSize",
-        displayName: "Text size",
-        displayNameKey: "Visual_TextSize",
-        value: TextSizeDefaults.DefaultSize,
-        options: {
-            minValue: { value: TextSizeDefaults.MinSize, type: powerbi.visuals.ValidatorType.Min },
-            maxValue: { value: TextSizeDefaults.MaxSize, type: powerbi.visuals.ValidatorType.Max },
-        }
-    });
-
     maxWidth = new formattingSettings.NumUpDown({
         name: "maxWidth",
         displayName: "Maximum width",
         displayNameKey: "Visual_MaxWidth",
         value: 80,
     });
 
-    name: string = "labels";
-    displayName: string = "Category labels";
+    name: string = BulletChartObjectNames.Labels.name;
+    displayName: string = BulletChartObjectNames.Labels.displayName
     displayNameKey: string = "Visual_CategoryLabels";
-    slices = [this.labelColor, this.fontSize, this.maxWidth];
+    slices = [this.font, this.labelColor, this.maxWidth];
 }
 
 class OrientationCard extends Card {
@@ -176,8 +217,8 @@ class OrientationCard extends Card {
         value: orientationOptions[0],
     });
 
-    name: string = "orientation";
-    displayName: string = "Orientation";
+    name: string = BulletChartObjectNames.Orientation.name;
+    displayName: string = BulletChartObjectNames.Orientation.displayName;
     displayNameKey: string = "Visual_Orientation";
     slices = [this.orientation];
 }
@@ -225,8 +266,8 @@ class ColorsCard extends Card {
         value: { value: "#000000" }
     });
 
-    name: string = "colors";
-    displayName: string = "Colors";
+    name: string = BulletChartObjectNames.Colors.name;
+    displayName: string = BulletChartObjectNames.Colors.displayName;
     displayNameKey: string = "Visual_Colors";
     slices = [
         this.minColor,
@@ -270,8 +311,8 @@ class AxisCard extends Card {
         value: { value: "#808080" },
     });
 
-    name: string = "axis";
-    displayName: string = "Axis";
+    name: string = BulletChartObjectNames.Axis.name;
+    displayName: string = BulletChartObjectNames.Axis.displayName;
     displayNameKey: string =  "Visual_Axis";
     slices = [this.axisColor, this.measureUnits, this.unitsColor];
 }
@@ -293,8 +334,8 @@ class SyncAxis extends Card {
         value: false,
     });
 
-    name: string = "syncAxis";
-    displayName: string = "Sync axis";
+    name: string = BulletChartObjectNames.SyncAxis.name;
+    displayName: string = BulletChartObjectNames.SyncAxis.displayName;
     displayNameKey: string = "Visual_AxisSync";
     slices = [this.showMainAxis];
 }

src/dataInterfaces.ts

@@ -60,6 +60,16 @@ export interface BarData {
     key: string;
 }
 
+export enum BarRectType {
+    Minimum = "Minimum",
+    NeedsImprovement = "NeedsImprovement",
+    Satisfactory = "Satisfactory",
+    Good = "Good",
+    VeryGood = "VeryGood",
+    Bullet = "Bullet",
+}
+
+
 export interface BarRect extends SelectableDataPoint {
     barIndex: number;
     start: number;
@@ -70,6 +80,7 @@ export interface BarRect extends SelectableDataPoint {
     tooltipInfo?: VisualTooltipDataItem[];
     key: string;
     highlight?: boolean;
+    type: BarRectType;
 }
 
 export interface TargetValue {
@@ -103,4 +114,4 @@ export interface BulletChartTooltipItem {
     value: any;
     metadata?: DataViewValueColumn;
     customName: string;
-}
+}