decrete selectors, add some formats

This commit is contained in:
沐见南 2020-05-03 20:06:05 +08:00
parent 82f4d1ecdc
commit 084a65c507
16 changed files with 247 additions and 211 deletions

View File

@ -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-models": "^1.3.3"
"powerbi-visuals-utils-dataviewutils": "2.2.1"
},
"devDependencies": {
"ts-loader": "6.1.0",

View File

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

7
src/cover.js Normal file
View File

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

View File

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

View File

@ -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");
}
}

View File

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

View File

@ -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');
}
}

View File

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

View File

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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