@datarailsshared/dr_renderer 1.2.75 → 1.2.79

package/package.json

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

package/src/dataformatter.js

@@ -497,11 +497,11 @@ var DataFormatterImpl = function () {
             var minutes = n.getMinutes();
             var seconds = n.getSeconds();
 
-            var adjustMinutesValue = function(minutes) {
-                if (minutes < 10) {
-                    return '0' + minutes;
+            var padStartTime = function(time) {
+                if (time < 10) {
+                    return '0' + time;
                 }
-                return minutes;
+                return time;
             }
 
             // Build res
@@ -513,11 +513,11 @@ var DataFormatterImpl = function () {
                 }
 
                 if (fmin) {
-                    return fmin + _this3.applyNumberPattern(adjustMinutesValue(minutes), '00');
+                    return fmin + _this3.applyNumberPattern(padStartTime(minutes), '00');
                 }
 
                 if (fmin2) {
-                    return _this3.applyNumberPattern(adjustMinutesValue(minutes), '00') + fmin2;
+                    return _this3.applyNumberPattern(padStartTime(minutes), '00') + fmin2;
                 }
 
                 if (mmin) {
@@ -534,7 +534,7 @@ var DataFormatterImpl = function () {
             return res.replace(/(ss)|(s)|(hh)|(h)|(dddd)|(ddd)|(dd)|(d)|(mmmmm)|(mmmm)|(mmm)|(mm)|(m)|(yyyy)|(yy)|(\[\])/gi, function (a, ss, s, hh, h, dddd, ddd, dd, d, mmmmm, mmmm, mmm, mm, m, yyyy, yy, ampm) {
 
                 if (ss) {
-                    return _this3.applyNumberPattern(seconds, '00');
+                    return _this3.applyNumberPattern(padStartTime(seconds), '00');
                 }
 
                 if (s) {
@@ -542,7 +542,7 @@ var DataFormatterImpl = function () {
                 }
 
                 if (hh) {
-                    return _this3.applyNumberPattern(foundAMPM ? hours % 12 : hours, '00');
+                    return _this3.applyNumberPattern(padStartTime(foundAMPM ? hours % 12 : hours), '00');
                 }
 
                 if (h) {

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

@@ -440,7 +440,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     rows = [];
                 }
 
-                if (pivotData.rowAttrs.length == 0) {
+                if (pivotData.rowAttrs.length == 0
+                    || this.series.options.className === 'totalSeries'
+                    || this.series.options.className === 'trendSeries') {
                     rows = [];
                 }
                 var cols = this.key;
@@ -466,7 +468,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()
@@ -533,7 +535,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 if (is_drill_down_pie && highchartsRenderer.selfStartsWith(series_name,"Series ")) {
                     rows = [];
                 }
-                if (pivotData.rowAttrs.length == 0) {
+                if (pivotData.rowAttrs.length == 0
+                    || this.series.options.className === 'totalSeries'
+                    || this.series.options.className === 'trendSeries') {
                     rows = [];
                 }
                 var cols = this.key;
@@ -586,7 +590,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;
 
@@ -980,6 +984,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 const b = ((n * xySum) -  (xSum* ySum)) / ((n * squareXSum) - (xSum * xSum));
 
                 const trendSeries = lodash.clone(chart_series[chart_series.length - 1]);
+                trendSeries.className = 'trendSeries';
                 trendSeries.name = 'Trend Line (' + trendSeries.name + ')';
                 trendSeries.dashStyle = 'shortdot';
                 trendSeries.type = 'line';
@@ -1026,6 +1031,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             if (opts.totalSeriesSettings) {
                 newSeries.yAxis = opts.totalSeriesSettings.secondaryAxis ? 1 : undefined;
             }
+            newSeries.className = 'totalSeries';
             newSeries.name = 'Total';
             newSeries.data = [];
             col_n_keys.forEach(columnKey => {
@@ -1145,6 +1151,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 const b = ((n * xySum) -  (xSum* ySum)) / ((n * squareXSum) - (xSum * xSum));
 
                 const trendSeries = lodash.clone(chart_series[chart_series.length - 1]);
+                trendSeries.className = 'trendSeries';
                 trendSeries.name = 'Trend Line (' + trendSeries.name + ')';
                 trendSeries.dashStyle = 'shortdot';
                 trendSeries.type = 'line';
@@ -1206,6 +1213,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 }
             }
 
+            totalSeries.className = 'totalSeries';
             totalSeries.name = 'Total';
             totalSeries.data = [];
             col_n_keys.forEach(columnKey => {
@@ -2017,7 +2025,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     highchartsRenderer.setTitleAndSubTitle = function (chartOptions, opts, additionOptions) {
-        chartOptions.title = opts.chartOptions.hideChartHeader ? null : {
+        chartOptions.title = opts.chartOptions.hideChartHeader ? { text: null } : {
             align: 'center',
             text: opts && opts.chart_title ? opts.chart_title : "",
             style: {
@@ -4307,6 +4315,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 format = format.replace('dd', 'DD');
                 format = format.replace('yyyy', 'YYYY');
                 format = format.replace('yy', 'YY');
+                format = lodash.replace(format, /h/g, 'H');
                 return moment_lib(tryParse).utcOffset(0).format(format) + "";
             } else {
                 return 'Wrong date format';
@@ -4482,7 +4491,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,
@@ -7374,6 +7383,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
        minHeight: 16,
        maxHeight: 45,
        x: -3,
+       y: -26,
        layout: "horizontal"
      } : {
        enabled: rowAttrsLength > 0,

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 () {