Merge pull request #3122 from IgniteUI/kdragieva/finjs-chart-issue

fix(FinJSDemoComponent): Finjs category chart

Author: hanastasov

projects/app-lob/src/app/grid-finjs/main.component.html

@@ -12,22 +12,23 @@
     </app-finjs-grid>
 </div>
 
-<igx-dialog #dialog [closeOnOutsideSelect]="true" (closing)="onCloseHandler()">
-    <div (keydown)="closeDialog()" class="chart-container">
-        <igx-dialog-title> Chart </igx-dialog-title>
+<div igxOverlayOutlet #outlet="overlay-outlet">
+    <igx-dialog #dialog [closeOnOutsideSelect]="true" (closing)="onCloseHandler()">
+        <div (keydown)="closeDialog()" class="chart-container">
+            <igx-dialog-title> Chart </igx-dialog-title>
 
-        <div>
-            <igx-category-chart #chart1 [dataSource]="chartData" width="100%" chartType="column" xAxisInterval="20"
-                xAxisLabelAngle="90" [includedProperties]="properties" height="400px" [tooltipTemplate]="seriesTooltip">
-            </igx-category-chart>
-        </div>
+            <div>
+                <igx-category-chart #chart1 [dataSource]="chartData" width="100%" chartType="column" xAxisInterval="20"
+                    xAxisLabelAngle="90" [includedProperties]="properties" height="400px" [tooltipTemplate]="seriesTooltip">
+                </igx-category-chart>
+            </div>
 
-        <div igxDialogActions>
-            <button igxButton (click)="closeDialog()" [igxFocus]="dialog.isOpen">ОК</button>
+            <div igxDialogActions>
+                <button igxButton (click)="closeDialog()" [igxFocus]="dialog.isOpen">ОК</button>
+            </div>
         </div>
-    </div>
-</igx-dialog>
-
+    </igx-dialog>
+</div>
 <ng-template let-series="series" let-item="item" #seriesTooltip>
     <div class="tooltipTable">
         <div class="tooltipRow">

projects/app-lob/src/app/grid-finjs/main.component.scss

@@ -9,7 +9,6 @@
 }
 
 .chart-container {
-
     width: 50vw;
 }
 

projects/app-lob/src/app/grid-finjs/main.component.ts

@@ -1,5 +1,5 @@
-import { Component, HostBinding, OnDestroy, ViewChild } from '@angular/core';
-import { IgxDialogComponent } from 'igniteui-angular';
+import { AfterViewInit, Component, HostBinding, OnDestroy, ViewChild } from '@angular/core';
+import { IgxDialogComponent, IgxOverlayOutletDirective, OverlaySettings } from 'igniteui-angular';
 import { IgxCategoryChartComponent } from 'igniteui-angular-charts';
 import { Stock } from '../data/financialData';
 import { ControllerComponent } from './controllers.component';
@@ -10,11 +10,17 @@ import { GridFinJSComponent } from './grid-finjs.component';
     styleUrls: ['./main.component.scss'],
     templateUrl: './main.component.html'
 })
-export class FinJSDemoComponent implements OnDestroy {
+export class FinJSDemoComponent implements OnDestroy, AfterViewInit {
     @ViewChild('finGrid', { static: true }) public finGrid: GridFinJSComponent;
     @ViewChild('controllers', { static: true }) public controller: ControllerComponent;
     @ViewChild('dialog', { static: true }) public dialog: IgxDialogComponent;
     @ViewChild('chart1', { static: true }) public chart: IgxCategoryChartComponent;
+    @ViewChild(IgxOverlayOutletDirective, { static: true }) public outlet: IgxOverlayOutletDirective;
+
+    public overlaySettings: OverlaySettings = {
+        modal: false,
+        closeOnOutsideClick: true
+    };
 
     @HostBinding('class.dark-theme')
     public darkTheme = false;
@@ -43,6 +49,10 @@ export class FinJSDemoComponent implements OnDestroy {
         }
     }
 
+    public ngAfterViewInit(): void {
+        this.overlaySettings.outlet = this.outlet;
+    }
+
     public onVolumeChanged(volume: number): void {
         this.volume = volume;
         this.finGrid.dataService.hasRemoteConnection ? this.finGrid.dataService
@@ -71,7 +81,7 @@ export class FinJSDemoComponent implements OnDestroy {
             case 'chart': {
                 if (this.finGrid.grid.selectedRows.length !== 0) {
                     this.setChartData(this.finGrid.grid.selectedRows);
-                    this.dialog.open();
+                    this.dialog.open(this.overlaySettings);
                 } else {
                     this.controller.toast.open('Please select some rows first!');
                 };
@@ -85,7 +95,8 @@ export class FinJSDemoComponent implements OnDestroy {
 
     public setChartData(args: Stock[]): void {
         this.chartData = [];
-        args.forEach(row => {
+        args.forEach(rowKey => {
+            const row: Stock = this.finGrid.grid.getRowByKey(rowKey).data;
             this.chartData.push(row);
             this.chart.notifyInsertItem(this.chartData, this.chartData.length - 1, row);
         });