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