Now I can use the bootstrap-select

This commit is contained in:
沐见南 2020-04-29 23:16:02 +08:00
parent 515f69dd55
commit 56811702d2
10 changed files with 166 additions and 34 deletions

47
package-lock.json generated
View File

@ -53,6 +53,23 @@
} }
} }
}, },
"@types/bootstrap": {
"version": "3.4.0",
"resolved": "https://registry.npmjs.org/@types/bootstrap/-/bootstrap-3.4.0.tgz",
"integrity": "sha512-LS05hVAAsX86qbHg7W+ydwBlNHrVCoFw6wEP3/uW4eYmRXl08bWmPeN/+onM+8qZTFfDgUlG/OItJI8SW972oQ==",
"requires": {
"@types/jquery": "*"
}
},
"@types/bootstrap-multiselect": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/@types/bootstrap-multiselect/-/bootstrap-multiselect-0.9.0.tgz",
"integrity": "sha512-tJU7V4ORRMdyqA9GoN6KepewlQwKjcCPQC4GrP2cow/ixr1FO6hi4FKfVrgxLg/KnRKCZvJnNthvSXz1y7qqRQ==",
"dev": true,
"requires": {
"@types/jquery": "*"
}
},
"@types/d3": { "@types/d3": {
"version": "5.7.2", "version": "5.7.2",
"resolved": "https://registry.npmjs.org/@types/d3/-/d3-5.7.2.tgz", "resolved": "https://registry.npmjs.org/@types/d3/-/d3-5.7.2.tgz",
@ -286,6 +303,11 @@
"resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz", "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz",
"integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==" "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ=="
}, },
"@types/jquery": {
"version": "2.0.54",
"resolved": "https://registry.npmjs.org/@types/jquery/-/jquery-2.0.54.tgz",
"integrity": "sha512-D/PomKwNkDfSKD13DEVQT/pq2TUjN54c6uB341fEZanIzkjfGe7UaFuuaLZbpEiS5j7Wk2MUHAZqZIoECw29lg=="
},
"ansi-styles": { "ansi-styles": {
"version": "3.2.1", "version": "3.2.1",
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
@ -316,6 +338,26 @@
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==", "integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
"dev": true "dev": true
}, },
"bootstrap": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-3.4.1.tgz",
"integrity": "sha512-yN5oZVmRCwe5aKwzRj6736nSmKDX7pLYwsXiCj/EYmo16hODaBiT4En5btW/jhBF/seV+XMx3aYwukYC3A49DA=="
},
"bootstrap-multiselect": {
"version": "0.9.15",
"resolved": "https://registry.npmjs.org/bootstrap-multiselect/-/bootstrap-multiselect-0.9.15.tgz",
"integrity": "sha512-UwF32a0QR82xkEEGpuNrn57Bu0b/7DfCuoiOaziSHfQKFj5arR6c7+MYLs5RiIf3zl4XZ+YnY7ZBi6/EN3vEZA==",
"requires": {
"jquery": "~2.1.3"
},
"dependencies": {
"jquery": {
"version": "2.1.4",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-2.1.4.tgz",
"integrity": "sha1-IoveaYoMYUMdwmMKahVPFYkNIxc="
}
}
},
"brace-expansion": { "brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@ -774,6 +816,11 @@
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=", "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
"dev": true "dev": true
}, },
"jquery": {
"version": "2.2.4",
"resolved": "https://registry.npmjs.org/jquery/-/jquery-2.2.4.tgz",
"integrity": "sha1-LInWiJterFIqfuoywUUhVZxsvwI="
},
"js-tokens": { "js-tokens": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",

View File

@ -9,14 +9,20 @@
"dependencies": { "dependencies": {
"@babel/runtime": "7.6.0", "@babel/runtime": "7.6.0",
"@babel/runtime-corejs2": "7.6.0", "@babel/runtime-corejs2": "7.6.0",
"@types/bootstrap": "^3.4.0",
"@types/d3": "5.7.2", "@types/d3": "5.7.2",
"@types/jquery": "^2.0.54",
"bootstrap": "^3.4.1",
"bootstrap-multiselect": "^0.9.15",
"core-js": "3.2.1", "core-js": "3.2.1",
"d3": "5.12.0", "d3": "5.12.0",
"jquery": "^2.2.4",
"powerbi-models": "^1.3.3", "powerbi-models": "^1.3.3",
"powerbi-visuals-api": "~2.6.1", "powerbi-visuals-api": "~2.6.1",
"powerbi-visuals-utils-dataviewutils": "2.2.1" "powerbi-visuals-utils-dataviewutils": "2.2.1"
}, },
"devDependencies": { "devDependencies": {
"@types/bootstrap-multiselect": "^0.9.0",
"ts-loader": "6.1.0", "ts-loader": "6.1.0",
"tslint": "^5.18.0", "tslint": "^5.18.0",
"tslint-microsoft-contrib": "^6.2.0", "tslint-microsoft-contrib": "^6.2.0",

View File

@ -5,19 +5,24 @@
"guid": "syinpoSlicer1E14A7D0BD9E4C9B99612FBE9E84697A", "guid": "syinpoSlicer1E14A7D0BD9E4C9B99612FBE9E84697A",
"visualClassName": "Visual", "visualClassName": "Visual",
"version": "1.0.0", "version": "1.0.0",
"description": "", "description": "A slicer, default selected according to messures.",
"supportUrl": "", "supportUrl": "https://github.com/mujiannan/syinpoSlicer",
"gitHubUrl": "" "gitHubUrl": "https://github.com/mujiannan/syinpoSlicer"
}, },
"apiVersion": "2.6.0", "apiVersion": "2.6.0",
"author": { "author": {
"name": "", "name": "shennan",
"email": "" "email": "shennan@syinpo.com"
}, },
"assets": { "assets": {
"icon": "assets/icon.png" "icon": "assets/icon.png"
}, },
"externalJS": null, "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", "style": "style/visual.less",
"capabilities": "capabilities.json", "capabilities": "capabilities.json",
"dependencies": null, "dependencies": null,

3
src/coverJquery.js Normal file
View File

@ -0,0 +1,3 @@
var jQuery = typeof jQuery !== 'undefined'
? jQuery
: window['$'];

View File

@ -24,7 +24,7 @@ export class FilterManager implements IFilterManager{
console.debug("filterManager update end, now filter:",this.target); console.debug("filterManager update end, now filter:",this.target);
} }
public filterStringField(selection:string[]):void{ public filterStringField(selection:string[]):void{
console.debug("filterStringField start"); console.debug("filterStringField start:",selection);
let jsonFilter:models.IBasicFilter={ let jsonFilter:models.IBasicFilter={
"$schema": "http://powerbi.com/product/schema#basic", "$schema": "http://powerbi.com/product/schema#basic",
"target": this.target, "target": this.target,

View File

@ -1,8 +1,9 @@
"Use strict"; "Use strict";
import "../../node_modules/bootstrap/dist/css/bootstrap.css";
import "../../node_modules/bootstrap-multiselect/dist/css/bootstrap-multiselect.css";
import powerbi from "powerbi-visuals-api"; import powerbi from "powerbi-visuals-api";
import {ISelectorManager,ISelectorManagerConstructor, IFilterManager} from "../visual/visualInterfaces"; import {ISelectorManager,ISelectorManagerConstructor, IFilterManager} from "../visual/visualInterfaces";
import * as d3 from "d3"; import * as d3 from "d3";
type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>; type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;
/* /*
@ -60,10 +61,10 @@ abstract class Selector implements ISelector{
this.manager=manager; this.manager=manager;
this.createView(); this.createView();
} }
protected abstract createView(); protected abstract createView():void;
public abstract dispose(); public abstract dispose():void;
protected readonly manager:ISelectorManager; protected readonly manager:ISelectorManager;
public abstract update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn); public abstract update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn):void;
} }
class DropDownSelector extends Selector{ class DropDownSelector extends Selector{
private dropDown:Selection<HTMLSelectElement>; private dropDown:Selection<HTMLSelectElement>;
@ -78,31 +79,43 @@ class DropDownSelector extends Selector{
public update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn) { public update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn) {
console.debug('dropDownViewManager','update start'); console.debug('dropDownViewManager','update start');
let options=this.dropDown.selectAll("option").data(categories.values,function(d){return d.toString();});//map data 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.enter().append("option").text(function(d){return d.toString();}).attr('dropDown-option');//add
options.exit().remove();//delete options.exit().remove();//delete
console.debug("dropDown:",this.dropDown); console.debug("dropDown:",this.dropDown);
let filterManager:IFilterManager=this.manager.filterManager; let filterManager:IFilterManager=this.manager.filterManager;
this.dropDown.on("input change",function(){ // this.dropDown.on("input change",function(){
console.debug('DropDownSelector:',"input change"); // console.debug('DropDownSelector:',"input change");
console.debug('this',this); // console.debug('this',this);
console.debug('filterManager:',filterManager); // console.debug('filterManager:',filterManager);
let selectedValues:string[]=[]; // let selectedValues:string[]=[];
for(let i=0;i<this.selectedOptions.length;i++){ // for(let i=0;i<this.selectedOptions.length;i++){
let option=this.selectedOptions.item(i); // let option=this.selectedOptions.item(i);
if(option.selected){ // if(option.selected){
console.debug("option selected",option); // console.debug("option selected",option);
console.debug('option.text:',option.text); // console.debug('option.text:',option.text);
selectedValues.push(option.text); // selectedValues.push(option.text);
} // }
} // }
if(selectedValues.length==0){ // if(selectedValues.length==0){
}else{ // }else{
console.debug("selection.length",selectedValues.length); // console.debug("selection.length",selectedValues.length);
filterManager.filterStringField(selectedValues); // filterManager.filterStringField(selectedValues);
} // }
console.debug("this",this.selectedOptions); // 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
}); });
console.debug('dropDownViewManager','update end'); console.debug('dropDownViewManager','update end');
} }
} }

View File

@ -0,0 +1,3 @@
/*
In the future, move all selectors here.
*/

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long