• Irene Librenti

How to create Power BI interactive custom visuals using R (html) - Part 3

In the previous posts (part 1 and part 2) we showed how to create and customize a Power BI visual. We went through the steps needed to define input fields, bound them, and add interactive properties to modify features of your custom R visual.

In this post, we are showing how to fully customize the format pane of your Power BI visual.

Properties in the format pane

The format pane is where we are able to modify out custom visual through the Power BI interface. We will start creating our properties in the capabilities.json file inside your visual folder.


Drop-down list

Let’s start with a drop-down list to change the shape of data points of our scatter plot.

We first need to define property name and description, and set the type to enumerator, so that we can provide options for our drop-down list.

"DataPoints": {
      "displayName": "Data Points",
      "description": "Modify data point shape and color",
      "properties": {
        "DataPointShape": {
          "displayName": "Data Point Shape",
          "description": "Data point shape selection",
          "type": {
            "enumeration": [
              {
                "displayName": "Circle",
                "value": "16"
              },
              {
                "displayName": "Triangle",
                "value": "17"
              },
              {
                "displayName": "Diamond",
                "value": "18"
              },
              {
                "displayName": "Square",
                "value": "15"
              }
            ]
          }
        }
      }
    } 

Switch

In the format pane, we often see a swicth icon that allow us to turn on/off properties. To show you how it worls, we will add a switch to enable/disable the x-axis of our scatter plot. To do so, we are going to use another type of property, called bool, in the following way:

"Xaxis": {
      "displayName": "X axis",
      "description": "X axis settings",
      "properties": {
        "show": {
          "displayName": "Show",
          "displayNameKey": "Enable or disable X axis",
          "type": {
            "bool": true
          }
        }
[...]
}

Color picker

We can bring our customization one step further and add the option to change the color of our axis using the familiar color picker.

We just nned to nest another object inside of “labels” called “color”. “color” represents the sub-property of X axis that is going to allow us to change the color of the labels using a color picker. This time, we are going to use the type fill, combine with solid:

"color": {
          "displayName": "Fill",
          "description": "Modify X axis color",
          "type": {
            "fill": {
              "solid": {
                "color": true
              }
            }
          }
        }

Title input

The next step is to add a property to modify the titles of the axis. We use the type “text” as follow:

"title": {
          "displayName": "Title",
          "description": "Modify X axis title label",
          "type": {
            "text": true
          }
        }

Text size

Finally, we want to modify the text size of our labels. We do so by adding a final object called fontSize to which we are going to assign the data type formatting, as follow:

"fontSize": {
          "displayName": "Text Size",
          "description": "Modify font size of the X axis title",
          "type": {
            "formatting": {
              "fontSize": true
            }
          }
        }
      }
    }


Connect properties to the R script

Now that we are done defining our properties, we need to head to the src/settings.ts file, where we need to create a new class for each property and set default values:

"use strict";
 
import { dataViewObjectsParser } from "powerbi-visuals-utils-dataviewutils";
import DataViewObjectsParser = dataViewObjectsParser.DataViewObjectsParser;
 
export class VisualSettings extends DataViewObjectsParser {
 /*public rcv_script: rcv_scriptSettings = new rcv_scriptSettings();*/
 public DataPoints: DataPointsSettings = new DataPointsSettings();
 public labels: LabelsSettings = new LabelsSettings();
 public Xaxis: XaxisSettings = new XaxisSettings();
 public Yaxis: YaxisSettings = new YaxisSettings();
 }
 
export class DataPointsSettings {
 public DataPointShape: string = "16";
}
 
export class LabelsSettings {
 public show: boolean = false;
 public color: string = "#000000";
 public fontSize: number = 9;
}
 
export class XaxisSettings {
 public show: boolean = false;
 public color: string = "#000000";
 public title: string = "";
 public fontSizex: number = 9;
}
 
export class YaxisSettings {
 public show: boolean = false;
 public color: string = "#000000";
 public title: string = "";
 public fontSizex: number = 9;
}
 
 export class rcv_scriptSettings {
 // undefined
 public provider // undefined
 public source }

The next thing to do is to head to your visual script, and add this feature to my plot. An example on how to incorporate properties to your R script is presented in this blog post.

Once every step is finalized, we can package our visual and import the new visual to Power BI. Here’s our final result:



We hope you enjoyed our post and see you next week for new content!

687 views

Recent Posts

See All