survey-analytics 2.5.14 → 3.0.0-beta.0

package/survey-analytics.types/utils/calculationDateRanges.d.ts

@@ -0,0 +1,35 @@
+export interface IDateRange {
+    start?: number;
+    end?: number;
+}
+export declare function startOfDay(d: Date): Date;
+export declare function endOfDay(d: Date): Date;
+export declare function toRange(start: Date | number, end: Date | number): IDateRange;
+/** Last 7 days (excl. today): refDate minus 7 days through yesterday */
+export declare function getLast7Days(refDate?: Date): IDateRange;
+/** Last 14 days (excl. today): refDate minus 14 days through yesterday */
+export declare function getLast14Days(refDate?: Date): IDateRange;
+/** Last 28 days (excl. today): refDate minus 28 days through yesterday */
+export declare function getLast28Days(refDate?: Date): IDateRange;
+/** Last 30 days (excl. today): refDate minus 30 days through yesterday */
+export declare function getLast30Days(refDate?: Date): IDateRange;
+/** Last week (Monday-Sunday): previous Monday through previous Sunday */
+export declare function getLastWeekMon(refDate?: Date): IDateRange;
+/** Last week (Sunday-Saturday): previous Sunday through previous Saturday */
+export declare function getLastWeekSun(refDate?: Date): IDateRange;
+/** Last month: first day through last day of previous month */
+export declare function getLastMonth(refDate?: Date): IDateRange;
+/** Last quarter: first day through last day of previous quarter */
+export declare function getLastQuarter(refDate?: Date): IDateRange;
+/** Last year: January 1 through December 31 of previous year */
+export declare function getLastYear(refDate?: Date): IDateRange;
+/** This week to date (starts Sunday): Sunday through yesterday or today */
+export declare function getThisWeekToDateSun(refDate?: Date, includeToday?: boolean): IDateRange;
+/** This week to date (starts Monday): Monday through yesterday or today */
+export declare function getThisWeekToDateMon(refDate?: Date, includeToday?: boolean): IDateRange;
+/** This month to date: first day of month through yesterday or today */
+export declare function getThisMonthToDate(refDate?: Date, includeToday?: boolean): IDateRange;
+/** This quarter to date: first day of quarter through yesterday or today */
+export declare function getThisQuarterToDate(refDate?: Date, includeToday?: boolean): IDateRange;
+/** This year to date: January 1 through yesterday or today */
+export declare function getThisYearToDate(refDate?: Date, includeToday?: boolean): IDateRange;

package/survey-analytics.types/utils/dateRangeModel.d.ts

@@ -0,0 +1,32 @@
+import { IDateRange } from "./calculationDateRanges";
+export type DatePeriodEnum = "last7days" | "last14days" | "last28days" | "last30days" | "lastWeekMon" | "lastWeekSun" | "lastMonth" | "lastQuarter" | "lastYear" | "ytd" | "mtd" | "wtdSun" | "wtdMon" | "qtd";
+export type DateRangeTuple = [startDate: Date | number, endDate: Date | number];
+export declare const datePeriodsFunctions: Partial<Record<DatePeriodEnum, (refDate?: Date, includeToday?: boolean) => IDateRange>>;
+export interface IDateRangeChangedOptions {
+    datePeriod?: DatePeriodEnum;
+    dateRange?: DateRangeTuple;
+}
+export interface IDateRangeModelOptions {
+    onDateRangeChanged: (dateRange: IDateRange, datePeriod: DatePeriodEnum) => void;
+    datePeriod?: DatePeriodEnum;
+    availableDatePeriods?: Array<DatePeriodEnum>;
+    dateRange?: DateRangeTuple;
+    includeToday?: boolean;
+}
+export declare class DateRangeModel {
+    private _currentDatePeriod;
+    private _currentDateRange;
+    private _availableDatePeriods;
+    private _onDateRangeChanged;
+    private _includeToday;
+    constructor(options: IDateRangeModelOptions);
+    get currentDatePeriod(): DatePeriodEnum;
+    get currentDateRange(): IDateRange;
+    get availableDatePeriods(): Array<DatePeriodEnum>;
+    get includeToday(): boolean;
+    set includeToday(newValue: boolean);
+    toggleIncludeToday(): void;
+    setDatePeriod(datePeriod: DatePeriodEnum | undefined): void;
+    setFilter(start: number, end: number, isCustom?: boolean): void;
+    periodIsToDate(): boolean;
+}

