Nativescript-ui-feedback: Async rendering of Chart broken

[wendt88]

Please, provide the details below:

Tell us about the problem

Since nativescript-ui-chart v7.0.0. Error in directive tkCartesianVerticalAxis inserted hook: "TypeError: Cannot read property '_ngKey' of undefined", if the chart gets rendered asynchronous, like:
https://play.nativescript.org/?template=play-vue&id=MQeVIY&v=4
if you set the property ready to true it works fine.

As a workaround clear the content of function setupCssScope inside ui-chart.common.js (scopedView is always undefined, for all Series & Axis).

Debugging a bit, I found out, that series and axis call the setupCssScope-function inside onLoad and pass this.owner witch is null.
It should be set inside onTrackballChanged which never gets called.

Which platform(s) does your issue occur on?

Both

Please provide the following version numbers that your issue occurs with:

√ Component nativescript has 6.5.0 version and is up to date.
√ Component @nativescript/core has 6.5.1 version and is up to date.
√ Component tns-android has 6.5.0 version and is up to date.
√ Component tns-ios has 6.5.0 version and is up to date.
nativescript-ui-chart since v7.0.0

[bsansone]

I am experiencing this also, clearing the content of setupCssScope has fixed the issue for me too (not a permanent solution)

[cghislai]

affects angular builds as well

[bsansone]

Bump. Any other update or workarounds for this? Clearing the content of setupCssScope works only for Android, doing it on iOS throws an error and crashes the app. Would love to find a fix as this is a blocking bug for releasing an app.

NativeScript caught signal 11.
Native Stack:
1   0x102db0251 sig_handler(int)
2   0x7fff52457b5d _sigtramp
3   0x1
4   0x7fff5248bb85 libunwind::UnwindCursor<libunwind::LocalAddressSpace, libunwind::Registers_x86_64>::step()
5   0x7fff5248fe58 _Unwind_RaiseException
6   0x7fff50256ad3 __cxa_rethrow
7   0x7fff513fbcb4 objc_exception_rethrow
8   0x7fff23bce0ea CFRunLoopRunSpecific
9   0x7fff384c0bb0 GSEventRunModal
10  0x7fff48092d4d UIApplicationMain
11  0x1037a1a8d ffi_call_unix64
12  0x109a9f870
JS Stack:
UIApplicationMain([native code])
at run(file:///node_modules/@nativescript/core/application/application.js:312:26)
at file:///node_modules/nativescript-vue/dist/index.js:14050:2
at file:///app/bundle.js:4160:10
at ./app.js(file:///app/bundle.js:4164:34)
at __webpack_require__(file:///app/webpack/bootstrap:74:0)
at checkDeferredModules(file:///app/webpack/bootstrap:43:0)
at webpackJsonpCallback(file:///app/webpack/bootstrap:30:0)
at anonymous(file:///app/bundle.js:2:61)
at evaluate([native code])
at moduleEvaluation
at
at asyncFunctionResume
at
at promiseReactionJob

[keithgulbro]

Hey everyone, just looking for a status on this issue. Looks like it affects many users across the Nativescript-Vue & Angular. While the workaround outlined by @wendt88 does work. It's probably best to prioritize this issue as many users with fresh builds may be dubious of the viability of using this package due to it not working out-of-the-box based off code shown inside the demo's.

[bsansone]

I created a small before-prepare hook that replaces that file with the one that has the commented code if anyone is interested:

// Attempts to resolve issue with async rendering of the chart
// See: https://github.com/ProgressNS/nativescript-ui-feedback/issues/1387

var path = require("path");
var fs = require("fs");

function replaceContents(file, replacement) {
    var contents = fs.readFileSync(replacement);
    fs.writeFileSync(file, contents);
};

module.exports = function($logger, $projectData) {
    $logger.info("UI Chart hotfix");

    var uiChartCommonFile = path.join($projectData.projectDir, "node_modules", "nativescript-ui-chart/ui-chart.common.js");
    var hotfixFile = path.join($projectData.projectDir, "hotfixes", "ui-chart-hotfix.js");

    return new Promise(function(resolve, reject) {
        if (fs.existsSync(uiChartCommonFile)) {
            try {
                replaceContents(uiChartCommonFile, hotfixFile);                
            } catch (error) {
                console.log("Error in hook 'ui-chart-hotfix.js': " + error);
                reject();
            }
        }

        resolve();
    });
};

[wendt88]

It is sad that the community has to create terrible things to get one of the core plugins to run.
the whole UI-repo seems dead (no one comments/tags new issues) there are hundrets of issues in all NS libraries with a lot of breaking bugs, but they keep on implementing other js-template languages & new features

[lucasumberto]

im using ns-vue

in ui-chart.common.js I changed the function to:

function setupCssScope(scopedView, unscopedView) {
    if (![undefined, null].includes(scopedView)) {
        var ngKey = scopedView._ngKey;
        var vueKey = scopedView._vueKey;
    }
    if (ngKey) {
        var ngValue = scopedView[ngKey];
        unscopedView[ngKey] = ngValue;
    }
    if (vueKey) {
        var vueValue = scopedView[vueKey];
        unscopedView[vueKey] = vueValue;
    }
}

It worked for me

[plackowski]

@lucasumberto works also with angular, thx!

[lucasumberto]

@NickIliev The error seems to occurs in the undefined validations vue/angular keys. Please take a look in the fix I posted above, hope it helps to improve the source code.

[richardman1]

@lucasumberto your solution works perfectly here. Is there any update on when this will be released/tagged? we had to downgrade this package along with other nativescript-ui packages to make this package work without any build or run errors or conflicting dependencies across these other packages.

[cjohn001]

+1 same problem with Angular

[I-NOZex]

November, NS7 and v8.0.2 of the plugin, and the issue still persists... I'm very disappointed with this plugin 😓

[msn444]

February, problem still exists on Vue.

[Upd4ting]

+1 same problem still exists on vue

[I-NOZex]

At this point my team just went and created a native custom plugin for our use... I advise you guys doing the same...

[asharghi]

I used this source to patch the file in node_modules https://opensource.christmas/2019/4 with @lucasumberto code

[wendt88]

compatibility of nativescript-ui-chart with NS8 is completely broken, so it's officially dead

[cjohn001]

@wendt88 , seems like this plugin is not supported anymore. I therefore switched to the following plugin. The charts look actually a lot more fancy as well. Unfortunately, the plugin is currently also in beta and you need a highcharts license for commercial use.

https://github.com/NativeScript/nativescript-ui-charts

[wendt88]

switched to @nativescript-community/ui-chart and it works verry well.
every found bug has been fixed within a hour.
the configuration is a bit complex and you have to define a lot of things by your own, but it is faster and you have a lot more options