@syncfusion/ej2-charts/src/circularchart3d/circularchart3d-model.d.ts

Feature-rich chart control with built-in support for over 25 chart types, technical indictors, trendline, zooming, tooltip, selection, crosshair and trackball.

import { Animation, AnimationOptions, Browser, Collection, Complex, Component, Event, EmitType, EventHandler, INotifyPropertyChanged, Internationalization, ModuleDeclaration, NotifyPropertyChanges, Property, animationMode, isNullOrUndefined, remove, extend } from '@syncfusion/ej2-base';import { BorderModel, FontModel, IndexesModel, MarginModel } from '../common/model/base-model';import { Border, Font, Indexes, Margin } from '../common/model/base';import { Alignment, ExportType, SelectionPattern } from '../common/utils/enum';import { DataManager } from '@syncfusion/ej2-data';import { CircularChart3DHighlightMode, CircularChart3DSelectionMode, CircularChart3DTheme } from './model/enum';import { CircularChart3DAfterExportEventArgs, CircularChart3DBeforeResizeEventArgs, CircularChart3DExportEventArgs, CircularChart3DLegendClickEventArgs, CircularChart3DLegendRenderEventArgs, CircularChart3DLoadedEventArgs, CircularChart3DMouseEventArgs, CircularChart3DPointEventArgs, CircularChart3DPointRenderEventArgs,  CircularChart3DPrintEventArgs, CircularChart3DResizeEventArgs, CircularChart3DSeriesRenderEventArgs, CircularChart3DTextRenderEventArgs,  CircularChart3DTooltipRenderEventArgs,  CircularChart3DSelectionCompleteEventArgs } from './model/pie-interface';import { getCircular3DThemeColor } from './model/theme';import { CircularChart3DPoints, CircularChart3DSeries } from './renderer/series';import { CircularChart3DSeriesModel } from './renderer/series-model';import { Data } from '../common/model/data';import { ChartLocation, ImageOption, RectOption, appendChildElement, calculateSize, createSvg, degreeToLocation, getAnimationFunction, getElement, getTitle, redrawElement, removeElement, showTooltip, subtractRect, textElement, titlePositionX, withInBounds } from '../common/utils/helper';import { PathOption, Rect, Size, SvgRenderer, TextOption, measureText } from '@syncfusion/ej2-svg-base';import { CircularChart3DBinaryTreeBuilder, CircularChart3DTransform, CircularChart3DGraphics, CircularChart3DMatrix, CircularChart3DPolygonModule, CircularChart3DSvgRenderer, CircularChart3DVectorModule } from './renderer/3d-renderer';import { animationComplete, beforeResize, load, pointClick, pointMove, resized } from '../common/model/constants';import { CircularChartDataLabel3D } from './renderer/dataLabel';import { PrintUtils } from '../common/utils/print';import { CircularChartExport3D } from './print-export/export';import { PdfPageOrientation } from '@syncfusion/ej2-pdf-export';import { IPDFArgs } from '../common/model/interface';import { CircularChart3DLegendSettings, CircularChartLegend3D } from './legend/legend';import { CircularChart3DLegendSettingsModel } from './legend/legend-model';import { CircularChartSelection3D } from './user-interaction/selection';import { CircularChartHighlight3D } from './user-interaction/high-light';import { CircularChart3DPointData, CircularChart3DTooltipSettings, CircularChartTooltip3D } from './user-interaction/tooltip';import { CircularChart3DTooltipSettingsModel } from './user-interaction/tooltip-model';import { CircularChart3DPolygon, CircularChart3DThemeStyle, CircularChart3DTitlePosition, CircularChart3DVector } from './model/circular3d-base';
import {ComponentModel} from '@syncfusion/ej2-base';

/**
 * Interface for a class CircularChart3D
 */
export interface CircularChart3DModel extends ComponentModel{

    /**
     * The width of the chart as a string, accepting input as both '100px' or '100%'
     * If specified as '100%', the chart renders to the full width of its parent element.
     *
     * @default null
     */
    width?: string;

    /**
     * The height of the chart as a string, accepting input as both '100px' or '100%'.
     * If specified as '100%', the chart renders to the full height of its parent element.
     *
     * @default null
     */
    height?: string;

    /**
     * Represents the title for the circular 3D chart.
     *
     * @default null
     */
    title?: string;

    /**
     * The background image of the chart, specified as a URL link or the location of an image.
     *
     * @default null
     */
    backgroundImage?: string;

    /**
     * Specifies the dataSource for the circular 3D chart. It can be an array of JSON objects or an instance of DataManager.
     * ```html
     * <div id='Pie'></div>
     * ```
     * ```typescript
     * let dataManager: DataManager = new DataManager({
     *         url: 'http://mvc.syncfusion.com/Services/Northwnd.svc/Tasks/'
     * });
     * let query: Query = new Query().take(50).where('Estimate', 'greaterThan', 0, false);
     * let pie: CircularChart3D = new CircularChart3D({
     * ...
     *     dataSource: dataManager,
     *     series: [{
     *        xName: 'Id',
     *        yName: 'Estimate',
     *        query: query
     *    }],
     * ...
     * });
     * pie.appendTo('#Pie');
     * ```
     *
     * @default ''
     */
    dataSource?: Object | DataManager;

