Syinpo/syinpoSlicer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

The single-dropdown work well

Browse Source
This commit is contained in:
沐见南 2020-05-02 00:02:18 +08:00
parent c676bb727e
commit b2639bcebe
10 changed files with 153 additions and 162 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -2,3 +2,4 @@
/dist
/.tmp
/.vscode
webpack.statistics.*

4
pbiviz.json
View File

@ -18,10 +18,6 @@
"icon": "assets/icon.png"
},
"externalJS": [
"node_modules/jquery/dist/jquery.min.js",
"src/coverJquery.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/bootstrap-multiselect/dist/js/bootstrap-multiselect.min.js"
],
"style": "style/visual.less",
"capabilities": "capabilities.json",

9
src/managers/filterManager.ts
View File

@ -14,6 +14,15 @@ export class FilterManager implements IFilterManager{
constructor(host:IVisualHost){
this.host=host;
}
public dispose():void{
console.debug('filterManager disposing');
if(this.target.table&&this.target.column){
this.clear();
}
console.debug('filterManager disposed');
}
public clear():void{
console.debug("clear start:");
this.host.applyJsonFilter(null,"general","filter",powerbi.FilterAction.remove);

15
src/managers/layoutManager.ts
View File

@ -11,13 +11,22 @@ export class LayoutManager implements ILayoutManager{
// constructor(layout:Selection<HTMLElement>){
// this.layout=layout;
// }
header:Selection<HTMLDivElement>
headerContainer:Selection<HTMLDivElement>
constructor(layout:Selection<HTMLElement>,filterManager:IFilterManager){
this.layout=layout;
this.header=this.layout.append('div').attr('header',true);
this.header.append('button').attr('clear',true).text('clear').on('click',function(){
this.headerContainer=layout.append("div").classed("header-container",true);
this.headerContainer.append('button').attr('clear',true).text('clear').on('click',function(){
filterManager.clear();
});
this.headerContainer.style('display','none');
}
public dispose():void{
console.debug('layoutManager disposing');
this.headerContainer.remove();
this.layout.remove();
console.debug('layoutManager disposed');
}
update(dataView:DataView,width:number,height:number):void{
//this.layout.style("width",width+"px").style("height",height+"px");

149
src/managers/selectorManager.ts
View File

@ -21,6 +21,10 @@ export class SelectorManager implements ISelectorManager{
this.selectorContainer=selectorContainer;
this.filterManager=filterManager;
}
public dispose():void{
this.selector.dispose();
this.selectorContainer.remove();
}
public switchSelector<T extends ISelector>(classSelector:new ()=>T){
let newSelector=new classSelector();
this.selector?.dispose();
@ -56,6 +60,30 @@ interface ISelector{
}
abstract class Selector implements ISelector{
protected field: powerbi.DataViewCategoryColumn;
protected defaultSelect: powerbi.DataViewValueColumn;
protected defaultStart: powerbi.DataViewValueColumn;
protected defaultEnd: powerbi.DataViewValueColumn;
protected checkFieldChange(field: powerbi.DataViewCategoryColumn):boolean{
//Field is not null, so first check the old field
if(!this.field){
return true;
}
if(field.source.queryName==this.field.source.queryName){
console.debug('checkFieldChange: false');
return false;
}else{
console.debug('checkFieldChange: true');
return true;
}
}
protected abstract checkDefaultSelectionChange(defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn):boolean;
protected checkFieldAndDefaultSelectionChange(field: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn){
console.debug('checkFieldAndDefaultSelectionChange start');
let flag:boolean=this.checkFieldChange(field)||this.checkDefaultSelectionChange(defaultSelect,defaultStart,defaultEnd)
console.debug('checkFieldAndDefaultSelectionChange end, result:',flag);
return flag;
}
constructor(manager: ISelectorManager){
console.debug("Abstract selector:","constructor start");
this.manager=manager;
@ -67,59 +95,105 @@ abstract class Selector implements ISelector{
public abstract update(field: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn):void;
}
class DropDownSelector extends Selector{
protected checkDefaultSelectionChange(defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn): boolean {
//The defaultSelect is nullable, so first check the new defaultSelect
console.debug('checkDefaultSelectionChange start');
let flag:boolean;
if(!defaultSelect||!defaultSelect.values||!defaultSelect.values[0]){
console.debug('new defaultSelect is null, set flag=false')
flag=flag||false;
}else{
if(!this.defaultSelect||!this.defaultSelect.values||!defaultSelect.values[0]){
console.debug('previous defaultSelect is null, set flag=true');
flag=flag||true;
}else{
if(defaultSelect.values[0].toString()!=this.defaultSelect.values[0].toString()){
console.debug('new defaultSelect not equal to the previous, set flag=true');
flag=flag||true;
}else{
console.debug('new defaultSelect equal to the previous, set flag=false');
flag=flag||false;
}
}
}
console.debug('checkDefaultSelectionChange end, result:',flag);
return flag;
}
private dropDown:Selection<HTMLSelectElement>;
protected createView() {
console.debug('dropDownViewManager','createView start');
this.dropDown=this.manager.selectorContainer.append("select").classed("dropDown-selector",true).classed("selector",true).attr("multiple",true);
this.dropDown=this.manager.selectorContainer.append("select").classed("dropDown-selector",true).classed("selector",true);//.attr("multiple",false);
let filterManager:IFilterManager=this.manager.filterManager;
this.dropDown.on("input change",function(){
console.debug('DropDownSelector:',"input change");
console.debug('this',this);
console.debug('filterManager:',filterManager);
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);
selectedValues.push(option.text);
}
}
if(selectedValues.length==0){
}else{
console.debug("selection.length",selectedValues.length);
filterManager.filterStringField(selectedValues);
}
console.debug("this",this.selectedOptions);
});
console.debug('dropDownViewManager','createView end');
}
public dispose(){
console.debug('dropDown-selector disposing');
this.dropDown.remove();
console.debug('dropDown-selector disposed');
}
public update(field: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn) {
console.debug('dropDownViewManager','update start');
let options=this.dropDown.selectAll("option").data(field.values,function(d){return d.toString();});//map data
options.enter().append("option").text(function(d){return d.toString();}).attr('dropDown-option');//add
//Check field, defaultSelect are changed or not
let needUpdateDefaultSelection:boolean=this.checkFieldAndDefaultSelectionChange(field,defaultSelect,defaultStart,defaultEnd);
let newDefaultSelect:string;
if(needUpdateDefaultSelection&&defaultSelect&&defaultSelect.values&&defaultSelect.values[0]){
newDefaultSelect=defaultSelect.values[0].toString();
console.debug('newDefaultSelect:',newDefaultSelect);
}
let options:d3.Selection<HTMLOptionElement, powerbi.PrimitiveValue, HTMLSelectElement, any>=<d3.Selection<HTMLOptionElement, powerbi.PrimitiveValue, HTMLSelectElement, any>>this.dropDown.selectAll("option").data(field.values,function(d){return d.toString();});//map data
options.exit().remove();//delete
console.debug("dropDown:",this.dropDown);
let filterManager:IFilterManager=this.manager.filterManager;
// this.dropDown.on("input change",function(){
// console.debug('DropDownSelector:',"input change");
// console.debug('this',this);
// console.debug('filterManager:',filterManager);
// 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);
// selectedValues.push(option.text);
// }
// }
// if(selectedValues.length==0){
// }else{
// console.debug("selection.length",selectedValues.length);
// filterManager.filterStringField(selectedValues);
// }
// console.debug("this",this.selectedOptions);
// });
$('.dropDown-selector').multiselect({
onChange:function(){
let selectedValues:string[]=[];
$('option:selected').map(function(a,item){
selectedValues.push(item.textContent);
console.debug('item:',item.textContent);
filterManager.filterStringField(selectedValues);
});
},
maxHeight:100,
includeSelectAllOption:true
if(needUpdateDefaultSelection&&newDefaultSelect){
console.debug('reset defaultSelection start');
options=options.enter().append("option")
.text(function(d){return d.toString();})
.attr('label',function(d){return d.toString();})
.classed('dropDown-option',true)
.merge(options)
.property("selected",function(d){
console.debug('d.toString():',d.toString());
console.debug('newDefaultSelect:',newDefaultSelect);
return (d.toString()==newDefaultSelect)?'selected':null;
});
this.dropDown.dispatch('change');
console.debug('reset defaultSelection end');
}else{
console.debug('defaultSelection not reset, start update options');
options.enter().append("option").text(function(d){return d.toString();}).attr('label',function(d){return d.toString();}).classed('dropDown-option',true);//add
console.debug('defaultSelection not reset, end update options');
}
console.debug("dropDown:",this.dropDown);
this.field=field;
this.defaultSelect=defaultSelect;
console.debug('dropDownViewManager','update end');
}
}
class ListSelector extends Selector{
protected checkDefaultSelectionChange(defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn): boolean {
throw new Error("Method not implemented.");
}
public dispose() {
throw new Error("Method not implemented.");
}
@ -132,6 +206,9 @@ class ListSelector extends Selector{
}
}
class CalendarSelector extends Selector{
protected checkDefaultSelectionChange(defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn): boolean {
throw new Error("Method not implemented.");
}
public dispose() {
throw new Error("Method not implemented.");
}

19
src/visual/visual.ts
View File

@ -54,7 +54,6 @@ export class Visual implements IVisual {
private settings: VisualSettings;
private layoutManager: visualInterfaces.ILayoutManager;
private selectorManager: visualInterfaces.ISelectorManager;
private view:SVGElement;
private filterManager:visualInterfaces.IFilterManager;
private selectionManager:powerbi.extensibility.ISelectionManager;
constructor(options: VisualConstructorOptions) {
@ -63,6 +62,8 @@ export class Visual implements IVisual {
if (document) {
this.selectionManager =options.host.createSelectionManager();
let container=d3.select(options.element).append("div").classed("container",true);
//overload context menu
// d3.select(options.element).on('contextmenu', () => {
// const mouseEvent: MouseEvent = <MouseEvent>d3.event;
// //const eventTarget: EventTarget = mouseEvent.target;
@ -73,12 +74,14 @@ export class Visual implements IVisual {
// });
// //mouseEvent.preventDefault();
// });
let headerContainer=container.append("div").classed("header-container",true);
let selectorContainer=container.append("div").classed("selector-container",true);
//First, create the filterManager
this.filterManager=ManagerFactory.CreateFilterManager(FilterManager,options.host);
//Then, layoutManager and selectorManager
//Then, layoutManager and selectorManager, both use the filterManager
//Lagyoutmanager manage the whole div and the slicer-header
this.layoutManager=ManagerFactory.CreateLayoutManager(LayoutManager,container,this.filterManager);
//SelectorManager manage selectors
let selectorContainer=container.append("div").classed("selector-container",true);
this.selectorManager=ManagerFactory.CreateSelectorManager(SelectorManager,selectorContainer,this.filterManager);
}
console.debug('end constructor');
@ -112,12 +115,14 @@ export class Visual implements IVisual {
console.debug("start layoutManager updateView");
this.layoutManager.update(dataView,width-10,height-10);
console.debug("start selectorManager updateView");
this.selectorManager.updateData(field,defaultSelect,defaultStart,defaultEnd);
console.debug("start filterManager updateView");
this.filterManager.update(field);
this.events.renderingFinished(options);
console.debug("start selectorManager updateView");
this.selectorManager.updateData(field,defaultSelect,defaultStart,defaultEnd);
}
private static parseSettings(dataView: DataView): VisualSettings {

6
src/visual/visualInterfaces.ts
View File

@ -14,6 +14,7 @@ Main interfaces
export interface ILayoutManager{
layout:Selection<HTMLElement>;
update(dataView:DataView,width:number,height:number):void;
dispose():void;
}
export interface ILayoutManagerConstructor{
new(container:Selection<HTMLElement>,filterManager:IFilterManager):ILayoutManager;
@ -23,19 +24,20 @@ export interface ILayoutManagerConstructor{
export interface ISelectorManager{
selectorContainer:Selection<HTMLElement>;
filterManager:IFilterManager;
updateData(field:powerbi.DataViewCategoryColumn,defaultSelect:powerbi.DataViewValueColumn,defaultStart:powerbi.DataViewValueColumn,defaultEnd:powerbi.DataViewValueColumn);
dispose():void;
updateData(field:powerbi.DataViewCategoryColumn,defaultSelect:powerbi.DataViewValueColumn,defaultStart:powerbi.DataViewValueColumn,defaultEnd:powerbi.DataViewValueColumn):void;
}
export interface ISelectorManagerConstructor{
new(selectorContainer:Selection<HTMLElement>,filterManager:IFilterManager):ISelectorManager;
}
//IFilterManager
export interface IFilterManager{
update(field:powerbi.DataViewCategoryColumn):void;
filterStringField(selection:string[]):void;
clear():void;
dispose():void;
}
export interface IFilterManagerConstructor{
new(host:IVisualHost):IFilterManager;

2
style/visual.less
View File

@ -1,5 +1,3 @@
@import "/node_modules/bootstrap/dist/css/bootstrap.min.css";
@import "/node_modules/bootstrap-multiselect/dist/css/bootstrap-multiselect.css";
p {
font-size: 20px;
font-weight: bold;

53
webpack.statistics.dev.html
View File

File diff suppressed because one or more lines are too long

53
webpack.statistics.prod.html
View File

File diff suppressed because one or more lines are too long