Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
jigr69
Frequent Visitor

Value Formatter Causing Custom Visual To Disappear

Hi there.

 

After banging my head on a brick wall for many an hour now, I cannot get the final piece of a custom visual working. 

 

I am trying to format a value, which is coming through as a measure, into the same format as described by Power BI, in this case, a precentage number to 1 decimal place. Here is a simplified version of my code, I've removed all drawing commands etc.

 

Visual.ts

enter code module powerbi.extensibility.visual {

"use strict";

import ValueFormatter = powerbi.extensibility.utils.formatting.valueFormatter;
import IValueFormatter = powerbi.extensibility.utils.formatting.IValueFormatter;

export class Visual implements IVisual {

    private host: IVisualHost;
    private svg: d3.Selection<SVGElement>;
    private container: d3.Selection<SVGElement>;
    private textValue: d3.Selection<SVGElement>;

    private visualSettings: VisualSettings;

    constructor(options: VisualConstructorOptions) {

        this.svg = d3.select(options.element)
            .append('svg')
            .classed('circleCard', true);

        this.container = this.svg.append("g")
            .classed('container', true);

        this.textValue = this.container.append("text")
            .classed("textValue", true);
    }

    public update(options: VisualUpdateOptions) {

        let dataView: DataView = options.dataViews[0];

        this.visualSettings = VisualSettings.parse<VisualSettings>(dataView);

        // Grab the width and height of the element.
        let width: number = options.viewport.width;
        let height: number = options.viewport.height;

        // Set the width and height of element to the SVG viewport.
        this.svg.attr({
            width: width,
            height: height
        });

        // Height, width and radius of the gauge
        let tWidth: number = width / 2;
        let tHeight: number = height - 1;
        let radius: number = height;

        // Make sure the gauge fits within the view.
        if (radius > (width / 2))
            radius = tWidth;

        // Define the inner and outer radius of the gauge.
        let oRadius: number = radius;
        let iRadius: number = radius / 1.5;

        // Trying to format the number! :(
        let valueFormatter: IValueFormatter = ValueFormatter.create({
            format: "0.00"
        });

        // Commenting out this line makes it work!
        console.log(valueFormatter.format(123));

        // Display the value used for the arc calculation.
        this.textValue
            .text("69.8%")
            .attr({
                x: '50%',
                y: tHeight - (iRadius / 3),
                dy: '0.35em', 'text-anchor': 'middle'
            }).style({
                'font-size': (iRadius / 30) + 'em',
                'font-family': 'Arial',
                'fill': '#ffffff'
            });

    }

    private static parseSettings(dataView: DataView): VisualSettings {
        return VisualSettings.parse(dataView) as VisualSettings;
    }

    /** 
     * This function gets called for each of the objects defined in the capabilities files and allows you to select which of the 
     * objects and properties you want to expose to the users in the property pane.
     * 
     */
    public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstanceEnumeration {
        const settings: VisualSettings = this.visualSettings || VisualSettings.getDefault() as VisualSettings;
        return VisualSettings.enumerateObjectInstances(settings, options);
    }
}
}

If I comment out the console.log line, the visual displays the text, if I uncomment the console.log line, the text in the visual disappears. I do not get any warnings from PBIVIZ, therefore it is compiling okay. I'm sure there is an error occuring but what and how/where to find the error, I've no idea (new to this custom visual lark).

 

Any help would be gratefully appreciated.

1 ACCEPTED SOLUTION
v-viig
Community Champion
Community Champion

I'll have a look today.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

View solution in original post

5 REPLIES 5
v-viig
Community Champion
Community Champion

Hi @jigr69,

 

It looks like some of required dependencies are not included into your custom visual.

 

Did you include all required JS files into externalJS property?

 

If so, please share whole source code for investigation (you can share it here or via email "pbicvsupport@microsoft.com"

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

 

jigr69
Frequent Visitor

Hi.

 

I have sent you an email with the complete package in a zip file, such that the issue can be looked into. My externalJS property of "pbiviz.json" looks as below:

 

  "externalJS": [
    "node_modules/powerbi-visuals-utils-typeutils/lib/index.js",
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
    "node_modules/powerbi-visuals-utils-formattingutils/lib/index.js",
    "node_modules/d3/d3.min.js"
  ],

The "package.json" file looks as below:

{
  "name": "visual",
  "dependencies": {
    "@types/d3": "^3.5.41",
    "d3": "^3.5.5",
    "powerbi-visuals-utils-dataviewutils": "1.2.0",
    "powerbi-visuals-utils-formattingutils": "^3.0.2"
  }
}

The "tsconfig.json" file:

{
  "compilerOptions": {
    "allowJs": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "ES5",
    "sourceMap": true,
    "out": "./.tmp/build/visual.js"
  },
  "files": [
    ".api/v1.13.0/PowerBI-visuals.d.ts",
    "node_modules/powerbi-visuals-utils-dataviewutils/lib/index.d.ts",
    "node_modules/powerbi-visuals-utils-formattingutils/lib/index.d.ts",
    "src/settings.ts",
    "src/visual.ts"
  ]
}

I have put these in such that anyone else coming across this problem can check their files etc.

 

Regards

v-viig
Community Champion
Community Champion

I'll have a look today.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Hi,

 

I understand that I am trying to raise a dead post, but this is important as I am unable to find any solution for this.

Did you ever resolve this concern ? I am also stuck at the same point.

Any help will be much appreciated.

Please make sure you did all of steps listed in installation guide.

If so, @rafikhan74 can you share your code for investigating?

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.