Added support for conditional formatting

DanielSzentimrey-Harrach · May 8, 2024 · cbda28f · cbda28f
1 parent a871d24
commit cbda28f
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
     "@types/d3": "7.4.0",
     "d3": "7.8.5",
     "powerbi-visuals-api": "~5.3.0",
+    "powerbi-visuals-utils-dataviewutils": "^6.0.3",
     "powerbi-visuals-utils-formattingmodel": "6.0.0"
   },
   "devDependencies": {

diff --git a/src/settings.ts b/src/settings.ts
@@ -31,6 +31,7 @@ import { formattingSettings } from "powerbi-visuals-utils-formattingmodel";
 import FormattingSettingsCard = formattingSettings.SimpleCard;
 import FormattingSettingsSlice = formattingSettings.Slice;
 import FormattingSettingsModel = formattingSettings.Model;
+import { dataViewWildcard } from "powerbi-visuals-utils-dataviewutils";
 
 /**
  * Data Point Formatting Card
@@ -40,7 +41,8 @@ class DataPointCardSettings extends FormattingSettingsCard {
         name: "defaultColor",
         displayName: "Default color",
         value: { value: "" },
-        instanceKind: powerbi.VisualEnumerationInstanceKinds.ConstantOrRule
+        instanceKind: powerbi.VisualEnumerationInstanceKinds.ConstantOrRule,
+        selector: dataViewWildcard.createDataViewWildcardSelector(dataViewWildcard.DataViewWildcardMatchingOption.InstancesAndTotals)
     });
 
     name: string = "dataPoint";

diff --git a/src/visual.ts b/src/visual.ts
@@ -56,8 +56,9 @@ export class Visual implements IVisual {
         for (let i=0; i < categoricalMapping.categories[0].values.length; i++) {
             const span: HTMLElement = document.createElement("span");
             span.appendChild(document.createTextNode(categoricalMapping.categories[0].values[i].toString()));
-            span.style.width = 50 * +categoricalMapping.values[0].values[i].toString() + "px";
-            span.style.backgroundColor = this.formattingSettings.dataPointCard.defaultColor.value.value;
+            span.style.width = 50 * categoricalMapping.values[0].values[i].toString().length + "px";
+            const backgroundColor = categoricalMapping.categories[0].objects && categoricalMapping.categories[0].objects[i] && categoricalMapping.categories[0].objects[i].dataPoint ? categoricalMapping.categories[0].objects[i].dataPoint.defaultColor['solid'].color : "light blue";
+            span.style.backgroundColor = backgroundColor;
             this.target.appendChild(span);
         }
     }
@@ -66,7 +67,7 @@ export class Visual implements IVisual {
      * Returns properties pane formatting model content hierarchies, properties and latest formatting values, Then populate properties pane.
      * This method is called once every time we open properties pane or when the user edit any format property. 
      */
-    public getFormattingModel(): powerbi.visuals.FormattingModel {
+    public getFormattingModel(): powerbi.visuals.FormattingModel {      
         return this.formattingSettingsService.buildFormattingModel(this.formattingSettings);
     }
 }