Chart does not appear

[Gustavo]

Good afternoon people.

I developed an app called test_chart that managed to run perfectly, I treated json the way I wanted it to appear on the chart.

I took this all the logic developed in test_chart to implement in another app that I am developing but the problem and in this other the graph does not appear.

I saw that some people already had this problem when using webpack that I am also using in the project that the graph is not working.

Is that the problem?

The app test_chart has no webpack configured and is working, but in the other that has webpack the chart does not appear being that in both app has the same implementation.

 

tns info

All NativeScript components versions information
┌──────────────────┬─────────────────┬────────────────┬──────────────────┐
│ Component        │ Current version │ Latest version │ Information      │
│ nativescript     │ 3.3.0           │ 3.4.0          │ Update available │
│ tns-core-modules │ 3.3.0           │ 3.4.0          │ Update available │
│ tns-android      │ 3.3.0           │ 3.4.0          │ Update available │
│ tns-ios          │ 3.3.0           │ 3.4.0          │ Update available │
└──────────────────┴─────────────────┴────────────────┴──────────────────┘

 

Layout:

<StackLayout>
    <GridLayout>
        <!-- >> chart-angular-bar-series -->
        <RadCartesianChart tkExampleTitle tkToggleNavButton>
            <CategoricalAxis tkCartesianHorizontalAxis></CategoricalAxis>
            <LinearAxis tkCartesianVerticalAxis></LinearAxis>

            <BarSeries tkCartesianSeries [items]="chartResult" categoryProperty="hour" valueProperty="value" showLabels="true" >
                <PointLabelStyle tkBarLabelStyle margin="10" fontStyle="Bold" fillColor="#60B3FC" textSize="10" textColor="White"></PointLabelStyle>
            </BarSeries>
        </RadCartesianChart>
        <!-- << chart-angular-bar-series -->
    </GridLayout>
</StackLayout>

 

File TS:

export class AppComponent implements OnInit {
    chartResult: any[] = [];

    ngOnInit() {
        let data = [{"start":"2017-12-19T12:59:31.007Z","end":"2017-12-19T13:05:58.304Z","value":"346 count"},{"start":"2017-12-19T12:50:57.321Z","end":"2017-12-19T12:59:31.007Z","value":"260 count"},{"start":"2017-12-19T12:40:12.130Z","end":"2017-12-19T12:41:07.690Z","value":"55 count"},{"start":"2017-12-19T12:30:12.283Z","end":"2017-12-19T12:40:12.130Z","value":"60 count"},{"start":"2017-12-19T12:12:38.579Z","end":"2017-12-19T12:15:47.882Z","value":"27 count"},{"start":"2017-12-19T12:03:16.669Z","end":"2017-12-19T12:12:38.579Z","value":"152 count"},{"start":"2017-12-19T09:02:17.723Z","end":"2017-12-19T09:04:11.171Z","value":"42 count"},{"start":"2017-12-19T08:53:00.599Z","end":"2017-12-19T09:02:17.723Z","value":"432 count"},{"start":"2017-12-19T08:44:06.142Z","end":"2017-12-19T08:53:00.599Z","value":"211 count"},{"start":"2017-12-19T08:31:34.791Z","end":"2017-12-19T08:37:27.763Z","value":"183 count"},{"start":"2017-12-19T08:24:56.284Z","end":"2017-12-19T08:31:34.791Z","value":"23 count"},{"start":"2017-12-19T08:16:45.160Z","end":"2017-12-19T08:24:56.284Z","value":"239 count"},{"start":"2017-12-19T07:56:05.983Z","end":"2017-12-19T08:02:30.153Z","value":"743 count"},{"start":"2017-12-19T07:46:08.378Z","end":"2017-12-19T07:56:05.983Z","value":"455 count"}];

        const getHour = date => new Date(date).getUTCHours();
        const onlyNumbers = el => el.replace(/[a-zA-Z+]/g, '');

        const flatten = (acc, el) => {
            const hour = getHour(el.start);
            const value = Number(onlyNumbers(el.value));
            const find = acc.find(f => f.hour === hour);

            find
                ? (find.value += value)
                : acc.push({
                    hour: hour,
                    value: value,
                });

            return acc
        };

        this.chartResult = _.orderBy(data.reduce(flatten, []), ['hour'], ['asc']);

        console.log('Chart : ' + JSON.stringify(this.chartResult));
    }
}

============

json result:
[ { hour: 12, value: 900 },
  { hour: 9, value: 42 },
  { hour: 8, value: 1088 },
  { hour: 7, value: 1198 } ]

 

I did import correctly in app.module.ts:

