Save Report with Different Metadata but dynamic data

Question

Hi

We are currently trying to leverage Pivot Table Report functionality which is quite rich in features

But currently I facing two major problems with the current report capability in Pivot Table

Save only metadata info - When saving the report data it saves the json data as well, In our case our data is dynamic and ever changing. So when saving the report it there any way we can filter out json data while persisting Pivot Table Metadata

Dynamic make different report based on type of saved metadata of Pivot report i.e say i have created column report with column chart in it

and save that report

Now I filter the report for country Germany and create a new Pie Report with data of Germany

Now When I select Column report it should display me column report and if i select Pie Report system should automatically change the chart type from Column to Pie and display us the Pie Report i.e

On Pie selection

On column selection

Is there any API and way we can resolve the above two issues.

Thanks

AngelinFaithSheeba PaulvannanRajadurai · Answer

Hi ICS,Kindly refer to the following code example to save the
report without data source.Code Example:

saveReport(args: any) {
      let reports = [];
      let isSaved: boolean = false;
      if (localStorage.pivotviewReports && localStorage.pivotviewReports !== '') {
        reports = JSON.parse(localStorage.pivotviewReports);
      }
      if (args.report && args.reportName && args.reportName !== '') {
        reports.map(function (item: any): any {
          var report = JSON.parse(args.report);
          report.dataSourceSettings.dataSource = [];
          report.pivotValues = [];
          args.report = JSON.stringify(report);
          if (args.reportName === item.reportName) {
            item.report = args.report;
            isSaved = true;
          }
        });
        if (!isSaved) {
          reports.push(args);
        }
        localStorage.pivotviewReports = JSON.stringify(reports);
      }
    }
  loadReport(args: any) {
      let reportCollection: string[] = [];
      if (localStorage.pivotviewReports && localStorage.pivotviewReports !== '') {
        reportCollection = JSON.parse(localStorage.pivotviewReports);
      }
      reportCollection.map(function (item: any): void {
        if (args.reportName === item.reportName) {
          args.report = item.report;
        }
      });
      if (args.report) {
        var report = JSON.parse(args.report);
        report.dataSourceSettings.dataSource =
          this.pivotObj.dataSourceSettings.dataSource;
        this.pivotObj.dataSourceSettings = JSON.parse(
          args.report).dataSourceSettings;
      }
    }

Meanwhile, we have
prepared a sample for your reference. Please find it from below link.Sample: N9armp
(forked) - StackBlitzAlso, please refer the
document link for more information about “Toolbar”.Document: Toolbar
in Angular Pivot Table component - SyncfusionPlease let us know if you have any concerns.Regards, Angelin Faith Sheeba.

ICS · Answer

Thanks for the same , The response did fixed few issues ,

But additionally we also need the type of report which is saved

In the same example

https://stackblitz.com/edit/angular-n9vazn?file=app.component.ts

If I create a new report

a) with View as Table

b) Create a new report with a view as column

so from the report drop down if i select table it should change the view as table if i select column

it should change the view to chart of type column, But currently this is not working in the sample example nor at my end after trying your suggestions

AngelinFaithSheeba PaulvannanRajadurai · Answer

Hi ICS, 
  
Using the "loadReport" event, you can maintain the report view while switching between table and chart reports. Please see the code example below. 
  
Code Example: 
  




  
loadReport(args: any) { 
        let reportCollection: string[] = []; 
        if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") { 
            reportCollection = JSON.parse(localStorage.pivotviewReports); 
        } 
        reportCollection.map(function (item: any): void { 
            if (args.reportName === item.reportName) { 
                args.report = item.report; 
            } 
        }); 
        if (args.report) { 
            var report = JSON.parse(args.report); 
            this.pivotObj.setProperties({ dataSourceSettings: report.dataSourceSettings, chartSettings: report.chartSettings }, true); 
            this.pivotObj.currentView = 
              report.displayOption.primary === 'Chart' ? 'Chart' : 'Table'; 
              this.pivotObj.refreshData(); 
        } 
    } 
  
  
Meanwhile, we have prepared a sample for your reference. Please find it from below link. 
Sample: https://stackblitz.com/edit/angular-fqgn8f?file=app.component.ts 
  
Also, please refer the following documentation for more details about “loadReport” event. 
Document: Toolbar in Angular Pivot Table component - Syncfusion 
  
Please let us know if you have any concerns. 
  
Regards, 
Angelin Faith Sheeba.