package/survey-analytics.types/utils/dateRangeWidget.d.ts

@@ -0,0 +1,38 @@
+import { DateRangeModel, DatePeriodEnum, datePeriodsFunctions, IDateRangeModelOptions } from "./dateRangeModel";
+import "./dateRangeWidget.scss";
+export type { DatePeriodEnum };
+export { datePeriodsFunctions };
+export interface IDateRangeWidgetOptions extends IDateRangeModelOptions {
+    showAnswerCount?: boolean;
+}
+export declare class DateRangeWidget {
+    private model;
+    private options;
+    static invalidRangeClassName: string;
+    static invalidRangeEditorClassName: string;
+    private dateRangeContainer;
+    private startDateEditor;
+    private endDateEditor;
+    private startDateInput;
+    private endDateInput;
+    private countLabel;
+    private rangeErrorMessage;
+    private datePeriodContainer;
+    private includeTodayContainer;
+    private includeTodayCheckbox;
+    private answersCount;
+    private elementRemoveClassName;
+    private updateMinMaxAttributes;
+    private setDateIntoInput;
+    private createErrorMessage;
+    private createDateEditor;
+    private createDivider;
+    private createIncludeTodayCheckbox;
+    private updateIncludeTodayCheckbox;
+    constructor(model: DateRangeModel, options: IDateRangeWidgetOptions);
+    render(): HTMLElement;
+    setDatePeriod(datePeriod: DatePeriodEnum | undefined): void;
+    updateElements(): void;
+    updateAnswersCount(answersCount?: number): void;
+    destroy(): void;
+}

package/survey-analytics.types/utils/dropdownActionWidget.d.ts

@@ -0,0 +1,31 @@
+import { DropdownBase, IDropdownItemOption } from "./dropdownBase";
+export interface IActionDropdownOptions {
+    options: Array<IDropdownItemOption> | (() => Array<IDropdownItemOption>);
+    isSelected: (option: {
+        value: string;
+        text: string;
+        icon?: string;
+    }) => boolean;
+    handler: (value: string) => boolean;
+    title: string | (() => string) | Function;
+    className?: string;
+    showArrow?: boolean;
+    direction?: "up" | "down";
+}
+export declare class ActionDropdownWidget extends DropdownBase {
+    private options;
+    private headerText;
+    constructor(options: IActionDropdownOptions);
+    get direction(): "up" | "down";
+    protected createHeader(): HTMLDivElement;
+    private getTitleText;
+    protected getOptions(): IDropdownItemOption[];
+    protected isOptionSelected(option: IDropdownItemOption): boolean;
+    protected onOptionSelect(option: IDropdownItemOption, dropdownItem: HTMLLIElement): void;
+    protected onBeforePopupShow(): void;
+    private updateHeaderLabel;
+    protected updateSelect(): void;
+    protected attachMethodsToElement(): void;
+    setValues(values: string[]): void;
+    getValues(): string[];
+}

package/survey-analytics.types/utils/dropdownBase.d.ts

