Errors in Custom Visual Tutorial

[Anonymous]

Hi everyone, 

I'm trying to get a bit more into making custom visuals and so I decided to do the tutorial Microsoft offered:

https://docs.microsoft.com/en-us/power-bi/developer/custom-visual-develop-tutorial 

I've followed all the steps, however when I get to the 'Adding Visual Elements' step, I seem to get a lot of errors. I did everything (and deleted everything) the tutorial told me to, however it seems that you should not delete all of it. 

Right now I'm left with the following code in my visual.ts file: 

/*
*  Power BI Visual CLI
*
*  Copyright (c) Microsoft Corporation
*  All rights reserved.
*  MIT License
*
*  Permission is hereby granted, free of charge, to any person obtaining a copy
*  of this software and associated documentation files (the ""Software""), to deal
*  in the Software without restriction, including without limitation the rights
*  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
*  copies of the Software, and to permit persons to whom the Software is
*  furnished to do so, subject to the following conditions:
*
*  The above copyright notice and this permission notice shall be included in
*  all copies or substantial portions of the Software.
*
*  THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
*  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
*  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
*  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
*  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
*  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
*  THE SOFTWARE.
*/

module powerbi.extensibility.visual {
    "use strict";
    export class Visual implements IVisual {
        private host: IVisualHost;
        private svg: d3.Selection<SVGElement>;
        private container: d3.Selection<SVGElement>;
        private circle: d3.Selection<SVGElement>;
        private textValue: d3.Selection<SVGElement>;
        private textLabel: d3.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,
                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,
                cx: width /2,
                cy: height / 2

            })
            let fontSizeValue: number = Math.min(width, height) / 5;
            this.textValue
                .text("Value")
                .attr({
                    x: "50%",
                    y: "50%",
                    dy: "0.35em",
                    "text-anchor": "middle"
                }).style("font-size", fontSizeValue + "px");
                let fontSizeLabel: number = fontSizeValue / 4;
                this.textLabel 
                .text("Label")
                .attr({
                    x: "50%",
                    y: height / 2,
                    dy: fontSizeValue / 1.2,
                    "text-anchor": "middle"
                })
                .style("font-size", fontSizeLabel + "px")




        }
    }
}

And the errors I get are the following: 

What am I doing wrong? How can I fix this? 

I really want to learn D3 and typescript but I have no experience with it and I have no idea how to solve this error.

Also there does not seem to be a lot of documentation online on how to solve this problem when working with the microsoft tutorial. 

Thanks in advance! 

[dm-p]

Hi there,

I'm not a member of the visuals team, who may be able to provide better support for you, but it's been a couple of days since your post and this may help, if only a little. While the custom visuals framework is really cool, it requires some patience if it's your entry point into TypeScript, which can add to the frustration a little bit.

To get to the root cause of your issue, the tooling has recently been updated. The tutorial you've got a link to is for versions 1-2. I suspect that if you run the following from your console, you'll get a number of 3.0 or higher:

pbiviz --version

FYI the latest documentation is available here: https://microsoft.github.io/PowerBI-visuals but... it has not been updated for the recent changes and is stuck on the same versions as your other link, unfortunately and as such is difficult for newcomers to get into. It would be nice if the team get to updating these tutorials, as the barrier to entry keeps getting higher in their current state.

This page will help with understanding how to migrate your code to the new tooling, but assumes some knowledge already, which does not help if you're learning the framework from the beginning.

You might be able to piece together from some of the sample visuals, which the team have updated:

• Timeline Slicer
• Chord Chart
• Dual KPI

If I recall correctly from the tutorial, if you managed to get the end-to-end bit working (with the certificate and the boilerplate visual with the Update count showing), then your code may have been in the correct state for the new tooling.

If in doubt, I'd re-do the step to create a new visual (running pbiviz new), and this will set up a 'v3' version of the tutorial code. Your visual.ts should have the following at the top (after the comments, but before export class Visual), which will be different to the code you pasted:

"use strict";
import "@babel/polyfill";
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 EnumerateVisualObjectInstancesOptions = powerbi.EnumerateVisualObjectInstancesOptions;
import VisualObjectInstance = powerbi.VisualObjectInstance;
import DataView = powerbi.DataView;
import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnumerationObject;

import { VisualSettings } from "./settings";

If this works in your browser then I'd resume from there, but you'll need to follow the bits about D3 version 5 in that migration link above to install it (as the older tooling only supported up to version 3.5 of D3).

Good luck!

Daniel