Quantcast
Viewing all articles
Browse latest Browse all 17927

Problem with Selection in custom visualization

I am developing custom Visual in typescript and want to make dropdown having respected data in it.

Ok with Visual Creation, But having problem to implement Selection ID with the data append to my visual.Whenever i use selection ID with data, then my visual fails to load data in it. Please help me with this , regarding selection in custom visual.

 

My code in Visual.ts file is given below:-

 

module powerbi.extensibility.visual {
    //Array to store URL
    interface imageViewModel {
        URL: imageDataPoint[];
    };
    //Declare URL as string
    interface imageDataPoint {
        imageUrl: string;
        selectionId: ISelectionId;

        
        
    };
    //Data from Power BI to imageViewModel    
    function visualTransform(options: VisualUpdateOptions, host: IVisualHost): imageViewModel {
                let dataViews = options.dataViews;
                let viewModel: imageViewModel = {
                                                    URL: []
                                                    
                                                 };
       if (!dataViews
           || !dataViews[0]
           || !dataViews[0].categorical
           || !dataViews[0].categorical.categories
           || !dataViews[0].categorical.categories[0].values)
                    return viewModel;
                let imageData = dataViews[0].categorical;
                if (imageData) {
                    var imageElement = imageData.categories;
           

           if (imageElement && imageElement.length > 0) {

               for (var i = 0, catLength = imageElement.length; i < catLength; i++) {
                   var k = 0;

                   viewModel.URL.push({
                       imageUrl: <string>imageElement[0].values[i],
                       selectionId: host.createSelectionIdBuilder()
                           .withMeasure(imageElement[0].values[i])
                           .createSelectionId()
                      })

               }
               
               
           }
       }
    

       return viewModel;
    }
    export class Visual implements IVisual {
        
        private image: d3.Selection<SVGElement>;
        private host: IVisualHost;        
        private selectionManager: ISelectionManager;

        static Config = {
            xScalePadding: 0.1,
            solidOpacity: 1,
            transparentOpacity: 0.5
         };
       
        //Element initialization
        constructor(options: VisualConstructorOptions) {
            

            this.image = d3.select(options.element).append("select");
                               
        }

        //Any change tu visualization executes this upadate function
        public update(options: VisualUpdateOptions)  {
            
            let selectionManager = this.selectionManager;
            let viewModel: imageViewModel = visualTransform(options, this.host);
                       
            var zoomFlag = 0;
           
            let divPop = this.image.selectAll('option').data(viewModel.URL);

            divPop.enter().append('option').text(function (d) { return d.imageUrl; });

            
            divPop.exit().remove();
                     
            
            
         
        }
        
       
        public destroy(): void {
            //TODO: Perform any cleanup tasks here
        }
    }
}

 


Viewing all articles
Browse latest Browse all 17927

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>