import { Component, INotifyPropertyChanged, Property, Complex, Collection, Internationalization, NotifyPropertyChanges, ModuleDeclaration, SanitizeHtmlHelper } from '@syncfusion/ej2-base';import { Browser, EmitType, remove, Event, EventHandler } from '@syncfusion/ej2-base';import { DataManager } from '@syncfusion/ej2-data';import { Chart, ZoomSettings, CrosshairSettings } from '../chart/chart';import { ZoomSettingsModel, CrosshairSettingsModel } from '../chart/chart-model';import { appendChildElement, redrawElement, titlePositionX, textElement } from '../common/utils/helper';import { Axis } from '../chart/axis/axis';import { Series } from '../chart/series/chart-series';import { Size, Rect, TextOption, measureText, SvgRenderer } from '@syncfusion/ej2-svg-base';import { ITooltipRenderEventArgs, IMouseEventArgs, IPointEventArgs } from '../chart/model/chart-interface';import { IRangeSelectorRenderEventArgs } from '../range-navigator/model/range-navigator-interface';import { IAxisLabelRenderEventArgs, ISeriesRenderEventArgs, IZoomingEventArgs  } from '../chart/model/chart-interface';import { StockTooltipSettingsModel, PeriodsModel } from '../common/model/base-model';import { calculateSize, getElement } from '../common/utils/helper';import { RangeNavigator } from '../range-navigator/range-navigator';import { getRangeValueXByPoint } from '../range-navigator/utils/helper';import { PeriodSelector } from '../common/period-selector/period-selector';import { CartesianChart } from './renderer/cartesian-chart';import { RangeSelector } from './renderer/range-selector';import { ToolBarSelector } from './renderer/toolbar-selector';import { StockMargin, StockChartArea, StockChartAxis, StockChartRow, StockChartIndexes, StockEventsSettings, IStockLegendRenderEventArgs, IStockLegendClickEventArgs } from './model/base';import { StockSeries, IStockChartEventArgs, StockChartIndicator, StockChartBorder, IRangeChangeEventArgs } from './model/base';import { StockChartAnnotationSettings, IStockEventRenderArgs } from './model/base';import { StockChartAnnotationSettingsModel } from './model/base-model';import { StockChartFont } from './model/base';import { StockSeriesModel, StockChartIndicatorModel, StockChartAxisModel, StockChartRowModel } from './model/base-model';import { StockChartIndexesModel, StockChartFontModel, StockChartAreaModel, StockEventsSettingsModel } from './model/base-model';import { StockChartBorderModel, StockMarginModel } from './model/base-model';import { ChartSeriesType, TrendlineTypes, TechnicalIndicators} from '../chart/utils/enum';import { ChartTheme, SelectionMode } from '../common/utils/enum';import { IExportEventArgs } from '../common/model/interface';import { ExportType, Alignment } from '../common/utils/enum';import { getSeriesColor, getThemeColor } from '../common/model/theme';import { StockEvents } from './renderer/stock-events';import { IThemeStyle } from '../chart/model/chart-interface';import { StockChartLegendSettingsModel } from './legend/legend-model';import { StockLegend, StockChartLegendSettings } from './legend/legend';import { ColumnSeries, RangeAreaSeries, SeriesModel, SplineRangeAreaSeries } from './index';import { VisibleRangeModel, ICrosshairLabelRenderEventArgs  } from '../common/model/interface';import { Periods, StockTooltipSettings } from '../common/model/base';import { isNullOrUndefined } from '@syncfusion/ej2-base';import { createTemplate, applyGradientsToSeries } from '../common/utils/helper';import { createElement } from '@syncfusion/ej2-base';
import {ComponentModel} from '@syncfusion/ej2-base';

/**
 * Interface for a class StockChart
 */
export interface StockChartModel extends ComponentModel{

    /**
     * Specifies the template to be displayed when the chart has no data.
     * This property enables the users to display customized messages, images, or other UI elements in place of an empty chart.
     * It provides a better user experience by offering context when no data points are available.
     *
     * @default null
     */
    noDataTemplate?: string | Function;

    /**
     * The width of the stockChart as a string accepts input as both like '100px' or '100%'.
     * If specified as '100%, stockChart renders to the full width of its parent element.
     *
     * @default null
     */

