Open razorsyntax opened 4 years ago
Apologies for all the issues. I'm using the crap out of this library. lol I'm pretty sure this is the last one.
After playing with it for a bit, it looks like it'll flash white no matter what. I was able to change the webview backgoround color in the body and html tags to no avail (in the plugin folder) but it might be a highcharts thing.
http://jsfiddle.net/mwuto084/2/ <--- jsfiddle without that white flashing.
Hi, Sorry for the late reply, usually Im not very active in the weekends. No worries for the issues, it helps me a lot making this plugin better, because right now Im not using it in any of my projects. I should be the one thanking you. About this issue, after some research I think it is related to this. So in the 1.1.2 release I set the webview background color to transparent, can you test it and tell me if it is working as you expect now ?
Well awesome.
It's still flashing white though. Changing the webview.android.setBackgroundColor(0x00000000);
value doesn't seem to make a difference. It's always white even when I used the blue screen of death color.
I'm running emulated Android 7 and iOS 13.2.
Ok, can you provide a repo ? I dont know how to reproduce your issue, tried it with some emulators and I didnt observe it
So I'm using async
pipe and had a thought. If the chart has no data and is waiting for something to return... then the chart won't have any options and the chart would display a white background until data returns (but that's the theory).
<GridLayout rows="*" columns="*"
width="100%"
height="100%"
(loaded)="onLoad($event)">
<Highcharts row="0" col="0"
[options]="chartService$ | async"
id="ChartContainer">
</Highcharts>
</GridLayout>
It looks like you might be able to replicate the behavior with a timeout.
chartOptions = [{...}]
this.chartService$ = this.getDataService();
getDataService() {
setTimeout(() => {
return of(JSON.stringify(this.chartOptions));
}, 1000);
}
Thinking all I have to do is give it some options on load, I've created some default chart options with no data but when the component loads it, it renders a white chart with a title of "Chart Title". I poked around in the plugin and found something called defaultOptions
and it looks like that's loading, rather than my empty chart options.
Is it not playing well with async
pipe?
I don't know if this matters but here's my package.json
.
{
"description": "",
"license": "SEE LICENSE IN <your-license-filename>",
"readme": "NativeScript Application",
"repository": "<fill-your-repository-here>",
"nativescript": {
"id": "",
"tns-ios": {
"version": "6.2.0"
},
"tns-android": {
"version": "6.2.0"
}
},
"dependencies": {
"@angular/animations": "~8.2.0",
"@angular/cli": "^7.1.0",
"@angular/common": "~8.2.0",
"@angular/compiler": "~8.2.0",
"@angular/core": "~8.2.0",
"@angular/forms": "~8.2.0",
"@angular/http": "8.0.0-beta.10",
"@angular/platform-browser": "~8.2.0",
"@angular/platform-browser-dynamic": "~8.2.0",
"@angular/router": "~8.2.0",
"@nstudio/nativescript-loading-indicator": "^1.0.0",
"@types/lodash": "^4.14.110",
"bignumber.js": "^9.0.0",
"crypto-js": "^3.1.9-1",
"growl": "^1.10.2",
"lodash": "^4.17.10",
"moment": "^2.22.2",
"nativescript-angular": "^8.2.1",
"nativescript-app-sync": "^1.0.7",
"nativescript-carousel": "^6.1.1",
"nativescript-couchbase": "^1.0.18",
"nativescript-filterable-listpicker": "^2.2.6",
"nativescript-localize": "^4.2.0",
"nativescript-modal-datetimepicker": "^1.2.0",
"nativescript-theme-core": "~1.0.4",
"nativescript-toasty": "^2.0.1",
"nativescript-ui-autocomplete": "6.0.0",
"nativescript-ui-chart": "7.0.0",
"nativescript-ui-highcharts": "^1.1.2",
"nativescript-ui-listview": "^8.0.0",
"nativescript-unit-test-runner": "0.7.0",
"reflect-metadata": "~0.1.8",
"rxjs": "^6.4.0",
"tns-core-modules": "^6.2.0",
"zone.js": "^0.9.1"
},
"devDependencies": {
"@angular/compiler-cli": "~8.2.0",
"@ngtools/webpack": "~8.2.0",
"@types/crypto-js": "^3.1.43",
"@types/jasmine": "3.3.12",
"babel-traverse": "6.26.0",
"babel-types": "6.26.0",
"babylon": "6.18.0",
"husky": "^0.14.3",
"karma": "4.1.0",
"karma-jasmine": "2.0.1",
"karma-nativescript-launcher": "0.4.0",
"karma-webpack": "3.0.5",
"lazy": "1.0.11",
"lint-staged": "^7.2.0",
"nativescript-css-loader": "~0.26.1",
"nativescript-dev-webpack": "^1.3.0",
"node-sass": "4.12.0",
"prettier": "^1.13.7",
"tns-platform-declarations": "^6.0.1",
"tslib": "~1.9.2",
"tslint": "^5.10.0",
"typescript": "~3.5.3"
},
"author": "",
"scripts": {
"e2e": "tsc -p e2e && mocha --opts ./e2e/config/mocha.opts",
"compile-tests": "tsc -p e2e --watch"
}
}
I'm getting the message parse() is deprecated. Use Builder.parse() instead.
in the console when the charts load. Is this part of it?
I'm going to see if this is an issue with core Nativescript. Looks like someone else is having issues on a similar version: https://stackoverflow.com/questions/58734302/cant-get-transparent-webview-in-nativescript-6-angular-set-backgroundcolor-tra
The webview background color is white and then the chart loads and successfully hides it at 100% width/height. But that means just before the chart loads, it briefly flashes white. Is there a way to configure the webview background color?