@@ -0,0 +1,47 @@
+export interface IDropdownItemOption {
+    value: string;
+    text: string;
+    title?: string;
+    icon?: string;
+    [key: string]: any;
+}
+export declare abstract class DropdownBase {
+    protected className: string;
+    protected dropdownOpenedClass: string;
+    protected itemClassSelected: string;
+    protected dropdownElement: HTMLDivElement;
+    protected dropdownHeader: HTMLDivElement;
+    protected dropdownList: HTMLUListElement;
+    protected dropdownContainer: HTMLDivElement;
+    protected optionItems: IDropdownItemOption[];
+    protected currentFocusIndex: number;
+    protected handleClickOutsideRef: (event: MouseEvent) => void;
+    constructor(defaultClassName: string);
+    get isOpen(): boolean;
+    render(): HTMLDivElement;
+    protected createDropdownElement(): HTMLDivElement;
+    protected createList(): HTMLUListElement;
+    protected createContainer(): HTMLDivElement;
+    protected createArrow(arrowClassName?: string): HTMLDivElement;
+    protected showPopup(): void;
+    protected hidePopup(): void;
+    protected focusItem(index: number, updateAriaSelected?: boolean): void;
+    protected updateOptions(): void;
+    protected createOptionItem(option: IDropdownItemOption): HTMLLIElement;
+    protected handleOptionClick(e: MouseEvent, option: IDropdownItemOption, dropdownItem: HTMLLIElement): void;
+    protected handleKeyDown(e: KeyboardEvent): void;
+    protected handleClickOutside(event: MouseEvent): void;
+    protected bindEvents(): void;
+    protected handleHeaderClick(e: MouseEvent): void;
+    protected onBeforePopupShow(): void;
+    protected onOpenedByKeyboard(): void;
+    protected onDropdownOpened(): void;
+    protected updateItemSelection(): void;
+    protected shouldUpdateAriaSelectedOnFocus(): boolean;
+    protected abstract createHeader(): HTMLDivElement;
+    protected abstract getOptions(): IDropdownItemOption[];
+    protected abstract isOptionSelected(option: IDropdownItemOption): boolean;
+    protected abstract onOptionSelect(option: IDropdownItemOption, dropdownItem: HTMLLIElement): void;
+    protected abstract updateSelect(): void;
+    protected abstract attachMethodsToElement(): void;
+}

package/survey-analytics.types/utils/dropdownWidget.d.ts

@@ -0,0 +1,40 @@
+import { DropdownBase, IDropdownItemOption } from "./dropdownBase";
+export interface IDropdownOptions {
+    /** Array of options or function that returns options */
+    options: Array<IDropdownItemOption> | (() => Array<IDropdownItemOption>);
+    /** Function to check if option is selected */
+    isSelected: (option: IDropdownItemOption) => boolean;
+    /** Selection handler */
+    handler: (value: string, option: IDropdownItemOption) => void;
+    /** Placeholder text when no option is selected */
+    placeholder?: string;
+    /** Title text above the dropdown */
+    title?: string | (() => string);
+    /** CSS class name for the dropdown */
+    className?: string;
+    resetHandler?: () => void;
+}
+export declare class DropdownWidget extends DropdownBase {
+    private options;
+    private optionsSource;
+    private placeholder;
+    private titleElement;
+    private headerContent;
+    private selectedOption;
+    constructor(options: IDropdownOptions);
+    protected createHeader(): HTMLDivElement;
+    private createResetButton;
+    private updateTitle;
+    protected getOptions(): IDropdownItemOption[];
+    protected isOptionSelected(option: IDropdownItemOption): boolean;
+    protected onOptionSelect(option: IDropdownItemOption, dropdownItem: HTMLLIElement): void;
+    protected onBeforePopupShow(): void;
+    protected onDropdownOpened(): void;
+    protected onOpenedByKeyboard(): void;
+    protected shouldUpdateAriaSelectedOnFocus(): boolean;
+    protected updateHeaderContent(): void;
+    protected updateSelect(): void;
+    protected attachMethodsToElement(): void;
+    setValue(value: string | null | undefined): void;
+    getValue(): string | null;
+}

package/survey-analytics.types/utils/index.d.ts

