Versions Compared

Old Version 31

changes.mady.by.user Former user

Saved on

compared with

New Version Current

changes.mady.by.user Former user

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

...

Anchor
Adding a default gadget
Adding a default gadget
Adding a default gadget

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

  1.  Access the analytics dashboard application using the following URL: https://<HOST_NAME>:<PORT>/portal/dashboards.
  2. Log in to the dashboard using Carbon login credentials. 
  3. Click the corresponding Design  button of the dashboard to which you want to add a gadget as shown below.
    editing a dashboardImage Modified

  4. Click the following gadget browser icon in the side menu bar.  
    Image Modified
    You view all available gadgets as shown below.

    all default gadgets

  5. 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.

    gadget placed in the layout

...

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

Tip

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.

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

Anchor
Configuring the chart
Configuring the chart
Configuring the chart

Follow the steps below to configure the chart.

  1. Select Chart Type and enter the preferred x, y axis and additional parameters based on the selected chart type as shown below. 
    enter details of the chart

  2. Click Preview to view a preview of the chart as shown below.
    preview of the added chart

  3. Once all the customizations are done, click Add to Gadget Store to generate a gadget with the information you provided. 

  4. Click the corresponding Design  button of the dashboard to which you want to add a gadget as shown below.

    editing a dashboardImage Modified

  5. Click the following gadget browser icon in the side menu bar. 

    Image Modified

    You view the new gadget listed in the gadget browser as shown below. 

    line chart gadget added to listImage Modified

  6. 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.

    gadget placed in the layoutImage Modified

Editing a gadget

...

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

Creating a custom gadget

Use the sample gadget configuration structures in the 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.

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

    Code Block
    languagexml
    <?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>

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

    Code Block
    languagejs
    {
    "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."
        }
    }
}
  3. Add a thumbnail image (index.png ) to display in the list of gadgets in the analytics dashboard as dashboard as the below example .
    thumbnail image of the custom gadgetImage Modified
  4. 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.  
    created custom gadget added to the list of available gadgets
    You can add this custom gadget to a layout.