implement multiple select, but it was too ugly, next try bootstrap
This commit is contained in:
parent
ab2af8e102
commit
515f69dd55
@ -60,52 +60,56 @@ abstract class Selector implements ISelector{
|
||||
this.manager=manager;
|
||||
this.createView();
|
||||
}
|
||||
protected view:Selection<HTMLElement>;
|
||||
protected abstract createView();
|
||||
public dispose(){
|
||||
this.view?.remove();
|
||||
}
|
||||
public abstract dispose();
|
||||
protected readonly manager:ISelectorManager;
|
||||
public abstract update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn);
|
||||
}
|
||||
class DropDownSelector extends Selector{
|
||||
private dropDown:Selection<HTMLSelectElement>;
|
||||
protected createView() {
|
||||
console.debug('dropDownViewManager','createView start');
|
||||
this.view=this.manager.selectorContainer.append("select").classed("dropDown-selector",true).classed("selector",true);
|
||||
this.dropDown=this.manager.selectorContainer.append("select").classed("dropDown-selector",true).classed("selector",true).attr("multiple",true);
|
||||
console.debug('dropDownViewManager','createView end');
|
||||
}
|
||||
public dispose(){
|
||||
this.dropDown.remove();
|
||||
}
|
||||
public update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn) {
|
||||
console.debug('dropDownViewManager','update start');
|
||||
let appending=this.view.selectAll("option").data(categories.values);
|
||||
appending.enter().append("option").text(function(d){return d.toString();});
|
||||
appending.exit().remove();
|
||||
console.debug("appending:",appending);
|
||||
let options=this.dropDown.selectAll("option").data(categories.values,function(d){return d.toString();});//map data
|
||||
options.enter().append("option").text(function(d){return d.toString();});//add
|
||||
options.exit().remove();//delete
|
||||
console.debug("dropDown:",this.dropDown);
|
||||
let filterManager:IFilterManager=this.manager.filterManager;
|
||||
(<Selection<HTMLSelectElement>>this.view).on("input change",function(){
|
||||
this.dropDown.on("input change",function(){
|
||||
console.debug('DropDownSelector:',"input change");
|
||||
console.debug('this',this);
|
||||
console.debug('filterManager:',filterManager);
|
||||
let selection:string[]=[];
|
||||
let selectedValues:string[]=[];
|
||||
for(let i=0;i<this.selectedOptions.length;i++){
|
||||
let option=this.selectedOptions.item(i);
|
||||
if(option.selected){
|
||||
console.debug("option selected",option);
|
||||
console.debug('option.text:',option.text);
|
||||
selection.push(option.text);
|
||||
selectedValues.push(option.text);
|
||||
}
|
||||
}
|
||||
if(selection.length==0){
|
||||
|
||||
if(selectedValues.length==0){
|
||||
}else{
|
||||
console.debug("selection.length",selection.length);
|
||||
filterManager.filterStringField(selection);
|
||||
console.debug("selection.length",selectedValues.length);
|
||||
filterManager.filterStringField(selectedValues);
|
||||
}
|
||||
console.debug("this",this.selectedOptions);
|
||||
});
|
||||
|
||||
console.debug('dropDownViewManager','update end');
|
||||
}
|
||||
}
|
||||
class ListSelector extends Selector{
|
||||
public dispose() {
|
||||
throw new Error("Method not implemented.");
|
||||
}
|
||||
protected createView() {
|
||||
throw new Error("Method not implemented.");
|
||||
}
|
||||
@ -115,6 +119,9 @@ class ListSelector extends Selector{
|
||||
}
|
||||
}
|
||||
class CalendarSelector extends Selector{
|
||||
public dispose() {
|
||||
throw new Error("Method not implemented.");
|
||||
}
|
||||
protected createView() {
|
||||
throw new Error("Method not implemented.");
|
||||
}
|
||||
|
@ -71,7 +71,7 @@ export class Visual implements IVisual {
|
||||
x: mouseEvent.clientX,
|
||||
y: mouseEvent.clientY
|
||||
});
|
||||
mouseEvent.preventDefault();
|
||||
//mouseEvent.preventDefault();
|
||||
});
|
||||
let headerContainer=container.append("div").classed("header-container",true);
|
||||
let selectorContainer=container.append("div").classed("selector-container",true);
|
||||
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user