Forum Discussion

satishr's avatar
satishr
Icon for Helper III rankHelper III
8 years ago
Solved

Field order change issue when using options.dataViews[0].table.rows in my custom visual

Hi guys,

I have created a simple custom visual widget where I'm using options.dataViews[0].table.rows to get data. The visual takes 3 fields as input - Actual, Target and Category. It works fine when I input fields one by one to the widget but breaks if I input the data in different order even though I'm dragging the fields into correct input positions. It also breaks if I change the fields after creating the visual on the report. I think the issue is because I'm using row[0], row[1].... to get the data. Is there a way to get data as row[actual], row[target].. or can I solve this problem in any other way? 

  • Please use this code snippet to parse values from table mapping:

     

        export interface ColumnGroup {
            [columnName: string]: number | Date | string;
        }
    
        function getColumnGroupByRole(
            columns: DataViewMetadataColumn[],
            row: DataViewTableRow
        ): ColumnGroup {
            const columnGroup: ColumnGroup = {};
    
            row.forEach((value: any, valueIndex: number) => {
                const column: DataViewMetadataColumn = columns[valueIndex];
    
                Object.keys(columns[valueIndex].roles)
                    .forEach((roleName: string) => {
                        columnGroup[roleName] = value;
                    });
            });
    
            return columnGroup;
        }
    
        function parseData(dataView: DataView) {
            const data: any[] = [];
    
            dataView.table.rows.forEach((row: DataViewTableRow) => {
                const columns = getColumnGroupByRole(dataView.metadata.columns, row);
    
                data.push({
                    Indicator: +columns["Indicator"],
                    Target: +columns["Target"],
                    Date: columns["Date"]
                        ? columns["Date"].toString()
                        : null
                });
            });
    
            return data;
        }

    Ignat Vilesov,

    Software Engineer

     

    Microsoft Power BI Custom Visuals

    [email protected]

3 Replies

  • v-viig's avatar
    v-viig
    Icon for Community Champion rankCommunity Champion

    Hello satishr,

     

    You're able to get value index in the row by getting index from dataView.metadata.columns.

    Each column has the roles object that indicates the role of this column (the roles contains column name).

     

    Ignat Vilesov,

    Software Engineer

     

    Microsoft Power BI Custom Visuals

    [email protected]

    • satishr's avatar
      satishr
      Icon for Helper III rankHelper III

      Hi v-viig, I'm using the below code to fetch data. Can you let me know how to use roles object here? Sorry, I'm new to JSON structures.

       

      for (var i = 0; i < rows.length; i++) {
      var row = rows[i];
      resultData.push({
      Indicator: +row[0],
      Target: +row[1],
      Date: row[2].toString(),
      });

      }
      • v-viig's avatar
        v-viig
        Icon for Community Champion rankCommunity Champion

        Please use this code snippet to parse values from table mapping:

         

            export interface ColumnGroup {
                [columnName: string]: number | Date | string;
            }
        
            function getColumnGroupByRole(
                columns: DataViewMetadataColumn[],
                row: DataViewTableRow
            ): ColumnGroup {
                const columnGroup: ColumnGroup = {};
        
                row.forEach((value: any, valueIndex: number) => {
                    const column: DataViewMetadataColumn = columns[valueIndex];
        
                    Object.keys(columns[valueIndex].roles)
                        .forEach((roleName: string) => {
                            columnGroup[roleName] = value;
                        });
                });
        
                return columnGroup;
            }
        
            function parseData(dataView: DataView) {
                const data: any[] = [];
        
                dataView.table.rows.forEach((row: DataViewTableRow) => {
                    const columns = getColumnGroupByRole(dataView.metadata.columns, row);
        
                    data.push({
                        Indicator: +columns["Indicator"],
                        Target: +columns["Target"],
                        Date: columns["Date"]
                            ? columns["Date"].toString()
                            : null
                    });
                });
        
                return data;
            }

        Ignat Vilesov,

        Software Engineer

         

        Microsoft Power BI Custom Visuals

        [email protected]