Build the frame

pbiviz.json

@@ -1 +1,25 @@
-{"visual":{"name":"syinpoSlicer","displayName":"SyinpoSlicer","guid":"syinpoSlicer1E14A7D0BD9E4C9B99612FBE9E84697A","visualClassName":"Visual","version":"1.0.0","description":"","supportUrl":"","gitHubUrl":""},"apiVersion":"2.6.0","author":{"name":"","email":""},"assets":{"icon":"assets/icon.png"},"externalJS":null,"style":"style/visual.less","capabilities":"capabilities.json","dependencies":null,"stringResources":[]}
+{
+    "visual": {
+        "name": "syinpoSlicer",
+        "displayName": "SyinpoSlicer",
+        "guid": "syinpoSlicer1E14A7D0BD9E4C9B99612FBE9E84697A",
+        "visualClassName": "Visual",
+        "version": "1.0.0",
+        "description": "",
+        "supportUrl": "",
+        "gitHubUrl": ""
+    },
+    "apiVersion": "2.6.0",
+    "author": {
+        "name": "",
+        "email": ""
+    },
+    "assets": {
+        "icon": "assets/icon.png"
+    },
+    "externalJS": null,
+    "style": "style/visual.less",
+    "capabilities": "capabilities.json",
+    "dependencies": null,
+    "stringResources": []
+}

src/managers/filterManager.ts

@@ -0,0 +1,23 @@
+"Use strict";
+import powerbi from "powerbi-visuals-api";
+import DataView = powerbi.DataView;
+import * as visualInterfaces from "../visual/visualInterfaces";
+import * as d3 from "d3";
+import { IFilterManager } from "../visual/visualInterfaces";
+export default class FilterManager implements IFilterManager{
+    applyFilter(): void {
+        throw new Error("Method not implemented.");
+    }
+    setJsonFilter(field: number | Text, select: number | Text): void;
+    setJsonFilter(field: number, start: number, end: number): void;
+    setJsonFilter(field: any, start: any, end?: any) {
+        throw new Error("Method not implemented.");
+    }
+    setJsonFitler(filter: Date, select: Date): void {
+        throw new Error("Method not implemented.");
+    }
+    applyJsonFilter(filter: powerbi.IFilter | powerbi.IFilter[], objectName: string, propertyName: string, action: powerbi.FilterAction): void {
+        
+    }
+
+}

src/managers/index.ts

@@ -0,0 +1,4 @@
+export {default as filterManager} from "./filterManager";
+export {default as layoutManager} from "./layoutManager";
+export {default as selectorManager} from "./selectorManager";
+export {default as managerFactory} from "./managerFactory";

src/managers/layoutManager.ts

@@ -2,13 +2,15 @@
 import powerbi from "powerbi-visuals-api";
 import DataView = powerbi.DataView;
 import * as visualInterfaces from "../visual/visualInterfaces";