    /**
     * Options for customizing the title of the circular 3D chart.
     */
    titleStyle?: FontModel;

    /**
     * Represents the subtitle for the circular 3D chart.
     *
     * @default null
     */
    subTitle?: string;

    /**
     * Options for customizing the subtitle of the circular 3D Chart.
     */
    subTitleStyle?: FontModel;

    /**
     * Specifies whether a point has to be selected or not.
     * Takes values: 'None' or 'Point'.
     * * None: Disables the selection.
     * * Point: Selects a point.
     *
     * @default None
     */
    selectionMode?: CircularChart3DSelectionMode;

    /**
     * Specifies whether a point has to be highlighted or not.
     * Takes values: 'None' or 'Point'.
     * * None: Disables the highlight.
     * * Point: Highlights a point.
     *
     * @default None
     */
    highlightMode?: CircularChart3DHighlightMode;

    /**
     * The configuration for series in circular 3D chart.
     * The `series` property allows you to define an array of circular 3D series, each with its own settings and data.
     */
    series?: CircularChart3DSeriesModel[];

    /**
     * Options for customizing the legend of the circular 3D chart.
     */
    legendSettings?: CircularChart3DLegendSettingsModel;

    /**
     * Defines the color for the highlighted data point.
     *
     * @default ''
     */
    highlightColor?: string;

    /**
     * Specifies the selection pattern for series or data points in the circular 3D chart. Options include:
     * * none: No specific selection pattern.
     * * chessboard: Chessboard pattern.
     * * dots: Dots pattern.
     * * diagonalForward: Diagonal forward pattern.
     * * crosshatch: Crosshatch pattern.
     * * pacman: Pacman pattern.
     * * diagonalbackward: Diagonal backward pattern.
     * * grid: Grid pattern.
     * * turquoise: Turquoise pattern.
     * * star: Star pattern.
     * * triangle: Triangle pattern.
     * * circle: Circle pattern.
     * * tile: Tile pattern.
     * * horizontaldash: Horizontal dash pattern.
     * * verticaldash: Vertical dash pattern.
     * * rectangle: Rectangle pattern.
     * * box: Box pattern.
     * * verticalstripe: Vertical stripe pattern.
     * * horizontalstripe: Horizontal stripe pattern.
     * * bubble: Bubble pattern.
     *
     * @default None
     */
    selectionPattern?: SelectionPattern;

    /**
     * Specifies the highlight pattern for series or data points in the circular 3D chart. Options include:
     * * none: No specific selection pattern.
     * * chessboard: Chessboard pattern.
     * * dots: Dots pattern.
     * * diagonalForward: Diagonal forward pattern.
     * * crosshatch: Crosshatch pattern.
     * * pacman: Pacman pattern.
     * * diagonalbackward: Diagonal backward pattern.
     * * grid: Grid pattern.
     * * turquoise: Turquoise pattern.
     * * star: Star pattern.
     * * triangle: Triangle pattern.
     * * circle: Circle pattern.
     * * tile: Tile pattern.
     * * horizontaldash: Horizontal dash pattern.
     * * verticaldash: Vertical dash pattern.
     * * rectangle: Rectangle pattern.
     * * box: Box pattern.
     * * verticalstripe: Vertical stripe pattern.
     * * horizontalstripe: Horizontal stripe pattern.
     * * bubble: Bubble pattern.
     *
     * @default None
     */
    highlightPattern?: SelectionPattern;

    /**
     * Enables or disables multi-selection in the circular 3D chart.
     * If set true, enables the multi selection in circular 3D chart. It requires `selectionMode` to be `Point`.
     *
     * @default false
     */
    isMultiSelect?: boolean;

    /**
     * If set true, enables the animation for circular 3D chart.
     *
     * @default true
     */
    enableAnimation?: boolean;

    /**
     * Specifies the theme for the circular 3D chart.
     *
     * @default 'Material'
     */
    theme?: CircularChart3DTheme;

    /**
     * Specifies the point indexes to be selected while loading a circular 3D chart.
     * It requires `selectionMode` to be `Point`.
     * ```html
     * <div id='Pie'></div>
     * ```
     * ```typescript
     * let pie: CircularChart3D = new CircularChart3D({
     * ...
     *   selectionMode: 'Point',
     *   selectedDataIndexes: [ { series: 0, point: 1},
     *                          { series: 2, point: 3} ],
     * ...
     * });
     * pie.appendTo('#Pie');
     * ```
     *
     * @default []
     */
    selectedDataIndexes?: IndexesModel[];

    /**
     * Options to customize the left, right, top, and bottom margins of the circular 3D chart.
     */
    margin?: MarginModel;

