custom visual development

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