@@ -1,3 +1,5 @@
+import { IDropdownOptions } from "./dropdownWidget";
+import { IActionDropdownOptions } from "./dropdownActionWidget";
 export declare class DocumentHelper {
     static createSelector(options: Array<{
         value: string;
@@ -6,12 +8,32 @@ export declare class DocumentHelper {
         value: string;
         text: string;
     }) => boolean, handler: (e: any) => void, title?: string | Function): HTMLDivElement;
-    static createButton(handler: (e: any) => void, text?: string, className?: string): HTMLElement;
+    /**
+     * Creates a custom dropdown element with icon support
+     * @param options - Configuration object for the dropdown
+     * @returns Created dropdown element
+     */
+    static createDropdown(options: IDropdownOptions): HTMLDivElement;
+    static createActionDropdown(options: IActionDropdownOptions): HTMLDivElement;
+    /**
+     * Destroys dropdown and removes all event handlers
+     * @param {HTMLElement} dropdownElement - Root dropdown element
+     */
+    static destroyDropdown(dropdownElement: any): void;
+    static createButton(handler: (e: any) => void, text?: string, className?: string, icon?: string): HTMLDivElement;
+    static setStyles(element: HTMLElement, styles: Record<string, any>): void;
     static createElement(tagName: string, className?: string, attrs?: any): HTMLElement;
     static createSvgElement(path: string): SVGSVGElement;
-    static createSvgButton(path: string): HTMLButtonElement;
+    static createSvgButton(path: string, title?: string): HTMLButtonElement;
     static createSvgToggleButton(svgPath1: string, svPpath2: string, text1: string, text2: string, handler1: (e: any) => any, handler2: (e: any) => any, state?: string, className?: string): HTMLElement;
     static createInput(className: string, placeholder?: string, defaultValue?: string): HTMLInputElement;
+    static createTextEditor(options?: {
+        showIcon?: boolean;
+        placeholder?: string;
+        className?: string;
+        inputValue?: string;
+        onchange?: (val: any) => void;
+    }): HTMLElement;
 }
 export declare var options: {
     runningInBrowser: boolean;
@@ -37,3 +59,4 @@ export declare function createImagesContainer(links: Array<{
     content: any;
 }>): HTMLElement;
 export declare function toPrecision(value: number, precision?: number): number;
+export declare function getDiffsFromDefaults(obj: any, defaultObj?: any): any;

package/survey-analytics.types/utils/toggle.d.ts

@@ -0,0 +1,17 @@
+import "./toggle.scss";
+export declare class ToggleWidget {
+    private toggleHandler;
+    private text?;
+    private toggleElement;
+    private isActive;
+    container: HTMLElement;
+    constructor(toggleHandler: (options: {
+        isActive: boolean;
+    }) => void, text?: string | Function, initialState?: boolean);
+    get title(): string;
+    createWidget(): void;
+    bindEvents(): void;
+    toggle(): void;
+    updateView(): void;
+    setState(state: any): void;
+}

package/survey-analytics.types/utils/utils.d.ts

@@ -0,0 +1,9 @@
+export declare function reverseAll(labels: string[], seriesLabels: string[], colors: string[], hasSeries: boolean, texts: any[][], datasets: any[][]): {
+    labels: string[];
+    seriesLabels: string[];
+    colors: string[];
+    texts: any[][];
+    datasets: any[][];
+};
+export declare function removeUndefinedProperties(obj: any): void;
+export declare function isAllZeros(arr: Array<number>): boolean;

package/survey-analytics.types/visualizationComposite.d.ts

@@ -3,6 +3,6 @@ import { VisualizationPanelDynamic } from "./visualizationPanelDynamic";
 export declare class VisualizationComposite extends VisualizationPanelDynamic {
     constructor(question: Question, data: Array<{
         [index: string]: any;
-    }>, options?: Object, name?: string);
+    }>, options?: Object, type?: string);
     getQuestions(): Array<Question>;
 }

package/survey-analytics.types/visualizationManager.d.ts

