Super naive approach - I basically switched componentWillMount to componentDidMount and componentWillUpdate to componentDidUpdate. componentDidUpdate receives prevProps instead of nextProps, so I also changed this.materializeInput(nextProps.data) to this.materializeInput(this.props.data).

npm run test:jest passes, but npm run test fails at the prettier stage.

FWIW there's still a componentWillMount and a componentWillUpdate in examples/App.jsx but I didn't want to muck with that...

Hi,

I'm fetching an array consisting of around 5,000 objects. As soon as I drag in a second field the entire table freezes and the page continues to hang indefinitely. Is there any way for me to handle this volume of data in pivottable?

I've tried the following by slicing the array

• 1,000 rows, snappy
• 2,000 rows, slight delay
• 3,000 rows, increased delay
• 4,000 rows, major delay
• 5,000 rows, complete freeze

I've also tried only pulling 3 properties off of each object, reducing the array. This unfortunately had no effect.

Hi,

Awesome work!

Recently in my project, I found that pivot filter box will be out of view port. Line 214, inn the file PivotTableUI.js, I saw the position is the absolute distance. However, seems that react-draggable is using relative distance from parent dom (Not sure, though)

Hey Plotly folks! This is an amazing project, thank you so much for releasing it!

I'm curious about your plans for this repo - as of today, February 10, it's been 8 months since the last commit (c9b6ab66786cf0e6ccf382fb2576d8e1c1434e4d Create FUNDING.yml) and over 15 months since the last substantive commit (e708ab45a53496c138dc646163ae9e10647a3155 on Nov 3, 2018).

In its current state, react-pivottable generates componentWillMount and componentWillUpdate warnings when used with current (16.x) React, and will probably not work with React 17.x when that drops.

There are three open dependabot PRs that are 4 months old at this point, which makes me wonder if the project owner is looking at the project.

I guess what I'm asking is: is this project abandoned? What can we do to support it? If I invest time in PRs to address the React warnings, are there folks at Plotly who will review them?

Thanks again - I do not take any of the work in this repo for granted, and really do appreciate what you have built. I would love to see it flourish.

Hi There,

First off, thanks for making and open-sourcing this library; it is proving very useful.

I wanted to propose a tiny code change to 2 lines in the instantiation of the plotly renderers in PlotlyRenderes.jsx. Specifically, I'm wondering if the layout options passed into the two stacked bar charts could specify { barmode: 'relative' } instead of { barmode: 'stack' }.

There may be reasons not to do it, which I'm not aware of, because I'm far from intimately familiar with plotly.js. However, the reason pro doing it is that currently, with { barmode: 'stack' }, if there are any negative values in the data, their bars end up overlapping and covering up other bars instead of sticking out on the negative side of the chart. In other words, as far as I can tell, when there are negative values, 'stack' mode results in a bug while 'relative' mode does what you'd expect. And I don't think there's a case where the opposite is true.

The only discussion I've found about this so far is this forum post in which someone points out this issue and Etienne addresses by creating the new { barmode: 'relative' }. However, no explanation is given as to why a new mode was needed instead of modifying the 'stack' mode.

Thanks for your consideration.

https://user-images.githubusercontent.com/6526498/176625436-4b45ccd1-6a76-4efb-a1d7-00e30c344ade.mov

We are willing to send a PR to fix this, as we are heavy users of this library at IMC. It's likely a bug with an older version of react-sortablejs or react-draggable.

Would anyone be able to review it? Haven't seen anyone responding to issues lately.

Hi,

I would like to use custom color scales in Table Heatmap, just like the Montreal Weather 2014 Dataset example for pivottable.js. How do I do this in react-pivottable?

i want to make some defaults as preset.

so user can click a link and check this view directly without dragging by themself.

like this

https://jsfiddle.net/nicolaskruchten/kn381h7s/

This PR introduces an additional key on aggregators, outlet, a function which, if present, gets called once by PivotTableUI to render additional aggregator-specific content just below the built-in aggregator selector (in the area outlined in red here):

Some use cases for providing this escape hatch include:

• rendering aggregator-specific custom UI controls
• rendering aggregate stats that you want visible regardless of the state of the pivottable attributes

When the outlet function is called, it will be passed the PivotTableUI's props.data, in case the called aggregator wants to make use of that data.

