topic Re: Value Formatter Causing Custom Visual To Disappear in Developer

Value Formatter Causing Custom Visual To Disappear

jigr69 — Tue, 21 Aug 2018 15:41:08 GMT

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.

Re: Value Formatter Causing Custom Visual To Disappear

v-viig — Wed, 22 Aug 2018 06:52:28 GMT

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

Re: Value Formatter Causing Custom Visual To Disappear

jigr69 — Wed, 22 Aug 2018 07:58:04 GMT

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

Re: Value Formatter Causing Custom Visual To Disappear

v-viig — Fri, 24 Aug 2018 07:23:49 GMT

I'll have a look today.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

Re: Value Formatter Causing Custom Visual To Disappear

rafikhan74 — Sat, 24 Nov 2018 10:53:50 GMT

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.

Re: Value Formatter Causing Custom Visual To Disappear

v-viig — Tue, 27 Nov 2018 07:07:31 GMT

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