Class Widget

Facade component that renders a widget within a dashboard based on the widget type.

Example

<script setup lang="ts">
import { Widget, type WidgetProps } from '@sisense/sdk-ui-vue';
import { measureFactory } from '@sisense/sdk-data';

const widgetProps: WidgetProps = {
  id: 'widget-id',
  widgetType: 'chart',
  dataSource: DM.DataSource,
  chartType: 'column',
  dataOptions: {
    category: [dimProductName],
    value: [
      {
        column: measureFactory.sum(DM.Fact_Sale_orders.OrderRevenue, 'Total Revenue'),
        sortType: 'sortDesc',
      },
    ],
    breakBy: [],
  },
};
</script>

<template>
  <Widget
    :id="widgetProps.id"
    :widgetType="widgetProps.widgetType"
    :dataSource="widgetProps.dataSource"
    :chartType="widgetProps.chartType"
    :dataOptions="widgetProps.dataOptions"
  />
</template>

Properties

Data

dataSource

readonly dataSource?: DataSource

Data source the query is run against - e.g. Sample ECommerce

If not specified, the query will use the defaultDataSource specified in the parent Sisense Context.

filters

readonly filters?: FilterRelations | Filter[]

Filters that will slice query results

highlights

readonly highlights?: Filter[]

Highlight filters that will highlight results that pass filter criteria

Chart

chartType

readonly chartType?: ChartType

Default chart type of each series

dataOptions

readonly dataOptions?: ChartDataOptions | GenericDataOptions | PivotTableDataOptions

Configurations for how to interpret and present the data passed to the chart

Widget

customWidgetType

readonly customWidgetType?: string

Custom widget type. This is typically the name/ID of the custom widget.

description

readonly description?: string

Description of the widget

drilldownOptions

readonly drilldownOptions?: DrilldownOptions | PivotTableDrilldownOptions

List of categories to allow drilldowns on

id

readonly id: string

Unique identifier of the widget

styleOptions

readonly styleOptions?: ChartWidgetStyleOptions | CustomWidgetStyleOptions | PivotTableWidgetStyleOptions | TextWidgetStyleOptions

Style options for both the chart and widget including the widget header

title

readonly title?: string

Title of the widget

widgetType

readonly widgetType: "chart" | "custom" | "pivot" | "text"

Widget type

Callbacks

onBeforeRender

readonly onBeforeRender?: BeforeRenderHandler | IndicatorBeforeRenderHandler

A callback that allows you to customize the underlying chart element before it is rendered. The returned options are then used when rendering the chart.

This callback is not supported for Areamap Chart, Scattermap Chart, Table, and PivotTable.

onDataPointClick

readonly onDataPointClick?: AreamapDataPointEventHandler | BoxplotDataPointEventHandler | CalendarHeatmapDataPointEventHandler | CustomWidgetDataPointEventHandler< AbstractDataPointWithEntries > | DataPointEventHandler | IndicatorDataPointEventHandler | PivotTableDataPointEventHandler | ScatterDataPointEventHandler | ScattermapDataPointEventHandler | TextWidgetDataPointEventHandler

Click handler callback for a data point

onDataPointContextMenu

readonly onDataPointContextMenu?: BoxplotDataPointEventHandler | CalendarHeatmapDataPointEventHandler | CustomWidgetDataPointContextMenuHandler< AbstractDataPointWithEntries > | DataPointEventHandler | PivotTableDataPointEventHandler | ScatterDataPointEventHandler

Context menu handler callback for a data point

onDataPointsSelected

readonly onDataPointsSelected?: CalendarHeatmapDataPointsEventHandler | CustomWidgetDataPointsEventHandler< AbstractDataPointWithEntries > | DataPointsEventHandler | ScatterDataPointsEventHandler

Handler callback for selection of multiple data points

onDataReady

readonly onDataReady?: (data) => Data

A callback that allows to modify data immediately after it has been retrieved. It can be used to inject modification of queried data.

Parameters

Returns

Data