devextreme/viz/chart_components/base_chart.d.ts

HTML5 JavaScript Component Suite for Responsive Web Development

/**
* DevExtreme (viz/chart_components/base_chart.d.ts)
* Version: 20.1.7
* Build date: Tue Aug 25 2020
*
* Copyright (c) 2012 - 2020 Developer Express Inc. ALL RIGHTS RESERVED
* Read about DevExtreme licensing here: https://js.devexpress.com/Licensing/
*/
import '../../jquery_augmentation';

import {
    dxElement
} from '../../core/element';

import {
    PaletteType,
    PaletteExtensionModeType
} from '../palette';

import {
    template
} from '../../core/templates/template';

import DataSource, {
    DataSourceOptions
} from '../../data/data_source';

import {
    event
} from '../../events/index';

import {
    format
} from '../../ui/widget/ui.widget';

import {
    Font,
    VizTextOverflowType
} from '../core/base_widget';

import {
    basePointObject,
    baseSeriesObject,
    chartSeriesObject,
    dxChartAnnotationConfig,
    dxChartSeriesTypesCommonSeriesLabel,
    dxChartSeriesTypesCommonSeriesPoint
} from '../chart';

import {
    BaseLegend,
    BaseLegendItem,
    DashStyleType
} from '../common';

import BaseWidget, {
    BaseWidgetOptions,
    BaseWidgetTooltip,
    WordWrapType
} from '../core/base_widget';

/** Warning! This type is used for internal purposes. Do not import it directly. */
export interface BaseChartOptions<T = BaseChart> extends BaseWidgetOptions<T> {
    /** Specifies adaptive layout options. */
    adaptiveLayout?: BaseChartAdaptiveLayout;
    /** Specifies animation options. */
    animation?: { duration?: number, easing?: 'easeOutCubic' | 'linear', enabled?: boolean, maxPointCountSupported?: number } | boolean;
    /** Customizes the appearance of an individual point label. */
    customizeLabel?: ((pointInfo: any) => dxChartSeriesTypesCommonSeriesLabel);
    /** Customizes the appearance of an individual series point. */
    customizePoint?: ((pointInfo: any) => dxChartSeriesTypesCommonSeriesPoint);
    /** Binds the widget to data. */
    dataSource?: Array<any> | DataSource | DataSourceOptions | string;
    /** Specifies options of the legend. */
    legend?: BaseChartLegend;
    /** A function that is executed when all series are ready. */
    onDone?: ((e: { component?: T, element?: dxElement, model?: any }) => any);
    /** A function that is executed when a series point is clicked or tapped. */
    onPointClick?: ((e: { component?: T, element?: dxElement, model?: any, jQueryEvent?: JQueryEventObject, event?: event, target?: basePointObject }) => any) | string;
    /** A function that is executed after the pointer enters or leaves a series point. */
    onPointHoverChanged?: ((e: { component?: any, element?: any, target?: basePointObject }) => any);
    /** A function that is executed when a series point is selected or selection is canceled. */
    onPointSelectionChanged?: ((e: { component?: any, element?: any, target?: basePointObject }) => any);
    /** A function that is executed when a tooltip becomes hidden. */
    onTooltipHidden?: ((e: { component?: T, element?: dxElement, model?: any, target?: basePointObject | dxChartAnnotationConfig | any }) => any);
    /** A function that is executed when a tooltip appears. */
    onTooltipShown?: ((e: { component?: T, element?: dxElement, model?: any, target?: basePointObject | dxChartAnnotationConfig | any }) => any);
    /** Sets the palette to be used for colorizing series and their elements. */
    palette?: Array<string> | PaletteType;
    /** Specifies what to do with colors in the palette when their number is less than the number of series (in the Chart widget) or points in a series (in the PieChart widget). */
    paletteExtensionMode?: PaletteExtensionModeType;
    /** Specifies whether a single point or multiple points can be selected in the chart. */
    pointSelectionMode?: 'multiple' | 'single';
    /** Specifies options for series. */
    series?: any | Array<any>;
    /** Configures tooltips. */
    tooltip?: BaseChartTooltip;
}
/** Warning! This type is used for internal purposes. Do not import it directly. */
export interface BaseChartAdaptiveLayout {
    /** Specifies the minimum container height at which the layout begins to adapt. */
    height?: number;
    /** Specifies whether point labels should be kept when the widget adapts the layout. */
    keepLabels?: boolean;
    /** Specifies the minimum container width at which the layout begins to adapt. */
    width?: number;
}
/** Warning! This type is used for internal purposes. Do not import it directly. */
export interface BaseChartLegend extends BaseLegend {
    /** Allows you to change the order, text, and visibility of legend items. */
    customizeItems?: ((items: Array<BaseChartLegendItem>) => Array<BaseChartLegendItem>);
    /** Specifies an SVG element that serves as a custom legend item marker. */
    markerTemplate?: template | ((legendItem: BaseChartLegendItem, element: SVGGElement) => string | SVGElement | JQuery);
}
/** Warning! This type is used for internal purposes. Do not import it directly. */
export interface BaseChartTooltip extends BaseWidgetTooltip {
    /** Formats the point argument before it is displayed in the tooltip. To format the point value, use the format option. */
    argumentFormat?: format;
    /** Specifies a custom template for a tooltip. */
    contentTemplate?: template | ((pointInfo: any, element: dxElement) => string | Element | JQuery);
    /** Allows you to change tooltip appearance. */
    customizeTooltip?: ((pointInfo: any) => any);
    /** Specifies whether the tooltip is shared across all series points with the same argument. */
    shared?: boolean;
    /** Allows users to interact with the tooltip content. */
    interactive?: boolean;
}
/** Warning! This type is used for internal purposes. Do not import it directly. */
/** A base class for all chart widgets included in the ChartJS library. */
export class BaseChart extends BaseWidget {
    constructor(element: Element, options?: BaseChartOptions)
    constructor(element: JQuery, options?: BaseChartOptions)
    /** Deselects the chart's selected series. The series is displayed in an initial style. */
    clearSelection(): void;
    /** Gets all the series. */
    getAllSeries(): Array<baseSeriesObject>;
    getDataSource(): DataSource;
    /** Gets a series with a specific name. */
    getSeriesByName(seriesName: any): chartSeriesObject;
    /** Gets a series with a specific index. */
    getSeriesByPos(seriesIndex: number): chartSeriesObject;
    /** Hides all widget tooltips. */
    hideTooltip(): void;
    /** Reloads data and repaints the widget. */
    refresh(): void;
    render(): void;
    /** Redraws the widget. */
    render(renderOptions: any): void;
}