    width?: string;

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

    height?: string;

    /**
     * Specifies the DataSource for the stockChart. It can be an array of JSON objects or an instance of DataManager.
     * ```html
     * <div id='financial'></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 financial: stockChart = new stockChart({
     * ...
     *  dataSource:dataManager,
     *   series: [{
     *        xName: 'Id',
     *        yName: 'Estimate',
     *        query: query
     *    }],
     * ...
     * });
     * financial.appendTo('#financial');
     * ```
     *
     * @default ''
     */

    dataSource?: Object | DataManager;

    /**
     *  Options to customize left, right, top and bottom margins of the stockChart.
     */

    margin?: StockMarginModel;

    /**
     * Options for customizing the color and width of the stockChart border.
     */

    border?: StockChartBorderModel;

    /**
     * The background color of the stockChart that accepts value in hex and rgba as a valid CSS color string.
     *
     * @default null
     */
    background?: string;

    /**
     * Specifies the theme for the stockChart.
     *
     * @default 'Material'
     */

    theme?: ChartTheme;

    /**
     * Options to configure the horizontal axis.
     */

    primaryXAxis?: StockChartAxisModel;

    /**
     * Options for configuring the border and background of the stockChart area.
     */

    chartArea?: StockChartAreaModel;

    /**
     * Options to configure the vertical axis.
     */

    primaryYAxis?: StockChartAxisModel;

    /**
     * Options to split stockChart into multiple plotting areas horizontally.
     * Each object in the collection represents a plotting area in the stockChart.
     */

    rows?: StockChartRowModel[];

    /**
     * Secondary axis collection for the stockChart.
     */

    axes?: StockChartAxisModel[];

    /**
     * The configuration for series in the stockChart.
     */

    series?: StockSeriesModel[];

    /**
     * The configuration for stock events in the stockChart.
     */

    stockEvents?: StockEventsSettingsModel[];

    /**
     * It specifies whether the stockChart should be render in transposed manner or not.
     *
     * @default false
     */
    isTransposed?: boolean;

    /**
     * Title of the chart
     *
     * @default ''
     */

    title?: string;

    /**
     * Options for customizing the title of the Chart.
     */

    titleStyle?: StockChartFontModel;

    /**
     * Defines the collection of technical indicators, that are used in financial markets.
     */
    indicators?: StockChartIndicatorModel[];

    /**
     * Options for customizing the tooltip of the chart.
     */

    tooltip?: StockTooltipSettingsModel;

    /**
     * Options for customizing the crosshair of the chart.
     */
    crosshair?: CrosshairSettingsModel;

    /**
     * Options for customizing the legend of the stockChart.
     */
    legendSettings?: StockChartLegendSettingsModel;

    /**
     * Options to enable the zooming feature in the chart.
     */
    zoomSettings?: ZoomSettingsModel;

    /**
     * It specifies whether the periodSelector to be rendered in financial chart
     *
     * @default true
     */
    enablePeriodSelector?: boolean;

    /**
     * Custom Range
     *
     * @default true
     */
    enableCustomRange?: boolean;

    /**
     * If set true, enables the animation in chart.
     *
     * @default false
     */
    isSelect?: boolean;

    /**
     * It specifies whether the range navigator to be rendered in financial chart
     *
     * @default true
     */
    enableSelector?: boolean;

    /**
     * To configure period selector options.
     */
    periods?: PeriodsModel[];

    /**
     * The configuration for annotation in chart.
     */

    annotations?: StockChartAnnotationSettingsModel[];

    /**
     * Triggers before render the selector
     *
     * @event selectorRender

     */
    selectorRender?: EmitType<IRangeSelectorRenderEventArgs>;

    /**
     * Triggers on hovering the stock chart.
     *
     * @event stockChartMouseMove
     * @blazorProperty 'OnStockChartMouseMove'
     */

    stockChartMouseMove?: EmitType<IMouseEventArgs>;

    /**
     * Triggers when cursor leaves the chart.
     *
     * @event stockChartMouseLeave
     * @blazorProperty 'OnStockChartMouseLeave'
     */

    stockChartMouseLeave?: EmitType<IMouseEventArgs>;

