node.js - Develop custom Calendar view visual for power bi

Question

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 power-shell.

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 and I'm not even getting the very basic expected chart that I'm drawing:

"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) {
    
    }
}

NOTE:I know there are several free to use Calendar views charts, but at the end we want to have our own calendar view with custom features that we need.

Thank you in advance.

Answer 1

等待大神答复