Each tab click accesses a json array containing unique templates such as ui-grid or c3 chart directive (c3.js).
When a specific tab is clicked, the template in string format must be rendered into actual templates like ui-grid, c3-chart, etc.
var sampleJsonArray = [{
id: 0,
tabName: "Table",
template: ' <div id="queryListGrid" ui-grid="queryListGridOptions" class="grid query-list-grid"></div>'
},
{
id: 1,
tabName: "Cost - Line",
template: ' <c3-simple id="view1" config="c3ChartCost"></c3-simple> '
},
{
id: 2,
tabName: "Spend - Bar",
template: ' <c3-simple id="view2" config="c3ChartSpend"></c3-simple> '
},
];
Each tab has its own template stored in JSON format:
$scope.queryListGridOptions = {
enableSorting: true,
columnDefs: [{
field: 'name'
},
{
field: 'gender'
},
{
field: 'company',
enableSorting: false
}
],
data: //data will be fetched from http call -- []
onRegisterApi: function(gridApi) {
$scope.grid1Api = gridApi;
}
};
$scope.c3ChartCost = {
size: {
height: 250,
width: 200
},
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'line'
}
};
$scope.c3ChartSpend = {
size: {
height: 250,
width: 200
},
data: {
columns: [
['data1', 5, 510, 160, 700, 190, 960],
['data2', 87, 450, 56, 780, 670, 890]
],
type: 'bar'
}
};