-import * as viewManager from "./viewManager";
+import * as d3 from "d3";
-export class layoutManager implements layoutManager{
+import { ILayoutManager } from "../visual/visualInterfaces";
-    layout:HTMLElement;
+type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;
-    constructor(layout:HTMLElement){
+export default class LayoutManager implements ILayoutManager{
+    layout:Selection<HTMLElement>;
+    constructor(layout:Selection<HTMLElement>){
         this.layout=layout;
     }
-    updateLayout(dataView:DataView):visualInterfaces.viewManager{
+    update(dataView:DataView):void{
-        return new viewManager.dropDownViewManager();
+        
     }
 }

src/managers/managerFactory.ts

@@ -0,0 +1,16 @@
+"Use strict";
+import * as visualInterfaces from "../visual/visualInterfaces";
+import * as d3 from "d3";
+import powerbi from "powerbi-visuals-api";
+type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;
+export default class ManagerFactory{
+    public static CreateLayoutManager(classLayoutManager:visualInterfaces.ILayoutManagerConstructor,container:Selection<HTMLElement>):visualInterfaces.ILayoutManager{
+        return new classLayoutManager(container);
+    }
+    public static CreateSelectorManager(classSelectorManager:visualInterfaces.ISelectorManagerConstructor,container:Selection<HTMLElement>):visualInterfaces.ISelectorManager{
+        return new classSelectorManager(container);
+    }
+    public static CreateFilterManager(classSelectorManager:visualInterfaces.IFilterManagerConstructor,host:powerbi.extensibility.IVisualHost):visualInterfaces.IFilterManager{
+        return new classSelectorManager(host);
+    }
+}

src/managers/selectorManager.ts

@@ -0,0 +1,79 @@
+"Use strict";
+import powerbi from "powerbi-visuals-api";
+import {ISelectorManager} from "../visual/visualInterfaces";
+import * as d3 from "d3";
+type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;
+
+export default class SelectorManager implements ISelectorManager{
+    public selectorContainer : Selection<HTMLElement>;
+    private selector;
+    
+    constructor(selectorContainer:Selection<HTMLElement>){
+        this.selectorContainer=selectorContainer;
+    }
+    public switchSelector<T extends ISelector>(c:new ()=>T){
+        if(typeof(this.selector)!=typeof(c)){
+            console.debug(typeof(this.selector));
+            console.debug(typeof(c));
+        }
+        let newSelector=new c();
+        this.selector?.dispose();
+        this.selector=newSelector;
+    }
+    updateView(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn){
+        if(!this.selector){
+            this.selector=new DropDownSelector(this);
+        }
+        this.selector.update(categories, defaultSelect, defaultStart, defaultEnd);
+    };
+}
+
+interface ISelector{
+    update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn);
+}
+
+abstract class Selector implements ISelector{
+    constructor(manager: ISelectorManager){
+        console.debug("Abstract selector:","constructor start");
+        this.manager=manager;
+        this.createView();
+    }
+    protected view:Selection<HTMLElement>;
+    protected abstract createView();
+    public dispose(){
+        this.view?.remove();
+    }
+    protected readonly manager:ISelectorManager;
+    public abstract update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn);
+}
+class DropDownSelector extends Selector{
+    protected createView() {
+        console.debug('dropDownViewManager','createView start');
+        this.view=this.manager.selectorContainer.append("select").classed("dropDown-selector",true).classed("selector",true);
+        console.debug('dropDownViewManager','createView end');
+    }
+    public update(categories: powerbi.DataViewCategoryColumn, defaultSelect: powerbi.DataViewValueColumn, defaultStart: powerbi.DataViewValueColumn, defaultEnd: powerbi.DataViewValueColumn) {
+        console.debug('dropDownViewManager','update start');
+        this.view.selectAll("option").remove();
+        this.view.selectAll("option").data(categories.values).enter().append("option").text(function(d){return d.toString();});
+        console.debug('dropDownViewManager','update end');
+    }
+}
+class ListSelector extends Selector{
+    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{
+    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/viewManager.ts

@@ -1,20 +0,0 @@
-"Use strict";
-import {viewManager} from "../visual/visualInterfaces";
-export class dropDownViewManager implements viewManager{
-    view: HTMLElement;
-    updateView(categories: Text, defaultSelect: Text) {
-        console.debug('dropDownViewManager','updateView')
-    }
-}
-export class listViewManager implements viewManager{
-    view: HTMLElement;
-    updateView(categories: Text, defaultSelect: Text) {
-        console.debug('dropDownViewManager','updateView')
-    }
-}
-export class calendalViewManager implements viewManager{
-    view: HTMLElement;
-    updateView(categories: Text, defaultSelect: Text) {
-        console.debug('dropDownViewManager','updateView')
-    }
-}

src/visual/visual.ts

@@ -26,7 +26,7 @@
 "use strict";
 
 import "core-js/stable";
-import "./../style/visual.less";
+import "../../style/visual.less";
 import powerbi from "powerbi-visuals-api";
 import VisualConstructorOptions = powerbi.extensibility.visual.VisualConstructorOptions;
 import VisualUpdateOptions = powerbi.extensibility.visual.VisualUpdateOptions;
@@ -38,23 +38,30 @@ import VisualObjectInstanceEnumerationObject = powerbi.VisualObjectInstanceEnume
 import IVisualEventService = powerbi.extensibility.IVisualEventService;
 import * as visualInterfaces from "./visualInterfaces";
 import { VisualSettings } from "../settings/visualSettings";
-import * as viewManager from "../managers/viewManager";
+import {filterManager,managerFactory,selectorManager,layoutManager} from "../managers";
-import { layoutManager } from "../managers/layoutManager";
 import * as d3 from "d3";
+import { getObject } from "powerbi-visuals-utils-dataviewutils/lib/dataViewObjects";
+import { getMeasureIndexOfRole } from "powerbi-visuals-utils-dataviewutils/lib/dataRoleHelper";
+import { selector } from "d3";
+
 export class Visual implements IVisual {
     private events: IVisualEventService;
-    private target: HTMLElement;
     private settings: VisualSettings;
-    private layoutManager: layoutManager;
+    private layoutManager: visualInterfaces.ILayoutManager;
-    private viewManager: visualInterfaces.viewManager;
+    private selectorManager: visualInterfaces.ISelectorManager;
     private view:SVGElement;
-    
+    private filterManager:visualInterfaces.IFilterManager;
 
     constructor(options: VisualConstructorOptions) {
         console.log('Visual constructor', options);
         this.events = options.host.eventService;
         if (document) {
-            this.layoutManager=new layoutManager(options.element);
+            let container=d3.select(options.element).append("div").classed("container",true);
+            let headerContainer=container.append("div").classed("header-container",true);
+            let selectorContainer=container.append("div").classed("selector-container",true);
+            this.layoutManager=managerFactory.CreateLayoutManager(layoutManager,container);
+            this.selectorManager=managerFactory.CreateSelectorManager(selectorManager,selectorContainer);
+            this.filterManager=managerFactory.CreateFilterManager(filterManager,options.host);
         }
         console.debug('end constructor');
     }
@@ -64,7 +71,24 @@ export class Visual implements IVisual {
         this.events.renderingStarted(options);
         
         this.settings = Visual.parseSettings(options && options.dataViews && options.dataViews[0]);
-        let viewManager:visualInterfaces.viewManager=this.layoutManager.updateLayout(options.dataViews[0]);
+        let dataView=options.dataViews[0];
+        let field=dataView.categorical.categories[0];
+        let values=dataView.categorical.values;
+        let defaultSelect:powerbi.DataViewValueColumn;
+        let defaultStart:powerbi.DataViewValueColumn;
+        let defaultEnd:powerbi.DataViewValueColumn;
+        values.map((messure)=>{
+            var role=messure.source.roles;
+            if(role['defaultSelect']){
+                defaultSelect=messure;
+            }else if(role['defaultStart']){
+                defaultStart=messure;
+            }else if(role['defaultEnd']){
+                defaultEnd=messure;
+            };
+        });
+        this.layoutManager.update(dataView);
+        this.selectorManager.updateView(field,defaultSelect,defaultStart,defaultEnd);
         this.events.renderingFinished(options);
     }
 

src/visual/visualInterfaces.ts

@@ -2,13 +2,37 @@
 import powerbi from "powerbi-visuals-api";
 import DataView = powerbi.DataView;
 import {VisualSettings} from "../settings/visualSettings";
-export interface layoutManager{
+import * as d3 from "d3";
-    layout:HTMLElement;
+type Selection<T extends d3.BaseType> = d3.Selection<T, any, any, any>;
-    constructor(layout:HTMLElement):void;
+/*
-    updateLayout(dataView:DataView):viewManager;
+Main interfaces
+*/
+
+//ISelectorManager
+export interface ILayoutManager{
+    layout:Selection<HTMLElement>;
+    update(dataView:DataView):void;
 }
-export interface viewManager{
+export interface ILayoutManagerConstructor{
-    view:HTMLElement;
+    new(layout:Selection<HTMLElement>):ILayoutManager;
-    updateView(categories:any,defaultSelect:any,defaultStart:any,defaultEnd:any);
+};
+
+//ISelectorManager
+export interface ISelectorManager{
+    selectorContainer:Selection<HTMLElement>;
+    updateView(categories:powerbi.DataViewCategoryColumn,defaultSelect:powerbi.DataViewValueColumn,defaultStart:powerbi.DataViewValueColumn,defaultEnd:powerbi.DataViewValueColumn);
+}
+export interface ISelectorManagerConstructor{
+    new(selectorContainer:Selection<HTMLElement>):ISelectorManager;
+}
+
+//IFilterManager
+export interface IFilterManager{
+    applyFilter():void;
+    setJsonFilter(field:Text|number,select: Text|number):void;
+    setJsonFilter(field:number,start:number,end:number):void;
+    setJsonFitler(filter:Date,select:Date):void;
+}
+export interface IFilterManagerConstructor{
+    new(host:powerbi.extensibility.IVisualHost);
 }
-//interface