Now I can use the bootstrap-select
This commit is contained in:
parent
515f69dd55
commit
56811702d2
47
package-lock.json
generated
47
package-lock.json
generated
@ -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": {
|
||||
"version": "5.7.2",
|
||||
"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",
|
||||
"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": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
|
||||
@ -316,6 +338,26 @@
|
||||
"integrity": "sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==",
|
||||
"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": {
|
||||
"version": "1.1.11",
|
||||
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
|
||||
@ -774,6 +816,11 @@
|
||||
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
|
||||
"dev": true
|
||||
},
|
||||
"jquery": {
|
||||
"version": "2.2.4",
|
||||
"resolved": "https://registry.npmjs.org/jquery/-/jquery-2.2.4.tgz",
|
||||
"integrity": "sha1-LInWiJterFIqfuoywUUhVZxsvwI="
|
||||
},
|
||||
"js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
|
@ -9,14 +9,20 @@
|
||||
"dependencies": {
|
||||
"@babel/runtime": "7.6.0",
|
||||
"@babel/runtime-corejs2": "7.6.0",
|
||||
"@types/bootstrap": "^3.4.0",
|
||||
"@types/d3": "5.7.2",
|
||||
"@types/jquery": "^2.0.54",
|
||||
"bootstrap": "^3.4.1",
|
||||
"bootstrap-multiselect": "^0.9.15",
|
||||
"core-js": "3.2.1",
|
||||
"d3": "5.12.0",
|
||||
"jquery": "^2.2.4",
|
||||
"powerbi-models": "^1.3.3",
|
||||
"powerbi-visuals-api": "~2.6.1",
|
||||
"powerbi-visuals-utils-dataviewutils": "2.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/bootstrap-multiselect": "^0.9.0",
|
||||
"ts-loader": "6.1.0",
|
||||
"tslint": "^5.18.0",
|
||||
"tslint-microsoft-contrib": "^6.2.0",
|
||||
|
17
pbiviz.json
17
pbiviz.json
@ -5,19 +5,24 @@
|
||||
"guid": "syinpoSlicer1E14A7D0BD9E4C9B99612FBE9E84697A",
|
||||
"visualClassName": "Visual",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"supportUrl": "",
|
||||
"gitHubUrl": ""
|
||||
"description": "A slicer, default selected according to messures.",
|
||||
"supportUrl": "https://github.com/mujiannan/syinpoSlicer",
|
||||
"gitHubUrl": "https://github.com/mujiannan/syinpoSlicer"
|
||||
},
|
||||
"apiVersion": "2.6.0",
|
||||
"author": {
|
||||
"name": "",
|
||||
"email": ""
|
||||
"name": "shennan",
|
||||
"email": "shennan@syinpo.com"
|
||||
},
|
||||
"assets": {
|
||||
"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",
|
||||
"capabilities": "capabilities.json",
|
||||
"dependencies": null,
|
||||
|
3
src/coverJquery.js
Normal file
3
src/coverJquery.js
Normal file
@ -0,0 +1,3 @@
|
||||
var jQuery = typeof jQuery !== 'undefined'
|
||||
? jQuery
|
||||
: window['$'];
|
@ -24,7 +24,7 @@ export class FilterManager implements IFilterManager{
|
||||
console.debug("filterManager update end, now filter:",this.target);
|
||||
}
|
||||
public filterStringField(selection:string[]):void{
|
||||
console.debug("filterStringField start");
|
||||
console.debug("filterStringField start:",selection);
|
||||
let jsonFilter:models.IBasicFilter={
|
||||
"$schema": "http://powerbi.com/product/schema#basic",
|
||||
"target": this.target,
|
||||
|
@ -1,8 +1,9 @@
|
||||
"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 {ISelectorManager,ISelectorManagerConstructor, IFilterManager} from "../visual/visualInterfaces";
|
||||
import * as d3 from "d3";
|
||||
|
||||
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.createView();
|
||||
}
|
||||
protected abstract createView();
|
||||
public abstract dispose();
|
||||
protected abstract createView():void;
|
||||
public abstract dispose():void;
|
||||
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{
|
||||
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) {
|
||||
console.debug('dropDownViewManager','update start');
|
||||
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
|
||||
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);
|
||||
// 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
|
||||
});
|
||||
|
||||
console.debug('dropDownViewManager','update end');
|
||||
}
|
||||
}
|
||||
|
3
src/managers/selectors.ts/index.ts
Normal file
3
src/managers/selectors.ts/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
/*
|
||||
In the future, move all selectors here.
|
||||
*/
|
@ -1,3 +1,5 @@
|
||||
@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;
|
||||
|
File diff suppressed because one or more lines are too long
53
webpack.statistics.prod.html
Normal file
53
webpack.statistics.prod.html
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user