nicolaskruchten / pivottable

Open-source Javascript Pivot Table (aka Pivot Grid, Pivot Chart, Cross-Tab) implementation with drag'n'drop.
https://pivottable.js.org/
MIT License
4.36k stars 1.08k forks source link

limit colomn or row number's feature in pivotableJs #1024

Open WaelOuni opened 6 years ago

WaelOuni commented 6 years ago

Hi Nicolas,

I loved your library, it's very cool and easy to use.. I think it will be better to give the possibility to limit the used colomn/row number in the pivot table.. I do this feature in an angular project but i have a little issue => how i can find the last row added to the config rows ?

The pivot table code :

    targetElement.pivotUI(
      this.dataJson,
      {
        aggregators: { Sum },
        rows: ["name"], cols: ["account"],
        vals: ["account"],
        aggregatorName: "Sum",
        rendererName: "Table",
        onRefresh: function () {
          var config = targetElement.data("pivotUIOptions");
          $("th:contains(account)").css("background-color", "yellow");
          let rowsArray = (config.rows as Array<any>);
          if (rowsArray.length > 3) {
            rowsArray.splice(rowsArray.length - 1, 1);
            var config_copy = JSON.parse(JSON.stringify(config));
            //delete some values which will not serialize to JSON
            delete config_copy["aggregators"];
            delete config_copy["renderers"];
            localStorage.setItem("pivotConfig", JSON.stringify(config_copy));
            _this.refresh();
          }
        }
      });

And in the refresh method i put the last state of the pivottable, somthing like this :


  refresh(): void {
    let container = this.el.nativeElement;
    let inst = jQuery(container);
    let targetElement = inst.find("#output");
    var sum = $.pivotUtilities.aggregatorTemplates.sum;
    var Sum = function () { return sum()(["account"]); }
    var _this = this;
    let options = JSON.parse(localStorage.getItem("pivotConfig"));
    options["aggregators"] = { Sum };
    options["onRefresh"] = function () {
      var config = targetElement.data("pivotUIOptions");
      $("th:contains(account)").css("background-color", "yellow");
      let rowsArray = (config.rows as Array<any>);
      if (rowsArray.length > 3) {
        rowsArray.splice(rowsArray.length - 1, 1);
        var config_copy = JSON.parse(JSON.stringify(config));
        //delete some values which will not serialize to JSON
        delete config_copy["aggregators"];
        delete config_copy["renderers"];
        localStorage.setItem("pivotConfig", JSON.stringify(config_copy));
        _this.refresh();
      }
    }
    targetElement.pivotUI(
      this.dataJson,
      options, true);
  }

You can find the source here : https://github.com/WaelOuni/pivottable-js

nicolaskruchten commented 6 years ago

I’m afraid I don’t understand what you’re asking... can you clarify please?

On Fri, Oct 12, 2018 at 06:06 Ouni Wael notifications@github.com wrote:

Hi Nicolas,

I loved your library, it's very cool and easy to use.. I think it will be better to give the possibility to limit the used colomn/row number in the pivot table.. I do this feature in an angular project but i have a little issue => how i can find the last row added to the config rows ?

The pivot table code :

targetElement.pivotUI(
  this.dataJson,
  {
    aggregators: { Sum },
    rows: ["name"], cols: ["account"],
    vals: ["account"],
    aggregatorName: "Sum",
    rendererName: "Table",
    onRefresh: function () {
      var config = targetElement.data("pivotUIOptions");
      $("th:contains(account)").css("background-color", "yellow");
      let rowsArray = (config.rows as Array<any>);
      if (rowsArray.length > 3) {
        rowsArray.splice(rowsArray.length - 1, 1);
        var config_copy = JSON.parse(JSON.stringify(config));
        //delete some values which will not serialize to JSON
        delete config_copy["aggregators"];
        delete config_copy["renderers"];
        localStorage.setItem("pivotConfig", JSON.stringify(config_copy));
        _this.refresh();
      }
    }
  });

And in the refresh method i put the last state of the pivottable, somthing like this :

refresh(): void { let container = this.el.nativeElement; let inst = jQuery(container); let targetElement = inst.find("#output"); var sum = $.pivotUtilities.aggregatorTemplates.sum; var Sum = function () { return sum()(["account"]); } var _this = this; let options = JSON.parse(localStorage.getItem("pivotConfig")); options["aggregators"] = { Sum }; options["onRefresh"] = function () { var config = targetElement.data("pivotUIOptions"); $("th:contains(account)").css("background-color", "yellow"); let rowsArray = (config.rows as Array); if (rowsArray.length > 3) { rowsArray.splice(rowsArray.length - 1, 1); var config_copy = JSON.parse(JSON.stringify(config)); //delete some values which will not serialize to JSON delete config_copy["aggregators"]; delete config_copy["renderers"]; localStorage.setItem("pivotConfig", JSON.stringify(config_copy)); _this.refresh(); } } targetElement.pivotUI( this.dataJson, options, true); }

You can find the source here : https://github.com/WaelOuni/pivottable-js

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/nicolaskruchten/pivottable/issues/1024, or mute the thread https://github.com/notifications/unsubscribe-auth/AAMbA2Fd2QZ74OZraNTASSxIBRwAGLdaks5ukGmQgaJpZM4XZLfV .

WaelOuni commented 6 years ago

Hello Nicolas,

I'm working in a feature : limit row/col 's number in pivotTable. For example, our pivot table can have only 4 rows, if we drag the row number 5, we should block it ... For now, I used the onRefresh callback, i get the row object from options. Then, if the length of rows array pass 4, i make an alert and i delete the last row in the array.

You can see the demo in the link below : https://drive.google.com/file/d/1zmv_NoCMTUv9uXzduU6idKGWfBhHJmgz/view?usp=sharing

I don't think it is the best solution

nicolaskruchten commented 6 years ago

Ah OK I understand, thanks for the explanation. There's ambiguity when talking about "rows in the pivot table" as there are the rows in the output table and then the rows parameter.

So my next question is why would you want to restrict the number of attributes that can be used for the rows/cols parameters? Is it to control the complexity of the resulting output or... ?

WaelOuni commented 6 years ago

Thanks for the correction.. Yes exactly, i need to restrict the number of attributes just to control the resulting output. it work's like i mentioned before, but i would like to know a better or cleaner way to do it if exist