Fetch Data using Backend API

[ajaykakkar93]

Hi Team,

I have a small example to share about an important topic hypercube.
Some questions like :

1. How can we add dimension & measures
2. How can we add Data alternative to dimension & measure
3. How to fetch a cube
4. What property we get

Let's see how we can achieve all these in a simple way using "Backend API",

First make a property for adding dimension & measure OR data in to our Properties.

Note :

1. It is important to define initial property i.e. define dimension & measure
    
2. Number of columns & number of cells to be fetched i.e. qWidth & qHeight respectively
3. If we edit the number of column or cells, then you need to delete & add the extension again to     view  the results

Step 1 : Define initial property :

initialProperties: {
	qHyperCubeDef: {           
		qDimensions: [],
		           qMeasures: [],
		           qInitialDataFetch: [{                 
			qWidth: 10,
			                 qHeight: 1000           
		}]
	}  
},

Step 2 : Understand this properties:

• initialProperties: Specifies the properties the object should have when created. Define either as a hypercube (qHyperCubeDef) or as a list object (qListObjectDef).
• qHyperCubeDef : A hypercube can contain both dimensions and measures. If selections are applied to a hypercube, only the selected values are displayed.
• qDimensions : Dimension to  be used.
• qMeasures : Measure to be used.
• The maximum number of cells (qWidth * qHeight) allowed in an initial data fetch is 10,000 cells. Retrieve additional data in chunks using the getData method in the Backend API.

definition: {       
	type: "items",
	       component: "accordion",
	       items: {             
		dimensions: {                 
			uses: "dimensions",
			                 min: 1             
		},
		             measures: {                 
			uses: "measures",
			                 min: 0             
		},
		             sorting: {                 
			uses: "sorting"            
		},
		            settings: {                
			uses: "settings"           
		}      
	}
},

Step 3 : Define dimension & measure

Link to get a clear example

Step 4 : Add layout option :

paint: function($element)

Add layout to the function

paint: function($element, layout)

Console Log layout to get your extension Meta Data / Basic information

paint: function($element, layout) {    
   console.log(layout);
});

Now layout will print out basic information about my extension.

Step 5 : Understand what we get in our layout :

1. extensionMeta:{translationKey: "",icon:"table",iconChar:"g",isLibraryItem:true,visible:true, …}
2. footnote:""
3. qHyperCube:{qSize: {…}, qDimensionInfo: Array(6), qMeasureInfo: Array(1), qEffectiveInterColumnSortOrder: Array(7), qGrandTotalRow: Array(1), …}
4. qInfo:{qId: "PKsJZ", qType: "HyperCubeDemo"}
5. showDetails:false
6. showTitles:true
7. subtitle:""
8. title:""
9. version:"1.0.0"
10. visualization:"HyperCubeDemo"

• extensionMeta: This will have all the configuration added in QEXT file of your extension.
• footnote: Footnote for extension
• qHyperCube : It has all the configuration, data, dimension & measure information , Grand total for our measure etc.
• qInfo : It has type/object name.
• showTitles : Will enable header & subtitle for object
• showDetails: will allows users to choose to view details such as descriptions, measures and dimensions when user right clicks on the object.
• title : Title of object.
• version : Version of object.
• visualization : Name of visualization.

Inside qHyperCube:

1. qDataPages:(4) [{…}, {…}, {…}]
2. qDimensionInfo:(6) [{…}, {…}, {…}, {…}, {…}, {…}]
3. qEffectiveInterColumnSortOrder:(7) [0, 6, 1, 2, 3, 4, 5]
4. qGrandTotalRow:[{…}]
5. qMeasureInfo:[{…}]
6. qSize:{qcx: 7, qcy: 2478}

• qDataPages : It has all pages that is fetched from backend using backend api.
• qDimensionInfo : All Dimension Information.
• qMeasureInfo : All Measure Information.
• qEffectiveInterColumnSortOrder : Sort order of all the fields added.
• qGrandTotalRow : Total values as per measure.

• qSize :
  • qcx : Number of columns.
  • Qcy : Total row data.

Inside qDataPages:

qArea:{qLeft: 0, qTop: 0, qWidth: 7, qHeight: 1000}

qMatrix:(1000) [Array(7), Array(7),…]

1. qArea :

• qHeight : Rows.
• qWidth : Column.
• qTop : Where to start.

1. qMatrix : It has the initial data set fetched as per qArea.

Inside qMatrix[0][0]:

• qElemNumber: returns Element Number
• qNum: returns a number or "NaN"
• qState: returns the state of this object as "O" , "X" or "S"
• qText: returns a string value

Step 6 : Valuable variables

var self = this,
	hypercube = layout.qHyperCube,
	rowcount = hypercube.qDataPages[0].qMatrix.length,
	columncount = hypercube.qDimensionInfo.length + hypercube.qMeasureInfo.length,
	column = hypercube.qSize.qcx,
	totalrows = hypercube.qSize.qcy,
	pageheight = Math.floor(10000 / column),
	numberOfPages = Math.ceil(totalrows / pageheight); 
console.log(rowcount, layout);
Make a
function which will run based on numberOfPages from calculated variable

function fetchPage(numberOfPages, row) {     
	var add = 0;     
	for (var i = 1; i <= (numberOfPages); i++) {            // Make request pages
		         
		var requestPage = [{             
			qTop: (row * i) + add,
			             qLeft: 0,
			             qWidth: columncount,
			             qHeight: Math.min(1000, totalrows - rowcount)         
		}];         
		if (i == 0) {             
			add = 1;         
		}         
		console.log(requestPage, row);    // Pass request page in getData method in Backend API
		         
		self.backendApi.getData(requestPage).then(function(dataPages) {              // update rowcount
			       
			rowcount += dataPages[0].qMatrix.length;              // if (rowcount >= hypercube.qSize.qcy) {
			              //     $element.find(".more").hide();
			              // }
			         
		});     
	} 
}