decrete selectors, add some formats

package.json

@@ -12,9 +12,9 @@
     "@types/d3": "5.7.2",
     "core-js": "3.2.1",
     "d3": "5.12.0",
+    "powerbi-models": "^1.3.3",
     "powerbi-visuals-api": "~2.6.1",
-    "powerbi-visuals-utils-dataviewutils": "2.2.1",
+    "powerbi-visuals-utils-dataviewutils": "2.2.1"
-    "powerbi-models": "^1.3.3"
   },
   "devDependencies": {
     "ts-loader": "6.1.0",

pbiviz.json

@@ -18,6 +18,7 @@
         "icon": "assets/icon.png"
     },
     "externalJS": [
+        "./src/cover.js"
     ],
     "style": "style/visual.less",
     "capabilities": "capabilities.json",

src/cover.js

@@ -0,0 +1,7 @@
+var Debug=true;
+function blankConsoleDebug(){
+    return;
+}
+if(!Debug){
+    console.debug=blankConsoleDebug;
+}

src/coverJquery.js

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

src/managers/selectorManager.ts

@@ -1,17 +1,16 @@
 "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";
 import * as settings from "../settings";
+import * as selectors from "./selectors";
 type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;
 /*
 负责页面上选择器的展示
 */
 export class SelectorManager implements ISelectorManager{
     public selectorContainer : Selection<HTMLElement>;
-    private selector:ISelector;
+    private selector:selectors.ISelector;
     public filterManager:IFilterManager;
     private categories: powerbi.DataViewCategoryColumn;
     private defaultSelect: powerbi.DataViewValueColumn;
@@ -22,11 +21,11 @@ export class SelectorManager implements ISelectorManager{
         this.selectorContainer=selectorContainer;
         this.filterManager=filterManager;
     }
-    updateFormat(visualSettings:settings.VisualSettings): void {
+    updateFormat(visualSettings:settings.VisualSettings,width:number,height:number): void {
         console.debug('selectorManager updateFormat start');
         console.debug('visualSettings:',visualSettings);
         if(visualSettings&&visualSettings.items){
-            this.selector.updateFormat(visualSettings.items);
+            this.selector.updateFormat(visualSettings.items,width,height);
         }
         console.debug('selectorManager updateFormat end');
 
@@ -35,7 +34,7 @@ export class SelectorManager implements ISelectorManager{
         this.selector.dispose();
         this.selectorContainer.remove();
     }
-    public switchSelector<T extends ISelector>(classSelector:new ()=>T){
+    public switchSelector<T extends selectors.ISelector>(classSelector:new ()=>T){
         let newSelector=new classSelector();
         this.selector?.dispose();
         this.selector=newSelector;
@@ -45,11 +44,14 @@ export class SelectorManager implements ISelectorManager{
         if(!this.selector){
             let fieldType=field.source.type;
             if(fieldType.text){
-                this.selector=new DropDownSelector(this);
+                let dropDownSelectorContainer=this.selectorContainer.append("div").classed("dropDown-selector-container",true);
+                this.selector=new selectors.DropDownSelector(dropDownSelectorContainer,this.filterManager);
             }else if(fieldType.numeric){
-                this.selector=new DropDownSelector(this);
+                let dropDownSelectorContainer=this.selectorContainer.append("div").classed("dropDown-selector-container",true);
+                this.selector=new selectors.DropDownSelector(dropDownSelectorContainer,this.filterManager);
             }else if(fieldType.dateTime){
-                this.selector=new CalendarSelector(this);
+                let dropDownSelectorContainer=this.selectorContainer.append("div").classed("dropDown-selector-container",true);
+                this.selector=new selectors.DropDownSelector(dropDownSelectorContainer,this.filterManager);
             }else{
                 throw "only receive text/num/datetime field";
             }
@@ -58,190 +60,3 @@ export class SelectorManager implements ISelectorManager{
         this.selector.update(field, defaultSelect, defaultStart, defaultEnd);
     };
 }
-
-interface ISelector{
-    update(field: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn);
-    dispose():void;
-    updateFormat(itemsSetting:settings.ItemsSetting);
-}
-
-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;
-        this.createView();
-    }
-    public abstract updateFormat(itemsSetting: settings.ItemsSetting);
-    protected abstract createView():void;
-    public abstract dispose():void;
-    protected readonly manager:ISelectorManager;
-    public abstract update(field: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn):void;
-}
-class DropDownSelector extends Selector{
-    public updateFormat(itemsSetting: settings.ItemsSetting) {
-        if(itemsSetting){
-            if(itemsSetting.backgroundColor){
-                this.dropDown.style('background-color',itemsSetting.backgroundColor?itemsSetting.backgroundColor:"transparent");
-            }
-        }
-    }
-    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{
-            console.debug('new defaultSelect is not null, check the oldDefaultSelect');
-            console.debug('new defaultSelect:',defaultSelect);
-            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",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');
-        //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
-        
-        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)
-                    .attr("selected",function(d){
-                        console.debug('d.toString():',d.toString());
-                        console.debug('newDefaultSelect:',newDefaultSelect);
-                        return (d.toString()==newDefaultSelect)?'selected':null;
-                    });
-            //this.manager.filterManager.filterStringField([newDefaultSelect]);//No matter what, filter after defaultSelection changing
-            console.debug('Set 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('new defaultSelect:',defaultSelect);
-        console.debug('this.defaultSelect=defaultSelect, this.defaultSelect:',this.defaultSelect);
-        this.dropDown.dispatch('change');
-        console.debug('dropDownViewManager','update end');
-    }
-}
-class ListSelector extends Selector{
-    public updateFormat(itemsSetting: settings.ItemsSetting) {
-        throw new Error("Method not implemented.");
-    }
-    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.");
-    }
-    protected createView() {
-        throw new Error("Method not implemented.");
-    }
-    public update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn) {
-        console.debug('ListSelector','updateView');
-        let dropDownSelector=this.manager.selectorContainer.append("select").classed("listSelector");
-    }
-}
-class CalendarSelector extends Selector{
-    public updateFormat(itemsSetting: settings.ItemsSetting) {
-        throw new Error("Method not implemented.");
-    }
-    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.");
-    }
-    protected createView() {
-        throw new Error("Method not implemented.");
-    }
-    public update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn) {
-        console.debug('calendarViewManager','updateView');
-        let dropDownSelector=this.manager.selectorContainer.append("select").classed("listSelector");
-    }
-}

