@datarailsshared/dr_renderer 1.2.13 → 1.2.15

package/src/published_items_renderer.js

@@ -0,0 +1,387 @@
+let getPublishedItemsRenderer = function (publishedItemsRenderer) {
+
+  this.document = {};
+  this.scope = {};
+  this.options = {};
+  this.isScenarioMode = null;
+
+  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) {
+    options.alreadySetTimeout = null;
+    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) {
+    let body_zoom = body.style.zoom;
+    body_zoom = parseFloat(body_zoom) || 1;
+
+    let zoom = table.style.zoom;
+    zoom = parseFloat(zoom) || 1;
+
+    const positionInfo = table.getBoundingClientRect();
+    let width = Math.ceil((positionInfo.width + iframeWindow.innerWidth - iframeWindow.document.body.offsetWidth) * zoom * body_zoom);
+
+    if (width < iframeWindow.innerWidth) {
+      zoom += 0.05;
+
+      width = Math.ceil((positionInfo.width + iframeWindow.innerWidth - iframeWindow.document.body.offsetWidth) * zoom * body_zoom);
+      if (width < iframeWindow.innerWidth) {
+        table.style.zoom = zoom;
+        setTimeout(function () {
+          publishedItemsRenderer.zoomTable(iframeWindow, table, body);
+        }, 10);
+      }
+    } else if (width >= iframeWindow.innerWidth) {
+      zoom -= 0.05;
+
+      width = Math.ceil((positionInfo.width + iframeWindow.innerWidth - iframeWindow.document.body.offsetWidth) * zoom * body_zoom);
+      table.style.zoom = zoom;
+      if (width >= iframeWindow.innerWidth) {
+        setTimeout(function () {
+          publishedItemsRenderer.zoomTable(iframeWindow, table, body);
+        }, 10);
+      }
+    }
+  }
+
+  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 {
+      if (!options.alreadySetTimeout) {
+        options.alreadySetTimeout = setTimeout(function () {
+          publishedItemsRenderer.resizeTable(options, iframeWindow);
+        }, 100);
+      }
+    }
+  }
+
+  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) {
+    document.addEventListener("DOMContentLoaded", function () {
+      if (!options.alreadySetTimeout) {
+        options.alreadySetTimeout = setTimeout(function () {
+          publishedItemsRenderer.resizeTable(options, iframeWindow);
+        }, 50);
+      }
+    });
+    iframeWindow.addEventListener("resize", function () {
+      if (!options.alreadySetTimeout) {
+        options.alreadySetTimeout = setTimeout(function () {
+          publishedItemsRenderer.resizeTable(iframeWindow.__options__, iframeWindow);
+        }, 100);
+      }
+    });
+
+    // 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/tests/highcharts_renderer.test.js

@@ -0,0 +1,48 @@
+import * as $ from 'jquery';
+import * as lodash from 'lodash';
+import * as moment from 'moment';
+import initPivotTable from "../src/pivottable";
+import initDRPivotTable from "../src/dr_pivottable";
+
+const getHighchartsRenderer = require('../src/highcharts_renderer');
+const DataFormatter = require('../src/dataformatter');
+const DEFAULT_USER_COLORS = {
+    colors: ['#008aff', '#91e7e7', '#f37789', '#ffdc65', '#0e569d', '#bbe0ff', '#57b2ff', '#5ecfb9', '#c7ffda', '#179ab9'],
+    variance_color: null
+};
+
+let highchartsRenderer = {};
+let _window = window;
+let _document = document;
+
+describe('highcharts_renderer', () => {
+    beforeAll(() => {
+        const Highcharts = {
+            opt: {},
+            setOptions: function(value) {Highcharts.opt = value;},
+            numberFormat: function(value) { return value ;},
+            getOptions: function() { return Highcharts.opt; }
+        };
+        _window.DataFormatter = DataFormatter;
+        initPivotTable($, _window, _document);
+        initDRPivotTable($, _window, _document);
+
+        highchartsRenderer = getHighchartsRenderer($, _document, Highcharts, DEFAULT_USER_COLORS, highchartsRenderer,
+            DataFormatter, lodash, moment, true)
+    })
+
+    describe('function isSystemField', () => {
+        it('system name', () => {
+            const field = {
+                name: 'Doc_ID'
+            };
+            expect(highchartsRenderer.isSystemField(field)).toBe(true)
+        });
+        it('not system name', () => {
+            const field = {
+                name: 'field name'
+            };
+            expect(highchartsRenderer.isSystemField(field)).toBe(false)
+        });
+    });
+});