@@ -5,7 +5,7 @@ declare type VisualizerConstructor = new (question: Question, data: Array<{
 /**
  * An object with methods used to register and unregister visualizers for individual question types.
  *
- * [View Demo](https://surveyjs.io/dashboard/examples/custom-survey-data-visualizer/ (linkStyle))
+ * [How to Implement a Custom Data Visualizer](https://github.com/surveyjs/surveyjs-howtos-and-troubleshooting/blob/main/categories/data-visualization/custom-survey-data-visualizer.md (linkStyle))
  */
 export declare class VisualizationManager {
     static defaultVisualizer: any;
@@ -15,21 +15,20 @@ export declare class VisualizationManager {
         [index: string]: Array<{
             ctor: VisualizerConstructor;
             index: number;
+            visualizerType: string;
         }>;
     };
     /**
      * Registers a visualizer for a specified question type.
      *
-     * [View Demo](https://surveyjs.io/dashboard/examples/custom-survey-data-visualizer/ (linkStyle))
+     * [How to Implement a Custom Data Visualizer](https://github.com/surveyjs/surveyjs-howtos-and-troubleshooting/blob/main/categories/data-visualization/custom-survey-data-visualizer.md (linkStyle))
      * @param questionType A question [type](https://surveyjs.io/form-library/documentation/api-reference/question#getType).
      * @param constructor A function that returns a visualizer constructor to register.
      * @param index A zero-based index that specifies the visualizer's position in the visualizer list for the specified question type. Pass `0` to insert the visualizer at the beginning of the list and use it by default. If `index` is not specified, the visualizer is added to the end of the list.
      */
-    static registerVisualizer(questionType: string, constructor: VisualizerConstructor, index?: number): void;
+    static registerVisualizer(questionType: string, constructor: VisualizerConstructor, index?: number, visualizerType?: string): void;
     /**
      * Unregisters a visualizer for a specified question type.
-     *
-     * [View Demo](https://surveyjs.io/dashboard/examples/visualize-answers-from-text-entry-fields-with-charts/ (linkStyle))
      * @param questionType A question [type](https://surveyjs.io/form-library/documentation/api-reference/question#getType).
      * @param constructor A function that returns a visualizer constructor to unregister.
      */
@@ -44,6 +43,7 @@ export declare class VisualizationManager {
      * @param visualizerType A question [type](https://surveyjs.io/form-library/documentation/api-reference/question#getType).
      */
     static getVisualizersByType(visualizerType: string, fallbackVisualizerType?: string): VisualizerConstructor[];
+    static getVisualizerNamesByType(visualizerType: string, fallbackVisualizerType?: string): Array<string>;
     /**
      * Returns a constructor for an alternative visualizer selector.
      * @see registerAltVisualizerSelector

package/survey-analytics.types/visualizationMatrixDropdown.d.ts

@@ -7,7 +7,7 @@ export declare class VisualizationMatrixDropdown extends VisualizerBase {
         [index: string]: any;
     }>, options?: {
         [index: string]: any;
-    }, name?: string);
+    }, type?: string);
     get canGroupColumns(): boolean;
     protected setLocale(newLocale: string): void;
     get contentVisualizer(): VisualizerBase;
@@ -16,6 +16,7 @@ export declare class VisualizationMatrixDropdown extends VisualizerBase {
         [index: string]: any;
     }>): void;
     getQuestions(): Array<Question>;
+    protected onThemeChanged(): void;
     destroyContent(container: HTMLElement): void;
     renderContent(container: HTMLElement): void;
     destroy(): void;

package/survey-analytics.types/visualizationMatrixDynamic.d.ts

@@ -3,6 +3,6 @@ import { VisualizationPanelDynamic } from "./visualizationPanelDynamic";
 export declare class VisualizationMatrixDynamic extends VisualizationPanelDynamic {
     constructor(question: Question, data: Array<{
         [index: string]: any;
-    }>, options?: Object, name?: string);
+    }>, options?: Object, type?: string);
     getQuestions(): Question[];
 }

package/survey-analytics.types/visualizationPanel.d.ts

@@ -1,9 +1,10 @@
 import { Event, SurveyModel } from "survey-core";
-import { VisualizerBase } from "./visualizerBase";
+import { ICalculationResult, VisualizerBase } from "./visualizerBase";
 import { AlternativeVisualizersWrapper } from "./alternativeVizualizersWrapper";
 import { IVisualizerPanelElement, IState, IPermission } from "./config";
-import { LayoutEngine } from "./layoutEngine";
+import { LayoutEngine } from "./layout-engine";
 import { DataProvider } from "./dataProvider";
+import { IDateRangeChangedOptions } from "./utils/dateRangeModel";
 import "./visualizationPanel.scss";
 export interface IVisualizerPanelRenderedElement extends IVisualizerPanelElement {
     renderedElement?: HTMLElement;
@@ -242,6 +243,7 @@ export interface IVisualizationPanelOptions {
      * Default value: `true`
      */
     allowChangeVisualizerType?: boolean;
+    legendPosition?: "left" | "right" | "top" | "bottom";
 }
 /**
  * An object that visualizes survey results and allows users to analyze them.
@@ -261,8 +263,15 @@ export declare class VisualizationPanel extends VisualizerBase {
     protected questions: Array<any>;
     private _elements;
     private isRoot;
+    static LayoutEngine: new (allowed: boolean, itemSelector: string, dragEnabled?: boolean) => LayoutEngine;
     visualizers: Array<VisualizerBase>;
     private renderedQuestionsCount;
+    private static counter;
+    private resetFilterButton;
+    private _dateRangeWidget;
+    private _dateRangeModel;
+    private static getVisualizerName;
+    private updateResetFilterButtonDisabled;
     constructor(questions: Array<any>, data: Array<{
         [index: string]: any;
     }>, options?: IVisualizationPanelOptions, _elements?: Array<IVisualizerPanelRenderedElement>, isRoot?: boolean);
@@ -283,6 +292,9 @@ export declare class VisualizationPanel extends VisualizerBase {
      **/
     onAlternativeVisualizerChanged: Event<(sender: AlternativeVisualizersWrapper, options: any) => any, AlternativeVisualizersWrapper, any>;
     private onAlternativeVisualizerChangedCallback;
+    private createHideButtonElement;
+    private createDragAreaElement;
+    private createHeaderElement;
     protected onDataChanged(): void;
     protected showElementCore(element: IVisualizerPanelRenderedElement, elementIndex?: number): void;
     showElement(elementName: string): void;
@@ -321,6 +333,7 @@ export declare class VisualizationPanel extends VisualizerBase {
      */
     get allowHideQuestions(): boolean;
     get allowMakeQuestionsPrivate(): boolean;
+    get haveSeveralChildren(): boolean;
     private _layoutEngine;
     /**
      * Returns a [`LayoutEngine`](https://surveyjs.io/dashboard/documentation/api-reference/layoutengine) instance used to arrange visualization items on `VisualizationPanel`.
@@ -412,9 +425,12 @@ export declare class VisualizationPanel extends VisualizerBase {
      * A visualization item that has been moved.
      */
     onElementMoved: Event<(sender: VisualizationPanel, options: any) => any, VisualizationPanel, any>;
+    onDateRangeChanged: Event<(sender: VisualizationPanel, options: IDateRangeChangedOptions) => any, VisualizationPanel, any>;
+    createDateRangeWidget(): void;
     protected visibleElementsChanged(element: IVisualizerPanelElement, reason: string): void;
     onPermissionsChangedCallback: any;
     protected renderPanelElement(element: IVisualizerPanelRenderedElement, container: HTMLElement): HTMLElement;
+    protected renderBanner(container: HTMLElement): void;
     protected renderToolbar(container: HTMLElement): void;
     renderContent(container: HTMLElement): void;
     protected destroyContent(container: HTMLElement): void;
@@ -442,6 +458,7 @@ export declare class VisualizationPanel extends VisualizerBase {
     resetState(): void;
     get permissions(): IPermission[];
     set permissions(permissions: IPermission[]);
-    protected getCalculatedValuesCore(): Array<any>;
+    protected getCalculatedValuesCore(): ICalculationResult;
+    protected onThemeChanged(): void;
     destroy(): void;
 }

package/survey-analytics.types/visualizationPanelDynamic.d.ts

@@ -7,12 +7,13 @@ export declare class VisualizationPanelDynamic extends VisualizerBase {
         [index: string]: any;
     }>, options?: {
         [index: string]: any;
-    }, name?: string);
+    }, type?: string);
     get contentVisualizer(): VisualizationPanel;
     protected setLocale(newLocale: string): void;
     private onAfterRenderPanelCallback;
     resetFilter(): void;
     getQuestions(): IQuestion[];
+    protected onThemeChanged(): void;
     destroyContent(container: HTMLElement): void;
     renderContent(container: HTMLElement): void;
     destroy(): void;

package/survey-analytics.types/visualizerBase.d.ts

@@ -1,5 +1,6 @@
 import { Question, Event } from "survey-core";
 import { DataProvider, GetDataFn } from "./dataProvider";
+import { DashboardTheme, IDashboardTheme } from "./theme";
 import "./visualizerBase.scss";
 export interface IChartAdapter {
     getChartTypes(): string[];
@@ -7,6 +8,28 @@ export interface IChartAdapter {
     update(chartNode: HTMLElement): Promise<any>;
     destroy(node: HTMLElement): void;
 }
+export interface ICalculatedDataInfo {
+    dataPath?: string;
+    valueNames: Array<string>;
+    seriesNames?: Array<string>;
+    getLabel?(value: string): string;
+    getSeriesLabel?(series: string): string;
+}
+export declare type ICalculationResult<T = number> = {
+    data: Array<Array<T>>;
+    values: Array<string>;
+    series?: Array<string>;
+};
+export interface IAnswersData {
+    datasets: Array<Array<any>>;
+    values: Array<string>;
+    labels: Array<string>;
+    colors: Array<string>;
+    texts: Array<Array<any>>;
+    seriesLabels: Array<string>;
+    labelsTitle?: string;
+    valuesTitle?: string;
+}
 export interface IDataInfo {
     name: string;
     dataPath?: string;
@@ -16,12 +39,24 @@ export interface IDataInfo {
     getSeriesValues(): Array<string>;
     getSeriesLabels(): Array<string>;
 }
+export type ToolbarItemType = "button" | "dropdown" | "filter" | "license";
 type ToolbarItemCreators = {
     [name: string]: {
         creator: (toolbar?: HTMLDivElement) => HTMLElement;
-        order: number;
+        type: ToolbarItemType;
+        index: number;
+        groupIndex: number;
     };
 };
+export interface IVisualizerOptions {
+    dataField: string;
+    type?: string;
+    availableTypes?: string[];
+    title?: string;
+    allowChangeType?: boolean;
+    answersOrder?: "default" | "asc" | "desc";
+    [key: string]: any;
+}
 export declare class PostponeHelper {
     static postponeFunction: (fn: () => void, timeout?: number) => any;
     static postpone(fn: () => void, timeout?: number): any;
@@ -61,6 +96,8 @@ export declare class VisualizerBase implements IDataInfo {
     static haveCommercialLicense: boolean;
     static suppressVisualizerStubRendering: boolean;
     static chartAdapterType: any;
+    private _appliedTheme;
+    private _theme;
     private _showToolbar;
     private _footerVisualizer;
     private _dataProvider;
@@ -135,6 +172,8 @@ export declare class VisualizerBase implements IDataInfo {
     }, _type?: string);
     protected get questionOptions(): any;
     protected onDataChanged(): void;
+    protected getName(): string;
+    protected get allowChangeType(): any;
     /**
      * Returns the identifier of a visualized question.
      */
@@ -167,6 +206,7 @@ export declare class VisualizerBase implements IDataInfo {
     getSeriesLabels(): Array<string>;
     getValues(): Array<any>;
     getLabels(): Array<string>;
+    getChartAdapter(): IChartAdapter;
     /**
      * Registers a function used to create a toolbar item for this visualizer.
      *
@@ -211,7 +251,7 @@ export declare class VisualizerBase implements IDataInfo {
      * @param creator A function that accepts the toolbar and should return an `HTMLElement` with the toolbar item.
      * @see unregisterToolbarItem
      */
-    registerToolbarItem(name: string, creator: (toolbar?: HTMLDivElement) => HTMLElement, order?: number): void;
+    registerToolbarItem(name: string, creator: (toolbar?: HTMLDivElement) => HTMLElement, type: ToolbarItemType, index?: number, groupIndex?: number): void;
     /**
      *
      * Unregisters a function used to create a toolbar item. Allows you to remove a toolbar item.
@@ -229,6 +269,7 @@ export declare class VisualizerBase implements IDataInfo {
      * Returns the visualizer's type.
      */
     get type(): string;
+    get dataType(): string;
     /**
      * @deprecated Use [`surveyData`](https://surveyjs.io/dashboard/documentation/api-reference/visualizationpanel#surveyData) instead.
      */
@@ -260,8 +301,10 @@ export declare class VisualizerBase implements IDataInfo {
      * If you want to empty and delete the visualizer and all its elements from the DOM, call the [`destroy()`](https://surveyjs.io/dashboard/documentation/api-reference/visualizerbase#destroy) method instead.
      */
     clear(): void;
+    getSortedToolbarItemCreators(): Array<any>;
     protected createToolbarItems(toolbar: HTMLDivElement): void;
     protected getCorrectAnswerText(): string;
+    protected renderBanner(container: HTMLElement): void;
     protected destroyToolbar(container: HTMLElement): void;
     protected renderToolbar(container: HTMLElement): void;
     protected destroyHeader(container: HTMLElement): void;
@@ -278,7 +321,7 @@ export declare class VisualizerBase implements IDataInfo {
      * Renders the visualizer in a specified container.
      * @param targetElement An `HTMLElement` or an `id` of a page element in which you want to render the visualizer.
      */
-    render(targetElement: HTMLElement | string): void;
+    render(targetElement: HTMLElement | string, isRoot?: boolean): void;
     updateToolbar(): void;
     protected isSupportSoftUpdateContent(): boolean;
     protected softUpdateContent(): void;
@@ -288,16 +331,21 @@ export declare class VisualizerBase implements IDataInfo {
      * Re-renders the visualizer and its content.
      */
     refresh(): void;
+    refreshContent(): void;
     protected processText(text: string): string;
     getRandomColor(): any;
     private _backgroundColor;
-    get backgroundColor(): string;
-    set backgroundColor(value: string);
-    protected getBackgroundColorCore(): string;
+    get backgroundColor(): any;
+    set backgroundColor(value: any);
+    protected getBackgroundColorCore(): any;
     protected setBackgroundColorCore(color: string): void;
+    protected onThemeChanged(): void;
+    get theme(): DashboardTheme;
+    set theme(theme: DashboardTheme);
+    applyTheme(theme: IDashboardTheme): void;
     static customColors: string[];
     private static colors;
-    getColors(count?: number): any;
+    static getColors(count?: number): any;
     /**
      * Gets or sets the visibility of the visualizer's toolbar.
      *
@@ -310,17 +358,23 @@ export declare class VisualizerBase implements IDataInfo {
      */
     getData(): any;
     private _calculationsCache;
-    protected getCalculatedValuesCore(): Array<any>;
+    protected getCalculatedValuesCore(): ICalculationResult;
     protected loadingData: boolean;
     renderLoadingIndicator(contentContainer: HTMLElement): void;
-    convertFromExternalData(externalCalculatedData: any): any[];
+    convertFromExternalData(externalCalculatedData: any): ICalculationResult;
+    /**
+     * Returns object with all infotmation for data visualization: datasets, labels, colors, additional texts (percentage).
+     */
+    getAnswersData(): Promise<IAnswersData>;
     /**
      * Returns an array of calculated and visualized values. If a user applies a filter, the array is also filtered.
      *
      * To get an array of source survey results, use the [`surveyData`](https://surveyjs.io/dashboard/documentation/api-reference/visualizerbase#surveyData) property.
      */
-    getCalculatedValues(): Promise<Array<Object>>;
+    getCalculatedValues(): Promise<ICalculationResult>;
     protected _settingState: boolean;
+    protected _defaultStateValue: any;
+    getDefaultState(): any;
     /**
      * Returns an object with properties that describe a current visualizer state. The properties are different for each individual visualizer.
      *
@@ -330,6 +384,7 @@ export declare class VisualizerBase implements IDataInfo {
      * @see onStateChanged
      */
     getState(): any;
+    protected setStateCore(state: any): void;
     /**
      * Sets the visualizer's state.
      *