/*
THIS INFRAGISTICS ULTIMATE SOFTWARE LICENSE  AGREEMENT ("AGREEMENT") LOCATED HERE:
https://www.infragistics.com/legal/license/igultimate-la
https://www.infragistics.com/legal/license/igultimate-eula
GOVERNS THE LICENSING, INSTALLATION AND USE OF INFRAGISTICS SOFTWARE. BY DOWNLOADING AND/OR INSTALLING AND USING INFRAGISTICS SOFTWARE:  you are indicating that you have read and understand this Agreement, and agree to be legally bound by it on behalf of the yourself and your company.
*/
var IgxDataChartComponent_1;
import * as tslib_1 from "tslib";
import { Injector, ComponentFactoryResolver, Component, Renderer2, ViewChild, ContentChildren, QueryList, Input, forwardRef, NgZone, ChangeDetectionStrategy, ViewContainerRef } from '@angular/core';
import { IgxAxisComponent } from './igx-axis-component';
import { IgxSeriesComponent } from './igx-series-component';
import { GridMode, GridMode_$type } from './GridMode';
import { IgxSeriesViewerComponent } from './igx-series-viewer-component';
import { AngularRenderer, AngularWrapper } from "igniteui-angular-core";
import { TypeRegistrar } from "igniteui-angular-core";
import { XamDataChart } from './XamDataChart';
import { CollectionAdapter, brushToString, stringToBrush, fromBrushCollection, toBrushCollection, ensureBool, ensureEnum } from "igniteui-angular-core";
import { DataChartStylingDefaults } from './DataChartStylingDefaults';
import { IgxDataContext } from "igniteui-angular-core";
import { IgxSeriesCollection } from './igx-series-collection';
import { NotifyCollectionChangedAction } from "igniteui-angular-core";
import { IgxAxisCollection } from './igx-axis-collection';
import { SyncLinkManager } from './SyncLinkManager';
import { SyncLink } from './SyncLink';
export const IgxDataChartComponent_PROVIDERS = [{ provide: IgxSeriesViewerComponent, useExisting: forwardRef(() => IgxDataChartComponent) }];
/**
 * Represents a chart area containing axes, series, an optional legend and other hosted content.
*/
let IgxDataChartComponent = IgxDataChartComponent_1 = class IgxDataChartComponent extends IgxSeriesViewerComponent {
    constructor(_renderer, _elRef, _ngZone, _componentFactoryResolver, _injector) {
        super();
        this._renderer = _renderer;
        this._elRef = _elRef;
        this._ngZone = _ngZone;
        this._componentFactoryResolver = _componentFactoryResolver;
        this._injector = _injector;
        /**
         * The series actually present in the chart. Do not directly modify this array.
         * This array's contents can be modified by causing Angular to reproject the child content.
         * Or adding and removing series from the manual series collection on the series property.
         */
        this.actualSeries = [];
        /**
         * The axes actually present in the chart. Do not directly modify this array.
         * This array's contents can be modified by causing Angular to reproject the child content.
         * Or adding and removing axes from the manual axes collection on the axes property.
         */
        this.actualAxes = [];
        this._series = null;
        this._axes = null;
        this._root = null;
        this._dataSource = null;
        this._axesAdapter = null;
        this._seriesAdapter = null;
        this._defaultTooltips = null;
        this._zoneRunner = (act) => this._ngZone.run(act);
        this._container = _renderer.createElement("div");
        _renderer.appendChild(_elRef.element.nativeElement, this._container);
        _renderer.setStyle(this._container, "display", "block");
        _renderer.setStyle(this._container, "width", "100%");
        _renderer.setStyle(this._container, "height", "100%");
        var root;
        root = this._container;
        if (this._container.nativeElement != null) {
            root = this._container.nativeElement;
        }
        this._root = root;
        var ren = new AngularRenderer(root, this._renderer, window.document, this._ngZone, true, DataChartStylingDefaults);
        this._wrapper = ren;
        var chart = this.i;
        this._chart = chart;
        this._axesAdapter = new CollectionAdapter([], this.i.axes, this.actualAxes, (c) => c.i, (i) => {
            i._provideRenderer(this._wrapper);
            i.provideData(this._dataSource);
            if (this._container && this._container.parentElement) {
                i._styling(this._root, this, this);
            }
        }, (i) => { i._provideRenderer(null); i.provideData(null); });
        this._seriesAdapter = new CollectionAdapter([], this.i.series, this.actualSeries, (c) => c.i, (i) => {
            i.owner = this;
            i._provideRenderer(this._dataSource);
            i.provideData(this._dataSource);
            if (this._container && this._container.parentElement) {
                i._styling(this._root, this, this);
            }
            i.bindAxes(this.actualAxes);
            this._ensureDefaultTooltip(i);
            this._ensureTooltipCreated(i);
        }, (i) => { i._provideRenderer(null); i.provideData(null); });
        chart.provideContainer(ren);
        ren.addSizeWatcher(() => {
            this._chart.notifyContainerResized();
        });
    }
    set height(value) {
        this._height = value;
        this._renderer.setStyle(this._elRef.element.nativeElement, "height", value);
        this._chart.notifyContainerResized();
    }
    get height() {
        return this._height;
    }
    set width(value) {
        this._width = value;
        this._renderer.setStyle(this._elRef.element.nativeElement, "width", value);
        this._chart.notifyContainerResized();
    }
    get width() {
        return this._width;
    }
    /**
     * Gets or sets the legend used for the current chart.
    */
    get legend() {
        if (this.i.legend != null)
            return this.i.legend.externalObject;
    }
    set legend(v) {
        if (v != undefined && v != null)
            this.i.legend = v.i;
    }
    /**
     * A collection or manually added series for the chart.
    */
    get series() {
        if (this._series === null) {
            let coll = new IgxSeriesCollection();
            let inner = coll._innerColl;
            inner.addListener((sender, e) => {
                switch (e.action) {
                    case NotifyCollectionChangedAction.Add:
                        this._seriesAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
                        break;
                    case NotifyCollectionChangedAction.Remove:
                        this._seriesAdapter.removeManualItemAt(e.oldStartingIndex);
                        break;
                    case NotifyCollectionChangedAction.Replace:
                        this._seriesAdapter.removeManualItemAt(e.oldStartingIndex);
                        this._seriesAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
                        break;
                    case NotifyCollectionChangedAction.Reset:
                        this._seriesAdapter.clearManualItems();
                        break;
                }
            });
            this._series = coll;
        }
        return this._series;
    }
    /**
     * A collection or manually added axes for the chart.
    */
    get axes() {
        if (this._axes === null) {
            let coll = new IgxAxisCollection();
            let inner = coll._innerColl;
            inner.addListener((sender, e) => {
                switch (e.action) {
                    case NotifyCollectionChangedAction.Add:
                        this._axesAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
                        break;
                    case NotifyCollectionChangedAction.Remove:
                        this._axesAdapter.removeManualItemAt(e.oldStartingIndex);
                        break;
                    case NotifyCollectionChangedAction.Replace:
                        this._axesAdapter.removeManualItemAt(e.oldStartingIndex);
                        this._axesAdapter.insertManualItem(e.newStartingIndex, e.newItems.item(0));
                        break;
                    case NotifyCollectionChangedAction.Reset:
                        this._axesAdapter.clearManualItems();
                        break;
                }
            });
            this._axes = coll;
        }
        return this._axes;
    }
    ngOnDestroy() {
        this._chart.destroy();
        this._wrapper.destroy();
    }
    createImplementation() {
        return new XamDataChart();
    }
    set dataSource(value) {
        this._dataSource = value;
        this.bindData();
    }
    get dataSource() {
        return this._dataSource;
    }
    bindData() {
        //console.log("binding data: " + this._dataSource);
        if (this.actualAxes && this.actualAxes.length > 0) {
            var currAxes = this.actualAxes;
            for (var i = 0; i < currAxes.length; i++) {
                currAxes[i].provideData(this._dataSource);
            }
        }
        if (this.actualSeries && this.actualSeries.length > 0) {
            var currSeries = this.actualSeries;
            for (var i = 0; i < currSeries.length; i++) {
                currSeries[i].provideData(this._dataSource);
            }
        }
    }
    ngAfterContentInit() {
        if (TypeRegistrar.isRegistered("IgxDataChartDefaultTooltipsComponent")) {
            let c = TypeRegistrar.get("IgxDataChartDefaultTooltipsComponent");
            let cf = this._componentFactoryResolver.resolveComponentFactory(c);
            let cr = this._dynamicContent.createComponent(cf);
            //let cr = cf.create(this._injector);
            this._defaultTooltips = cr;
            cr.instance.onContentReady.subscribe(() => {
                this._onDefaultTooltipsReady(cr);
            });
            //this._container.appendChild(cr.location.nativeElement);
        }
        this._axesAdapter.updateQuery(this.contentAxes);
        this._seriesAdapter.updateQuery(this.contentSeries);
        if (this.actualAxes && this.actualAxes.length > 0) {
            var currAxes = this.actualAxes;
            for (var i = 0; i < currAxes.length; i++) {
                currAxes[i].provideData(this._dataSource);
            }
        }
        if (this.actualSeries && this.actualSeries.length > 0) {
            var currSeries = this.actualSeries;
            for (var i = 0; i < currSeries.length; i++) {
                currSeries[i].provideData(this._dataSource);
            }
        }
        this._styling(this._root, this);
        this.i.notifyContainerResized();
    }
    _ensureTooltipCreated(series) {
        series._ensureTooltipCreated(() => this.createTooltip(), (ele) => {
            let wrapper = new AngularWrapper(ele, this._renderer, this._ngZone);
            wrapper.updateToolTip = ele.updateToolTip;
            wrapper.hideToolTip = ele.hideToolTip;
            return wrapper;
        });
    }
    _ensureDefaultTooltip(series) {
        if (this._defaultTooltips == null) {
            return;
        }
        this._defaultTooltips.instance["ensureDefaultTooltip"](series);
    }
    _onDefaultTooltipsReady(cr) {
        if (this.actualSeries && this.actualSeries.length > 0) {
            var currSeries = this.actualSeries;
            for (var i = 0; i < currSeries.length; i++) {
                if (currSeries[i].showDefaultTooltip) {
                    this._ensureDefaultTooltip(currSeries[i]);
                }
            }
        }
    }
    createTooltip() {
        if (!TypeRegistrar.isRegistered("IgxTooltipContainerComponent")) {
            return null;
        }
        let t = TypeRegistrar.get("IgxTooltipContainerComponent");
        let cf = this._componentFactoryResolver.resolveComponentFactory(t);
        //let cr = cf.create(this._injector);
        let cr = this._dynamicContent.createComponent(cf);
        let ele = cr.location.nativeElement;
        let self = this;
        ele.updateToolTip = function (c, isSubContent) {
            if (c.externalObject) {
                c = c.externalObject;
            }
            else {
                let ext = new IgxDataContext();
                ext._implementation = c;
                c = ext;
            }
            if (!isSubContent) {
                if (ele.parentElement != self._container) {
                    if (ele.parentElement != null) {
                        ele.parentElement.removeChild(ele);
                    }
                    self._container.appendChild(ele);
                }
            }
            else {
                c.isSubContent = true;
            }
            cr.instance.context = c;
            ele.style.display = "block";
            return true;
        };
        ele.hideToolTip = function () {
            ele.style.display = "none";
        };
        ele.style.display = "none";
        return cr;
    }
    /**
     * Gets or sets the channel with which to synchronize.
    *
    * Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the `syncChannel` and then specify whether or not synchronize chart horizontally and/or vertically.
    */
    get syncChannel() {
        return this.i.syncChannel;
    }
    set syncChannel(v) {
        let newLink = null;
        if (v && v.length > 0) {
            newLink = SyncLinkManager.instance().getLink(v);
        }
        let oldLink = this.i.actualSyncLink;
        if (oldLink) {
            SyncLinkManager.instance().releaseLink(oldLink);
        }
        if (newLink) {
            this.i.actualSyncLink = newLink;
        }
        else {
            this.i.actualSyncLink = new SyncLink();
        }
        this.i.syncChannel = v;
    }
    /**
     * Gets or sets the bool used to display the window preview shadow.
    *
    * Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the `syncChannel` and then specify whether or not synchronize chart horizontally and/or vertically.
    */
    get synchronizeVertically() {
        return this.i.syncSettings ? this.i.syncSettings.synchronizeVertically : false;
    }
    set synchronizeVertically(v) {
        this.i.syncSettings.synchronizeVertically = ensureBool(v);
    }
    /**
     * Gets or sets the bool used to display the window preview shadow.
    *
    * Synchronization is the coordination of zooming, panning and crosshairs events between multiple charts. Multiple chart controls can be synchronized horizontally (along X-Axis), vertically (along Y-Axis), or both. If you want to synchronize a set of charts, assign them the same name to the `syncChannel` and then specify whether or not synchronize chart horizontally and/or vertically.
    */
    get synchronizeHorizontally() {
        return this.i.syncSettings ? this.i.syncSettings.synchronizeHorizontally : false;
    }
    set synchronizeHorizontally(v) {
        this.i.syncSettings.synchronizeHorizontally = ensureBool(v);
    }
    /**
                             * @hidden
                             */
    get i() {
        return this._implementation;
    }
    /**
 * Gets or sets whether to use a square aspect ratio for the chart. This is locked to true for polar and radial charts.
*
* Set `isSquare` to true to constrain the chart to a square, using the minimum of its height and width.
*
* ```html
* <igx-data-chart [dataSource]="data"
*     isSquare="true"
*     width="800px"
*     height="400px">
*   <igx-category-x-axis #xAxis
*     label="label">
*   </igx-category-x-axis>
*   <igx-numeric-y-axis #yAxis
*     majorStroke="green">
*   </igx-numeric-y-axis>
*
*   <igx-column-series
*     [xAxis]="xAxis"
*     [yAxis]="yAxis"
*     valueMemberPath="value">
*   </igx-column-series>
* </igx-data-chart>
* ```
*
* ```ts
*  this.chart.isSquare="True";
* ```
*/
    get isSquare() {
        return this.i.ns;
    }
    set isSquare(v) {
        this.i.ns = ensureBool(v);
    }
    /**
     * A number between 0 and 1 determining the scale of the horizontal zoom.
     * This property is effectively a shortcut to the Width of the WindowRect property.
    *
    * To programmatically change the horizontal zoom level, set `windowScaleHorizontal` to a value between 0 and 1.
    *
    * ```html
    * <igx-data-chart [dataSource]="data"
    *     windowScaleHorizontal="0.75">
    *   <igx-category-x-axis #xAxis
    *     label="label">
    *   </igx-category-x-axis>
    *   <igx-numeric-y-axis #yAxis>
    *   </igx-numeric-y-axis>
    *
    *   <igx-column-series
    *     [xAxis]="xAxis"
    *     [yAxis]="yAxis"
    *     valueMemberPath="value">
    *   </igx-column-series>
    * </igx-data-chart>
    * ```
    *
    * ```ts
    * this.chart.windowScaleHorizontal="0.75";
    * ```
    */
    get windowScaleHorizontal() {
        return this.i.ob;
    }
    set windowScaleHorizontal(v) {
        this.i.ob = +v;
    }
    /**
     * A number between 0 and 1 determining the scale of the vertical zoom.
     * This property is effectively a shortcut to the Height of the WindowRect property.
    *
    * To programmatically change the vertical zoom level, set `windowScaleVertical` to a value between 0 and 1.
    *
    * ```html
    * <igx-data-chart [dataSource]="data"
    *     windowScaleVertical="0.75">
    *   <igx-category-x-axis #xAxis
    *     label="label">
    *   </igx-category-x-axis>
    *   <igx-numeric-y-axis #yAxis>
    *   </igx-numeric-y-axis>
    *
    *   <igx-column-series
    *     [xAxis]="xAxis"
    *     [yAxis]="yAxis"
    *     valueMemberPath="value">
    *   </igx-column-series>
    * </igx-data-chart>
    * ```
    *
    * ```ts
    * this.chart.windowScaleVertical="0.75";
    * ```
    */
    get windowScaleVertical() {
        return this.i.oc;
    }
    set windowScaleVertical(v) {
        this.i.oc = +v;
    }
    /**
     * A number between 0 and 1 determining the scale of the horizontal zoom.
     * This property is effectively a shortcut to the Width of the ActualWindowRect property.
    */
    get actualWindowScaleHorizontal() {
        return this.i.n3;
    }
    set actualWindowScaleHorizontal(v) {
        this.i.n3 = +v;
    }
    /**
     * A number between 0 and 1 determining the scale of the vertical zoom.
     * This property is effectively a shortcut to the Height of the ActualWindowRect property.
    */
    get actualWindowScaleVertical() {
        return this.i.n4;
    }
    set actualWindowScaleVertical(v) {
        this.i.n4 = +v;
    }
    /**
     * Gets or sets horizontal zoomability of the current control
    *
    * Set `isHorizontalZoomEnabled` to enable or disable horizontal zooming.
    *
    * ```html
    * <igx-data-chart [dataSource]="data"
    *     isHorizontalZoomEnabled="true">
    *   <igx-category-x-axis #xAxis
    *     label="label">
    *   </igx-category-x-axis>
    *   <igx-numeric-y-axis #yAxis>
    *   </igx-numeric-y-axis>
    *
    *   <igx-column-series
    *     [xAxis]="xAxis"
    *     [yAxis]="yAxis"
    *     valueMemberPath="value">
    *   </igx-column-series>
    * </igx-data-chart>
    * ```
    *
    * ```ts
    * this.chart.IsHorizontalZoomEnabled= true;
    * ```
    */
    get isHorizontalZoomEnabled() {
        return this.i.nr;
    }
    set isHorizontalZoomEnabled(v) {
        this.i.nr = ensureBool(v);
    }
    /**
     * Gets or sets vertical zoomability of the current control
    *
    * Set `isVerticalZoomEnabled` to enable or disable vertical zooming.
    *
    * ```html
    * <igx-data-chart [dataSource]="data"
    *     isVerticalZoomEnabled="true">
    *   <igx-category-x-axis #xAxis
    *     label="label">
    *   </igx-category-x-axis>
    *   <igx-numeric-y-axis #yAxis>
    *   </igx-numeric-y-axis>
    *
    *   <igx-column-series
    *     [xAxis]="xAxis"
    *     [yAxis]="yAxis"
    *     valueMemberPath="value">
    *   </igx-column-series>
    * </igx-data-chart>
    * ```
    *
    * ```ts
    * this.chart.isVerticalZoomEnabled="True";
    * ```
    */
    get isVerticalZoomEnabled() {
        return this.i.nt;
    }
    set isVerticalZoomEnabled(v) {
        this.i.nt = ensureBool(v);
    }
    /**
     * Gets or sets how grid lines are rendered in relation to series.
    *
    *  Try setting the `gridMode` property to bring your grid lines in front of the data series.
    *
    * ```html
    * <igx-data-chart [dataSource]="data"
    *     gridMode="beforeSeries">
    *   <igx-category-x-axis #xAxis
    *     label="label">
    *   </igx-category-x-axis>
    *   <igx-numeric-y-axis #yAxis
    *     majorStroke="green">
    *   </igx-numeric-y-axis>
    *
    *   <igx-column-series
    *     [xAxis]="xAxis"
    *     [yAxis]="yAxis"
    *     valueMemberPath="value">
    *   </igx-column-series>
    * </igx-data-chart>
    * ```
    */
    get gridMode() {
        return this.i.ng;
    }
    set gridMode(v) {
        this.i.ng = ensureEnum(GridMode_$type, v);
    }
    /**
     * Gets or sets a value indicating whether grid and tick lines are aligned to device pixels.
    */
    get alignsGridLinesToPixels() {
        return this.i.nn;
    }
    set alignsGridLinesToPixels(v) {
        this.i.nn = ensureBool(v);
    }
    /**
     * Gets or sets the palette of brushes to use for coloring the chart series.
    *
    * `brushes` can be set declaratively to a list of color strings.
    *
    * ```html
    * <igx-data-chart [dataSource]="data"
    *     brushes="red,green,blue">
    *   <igx-category-x-axis #xAxis
    *     label="label">
    *   </igx-category-x-axis>
    *   <igx-numeric-y-axis #yAxis>
    *   </igx-numeric-y-axis>
    *
    *   <igx-column-series
    *     [xAxis]="xAxis"
    *     [yAxis]="yAxis"
    *     valueMemberPath="value">
    *   </igx-column-series>
    *   <igx-column-series
    *     [xAxis]="xAxis"
    *     [yAxis]="yAxis"
    *     valueMemberPath="value">
    *   </igx-column-series>
    *   <igx-column-series
    *     [xAxis]="xAxis"
    *     [yAxis]="yAxis"
    *     valueMemberPath="value">
    *   </igx-column-series>
    * </igx-data-chart>
    * ```
    *
    * ```ts
    * this.chart.brushes="red" ;
    * ```
    */
    get brushes() {
        return fromBrushCollection(this.i.m9);
    }
    set brushes(v) {
        this.i.m9 = toBrushCollection(v);
    }
    /**
     * Gets or sets the MarkerBrushes property.
     * The brushes property defines the palette from which automatically assigned series brushes are selected.
    *
    * `markerBrushes` can be set declaratively to a list of color strings.
    *
    * ```html
    * <igx-data-chart [dataSource]="data"
    *     markerBrushes="red,green,blue">
    *   <igx-category-x-axis #xAxis
    *     label="label">
    *   </igx-category-x-axis>
    *   <igx-numeric-y-axis #yAxis>
    *   </igx-numeric-y-axis>
    *
    *   <igx-column-series
    *     [xAxis]="xAxis"
    *     [yAxis]="yAxis"
    *     valueMemberPath="value"
    *     markerType="circle">
    *   </igx-column-series>
    *   <igx-column-series
    *     [xAxis]="xAxis"
    *     [yAxis]="yAxis"
    *     valueMemberPath="value"
    *     markerType="circle">
    *   </igx-column-series>
    *   <igx-column-series
    *     [xAxis]="xAxis"
    *     [yAxis]="yAxis"
    *     valueMemberPath="value"
    *     markerType="circle">
    *   </igx-column-series>
    * </igx-data-chart>
    * ```
    *
    * ```ts
    * this.chart.markerBrushes="red,green,blue";
    * ```
    */
    get markerBrushes() {
        return fromBrushCollection(this.i.na);
    }
    set markerBrushes(v) {
        this.i.na = toBrushCollection(v);
    }
    /**
     * Gets or sets the palette of brushes to use for outlines on the chart series.
    *
    * `outlines` can be set declaratively to a list of color strings.
    *
    * ```html
    * <igx-data-chart [dataSource]="data"
    *     outlines="red,green,blue">
    *   <igx-category-x-axis #xAxis
    *     label="label">
    *   </igx-category-x-axis>
    *   <igx-numeric-y-axis #yAxis>
    *   </igx-numeric-y-axis>
    *
    *   <igx-column-series
    *     [xAxis]="xAxis"
    *     [yAxis]="yAxis"
    *     valueMemberPath="value">
    *   </igx-column-series>
    *   <igx-column-series
    *     [xAxis]="xAxis"
    *     [yAxis]="yAxis"
    *     valueMemberPath="value">
    *   </igx-column-series>
    *   <igx-column-series
    *     [xAxis]="xAxis"
    *     [yAxis]="yAxis"
    *     valueMemberPath="value">
    *   </igx-column-series>
    * </igx-data-chart>
    * ```
    *
    * ```ts
    * this.chart.outlines="red,green,blue";
    * ```
    */
    get outlines() {
        return fromBrushCollection(this.i.nc);
    }
    set outlines(v) {
        this.i.nc = toBrushCollection(v);
    }
    /**
     * Gets or sets the MarkerOutlines property.
     * The brushes property defines the palette from which automatically assigned series brushes are selected.
    *
    * `markerOutlines` can be set declaratively to a list of color strings.
    *
    * ```html
    * <igx-data-chart [dataSource]="data"
    *     markerOutlines="red,green,blue">
    *   <igx-category-x-axis #xAxis
    *     label="label">
    *   </igx-category-x-axis>
    *   <igx-numeric-y-axis #yAxis>
    *   </igx-numeric-y-axis>
    *
    *   <igx-column-series
    *     [xAxis]="xAxis"
    *     [yAxis]="yAxis"
    *     valueMemberPath="value"
    *     markerType="circle">
    *   </igx-column-series>
    *   <igx-column-series
    *     [xAxis]="xAxis"
    *     [yAxis]="yAxis"
    *     valueMemberPath="value"
    *     markerType="circle">
    *   </igx-column-series>
    *   <igx-column-series
    *     [xAxis]="xAxis"
    *     [yAxis]="yAxis"
    *     valueMemberPath="value"
    *     markerType="circle">
    *   </igx-column-series>
    * </igx-data-chart>
    * ```
    *
    * ```ts
    * this.chart.markerOutlines="red,green,blue";
    * ```
    */
    get markerOutlines() {
        return fromBrushCollection(this.i.nb);
    }
    set markerOutlines(v) {
        this.i.nb = toBrushCollection(v);
    }
    /**
     * Gets or sets the DefaultAxisStroke property.
     * The DefaultAxisStroke property defines the brush which is used by the axes when no Axis.Stroke is set.
    */
    get defaultAxisStroke() {
        return brushToString(this.i.po);
    }
    set defaultAxisStroke(v) {
        this.i.po = stringToBrush(v);
    }
    /**
     * Gets or sets the DefaultAxisMajorStroke property.
     * The DefaultAxisMajorStroke property defines the brush which is used by the axes when no Axis.MajorStroke is set.
    */
    get defaultAxisMajorStroke() {
        return brushToString(this.i.pm);
    }
    set defaultAxisMajorStroke(v) {
        this.i.pm = stringToBrush(v);
    }
    /**
     * Gets or sets the DefaultAxisMinorStroke property.
     * The DefaultAxisMinorStroke property defines the brush which is used by the axes when no Axis.MinorStroke is set.
    */
    get defaultAxisMinorStroke() {
        return brushToString(this.i.pn);
    }
    set defaultAxisMinorStroke(v) {
        this.i.pn = stringToBrush(v);
    }
    /**
     * Margin applied to the left of the plot area.
    */
    get plotAreaMarginLeft() {
        return this.i.n8;
    }
    set plotAreaMarginLeft(v) {
        this.i.n8 = +v;
    }
    /**
     * Margin applied above the plot area.
    */
    get plotAreaMarginTop() {
        return this.i.oa;
    }
    set plotAreaMarginTop(v) {
        this.i.oa = +v;
    }
    /**
     * Margin applied to the right of the plot area.
    */
    get plotAreaMarginRight() {
        return this.i.n9;
    }
    set plotAreaMarginRight(v) {
        this.i.n9 = +v;
    }
    /**
     * Margin applied below the plot area.
    */
    get plotAreaMarginBottom() {
        return this.i.n7;
    }
    set plotAreaMarginBottom(v) {
        this.i.n7 = +v;
    }
    /**
 * Notifies the chart that the CSS styles in effect have been updated.

*/
    styleUpdated() {
        this.i.o4();
    }
    /**
     * Export serialized visual data.
    
    */
    exportSerializedVisualData() {
        let iv = this.i.om();
        return (iv);
    }
};
tslib_1.__decorate([
    ContentChildren(IgxAxisComponent),
    tslib_1.__metadata("design:type", QueryList)
], IgxDataChartComponent.prototype, "contentAxes", void 0);
tslib_1.__decorate([
    ContentChildren(IgxSeriesComponent),
    tslib_1.__metadata("design:type", QueryList)
], IgxDataChartComponent.prototype, "contentSeries", void 0);
tslib_1.__decorate([
    ViewChild("dynamicContent", { read: ViewContainerRef, static: true }),
    tslib_1.__metadata("design:type", ViewContainerRef)
], IgxDataChartComponent.prototype, "_dynamicContent", void 0);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", String),
    tslib_1.__metadata("design:paramtypes", [String])
], IgxDataChartComponent.prototype, "height", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", String),
    tslib_1.__metadata("design:paramtypes", [String])
], IgxDataChartComponent.prototype, "width", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Object),
    tslib_1.__metadata("design:paramtypes", [Object])
], IgxDataChartComponent.prototype, "legend", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Object),
    tslib_1.__metadata("design:paramtypes", [Object])
], IgxDataChartComponent.prototype, "dataSource", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", String),
    tslib_1.__metadata("design:paramtypes", [String])
], IgxDataChartComponent.prototype, "syncChannel", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Boolean),
    tslib_1.__metadata("design:paramtypes", [Boolean])
], IgxDataChartComponent.prototype, "synchronizeVertically", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Boolean),
    tslib_1.__metadata("design:paramtypes", [Boolean])
], IgxDataChartComponent.prototype, "synchronizeHorizontally", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Boolean),
    tslib_1.__metadata("design:paramtypes", [Boolean])
], IgxDataChartComponent.prototype, "isSquare", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Number),
    tslib_1.__metadata("design:paramtypes", [Number])
], IgxDataChartComponent.prototype, "windowScaleHorizontal", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Number),
    tslib_1.__metadata("design:paramtypes", [Number])
], IgxDataChartComponent.prototype, "windowScaleVertical", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Number),
    tslib_1.__metadata("design:paramtypes", [Number])
], IgxDataChartComponent.prototype, "actualWindowScaleHorizontal", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Number),
    tslib_1.__metadata("design:paramtypes", [Number])
], IgxDataChartComponent.prototype, "actualWindowScaleVertical", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Boolean),
    tslib_1.__metadata("design:paramtypes", [Boolean])
], IgxDataChartComponent.prototype, "isHorizontalZoomEnabled", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Boolean),
    tslib_1.__metadata("design:paramtypes", [Boolean])
], IgxDataChartComponent.prototype, "isVerticalZoomEnabled", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Number),
    tslib_1.__metadata("design:paramtypes", [Number])
], IgxDataChartComponent.prototype, "gridMode", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Boolean),
    tslib_1.__metadata("design:paramtypes", [Boolean])
], IgxDataChartComponent.prototype, "alignsGridLinesToPixels", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Array),
    tslib_1.__metadata("design:paramtypes", [Array])
], IgxDataChartComponent.prototype, "brushes", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Array),
    tslib_1.__metadata("design:paramtypes", [Array])
], IgxDataChartComponent.prototype, "markerBrushes", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Array),
    tslib_1.__metadata("design:paramtypes", [Array])
], IgxDataChartComponent.prototype, "outlines", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Array),
    tslib_1.__metadata("design:paramtypes", [Array])
], IgxDataChartComponent.prototype, "markerOutlines", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", String),
    tslib_1.__metadata("design:paramtypes", [String])
], IgxDataChartComponent.prototype, "defaultAxisStroke", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", String),
    tslib_1.__metadata("design:paramtypes", [String])
], IgxDataChartComponent.prototype, "defaultAxisMajorStroke", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", String),
    tslib_1.__metadata("design:paramtypes", [String])
], IgxDataChartComponent.prototype, "defaultAxisMinorStroke", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Number),
    tslib_1.__metadata("design:paramtypes", [Number])
], IgxDataChartComponent.prototype, "plotAreaMarginLeft", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Number),
    tslib_1.__metadata("design:paramtypes", [Number])
], IgxDataChartComponent.prototype, "plotAreaMarginTop", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Number),
    tslib_1.__metadata("design:paramtypes", [Number])
], IgxDataChartComponent.prototype, "plotAreaMarginRight", null);
tslib_1.__decorate([
    Input(),
    tslib_1.__metadata("design:type", Number),
    tslib_1.__metadata("design:paramtypes", [Number])
], IgxDataChartComponent.prototype, "plotAreaMarginBottom", null);
IgxDataChartComponent = IgxDataChartComponent_1 = tslib_1.__decorate([
    Component({
        selector: 'igx-data-chart',
        template: `<ng-container #dynamicContent></ng-container>`,
        changeDetection: ChangeDetectionStrategy.OnPush,
        providers: [{ provide: IgxSeriesViewerComponent, useExisting: forwardRef(() => IgxDataChartComponent_1) }],
        host: { 'class': 'igx-data-chart ig-data-chart' },
        styles: [`
		:host {
			display: block;
		}
	`]
    }),
    tslib_1.__metadata("design:paramtypes", [Renderer2,
        ViewContainerRef,
        NgZone,
        ComponentFactoryResolver,
        Injector])
], IgxDataChartComponent);
export { IgxDataChartComponent };
//# sourceMappingURL=igx-data-chart-component.js.map