import { Event, Question } from "survey-core"; import { IVisualizationPanelOptions, VisualizationPanel } from "./visualizationPanel"; import { DashboardItem, IDashboardItemOptions } from "./dashboard-item"; import { IVisualizerPanelElement } from "./config"; import { DatePeriodEnum } from "./utils/dateRangeWidget"; import { DateRangeTuple, IDateRangeChangedOptions } from "./utils/dateRangeModel"; /** * A configuration object passed to the [`Dashboard`](https://surveyjs.io/dashboard/documentation/api-reference/dashboard) constructor. * * [Get Started with SurveyJS Dashboard](https://surveyjs.io/dashboard/documentation/get-started (linkStyle)) * * [View Demo](https://surveyjs.io/dashboard/examples/interactive-survey-data-dashboard/ (linkStyle)) * @since 3.0.0 */ export interface IDashboardOptions extends IVisualizationPanelOptions { /** * An array of data field names and [dashboard item configuration objects](https://surveyjs.io/dashboard/documentation/idashboarditemoptions). * * Specify this property to define dashboard items explicitly or customize items generated from the [`questions`](#questions) array. The array order determines the item order in the Dashboard. * @since 3.0.0 */ items?: Array; /** * An array of survey questions to visualize. * * To populate this array, instantiate a [`SurveyModel`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model), call its [`getAllQuestions()`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#getAllQuestions) method, optionally filter the result, and assign it to this property. * * When `questions` are specified, the Dashboard generates items automatically according to question configuration. Use the [`items`](#items) array to customize the generated items. * @since 3.0.0 */ questions?: Question[]; /** * An array of survey response objects to visualize. * * In addition to `data`, specify at least one of the following: * * - [`questions`](#questions)\ * Dashboard items are generated automatically based on question settings. * - [`items`](#items)\ * Dashboard items are defined explicitly. * - Both `questions` and `items`\ * Items are generated from `questions` and then customized using `items`. * @since 3.0.0 */ data?: any[]; /** * The name of a data field that contains date values used by the date panel. * @since 3.0.0 */ dateFieldName?: string; /** * The predefined date period selected in the date panel. Applies only if [`dateFieldName`](#dateFieldName) is specified. * * Supported values: * * - `"last7days"` – Last 7 days * - `"last14days"` – Last 14 days * - `"last28days"` – Last 28 days * - `"last30days"` – Last 30 days * - `"lastWeekSun"` – Last week (starts Sunday) * - `"lastWeekMon"` – Last week (starts Monday) * - `"lastMonth"` – Last month * - `"lastQuarter"` – Last quarter * - `"lastYear"` – Last year * - `"ytd"` – This year to date * - `"mtd"` – This month to date * - `"wtdSun"` – This week to date (starts Sunday) * - `"wtdMon"` – This week to date (starts Monday) * - `"qtd"` – This quarter to date * @since 3.0.0 * @see availableDatePeriods * @see showDatePanel */ datePeriod?: DatePeriodEnum; /** * An array of date periods available for selection in the date panel. * * Refer to [`datePeriod`](#datePeriod) for supported values. * @since 3.0.0 */ availableDatePeriods?: DatePeriodEnum[]; /** * A `[startDate, endDate]` tuple that defines a custom date range. Applies only if [`dateFieldName`](#dateFieldName) is specified. * * If both [`datePeriod`](#datePeriod) and `dateRange` are specified, `dateRange` takes precedence. * @since 3.0.0 */ dateRange?: DateRangeTuple; /** * Specifies whether to display the total number of answers in the date panel. Applies only if [`dateFieldName`](#dateFieldName) is specified. * * Default value: `true` * @since 3.0.0 */ showDatePanel?: boolean; showAnswerCount?: boolean; } /** * Visualizes survey results and provides an interactive UI for data analysis. * * [Get Started with SurveyJS Dashboard](https://surveyjs.io/dashboard/documentation/get-started (linkStyle)) * * [View Demo](https://surveyjs.io/dashboard/examples/interactive-survey-data-dashboard/ (linkStyle)) * @since 3.0.0 */ export declare class Dashboard extends VisualizationPanel { private readonly _options; private _dateRangeWidget; private _dateRangeModel; constructor(_options: IDashboardOptions); /** * Raised when the user changes the date range in the date panel. Handle this event to react to date filtering changes. * * Parameters: * * - `options.dateRange`: `number[]`\ * The selected `[startDate, endDate]` range. * - `options.datePeriod`: `"last7days"` | `"last14days"` | `"last28days"` | `"last30days"` | `"lastWeekMon"` | `"lastWeekSun"` | `"lastMonth"` | `"lastQuarter"` | `"lastYear"` | `"ytd"` | `"mtd"` | `"wtdSun"` | `"wtdMon"` | `"qtd"`\ * The selected predefined date period. `undefined` if the user selected a custom range. * @since 3.0.0 */ onDateRangeChanged: Event<(sender: Dashboard, options: IDateRangeChangedOptions) => any, Dashboard, any>; createDateRangeWidget(): void; protected onDataChanged(): void; protected renderToolbar(container: HTMLElement): void; protected buildVisualizer(element: DashboardItem, questions: Array): void; protected createElement(element: IVisualizerPanelElement, question?: Question): DashboardItem; /** * Gets an array of [dashboard items](https://surveyjs.io/dashboard/documentation/api-reference/dashboarditem). * * Each item represents a single data visualization within the Dashboard. * @since 3.0.0 */ get items(): DashboardItem[]; /** * Returns a dashboard item with the specified `name`. * * If the [`questions`](https://surveyjs.io/dashboard/documentation/api-reference/idashboardoptions#questions) array is specified when initializing the Dashboard, item names are generated automatically based on the associated question names. * @param name The item identifier. * @returns A [`DashboardItem`](https://surveyjs.io/dashboard/documentation/api-reference/dashboarditem) instance, or `undefined` if no matching item is found. * @since 3.0.0 */ getItem(name: string): DashboardItem | undefined; /** * Adds a new item to the Dashboard. * @param item A [`DashboardItem`](https://surveyjs.io/dashboard/documentation/api-reference/dashboarditem) instance, [`IDashboardItemOptions`](https://surveyjs.io/dashboard/documentation/api-reference/idashboarditemoptions) object, or survey question. * @returns The new `DashboardItem` instance. */ /** * Adds an item to the Dashboard. * @param item A [`DashboardItem`](https://surveyjs.io/dashboard/documentation/api-reference/dashboarditem) instance, an [`IDashboardItemOptions`](https://surveyjs.io/dashboard/documentation/api-reference/idashboarditemoptions) object, or a survey question used to create a new item. * @returns The added `DashboardItem` instance. * @since 3.0.0 */ addItem(item: DashboardItem | IDashboardItemOptions | Question): DashboardItem; /** * Removes an item from the Dashboard. * * @param item A [`DashboardItem`](https://surveyjs.io/dashboard/documentation/api-reference/dashboarditem) instance or the name of the item to remove. * @since 3.0.0 */ removeItem(item: DashboardItem | string): void; destroy(): void; }