Interface CustomWidgetComponentProps<DataOptions, StyleOptions, DataPoint>

import { Component, Input } from '@angular/core';
import {
  CustomWidgetComponentProps,
  CustomWidgetsService,
  GenericDataOptions,
  AbstractDataPointWithEntries,
  DataPointEntry,
  StyledColumn,
  StyledMeasureColumn,
} from '@sisense/sdk-ui-angular';
import type { DataSource, Filter, FilterRelations } from '@sisense/sdk-data';

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

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

type MyWidgetProps = CustomWidgetComponentProps<MyDataOptions, object, MyDataPoint>;

@Component({
  selector: 'app-my-widget',
  template: `<div>My Custom Widget</div>`,
})
export class MyWidgetComponent implements MyWidgetProps {
  @Input() dataOptions!: MyDataOptions;
  @Input() dataSource?: DataSource;
  @Input() styleOptions?: object;
  @Input() filters?: Filter[] | FilterRelations;
  @Input() highlights?: Filter[];
  @Input() description?: string;
  @Input() onDataPointClick?: (point: MyDataPoint, nativeEvent: MouseEvent) => void;
  @Input() onDataPointContextMenu?: (point: MyDataPoint, nativeEvent: MouseEvent) => void;
  @Input() onDataPointsSelected?: (points: MyDataPoint[], nativeEvent: MouseEvent) => void;
}

// In AppModule or a component, register the custom widget:
constructor(private customWidgets: CustomWidgetsService) {
  this.customWidgets.registerCustomWidget('my-widget', MyWidgetComponent);
}