Kendo-angular: Responsive Charts

[tsvetomir]

Currently, the size of the Chart container is read once at initialization.
Updating the container size will have no effect, making the chart unresponsive.

We're considering the options to fix this, preferably without developer intervention.

[tsvetomir]

Shipped in @progress/kendo-angular-charts v0.8.0 :shipit:

[graphicsxp]

Now I'm getting the error :

Could not resolve '../../../../kendo-angular-resize-sensor/dist/npm/js/resize-sensor.component.ngfactory' from C:\dev\ecdt-mobile\.tmp\node_modules\@progress\kendo-angular-charts\dist\npm\js\chart.component.ngfactory.js

[tsvetomir]

I've tested the new versions in an application with AoT compilation and it seems to be working normally.

What's the output of npm ls @progress/kendo-angular-resize-sensor? Try cleaning your node_modules as well.

[graphicsxp]

I've already tried cleaning node_modules.

The output is:

 ` +-- UNMET PEER DEPENDENCY @angular/[email protected]                                                                                                                                    
 -- @progress/[email protected]                                                                                                                                                 
  +-- @progress/[email protected]                                                                                                                                        
 -- UNMET PEER DEPENDENCY rxjs@~5.0.0-beta.X                                                                                                                                           

  npm ERR! peer dep missing: @angular/compiler-cli@^0.6.2, required by [email protected]                                                                                            
  npm ERR! peer dep missing: rxjs@~5.0.0-beta.X, required by @progress/kendo-angular-resize-      [email protected]    `

But I have already rxjs installed:

"rxjs": "5.0.0-beta.12",

[tsvetomir]

OK, will check with https://github.com/graphicsxp/ecdt-mobile

[lnu]

We tried also with webpack and it's the same issue. it compiles, generates the bundle but inside the generated main.js we have this line:

throw new Error('Cannot find module "../../../../kendo-angular-resize-sensor/dist/npm/js/resize-sensor.component.ngfactory"')

[tsvetomir]

It seems that the resize-sensor module is not getting compiled. I tried referencing it directly, but I didn't get much further with Rollup. Can you try this with Webpack?

diff --git a/package.json b/package.json
index f3b8084..b049b3a 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
   },
   "devDependencies": {
     "@ionic/app-scripts": "0.0.38",
+    "@progress/kendo-angular-resize-sensor": "0.9.0",
     "typescript": "^2.0.3"
   },
   "config": {
@@ -60,4 +61,4 @@
     "cordova-plugin-network-information"
   ],
   "cordovaPlatforms": []
-}
\ No newline at end of file
+}

diff --git a/src/pages/reporting/reporting.module.ts b/src/pages/reporting/reporting.module.ts
index 2858058..9ea0dd4 100644
--- a/src/pages/reporting/reporting.module.ts
+++ b/src/pages/reporting/reporting.module.ts
@@ -1,6 +1,7 @@
 import {NgModule} from '@angular/core';
 import {IonicModule} from 'ionic-angular';
 import { ChartsModule } from '@progress/kendo-angular-charts';
+import { ResizeSensorModule } from '@progress/kendo-angular-resize-sensor';
 import {SimpleChartComponent} from './simpleChart/simple-chart.component';
 import {StackedChartComponent} from './stackedChart/stacked-chart.component';
 import {ReportingComponent} from './reporting.component';
@@ -8,7 +9,7 @@ import {ReportingService} from './service/reporting-service';
 import{SharedModule} from '../shared/shared.module';

 @NgModule({
-  imports:[IonicModule, ChartsModule,SharedModule],  //no forRoot here
+  imports:[IonicModule, ChartsModule,SharedModule,ResizeSensorModule],  //no forRoot here
   providers:[ReportingService],
   declarations:[ReportingComponent, SimpleChartComponent, StackedChartComponent],
   exports:[ReportingComponent],
@@ -16,4 +17,4 @@ import{SharedModule} from '../shared/shared.module';
 })
 export class ReportingModule{

-}
\ No newline at end of file
+}

[lnu]

It works now with your changes. But what's the right way to do it?

[tsvetomir]

Should be fixed for good in 0.8.1

Had to re-export the ResizeSensorComponent to get ngc to compile it due to https://github.com/angular/angular/issues/11889
That fix should be released, but I didn't have much luck with @angular/compiler 2.1.2 either.

[lnu]

Works out of the box with version 0.8.1.
Thanks