igniteui-webcomponents-charts 4.6.0 → 4.7.0

package/esm2015/lib/igc-data-chart-component.js

@@ -131,6 +131,7 @@ export let IgcDataChartComponent = /*@__PURE__*/ (() => {
             this._series = null;
             this._axes = null;
             this._dataSource = null;
+            this._highlightedDataSource = null;
             this._axesAdapter = null;
             this._seriesAdapter = null;
             this._disconnected = false;
@@ -165,6 +166,7 @@ export let IgcDataChartComponent = /*@__PURE__*/ (() => {
                 i.owner = this;
                 i._provideRenderer(this._dataSource);
                 i.provideData(this._dataSource);
+                i.provideHighlightedData(this._highlightedDataSource);
                 i.bindAxes(this.actualAxes);
                 if (this.parentElement) {
                     i._styling(this, this, this);
@@ -201,6 +203,13 @@ export let IgcDataChartComponent = /*@__PURE__*/ (() => {
         get dataSource() {
             return this._dataSource;
         }
+        set highlightedDataSource(value) {
+            this._highlightedDataSource = value;
+            this.bindHighlightedData();
+        }
+        get highlightedDataSource() {
+            return this._highlightedDataSource;
+        }
         bindData() {
             //console.log("binding data: " + this._dataSource);
             if (this.actualAxes && this.actualAxes.length > 0) {
@@ -216,6 +225,14 @@ export let IgcDataChartComponent = /*@__PURE__*/ (() => {
                 }
             }
         }
+        bindHighlightedData() {
+            if (this.actualSeries && this.actualSeries.length > 0) {
+                var currSeries = this.actualSeries;
+                for (var i = 0; i < currSeries.length; i++) {
+                    currSeries[i].provideHighlightedData(this._highlightedDataSource);
+                }
+            }
+        }
         updateContentChildren() {
             this.contentAxes.length = 0;
             this.contentSeries.length = 0;
@@ -424,11 +441,11 @@ export let IgcDataChartComponent = /*@__PURE__*/ (() => {
     * ```
     */
         get isSquare() {
-            return this.i.ux;
+            return this.i.u0;
         }
         set isSquare(v) {
-            this.i.ux = ensureBool(v);
-            this._a("isSquare", this.i.ux);
+            this.i.u0 = ensureBool(v);
+            this._a("isSquare", this.i.u0);
         }
         /**
          * A number between 0 and 1 determining the scale of the horizontal zoom.
@@ -441,11 +458,11 @@ export let IgcDataChartComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get windowScaleHorizontal() {
-            return this.i.v4;
+            return this.i.v7;
         }
         set windowScaleHorizontal(v) {
-            this.i.v4 = +v;
-            this._a("windowScaleHorizontal", this.i.v4);
+            this.i.v7 = +v;
+            this._a("windowScaleHorizontal", this.i.v7);
         }
         /**
          * A number between 0 and 1 determining the scale of the vertical zoom.
@@ -458,33 +475,33 @@ export let IgcDataChartComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get windowScaleVertical() {
-            return this.i.v5;
+            return this.i.v8;
         }
         set windowScaleVertical(v) {
-            this.i.v5 = +v;
-            this._a("windowScaleVertical", this.i.v5);
+            this.i.v8 = +v;
+            this._a("windowScaleVertical", this.i.v8);
         }
         /**
          * 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.vp;
+            return this.i.vs;
         }
         set actualWindowScaleHorizontal(v) {
-            this.i.vp = +v;
-            this._a("actualWindowScaleHorizontal", this.i.vp);
+            this.i.vs = +v;
+            this._a("actualWindowScaleHorizontal", this.i.vs);
         }
         /**
          * 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.vq;
+            return this.i.vt;
         }
         set actualWindowScaleVertical(v) {
-            this.i.vq = +v;
-            this._a("actualWindowScaleVertical", this.i.vq);
+            this.i.vt = +v;
+            this._a("actualWindowScaleVertical", this.i.vt);
         }
         /**
          * Gets or sets horizontal zoomability of the current control
@@ -496,11 +513,11 @@ export let IgcDataChartComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get isHorizontalZoomEnabled() {
-            return this.i.uv;
+            return this.i.uy;
         }
         set isHorizontalZoomEnabled(v) {
-            this.i.uv = ensureBool(v);
-            this._a("isHorizontalZoomEnabled", this.i.uv);
+            this.i.uy = ensureBool(v);
+            this._a("isHorizontalZoomEnabled", this.i.uy);
         }
         /**
          * Gets or sets vertical zoomability of the current control
@@ -512,11 +529,11 @@ export let IgcDataChartComponent = /*@__PURE__*/ (() => {
         * ```
         */
         get isVerticalZoomEnabled() {
-            return this.i.uy;
+            return this.i.u1;
         }
         set isVerticalZoomEnabled(v) {
-            this.i.uy = ensureBool(v);
-            this._a("isVerticalZoomEnabled", this.i.uy);
+            this.i.u1 = ensureBool(v);
+            this._a("isVerticalZoomEnabled", this.i.u1);
         }
         /**
          * Gets or sets how grid lines are rendered in relation to series.
@@ -524,91 +541,91 @@ export let IgcDataChartComponent = /*@__PURE__*/ (() => {
         *  Try setting the `GridMode` property to bring your grid lines in front of the data series.
         */
         get gridMode() {
-            return this.i.ub;
+            return this.i.ue;
         }
         set gridMode(v) {
-            this.i.ub = ensureEnum(GridMode_$type, v);
-            this._a("gridMode", enumToString(GridMode_$type, this.i.ub));
+            this.i.ue = ensureEnum(GridMode_$type, v);
+            this._a("gridMode", enumToString(GridMode_$type, this.i.ue));
         }
         /**
          * Gets or sets a value indicating whether grid and tick lines are aligned to device pixels.
         */
         get alignsGridLinesToPixels() {
-            return this.i.ur;
+            return this.i.uu;
         }
         set alignsGridLinesToPixels(v) {
-            this.i.ur = ensureBool(v);
-            this._a("alignsGridLinesToPixels", this.i.ur);
+            this.i.uu = ensureBool(v);
+            this._a("alignsGridLinesToPixels", this.i.uu);
         }
         /**
          * Gets or sets the maximum amount the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
         */
         get autoExpandMarginMaximumValue() {
-            return this.i.vs;
+            return this.i.vv;
         }
         set autoExpandMarginMaximumValue(v) {
-            this.i.vs = +v;
-            this._a("autoExpandMarginMaximumValue", this.i.vs);
+            this.i.vv = +v;
+            this._a("autoExpandMarginMaximumValue", this.i.vv);
         }
         /**
          * Gets or sets the extra amount the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
         */
         get autoExpandMarginExtraPadding() {
-            return this.i.vr;
+            return this.i.vu;
         }
         set autoExpandMarginExtraPadding(v) {
-            this.i.vr = +v;
-            this._a("autoExpandMarginExtraPadding", this.i.vr);
+            this.i.vu = +v;
+            this._a("autoExpandMarginExtraPadding", this.i.vu);
         }
         /**
          * Gets or sets a whether the series viewer should suppress truncation of axis labels.
         */
         get shouldSuppressAxisLabelTruncation() {
-            return this.i.u5;
+            return this.i.u8;
         }
         set shouldSuppressAxisLabelTruncation(v) {
-            this.i.u5 = ensureBool(v);
-            this._a("shouldSuppressAxisLabelTruncation", this.i.u5);
+            this.i.u8 = ensureBool(v);
+            this._a("shouldSuppressAxisLabelTruncation", this.i.u8);
         }
         /**
          * Gets or sets a whether the series viewer should auto expand margins to accomodate the initial horizontal axis labels.
         */
         get shouldAutoExpandMarginForInitialLabels() {
-            return this.i.u1;
+            return this.i.u4;
         }
         set shouldAutoExpandMarginForInitialLabels(v) {
-            this.i.u1 = ensureBool(v);
-            this._a("shouldAutoExpandMarginForInitialLabels", this.i.u1);
+            this.i.u4 = ensureBool(v);
+            this._a("shouldAutoExpandMarginForInitialLabels", this.i.u4);
         }
         /**
          * Gets or sets a whether the series viewer should consider auto rotating labels to fit them in the initial view. This implies that ShouldAutoExpandMarginForInitialLabels is true.
         */
         get shouldConsiderAutoRotationForInitialLabels() {
-            return this.i.u4;
+            return this.i.u7;
         }
         set shouldConsiderAutoRotationForInitialLabels(v) {
-            this.i.u4 = ensureBool(v);
-            this._a("shouldConsiderAutoRotationForInitialLabels", this.i.u4);
+            this.i.u7 = ensureBool(v);
+            this._a("shouldConsiderAutoRotationForInitialLabels", this.i.u7);
         }
         /**
          * Gets or sets a whether the series viewer should suppress auto recalculating margin and axis label angles.
         */
         get suppressAutoMarginAndAngleRecalculation() {
-            return this.i.u6;
+            return this.i.u9;
         }
         set suppressAutoMarginAndAngleRecalculation(v) {
-            this.i.u6 = ensureBool(v);
-            this._a("suppressAutoMarginAndAngleRecalculation", this.i.u6);
+            this.i.u9 = ensureBool(v);
+            this._a("suppressAutoMarginAndAngleRecalculation", this.i.u9);
         }
         /**
          * Gets or sets a whether the series viewer should consider auto rotating labels to fit them in the initial view. This implies that ShouldAutoExpandMarginForInitialLabels is true.
         */
         get autoMarginAndAngleUpdateMode() {
-            return this.i.t6;
+            return this.i.t9;
         }
         set autoMarginAndAngleUpdateMode(v) {
-            this.i.t6 = ensureEnum(AutoMarginsAndAngleUpdateMode_$type, v);
-            this._a("autoMarginAndAngleUpdateMode", enumToString(AutoMarginsAndAngleUpdateMode_$type, this.i.t6));
+            this.i.t9 = ensureEnum(AutoMarginsAndAngleUpdateMode_$type, v);
+            this._a("autoMarginAndAngleUpdateMode", enumToString(AutoMarginsAndAngleUpdateMode_$type, this.i.t9));
         }
         /**
          * Gets or sets the DefaultAxisStroke property.
@@ -616,11 +633,11 @@ export let IgcDataChartComponent = /*@__PURE__*/ (() => {
          * Axis.Stroke is set.
         */
         get defaultAxisStroke() {
-            return brushToString(this.i.x7);
+            return brushToString(this.i.ya);
         }
         set defaultAxisStroke(v) {
-            this.i.x7 = stringToBrush(v);
-            this._a("defaultAxisStroke", brushToString(this.i.x7));
+            this.i.ya = stringToBrush(v);
+            this._a("defaultAxisStroke", brushToString(this.i.ya));
         }
         /**
          * Gets or sets the DefaultAxisMajorStroke property.
@@ -628,11 +645,11 @@ export let IgcDataChartComponent = /*@__PURE__*/ (() => {
          * Axis.MajorStroke is set.
         */
         get defaultAxisMajorStroke() {
-            return brushToString(this.i.x5);
+            return brushToString(this.i.x8);
         }
         set defaultAxisMajorStroke(v) {
-            this.i.x5 = stringToBrush(v);
-            this._a("defaultAxisMajorStroke", brushToString(this.i.x5));
+            this.i.x8 = stringToBrush(v);
+            this._a("defaultAxisMajorStroke", brushToString(this.i.x8));
         }
         /**
          * Gets or sets the DefaultAxisMinorStroke property.
@@ -640,121 +657,121 @@ export let IgcDataChartComponent = /*@__PURE__*/ (() => {
          * Axis.MinorStroke is set.
         */
         get defaultAxisMinorStroke() {
-            return brushToString(this.i.x6);
+            return brushToString(this.i.x9);
         }
         set defaultAxisMinorStroke(v) {
-            this.i.x6 = stringToBrush(v);
-            this._a("defaultAxisMinorStroke", brushToString(this.i.x6));
+            this.i.x9 = stringToBrush(v);
+            this._a("defaultAxisMinorStroke", brushToString(this.i.x9));
         }
         /**
          * Gets the actual resolved left plot area margin;
         */
         get actualPlotAreaMarginLeft() {
-            return this.i.vm;
+            return this.i.vp;
         }
         set actualPlotAreaMarginLeft(v) {
-            this.i.vm = +v;
-            this._a("actualPlotAreaMarginLeft", this.i.vm);
+            this.i.vp = +v;
+            this._a("actualPlotAreaMarginLeft", this.i.vp);
         }
         /**
          * Gets the actual resolved top plot area margin;
         */
         get actualPlotAreaMarginTop() {
-            return this.i.vo;
+            return this.i.vr;
         }
         set actualPlotAreaMarginTop(v) {
-            this.i.vo = +v;
-            this._a("actualPlotAreaMarginTop", this.i.vo);
+            this.i.vr = +v;
+            this._a("actualPlotAreaMarginTop", this.i.vr);
         }
         /**
          * Gets the actual resolved right plot area margin;
         */
         get actualPlotAreaMarginRight() {
-            return this.i.vn;
+            return this.i.vq;
         }
         set actualPlotAreaMarginRight(v) {
-            this.i.vn = +v;
-            this._a("actualPlotAreaMarginRight", this.i.vn);
+            this.i.vq = +v;
+            this._a("actualPlotAreaMarginRight", this.i.vq);
         }
         /**
          * Gets the actual resolved bottom plot area margin;
         */
         get actualPlotAreaMarginBottom() {
-            return this.i.vl;
+            return this.i.vo;
         }
         set actualPlotAreaMarginBottom(v) {
-            this.i.vl = +v;
-            this._a("actualPlotAreaMarginBottom", this.i.vl);
+            this.i.vo = +v;
+            this._a("actualPlotAreaMarginBottom", this.i.vo);
         }
         /**
          * Gets or sets mode to use for automatically calculating the plot area margin.
         */
         get computedPlotAreaMarginMode() {
-            return this.i.t9;
+            return this.i.uc;
         }
         set computedPlotAreaMarginMode(v) {
-            this.i.t9 = ensureEnum(ComputedPlotAreaMarginMode_$type, v);
-            this._a("computedPlotAreaMarginMode", enumToString(ComputedPlotAreaMarginMode_$type, this.i.t9));
+            this.i.uc = ensureEnum(ComputedPlotAreaMarginMode_$type, v);
+            this._a("computedPlotAreaMarginMode", enumToString(ComputedPlotAreaMarginMode_$type, this.i.uc));
         }
         /**
          * Gets or sets horizontal mode to use for automatically calculating the plot area margin based ont the series.
         */
         get seriesPlotAreaMarginHorizontalMode() {
-            return this.i.ug;
+            return this.i.uj;
         }
         set seriesPlotAreaMarginHorizontalMode(v) {
-            this.i.ug = ensureEnum(SeriesPlotAreaMarginHorizontalMode_$type, v);
-            this._a("seriesPlotAreaMarginHorizontalMode", enumToString(SeriesPlotAreaMarginHorizontalMode_$type, this.i.ug));
+            this.i.uj = ensureEnum(SeriesPlotAreaMarginHorizontalMode_$type, v);
+            this._a("seriesPlotAreaMarginHorizontalMode", enumToString(SeriesPlotAreaMarginHorizontalMode_$type, this.i.uj));
         }
         /**
          * Gets or sets vertical mode to use for automatically calculating the plot area margin based ont the series.
         */
         get seriesPlotAreaMarginVerticalMode() {
-            return this.i.uj;
+            return this.i.um;
         }
         set seriesPlotAreaMarginVerticalMode(v) {
-            this.i.uj = ensureEnum(SeriesPlotAreaMarginVerticalMode_$type, v);
-            this._a("seriesPlotAreaMarginVerticalMode", enumToString(SeriesPlotAreaMarginVerticalMode_$type, this.i.uj));
+            this.i.um = ensureEnum(SeriesPlotAreaMarginVerticalMode_$type, v);
+            this._a("seriesPlotAreaMarginVerticalMode", enumToString(SeriesPlotAreaMarginVerticalMode_$type, this.i.um));
         }
         /**
          * Margin applied to the left of the plot area.
         */
         get plotAreaMarginLeft() {
-            return this.i.v0;
+            return this.i.v3;
         }
         set plotAreaMarginLeft(v) {
-            this.i.v0 = +v;
-            this._a("plotAreaMarginLeft", this.i.v0);
+            this.i.v3 = +v;
+            this._a("plotAreaMarginLeft", this.i.v3);
         }
         /**
          * Margin applied above the plot area.
         */
         get plotAreaMarginTop() {
-            return this.i.v2;
+            return this.i.v5;
         }
         set plotAreaMarginTop(v) {
-            this.i.v2 = +v;
-            this._a("plotAreaMarginTop", this.i.v2);
+            this.i.v5 = +v;
+            this._a("plotAreaMarginTop", this.i.v5);
         }
         /**
          * Margin applied to the right of the plot area.
         */
         get plotAreaMarginRight() {
-            return this.i.v1;
+            return this.i.v4;
         }
         set plotAreaMarginRight(v) {
-            this.i.v1 = +v;
-            this._a("plotAreaMarginRight", this.i.v1);
+            this.i.v4 = +v;
+            this._a("plotAreaMarginRight", this.i.v4);
         }
         /**
          * Margin applied below the plot area.
         */
         get plotAreaMarginBottom() {
-            return this.i.vz;
+            return this.i.v2;
         }
         set plotAreaMarginBottom(v) {
-            this.i.vz = +v;
-            this._a("plotAreaMarginBottom", this.i.vz);
+            this.i.v2 = +v;
+            this._a("plotAreaMarginBottom", this.i.v2);
         }
         findByName(name) {
             var baseResult = super.findByName(name);
@@ -767,27 +784,27 @@ export let IgcDataChartComponent = /*@__PURE__*/ (() => {
             return null;
         }
         refreshComputedPlotAreaMargin() {
-            this.i.xd();
+            this.i.xg();
         }
         recalculateMarginAutoExpansion() {
-            this.i.xc();
+            this.i.xf();
         }
         recalculateAutoLabelsAngle() {
-            this.i.xb();
+            this.i.xe();
         }
         /**
          * Notifies the chart that the CSS styles in effect have been updated.
         
         */
         styleUpdated() {
-            this.i.xe();
+            this.i.xh();
         }
         /**
          * Export serialized visual data.
         
         */
         exportSerializedVisualData() {
-            let iv = this.i.wm();
+            let iv = this.i.wp();
             return (iv);
         }
     }

package/esm2015/lib/igc-data-chart-default-tooltips-component.js

@@ -20,6 +20,19 @@ export class IgcDataChartDefaultTooltipsComponent {
             </div>` : html ``;
             return ret;
         };
+        this.rangeCategoryTooltip = (context) => {
+            let ret = context ? html `
+            <div class='ui-chart-default-tooltip-content'>            
+                ${context.series.xAxis.isDateTime ? html `<span>${this.shortDate(context.series.xAxis.getItemValue(this.asAny(context.item), 'dateTimeMemberPath'))}</span>` : html ``}
+                ${context.series.xAxis.isDateTime ? html `<br />` : html ``}
+                ${!context.series.xAxis.isDateTime && context.series.xAxis.label ? html `<span>${this.format(context.series.xAxis.getItemValue(this.asAny(context.item), 'label'))}</span>` : html ``}
+                ${!context.series.xAxis.isDateTime && context.series.xAxis.label ? html `<br />` : html ``}
+                <span style="color: ${this.getBrush(context.series)}">${context.series.title}: </span>
+                <span class="ui-tooltip-priority">${this.getLowValue(context.series, context.item)} - </span>
+                <span class="ui-tooltip-priority">${this.getHighValue(context.series, context.item)}</span>
+            </div>` : html ``;
+            return ret;
+        };
         this.financialTooltip = (context) => {
             let ret = context ? html `
             <div class='ui-chart-default-tooltip-content'>            
@@ -54,6 +67,19 @@ export class IgcDataChartDefaultTooltipsComponent {
                 }
             }
         }
+        if (series.isCategory &&
+            !series.isVertical &&
+            !series.isFinancial &&
+            series.isRange) {
+            if (series.showDefaultTooltip) {
+                series.tooltipTemplate = this.rangeCategoryTooltip;
+            }
+            else {
+                if (series.tooltipTemplate === this.rangeCategoryTooltip) {
+                    series.tooltipTemplate = null;
+                }
+            }
+        }
         if (series.isFinancial) {
             if (series.showDefaultTooltip) {
                 series.tooltipTemplate = this.financialTooltip;
@@ -138,7 +164,7 @@ export class IgcDataChartDefaultTooltipsComponent {
         return this.getItemValue(series, item, "valueMemberPath", series.valueMemberPath);
     }
     getBrush(series) {
-        return series.actualBrush;
+        return series.safeActualBrush;
     }
     asAny(item) {
         return item;