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

32 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 September 16, 2021

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 September 16, 2021

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 September 16, 2021

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 September 17, 2021

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 September 20, 2021

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

Public
nithinbabu September 20, 2021

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 September 21, 2021

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 September 21, 2021

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 September 22, 2021

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

Public
nithinbabu September 22, 2021

Hi Vera,
I will implement and let You know about the output, and also share you the stackblitz.

Thanks for your valuable feedback.

Give me some time to respond on it as the backend logic they are changing.

Thanks again.

Public
nithinbabu October 7, 2021

@vera

Attaching the stackblitz the current JSON what i have added is not responding kindly help to render
 
https://stackblitz.com/edit/angular-ivy-93fu57?file=src%2Fapp%2Fapp.component.ts
the below is the response not rendering throughing lot of error
 
Kindly help very urgent
data:[{
{
“product”: “ACILIAN”,
“semifinished”: “”,
“date”: “2021-09-29”,
“value”: 1111,
“type”: “FG”,
“violationcode”: “red”
},
{
“product”: “ACILIAN”,
“semifinished”: “DEA”,
“date”: “2021-09-28”,
“value”: 33333,
“type”: “SFG”,
“violationcode”: “yellow”
},
{
“product”: “ACILIAN”,
“semifinished”: “DEN”,
“date”: “2021-09-30”,
“value”: 4444,
“type”: “SFG”,
“violationcode”: “red”
},
{
“product”: “PQS “,
“semifinished”: “”,
“date”: “2021-09-30”,
“value”: 55555,
“type”: “FG”,
“violationcode”: “yellow”
},
{
“product”: “PQS “,
“semifinished”: “JÓDMESAC”,
“date”: “2021-09-29”,
“value”: 4444,
“type”: “SFG”,
“violationcode”: “white”
},
{
“product”: “PQS “,
“semifinished”: “VE”,
“date”: “2021-09-28”,
“value”: 66666,
“type”: “SFG”,
“violationcode”: “yellow”
}
 
}]
 
 

Public
Vera Didenko Vera Didenko Flexmonster October 7, 2021

Hello,
 
Thank you for reaching out to us.
 
We have updated the StackBlitz sample so that Flexmonster renders the provided data: https://stackblitz.com/edit/angular-ivy-tasyen?file=src/app/app.component.ts.
To avoid compilation errors, we highly recommend integrating Flexmonster with Angular according to our guide: https://www.flexmonster.com/doc/integration-with-angular/#!integration.
 
We hope this helps. Please let us know if the updated StackBlitz sample works on your end.
 
Kind regards,
Vera

Public
nithinbabu October 7, 2021

Hi @Vera,

I have one doubt actually If I look at the JSON the line number 112,
violationcode: ‘red’, but the value always generating yellow where the
violationcode: ‘red’, – the cells value should be red in color – and one more doubt i have  the value line number  – 126 (value: 4444,) – but the value reflecting 4 444KG i dont want space

 
I am attaching a screen shot the reflected stackblitz should look in this format,
 
sorry I am getting confused on the Flexmonster – Kindly appologize

 

Attachments:
wip - screen.JPG

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster October 8, 2021

Hello,
 
Please note that the displayed color is defined in conditional formatting and only depends on the cell’s numeric value. It does not consider the “violationcode” column on your data set. Instead, it applies the defined set of rules:

{
formula: '#value < 5000', //condition
format: {
backgroundColor: '#ff0000', //color to apply
color: '#fff'
},
},
{
formula: '#value > 5000', //condition
format: {
backgroundColor: '#fbd300' //color to apply
}
}

 
Concerning the number formatting, please add the following rule to remove space after thousands: thousandsSeparator: "". It is demonstrated in the StackBlitz example provided earlier: https://stackblitz.com/edit/angular-ivy-tasyen?file=src/app/app.component.ts.
 
We hope it helps.

Regards,
Illia

Public
nithinbabu October 8, 2021

@Vera,

I have one doubt, Please do help