    /**
     * Triggers on mouse down.
     *
     * @event stockChartMouseDown
     * @blazorProperty 'OnStockChartMouseDown'
     */

    stockChartMouseDown?: EmitType<IMouseEventArgs>;

    /**
     * Triggers on mouse up.
     *
     * @event stockChartMouseUp
     * @blazorProperty 'OnStockChartMouseUp'
     */

    stockChartMouseUp?: EmitType<IMouseEventArgs>;

    /**
     * Triggers on clicking the stock chart.
     *
     * @event stockChartMouseClick
     * @blazorProperty 'OnStockChartMouseClick'
     */

    stockChartMouseClick?: EmitType<IMouseEventArgs>;

    /**
     * Triggers on point click.
     *
     * @event pointClick
     * @blazorProperty 'OnPointClick'
     */

    pointClick?: EmitType<IPointEventArgs>;

    /**
     * Triggers on point move.
     *
     * @event pointMove
     * @blazorProperty 'PointMoved'
     */

    pointMove?: EmitType<IPointEventArgs>;

    /**
     * Triggers after the zoom selection is completed.
     *
     * @event onZooming
     */
    onZooming?: EmitType<IZoomingEventArgs>;

    /**
     * Triggers before the legend is rendered.
     *
     * @event legendRender

     */
    legendRender?: EmitType<IStockLegendRenderEventArgs>;

    /**
     * Triggers after click on legend.
     *
     * @event legendClick
     */
    legendClick?: EmitType<IStockLegendClickEventArgs>;

    /**
     * Specifies whether series or data point has to be selected. They are,
     * * none: Disables the selection.
     * * series: selects a series.
     * * point: selects a point.
     * * cluster: selects a cluster of point
     * * dragXY: selects points by dragging with respect to both horizontal and vertical axes
     * * dragX: selects points by dragging with respect to horizontal axis.
     * * dragY: selects points by dragging with respect to vertical axis.
     *
     * @default None
     */
    selectionMode?: SelectionMode;

    /**
     * If set true, enables the multi selection in chart. It requires `selectionMode` to be `Point` | `Series` | or `Cluster`.
     *
     * @default false
     */
    isMultiSelect?: boolean;

    /**
     * Triggers before the range navigator rendering.
     *
     * @event load
     */
    load?: EmitType<IStockChartEventArgs>;

    /**
     * Triggers after the range navigator rendering.
     *
     * @event loaded
     * @blazorProperty 'Loaded'
     */
    loaded?: EmitType<IStockChartEventArgs>;

    /**
     * Triggers if the range is changed
     *
     * @event rangeChange
     * @blazorProperty 'RangeChange'
     */
    rangeChange?: EmitType<IRangeChangeEventArgs>;

    /**
     * Triggers before each axis label is rendered.
     *
     * @event axisLabelRender

     */
    axisLabelRender?: EmitType<IAxisLabelRenderEventArgs>;

    /**
     * Triggers before the export process begins. This event allows for the customization of export settings before the chart is exported.
     *
     * @event beforeExport
     *
     */
    beforeExport?: EmitType<IExportEventArgs>;

    /**
     * Triggers before the tooltip for series is rendered.
     *
     * @event tooltipRender

     */

    tooltipRender?: EmitType<ITooltipRenderEventArgs>;

    /**
     * Triggers before the crosshairtooltip for the series is rendered.
     *
     * @event crosshairLabelRender
     */

    crosshairLabelRender?: EmitType<ICrosshairLabelRenderEventArgs>;

    /**
     * Triggers before the series is rendered.
     *
     * @event seriesRender

     */

    seriesRender?: EmitType<ISeriesRenderEventArgs>;

    /**
     * Triggers before the series is rendered.
     *
     * @event stockEventRender

     */
    stockEventRender?: EmitType<IStockEventRenderArgs>;

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

    /**
     * It specifies the types of series in financial chart.
     */
    seriesType?: ChartSeriesType[];

    /**
     * It specifies the types of indicators in financial chart.
     */
    indicatorType?: TechnicalIndicators[];

    /**
     * It specifies the types of Export types in financial chart.
     */
    exportType?: ExportType[];

    /**
     * It specifies the types of trendline types in financial chart.
     */
    trendlineType?: TrendlineTypes[];

}