/** Warning! This type is used for internal purposes. Do not import it directly. */
export interface BaseChartLegendItem extends BaseLegendItem {
    /** The series that the item represents on the legend. */
    series?: baseSeriesObject;
}

/** Warning! This type is used for internal purposes. Do not import it directly. */
export interface BaseChartAnnotationConfig {
    /** Specifies whether users can drag and drop the annotation. */
    allowDragging?: boolean;
    /** Positions the annotation relative to a specific argument. */
    argument?: number | Date | string;
    /** Specifies the length of the annotation's arrow in pixels. */
    arrowLength?: number;
    /** Specifies the width of the annotation's arrow at its junction with the annotation rectangle. */
    arrowWidth?: number;
    /** Configures the appearance of the annotation's border. */
    border?: { color?: string, cornerRadius?: number, dashStyle?: DashStyleType, opacity?: number, visible?: boolean, width?: number };
    /** Specifies the color that fills the annotation. */
    color?: string;
    /** Customizes the text and appearance of the annotation's tooltip. */
    customizeTooltip?: ((annotation: BaseChartAnnotationConfig | any) => any);
    /** A container for custom data. */
    data?: any;
    /** Specifies the annotation's description in the tooltip. */
    description?: string;
    /** Specifies the annotation's font options. Applies to text annotations only. */
    font?: Font;
    /** Specifies the annotation's height in pixels. */
    height?: number;
    /** Configures the image to be displayed in the annotation. Applies only if the type is "image". */
    image?: string | { height?: number, url?: string, width?: number };
    /** Moves the annotation horizontally. */
    offsetX?: number;
    /** Moves the annotation vertically. */
    offsetY?: number;
    /** Specifies the annotation's opacity. */
    opacity?: number;
    /** Used with paddingTopBottom to generate an empty space around the annotation's text or image (specified in pixels). */
    paddingLeftRight?: number;
    /** Along with paddingLeftRight, generates an empty space around the annotation's text or image; specified in pixels. */
    paddingTopBottom?: number;
    /** Anchors the annotation to a series point. Accepts the name of the point's series. */
    series?: string;
    /** Configures the annotation's shadows. */
    shadow?: { blur?: number, color?: string, offsetX?: number, offsetY?: number, opacity?: number };
    /** Specifies a custom template for the annotation. */
    template?: template | ((annotation: BaseChartAnnotationConfig | any, element: SVGGElement) => string | SVGElement | JQuery);
    /** Specifies the annotation's text. Applies only if the type is "text". */
    text?: string;
    /** Specifies what to do with the annotation's text when it overflows the allocated space after applying wordWrap: hide, truncate it and display an ellipsis, or do nothing. */
    textOverflow?: VizTextOverflowType;
    /** Specifies whether the annotation tooltip is enabled. */
    tooltipEnabled?: boolean;
    /** Specifies a custom template for an annotation's tooltip. */
    tooltipTemplate?: template | ((annotation: BaseChartAnnotationConfig | any, element: dxElement) => string | Element | JQuery);
    /** Specifies whether the annotation displays text or an image. This is a required setting. */
    type?: 'text' | 'image' | 'custom';
    /** Positions the annotation relative to a value on the specified value axis. */
    value?: number | Date | string;
    /** Specifies the annotation's width in pixels. */
    width?: number;
    /** Specifies how to wrap the annotation's text if it does not fit into a single line. */
    wordWrap?: WordWrapType;
    /** Used with y to position the annotation's center at a specific pixel coordinate. (0, 0) is the upper left corner of the chart. */
    x?: number;
    /** Used with x to position the annotation's center at a specific pixel coordinate. (0, 0) is the upper left corner of the chart. */
    y?: number;
}