Adding Gadgets to a Dashboard

A gadget is a component of a dashboard. You can place gadgets to the pre-defined grids of the layout of a page as described below.

Adding a default gadget

Follow the steps below to add a gadget which is available by default in the analytics dashboard of WSO2 DAS.

Access the analytics dashboard application using the following URL: https://<HOST_NAME>:<PORT>/portal/dashboards.
Log in to the dashboard using Carbon login credentials.
Click the corresponding Design button of the dashboard to which you want to add a gadget as shown below.
Click the following gadget browser icon in the side menu bar.

You view all available gadgets as shown below.
Drag the gadget out which you want to add, and drop it to place it in the preferred grid of the selected layout in the dashboard editor as shown below.

Adding a gadget using the gadget generation wizard

Gadget generation wizard is a UI based fast and easy way to generate a gadget without writing any code. It guides you through multiple steps to customize the parameters of the gadget accordingly in each step. The gadget generation wizard has the following two steps.

Selecting a datasource
Configuring the chart

Selecting the data source

Follow the steps below to select a data source to get data for the gadget.

You need to create a UI event publisher associated with a realtime event stream or have a table created in the Data Access Layer, to select it as the source of data to generate the gadget.

Log in to the dashboard using Carbon login credentials, if you are not already logged in.
Click the following CREATE GADGET icon in the top menu bar.
Select the input data source as shown below. It can be either an analytics table or an event stream.
Click Preview Data to view a preview of the data source as shown below.
Click Next.

Configuring the chart

Follow the steps below to configure the chart.

Select Chart Type and enter the preferred x, y axis and additional parameters based on the selected chart type as shown below.
Click Preview to view a preview of the chart as shown below.
Once all the customizations are done, click Add to Gadget Store to generate a gadget with the information you provided.
Click the corresponding Design button of the dashboard to which you want to add a gadget as shown below.
Click the following gadget browser icon in the side menu bar.
You view the new gadget listed in the gadget browser as shown below.
Click on the new gadget, drag it out, and place it in the preferred grid of the selected layout in the dashboard editor as shown below.

Editing a gadget

You can use the following options provided in the dashboard editor to edit a gadget as described below.

edit options provided for gadgets

Click the following icon to view information about the gadget in a tooltip:
Click the following icon to move the gadget (drag-and-drop) from one grid to another in the layout.
Click the following icon to view the settings of the gadget.
You can change the default settings of the gadget as preferred as shown in the below example.
Click the following icon to remove the gadget from the layout.

Creating a custom gadget

Use the sample gadget configuration structures in the <DAS_HOME>/repository/deployemnt/server/jaggeryapps/portal/store/carbon.super/gadget/ directory to create a custom gadget Add the following resources and create the configuration parent directory of your custom gadget.

Add the gadget structure as shown in the example (index.xml file) below.

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
    <ModulePrefs title="USA Mobile Stats" height="250" description="USA Mobile Stats">
        <Require feature="pubsub-2"/>
        <Require feature="dynamic-height"/>
    </ModulePrefs>
    <Content type="html">
        <![CDATA[
        <head>
            <style type="text/css">
                .log {
                    width: 400px;
                    height: 400px;
                    background-color: #415b76;
                    color: #fff;
                }
            </style>
            <script language="javascript" type="text/javascript" src="/portal/js/jquery-1.10.2.js"></script>
            <script>
                gadgets.HubSettings.onConnect = function() {
                    var id = 0;
                    setInterval(function() {
                        $('.log').append('<div>publishing message from g1, id : ' + (++id) + '</div>');
                        gadgets.Hub.publish('select', {
                            msg : 'A message from g1',
                            id: id
                        });
                    }, 5000);
                };
            </script>
        <head>
        <body>
            <div class="log"></div>
        </body>
        ]]>
    </Content>
</Module>

Add the gadget definition as shown in the example gadget.json file) below.

{
    "id": "USA Mobile Stats",
    "title": "USA Mobile Stats",
    "type": "gadget",
    "thumbnail": "local://store/gadget/my-gadget/index.png",
    "data": {
        "url": "local://store/gadget/my-gadget/index.xml"
    },
    "notify": {
        "select": {
            "type": "address",
            "description": "This generates mobile stats."
        },
        "cancel": {
            "type": "boolean",
            "description": "This generates disconnected mobile stats."
        }
    }
}

Add a thumbnail image (index.png) to display in the list of gadgets in the analytics dashboard as the below example
Refresh the analytics dashboard application.
Now, you view the new gadget you created added to the list of available gadgets as shown in the below example.

You can add this custom gadget to a layout.