import {NativeScriptUIChartModule} from "nativescript-pro-ui/chart/angular";

imports: [NativeScriptModule, NativeScriptUIChartModule]

[Nick Iliev]

Hello Gustavo,

Thank you for contacting us and for your interest in NativeScript!\
I have reviewed your code base and based on the provided snippet tried to reproduce the issue with this test project.
However, both CLI and Webpack builds working as expected on my side.

One possible reason for your project no to work as expected after bundling with Webpack might be because of the
lodash library import in your Angular based project. Make sure that the lodash typings are installed as suggested here

Notice that in the test project I have updated all dependencies to use the latest 3.4.0 version of CLI
and the latest versions of nativescript-angular and nativeiscript-dev-webpack.
Instructions on how to migrate your project to 3.4.x can be found in this blog post.
After bundling with the command below everything works as expected and the chart is rendered on both iOS and Android devices.

tns run android --bundle --env.uglify --env.snapshot --env.aot

// or on iOS

tns run ios--bundle --env.uglify  --env.aot

I hope the information above and migrating the application to 3.4.x will help you resolve the issue.
If you are still experiencing problem with Webpack and 3.4.x, please do let me know and  provide a sample project that can demonstrate and reproduce the issue,

Regards,
Nikolay Iliev
Progress Telerik

[Gustavo]

Hello Nikolay,

Yes, I had already installed the lodash according to this post that you passed me.

I will update the dependencies of the project to see if it will work.

[Gustavo]

Nikolay, I'm sending you the package.json of the main app I'm working on.
These are the dependencies that are installed and I can not make the chart work in the app. Is it some dependency incompatibility ?

