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

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

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

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

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

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

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/js/pivot-table/ (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

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

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

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

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

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

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

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/fm-pivot-directive-for-angular.

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

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