@datarailsshared/dr_renderer 1.2.77 → 1.2.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/dr_renderer",
-  "version": "1.2.77",
+  "version": "1.2.78",
   "description": "DataRails charts and tables renderer",
   "keywords": [
     "datarails",

package/src/dr_pivottable.js

@@ -197,7 +197,7 @@ let initDRPivotTable = function($, window, document) {
                     }
                 } else if (!rowKey.length && colKey.length) {
                     if (!this.colTotals[flatColKey]) {
-                        this.colTotals[flatColKey] = getColAggregator(rowKey.slice());
+                        this.colTotals[flatColKey] = getColAggregator(colKey.slice());
                         this.colTotals[flatColKey].push(record);
                     }
                 } else {

package/src/highcharts_renderer.js

@@ -466,7 +466,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     }
 
                     if (opts && opts.chartOptions && opts.chartOptions.label && opts.chartOptions.label.percentage) {
-                        return (Math.round((this.y / this.total) * 10000) / 100) + '%';
+                        return (Math.round((this.y / this.total) * 100)) + '%';
                     } else if (opts && opts.chartOptions && opts.chartOptions.label && opts.chartOptions.label.show_percentage) {
                         let aggrPercentages = pivotData.getAggregator(rows, [])
                         let total = aggrPercentages.value()
@@ -586,7 +586,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     }
 
                     if (lodash.has(opts, "chartOptions.label.percentage") && opts.chartOptions.label.percentage && this.total) {
-                        to_return += '<br/>' + (Math.round((this.y / this.total) * 10000) / 100) + '%';
+                        to_return += '<br/>' + (Math.round((this.y / this.total) * 100)) + '%';
                     }
                     return to_return;
 
@@ -4483,7 +4483,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 },
                 seriesOptions: []
             }
-            if (options.chartOptions.delta_column && options.chartOptions.delta_column.field === 'series') {
+            if (options.chartOptions && options.chartOptions.delta_column && options.chartOptions.delta_column.field === 'series') {
                 let deltaColumnSeries = {
                     series: options.chartOptions.delta_column.name,
                     secondaryAxis: !options.chartOptions.delta_column.same_yaxis,

package/src/published_items_renderer.js

@@ -1,5 +1,10 @@
 let getPublishedItemsRenderer = function (publishedItemsRenderer) {
 
+  this.document = {};
+  this.scope = {};
+  this.options = {};
+  this.isScenarioMode = null;
+
   publishedItemsRenderer.formulaCellClicked = function (event, scope, options, window) {
     event.stopPropagation();
     event.preventDefault();
@@ -135,6 +140,7 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
   }
 
   publishedItemsRenderer.createInputElement = function (tdElement, inputMetaData, formatValue, scope, options, document) {
+    const _this = this;
     tdElement.innerHTML = '';
     if (inputMetaData) {
       switch (inputMetaData.type) {
@@ -148,19 +154,32 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
           } else {
             labelEl.innerText = inputMetaData.format ? formatValue('n', inputMetaData.format, inputMetaData.value).value : inputMetaData.value;
           }
-          labelEl.setAttribute("style", "background: transparent;width: calc(100% - 15px);border: 0;margin: 6px;text-align: inherit;display: block; cursor: pointer;");
-          labelEl.addEventListener("click", function (event) {
+          if (_this.isScenarioMode) {
+            labelEl.setAttribute("style", "background: #FFEDBF;padding: 2px 8px 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 8px 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';
-            inEl.style.display = 'block';
             setTimeout(function () {
               inEl.focus();
             }, 1)
-          });
+          }
+          labelEl.addEventListener("click", (event) => onLabelClick(event, _this.isScenarioMode));
 
           inEl.setAttribute("type", "number");
           inEl.setAttribute("name", inputMetaData.name);
-          inEl.setAttribute("style", "background: transparent;width: calc(100% - 15px);border: 0;margin: 5px;text-align: inherit;display: none;");
+          if (_this.isScenarioMode) {
+            inEl.setAttribute("style", "background: #FFEDBF;padding: 2px 8px 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();
@@ -187,7 +206,11 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
           let dateEl = document.createElement("DIV");
           const format = inputMetaData.format ? inputMetaData.format.toUpperCase() : 'MM/DD/YYYY';
           const formattedDate = formatValue('d', format, inputMetaData.value).value
-          dateEl.innerHTML = '<label class="value" style="cursor: pointer;">' + formattedDate + '</label>';
+          if (_this.isScenarioMode) {
+             dateEl.innerHTML = '<label class="value dateInput" style="background: #FFEDBF;padding: 2px 8px 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);
@@ -220,7 +243,11 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
         case "filterList":
           let listHolderEl = document.createElement("DIV");
           listHolderEl.setAttribute("class", "filter_list_holder");
-          listHolderEl.innerHTML = '<label class="value">' + inputMetaData.value + '</label><i class="filter_icon"></i>';
+          if (_this.isScenarioMode) {
+            listHolderEl.innerHTML = '<label class="value filterList" style="background: #FFEDBF;padding: 2px 8px 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);
@@ -249,16 +276,38 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
     console.log(tdLabelElement, newValue);
   }
 
-  publishedItemsRenderer.prepareInputCells = function (document, scope, options) {
-    let inputCells = document.querySelectorAll('td>a[href="DR_INPUT"], td>div>a[href="DR_INPUT"]');
+  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 8px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;cursor:pointer;";
     if (!options.inputValuesData) {
       options.inputValuesData = {};
     }
-    if (inputCells.length > 0) {
+    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 8px 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);
+        publishedItemsRenderer.createInputElement(tdElement, options.inputValuesData[inputId], scope.highchartsRenderer.formatValue, scope, options, document, isScenarioMode);
       }
     }
   }
@@ -290,8 +339,20 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
     }
   }
 
+  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, window, scope, options) {
-    publishedItemsRenderer.prepareInputCells(document, scope, options);
+    this.document = document;
+    this.scope = scope;
+    this.options = options;
+    publishedItemsRenderer.prepareInputCells(document, scope, options, this.isScenarioMode);
     publishedItemsRenderer.addEventListeners(document, window, scope, options);
 
     setTimeout(function () {