From 56811702d278727dd62ee6736847ea6d0cc3bb93 Mon Sep 17 00:00:00 2001 From: MuJianNan Date: Wed, 29 Apr 2020 23:16:02 +0800 Subject: [PATCH] Now I can use the bootstrap-select --- package-lock.json | 47 ++++++++++++++++++++++ package.json | 6 +++ pbiviz.json | 17 +++++--- src/coverJquery.js | 3 ++ src/managers/filterManager.ts | 2 +- src/managers/selectorManager.ts | 63 ++++++++++++++++++------------ src/managers/selectors.ts/index.ts | 3 ++ style/visual.less | 2 + webpack.statistics.dev.html | 4 +- webpack.statistics.prod.html | 53 +++++++++++++++++++++++++ 10 files changed, 166 insertions(+), 34 deletions(-) create mode 100644 src/coverJquery.js create mode 100644 src/managers/selectors.ts/index.ts create mode 100644 webpack.statistics.prod.html diff --git a/package-lock.json b/package-lock.json index 5f06da3..42be90a 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 3e1d041..304bf25 100644 --- a/package.json +++ b/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", diff --git a/pbiviz.json b/pbiviz.json index c7bd230..35b0ad4 100644 --- a/pbiviz.json +++ b/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, diff --git a/src/coverJquery.js b/src/coverJquery.js new file mode 100644 index 0000000..a8ab936 --- /dev/null +++ b/src/coverJquery.js @@ -0,0 +1,3 @@ +var jQuery = typeof jQuery !== 'undefined' + ? jQuery + : window['$']; \ No newline at end of file diff --git a/src/managers/filterManager.ts b/src/managers/filterManager.ts index 19a57f4..56138dd 100644 --- a/src/managers/filterManager.ts +++ b/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, diff --git a/src/managers/selectorManager.ts b/src/managers/selectorManager.ts index 63c019e..c19f74c 100644 --- a/src/managers/selectorManager.ts +++ b/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 = d3.Selection; /* 负责页面上选择器的展示 @@ -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; @@ -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 - Webpack Bundle Analyzer [28 Apr 2020 at 21:26] + Webpack Bundle Analyzer [29 Apr 2020 at 22:12] diff --git a/webpack.statistics.prod.html b/webpack.statistics.prod.html new file mode 100644 index 0000000..8c5d340 --- /dev/null +++ b/webpack.statistics.prod.html @@ -0,0 +1,53 @@ + + + + + + Webpack Bundle Analyzer [29 Apr 2020 at 02:22] + + + + + + + + + + + +
+ + +