Develop custom Calendar View visual using Typescript and D3js

[walid140891]

Hi all,

I'm developing my first power bi custom visual using typescript, d3js and node Calendarjs library based on the example that microsoft provides that you can download using powershell.

The issue I'm facing is that with the following bunch of code I'm always getting a blank chart in the power bi online platform:

"use strict";

var Calendar = require('calendarjs');

import "core-js/stable";
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 IVisualHost = powerbi.extensibility.IVisualHost;
import * as d3 from "d3";
type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;

import { VisualSettings } from "./settings";
export class Visual implements IVisual {
    private target: HTMLElement;
    private updateCount: number;
    private settings: VisualSettings;
    private textNode: Text;



    constructor(options: VisualConstructorOptions) {
        console.log('Visual constructor', options);
        this.target = options.element;
        this.updateCount = 0;
        if (document) {
            
            var table = d3.select('body').append('table')
                .attr("style", "margin-left: 250px;"),
                thead = table.append("thead"),
                tbody = table.append("tbody");

            var cal = new Calendar(2021, 0);
            var weeks = cal.monthDays();
            //var weeks = cal.weeks;
            weeks.forEach(function (week) {
                this.table
                    .append('tr')
                    .selectAll('td')
                    .data(week)
                    .enter()
                    .append('td')
                    .text(function (d) {
                        return d > 0 ? d : "";
                    })
            });
        }


        
    }

    public update(options: VisualUpdateOptions) {
        
    }
}

[V-lianl-msft]

Hi @walid140891 ,

I guess you didn't define the style of this visual after getting data in the update() function, resulting in the display of this visual as blank.

https://docs.microsoft.com/zh-cn/power-bi/developer/visuals/develop-circle-card#optional-review-the-... 

Best Regards,
Liang
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.