@v-viig
module powerbi.extensibility.visual {
/**
* Function that converts queried data into a view model that will be used by the visual
*
* @function
* @param {VisualUpdateOptions} options - Contains references to the size of the container
* and the dataView which contains all the data
* the visual had queried.
* @param {IVisualHost} host - Contains references to the host which contains services
*/
export class BarChart implements IVisual {
private div: d3.Selection<SVGElement>;
private host: IVisualHost;
private barChartContainer: d3.Selection<SVGElement>;
private barContainer: d3.Selection<SVGElement>;
private bars: d3.Selection<SVGElement>;
private target: HTMLElement;
private g: d3.Selection<SVGAElement>;
private object:any;
private css: d3.Selection<SVGAElement>;
private script: d3.Selection<SVGAElement>;
static Config = {
xScalePadding: 0.1,
};
/**
* Creates instance of BarChart. This method is only called once.
*
* @constructor
* @param {VisualConstructorOptions} options - Contains references to the element that will
* contain the visual and a reference to the host
* which contains services.
*/
constructor(options: VisualConstructorOptions) {
this.host = options.host;
this.target = options.element;
/*
this.script = d3.select(options.element)
.append('script');
*/
/*
this.css = d3.select(options.element)
.append('link');
*/
/*
this.div = d3.select(options.element)
.append('div').attr("id","zakaria");
*/
let css = document.createElement("link");
css.rel = "stylesheet";
css.href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css";
this.target.appendChild(css);
let mapDiv = document.createElement('div');
mapDiv.id = 'zakaria';
mapDiv.style.height = "100%";
options.element.appendChild(mapDiv);
let js = document.createElement("script");
js.innerHTML= "var map = L.map('zakaria').setView([42.35,-71.08],13);";
this.target.appendChild(js);
js = document.createElement("script");
js.innerHTML= "L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);";
this.target.appendChild(js);
js = document.createElement("script");
js.src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js";
this.target.appendChild(js);
}
/**
* Updates the state of the visual. Every sequential databinding and resize will call update.
*
* @function
* @param {VisualUpdateOptions} options - Contains references to the size of the container
* and the dataView which contains all the data
* the visual had queried.
*/
public update(options: VisualUpdateOptions) {
// let viewModel: BarChartViewModel = visualTransform(options, this.host);
let width = options.viewport.width;
let height = options.viewport.height;
// this.script.attr("src","https://unpkg.com/leaflet@1.0.3/dist/leaflet.js");
// this.css.attr({rel:"stylesheet",href: "https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"});
// this.div.attr({width: width, height : height});
}
/**
* Destroy runs when the visual is removed. Any cleanup that the visual needs to
* do should be done here.
*
* @function
*/
public destroy(): void {
//Perform any cleanup tasks here
}
}
}But since I want to do some manipulations, like defining polygons & use my DataView, I want to access the variables, and methods to have flexibility on the code, which is not the case while appending on innerHTML.
