Hello everyone,
I'm trying to implement an example library from the D3 gallery called Visavail. A demo of this library can be found here: link.
I'm having difficulties getting it to work, any help or pointers will be appriciated.
Setup:
- Installed Moment with npm
- Installed D3 V4 with npm
- Added Visavail library to the node_modules folder
- Added font-awesome tot the style folder
Then I referenced it all in pbiviz.json:
"externalJS": [
"node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
"node_modules/d3/build/d3.min.js",
"node_modules/visavail/js/visavail.js",
"node_modules/moment/min/moment-with-locales.min.js"
],
"style": "style/visual.less",
"capabilities": "capabilities.json",
"dependencies": "dependencies.json",
"stringResources": []
The CSS was referenced in the visual.less file:
@import (less) "style/font-awesome/css/font-awesome.min.css"; @import (less) "node_modules/visavail/css/visavail.css";
The code:
In Visual.ts, based on the hello world update counter I recreated the Visavail example with static data.
module powerbi.extensibility.visual {
"use strict";
export class Visual implements IVisual {
private target: HTMLElement;
private settings: VisualSettings;
private d3;
private visavail;
private moment;
private svg;
private mydataset;
private chart;
constructor(options: VisualConstructorOptions) {
console.log('Visual constructor', options);
this.target = options.element;
this.d3 = (window as any).d3;
this.visavail = (window as any).visavail;
this.moment = (window as any).moment;
this.moment.locale("en");
this.svg = this.d3.select(this.target).append('svg');
}
public update(options: VisualUpdateOptions) {
this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
this.target.innerHTML = '<p id="example">TEST</em></p>';
this.chart = this.visavail.visavailChart().width(800);
this.mydataset = [{
"measure": "Annual Report",
"data": [
["2015-01-01", 0, "2015-03-04"],
["2016-01-01", 1, "2016-03-03"],
["2017-01-01", 1, "2017-03-06"],
["2018-01-01", 1, "2018-04-01"]
]
}];
this.d3.select("#example").datum(this.mydataset).call(this.chart);
}
private static parseSettings(dataView: DataView): VisualSettings {
return VisualSettings.parse(dataView) as VisualSettings;
}
public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
}
}
}
- Am I referencing the dependencies correctly?
- Am I importing the dependencies correctly?
- Am I implementing the dependencies correctly?
- How do I debug this?
I zipped the entire project, it can be downloaded here:
https://www.dropbox.com/s/aggbcdm4vnooy8h/statisTimeLine2.zip?dl=0
1 ACCEPTED SOLUTION
Hello everyone,
I'm trying to implement an example library from the D3 gallery called Visavail. A demo of this library can be found here: link.
I'm having difficulties getting it to work, any help or pointers will be appriciated. I don't know where to post it, if this is the wrong place please delete this post.
Setup:
- Installed Moment with npm
- Installed D3 V4 with npm
- Added Visavail library to the node_modules folder
- Added font-awesome tot the style folder
Then I referenced it all in pbiviz.json:
"externalJS": [
"node_modules/powerbi-visuals-utils-dataviewutils/lib/index.js",
"node_modules/d3/build/d3.min.js",
"node_modules/visavail/js/visavail.js",
"node_modules/moment/min/moment-with-locales.min.js"
],
"style": "style/visual.less",
"capabilities": "capabilities.json",
"dependencies": "dependencies.json",
"stringResources": []
The CSS was referenced in the visual.less file:
@import (less) "style/font-awesome/css/font-awesome.min.css"; @import (less) "node_modules/visavail/css/visavail.css";
The code:
In Visual.ts, based on the hello world update counter I recreated the Visavail example with static data.
module powerbi.extensibility.visual {
"use strict";
export class Visual implements IVisual {
private target: HTMLElement;
private settings: VisualSettings;
private d3;
private visavail;
private moment;
private svg;
private mydataset;
private chart;
constructor(options: VisualConstructorOptions) {
console.log('Visual constructor', options);
this.target = options.element;
this.d3 = (window as any).d3;
this.visavail = (window as any).visavail;
this.moment = (window as any).moment;
this.moment.locale("en");
this.svg = this.d3.select(this.target).append('svg');
}
public update(options: VisualUpdateOptions) {
this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
this.target.innerHTML = '<p id="example">TEST</em></p>';
this.chart = this.visavail.visavailChart().width(800);
this.mydataset = [{
"measure": "Annual Report",
"data": [
["2015-01-01", 0, "2015-03-04"],
["2016-01-01", 1, "2016-03-03"],
["2017-01-01", 1, "2017-03-06"],
["2018-01-01", 1, "2018-04-01"]
]
}];
this.d3.select("#example").datum(this.mydataset).call(this.chart);
}
private static parseSettings(dataView: DataView): VisualSettings {
return VisualSettings.parse(dataView) as VisualSettings;
}
public enumerateObjectInstances(options: EnumerateVisualObjectInstancesOptions): VisualObjectInstance[] | VisualObjectInstanceEnumerationObject {
return VisualSettings.enumerateObjectInstances(this.settings || VisualSettings.getDefault(), options);
}
}
}
- Am I referencing the dependencies correctly?
- Am I importing the dependencies correctly?
- Am I implementing the dependencies correctly?
- How do I debug this?
I zipped the entire project, it can be downloaded here:
https://www.dropbox.com/s/aggbcdm4vnooy8h/statisTimeLine2.zip?dl=0