{
  "description": "App principal",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "App principal",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "app.principaç",
    "tns-ios": {
      "version": "3.3.0"
    },
    "tns-android": {
      "version": "3.3.0"
    }
  },
  "scripts": {
    "tslint": "tslint -c tslint.json 'app/**/**.ts'",
    "compodoc": "compodoc",
    "docs": "npm run compodoc -- -p tsconfig.json -d ./docs/ --theme postmark",
    "serve-docs": "npm run compodoc -- -s -d ./docs/",
    "precommit": "lint-staged",
    "sass": "node-sass app --output app --importer node_modules/nativescript-dev-sass/lib/importer.js ",
    "ns-bundle": "node --max-old-space-size=8192 ./node_modules/.bin/ns-bundle",
    "webpack": "node --max-old-space-size=8192 ./node_modules/.bin/webpack --config=webpack.config.js --progress --env.ios",
    "publish-ios-bundle": "npm run ns-bundle --ios --publish-app",
    "generate-android-snapshot": "generate-android-snapshot --targetArchs arm,arm64,ia32 --install",
    "e2e": "tsc -p e2e && mocha --opts ./e2e/config/mocha.opts",
    "compile-tests": "tsc -p e2e --watch",
    "start-android-bundle": "npm run ns-bundle --android --run-app",
    "start-ios-bundle": "npm run ns-bundle --ios --run-app",
    "build-android-bundle": "npm run ns-bundle --android --build-app",
    "build-ios-bundle": "npm run ns-bundle --ios --build-app"
  },
  "lint-staged": {
    "*.ts": [
      "prettier --single-quote --parser typescript --write 'app/**/*.ts' --tab-width 4",
      "git add"
    ]
  },
  "dependencies": {
    "@angular/animations": "4.4.6",
    "@angular/common": "4.4.6",
    "@angular/compiler": "4.4.6",
    "@angular/core": "4.4.6",
    "@angular/forms": "4.4.6",
    "@angular/http": "4.4.6",
    "@angular/platform-browser": "4.4.6",
    "@angular/platform-browser-dynamic": "4.4.6",
    "@angular/router": "4.4.6",
    "@ces-sec/client": "^0.38.0",
    "@ces-sec/core": "^0.38.0",
    "@ces-sec/jose": "^0.38.0",
    "@ces-sec/jose-nativescript": "^0.38.0",
    "@ces-sec/models": "^0.38.0",
    "@ngrx/effects": "^4.1.0",
    "@ngrx/router-store": "^4.1.0",
    "@ngrx/store": "^4.1.0",
    "@ngrx/store-devtools": "^4.0.0",
    "date-fns": "^1.29.0",
    "hoek": "4.1.99",
    "nativescript-angular": "4.4.1",
    "nativescript-animated-circle": "^1.1.0",
    "nativescript-appavailability": "^1.3.1",
    "nativescript-auto-fit-text": "^1.0.0",
    "nativescript-calendar": "^1.2.2",
    "nativescript-cardview": "^2.0.3",
    "nativescript-carousel": "3.1.1",
    "nativescript-crypto": "0.9.37",
    "nativescript-feedback": "^1.1.0",
    "nativescript-fonticon": "^1.1.1",
    "nativescript-health-data": "^0.1.5",
    "nativescript-hook-debug-production": "^1.0.4",
    "nativescript-iqkeyboardmanager": "^1.0.1",
    "nativescript-linearprogressbar": "^1.0.3",
    "nativescript-loading-indicator": "^2.4.0",
    "nativescript-pager": "5.0.10",
    "nativescript-pro-ui": "^3.2.0",
    "nativescript-sentry": "^1.5.0",
    "nativescript-theme-core": "~1.0.3",
    "nativescript-timedatepicker": "^1.2.1",
    "nativescript-unit-test-runner": "^0.3.4",
    "nativescript-vibrate": "^2.0.1",
    "nativescript-webview-interface": "^1.4.2",
    "pure-uuid": "^1.4.8",
    "reflect-metadata": "~0.1.10",
    "rxjs": "~5.5.2",
    "tns-core-modules": "^3.3.0",
    "zone.js": "~0.8.18"
  },
  "devDependencies": {
    "@angular/compiler-cli": "4.4.6",
    "@ngtools/webpack": "~1.7.4",
    "@types/chai": "^4.0.5",
    "@types/fhir": "^1.0.30",
    "@types/jasmine": "2.6.2",
    "@types/mocha": "^2.2.41",
    "@types/node": "^8.0.53",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "chai": "~4.1.1",
    "chai-as-promised": "~7.1.1",
    "codelyzer": "^3.2.2",
    "compodoc": "0.0.41",
    "copy-webpack-plugin": "~4.2.1",
    "extract-text-webpack-plugin": "~3.0.2",
    "jasmine-core": "^2.8.0",
    "karma": "^1.7.1",
    "karma-coverage-istanbul-reporter": "^1.3.0",
    "karma-jasmine": "^1.1.0",
    "karma-nativescript-launcher": "^0.4.0",
    "lazy": "1.0.11",
    "lint-staged": "^4.3.0",
    "mocha": "~4.0.1",
    "mocha-junit-reporter": "^1.15.0",
    "mocha-multi": "^0.11.1",
    "nativescript-css-loader": "~0.26.0",
    "nativescript-dev-appium": "^3.0.0",
    "nativescript-dev-sass": "^1.3.5",
    "nativescript-dev-typescript": "~0.5.1",
    "nativescript-dev-webpack": "^0.8.0",
    "nativescript-worker-loader": "~0.8.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.1.1",
    "tslib": "^1.8.0",
    "tslint": "^5.8.0",
    "tslint-config-prettier": "^1.6.0",
    "tslint-eslint-rules": "^4.1.1",
    "typescript": "~2.5.3",
    "webpack": "~3.8.1",
    "webpack-bundle-analyzer": "^2.8.2",
    "webpack-sources": "~1.0.1"
  }
}


And exactly this chart I want to put in the main app but it does not show up.

[Nick Iliev]

Hi Gustavo,

In the provided package.json file there were some dependencies pointing to non-published NPM versions which prevent us from testing with your original versioning. Removing some of the non-existent versions provided a build that was failing to be built with Webpack due to some versions.mismatch.

I have noticed that the version of nativescript-pro-ui is referred with a caret (^) and specifically ^3.2.0.
When using versioning with a caret NPM will install the latest minor version meaning that in your case you will receive version 3.3.0 of nativescript-pro-ui (here for more details) This would require updateing the whole project to versions 3.4.0 of NativeScript and applying the latest versions of nativescript-angular and nativescript-dev-webpack. Updating the content of webpack.config.js and app.css is also a must for migrating to latest versions.

Full migration guide on how to update the project a be found in this blog post. You can also use the test project as a reference for the required versions of your dependencies and devDependencies in the package.json file.

Regards,
Nikolay Iliev
Progress Telerik

[Gustavo]

I was able to resolve the issue, it had nothing to do with webpack or nativescrip-pro-ui version.

I called the import {NativeScriptUIChartModule} from 'nativescript-pro-ui / chart / angular' in app.modules.ts and so the graph component did not fill that flame.

I placed the NativeScriptUIChartModule call on the own component and the graph worked.

Thanks for the help Nikolay.

[Nick Iliev]

Hi Gustavo,

Glad to hear that you managed to resolve the issue!
As a side note: If the application is using lazy loading each control from the pro UI plugin should be imported into the respective lazily loaded module.

Regards,
Nikolay Iliev
Progress Telerik