Please, tell us how to recreate the issue in as much detail as possible.
The following attached chart runs well when the app is build without --env.uglify flag. However, when it is build with uglification the chart breaks (does not render). I narrowed down the problem to the following code snipped:
The source of the error is the formatter function. As soon as it tries to access the this pointer, the chart breaks. I also tried an if (this && this.total), but also trying to read the this pointer results in an error, I mean I need not try to access this.total at all in order to let the rendering break.
@shiv19 I am currently developing an app with lots of charts and analytics involved, hence I would really like to use this plugin. I think it would also be a great chance to get this plugin out of alpha state. I in the meantime understood the resize issue of the underlaying highcharts object. This would not be an issue for me as my charts are static and as the app I am building does not require orientation changes which would require the chart to resize ( at least not for the beginning). Therefore, I am wondering, if you would be interested and would have the time to get things going. The legend bug in version 10 and the missing option to use formatters with uglification are an issue which would not allow me to proceed with the plugin, or I would have to make restrictive constraints on the chart design, the standard text formating options of highcharts are rather week. So would you support me to get things done or should I better try to jump to the nativescript-ui-highcharts plugin? I have not tested it yet and therefore I am not sure if it will be an alternative in regards to performance.
Is there any code involved?
The following chart works well without uglification and breaks when enabled
Which platform(s) does your issue occur on?
Please, provide the following version numbers that your issue occurs with:
Plugin(s): "@nativescript/ui-charts": "0.0.10" and 0.0.5
project and paste your dependencies and devDependencies here)
"dependencies": { "@angular/animations": "~10.1.3", "@angular/common": "~10.1.3", "@angular/compiler": "~10.1.3", "@angular/core": "~10.1.3", "@angular/forms": "~10.1.3", "@angular/platform-browser": "~10.1.3", "@angular/platform-browser-dynamic": "~10.1.3", "@angular/router": "~10.1.3", "@nativescript/angular": "~10.1.5", "@nativescript/core": "~7.0.0", "@nativescript/firebase": "rc", "@nativescript/iqkeyboardmanager": "~2.0.0", "@nativescript/localize": "~5.0.0", "@nativescript/secure-storage": "^3.0.0", "@nativescript/theme": "~2.3.3", "@nativescript/ui-charts": "0.0.10", "apollo-angular-link-http": "^1.11.0", "apollo-cache-inmemory": "^1.6.5", "apollo-cache-persist": "^0.1.1", "apollo-link": "^1.2.14", "apollo-link-batch-http": "^1.2.14", "apollo-link-context": "^1.0.20", "apollo-link-error": "^1.1.13", "d3-ease": "^1.0.7", "graphql": "^15.3.0", "graphql-tag": "^2.11.0", "intl": "^1.2.5", "moment": "^2.27.0", "nativescript-oauth2-ext": "file:../mnd-custom-plugins/nativescript-oauth2-ext/publish/package/nativescript-oauth2-ext-3.0.0.tgz", "nativescript-sqlite": "^2.6.4", "nativescript-ui-autocomplete": "^7.0.2", "nativescript-ui-calendar": "^7.0.2", "nativescript-ui-chart": "^8.0.2", "nativescript-ui-gauge": "~7.0.2", "nativescript-ui-listview": "^9.0.2", "offix-angular": "^0.0.4", "offix-client": "^0.15.5", "reflect-metadata": "~0.1.12", "rxjs": "^6.5.5", "tslib": "1.10.0", "uuid": "^8.3.0", "zone.js": "~0.10.2" }, "devDependencies": { "@angular/cli": "~10.1.3", "@angular/compiler-cli": "~10.1.3", "@graphql-codegen/cli": "^1.17.8", "@graphql-codegen/fragment-matcher": "^1.17.8", "@graphql-codegen/introspection": "^1.17.8", "@graphql-codegen/typescript": "^1.17.9", "@graphql-codegen/typescript-apollo-angular": "^1.17.7", "@graphql-codegen/typescript-operations": "^1.17.8", "@nativescript/android": "7.0.0", "@nativescript/types": "~7.0.3", "@nativescript/webpack": "~3.0.0", "@ngtools/webpack": "~10.1.3", "@types/d3-ease": "^1.0.9", "@types/intl": "^1.2.0", "@types/node": "^13.13.19", "@types/uuid": "^7.0.4", "codelyzer": "^6.0.1", "keycloak-request-token": "^0.1.0", "node-sass": "^4.14.1", "tns-ios": "6.5.3", "ts-node": "^8.10.2", "tslint": "^6.1.3", "typescript": "~3.9.2" },
Please, tell us how to recreate the issue in as much detail as possible.
The following attached chart runs well when the app is build without --env.uglify flag. However, when it is build with uglification the chart breaks (does not render). I narrowed down the problem to the following code snipped:
The source of the error is the formatter function. As soon as it tries to access the this pointer, the chart breaks. I also tried an if (this && this.total), but also trying to read the this pointer results in an error, I mean I need not try to access this.total at all in order to let the rendering break.
@shiv19 I am currently developing an app with lots of charts and analytics involved, hence I would really like to use this plugin. I think it would also be a great chance to get this plugin out of alpha state. I in the meantime understood the resize issue of the underlaying highcharts object. This would not be an issue for me as my charts are static and as the app I am building does not require orientation changes which would require the chart to resize ( at least not for the beginning). Therefore, I am wondering, if you would be interested and would have the time to get things going. The legend bug in version 10 and the missing option to use formatters with uglification are an issue which would not allow me to proceed with the plugin, or I would have to make restrictive constraints on the chart design, the standard text formating options of highcharts are rather week. So would you support me to get things done or should I better try to jump to the nativescript-ui-highcharts plugin? I have not tested it yet and therefore I am not sure if it will be an alternative in regards to performance.
Is there any code involved?
The following chart works well without uglification and breaks when enabled