Save and load `rPivotTable` configurations made in your browser - fraupflaume/rpivotTable GitHub Wiki

---
title: "button and input tester!"
author: "me"
date: '2022-05-12'
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
```

<style>
body {    /*push content away from far right and left edges*/
  margin-right: 2%;
  margin-left: 2%;
}
.main-container {
  max-width: unset;
}
.btn { 
  vertical-align: middle;
  -moz-box-shadow: 0px 10px 14px -7px #000000;
  -webkit-box-shadow: 0px 10px 14px -7px #000000;
  box-shadow: 0px 10px 14px -7px #000000;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  border: .5px solid black;
  display: inline-block;
  font-size: 1.2em;           
  padding: .3em 0px;
  width: 20em;                 
  text-decoration: none; /*no underline!!*/
  cursor: pointer;
}
.btn:active {      /*simulate movement*/
  position: relative;
  top: 1px;
}
</style>

```{r data,include=F}
# devtools::install_github("fraupflaume/rpivotTable")
library(rpivotTable)
data(mtcars)

```

## Make it Interesting...or not

Do you want to save or restore the previously saved pivot tables' configuration?

<a id='saveNamed' class='btn' style="background-color:#003b70;color:white;">Save Configuration by Name</a>
<a id='restoNamed' class='btn' style="background-color:#b21e29;color:white;">Restore Configuration with Custom Name</a>


```{r showMe, echo=FALSE, fig.show="hold"}
rpivotTable(mtcars, rows="am", cols = c("cyl"), width = "90%", 
            height = "40%", subtotals = TRUE,
            rendererOptions = list(
              c3 = list(legend = list(show = FALSE), 
                        data = list(labels = TRUE),
                        options = list(responsive = TRUE,
                                       maintainAspectRatio = FALSE),
                        size = list(width = "600",
                                    height = "500")),
              d3 = list(size = list(width = "500", height = "500")) 
            ))
```


That's all, folks.


```{r listenOrElse,results="asis",engine="js"}

// for ONE TABLE
setTimeout(function(){  // add to buttons
  document.querySelector('a#saveNamed').addEventListener('click', savoring); 
  document.querySelector('a#restoNamed').addEventListener('click', giveItBack);
  function savoring() {                              // function to save
    el = document.querySelector('.rpivotTable');
    msg = "Choose a name for the configuration that you are saving.";
    inName = prompt(msg, ['Enter a name with no spaces or special characters'])
    if(inName === null) {return;};                   // they changed their mind; nothing saved
    inName = inName.replace(/[^a-z0-9.]/gi, '');     // validate string
    path = window.location.pathname.split("/").pop().split(".").slice()[0]; //filename
    elId = el.getAttribute("id");
    stringy = $('#' + elId).data("pivotUIOptions");  // collect rows/col filters
    delete stringy['aggregators'];                   // remove not-parse-friendly keys
    delete stringy['renderers'];
    stringy2 = JSON.stringify(stringy);              // one key:value pair for storage
    window.localStorage.setItem(path + '_' + inName, stringy2);  // STORE it!
  };
  function giveItBack() {                           // function to regurgitate
    el = document.querySelector('.rpivotTable');
    msg = "Enter the name of the configuration you would like to retrieve.";
    confName = prompt(msg, ["Enter a name with no spaces or special characters"]);
    if(confName === null) {return;}; 
    confName = confName.replace(/[^a-z0-9.]/gi, '');    // validate string
    ods = [...el.ownerDocument.scripts];             // make it an array
    path = window.location.pathname.split("/").pop().split(".").slice()[0]; //filename
    elId = el.getAttribute("id");
    where = ods.filter(function(ods){             // filter scripts for data
      return ods.dataset['for'] === elId;
    })[0].innerHTML; 
    where2 = JSON.parse(where).x.data;            // format data for pivotUI()
    where3 = HTMLWidgets.dataframeToD3(where2);   // ...still formatting
    if(window.localStorage.getItem(path + '_' + confName) === null) { // alert
      len = window.localStorage.length
      var str;
      for(i = 0; i < len; i++) {
        w = window.localStorage.key(i);
        ind = w.lastIndexOf('_');
        w2 = w.substr(ind + 1);   // remove file/page name and table number
        str = str + w2 + '\n';    // make one long string of names
      }
      str2 = "WARNING: There is no saved pivot table configuration with the name " + confName + '.';
      str2 += " Here is a list of the configuration names that are currently stored for this page:\n";
      str2 += str;
      alert(str2);
      confName = prompt(msg, ["Enter a name with no spaces or special characters"]);
      if(confName === null) {
        return
      }; 
      confName = confName.replace(/[^a-z0-9.]/gi, '');    // validate string
    }
    gimme = window.localStorage.getItem(path + '_' + confName); // get storage
    gimmeMore = JSON.parse(gimme);                            // prepare for recall
    if(where.includes('"subtotals":true')){       // is the option 'subtotal' used?
      gimmeMore.renderers = $.pivotUtilities.subtotal_renderers;
      gimmeMore.dataClass = $.pivotUtilities.SubtotalPivotData;
    }; 
    if(where.includes('"tsv":true')){             // is the option 'tsv' used?
      gimmeMore.renderers = $.extend(gimmeMore.renderers, $.pivotUtilities.export_renderers);
    };
    if(where.includes('sortAs')){
      // passed as a function, they will get lost in save & retrieve
      stringy = $('#' + elId).data("pivotUIOptions").sorters;
      gimmeMore.sorters = stringy;
    }
    $('#' + elId).pivotUI(where3, gimmeMore, true, "en"); // put it back!
  };
}, 500);

```