    /**
     * Options for customizing the color and width of the circular 3D chart border.
     */
    border?: BorderModel;

    /**
     * Options for customizing the tooltip of the circular 3D chart.
     */
    tooltip?: CircularChart3DTooltipSettingsModel;

    /**
     * The background color of the circular 3D chart, which accepts a value in hex, rgba as a valid CSS color string.
     *
     * @default null
     */
    background?: string;

    /**
     * Specifies whether a grouping separator should be used for numbers.
     *
     * @default false
     */
    useGroupingSeparator?: boolean;

    /**
     * Specifies the depth of the circular 3D chart.
     *
     * @default 50
     */
    depth?: number;

    /**
     * Defines the slope angle for the circular 3D chart.
     *
     * @default 0
     */
    tilt?: number;

    /**
     * Enables or disables rotation in the circular 3D chart.
     *
     * @default false
     */
    enableRotation?: boolean;

    /**
     * Defines the rotation angle for the circular 3D chart.
     *
     * @default 0
     */
    rotation?: number;

    /**
     * Enables or disables the export feature in the circular 3D chart.
     *
     * @default false
     */
    enableExport?: boolean;

    /**
     * Triggered before the circular 3D is loaded.
     *
     * @event load
     */
    load?: EmitType<CircularChart3DLoadedEventArgs>;

    /**
     * Triggers after the circular 3D chart is loaded.
     *
     * @event loaded
     */
    loaded?: EmitType<CircularChart3DLoadedEventArgs>;

    /**
     * Triggers before the legend is rendered.
     *
     * @event legendRender
     */
    legendRender?: EmitType<CircularChart3DLegendRenderEventArgs>;

    /**
     * Triggers after a legend is clicked.
     *
     * @event legendClick
     */
    legendClick?: EmitType<CircularChart3DLegendClickEventArgs>;

    /**
     * Triggers after the selection is completed.
     *
     * @event selectionComplete
     */
    selectionComplete?: EmitType<CircularChart3DSelectionCompleteEventArgs>;

    /**
     * Triggers before each point for a series is rendered.
     *
     * @event pointRender
     */
    pointRender?: EmitType<CircularChart3DPointRenderEventArgs>;

    /**
     * Triggers before a series is rendered.
     *
     * @event seriesRender
     */
    seriesRender?: EmitType<CircularChart3DSeriesRenderEventArgs>;

    /**
     * Triggers before the data label for a series is rendered.
     *
     * @event textRender
     */
    textRender?: EmitType<CircularChart3DTextRenderEventArgs>;

    /**
     * Triggers before the export starts.
     *
     * @event beforeExport
     */
    beforeExport?: EmitType<CircularChart3DExportEventArgs>;

    /**
     * Triggers after the export is completed.
     *
     * @event afterExport
     */
    afterExport?: EmitType<CircularChart3DAfterExportEventArgs>;

    /**
     * Triggers before printing starts.
     *
     * @event beforePrint
     */
    beforePrint?: EmitType<CircularChart3DPrintEventArgs>;

    /**
     * Triggered before resizing the chart.
     *
     * @event beforeResize
     */
    beforeResize?: EmitType<CircularChart3DBeforeResizeEventArgs>;

    /**
     * Triggered after the chart is resized.
     *
     * @event resized
     */
    resized?: EmitType<CircularChart3DResizeEventArgs>;

    /**
     * Triggered when the user hovers over a circular 3D chart.
     *
     * @event circularChart3DMouseMove
     *
     */
    circularChart3DMouseMove?: EmitType<CircularChart3DMouseEventArgs>;

    /**
     * Triggered when the user clicks on a circular 3D chart.
     *
     * @event circularChart3DMouseClick
     *
     */
    circularChart3DMouseClick?: EmitType<CircularChart3DMouseEventArgs>;

    /**
     * Triggered when the mouse is pressed down on a circular 3D chart.
     *
     * @event circularChart3DMouseDown
     *
     */
    circularChart3DMouseDown?: EmitType<CircularChart3DMouseEventArgs>;

    /**
     * Triggered when the cursor leaves a circular 3D chart.
     *
     * @event circularChart3DMouseLeave
     *
     */
    circularChart3DMouseLeave?: EmitType<CircularChart3DMouseEventArgs>;

    /**
     * Triggered when the mouse button is released on a circular 3D chart.
     *
     * @event circularChart3DMouseUp
     *
     */
    circularChart3DMouseUp?: EmitType<CircularChart3DMouseEventArgs>;

    /**
     * Triggered when the user clicks on data points.
     *
     * @event pointClick
     */
    pointClick?: EmitType<CircularChart3DPointEventArgs>;

    /**
     * Triggered when the user hovers over data points.
     *
     * @event pointMove
     */
    pointMove?: EmitType<CircularChart3DPointEventArgs>;

    /**
     * Triggered when the tooltip is ready to render on the screen.
     *
     * @event tooltipRender
     */
    tooltipRender?: EmitType<CircularChart3DTooltipRenderEventArgs>;

}