Get Free Trial

pivot' is declared but its value is never read.ts

Answered
nithinbabu asked on September 9, 2021

ngOnInit(){
    var pivot = new Flexmonster({
      container: “pivot-container”,
      componentFolder: “https://cdn.flexmonster.com/”,
      toolbar: true,
      beforetoolbarcreated: customizeToolbar
    });

 
 
note : I am getting this error pivot’ is declared but its value is never read.ts in angular 
what can be done
 

Attachments:
pivot error.PNG

21 answers

Public
Vera Didenko Vera Didenko Flexmonster September 9, 2021

Hello,
 
Thank you for writing to us.
 
A possible solution is to initialize Flexmonster without assigning it to a variable. For example:

ngOnInit(){
    new Flexmonster({
      container: "pivot-container",
      componentFolder: "https://cdn.flexmonster.com/",
      toolbar: true,
      beforetoolbarcreated: customizeToolbar
    });
}

This will prevent the "'pivot' is declared but its value is never read" warning from appearing.
 
Alternatively, you could use Flexmonster the same way as in our sample Angular project on GitHub (see example).

Please let us know if this helps.
 
Kind regards,
Vera

Public
nithinbabu September 9, 2021

Hi Vera,
 
Thanks for writing the answer i removed it and the declaration not throws error,
but I am getting another error.
They console shows no error but why this error comes. any changes on Flex monster end
attaching the screenshot.

Public
nithinbabu September 9, 2021

Hi Vera,
 
Thanks for writing the answer i removed it and the declaration not throws error,
but I am getting another error.
They console shows no error but why this error comes. any changes on Flex monster end
attaching the screenshot.

Public
nithinbabu September 9, 2021

Hi Vera,
 
Thanks for writing the answer i removed it and the declaration not throws error,
but I am getting another error.
They console shows no error but why this error comes. any changes on Flex monster end
attaching the screenshot.

Attachments:
pivot table error.PNG

Public
Vera Didenko Vera Didenko Flexmonster September 10, 2021

Hello, 
 
Thank you for your reply.
 
According to the screenshot, it seems Flexmonster’s CSS styles were not loaded.
We highly recommend integrating Flexmonster with Angular according to our integration guide: https://www.flexmonster.com/doc/integration-with-angular/#!integration.
Step 4 of the integration guide shows how to import Flexmonster’s style sheet.
 
Please let us know if this helps.
 
Kind regards,
Vera

Public
nithinbabu September 13, 2021

Hi Veera,
 
Can i override the CSS styles in which my component is there example
attaching the screenshot

Attachments:
pivot table error.PNG

Public
Vera Didenko Vera Didenko Flexmonster September 13, 2021

Hello,
 
Thank you for your question.
 
Please see our sample Angular project on GitHub for reference. 
In the example, Flexmonster styles are imported in styles.css the following way (link to source code):

@import "flexmonster/flexmonster.min.css";

The styles.css file is referenced in angular.json (see source code)
As a result, Angular will load the styles defined in styles.css, including Flexmonster styles.
 
 
If you are looking for a way to override Flexmonster’s default styles with your custom ones, this can be achieved by creating your own custom Flexmonster theme. For more details, please see the following tutorial: https://www.flexmonster.com/doc/customizing-appearance/.

Once you create your own Flexmonster theme, you can apply it in your Angular application in the same way: just replace @import "flexmonster/flexmonster.min.css"; with the path to your Flexmonster theme. For instance:

@import "PATH_TO_YOUR_THEME/flexmonster.min.css";

 
 
Please let us know if this helps.
 
Kind regards,
Vera

Public
nithinbabu September 13, 2021

Hi Veera,
 
How can i changes the names of the Column in angular Flexmonster ex: screenshot attached,
Please help.
 
total sum of price – change to Accilan
and add column names below it – how to do
Accilian – Heading
SemiFinished146, – sub heading
SemiFinished132 – sub heading
  THTP – Heading
How to do it in angular any example would be good

Attachments:
uniquenames.PNG

Public
Vera Didenko Vera Didenko Flexmonster September 14, 2021

Hello,
 
Thank you for reaching out to us.
 
We have prepared a JSFiddle showing how you can achieve the desired representation: https://jsfiddle.net/flexmonster/yskz52cb/.
 
The same report object will work for Angular as well. Here is an example of how to set a report configuration in Angular:
In app-component.html:

<div>

<fm-pivot #pivot
    [toolbar]="true"
[report]="report">
</fm-pivot>

</div>

In app-component.ts:

import { Component, OnInit, ViewChild } from '@angular/core';

import { FlexmonsterPivot } from 'ng-flexmonster';


@Component({

selector:'app-component',

templateUrl:'./app-component.html',

styleUrls: ['./app-component.css']

})


export class AppComponent implements OnInit {


@ViewChild('pivot') pivot!: FlexmonsterPivot;


public report: Object = {

dataSource: {...},

slice: {...}

};


constructor() { }


ngOnInit(): void {}

}

 
 
Please let us know if this helps.
 
Kind regards,
Vera

Public
nithinbabu September 14, 2021

Hi Vera,
Thanks for the Help
I have one doubt actually the RAD58, should come where the THTP there vise versa, is there any method in calling it,
Any method also there to convert value to Kilogram so the value would be 2177 Kg,
 

Public
Vera Didenko Vera Didenko Flexmonster September 14, 2021

Hello,
 
Thank you for your response. 
 

  1. About switching “RAD58” and “THTP” places: 

    By default, members of a field are sorted in ascending order. A possible solution is to set the sorting rule to "unsorted" in the slice (see guide). For example:
    "report": {
    "dataSource": {...},
    "slice": {
    "rows": [
    {
    "uniqueName": "Status",
    "sort": "unsorted"
    },
    ...
    ],
    "columns": [...],
    "measures": [...]
    }
    }

    Please let us know if this works for your use case.

  2. Regarding adding “Kg” to the values:

    It is possible to format values through number formatting.
    Here is a detailed tutorial for guidance: https://www.flexmonster.com/doc/number-formatting/.

You are welcome to check out the updated JSFidde example: https://jsfiddle.net/flexmonster/4q6hz03w/.

Please let us know if this helps.
 
Kind regards,
Vera

Public
nithinbabu September 14, 2021

Hi Vera,
Thanks for your valuable response, it worked fine like wise any doubt I would get back please help.

Public
nithinbabu 6 days ago

Hi Vera,
I have a doubt how can I add an icon to the semifinished text  and icon, tried to add favicon but dint happen.
https://jsfiddle.net/flexmonster/4q6hz03w/
 

Attachments:
text - icon.PNG

Public
Vera Didenko Vera Didenko Flexmonster 6 days ago

Hello,
 
Thank you for your question.
 
You can add an icon to the semifinished text (the header cells) via the customizeCell() API call.

With this method, you can get the details about each grid cell: its type, which field it belongs to, its content, etc. Using these details, you can then customize the desired cells by adding your own icon. For example, this approach is used on our demo to add flag icons to the "Country" header cells: https://www.flexmonster.com/demos/pivot-table-js/ (see JSFiddle).
Please see the following guide for further details on how to customize the grid: https://www.flexmonster.com/doc/customizing-grid/.
 
Also, here is an example of how to use customizeCell in Angular:
In app-component.html:

<div>
<fm-pivot #pivot
[toolbar]="true"
[height]="600"
[customizeCell]="customizeCellFunction">
</fm-pivot>
</div>

In app-comonent.ts:

import { Component, OnInit, ViewChild } from '@angular/core';
import { FlexmonsterPivot } from 'ng-flexmonster';

@Component({
selector: 'app-component',
templateUrl: './app-component.html',
styleUrls: ['./app-component.css']
})

export class AppComponent implements OnInit {

@ViewChild('pivot') pivot!: FlexmonsterPivot;

public report: Object = {...};

constructor() { }

ngOnInit(): void {}

customizeCellFunction(cell: Flexmonster.CellBuilder, data: Flexmonster.CellData) {
// Add your cell customization logic here
}
}

 
 
Please let us know if this helps.
 
Kind regards,
Vera

Public
nithinbabu 6 days ago

Hi Vera,
I am hereby sharing the jsbin link actually, I have added the fonawesome and the icon things are not displaying in the customizecell i have added the key and rows which icon needed to be, since the console no errors but the icon is not displaying
 
https://jsfiddle.net/65wzkpbL/2/
 
Pleas help on it.

Public
Vera Didenko Vera Didenko Flexmonster 5 days ago

Hello,
 
Thank you for your response.
 
It seems the fontawesome fonts are being overridden by other fonts on the page. You can fix this by adding the following CSS:

.fa {
font-family: 'FontAwesome' !important;
}

 
We have modified the provided JSFiddle so that the icons are shown: https://jsfiddle.net/flexmonster/fh65u3db/.
 
Please let us know if this helps.
 
Kind regards,
Vera

Public
nithinbabu 2 days ago

Hi Vera,
Thanks it worked, thanks for the help.

Public
nithinbabu 2 days ago

Hi vera,
I am having one issue I have created the stackblitz, and also sharing the link across i have a couple of issue how to integrate the api in Flexmonster, currently the JSON is in app.component.ts as data but how no to hardcode the JSON take it from the API – comming from the server.
Crearting the service 
 

 getProductionPlan(planVersion: string) {
        const options: {
            headers?: HttpHeaders | {
                [header: string]: string | string[] ;
            };
             
            = {
            headers: {
                “plan”: planVersion
            }
        }

        return this.httpClient.get(window[“env”][“apiUrl”] + ‘/imp/productionDetails’, options);

Note: but from here i need to take it app.component.ts file and initialize in the constructor and call the api,
but the link can you look it across and help me integrate with dummy api, so i get understanding
like dummy api – with the Flexmonster monster ‘pivot’ – data is available JSON comming from the server not hardcoded onto the app.component.ts – file
trying from two – days. please help
https://stackblitz.com/edit/angular-ivy-wvxfpc?file=src%2Fapp%2Fapp.component.ts

Public
Vera Didenko Vera Didenko Flexmonster 23 hours ago

Hello,
 
Thank you for reaching out to us.
 
For CSV/JSON data sources, Flexmonster provides the filename property to load data from the server. Please note that the filename property should be the URL to your server API returning the data. For example:

dataSource: { 
   type: "json", 
   filename: "URL_to_your_server_API_returning_JSON_or_CSV_data" 
} 

Here is a JSFiddle example for illustration: https://jsfiddle.net/flexmonster/rkprvhhs/. In the example, the data is fetched from the server by providing the server API endpoint URL in the filename property. 

Also, please make sure cross-origin resource sharing (CORS) is enabled. See the following guide for more details: https://www.flexmonster.com/doc/connecting-to-other-data-sources/#!server-side-script.
 
Please let us know if this helps.
 
Kind regards,
Vera

Public
nithinbabu 21 hours ago

Hi Vera,
I have created an Angular demo – for the api integration below is the link actually if you look into the planner-service.ts file I have created a get request line number – 36.
 

That is the api I am including where the JSON data, coming from the backend in the format of Flexmonster JSON format.
 

And after that I am including in the app.component.ts file the line number 19 – getList
and after that I am invoking the same getList inside the dataSource{line number : 49},

what my question is still I am not able to get the data, can you look into it and render the data,
 

or use some example: get api and render in same my stackblitz ts file format so I get an idea.
link below:
https://stackblitz.com/edit/angular-ivy-c6gobs?file=src/app/app.component.ts

Public
Vera Didenko Vera Didenko Flexmonster 2 mins ago

Hello,
 
Thank you for providing a code sample.
 
The reason why the data is not loading in Flexmonster is that Flexmonster may render on the page before the data is ready. When loading data asynchronously, we suggest the following approach:
 

  1. Initialize Flexmonster with default initialization parameters.
  2. Once the data is ready, pass it to Flexmonster along with the desired report configuration using the setReport() API call (see docs).

 
Here is a modified version of the code sample for reference: https://stackblitz.com/edit/angular-ivy-1bbbjm?file=src/app/app.component.ts.
In the example, we load the data with the Angular HTTP client from one of our publically available data endpoints (see line 39 in src/app/planner-service.ts and lines 34-50 in src/app/app.component.ts). In addition, we added the HttpClientModule in app.module.ts (see line 15).
 
Please let us know if this helps to get everything working.
 
Kind regards,
Vera

Please login or Register to Submit Answer