Here's a kind of silly example of a custom aggregator using this new function:

  function customCount(formatter) {
    return () => 
      function() {
        return {
          count: 0,
          push() {
            this.count++;
          },
          value() {
            return this.count;
          },
          format: formatter,
          outlet: (records) => {
            return (
              <div>There are ${records.length} records total</div>
            );
          },
        };
      };
    };
  },

Resolves #117

HI,

Steps to reproduce

Here is my npm install command npm install --save react-pivottable react-plotly.js react react-dom

Here is my App.js file

import React, { Component } from 'react';
import tips from './tips';
import PivotTable from 'react-pivottable/PivotTable';
import 'react-pivottable/pivottable.css';
import TableRenderers from 'react-pivottable/TableRenderers';
import createPlotlyComponent from 'react-plotly.js/factory';
import createPlotlyRenderers from 'react-pivottable/PlotlyRenderers';
import AWS from 'aws-sdk';
// create Plotly React component via dependency injection
const Plot = createPlotlyComponent(window.Plotly);

// create Plotly renderers via dependency injection
const PlotlyRenderers = createPlotlyRenderers(Plot);

class App extends Component {
  state = {
    filename: 'Sample Dataset: Tips',
    pivotState: {
      data:  [["Name", "CreationDate"]],
      rows: ['Name'],
      cols: ['Humanize'],
      aggregatorName: 'Count',
      rendererName: 'Grouped Column Chart',
  plotlyOptions: {width: 500, height: 500}
  }
  };

 handleClick = () => {
                this.setState(
                  {
                    filename: 'Sample Dataset: Tips',
                    pivotState: {
                      data: tips,
                      rows: ['Payer Gender'],
                      cols: ['Party Size'],
                      aggregatorName: 'Count',
                      rendererName: 'Grouped Column Chart',
                  plotlyOptions: {width: 600, height: 500}
                  }
                  });
        }
render() {
    //console.log(this.state)
  return (
    <div styles="width=50px">
      <PivotTable
               //  data={this.state.pullResults.body || []}
                onChange={s => this.setState({pivotState: s})}
                renderers={Object.assign({}, TableRenderers, PlotlyRenderers)}
                {...this.state.pivotState}
            />
            
      <button onClick={this.handleClick}>Get results</button>
    </div>

  );
  }
}


export default App;

My tips component is like this

export default [
    ["Total Bill","Tip","Payer Gender","Payer Smoker","Day of Week","Meal","Party Size"],
    [16.99,1.01,"Female","Non-Smoker","Sunday","Dinner",2],
    [10.34,1.66,"Male","Non-Smoker","Sunday","Dinner",3],
    [21.01,3.5,"Male","Non-Smoker","Sunday","Dinner",3] ];

When rendering i am getting error like this

Error while plotting: TypeError: Cannot read property 'newPlot' of undefined

But when i installed plotly.js and used the import stmts that presented in documentation and modified as above it worked correctly but not working fine without plotly.js

Am i missing anything ?

Any help is appreciated

Thanks

I'd like to fix this issue where the pivot table seems to be overflowing on the right of the app layout (using React Bootstrap and react 15.6.2). It seems the size of the component depends on the graph rendering. Is there a way to constraints this react component a bit more like scaling the graph rendering?

Thanks for your amazing work on this project btw. I really appreciate that.

Is it possible to add other types of charts to the dropdown list? I need to add radar chart and support for the map (plotly.js relay on MapBox for the map visualization)

Is it something I can do in the configurations or I need to make changes to the source code?

I want to add link to specific column to my array. My json array is [ { "TaskID": "161114683317", "Client": "Test" }, { "TaskID": "161114683317", "Client": "Test" } ]

If I try adding a tag while creating array like this: "TaskID": "<a href='http://localhost:3000/task_details/NDM0NzY='>161114683317</a>"

it doesn't render html this print as it received from response.

This is my config for pivot const pivotPresets = { rendererName, aggregatorName, plotlyOptions: {width: 900, height: 500}, plotlyConfig: {}, rendererOptions: { } } And UI <PivotTableUI data={data} onChange={(s) => { setPivotTableUIConfig(s) setdata(s) }} unusedOrientationCutoff={Infinity} {...pivotPresets} renderers={Object.assign({}, TableRenderers, PlotlyRenderers)} {...pivotTableUIConfig} />

Please help what I am missing in this.

Hi Team,

we want to convert the table generated by Pivot Table into Json Structure and want to save that data in the server.

Can you please guide , how we can access the result/output data or convert the output data into json form .

Regards, Akash