Now I can use the bootstrap-select

package-lock.json

@@ -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",

package.json

@@ -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",

pbiviz.json

@@ -5,19 +5,24 @@
         "guid": "syinpoSlicer1E14A7D0BD9E4C9B99612FBE9E84697A",
         "visualClassName": "Visual",
         "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",
     "author": {
-        "name": "",
+        "name": "shennan",
-        "email": ""
+        "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,

src/coverJquery.js

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

src/managers/filterManager.ts

@@ -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,

src/managers/selectorManager.ts

@@ -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();
+    protected abstract createView():void;
-    public abstract dispose();
+    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(){
+        // 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');
     }
 }

src/managers/selectors.ts/index.ts

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

style/visual.less

@@ -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;