src/managers/selectors.ts/index.ts

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

src/managers/selectors/dropDownSelector.ts

@@ -0,0 +1,133 @@
+import { Selector } from "./selector";
+import * as settings from "../../settings";
+import powerbi from "powerbi-visuals-api";
+import * as d3 from "d3";
+import { IFilterManager } from "../../visual/visualInterfaces";
+type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;
+
+export class DropDownSelector extends Selector {
+    public updateFormat(itemsSetting: settings.ItemsSetting, width: number, height: number) {
+        console.debug('dropDownSelector updateFormat start');
+        if (itemsSetting) {
+            this.dropDown.style('background-color', itemsSetting.backgroundColor)
+                .attr('postion','absolute')
+                .style('color', itemsSetting.fontColor)
+                .style('font-size', itemsSetting.textSize + 'px')
+                .style('width', (width - 10) + 'px')
+                .style('border-style', settings.Enums.getOutlineStyle(itemsSetting.outline))
+                .style('border-width', '2px')
+                .style('border-color', 'black');
+            this.dropDown.selectAll('option').style('background-color', itemsSetting.backgroundColor)
+                .style('padding','0px 0px')
+                .style('color', itemsSetting.fontColor)
+                .style('font-size', itemsSetting.textSize + 'px')
+                .style('width', (width - 10) + 'px')
+                .style('border-style', settings.Enums.getOutlineStyle(itemsSetting.outline))
+                .style('border-width', '2px')
+                .style('border-color', 'black')
+                .style('maxHeight','200px');
+        }
+        console.debug('dropDownSelector updateFormat end');
+    }
+    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 {
+            console.debug('new defaultSelect is not null, check the oldDefaultSelect');
+            console.debug('new defaultSelect:', defaultSelect);
+            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 container: Selection<HTMLDivElement>;
+    private dropDown: Selection<HTMLSelectElement>;
+    protected createView(container: Selection<HTMLDivElement>) {
+        console.debug('dropDownViewManager', 'createView start');
+        this.container = container;
+        this.dropDown = this.container.append("select").classed("dropDown-selector", true).classed("selector", true);//.attr("multiple",false);
+        let filterManager: IFilterManager = this.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');
+        //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
+
+        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)
+                .attr("selected", function (d) {
+                    console.debug('d.toString():', d.toString());
+                    console.debug('newDefaultSelect:', newDefaultSelect);
+                    return (d.toString() == newDefaultSelect) ? 'selected' : null;
+                });
+            //this.manager.filterManager.filterStringField([newDefaultSelect]);//No matter what, filter after defaultSelection changing
+            console.debug('Set 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('new defaultSelect:', defaultSelect);
+        console.debug('this.defaultSelect=defaultSelect, this.defaultSelect:', this.defaultSelect);
+        this.dropDown.dispatch('change');
+        console.debug('dropDownViewManager', 'update end');
+    }
+}

src/managers/selectors/index.ts

@@ -0,0 +1,5 @@
+/*
+In the future, move all selectors here.
+*/
+export {ISelector,Selector} from "./selector";
+export {DropDownSelector} from "./dropDownSelector";

src/managers/selectors/selector.ts

@@ -0,0 +1,47 @@
+import powerbi from "powerbi-visuals-api";
+import * as settings from "../../settings";
+import {IFilterManager} from "../../visual/visualInterfaces";
+import * as d3 from "d3";
+type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;
+export interface ISelector{
+    update(field: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn):void;
+    dispose():void;
+    updateFormat(itemsSetting:settings.ItemsSetting,width:number,height:number):void;
+}
+
+export 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(container:Selection<HTMLDivElement>,filterManager: IFilterManager){
+        console.debug("Abstract selector:","constructor start");
+        this.filterManager=filterManager;
+        this.createView(container);
+    }
+    public abstract updateFormat(itemsSetting: settings.ItemsSetting,width:number,height:number);
+    protected abstract createView(container:Selection<HTMLDivElement>):void;
+    public abstract dispose():void;
+    protected readonly filterManager:IFilterManager;
+    public abstract update(field: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn):void;
+}

