Introduction
This plugin is a sample for how to get started creating new widget types in Sisense. It contains only the basic widget elements: data panels, query building, data processing, and rendering. This plugin also shows a simple example of how to create your design panel for the widget. Check out the file structure of this widget, as well as an overview of the most commonly used properties for defining a widget. Of course, there are more event handlers and properties you can set, but this sample shows the basics.
File Structure
HelloWorldWidget: Plugin folder
- plugin.json: This file is the basis of all plugins, as it defines what JavaScript and CSS files to load.
- widget.js: Contains the code used to create the new chart type
- styler.html: The HTML template of how to display the widget's Design Panel
- stylerController.js: The angular controller that binds data from your widget to the design panel
- icon-24.png: The icon that appears in the widget editor's chart selector menu
The data panels array contains 0 or more panels, which are displayed within the widget editor. Each panel can have one of the following types
- visible: This is the standard panel type, which just displays each item within the panel
- series: This type displays all members of each item with a color picker, so the dashboard designer can pick a specific color for each member. This type must have a metadata.type = ['dimensions']
- filter: This means the panel is for widget filters, so it will appear on the right side of the widget editor
Each data panel contains a metadata object, which includes a types array. This array lists what datatypes are acceptable for this panel, and can include any combination of the following:
- dimensions: Allows for getting a list of all unique values from an Elasticube field
- measures: Allows for aggregations (sum, count, etc) as well as calculated formulas
Each of the event handlers of this widget receive some parameters from the plugin framework. The widget object is passed to every event, and matches the outline described in the Sisense documentation. Additional parameters are listed below:
processResult.queryResult: This object contains the raw results of the query
- rows(): Function to return the data as an array of rows, each containing an array of columns
- columns(): Function to return the data as an array of columns, each containing an array of rows
- metadata(): Function to return the original query
render.args
- $scope: The Angular scope of the widget
- element: The HTML element, in which to render your visualization
- query: The original query sent to the Elasticube
- reason: The reason why the widget is being rendered (refresh, resize, etc)
- widget: The widget's object model
- widget.queryResult: Where to find the object returned from the processResult event handler.
