survey-analytics
Version:
SurveyJS Dashboard is a UI component for visualizing and analyzing survey data. It interprets the form JSON schema to identify question types and renders collected responses using interactive charts and tables.
262 lines (261 loc) • 9.18 kB
TypeScript
import { SurveyModel, Question, Event, EventBase } from "survey-core";
import { IPermission, QuestionLocation, ITableState, IColumn, IColumnData } from "./config";
import { Details } from "./extensions/detailsextensions";
import { ITableExtension, TableExtensions } from "./extensions/tableextensions";
export interface ITableOptions {
[index: string]: any;
/**
* Specifies whether to use question names instead of question titles as column headings.
*
* Default value: `false`
*/
useNamesAsTitles?: boolean;
/**
* Specifies the delimiter used to separate multiple choice items in a list.
*
* Default value: `", "`
*/
itemsDelimiter?: string;
/**
* A callback function that allows you to customize a question's display value in the table.
*
* Parameters:
*
* - `options.question`: `Question`\
* The question for which the callback is executed.
* - `options.displayValue`: `any`\
* The question's display value. You can modify this parameter to change the output.
*/
onGetQuestionValue?: (options: {
question: Question;
displayValue: any;
}) => void;
/**
* Specifies the number of data items to load and display per page. Applies only if `paginationEnabled` is `true`.
*
* Default value: 10
* @see paginationEnabled
*/
pageSize?: number;
/**
* Specifies whether the dataset is split into pages.
*
* Default value: `true`
*
* > Pagination cannot be disabled if the dataset is loaded from a server (that is, if the second parameter passed to the `Tabulator` constructor is a function).
* @see pageSize
*/
paginationEnabled?: boolean;
/**
* Specifies whether responses to [Dynamic Matrix](https://surveyjs.io/form-library/examples/dynamic-matrix-add-new-rows/) and [Dynamic Panel](https://surveyjs.io/form-library/examples/duplicate-group-of-fields-in-form/) questions are rendered using nested tables.
*
* Default value: `true`
*
* If disabled, responses are displayed as stringified JSON objects instead of a tabular structure.
*/
useNestedTables?: boolean;
/**
* Specifies whether to split responses to multi-select questions (Checkboxes and Multi-Select Dropdown) into separate columns.
*
* When enabled, each choice is represented as an individual column. Cell values indicate whether the choice was selected or the selection order, depending on the `multiSelectColumnValueFormat` setting. Empty cells indicate that the choice was not selected.
*
* Default value: `false`
*
*/
splitMultiSelectIntoColumns?: boolean;
/**
* Specifies how selected values are represented in columns generated from multi-select questions. Applies only when `splitMultiSelectIntoColumns` is `true`.
*
* Accepted values:
*
* - `"checkmark"` – Displays a checkmark symbol for selected choices.
* - `"selectionOrder"` – Displays the order in which choices were selected (1, 2, 3, ...).
*
* Default value: `"checkmark"`
*/
multiSelectColumnValueFormat?: "checkmark" | "selectionOrder";
}
export type TabulatorFilter = {
field: string;
type: string;
value: any;
};
export type TabulatorSortOrder = {
field: string;
direction: undefined | "asc" | "desc";
};
export type GetDataUsingCallbackFn = (params: {
filter?: Array<TabulatorFilter>;
sort?: Array<TabulatorSortOrder>;
offset?: number;
limit?: number;
callback?: (response: {
data: Array<Object>;
totalCount: number;
error?: any;
}) => void;
}) => void;
export type GetDataUsingPromiseFn = (params: {
filter?: Array<TabulatorFilter>;
sort?: Array<TabulatorSortOrder>;
offset?: number;
limit?: number;
}) => Promise<{
data: Array<Object>;
totalCount: number;
error?: any;
}>;
export type GetDataFn = GetDataUsingCallbackFn | GetDataUsingPromiseFn;
export declare class TableEvent extends EventBase<Table> {
}
export declare abstract class Table {
protected _survey: SurveyModel;
protected data: Array<Object> | GetDataFn;
protected _options: ITableOptions;
protected _columnsData: Array<IColumnData>;
static showFilesAsImages: boolean;
static haveCommercialLicense: boolean;
protected tableData: any;
protected extensions: TableExtensions;
private haveCommercialLicense;
protected _columns: Array<IColumn>;
constructor(_survey: SurveyModel, data: Array<Object> | GetDataFn, _options?: ITableOptions, _columnsData?: Array<IColumnData>);
protected renderResult: HTMLElement;
protected currentPageSize: number;
protected currentPageNumber: number;
protected _rows: TableRow[];
protected isColumnReorderEnabled: boolean;
isInitialized: boolean;
protected initialize(): void;
getTableData(): Array<any>;
/**
* Sets pagination selector content.
*/
paginationSizeSelector: number[];
onColumnsVisibilityChanged: TableEvent;
onColumnsLocationChanged: TableEvent;
onRowRemoved: TableEvent;
renderDetailActions: (container: HTMLElement, row: TableRow) => HTMLElement;
getData(): Object[] | GetDataFn;
get survey(): SurveyModel;
get options(): ITableOptions;
abstract applyFilter(value: string): void;
abstract applyColumnFilter(columnName: string, value: string): void;
abstract sortByColumn(columnName: string, direction: string): void;
render(targetNode: HTMLElement | string): void;
enableColumnReorder(): void;
disableColumnReorder(): void;
getPageNumber(): number;
setPageNumber(value: number): void;
/**
* Returns current page size.
*/
getPageSize(): number;
/**
* Sets current page size.
*/
setPageSize(value: number): void;
getCreatedRows(): TableRow[];
clearCreatedRows(): void;
get useNamesAsTitles(): boolean;
get itemsDelimiter(): string;
protected buildColumns: (survey: SurveyModel) => IColumn[];
private isNonValueQuestion;
isColumnVisible(column: IColumn): boolean;
get columns(): Array<IColumn>;
set columns(columns: Array<IColumn>);
private isInitTableDataProcessingValue;
get isInitTableDataProcessing(): boolean;
protected initTableData(data: Object[] | GetDataFn): void;
protected processLoadedDataItem(item: any): any;
moveColumn(from: number, to: number): void;
setColumnLocation(columnName: string, location: QuestionLocation): void;
getColumnByName(columnName: string): IColumn;
setColumnVisibility(columnName: string, isVisible: boolean): void;
setColumnWidth(columnName: string, width: string | number): void;
removeRow(row: TableRow): void;
/**
* Returns current locale of the table.
* If locales more than one, the language selection dropdown will be added in the toolbar
*/
get locale(): string;
/**
* Sets locale for table.
*/
set locale(newLocale: string);
private _lockStateChanged;
lockStateChanged(): void;
unlockStateChanged(): void;
protected stateChanged(): void;
getLocales(): Array<string>;
protected supportSoftRefresh(): boolean;
protected softRefresh(): void;
protected hardRefresh(): void;
refresh(hard?: boolean): void;
destroy(): void;
get isRendered(): boolean;
/**
* Table state getter.
*/
get state(): ITableState;
/**
* Table state setter.
*/
set state(newState: ITableState);
/**
* Resets table state.
*/
resetState(): void;
private updateColumnsFromData;
/**
* Fires when table state changed.
*/
onStateChanged: TableEvent;
/**
* Gets table permissions.
*/
get permissions(): IPermission[];
/**
* Sets table permissions.
*/
set permissions(permissions: IPermission[]);
/**
* Fires when permissions changed
*/
onPermissionsChangedCallback: any;
protected get allowSorting(): boolean;
allowExtension(extension: ITableExtension): boolean;
}
export declare abstract class TableRow {
protected table: Table;
protected extensionsContainer: HTMLElement;
protected detailsContainer: HTMLElement;
constructor(table: Table, extensionsContainer: HTMLElement, detailsContainer: HTMLElement);
details: Details;
extensions: TableExtensions;
private detailedRowClass;
private isDetailsExpanded;
onToggleDetails: Event<(sender: TableRow, options: any) => any, TableRow, any>;
/**
* Returns row's html element
*/
abstract getElement(): HTMLElement;
/**
* Returns data, which is displayed in the row.
*/
abstract getRowData(): any;
/**
* Returns position of row in the table's data.
*/
abstract getDataPosition(): number;
protected isSelected: boolean;
render(): void;
openDetails(): void;
closeDetails(): void;
toggleDetails(): void;
getIsSelected(): boolean;
toggleSelect(): void;
remove(): void;
private onColumnLocationChangedCallback;
destroy(): void;
}