Converting an Existing Sisense Widget to a Dynamic ComposeSDK Widget Component

[JeremyFriedel]

Converting an Existing Sisense Widget to a Dynamic ComposeSDK Widget Component

Using either the widget Sisense API's, or the Sisense widget JS API object, it is possible to determine all components and parameters of a widget required to create an equivalent dynamic ComposeSDK widget component. This approach allows the extraction of all components and parameters of a widget, enabling the creation of an equivalent dynamic ComposeSDK widget component without directly referencing or relying on a specific widget or dashboard ID. The metadata of an existing widget contains all the information needed to create a dynamic version of an existing Sisense widget. It is also possible to use an existing widget ID and dashboard ID to render an existing widget in ComposeSDK, but this does not take full advantage of the capabilities of ComposeSDK to generate new widgets directly. 

This method ensures flexibility, as it doesn't depend on the continued presence of the widget on the Sisense server. 

The metadata of an existing widget holds all the necessary information to craft a dynamic version. While it's possible to use an existing widget ID and dashboard ID to render the widget in ComposeSDK, this doesn't fully exploit the capabilities of ComposeSDK for generating new widgets directly.

The prism widget object encompasses the metadata of all components essential for the widget. By utilizing the metadata panels object accessible in the JavaScript developer console, one can extract all relevant data about an existing widget for conversion to a dynamic ComposeSDK widget:

Using this general JS widget object path, all metadata panels can be converted in sequence to dynamic ComposeSDK form:

prism.activeWidget.metadata.panels[panelIndex].items[itemIndex].jaql

The initial widget metadata in native Sisense, viewable using the above JS code using the JS widget API, will return all the information needed for conversion to a dynamic ComposeSDK widget.

The initial widget to be converted into native Sisense in this article is below:

 
This above JS code using the JS widget API object will return all the values needed to convert to a dynamic ComposeSDK widget.

From the information gathered from the first two panels, one can determine both the category dimension and the value used. The visible aggregation type such as the sum method, can also be identified. Translating this into standard ComposeSDK syntax would be equivalent to:

        dataOptions={{
          category: [DM.Commerce.Gender],
          value: [measures.sum(DM.Commerce.Revenue)],
        }}

Similarly, the filter state of a dashboard or widget filter can be extracted and converted to dynamic ComposeSDK form. The dimension of the filter and the member state can be extracted to form the filter parameter of the chart. The addition of a filter to the chart, as reflected in the widget metadata panels, can be represented in ComposeSDK as follows:

Using the dimension and member values from the panels, the ComposeSDK equivalent would be:

        filters={[filters.members(DM.Commerce.Gender, ["Male"])]}

Applying filters to the widget will yield identical results in both ComposeSDK and native Sisense.

Before the widget filter is applied (these screenshots are ComposeSDK widgets):

and after:

The final ComposeSDK dynamic widget code in this case is:

      <Chart
        dataSet={DM.DataSource}
        title={"GENDER BREAKDOWN"}
        chartType={"pie"}
        dataSource={DM.DataSource}
        dataOptions={{
          category: [DM.Commerce.Gender],
          value: [measures.sum(DM.Commerce.Revenue)],
        }}
        filters={[filters.members(DM.Commerce.Gender, ["Male"])]}

      />

This code can be dynamically modified, and all parameters can be changed to variables or React props, allowing dynamic changes using the full power of ComposeSDK. Additional filters or dimensions can also be added as needed. This fundamental principle of conversion can be applied to any other widget type or widget with significantly more parameters and dimensions. Widget Styling and other ComposeSDK widget parameters can also be added as needed with ComposeSDK.

[DRay]

I wanted to let everyone here know that there is a ComposeSDK free trial available. You can sign up here: https://www.sisense.com/platform/compose-sdk-free-trial/