CODEWITHSUNDEEP
reactjsfusionchartswebdatarocks
Christina Michailidou
Christina Michailidou

Reputation: 1

Capture pivot table updates in react-webdatarocks

I am trying to integrate webdatarocks in my react project. I have followed the tutorial provided in the official documentation. Up to now, I am able to load the report I want and show the pivot table to my react component. What I cannot achieve is to capture the changes that a user makes on the table. I am trying to use the getData() function but I get an error.

import React from "react";

import * as WebDataRocksReact from "@webdatarocks/react-webdatarocks";
//import "webdatarocks/webdatarocks.highcharts";

export class App extends React.Component {
  myRef = null;

  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  jsonData = [
    { Country: "United States", Population: 331002651 },
    { Country: "China", Population: 1444216107 },
    { Country: "India", Population: 1380004385 },
    { Country: "Indonesia", Population: 273523615 },
    { Country: "Pakistan", Population: 220892340 },
    { Country: "Brazil", Population: 212559417 },
    { Country: "Nigeria", Population: 206139589 },
    { Country: "Bangladesh", Population: 164689383 },
    { Country: "Russia", Population: 145934462 },
    { Country: "Mexico", Population: 128932753 },
    { Country: "Japan", Population: 126476461 },
    { Country: "Ethiopia", Population: 114963588 },
    { Country: "Philippines", Population: 109581078 },
    { Country: "Egypt", Population: 102334404 },
    { Country: "Vietnam", Population: 97338579 },
  ];

  myCustomReport = {
    dataSource: { data: this.jsonData },
    slice: {
      rows: [
        {
          uniqueName: "Country", // Field containing country names
        },
      ],
      columns: [
        {
          uniqueName: "Measures", // Placeholder for measures (e.g., population)
        },
      ],
      measures: [
        {
          uniqueName: "Population", // Field containing population data
          aggregation: "sum", // You can change the aggregation type as needed
        },
      ],
    },
  };

  reportComplete = () => {
    console.log(">>>>>", this.myRef.webdatarocks.getData());
    console.log(">>>>>", this.myRef.webdatarocks.getReport().dataSource);
  };

  render() {
    return (
      <div>
        <WebDataRocksReact.Pivot
          ref={(elem) => {
            this.myRef = elem;
          }}
          toolbar={true}
          report={this.myCustomReport}
          // reportcomplete={() => {
          //   this.reportComplete();
          // }}
          reportchange={() => {
            this.reportComplete();
          }}
        />
      </div>
    );
  }
}

export default App;

The error I get.

index.js:1 Uncaught TypeError: s is not a function
    at s.getData (index.js:1:1)
    at e.getData (index.js:1:1)
    at e.getData (index.js:1:1)
    at App.reportComplete (App.js:55:1)
    at reportchange (App.js:72:1)
    at index.js:1:1

Upvotes: 0

Views: 224

Answers (1)

Maxym Diachenko
Maxym Diachenko

Reputation: 21

This error occurs due to the getData API call being used incorrectly. The following parameters should be passed into this method:

  • options - the slice of data for pre-processing; if not defined, current pivot table data is sent
  • callbackHandler andupdateHandler - functions triggered when the data is first loaded and updated respectively, both accept one parameter - rawData (non-aggregated data for sending to the chart).

Here is a code snippet that prints the data after each update:

this.myRef.webdatarocks.getData({}, (data) => {console.log(data)}, (data) => {console.log(data)}));

Upvotes: 0

Related Questions