✅ You are viewing documentation for the latest version of Compose SDK.
Version:

# Interface CustomWidgetComponentProps<DataOptions, StyleOptions, DataPoint>

Props passed to a user-defined custom widget component.

# Example

import { CustomWidgetComponent, CustomWidgetComponentProps, CustomWidgetDataPoint, StyledColumn, StyledMeasureColumn, DataPointEntry, GenericDataOptions} from '@sisense/sdk-ui';

interface MyDataOptions extends GenericDataOptions {
  category: StyledColumn[];
  value: StyledMeasureColumn[];
}

interface MyDataPoint extends CustomWidgetDataPoint {
  entries: {
    category: DataPointEntry[];
    value: DataPointEntry[];
  };
}

type MyWidgetProps = CustomWidgetComponentProps<MyDataOptions, {}, MyDataPoint>;

const MyWidget: CustomWidgetComponent<MyWidgetProps> = (props) => {
  const { dataOptions, onDataPointClick } = props;
  // ... implementation based on props
  return <div>My Custom Widget</div>;
};

# Type parameters

Parameter Default Description
DataOptions GenericDataOptions The shape of data options for this custom widget
StyleOptions CustomWidgetStyleOptions The shape of style options for this custom widget
DataPoint extends AbstractDataPointWithEntries AbstractDataPointWithEntries The shape of data points for event handlers

# Properties

# Callbacks

# onDataPointClick

onDataPointClick?: CustomWidgetDataPointEventHandler< DataPoint >

Click handler callback for a data point


# onDataPointContextMenu

onDataPointContextMenu?: CustomWidgetDataPointContextMenuHandler< DataPoint >

Context menu handler callback for a data point


# onDataPointsSelected

onDataPointsSelected?: CustomWidgetDataPointsEventHandler< DataPoint >

Handler callback for selection of multiple data points

# Other

# dataOptions

dataOptions: DataOptions

Data options defining what data to display


# dataSource

dataSource?: DataSource

Data source for the custom widget


# description

description?: string

Description of the widget


# filters

filters?: FilterRelations | Filter[]

Filters to apply to the data


# highlights

highlights?: Filter[]

Highlight filters for interactive highlighting


# styleOptions

styleOptions?: StyleOptions

Style options for customizing appearance