https://stackblitz.com/edit/angular-ivy-tasyen?file=src%2Fapp%2Fapp.component.ts

 measures: [
        
        {
          uniqueName: ‘semi’,
             
        },

have two value since Acilian have different value, and the same accilian value not reflect semifinshed how to do it since inside measure uniquename:value not accepting

attaching a screenshot it should be something in this format

Attachments:
data-WIP screen.png

Public
Vera Didenko Vera Didenko Flexmonster October 11, 2021

Hello,
 
Thank you for your question.
 
You can set which measures to display by configuring the slice in the report object.
The uniqueName property should be the name of the field in your data set.
Here is our slice configuration guide for more details: https://www.flexmonster.com/doc/slice/.
 
For example, if you have the following data set: 

[
{
"product": "ACILIAN",
"semifinished": "semifinished-146",
"date": "2021-09-29",
"value": 146,
"type": "FG",
"violationcode": "red"
},
{
"product": "ACILIAN",
"semifinished": "semifinished-147",
"date": "2021-09-28",
"value": 146,
"type": "SFG",
"violationcode": "yellow"
}
]

Then, to place the fields the same way as in the provided screenshot, you can define the slice the following way:

slice: {
rows: [
{ uniqueName: "product", sort: "unsorted",},
{ uniqueName: "semifinished"},
],
columns: [
{uniqueName: "date"},
],
measures: [
{uniqueName: "value"}
]
}

This approach is illustrated in the StackBlitz example: https://stackblitz.com/edit/angular-ivy-tasyen?file=src/app/app.component.ts.
 
We hope this helps.
 
Kind regards,
Vera

Public
nithinbabu October 11, 2021

Hi @Vera Didenko,
 
Actually, I am sharing the stackblitz link:
https://stackblitz.com/edit/angular-ivy-wgpesj?file=src%2Fapp%2Fplanner-service.ts
I have added the API – get request the API contains the data and that data I am not able to bind it in the HTML – JSON 
Kindly can you help on it – tried onReady() {
}
 
the point is how to use the get API – which has been created and bind it to Flexmonter, when we subscribe the request and do *ngFor in angular the data would reflect but here in Flexmonster it’s very much complicated 

Please do help planner.service.ts – file I have added the note: 43
the API is : https://dev.bodhee.io/imp/apigateway/api/imp/wip
and contains data I need to render this above API bind data to HTML and render it in the pivot table

but dint work kindly do help

Public
Vera Didenko Vera Didenko Flexmonster October 12, 2021

Hello,
 
Thank you for your reply.
 
The provided StackBlitz contains three main problems:

  1. Compilation errors: the example fails to compile due to Angular-specific errors.
  2. The API fails to fetch the data from the provided link: it seems we don’t have permission to access the data on our end. For testing purposes, we changed the link to our publically available one: https://cdn.flexmonster.com/data/data.json.
  3. The fetched data is not loaded into Flexmonster.

 
Please note that only the third point applies to Flexmonster. The rest of the issues are either specific to Angular or access permissions to the provided data endpoint. Our team provided steps and recommendations on how to fix them as well. To help our team address Flexmonster integration-related points, please post solely the Flexmonster-specific tickets.
 
Steps to fix the compilation errors:

  1. Add the following import to app.component.ts:
    import { Wipservice } from './planner-service';
  2. Class names are case-sensitive. Hence, change WipService to Wipservice in the constructor:
    constructor(private wipService: Wipservice, private route: ActivatedRoute) {}

    This should fix the "Error in src/app/app.component.ts (17:35) Cannot find name 'WipService'." compilation error. Next, let’s fix the "Error in src/app/app.component.ts (19:62) Cannot find name 'ActivatedRoute'." compilation error.

  3. Add the following import to app.component.ts:
    import { ActivatedRoute } from '@angular/router';
  4. Add the following import to app.module.ts:
    import { RouterModule } from '@angular/router';
  5. And add RouterModule.forRoot([]) to the import statements in app.module.ts:
    imports: [
    BrowserModule,
    FormsModule,
    FlexmonsterPivotModule,
    HttpClientModule,
    RouterModule.forRoot([])
    ],

    This should fix the "Error in src/app/app.component.ts (19:62) Cannot find name 'ActivatedRoute'." compilation error. Afterward, the project should compile.

 
 
Recommendations regarding the data API service:
Please make sure the data is accessible from the API endpoint on your end. For testing purposes, we changed the link to our publically available one: https://cdn.flexmonster.com/data/data.json.
 
 
How to load the fetched data into Flexmonster:
The reason why the data is not loading in Flexmonster is that you are loading the data asynchronously and Flexmonster may render on the page before the data is ready. This means Flexmonster will render without the data. Even if the data is loaded into the page later, Flexmonster won’t load the data on its own. To load the data in Flexmonster, you need to use one of Flexmonster’s API calls: setReport()connectTo(), or updateData().

For your specific use case, we suggest the following approach:

  1. Initialize Flexmonster with default initialization parameters without the data.

    First, we highly recommend integrating Flexmonster in Angular according to our integration guide: https://www.flexmonster.com/doc/integration-with-angular/#integration.  
    With this in mind, please remove the pivot declaration from inside ngOnInit:

    ngOnInit() {

    this.planversion = this.route.snapshot.queryParamMap.get('planversion');

    this.planId = this.route.snapshot.queryParamMap.get('planId');

    this.getList();

    let pivot = new Flexmonster({...}) // remove the pivot declaration

    }

    Instead, define Flexmonster in app.component.html the following way:

    <div class="container-fluid">

    <!-- Remove the pivot-container element -->

    <div id="pivot-container"></div>


    <!-- Use the fm-pivot directive instead -->

    <fm-pivot

    #pivot

    [toolbar]="true"

    [height]="550"

    [customizeCell]="customizeCell">

    </fm-pivot>

    </div>

    Learn more about the fm-pivot directive and its attributes in the following guide: https://www.flexmonster.com/doc/integration-with-angular/#fm-pivot-directive.

  2. Once the data is fetched by your service and available on the page, pass it to Flexmonster using the setReport() API call. This is where you can set the desired report configuration (see our guide on how to configure the report). For example:
    this.wipService.getWip(this.planId, this.planversion).subscribe(

    (response: any): void => {

    /* Use setReport() API call to pass the recieved data to Flexmonster along with the report configuration. */

    this.pivot.flexmonster.setReport({
    dataSource: { type: 'json', data: response },
    slice: { // your slice config },
    formats: { // your number formatting rules },
    conditions: { // your conditional formatting rules to color the cells },
    options: { // your report options }
    });

    },

    (error) => {...}

    );

    All of the mentioned steps are demonstrated in the modified version of the provided StackBlitz sample: https://stackblitz.com/edit/angular-ivy-j3epoz?file=src%2Fapp%2Fapp.component.ts.

 
 
We hope this helps to get everything working.
 
Kind regards,
Vera

Public
nithinbabu October 12, 2021

@Vera Didenko,

Thank you it worked actually, proper documentation in the site would be there to refer it would be good it was not there so that only raised question

Thank you for your valuable response.

Public
Vera Didenko Vera Didenko Flexmonster October 13, 2021

Hello,
 
Thank you for the update.
 
We are glad to hear that you found our response helpful.
Also, you are always welcome to share documentation improvement ideas, and we will pass them on to our documentation team.
 
Our team is happy to hear that everything worked.
 
Kind regards,
Vera

Please login or Register to Submit Answer