src/settings/enums/index.ts

@@ -1 +1 @@
-export {Outline} from "./outline";
+export {Outline,getOutlineStyle} from "./outline";

src/settings/enums/outline.ts

@@ -2,3 +2,37 @@
 export enum Outline {
     None, BottomOnly, TopOnly, LeftOnly, RightOnly, TopAndBottom, LeftAndRight, Frame
 }
+
+
+export function getOutlineStyle(outline: Outline): string {
+    let outlineStyle: string;
+    switch (outline) {
+        case Outline.None:
+            outlineStyle = 'none';
+            break;
+        case Outline.BottomOnly:
+            outlineStyle = 'none none solid none';
+            break;
+        case Outline.TopOnly:
+            outlineStyle = 'solid none none none';
+            break;
+        case Outline.LeftOnly:
+            outlineStyle = 'none none none solid';
+            break;
+        case Outline.RightOnly:
+            outlineStyle = 'none solid none none';
+            break;
+        case Outline.TopAndBottom:
+            outlineStyle = 'solid none';
+            break;
+        case Outline.LeftAndRight:
+            outlineStyle = 'none solid';
+            break;
+        case Outline.Frame:
+            outlineStyle = 'solid';
+            break;
+        default:
+            break;
+    }
+    return outlineStyle;
+}

src/settings/itemsSetting.ts

@@ -2,7 +2,7 @@
 import * as enums from "./enums"
 export class ItemsSetting{
     public fontColor:string="black";
-    public backgroundColor:string='';
+    public backgroundColor:string='transparent';
     public outline:enums.Outline=enums.Outline.None;
     public textSize:number=10;
 }

src/visual/visual.ts

@@ -112,14 +112,14 @@ export class Visual implements IVisual {
         let height:number=options.viewport.height;
         
         console.debug("start layoutManager updateView");
-        this.layoutManager.update(dataView,width-10,height-10);
+        this.layoutManager.update(dataView,width,height);
 
         console.debug("start filterManager updateView");
         this.filterManager.update(field);
         
         console.debug("start selectorManager updateView");
         this.selectorManager.updateData(field,defaultSelect,defaultStart,defaultEnd);
-        //this.selectorManager.updateFormat(this.settings);
+        this.selectorManager.updateFormat(this.settings,width,height);
         
         console.debug('visual update end');
         this.events.renderingFinished(options);

src/visual/visualInterfaces.ts

@@ -29,7 +29,7 @@ export interface ISelectorManager{
     filterManager:IFilterManager;
     dispose():void;
     updateData(field:powerbi.DataViewCategoryColumn,defaultSelect:powerbi.DataViewValueColumn,defaultStart:powerbi.DataViewValueColumn,defaultEnd:powerbi.DataViewValueColumn):void;
-    updateFormat(visualSettings:VisualSettings):void;
+    updateFormat(visualSettings:VisualSettings,width:number,height:number):void;
 }
 export interface ISelectorManagerConstructor{
     new(selectorContainer:Selection<HTMLElement>,filterManager:IFilterManager):ISelectorManager;