@datarailsshared/dr_renderer 1.2.8 → 1.2.9

package/src/pivottable.js

@@ -1,3 +1,5 @@
+const helpers = require('./dr-renderer-helpers');
+
 // from pivottable@2.23.0
 let initPivotTable = function($, window, document) {
     var indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; },
@@ -7,7 +9,7 @@ let initPivotTable = function($, window, document) {
     /*
     Utilities
      */
-    var PivotData, addSeparators, aggregatorTemplates, aggregators, dayNamesEn, derivers, getSort, locales, mthNamesEn, naturalSort, numberFormat, pivotTableRenderer, rd, renderers, rx, rz, sortAs, usFmt, usFmtInt, usFmtPct, zeroPad;
+    var PivotData, addSeparators, aggregatorTemplates, aggregators, dayNamesEn, derivers, getSort, locales, mthNamesEn, naturalSort, numberFormat, pivotTableRenderer, rd, renderers, rx, rz, sortAs, usFmt, usFmtInt, usFmtPct, zeroPad, errorHandling;
     addSeparators = function(nStr, thousandsSep, decimalSep) {
         var rgx, x, x1, x2;
         nStr += '';
@@ -20,6 +22,7 @@ let initPivotTable = function($, window, document) {
         }
         return x1 + x2;
     };
+
     numberFormat = function(opts) {
         var defaults;
         defaults = {
@@ -573,6 +576,7 @@ let initPivotTable = function($, window, document) {
         l_mapping = {};
         for (i in order) {
             x = order[i];
+            if (order[i] === null) x = '[null]';
             mapping[x] = i;
             if (typeof x === "string") {
                 l_mapping[x.toLowerCase()] = i;
@@ -610,6 +614,47 @@ let initPivotTable = function($, window, document) {
         }
         return naturalSort;
     };
+    errorHandling = {
+        placeholders: {
+            nodata: {
+                title: 'No Data Available',
+                text: 'This might happen because of a global filter or a change in the underlying data',
+                btnText: '',
+                class: 'nodata',
+            },
+            noPermission: {
+                title: 'No Permission',
+                text: 'You do not have permission to view the data',
+                btnText: 'Request Permission',
+                class: 'no-permission',
+            },
+            tooMuchData: {
+                title: 'There is too much data. Please edit this widget',
+                text: '',
+                btnText: 'Edit Widget',
+                class: 'too-much-data',
+            },
+            noPublishItem: {
+                title: 'We can’t find the published item in the source file',
+                text: '',
+                btnText: 'Go to filebox',
+                class: 'no-publish-item',
+            },
+        },
+        getErrorPlaceholder: function(placeholder) {
+            if (placeholder && typeof placeholder === 'object') {
+                return $(`
+                    <div class="noData">
+                        <div class="noData-title">${placeholder.title}</div>
+                        <i class="noData-image ${placeholder.class}"></i>
+                        <div class="noData-text">${placeholder.text}</div>
+                        <div class="noData-error-action"></div>
+                    </div>
+                `);
+            }
+            return null;
+        },
+    };
 
     /*
     Data Model class
@@ -623,6 +668,7 @@ let initPivotTable = function($, window, document) {
             this.getAggregator = bind(this.getAggregator, this);
             this.getRowKeys = bind(this.getRowKeys, this);
             this.getColKeys = bind(this.getColKeys, this);
+            this.getRowKeysByCols = bind(this.getRowKeysByCols, this);
             this.sortKeys = bind(this.sortKeys, this);
             this.arrSort = bind(this.arrSort, this);
             this.input = input;
@@ -639,12 +685,30 @@ let initPivotTable = function($, window, document) {
                 return true;
             });
             this.tree = {};
-            this.rowKeys = [];
-            this.colKeys = [];
+
+            this.isKeysSortingDoneOnBackendSide = opts.keysObject && typeof opts.keysObject === 'object' && helpers.backendSortingKeysAreNotEmpty(opts.keysObject);
+            if (this.isKeysSortingDoneOnBackendSide) {
+                this.rowKeys = opts.keysObject.row_keys;
+                this.colKeys = opts.keysObject.col_keys;
+                this.rowKeysByCols = opts.keysObject.row_keys_by_cols;
+            } else {
+                this.rowKeys = [];
+                this.colKeys = [];
+            }
+
             this.rowTotals = {};
             this.colTotals = {};
             this.allTotal = this.aggregator(this, [], []);
             this.sorted = false;
+            this.dateValuesDictionary = opts.dateValuesDictionary;
+            this.sortByValueAttrs = opts.sortByValueAttrs || [];
+            this.colFormats = opts.colFormats || [];
+            this.rowFormats = opts.rowFormats || [];
+            this.isFormattingAxisLabels = opts.rendererOptions && opts.rendererOptions.isFormattingAxisLabels;
+            this.getFormattedColKeys = (keys) => opts.getFormattedColKeys(this, keys);
+            this.getFormattedRowKeys = (keys) => opts.getFormattedRowKeys(this, keys);
+            this.isDrillDownDisabled = opts.isDrillDownDisabled;
+
             PivotData.forEachRecord(this.input, this.derivedAttributes, (function(_this) {
                 return function(record) {
                     if (_this.filter(record)) {
@@ -804,15 +868,23 @@ let initPivotTable = function($, window, document) {
         };
 
         PivotData.prototype.getColKeys = function() {
-            this.sortKeys();
+            if (!this.isKeysSortingDoneOnBackendSide) {
+                this.sortKeys();
+            }
             return this.colKeys;
         };
 
         PivotData.prototype.getRowKeys = function() {
-            this.sortKeys();
+            if (!this.isKeysSortingDoneOnBackendSide) {
+                this.sortKeys();
+            }
             return this.rowKeys;
         };
 
+        PivotData.prototype.getRowKeysByCols = function() {
+            return this.rowKeysByCols;
+        };
+
         PivotData.prototype.processRecord = function(record) {
             var colKey, flatColKey, flatRowKey, l, len1, len2, n, ref, ref1, ref2, ref3, rowKey, x;
             colKey = [];
@@ -881,6 +953,7 @@ let initPivotTable = function($, window, document) {
         return PivotData;
 
     })();
+
     $.pivotUtilities = {
         aggregatorTemplates: aggregatorTemplates,
         aggregators: aggregators,
@@ -890,8 +963,12 @@ let initPivotTable = function($, window, document) {
         naturalSort: naturalSort,
         numberFormat: numberFormat,
         sortAs: sortAs,
-        PivotData: PivotData
+        PivotData: PivotData,
+        errorHandling: errorHandling,
     };
+    if (window.$) {
+        window.$.pivotUtilities = $.pivotUtilities
+    }
 
     /*
     Default Renderer for hierarchical table layout
@@ -1821,4 +1898,4 @@ let initPivotTable = function($, window, document) {
     };
 };
 
-module.exports = initPivotTable;
+module.exports = initPivotTable;

package/src/published_items_renderer.js

@@ -0,0 +1,365 @@
+let getPublishedItemsRenderer = function (publishedItemsRenderer) {
+
+  this.document = {};
+  this.scope = {};
+  this.options = {};
+  this.isScenarioMode = null;
+  this.settings = {};
+
+  publishedItemsRenderer.formulaCellClicked = function (event, scope, options, window) {
+    event.stopPropagation();
+    event.preventDefault();
+    try {
+      const td = event.currentTarget;
+      const a = td.querySelector('a');
+      const locationId = a.getAttribute('location_id');
+      scope.callFromPublishItem(event, options.widgetId, options.dashboardId, locationId, window.published_item_sheetname);
+    } catch (e) {
+    }
+    return false;
+  }
+
+  publishedItemsRenderer.resizeTable = function (options, iframeWindow) {
+    const publish_item_image = iframeWindow.document.getElementById('publish_item_image');
+    const table = iframeWindow.document.getElementsByTagName("table")[0];
+    const body = iframeWindow.document.getElementsByTagName("body")[0];
+
+    if (table && options.responsive) {
+      publishedItemsRenderer.zoomTable(iframeWindow, table, body);
+    }
+
+    publishedItemsRenderer.resizePublishedImage(publish_item_image, iframeWindow, body);
+  }
+
+  publishedItemsRenderer.zoomTable = function (iframeWindow, table, body) {
+    const bodyZoom = parseFloat(body.style.zoom) || 1;
+    const SCROLL_OFFSET = 16;
+
+    const tableWidth = table.getBoundingClientRect().width * bodyZoom;
+    const tableHeight = table.getBoundingClientRect().height * bodyZoom;
+    const root = iframeWindow.document.documentElement;
+
+    let requiredZoom = (root.clientWidth - SCROLL_OFFSET) / tableWidth;
+    if (this.settings.resizeTableUsingBothDimensions) {
+      requiredZoom = Math.min(requiredZoom, (root.clientHeight - SCROLL_OFFSET) / tableHeight);
+    }
+
+    table.style.zoom = requiredZoom;
+  };
+
+  publishedItemsRenderer.resizePublishedImage = function (publish_item_image, iframeWindow, body) {
+    if (!publish_item_image) return;
+
+    let body_zoom = body.style.zoom;
+    body_zoom = parseFloat(body_zoom) || 1;
+
+    if (publish_item_image.style.height === '100%') {
+      publish_item_image.style.height = 'auto';
+      publish_item_image.style.width = '100%';
+      publish_item_image.style.marginTop = "";
+      setTimeout(function () {
+        publishedItemsRenderer.resizePublishedImage(publish_item_image, iframeWindow, body);
+      }, 10);
+    }
+
+    const imgPositionInfo = publish_item_image.getBoundingClientRect();
+    const height = (imgPositionInfo.height + imgPositionInfo.y * 2) * body_zoom;
+    if (height > iframeWindow.innerHeight) {
+      publish_item_image.style.height = '100%';
+      publish_item_image.style.width = 'auto';
+    } else if (height < iframeWindow.innerHeight) {
+      const temp = (iframeWindow.innerHeight - height) / 2;
+      publish_item_image.style.marginTop = (temp / body_zoom + imgPositionInfo.y) + "px";
+    }
+  }
+
+  publishedItemsRenderer.resetTableZoom = function (document) {
+    const table = document.getElementsByTagName("table")[0];
+    if (table) {
+      table.style.zoom = 1;
+    }
+  }
+
+  publishedItemsRenderer.changedAutoResize = function (options, iframeWindow, document) {
+    Object.assign(iframeWindow.__options__, options);
+    const table = document.getElementsByTagName("table")[0];
+    if (table) {
+      table.style.margin = options.responsive ? '0 auto' : '';
+    }
+
+    if (!options.responsive) {
+      publishedItemsRenderer.resetTableZoom(document);
+    } else {
+      publishedItemsRenderer.resizeTable(options, iframeWindow);
+    }
+  }
+
+  publishedItemsRenderer.changedInputValue = function (firstTime, scope, options) {
+    const input_values = [];
+    if (options.inputValuesData) {
+      for (let key in options.inputValuesData) {
+        input_values.push(options.inputValuesData[key]);
+      }
+    }
+
+    try {
+      scope.changedInputValues(input_values, options.widgetId, options.dashboardId, firstTime);
+    } catch (e) {
+      console.error(e);
+    }
+  }
+
+  publishedItemsRenderer.changedInputElement = function (event, scope, options) {
+    const inputElement = event.currentTarget;
+    const name = inputElement.getAttribute('name');
+    const metaData = options.inputValuesData ? options.inputValuesData[name] : null;
+    let newValue = inputElement.value;
+    if (metaData) {
+      if (metaData.type === 'editInput') {
+        newValue = parseFloat(newValue);
+      } else if (metaData.type === 'editInputPercent') {
+        newValue = parseFloat(newValue) + '%';
+      }
+
+      if (metaData.value !== newValue) {
+        metaData.value = newValue;
+        publishedItemsRenderer.changedInputValue(false, scope, options);
+      }
+    }
+  }
+
+  publishedItemsRenderer.createInputElement = function (tdElement, inputMetaData, formatValue, scope, options, document) {
+    const _this = this;
+    tdElement.innerHTML = '';
+    if (inputMetaData) {
+      switch (inputMetaData.type) {
+        case "editInput":
+        case "editInputPercent":
+          let inEl = document.createElement("INPUT");
+          let labelEl = document.createElement("LABEL");
+
+          if (inputMetaData.value === 'DR_INPUT') {
+            labelEl.innerText = null;
+          } else {
+            labelEl.innerText = inputMetaData.format ? formatValue('n', inputMetaData.format, inputMetaData.value).value : inputMetaData.value;
+          }
+          if (_this.isScenarioMode) {
+            labelEl.setAttribute("style", "background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;width: calc(100% - 15px);margin: 6px;text-align: inherit;display: block; cursor: pointer;");
+          } else {
+            labelEl.setAttribute("style", "background: transparent;width: calc(100% - 15px);border: 0;margin: 6px;text-align: inherit;display: block; cursor: pointer;");
+          }
+          const onLabelClick = function (event, isScenarioMode) {
+            event.stopPropagation();
+            if (isScenarioMode) {
+              inEl.setAttribute("style", "background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;width: calc(100% - 15px);border: 0;margin: 5px;text-align: inherit;display: block;");
+            } else {
+              inEl.setAttribute("style", "background: transparent;width: calc(100% - 15px);border: 0;margin: 5px;text-align: inherit;display: block;");
+            }
+            labelEl.style.display = 'none';
+            setTimeout(function () {
+              inEl.focus();
+            }, 1)
+          }
+          labelEl.addEventListener("click", (event) => onLabelClick(event, _this.isScenarioMode));
+
+          inEl.setAttribute("type", "number");
+          inEl.setAttribute("name", inputMetaData.name);
+          if (_this.isScenarioMode) {
+            inEl.setAttribute("style", "background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;width: calc(100% - 15px);border: 0;margin: 5px;text-align: inherit;display: none;");
+          } else {
+            inEl.setAttribute("style", "background: transparent;width: calc(100% - 15px);border: 0;margin: 5px;text-align: inherit;display: none;");
+          }
+          inEl.value = inputMetaData.type === 'editInputPercent' ? parseFloat(inputMetaData.value.replace('%', '')) : inputMetaData.value;
+          inEl.addEventListener("focusout", function (event) {
+            event.preventDefault();
+            publishedItemsRenderer.changedInputElement(event, scope, options);
+            inEl.style.display = 'none';
+            labelEl.innerText = inputMetaData.format ? formatValue('n', inputMetaData.format, inEl.value).value : inputMetaData.value;
+            labelEl.style.display = 'block';
+          });
+          inEl.addEventListener("keyup", function (event) {
+            // Number 13 is the "Enter" key on the keyboard
+            if (event.keyCode === 13) {
+              // Cancel the default action, if needed
+              event.preventDefault();
+              publishedItemsRenderer.changedInputElement(event, scope, options);
+              inEl.style.display = 'none';
+              labelEl.innerText = inputMetaData.format ? formatValue('n', inputMetaData.format, inEl.value).value : inputMetaData.value;
+              labelEl.style.display = 'block';
+            }
+          });
+          tdElement.appendChild(inEl);
+          tdElement.appendChild(labelEl);
+          break;
+        case "dateInput":
+          let dateEl = document.createElement("DIV");
+          const format = inputMetaData.format ? inputMetaData.format.toUpperCase() : 'MM/DD/YYYY';
+          const formattedDate = formatValue('d', format, inputMetaData.value).value
+          if (_this.isScenarioMode) {
+            dateEl.innerHTML = '<label class="value dateInput" style="background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;cursor:pointer;">' + formattedDate + '</label>';
+          } else {
+            dateEl.innerHTML = '<label class="value dateInput" style="cursor: pointer;">' + formattedDate + '</label>';
+          }
+          tdElement.appendChild(dateEl);
+          tdElement.classList.toggle("input-filter-list-td");
+          tdElement.setAttribute("name", inputMetaData.name);
+          tdElement.addEventListener("click", function (event) {
+            try {
+              scope.openDatePickerFromPublishedItem(event, options.widgetId, options.dashboardId, inputMetaData, format);
+            } catch (e) {
+              console.error(e);
+            }
+          })
+          break;
+        case "excelList":
+          let selectEl = document.createElement("SELECT");
+          selectEl.setAttribute("name", inputMetaData.name);
+          selectEl.setAttribute("class", "dr_input");
+          for (let i = 0; i < inputMetaData.values.length; i++) {
+            let option = document.createElement("option");
+            option.setAttribute("value", inputMetaData.values[i]);
+            option.innerText = inputMetaData.values[i];
+            if (inputMetaData.values[i] === inputMetaData.value) {
+              option.setAttribute("selected", "");
+            }
+            selectEl.appendChild(option);
+          }
+          selectEl.addEventListener("change", function (event) {
+            publishedItemsRenderer.changedInputElement(event, scope, options)
+          });
+          tdElement.appendChild(selectEl);
+          break;
+        case "filterList":
+          let listHolderEl = document.createElement("DIV");
+          listHolderEl.setAttribute("class", "filter_list_holder");
+          if (_this.isScenarioMode) {
+            listHolderEl.innerHTML = '<label class="value filterList" style="background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;cursor: pointer;">' + inputMetaData.value + '</label><i class="filter_icon"></i>';
+          } else {
+            listHolderEl.innerHTML = '<label class="value filterList" style="cursor: pointer;">' + inputMetaData.value + '</label><i class="filter_icon"></i>';
+          }
+          tdElement.appendChild(listHolderEl);
+          tdElement.classList.toggle("input-filter-list-td");
+          tdElement.setAttribute("name", inputMetaData.name);
+          tdElement.addEventListener("click", function (event) {
+            let inputElement = event.currentTarget;
+            let name = inputElement.getAttribute('name');
+            let metaData = options.inputValuesData ? options.inputValuesData[name] : null;
+            if (metaData) {
+              try {
+                scope.openFilterListFromPublishedItem(event, options.widgetId, options.dashboardId, metaData);
+              } catch (e) {
+                console.error(e);
+              }
+            }
+          });
+          break;
+      }
+    }
+  }
+
+  publishedItemsRenderer.changedInputFilterValue = function (metaData, newValue, document) {
+    let tdLabelElement = document.querySelector('td[name="' + metaData.name + '"]>div>label[class="value"]');
+    if (tdLabelElement) {
+      tdLabelElement.innerText = newValue;
+    }
+    console.log(tdLabelElement, newValue);
+  }
+
+  publishedItemsRenderer.changeStylesForLabel = function (elementsArray, styles, isScenarioMode) {
+    if (elementsArray.length) {
+      elementsArray.forEach(element => {
+        element.setAttribute("style", isScenarioMode ? styles : "cursor:pointer;");
+      })
+    }
+  }
+
+  publishedItemsRenderer.prepareInputCells = function (document, scope, options, isScenarioMode) {
+    const inputCells = document.querySelectorAll('td>a[href="DR_INPUT"], td>div>a[href="DR_INPUT"]');
+    const inputs = document.querySelectorAll('td>input');
+    const dateInputs = document.querySelectorAll('.dateInput');
+    const filterList = document.querySelectorAll('.filterList');
+    const styleForLabel = "background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;cursor:pointer;";
+    if (!options.inputValuesData) {
+      options.inputValuesData = {};
+    }
+    publishedItemsRenderer.changeStylesForLabel(filterList, styleForLabel, isScenarioMode);
+    publishedItemsRenderer.changeStylesForLabel(dateInputs, styleForLabel, isScenarioMode);
+    if (inputs.length) {
+      inputs.forEach(element => {
+        const labelElement = element.nextSibling;
+        labelElement.setAttribute("style", isScenarioMode ?
+          "background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;width: calc(100% - 15px);margin: 6px;text-align: inherit;display: block; cursor: pointer;" :
+          "background: transparent;width: calc(100% - 15px);border: 0;margin: 6px;text-align: inherit;display: block; cursor: pointer;");
+      });
+    }
+    if (inputCells.length) {
+      for (let i = 0; i < inputCells.length; i++) {
+        let tdElement = inputCells[i].parentElement;
+        let inputId = inputCells[i].getAttribute('name') || 'no_attribute';
+        publishedItemsRenderer.createInputElement(tdElement, options.inputValuesData[inputId], scope.highchartsRenderer.formatValue, scope, options, document, isScenarioMode);
+      }
+    }
+  }
+
+  publishedItemsRenderer.addEventListeners = function (document, iframeWindow, scope, options) {
+    let resizeTimeout;
+    const handleDimensionChange = () => {
+      if (resizeTimeout) {
+        cancelAnimationFrame(resizeTimeout);
+      }
+
+      resizeTimeout = requestAnimationFrame(() => {
+        publishedItemsRenderer.resizeTable(iframeWindow.__options__, iframeWindow);
+      });
+    }
+
+    document.addEventListener("DOMContentLoaded", handleDimensionChange);
+    iframeWindow.addEventListener("resize", handleDimensionChange);
+
+    // Add click event to cell with formula
+    let all_a_hrefs = document.querySelectorAll('td a[location_id]');
+    for (let i = 0; i < all_a_hrefs.length; i++) {
+      let td_elem = all_a_hrefs[i].closest('td');
+      td_elem.classList.add("apply_hover");
+      td_elem.addEventListener('click', function (event) {
+        publishedItemsRenderer.formulaCellClicked(event, scope, options, iframeWindow)
+      });
+    }
+  }
+
+  publishedItemsRenderer.scenarioModeChange = function (flag, document) {
+    this.isScenarioMode = flag;
+    publishedItemsRenderer.prepareInputCells(document, this.scope, this.options, this.isScenarioMode);
+  }
+
+  publishedItemsRenderer.getInputValues = function () {
+    return this.options.inputValuesData;
+  }
+
+  publishedItemsRenderer.initPublishedItem = function (document, iframeWindow, scope, options) {
+    this.document = document;
+    this.scope = scope;
+    this.options = options;
+    iframeWindow.__options__ = options;
+    publishedItemsRenderer.prepareInputCells(document, scope, options, this.isScenarioMode);
+    publishedItemsRenderer.applyInitDocumentStyles(document, iframeWindow);
+    publishedItemsRenderer.addEventListeners(document, iframeWindow, scope, options);
+
+    setTimeout(function () {
+      publishedItemsRenderer.changedInputValue(true, scope, options);
+    }, 500);
+  }
+
+  publishedItemsRenderer.applyInitDocumentStyles = function (document, iframeWindow) {
+    const table = document.getElementsByTagName('table')[0];
+    if (table) {
+      table.style.overflow = 'hidden';
+      table.style.margin = iframeWindow.__options__.responsive ? '0 auto' : '';
+    }
+
+    const body = document.body;
+    body.style.margin = '0';
+  }
+}
+
+module.exports = getPublishedItemsRenderer;

package/src/seriesPointStyles-helper.js

@@ -0,0 +1,43 @@
+function getSeriesPointStyles(isSelected) {
+    return {
+        opacity: isSelected ? 1 : 0.1,
+        marker: {
+            enabled: true,
+            radius: isSelected ? 8 : 3,
+        },
+        dataLabels: {
+            style: {
+                fontWeight: isSelected ? "bold" : "normal",
+            },
+        },
+    };
+}
+
+function setSeriesPointStylesOnClick(e) {
+    const selectedPoint = e.point;
+    e.point.series.chart.series.forEach((series) =>
+        series.points.forEach((point) => {
+            point.update(getSeriesPointStyles(point === selectedPoint), false);
+        })
+    );
+    e.point.series.chart.redraw();
+}
+
+function setInitialPointStyles(opts, series) {
+    series.forEach((series) => {
+        if (Array.isArray(series.data)) {
+            series.data.forEach((item) => {
+                const isSelected =
+                    item && opts.selectedPoint &&
+                    item.initialName === opts.selectedPoint.initialName &&
+                    item.y.toFixed(2) === opts.selectedPoint.y.toFixed(2);
+                item = Object.assign(item, getSeriesPointStyles(isSelected));
+            });
+        }
+    });
+}
+
+module.exports = {
+    setSeriesPointStylesOnClick,
+    setInitialPointStyles,
+};