@highcharts/dashboards
Version:
Highcharts Dashboards framework
269 lines (268 loc) • 8.3 kB
TypeScript
import type Board from '../Board';
import type { ComponentType, ComponentTypeRegistry } from './ComponentType';
import type SidebarPopup from '../EditMode/SidebarPopup';
import type TextOptions from './TextOptions';
import Cell from '../Layout/Cell.js';
import type { ConnectorOptions as ComponentConnectorOptions } from './ConnectorHandler';
import ConnectorHandler from './ConnectorHandler.js';
import DataTable from '../../Data/DataTable.js';
import type { Options as EditableOption } from './EditableOptions';
import EditableOptions from './EditableOptions.js';
import type { OptionsRecord as SyncOptionsRecord, PredefinedSyncConfig, RawOptionsRecord as SyncRawOptionsRecord } from './Sync/Sync';
/**
* Abstract class of component.
*/
declare abstract class Component {
/**
* Predefined sync config for component.
*/
static predefinedSyncConfig: PredefinedSyncConfig;
/**
* Default options of the component.
*/
static defaultOptions: Partial<Options>;
/**
* The connector handlers for the component. They are used to handle the
* connector options and data tables.
*/
connectorHandlers: ConnectorHandler[];
/**
* Size of the component (width and height).
*/
protected dimensions: {
width: number | null;
height: number | null;
};
/**
* Whether the component state is active.
*/
isActive?: boolean;
/**
* The HTML element where the caption is.
*/
captionElement?: HTMLElement;
/**
* The options for the component.
*/
options: Options;
/**
* Sets an ID for the component's `div`.
*/
id: string;
/**
* An array of options marked as editable by the UI.
*/
editableOptions: EditableOptions;
/**
* The sync handlers for the component.
*/
protected syncHandlers?: SyncOptionsRecord;
/**
* Creates a component in the cell.
*
* @param cell
* Instance of cell, where component is attached.
*
* @param options
* The options for the component.
*/
constructor(cell: Cell, options: Partial<Options>, board?: Board);
/**
* Function fired when component's data source's data is changed.
*/
abstract onTableChanged(e?: EventTypes): void;
/**
* Returns the component's options when it is dropped from the sidebar.
*
* @param sidebar
* The sidebar popup.
*/
getOptionsOnDrop(sidebar: SidebarPopup): Partial<ComponentType['options']>;
/**
* Returns the data table connected to the component by the `connectorId`
* and `dataTableKey`. If both args are undefined, the first data table is
* returned.
*
* @param connectorId
* The id of the connector.
*
* @param dataTableKey
* The key of the data table within the connector.
*
* @returns
* The data table, or undefined if no matching handler is found.
*/
getDataTable(connectorId?: string, dataTableKey?: string): DataTable | undefined;
/**
* Initializes connector handlers for the component.
*/
initConnectors(): Promise<this>;
/**
* Resize the component
*
* @param width
* The width to set the component to.
* Can be pixels, a percentage string or null.
* Null will unset the style
*
* @param height
* The height to set the component to.
* Can be pixels, a percentage string or null.
* Null will unset the style.
*/
resize(width?: number | string | null, height?: number | string | null): void;
/**
* It's a temporary alternative for the `resize` method. It sets the strict
* pixel height for the component so that the content can be distributed in
* the right way, without looping the resizers in the content and container.
*
* @param width
* The width to set the component to.
*
* @param height
* The height to set the component to.
*/
protected resizeDynamicContent(width?: number | string | null, height?: number | string | null): void;
/**
* Adjusts size of component to parent's cell size when animation is done.
*
* @param element
* HTML element that is resized.
*/
resizeTo(element: HTMLElement): void;
/**
* Handles updating via options.
*
* @param newOptions
* The options to apply.
*
* @param shouldRerender
* Set to true if the update should rerender the component.
*/
update(newOptions: Partial<Options>, shouldRerender?: boolean): Promise<void>;
/**
* Adds title at the top of component's container.
*
* @param titleOptions
* The options for the title.
*/
setTitle(titleOptions: TextOptionsType): void;
/**
* Adds caption at the bottom of component's container.
*
* @param captionOptions
* The options for the caption.
*/
setCaption(captionOptions: TextOptionsType): void;
/**
* Destroys the component.
*/
destroy(): void;
getEditableOptions(): Options;
getEditableOptionValue(propertyPath?: (string | number)[]): number | boolean | undefined | string;
}
interface Component {
type: keyof ComponentTypeRegistry;
}
export type ConnectorOptions = ComponentConnectorOptions;
export type SetConnectorsEvent = Event<'setConnectors' | 'afterSetConnectors', {}>;
export interface Options {
/**
* Cell id, where component is attached.
*/
renderTo?: string;
/**
* The name of class that is applied to the component's container.
*/
className?: string;
/**
* The type of component like: `HTML`, `KPI`, `Highcharts`, `Grid`,
* `Navigator`.
*/
type: keyof ComponentTypeRegistry;
/**
* Events attached to the component : `mount`, `unmount`, `resize`, `update`.
*
* Try it:
*
* {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/component-options/events/ | Mount event }
*/
events?: Record<string, Function>;
/**
* Set of options that are available for editing through sidebar.
*/
editableOptions?: Array<EditableOption>;
/**
* Sync options. Predefined per component or custom sync options can be
* used here.
*/
sync?: SyncRawOptionsRecord;
/**
* Connector options
*/
connector?: (ConnectorOptions | Array<ConnectorOptions>);
/**
* Sets an ID for the component's container.
*/
id?: string;
/**
* The component's title, which will render at the top.
*
* Try it:
*
* {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/component-options/title/ | Changed captions }
*/
title?: TextOptionsType;
/**
* The component's caption, which will render at the bottom.
*
* Try it:
*
* {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/component-options/caption/ | Changed captions }
*/
caption?: TextOptionsType;
/**
* States for the component.
*/
states?: StatesOptions;
}
/**
* States options for the component.
*/
export interface StatesOptions {
active?: {
/**
* Whether the component is active. Only used when `enabled` is
* `true`.
* If `true`, the `highcharts-dashboards-cell-state-active` class
* will be added to the component's container.
*
* Only one component can be active at a time.
*
* Try it:
* {@link https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/dashboards/component-options/states/ | Active state }
*
* @default false
*/
isActive?: boolean;
/**
* Whether to enable the active state.
*
* @default false
*/
enabled?: boolean;
};
hover?: {
/**
* Whether to enable the hover state.
*
* @default false
*/
enabled?: boolean;
};
}
/**
* Allowed types for the text.
*/
export type TextOptionsType = string | false | TextOptions | undefined;
export default Component;