Hi Team,
I have a small example to share about an important topic hypercube.
Some questions like :
- How can we add dimension & measures
- How can we add Data alternative to dimension & measure
- How to fetch a cube
- 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 :
- It is important to define initial property i.e. define dimension & measure
- Number of columns & number of cells to be fetched i.e. qWidth & qHeight respectively
- 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 :
- extensionMeta:{translationKey: "",icon:"table",iconChar:"g",isLibraryItem:true,visible:true, …}
- footnote:""
- qHyperCube:{qSize: {…}, qDimensionInfo: Array(6), qMeasureInfo: Array(1), qEffectiveInterColumnSortOrder: Array(7), qGrandTotalRow: Array(1), …}
- qInfo:{qId: "PKsJZ", qType: "HyperCubeDemo"}
- showDetails:false
- showTitles:true
- subtitle:""
- title:""
- version:"1.0.0"
- 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:
- qDataPages:(4) [{…}, {…}, {…}]
- qDimensionInfo:(6) [{…}, {…}, {…}, {…}, {…}, {…}]
- qEffectiveInterColumnSortOrder:(7) [0, 6, 1, 2, 3, 4, 5]
- qGrandTotalRow:[{…}]
- qMeasureInfo:[{…}]
- 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),…]
- qArea :
- qHeight : Rows.
- qWidth : Column.
- qTop : Where to start.
- 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();
// }
});
}
}