custom visual development

[animebuff]

"use strict"; import "./../style/visual.less"; import powerbi from "powerbi-visuals-api"; import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions; import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions; import IVisual = powerbi.extensibility.visual.IVisual; import DataView = powerbi.DataView; import IVisualHost = powerbi.extensibility.IVisualHost; import * as d3 from "d3"; type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>; export class Visual implements IVisual { private host: IVisualHost; private svg: Selection<SVGElement>; private container: Selection<SVGElement>; private circle: Selection<SVGElement>; private textValue: Selection<SVGElement>; private textLabel: Selection<SVGElement>; constructor(options: VisualConstructorOptions) { this.svg = d3.select(options.element) .append('svg') .classed('circleCard', true); this.container = this.svg.append("g") .classed('container', true); this.circle = this.container.append("circle") .classed('circle', true); this.textValue = this.container.append("text") .classed("textValue", true); this.textLabel = this.container.append("text") .classed("textLabel", true); } public update(options: VisualUpdateOptions) { let width: number = options.viewport.width; let height: number = options.viewport.height; this.svg.attr("width", width); this.svg.attr("height", height); let radius: number = Math.min(width, height) / 2.2; this.circle .style("fill", "white") .style("fill-opacity", 0.5) .style("stroke", "black") .style("stroke-width", 2) .attr("r", radius) .attr("cx", width / 2) .attr("cy", height / 2); let fontSizeValue: number = Math.min(width, height) / 5; this.textValue .text("Value") .attr("x", "50%") .attr("y", "50%") .attr("dy", "0.35em") .attr("text-anchor", "middle") .style("font-size", fontSizeValue + "px"); let fontSizeLabel: number = fontSizeValue / 4; this.textLabel .text("Label") .attr("x", "50%") .attr("y", height / 2) .attr("dy", fontSizeValue / 1.2) .attr("text-anchor", "middle") .style("font-size", fontSizeLabel + "px"); } }

there is no concerete docs for developing visuals.

we have docs but its more like bits and pieces

there are lot of question arises while reading the docs

we have few imports on the above code, it is said import what's needed but how can we be sure what's the import needed. and what are the imports available?

and what all are should be defined in private class property?

can some one please explain these and give some solid docs for creating custom visuals

any type of advice is also much appreciated

Note: I'm willing to learn and spend my time but I don't have a solid base

everything I see in docs looks like bits and pieces

I get answers for some learning them but for some I can't find it

so please help me 

[v-dineshya · Accepted solution]

Hi @animebuff ,

Thank you for reaching out to the Microsoft Community Forum.

Understanding the Imports and What's Needed

1. What to Import?

The imports depend on what features your visual needs.

a. powerbi-visuals-api: Always required. Provides interfaces like IVisual, VisualUpdateOptions, etc.
b. d3: Only needed if you're using D3 for rendering (as in your example).
c. ./../style/visual.less: For styling your visual.

Here’s what you generally need for Power BI visuals:

import powerbi from "powerbi-visuals-api";
import IVisual = powerbi.extensibility.visual.IVisual;
import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
import IVisualHost = powerbi.extensibility.IVisualHost;
These are essential to hook into the Power BI visual lifecycle (constructor, update, etc.).

2. What’s Available?

To know what's available: Install the type definitions: npm install powerbi-visuals-api. Use your editor's IntelliSense (VS Code works great). Explore the source/type definitions in node_modules/powerbi-visuals-api/.

Look into: powerbi.DataView, powerbi.extensibility and powerbi.visuals. These have everything from data shapes to formatting to capabilities.

3. Third-Party Libraries

You can use libraries like d3, lodash, or moment, but always check the pbiviz.json config (under externalJS) and package them correctly.

What Belongs as a Private Class Property?

Put in private anything that: Represents persistent elements or references (like svg, host, textValue, etc.). Is used across multiple methods in your class. Needs to retain state between updates (like configuration, selections, etc.).

Example:

private svg: Selection<SVGElement>; // used in constructor & update

Note: Don’t define as a class property if it’s: Only needed inside one method. Temporary for a calculation (like let radius = ... in update()).

Please refer community threads and Microsoft official documents and articles.

Solved: Power BI Custom Visuals development - Issue with f... - Microsoft Fabric Community

Solved: Using D3 v5 for developing custom visual - Microsoft Fabric Community

Solved: developing Custom Visual with Table Data Binding - Microsoft Fabric Community

Power BI Custom Visuals' Community - Microsoft Fabric Community

Develop custom visuals in Power BI - Power BI | Microsoft Learn

Setting up an environment for developing a Power BI visual - Power BI | Microsoft Learn

Power BI visuals documentation - Power BI | Microsoft Learn

Power BI Custom Visuals – Data Visualization Tools | Power BI

Custom Visual in Power BI - Microsoft Fabric Community

Power BI Custom Visual development issue - Microsoft Community

If my response has resolved your query, please mark it as the "Accepted Solution" to assist others. Additionally, a "Kudos" would be appreciated if you found my response helpful.

Thank you

[animebuff]

Thanks a lot for this wonderful explanation