# Chart Plugins
Note: This guide is for
React. Chart plugins are not currently supported in
Angular and
Vue.
This guide explains how to define your own chart plugin component and register it in your application code, so that it will be automatically rendered (based on the corresponding widget type) when using the DashboardById
component.
Note: It is assumed that the application is already configured correctly for use with Compose SDK.
# Sample dashboard
The histogramwidget
plugin is included with Sisense Fusion, so we'll be using it as our example. We'll start by creating a dashboard in Fusion, containing a single histogramwidget
widget with Sample ECommerce
as its data source.
# Displaying the dashboard in your application
To display a dashboard using Compose SDK, we need the oid
for the relevant dashboard. The simplest way to find this, is to copy the value from the end of the URL when viewing the dashboard in Fusion, e.g. /app/main/dashboards/{dashboardOid}
.
The dashboard can be easily displayed using the DashboardById
component, passing this value into the dashboardOid
prop.
import { DashboardById } from '@sisense/sdk-ui';
function App() {
return (
<DashboardById dashboardOid={'66f23d1b202c89002abd64ac'} />;
);
}
export default App;
Since Compose SDK does not support the histogramwidget
plugin out of the box (nor any other Fusion plugin widget) it is expected that Compose SDK will display an error in place of the histogram widget.
In order to resolve this, we will explore how to define a plugin component and register it with Compose SDK, so that it knows what to do when it encounters a histogramwidget
.
# Defining a plugin using Compose SDK
Before registering our plugin, we first need to define a custom plugin component that will:
- Receive the props that Compose SDK will pass to our plugin when rendering the
DashboardById
component - Run a data query using those props
- Render a visualization with the results
Purely for the simplicity of this guide, we have chosen to define a custom plugin component which renders a table of the query results. In reality, you would more likely define a React implementation of a histogram chart, or however else you wish to represent the presence of this plugin in a dashboard.
This guide also aims to demonstrate the flexibility of the registerPlugin
interface - as long as you provide a functional component that matches the shape of PluginComponent
, Compose SDK will render that component for the designated plugin.
A note on the dataOptions
prop that is passed to our component: For those familiar with the Fusion plugin / add-on architecture, dataOptions
is the Compose SDK equivalent of panels
on the WidgetMetadata (opens new window) object.
Compose SDK translates all widget metadata and filters to Compose SDK data structures (e.g. values inside dataOptions
are of type StyledColumn
and StyledMeasureColumn
, the same types you'd expect for dataOptions
into the Chart
component).
In the custom plugin component, we can use the props directly with the useExecutePluginQuery
hook which runs a data query and applies some formatting on the results (defined by the StyledColumn
information in dataOptions
).
import { DashboardById, PluginComponent, useExecutePluginQuery } from '@sisense/sdk-ui';
const ResultsTable: PluginComponent = (props) => {
const { data } = useExecutePluginQuery(props);
if (!data) {
return null;
}
return (
<table style={{ margin: '20px' }}>
<thead>
<tr>
{data.columns.map((column, columnIndex) => (
<th key={columnIndex}>{column.name}</th>
))}
</tr>
</thead>
<tbody>
{data.rows.map((row, rowIndex) => (
<tr key={rowIndex}>
{row.map((cell, cellIndex) => (
<td key={cellIndex}>{cell.text}</td>
))}
</tr>
))}
</tbody>
</table>
);
};
...
If you prefer to work with the raw data without any formatting applied, you can use extractDimensionsAndMeasures
with useExecuteQuery
instead.
import { useExecuteQuery, extractDimensionsAndMeasures } from '@sisense/sdk-ui';
const { dimensions, measures } = extractDimensionsAndMeasures(props.dataOptions);
const { data } = useExecuteQuery({
dimensions,
measures,
filters: props.filters,
});
# Registering the plugin with Compose SDK
To register the plugin, we need to call registerPlugin
, which is returned from the usePlugins
hook.
import { DashboardById, PluginComponent, useExecutePluginQuery, usePlugins } from '@sisense/sdk-ui';
...
function App() {
const { registerPlugin } = usePlugins();
registerPlugin('histogramwidget', ResultsTable);
return <DashboardById dashboardOid={'66f4d4dd384428002ae0a21d'} />;
};
...
If we refresh our application, instead of seeing the error in place of the widget as before, we should now see something like this:
# Summary
Here's what we accomplished:
- Displayed an existing Fusion dashboard in our application by rendering a
DashboardById
component - Created a React component that uses its props to execute a data query and display the results in a table
- Registered that table component to be shown in place of the
histogramwidget
when it is rendered inside of aDashboardById
component
Obviously, we didn't end up with a new histogram component in React (yet), but hopefully the simplicity of this guide gives you the tools to you need to make that, or anything else, happen!