Power BI Circle Card Visual Using Angular Element
In my previous blog I talked about the concept of how to set up Angular Elements, ref LINK.
But in this blog I will go through how you can implement Circle Card example from Microsoft article showing sample developed using REACT. You can find it here.
Since Microsoft only plans to use REACT as a front end development language, all the examples are also with REACT which everyone can see in Microsoft documentation. So I thought maybe it’s okay to also show how this can be done with Angular Elements. Not least that I showed the concept around how Angular Elements can be set up for Power BI custom Visual development.
You need to download/clone the example I developed so that we can only extend it with the Circle Card example.
It might be a good idea to first read through the entire Microsoft article with the concept of the Circle Card with REACT before you start with Angular Element.
I guess you already have some knowledge of how Power BI Visuals works and not least have experience developing in M365.
Lets get started
Configure your visual’s data field
Configure your visual’s capabilities file so that only one data field can be submitted to the visual’s Measure data field.
- In VS Code, from the AECC folder, open capabilities.json.
2. The AECC displays a single value, Measure Data. Remove the Category Data object from dataRoles.
3. After removing the Category Data object, the dataRoles key looks like this:
"dataRoles": [
{ "displayName": "Measure Data",
"name": "measure",
"kind": "Measure"
}
],4. Remove all the content of the objects key (you'll fill it in later).
After removing its content, the objects key looks like this:
“objects”: {},
5. Replace the dataViewMappings property with the code below. max: 1 in measure specifies that only one data field can be submitted to the visual's Measure data field.
“dataViewMappings”: [ { “conditions”: [ { “measure”: { “max”: 1 } } ], “single”: { “role”: “measure” } } ]
6. Save the changes you made to capabilities.json.
7. Verify that pbiviz start is running and in Power BI service, refresh your React Circle Card visual. The Measure data field can except only one data field, as specified by max: 1.
Update the visual’s style
In this section, you’ll turn your visual’s shape into a circle. Use the circle-card-component.component.scss file to control the style of your visual in Angular Element project (AECC).
- From the circle-card-component folder, open circle-card-component.component.scss.
- Replace the content of circle-card-component.component.scss with the code below.
.circleCard { position: relative; box-sizing: border-box; border: 1px solid #000; border-radius: 50%; width: 200px; height: 200px; } p { text-align: center; line-height: 30px; font-size: 20px; font-weight: bold; position: relative; top: -30px; margin: 50% 0 0 0; }
Save circle-card-component.component.scss.
Set your visual to receive properties from Power BI
In this section you’ll configure your visual to receive data from Power BI, and send updates to the instances in the circle-card-component.component.ts file.
Render data using angular Element
You can render data using React. The component can display data from its own state.
- In VS Code, from the AECC folder, open circle-card-component.component.html.
- Replace the content of circle-card-component.component.html with the code below.
<div [className]=”’circleCard’” [ngStyle]=”circleStyle()”>
<p>{{textLabel}}
<br/>
<em>{{textValue}}</em>
</p>
</div>
And now change the code in circle-card-component.component.ts file as code below.
First change the import:
import { Component, OnInit, Input, Output, EventEmitter, ElementRef } from ‘@angular/core’;
Copy the code below and paste it in the file:
@Input()
public textLabel: string;
@Input()
public textValue: string;
@Input()
public size: number;
@Input()
public style: any;
@Input()
public background: string;
@Input()
public borderWidth: number;
constructor(public elementRef: ElementRef) {}
ngOnInit(): void {
const native = this.elementRef.nativeElement;
this.textLabel = native.getAttribute(‘textLabel’);
this.textValue = native.getAttribute(‘textValue’);
this.background = native.getAttribute(‘background’);
this.borderWidth = native.getAttribute(‘borderWidth’);
this.size = native.getAttribute(‘size’);
this.style = { width: this.size, height: this.size, background: this.background, border: this.borderWidth + ‘px solid #000’ };
}
public circleStyle(): any {
return this.style;
}
Your circle-card-component.component.ts should look like:
Save the file.
Set your visual to receive data
Visuals receive data as an argument of the update method. In this section, you'll update this method to receive data.
The code below selects textLabel and textValue from DataView, and if the data exists, updates the component state.
- In VS Code, from the src folder (pbi solution), open visual.ts.
- Add the the following code in update method:
this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
this.viewport = options.viewport;
const { width, height } = this.viewport;
const size = Math.min(width, height);
if(options.dataViews && options.dataViews[0]) {
if(options.dataViews[0] !== null && options.dataViews[0] !== undefined) {
const dataView: DataView = options.dataViews[0];
this.settings = VisualSettings.parse(options.dataViews[0]);
const object = this.settings.circle;
const bw = object && object.circleThickness ? object.circleThickness : undefined;
const bg = object && object.circleColor ? object.circleColor : undefined;
this.htmlElement.setAttribute(“textLabel”,dataView.metadata.columns[0].displayName);
this.htmlElement.setAttribute(“textValue”,dataView.single.value.toString());
this.htmlElement.setAttribute(“size”,size.toString());
this.htmlElement.setAttribute(“background”, bg);
this.htmlElement.setAttribute(“borderWidth”, bw.toString());
this.target.appendChild(this.htmlElement);
}
}
Your update method should look like.
Make your Power BI visual customizable
In this section, you’ll add the ability to customize your visual, allowing users to make changes to its color and border thickness.
Add color and thickness to the capabilities file
Add the color and border thickness to the object property in capabilities.json.
- In VS Code, from the reactCircleCard folder, open capabilities.json.
- Add the following settings to the
objectsproperty.
“circle”: {
“displayName”: “Circle”,
“properties”: {
“circleColor”: {
“displayName”: “Color”,
“description”: “The fill color of the circle.”,
“type”: {
“fill”: {
“solid”: {
“color”: true
}
}
}
},
“circleThickness”: {
“displayName”: “Thickness”,
“description”: “The circle thickness.”,
“type”: {
“numeric”: true
}
}
}
}
Add a circle settings class to the settings file
Add the CircleSettings class to settings.ts.
- In VS Code, from the src folder, open settings.ts.
- Replace the code in settings.ts with the following code:
“use strict”;
import { dataViewObjectsParser } from “powerbi-visuals-utils-dataviewutils”;
import DataViewObjectsParser = dataViewObjectsParser.DataViewObjectsParser;export class CircleSettings {
public circleColor: string = “white”;
public circleThickness: number = 2;
}export class VisualSettings extends DataViewObjectsParser {
public circle: CircleSettings = new CircleSettings();
}
Your file should look like:
Review your changes
Experiment with the visual’s color and border thickness, which you can now control.
- Verify that
pbiviz startis running, and in Power BI service, refresh your Angular Element Circle Card visual. - Select the Format tab and expand Circle.
- Adjust the visual’s Color and Thickness settings, and review their effect on the visual.
In sample above i selected “Field” Quantity, but in Microsoft Article they selected “Field” Sales. Here you can test a little differently to be able to see how the data is read, etc.
So then I have showed how we can implement Angular Element as a front end language instead of using REACT as default development language. And not least how the Circle Card example for Microsoft can be implemented in an Angular Element solution.
GitHub
LINKS
