Scribd
Upload
11K views

CT2000

This document contains code snippets and configuration details for various dashboard components in multiple modules. It includes functions for: 1. Setting pre-execution logic for charts to show/hide based on parameter selection and format values. 2. Defining styles, interactivity and popup functionality for charts. 3. Adding flags, colors, markers and zoom controls to maps. 4. Creating templates to display key performance indicator cards. 5. Retrieving the username to display a greeting on the dashboard.

Uploaded by

Ashok Guntupalli
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11K views

CT2000

This document contains code snippets and configuration details for various dashboard components in multiple modules. It includes functions for: 1. Setting pre-execution logic for charts to show/hide based on parameter selection and format values. 2. Defining styles, interactivity and popup functionality for charts. 3. Adding flags, colors, markers and zoom controls to maps. 4. Creating templates to display key performance indicator cards. 5. Retrieving the username to display a greeting on the dashboard.

Uploaded by

Ashok Guntupalli
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 14

CT2000 Copy/Paste Content for Guided Demos and Exercises

Module 4

continentParam

["[Geo].[Africa]", "[Geo].[Asia]", "[Geo].[Australia]", "[Geo].[Europe]", "[Geo].[North


America]", "[Geo].[South America]"]

scatterChart Pre Execution

function f() {

// Show Chart

var indicatorParam = this.dashboard.getParam('indicatorParam');

if ( indicatorParam.toString() != "Capacity Factor" ){

return false;

barChart Pre Execution

function f() {

// Show Chart

var indicatorParam = this.dashboard.getParam('indicatorParam');

if ( indicatorParam.toString() == "Capacity Factor" ){

return false;

kpiTable Pre Execution


function f(){

//Define message empty table

var component = this.chartDefinition;

component.oLanguage = {

"sEmptyTable": "No data available."

};

//set trendArrow Addin to include value

this.setAddInOptions("colType","trendArrow",function(state){

return {

includeValue: true

};

});

// Format KPi to decimal or percentage

var indicatorParam = this.dashboard.getParam('indicatorParam');

if ( indicatorParam.toString() == "Capacity Factor" ){

this.chartDefinition.colFormats = ["%.2f%", "%.2f%"];

}else{

this.chartDefinition.colFormats = ["%.2f", "%.2f%"];

}
this.chartDefinition.colHeaders = undefined;

top3CountriesTable Pre Execution

function f(){

//Define message empty table

var component = this.chartDefinition;

component.oLanguage = {

"sEmptyTable": "No data available."

};

//set trendArrow Addin to include value

this.setAddInOptions("colType","trendArrow",function(state){

return {

includeValue: true

};

});

// Format KPi to decimal or percentage

var indicatorParam = this.dashboard.getParam('indicatorParam');

if ( indicatorParam.toString() == "Capacity Factor" ){

this.chartDefinition.colFormats = ["%s", "%.2f%", "%.2f%"];

}else{
this.chartDefinition.colFormats = ["%s", "%.2f", "%.2f%"];

this.chartDefinition.colHeaders = undefined;

customize scatterChart Pre Execution

//Chart definition

$.extend(true,

this.chartDefinition,

dashboardJS.configurations.charts,

dashboardJS.configurations.charts.scatterPlot);

//Define Custom Tooltip

pvc.ext.detTooltip().plotMappings({

"scatter": {

series: "series",

measures: ["x", "y", "color", "size"]

}).install(this.chartDefinition);

postInit function

dashboard.postInit = function() {

//Resize charts

var chartsTypeToUpdate = ['CccMetricDotChartComponent', 'CccBarChartComponent'];

var chartsToUpdate = _.filter(dashboard.components, function(elem, index) {


return (chartsTypeToUpdate.indexOf(elem.type) >= 0);

});

var resizeChart = function() {

_.each(chartsToUpdate, function(elem, index) {

elem.chart.options.width = elem.placeholder().width();

elem.chart.render(true, true, false);

});

};

var throttle = _.throttle(resizeChart, 100, {

leading: false

});

$(document).ready(function() {

$(window).resize(throttle);

});

};

mapTitleText component

function f() {

//Set Map Title

var indicator = this.dashboard.getParameterValue("indicatorParam");

return indicator + " by Country";

}
technologyParam

["[Technology].[Total renewable energy].[Bioenergy]","[Technology].[Total renewable


energy].[Geothermal]", "[Technology].[Total renewable energy].[Hydropower]",
"[Technology].[Total renewable energy].[Marine]", "[Technology].[Total renewable
energy].[Solar]", "[Technology].[Total renewable energy].[Wind]"]

yearParam

["[Year].[2014]"]

customize barChart Pre Execution

$.extend(true,

this.chartDefinition,

dashboardJS.configurations.charts,

dashboardJS.configurations.charts.barChart);

pvc.ext.detTooltip().install(this.chartDefinition);

//Set ortho Title, title changes according with indicator

if ( indicatorParam.toString() == "Generation Capacity (MW)" ){

this.chartDefinition.orthoAxisTitle = "Generation Capacity (MW)";

}else{

this.chartDefinition.orthoAxisTitle = "Electricity Generated (GWh)";

mapLegendText component

function f() {

var indicator = this.dashboard.getParameterValue("indicatorParam");

var legend = [];


//Set Legend Map

if (indicator == "Capacity Factor"){

legend = ["1-20%", "21-50%", "51-100%"];

}else if (indicator == "Generation Capacity"){

legend = ["0-700", "701-2,000", "2,001-Max"];

}else{

legend = ["0-1,000", "1,001-3,000", "3,001-Max"];

return '<div class="sectionLegendWrapper pull-right clearfix">'+

'<div class="sectionLegendIntensity low pull-left">'+legend[0]+'</div>'+

'<div class="sectionLegendIntensity medium pull-left">'+legend[1]+'</div>'+

'<div class="sectionLegendIntensity high pull-left">'+legend[2]+'</div>'+

'</div>';

charTitleText

function f() {

//Set Chart Title and show or hide scatter legend

var indicator = this.dashboard.getParameterValue("indicatorParam");

if (indicator == "Capacity Factor"){

$('.chartLegend').show();

return "Generation Capacity vs Electricity Generated";


}else{

$('.chartLegend').hide();

return "Country Rank by " + indicator;

countryName

function f() {

//Set Country on Popup chart

var country = this.dashboard.getParameterValue("countryParam");

if(_.isUndefined(country)) return "";

country = country.split(".")[country.split(".").length-1].replace("]","").replace("[","");

return country + ' - Breakdown by Sub-Technology';

technologyBreakdownTitleText

function f() {

//Set Cards Title

var indicator = this.dashboard.getParameterValue("indicatorParam");

return indicator + " by Sub-Technology";

chartTitleText

function f() {

//Set Chart Title and show or hide scatter legend


var indicator = this.dashboard.getParameterValue("indicatorParam");

if (indicator == "Capacity Factor"){

$('.chartLegend').show();

return "Generation Capacity vs Electricity Generated";

}else{

$('.chartLegend').hide();

return "Country Rank by " + indicator;

Module 5

scatterChart clickAction (1)

function f(event){

var helloMessage = "Hello";

alert(helloMessage);

scatterChart clickAction (2)

function f(event){

debugger;

var helloMessage = "Hello";

alert(helloMessage);

scatterChart clickAction (3)


function f(event){

// Render chart Popup

var country = event.atoms.series.value;

country = "[Geo].[Country].["+country+"]";

dashboard.fireChange("countryParam",country);

var chartElem = $("#attachPopUpCountry");

render_popUpByCountry.popup($(chartElem));

Module 6

top3CountriesTable Pre Execution for Flag Addin

//Define Addin Flag path

this.setAddInOptions("colType","flagAddin",function(state){

return {

imagesPath:
"/pentaho/api/repos${solution:../../../files/images/flags}/IMAGENAME.png/content"

};

});

Module 7

map Pre Execution for Color

function f(){

//Fill colour come in column 4, ID come incolumn 3 check query

this.visualRoles = {

id: 3,
fill: 4

};

//Mapping the colour according the value come from query

this.attributeMapping.fill = function(context, seriesRoot, mapping, row) {

var colorBase = {

"A": "#F2C249",

"G": "#00845B",

"R": "#B71C1C"

};

var colour = row[mapping.fill];

return colorBase[colour];

};

map Additional Pre Execution for Markers// Map style definition

this.styleMap = {

markers: {

r: 5,

hover: {

'fill-opacity': 0.7,

'stroke-width': 1,
'stroke': 'rgba(0,0,0,.2)',

'z-index': 2

},

normal:{

'fill-opacity': 0.7,

'stroke-width': 1,

'stroke': 'rgba(0,0,0,.2)'

},

};

map Additional Pre Execution for Zoom Level

//Define default zoom level

this.defaultZoomLevel = 2;

map Post Execution for Zoom Range

function f(){

/*Define max and min Zoom*/

this.mapEngine.map.isValidZoomLevel = function(z){

return z >= 2 && z <= 7;

};

Module 8

kpiCards Template
function() {

var template = '' +

'<div class="row cards">' +

'{{#items}}' +

'<div class="templateCard col-xs-3">' +

' <div>Tech: {{0}}</div>' +

' <div>SubTech: {{1}}</div>' +

' <div>Value: {{2}}</div>' +

' <div>Prev Year: {{3}}</div>' +

'</div>' +

'{{/items}}' +

'</div>';

return template;

Module 9

helloUserText

function f(){

//Set username on top of dashboard.

var myUser = this.dashboard.context.user;


return "Hello, " + myUser;

You might also like