Reply
Frequent Visitor
Posts: 20
Registered: ‎07-28-2017
Accepted Solution

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! Smiley Sad
        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.


Accepted Solutions
Moderator
Posts: 1,648
Registered: ‎12-02-2016

Re: Value Formatter Causing Custom Visual To Disappear

I'll have a look today.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

View solution in original post


All Replies
Highlighted
Moderator
Posts: 1,648
Registered: ‎12-02-2016

Re: Value Formatter Causing Custom Visual To Disappear

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

 

Frequent Visitor
Posts: 20
Registered: ‎07-28-2017

Re: Value Formatter Causing Custom Visual To Disappear

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

Moderator
Posts: 1,648
Registered: ‎12-02-2016

Re: Value Formatter Causing Custom Visual To Disappear

I'll have a look today.

 

Ignat Vilesov,

Software Engineer

 

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Visitor
Posts: 1
Registered: ‎11-24-2018

Re: Value Formatter Causing Custom Visual To Disappear

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.

Moderator
Posts: 1,648
Registered: ‎12-02-2016

Re: Value Formatter Causing Custom Visual To Disappear

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