Carrier Dashboard
CTools components ..
A national Wireless Carrier requires a dashboard for tracking telecommunications traffic, with filters for Source Region, Destination Region, and Month (currently set to January), allowing for detailed analysis of calling patterns and platform usage.
Let's start by adding the Table components to the dashboard.
Browse to: /Public/CTools Dashboard/Carrier-Dashboard-CDA/Layout
Click Edit under File Actions.
Click the Components Panel icon.
From the Components list, expand Standard, and then click Table Component.
Name this table component, in the Properties pane:
• Click in the Value for the Name property.
• Enter: mainTable.
• Press Tab or Enter.
Specify the data source, in the Properties pane:
• Click in the Value for the Datasource property.
• On the keyboard, press the down arrow.
• Select: tableQuery.
Specify the HTML object, in the Properties pane:
• Click in the Value for the HtmlObject property.
• On the keyboard, press the down arrow.
• Select: mainTableObj.
Save & Preview the dashboard.
The table doesn’t look exactly like the one in the sample dashboard. In the next several steps we will specify some of the display options, set the page length, add trend arrows and data bars, and format the columns.
Advanced Properties
Advanced Properties extend the functionality of the component with features, such as:
• dynamic parameter passing between components
• custom JavaScript functions for complex calculations
• cross-component communication through PostExecution functions
• parameterized queries using variables and JavaScript expressions
To view the advanced properties, in the Properties pane, click Advanced Properties.
Change or set the following properties:
Show Filter
False
Info Filter
False
Page Length
7
Length Change
False
Pagination Type
Simple
Specify the data types for the columns:
• In the Properties pane, click in the Value column for the Column Types property.
• In the new window, click the Add button seven times.
• In the Value columns, enter the following:
When entering the values just type the first few letters ..
Save & Preview the dashboard.
The data bar and trend arrow columns do not show the data values. We must add pre-execution code to display these values.
Add pre-execution code to display the data values next to the data bars:
• In the Properties pane, click the ellipsis icon to the right of the Pre-Execution property.
• In the Javascript Wizard window, enter the following code, and then click OK:
function f() {
this.setAddInOptions("colType","trendArrow",
{
includeValue: true,
good: true
});
this.setAddInOptions("colType","dataBar",
{
includeValue: true,
width: 80,
startColor: "#414344",
endColor: "#414344"
});
}
Save & Preview the dashboard.
Great .. the data is now displayed .. however, it does need to be formatted.
Also take a look at Africa .. may wish to address unknown values.
Specify the column formats using sprintf functions:
• In the Properties pane, click in the Value column for the Column Formats property.
• In the new window, click the Add button seven times.
• In the text fields, enter the following:
Specify the sort order:
• In the Properties pane, click in the Value column for the Sort by property.
• In the Index and Order fields, type the following, and then click OK:
Save & Preview the dashboard.
x
Time for some Charts ..
• connections tested
• the layout has been confirmed
• chart content & types agreed
• dashboard functions included - export graphs & tables, buttons, downloads, etc ..
Let's start with the Pie Chart.
From the Components list, expand Charts, and then click CCC Pie Chart.
To name the pie chart, in the Properties pane:
• Click in the Value for the Name property.
• Type pieChart.
• Press Tab or Enter.
To specify the data source, in the Properties pane:
• Click in the Value for the Datasource property.
• On the keyboard, press the down arrow.
• Select pieChartQuery.
To specify the HTML object, in the Properties pane:
• Click in the Value for the HtmlObject property.
• On the keyboard, press the down arrow.
• Select pieChartObj.
To specify the width and height for the pie chart, in the Properties pane:
• Click in the Value for the Width property.
• Type 140 and press Enter.
• Click in the Value for the Height property.
• Type 140 and press Enter.
Specify the CCC version, in the Properties pane:
• Click in the Value for the Compatibility version property.
• Type 2.
• Press Tab or Enter.
The Compatibility version must be set because the latest version of CCC includes a different set of default properties.
Click on Advanced Properties
To specify the colors for the pie chart:
• In the Properties pane, click in the Value column for the colors property.
• In the new window, click the Add button two times.
• In the text fields, type the following and then click OK:
#176ad6
#de3700
#191b1e
To hide the values, in the Properties pane:
• Click in the Value for the valuesVisible property.
• On the keyboard, press the down arrow.
• Click False.
Extension Points
Extension points in Pentaho CTools are predefined locations in the CTools framework where developers can add custom functionality without modifying the core code. They act as hooks that allow you to extend and customize dashboards and components.
The main types of extension points in CTools include:
Component Extension Points: Allow you to extend existing components or create new components. These let you add custom properties, modify behavior, or create entirely new visualization types.
Dashboard Layout Extension Points: Enable modifications to the dashboard structure and layout system. You can add custom layout types or modify how components are arranged.
Lifecycle Extension Points: Hook into different phases of the dashboard lifecycle, such as initialization, refresh, or cleanup. These are particularly useful for adding custom logic that needs to run at specific times.
Customize the line chart with extension points:
• In the Properties pane, click in the Value column for the Extension Points property.
• In the new window, click the Add button.
• Complete the Arg and Value columns with the following, and then click OK:
slice_innerRadiusEx
30%
Resources
Finally we need to add a script that picks up the chart colors and adds them before the Legend.
To add a bulletLegend script, click Resources.
In the Properties pane, enter: bulletLegend.
Copy & paste the following script.
Save & Reload the dashboard.
require([
'cdf/AddIn',
'cdf/Logger',
'cdf/Dashboard.Clean',
'cdf/lib/jquery',
], function(AddIn,Logger, Dashboard, $) {
var bulletLegend = {
name:"bulletLegend",
label:"Bullet Legend",
defaults: {
/* default colors, replace in preExecution */
colors: ["#F00", "#0F0", "#00F"]
},
implementation: function(tgt,st,opt){
Logger.log("Starting addin");
var color = opt.colors[ st.rowIdx % opt.colors.length ],
container = $('<div/>').addClass('bulletContainer'),
bullet = $('<div/>').addClass('bullet').css('background-color' , color),
//text = opt.textFormat.call(this, st.value, st, opt);
text = st.value;
container.append(bullet).append(text);
$(tgt).empty().append(container);
}
};
Dashboard.registerGlobalAddIn("Table", "colType", new AddIn(bulletLegend));
});The function calls inbuilt CDF libraries to add the bulletLegend in a <div> container. If you have changed the default table colors then you will need to update
Preview the dashboard.
From the Components list, expand Charts, and then click CCC Line Chart.
Name the line chart, in the Properties pane:
• Click in the Value for the Name property.
• Enter: lineChart.
• Press Tab or Enter.
Specify the data source, in the Properties pane:
• Click in the Value for the Datasource property.
• On the keyboard, press the down arrow.
• Select: lineChartQuery.
Specify the HTML object, in the Properties pane:
• Click in the Value for the HtmlObject property.
• On the keyboard, press the down arrow.
• Select: lineChartObj.
Specify the height for the line chart, in the Properties pane:
• Click in the Value for the Height property.
• Type 220 and press Enter.
Delete the width for the line chart, in the Properties pane:
• Click in the Value for the Width property.
• Delete the value and press Enter.
Deleting the width does not affect the chart on the dashboard, but it does affect other renderings of it.
Specify the CCC version, in the Properties pane:
• Click in the Value for the Compatibility version property.
• Type 2 and press Tab or Enter.
Save & Preview the dashboard.
Click on Advanced Properties.
Specify the colors for the line chart:
• In the Properties pane, click in the Value column for the colors property.
• In the new window, click the Add button.
• In the text fields, type the following and then click OK:
#176ad6
#191b1e
Change or set the following advanced properties:
dotsVisible
True
legend
True
legendAlign
Right
legendPosition
Top
plotFrameVisible
False
Save & Preview the dashboard.
Extension Point
Extension points in Pentaho CTools are predefined locations in the CTools framework where developers can add custom functionality without modifying the core code. They act as hooks that allow you to extend and customize dashboards and components.
The main types of extension points in CTools include:
Component Extension Points: Allow you to extend existing components or create new components. These let you add custom properties, modify behavior, or create entirely new visualization types.
Dashboard Layout Extension Points: Enable modifications to the dashboard structure and layout system. You can add custom layout types or modify how components are arranged.
Lifecycle Extension Points: Hook into different phases of the dashboard lifecycle, such as initialization, refresh, or cleanup. These are particularly useful for adding custom logic that needs to run at specific times.
Customize the line chart with extension points:
• In the Properties pane, click in the Value column for the Extension Points property.
• In the new window, click the Add button six times.
• Complete the Arg and Value columns with the following, and then click OK:
dot_fillStyle
#fff
dot_shapeRadius
4
xAxisLabel_text
see code block below ..
line_lineWidth
2
dot_lineWidth
2
yAxisRule_strokeStyle
rgba(0,0,0,0)
xAxisRule_strokeStyle
rgba(0,0,0,0)
function(d) {
var fin = pv.Format.date('%y-%m-%d'),
fout = pv.Format.date('%d');
return fout.format( fin.parse(d.vars.tick.value) );
}Save & Preview the dashboard.
Our dashboard is a bit static ..
Users need to be able to perform drill-downs, select parameter-driven filters, and perform real-time data updates.
Let's say we have a list of Regions that when selected updates the table data based on the Region selected. In CDF language, a parameter which holds the Region values is passed to a Component listener - in this case for a Table Component - which is then
A component can have more than one parameter in the Listeners property, and a Parameter can be listened by more than one component. Every time the parameter changes, all components that listen to it are updated.
So we're going to:
• Add parameter components to a dashboard.
• Specify the parameters and listeners for dashboard components.
• Add select (filter) components to a dashboard.
Let's add some parameters to: pieChartQuery datasource.
Click on the Datasources Panel perspective.
Expand the MDX Queries group & select: pieChartQuery.
View the parameters used in the pieChartQuery, in the Properties pane:
• Click in the Value for the Parameters property.
• Take note of the three parameters.
• Click OK.
Add the sourceCallParameter:
• From the Components list, expand Parameters.
• Click: Custom Parameter.
To set the default value, in the Properties pane:
• Click in the JavaScript for the Property value property.
• Type: [“[Call Source.Source Geography].[All]”].
["[Call Source.Source Geography].[All]"] • Press Tab or Enter.
Add the destinationCallParameter and monthParameter, repeat the previous steps using the following values:
destinationCallParameter
["[Call Destination.Destination Geography].[All]"]
monthParameter
["[Time.Standard Time].[2011].[Q1 2011].[January]"] Listener
Set the parameters and listeners for the pieChart component ..
In the Components pane, click to expand the Charts group
Click: pieChart.
To specify the parameters for the pieChart:
• In the Properties pane, click in the Value column for the Parameters property.
• In the new window, click the Add button twice.
• In the first Arg columns, enter: monthParameter.
• Enter the first few letters to select monthParameter.
• Repeat the steps to add the destinationCallParameter and sourceCallParameter, and then click OK.
Specify the listeners for the pieChart:
• In the Properties pane, click in the Value column for the Listeners property.
• Click the drop-down arrow.
• Click to select the Select All checkbox.
• Click OK.
CTools selectors are interactive UI components that allow users to filter and manipulate dashboard data dynamically. They act as user input controls (like dropdown menus, checkboxes, or radio buttons) that can be connected to other dashboard components through parameter bindings.
When a user interacts with a selector, it triggers updates in connected charts, tables, or other visualizations based on the selected values. This provides a way to create interactive, drill-down capable dashboards where users can explore data through different dimensions and filters.
A selector can be a simple textbox where a user type free text, or more elaborated as a select list, a radio button or a date picker.
Add the sourceSelector, from the Components list, expand Selects, and then click Filter Component.
Customize the Selector with the following Advanced Properties:
Name
sourceSelector
Title
Source Region:
Parameter
sourceCallParameter
Value as ID
False
Datasource
sourceSelectorQuery
Show Icons
False
Show "Only" Button
False
Show Search Filter
False
HtmlObject
sourceObj
Execute at Start
True
Pre Change
see code block below ..
sourceSelector
function f(selectedItem) {
// Get ".children" on MDX if member "All" is selected
if (selectedItem.toString() === "[Call Source.Source Geography].[All]")
this.dashboard.setParameter('sourceChildren', '.Children');
else
this.dashboard.setParameter('sourceChildren', '');
}destinationSelector
function f(selectedItem) {
if (selectedItem.toString() === "[Call Destination.Destination Geography].[All]")
this.dashboard.setParameter('destinationChildren', '.Children');
else
this.dashboard.setParameter('destinationChildren', '');
}Month
Name
monthSelector
Title
Select Month:
Datasource
monthSelectorQuery
HtmlObject
monthObj
Save & Preview dashboard.
We're going to use the clickAction function on the pieChart to set the value of one parameter (planTypeParameter), to trigger the update of another component (lineChart).
From the Components list, expand the Generic group, and then click Simple Parameter.
Name the parameter, in the Properties panel:
• Click in the Value field for the Name property.
• Enter: planTypeParameter.
• Press Tab or Enter.
To set the default value, in the Properties panel:
• Click in the Value field for the Property value property.
• Type: All.
• Press Tab or Enter.
Save the dashboard.
Now we need to add the parameter - PlanTypeParameter - to the lineChartQuery.
In the Datasources pane, expand the MDX Queries group, and then click to select the lineChartQuery.
To change the MDX query:
• In the Properties pane, click the ellipsis icon to the right of the Query property.
• In the Sql Editor window, replace the existing text with the following MDX query, and then click Ok.
WITH
SET DAYS AS DESCENDANTS(${monthParameter}, 1)
MEMBER [Calling Plan].[Selected Plan Type] as Aggregate( [Calling Plan].[${planTypeParameter}] )
SELECT
DAYS ON 1,
{[Measures].[Calls], [Measures].[Users]} ON 0
FROM
[Call Corridor]
WHERE
(${sourceCallParameter}, ${destinationCallParameter}, [Calling Plan].[Selected Plan Type])Last few steps:
Add the planTypeParameter to the datasource
Enable - True - Clickable in pieChart component
Add listener
Add the new parameter and specify its default value:
• In the Properties pane, click in the Value field for the Parameters property.
• In the new window, click the Add button once.
• In the Name column, enter: planTypeParameter.
• In the Value column, enter: All.
• Click Ok.
In the Components pane, expand the Charts group, and then click to select the pieChart component.
Enable the clickable functionality, in the Properties pane:
• Click in the Value field for the clickable property.
• On the keyboard, press the down arrow.
• Select True.
To specify the clickAction function that will trigger the update:
• Click the ellipsis icon to the right of the clickAction property.
• In the Javascript Wizard window, enter the following code, and then click OK:
function f(scene) {
var vars = scene.vars;
var c = vars.category.value;
var v = vars.value.value;
Logger.log("Clicked on Category '" + c + "' , which has a Value of: " + v);
dashboard.fireChange('${p:planTypeParameter}', c);
}Inside the clickAction function we call dashboard.fireChange (param, value) with the name of the parameter to change and the new value for that parameter.
When a user clicks on a mark (a slice of pie, in this case), the above function is triggered (which triggers the update of all the components that listen to that parameter).
In the Components pane, expand the Charts group, and then click to select the lineChart component.
Add the extra listener for the lineChart:
• In the Properties pane, click in the Value column for the Listeners property.
• Click the drop-down arrow.
• Click to select the planTypeParameter checkbox.
• Click OK.
Select the extra parameter for the lineChart:
• In the Properties pane, click in the Value for the Parameters property.
• In the new window, click the Add button once.
• In the Arg column, type planTypeParameter.
• Click the ellipsis, and then from the Choose Parameter window, click to select planTypeParameter.
• Click Ok.
Save & preview the dashboard.
The final part is to leverage CDE export functionality to export charts and the main table.
The data can be exported in several formats, like CSV, XLS, XML and JSON (through CDA API calls done in the background).
If we have CDE/CCC chart components on our dashboard, we can also export the charts as PNG and SVG files (through CGG).
There's two components to add:
• Export Button Component– use this when you only need to export the data in one specific format (CSV, XLS, XML or JSON).
• Export Popup Component – use this when you need to export chart images (PNG and/or SVG format) or when you want to export the data in more than one format (CSV, XLS, XML and/or JSON).
To add the exportTableButton, from the Components list, expand Standard.
Select: Export Button Component.
Name the export button, in the Properties pane:
• Click in the Value for the Name property.
• Enter: exportTableButton.
• Press Tab or Enter.
To set the label of the export button, in the Properties pane:
• Click in the Value for the Label property.
• Enter: Export.
• Press Tab or Enter.
To define from which component we want to export the data, in the Properties pane:
• Click in the Value for the Component Name property.
• Enter: mainTable.
• Press Tab or Enter.
To select the HTML object, in the Properties pane:
• Click in the Value for the HTML Object property.
• On the keyboard, press the down arrow.
• Select: exportTableButtonObj.
Save & preview the dashboard.
Export Popup
In the final part of this workshop we're going to add an ExportPopupComponent to export the Number of Calls vs Number of Users chart (lineChart) data in CSV and PNG.
To add the exportChartPopup, from the Components list, expand Standard.
Select: ExportPopupComponent.
To name the export button, in the Properties pane:
• Click in the Value for the Name property.
• Enter: exportChartPopup.
• Press Tab or Enter.
Set the label of the export button, in the Properties pane:
• Click in the Value for the Title property.
• Enter: Export.
• Press Tab or Enter.
Define from which chart component we want to export the image, in the Properties pane:
• Click in the Value for the Chart Component to Export property.
• Enter: lineChart.
• Press Tab or Enter.
Define from which component we want to export the data, in the Properties pane:
• Click in the Value for the Data Component to Export property.
• Enter: lineChart.
• Press Tab or Enter.
Select the HTML object, in the Properties pane:
• Click in the Value for the HTML Object property.
• On the keyboard, press the down arrow.
• Select exportChartButtonObj.
Save the dashboard.
To use the export popup, we must view the dashboard (not Preview).
Open the dashboard, from the Browse Files perspective - Carrier-Dashboard-Export
The Table is currently being exported as .xls. Let's change this to .csv
Change or set the following advanced properties:
Chart Export Label
Export PNG
Data Export Type
csv
Data Export Label
Export CSV
Name for Data Export attachment
NrofCallsVsUsers
Post Execution
see code block below
function f() {
// Remove the arrow element
$('.popupComponent div.arrow').remove();
}Save and open dashboard in Browser.
One of the neat features that can be added is .. expanding rows.
So if you click on a row in the mainTable, the record will expand and display a barChart - Calls by Platform.
The barChart has 3 parameters & listeners - monthParameter, tableSourceparameter, tableDestinationParameter.
To add a main row that will encapsulate the content to be displayed on the expanded row, in the Layout Structure panel:
• Select the layoutColumn column under the layoutRow row.
• Click in the Add Row icon.
Name the row, in the Properties panel:
• Click in the Value field for the Name property.
• Enter: expandedContent.
• Press Tab or Enter.
Assign CSS classes to the expandedContent row, in the Properties panel:
• Click in the Value field for the Css Class property.
• Enter: WDhidden expandedContent.
• Press Tab or Enter.
Add a column for the displayed bar chart, with the expandedContent row selected, click the Add Columns icon.
Name the column, in the Properties panel:
• Click in the Value field for the Name property.
• Enter: barChartObj.
• Press Tab or Enter.
Data Source
Need to create a barChartQuery to populate the barChart ..
Click the Datasources Panel icon.
Expand MDX Queries, and select: mdx over mondrianJndi.
Name this data source, in the Properties pane:
• Click in the Value for the Name property.
• Enter: barChartQuery.
• Press Tab or Enter.
Select the BaselineDemo jndi connection, in the Properties pane:
• Click in the Value for the Jndi property.
• On the keyboard, press the down arrow.
• Select: BaselineDemo connection.
Select the Wireless Carrier Mondrian schema, in the Properties pane:
• Click in the Value for the Mondrian schema property.
• On the keyboard, press the down arrow.
• Select: Wireless Carrier schema.
Enter the MDX query:
• In the Properties pane, click the ellipsis icon to the right of the Query property.
• In the MDX Editor window, enter the following MDX query, and then click Ok.
SELECT
Measures.[Calls] on 0,
[Platform].[Platform].members on 1
FROM [Call Corridor]
WHERE
(
${monthParameter},
[Call Source.Source Geography].[${tableSourceParameter}],
[Call Destination.Destination Geography].[${tableDestinationParameter}]
)Save the dashboard.
Parameters
Finally we need to pass some parameters - filters - based on:
Source
Destination
Month
Add the parameters and specify default values:
• In the Properties pane, click in the Value column for the Parameters property.
• In the new window, click the Add button twice.
• In the Name and Value columns, type the following, and then click Ok.
tableSourceParameter
All
tableDestinationParameter
All
monthParameter
[Time.Standard Time]. [2011].[Q1 2011].[January]
From the Components list, expand Parameters, and then click Simple Parameter.
Name the parameter, in the Properties pane:
• Click in the Value for the Name property.
• Enter: tableSourceParameter.
• Press Tab or Enter.
Set the default value, in the Properties pane:
• Click in the Value for the Property value property.
• Enter: All.
• Press Tab or Enter.
Repeat the previous three steps to add: tableDestinationParameter and set the default value to All.
Save the dashboard.
Chart
Finally .. configure the Chart & Listener components.
Click the Components Panel icon.
From the Components list, expand Charts, and then click CCC Bar Chart.
Name the bar chart, in the Properties pane:
• Click in the Value for the Name property.
• Enter: barChart.
• Press Tab or Enter.
Add a title for the bar chart, in the Properties pane:
• Click in the Value for the Title property.
• Type Calls by Platform.
• Press Tab or Enter.
Specify the listeners for the barChart:
• In the Properties pane, click in the Value column for the Listeners property.
• Click the drop-down arrow.
• Click to select: monthParameter, tableSourceParameter, and tableDestinationParameter checkboxes.
• Click OK.
Specify the parameters for the barChart:
• In the Properties pane, click in the Value column for the Parameters property.
• In the new window, click the Add button twice.
• In the first Arg columns, type monthParameter.
• Enter the first few letters of monthParameter.
• Repeat the steps to add the tableSourceParameter and tableDestinationParameter, and then click OK.
Specify the data source, in the Properties pane:
• Click in the Value for the Datasource property.
• On the keyboard, press the down arrow.
• Select: barChartQuery.
Specify the width and height for the pie chart, in the Properties pane:
• Click in the Value for the Height property.
• Type: 200 and press Enter.
• Click in the Value for the Width property.
• Type: 500 and press Enter.
Specify the CCC version, in the Properties pane:
• Click in the Value for the Compatibility version property.
• Type: 2.
• Press Tab or Enter.
Specify the HTML object, in the Properties pane:
• Click in the Value for the HtmlObject property.
• On the keyboard, press the down arrow.
• Select: barChartObj.
Disable the legend, in the Properties pane:
• Click in the Value for the Legend property.
• On the keyboard, press the down arrow.
• Select: False.
Advanced Properties
Click Advanced Properties.
Set the execute at start flag, in the Properties pane:
• Click in the Value for the Execute at start property.
• On the keyboard, press the down arrow.
• Select: False.
When a dashboard is loaded all its components are instantiated. The Execute at start property determines for each component if it should be executed or not at that moment. If the Execute at start flag of a component is False, the component will not be rendered.
Save the dashboard.
Enable mainTable
Finally .. enable the Expand option in the mainTable.
From the Components list, expand Others, and then click the mainTable component.
In the Properties pane, click Advanced Properties.
Set the expand on click property, in the Properties pane:
• Click in the Value for the Expand on Click property.
• On the keyboard, press the down arrow.
• Select: True.
Specify the object that encapsulates the content on the expand row, in the Properties pane:
• Click in the Value for: Expand container Object property.
• Enter: expandedContent.
• Press Tab or Enter.
Specify the parameters that will carry the column values to be passed to the expanded content:
• In the Properties pane, click in the Value column for the Expand Parameters property.
• In the new window, click the Add button.
• In the first Arg column, type 0.
• Enter the first few letters to select: tableSourceParameter.
• In the second Arg column, type 1.
• Enter the first few letters to select: tableDestinationParameter.
• Click OK.
The Arg column contains the column index and the Value column refers to the name of the parameter that stores its values.
Save & Preview the dashboard.
Last updated
Was this helpful?