Develop custom Calendar View visual using Typescript and D3js

walid140891 — Tue, 05 Jan 2021 16:36:15 GMT

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

Re: Develop custom Calendar View visual using Typescript and D3js

V-lianl-msft — Fri, 08 Jan 2021 09:59:40 GMT

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-code-in-the-visuals-file

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

topic Re: Develop custom Calendar View visual using Typescript and D3js in Developer

Develop custom Calendar View visual using Typescript and D3js

Re: Develop custom Calendar View visual using Typescript and D3js