@datarailsshared/dr_renderer 1.2.8 → 1.2.9

package/src/index.js

@@ -1,3 +1,4 @@
+const getPublishedItemsRenderer = require('./published_items_renderer');
 const getHighchartsRenderer = require('./highcharts_renderer');
 const initPivotTable = require('./pivottable');
 const initDRPivotTable = require('./dr_pivottable');
@@ -15,8 +16,13 @@ dr_render_factory.init = function($, window, document, Handsontable){
     }
 }
 
-dr_render_factory.getInitHighchartsRenderer = function($, document, Highcharts, default_colors, highchartsRenderer, lodash, moment_lib){
-    return getHighchartsRenderer($, document, Highcharts, default_colors, highchartsRenderer, DataFormatter, lodash, moment_lib);
+dr_render_factory.getInitHighchartsRenderer = function($, document, Highcharts, default_colors, highchartsRenderer, lodash, moment_lib, isNewAngular){
+    return getHighchartsRenderer($, document, Highcharts, default_colors, highchartsRenderer, DataFormatter, lodash, moment_lib, isNewAngular);
 }
+
+dr_render_factory.getInitPublishedItemsRenderer = function (publishedItemsRenderer, bind = {}) {
+    return getPublishedItemsRenderer.bind(bind)(publishedItemsRenderer);
+}
+
 //const $ = require( "jquery" )( window );
 module.exports = dr_render_factory;

package/src/novix_renderer.js

@@ -28,8 +28,6 @@ let initNovixRenderer = function($, window, document, Handsontable){
     const delim = " , ";
     const subtotal = "subtotalDatarailsPlaceholder";
     const replaceValue = "SubTotals";
-    const useNewUx = document.ReportHippo && document.ReportHippo && document.ReportHippo.user &&
-      document.ReportHippo.user.organization.settings && document.ReportHippo.user.organization.settings.use_new_ux;
 
     $.pivotUtilities.novix_renderers = {
 
@@ -68,6 +66,73 @@ let initNovixRenderer = function($, window, document, Handsontable){
                 }
             };
 
+            var minColWidth = 50;
+            var maxColWidth = 250;
+
+            var calculateMaxWidths = function(ds) {
+                const mc = findMergeCols(ds);
+                return ds.data
+                    .reduce((acc, row, index) => {
+                        for (let [col, value] of row.entries()) {
+                            if (value === subtotal) value = "SubTotals";
+                            value = typeof value === 'number' ? String(value) : value;
+                            if (
+                                typeof value !== "undefined" &&
+                                (!acc[col] || acc[col].len <= value.length) &&
+                                !(index === ds.totalRows - 1 && col < ds.fixedColumns)
+                            ) {
+                                acc[col] = { str: value, len: value.length || 0, lastRow: index === ds.totalRows - 1 };
+                            }
+                        };
+                        return acc;
+                    }, new Array(ds.totalColumns).fill(null))
+                    .map((item) => getTdWidth(item))
+                    .reduce((acc, width, col, arr) => {
+                        acc[col] = mc[col] ? getMergeColsWidth(arr, col, mc[col]) : width;
+                        return acc;
+                    }, {});
+            };
+
+            var getTdWidth = function(item) {
+                let tdStyles = {
+                    borderLeft: 'solid 1px',
+                    borderRight: 'solid 1px',
+                    fontSize: '11px',
+                    fontFamily: '"Open Sans",sans-serif',
+                    fontWeight: item.lastRow && opts.chartOptions.table_options.show_row_total ? '700' : '400',
+                    paddingRight: '4px',
+                    paddingLeft: '4px',
+                    wrap: 'nowrap',
+                    visibility: 'hidden',
+                };
+                let td = document.createElement('td');
+                for (let [key, value] of _.entries(tdStyles)) {
+                    td.style[key] = value;
+                };
+                td.innerHTML = item.str;
+                document.body.appendChild(td);
+                let width = Math.min(Math.max(td.offsetWidth, minColWidth), maxColWidth);
+                document.body.removeChild(td);
+                return width;
+            };
+
+            var findMergeCols = function(ds) {
+                return ds.mergeCells
+                    .filter(cell => cell.row === ds.fixedRows - 1)
+                    .reduce((acc, val) => {
+                        if (!acc[val.col] && val.colspan > 1) acc[val.col] = val.colspan - 1;
+                        return acc;
+                    }, {});
+            };
+
+            var getMergeColsWidth = function(cw, col, m) {
+                let rightColsWidth = 0;
+                for (let _col = col + 1; _col <= col + m; _col++) {
+                    rightColsWidth += cw[_col];
+                };
+                return rightColsWidth >= cw[col] ? 0 : cw[col] - rightColsWidth;
+            };
+
             opts = $.extend(def, opts, true);
 
             var headerRenderer = function (cellProperties) {
@@ -237,9 +302,17 @@ let initNovixRenderer = function($, window, document, Handsontable){
                 dataSource.fixedColumns = pvtData.rowAttrs.length + (hasColumnAttr ? 1 : 0);
                 dataSource.fixedRows = pvtData.colAttrs.length + (hasRowAttr ? 1 : 0);
 
+                for (let i = 0; i < pvtData.rowAttrs.length; i++) {
+                    rowKeys.sort((a,b) => {
+                        if (_.isEqual(a.slice(0, i), b.slice(0,i)) && a[i] && a[i] === subtotal) return -1;
+                        if (_.isEqual(a.slice(0, i), b.slice(0,i)) && b[i] && b[i] === subtotal) return 1;
+                        return 0;
+                    });
+                };
+
                 // for extra rows on edit mode. Where show only one dimension on row o column.
                 var extraColumnLabel = "Grand Totals";
-                var extraRowLabel = "";
+                var extraRowLabel = "Grand Totals";
                 if (opts.totalFilterElements && opts.totalFilterElements.row_total) {
                     extraColumnLabel = opts.totalFilterElements.row_total.innerHTML;
                 }
@@ -303,13 +376,14 @@ let initNovixRenderer = function($, window, document, Handsontable){
                         //data columns
                         if (pvtData.colKeys.length > 0) {
 
+                            const formattedColKeys = pvtData.getFormattedColKeys(colKeys);
                             var aux = rowData.length;
                             var startCol = aux;
-                            var prior = colKeys[0][nn];
+                            var prior = formattedColKeys[0][nn];
                             var toMerge = 0;
-                            for (var cc = 0; cc < colKeys.length; cc++) {
+                            for (var cc = 0; cc < formattedColKeys.length; cc++) {
 
-                                var textHeader = colKeys[cc][nn];
+                                var textHeader = formattedColKeys[cc][nn];
 
                                 if (nn < pvtData.colAttrs.length - 1 && prior != textHeader) {
                                     rowData.push(textHeader);
@@ -383,46 +457,40 @@ let initNovixRenderer = function($, window, document, Handsontable){
                 // DATA
 
                 var mergeDic = {};
+                const formattedRowKeys = pvtData.getFormattedRowKeys(rowKeys);
 
-                for (var rr = 0; rr < rowKeys.length; rr++) {
+                for (var rr = 0; rr < formattedRowKeys.length; rr++) {
 
                     var rowData = [];
 
+                    if (rr == 0) {
+                        for (var cc = 0; cc < dataSource.fixedColumns; cc++) {
+                            mergeDic[cc] = {
+                                toMerge: 1,
+                                row: 0,
+                                priorText: formattedRowKeys[rr][cc]
+                            };
+                        }
+                    }
+
                     //column for row atts
                     for (var cc = 0; cc < pvtData.rowAttrs.length; cc++) {
-
-                        rowData.push(rowKeys[rr][cc]);
-
+                        rowData.push(formattedRowKeys[rr][cc]);
+                        if (formattedRowKeys[rr][cc] === subtotal) {
+                            addMergeCell(rr + pvtData.colAttrs.length + 1, cc, 1, dataSource.fixedColumns - cc, true, true);
+                        } else if (cc === formattedRowKeys[rr].length - 1 && hasColumnAttr) {
+                            addMergeCell(rr + pvtData.colAttrs.length + 1, cc, 1, 2, true, true);
+                        }
                         // merge cell (last column)
-                        if (opts.chartOptions.table_options.show_column_total) {
-
-                            if (cc == rowKeys[rr].length - 1 && hasColumnAttr) {
-                                addMergeCell(rr + pvtData.colAttrs.length + 1, cc, 1, 2, true, true);
-                            }
-                            else {
-                                // init mergeDic
-                                if (rr == 0) {
-                                    mergeDic[cc] = {
-                                        toMerge: 1,
-                                        row: 0,
-                                        priorText: rowKeys[rr][cc]
-                                    };
-                                }
-                                else if (mergeDic[cc]) { // check for merge dic
-                                    if (rowKeys[rr][cc] == mergeDic[cc].priorText) {
-                                        mergeDic[cc].toMerge++;
-                                    }
-                                    else { //create merge cell for this column
-
-                                        if (cc < rowKeys[rr].length - 1) {
-                                            addMergeCell(mergeDic[cc].row + pvtData.colAttrs.length + 1, cc, mergeDic[cc].toMerge, 1);
-                                            mergeDic[cc].row = rr;
-                                            mergeDic[cc].toMerge = 1;
-                                            mergeDic[cc].priorText = rowKeys[rr][cc];
-                                        }
-                                    }
-
-                                }
+                        if (opts.chartOptions.table_options.show_column_total && rr != 0 && mergeDic[cc]) { // check for merge dic
+                            if (formattedRowKeys[rr][cc] == mergeDic[cc].priorText) {
+                                mergeDic[cc].toMerge++;
+                            } else if (cc < formattedRowKeys[rr].length - 1) {
+                                //create merge cell for this column
+                                addMergeCell(mergeDic[cc].row + pvtData.colAttrs.length + 1, cc, mergeDic[cc].toMerge, 1);
+                                mergeDic[cc].row = rr;
+                                mergeDic[cc].toMerge = 1;
+                                mergeDic[cc].priorText = formattedRowKeys[rr][cc];
                             }
                         }
                     }
@@ -457,7 +525,7 @@ let initNovixRenderer = function($, window, document, Handsontable){
                         // var rowKeyAtt = rowKeys[rr].join(String.fromCharCode(0));
                         var rowKeyAtt = rowKeys[rr].join(delim);
                         if (pvtData.rowTotals[rowKeyAtt]) {
-                            let agg = pvtData.allTotal;
+                            let agg = pvtData.getAggregator(rowKeys[rr], []);
                             let preValue = pvtData.rowTotals[rowKeyAtt].value();
                             let cellValue = $.pivotUtilities.getFormattedNumber(preValue, agg, opts);
                             rowData.push(cellValue);
@@ -487,9 +555,6 @@ let initNovixRenderer = function($, window, document, Handsontable){
                 // END DATA
                 // ######
 
-
-
-
                 // ######
                 // TOTAL
                 // colums totals area
@@ -514,7 +579,7 @@ let initNovixRenderer = function($, window, document, Handsontable){
 
                             var colKeyAtt = colKeys[cc].join(delim);
                             if (pvtData.colTotals[colKeyAtt]) {
-                                let agg = pvtData.allTotal;
+                                let agg = pvtData.getAggregator([], colKeys[cc]);
                                 let preValue = pvtData.colTotals[colKeyAtt].value();
                                 let cellValue = $.pivotUtilities.getFormattedNumber(preValue, agg, opts);
                                 rowData.push(cellValue);
@@ -648,6 +713,10 @@ let initNovixRenderer = function($, window, document, Handsontable){
                         td.innerHTML = "";
                     }
 
+                    if (opts.chartOptions.table_options.hide_nulls_in_headers && td.innerHTML === '[null]') {
+                        td.innerHTML = '';
+                    }
+
                     if (opts.chartOptions.table_options.styles) {
                         for (let rule of opts.chartOptions.table_options.styles) {
 
@@ -690,7 +759,6 @@ let initNovixRenderer = function($, window, document, Handsontable){
                             }
                         }
                     }
-
                     return td;
                 };
 
@@ -758,6 +826,7 @@ let initNovixRenderer = function($, window, document, Handsontable){
                 var $tableArea = opts.$el.find(".widget-id-" + opts.widgetId);
                 $tableArea.empty();
                 console.log('Handsontable data', dataSource);
+                var maxWidths = calculateMaxWidths(dataSource);
                 table = new Handsontable($tableArea.get(0), {
                     licenseKey: 'b0eda-7220b-32d15-e4128-c2f4c', //98463-b132b-fcea0-24f22-da020
                     data: dataSource.data,
@@ -770,6 +839,9 @@ let initNovixRenderer = function($, window, document, Handsontable){
                     fixedColumnsLeft: dataSource.fixedColumns,
                     fixedRowsTop: dataSource.fixedRows,
                     mergeCells: dataSource.mergeCells,
+                    colWidths: function(index) {
+                        return maxWidths[index];
+                    },
                     cells: function (row, col, prop) {
                         var cellProperties = {};
                         cellProperties.renderer = genericRenderer;
@@ -817,9 +889,14 @@ let initNovixRenderer = function($, window, document, Handsontable){
 
             // inject the widgetId to the class name so we can separate the tables by it
             // look for the search side on line 653 "opts.$el.find(".widget-id-" + opts.widgetId);"
-            return `<div class='novixPivot widget-id-${opts.widgetId} ${
-              useNewUx && opts.chartOptions.table_options.use_new_table_design ? 'handsontable-new' : ''
-            }' style='overflow:auto'></div>`;
+            var tableClasses = ['novixPivot', `widget-id-${opts.widgetId}`];
+            if (opts.chartOptions.table_options.use_new_table_design) {
+                tableClasses.push('handsontable-new');
+            }
+            if (!pvtData.aggregator().uniq) {
+                tableClasses.push('numbers-to-right');
+            }
+            return `<div class='${tableClasses.join(' ')}' style='overflow:auto'></div>`;
         }
 
     };

package/src/pivot.css

@@ -1,5 +1,9 @@
 .pvtUi { color: #333; }
 
+.pivot-wrapper {
+  display: flex;
+  flex-direction: column;
+}
 
 table.pvtTable {
     font-size: 8pt;
@@ -7,9 +11,8 @@ table.pvtTable {
     border-collapse: collapse;
     width: calc(100% - 30px);
     margin-bottom: 15px;
-    margin-left: 15px;
-    margin-right: 15px;
-    font-family: 'Roboto-Regular',sans-serif;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 400;
     user-select: text;
 }
 table.pvtTable thead tr th, table.pvtTable tbody tr th {
@@ -17,11 +20,14 @@ table.pvtTable thead tr th, table.pvtTable tbody tr th {
     border: 1px solid #CDCDCD;
     font-size: 8pt;
     padding: 5px;
-    font-family: 'Roboto-Medium',sans-serif;
+    font-family: 'Poppins', sans-serif;
+    font-weight: 700;
 }
 
-table.pvtTable .pvtColLabel {text-align: center;}
-table.pvtTable .pvtTotalLabel {text-align: right;}
+table.pvtTable thead tr th > i,
+table.pvtTable tbody tr th > i {
+    font-size: 10px;
+}
 
 table.pvtTable tbody tr td {
     color: #3D3D3D;
@@ -34,7 +40,7 @@ table.pvtTable tbody tr td {
 
 .pvtTotal, .pvtGrandTotal {
     font-weight: bold;
-    font-family: 'Roboto-Bold',sans-serif;
+    font-family: 'Poppins', sans-serif;
 }
 
 .pvtVals { text-align: center; white-space: nowrap;}
@@ -140,6 +146,21 @@ table.pvtTable .pvtAxisLabel {
     white-space: nowrap;
 }
 
+table.pvtTable .axis-freeze-pane {
+  position: relative;
+  z-index: 100;
+}
+
+table.pvtTable .vertical-freeze-pane {
+  position: relative;
+  z-index: 50;
+}
+
+table.pvtTable .horizontal-freeze-pane {
+  position: relative;
+  z-index: 50;
+}
+
 .pvtRowSubtotal {
     background-color: #EFEFEF !important;
     font-weight:bold;
@@ -156,7 +177,7 @@ table.pvtTable .pvtAxisLabel {
 
 
 table.pvtTable.colorized thead tr th, table.pvtTable.colorized tbody tr th {
-    background-color: transparent;
+    background-color: transparent ;
     /*border: none;*/
 }
 
@@ -165,7 +186,7 @@ table.pvtTable.colorized tbody tr td {
 }
 
 table.pvtTable.colorized .pvtRowSubtotal, table.pvtTable.colorized .pvtColSubtotal {
-    background-color: transparent !important;
+    background-color: transparent  !important;
 }
 
 
@@ -192,13 +213,13 @@ table.pvtTable.newPvtTable {
   width: calc(100% - 40px);
   margin-left: 20px;
   margin-right: 20px;
-  font-family: 'Roboto',sans-serif;
+  font-family: 'Poppins', sans-serif;
 }
 
 table.pvtTable.newPvtTable thead tr th,
 table.pvtTable.newPvtTable tbody tr th {
   font-size: 10px;
-  font-family: 'Roboto', sans-serif;
+  font-family: 'Poppins', sans-serif;
 }
 
 table.pvtTable.newPvtTable thead tr th {
@@ -216,6 +237,7 @@ table.pvtTable.newPvtTable thead tr th .dr-icon-minus {
   margin-right: 2px;
   margin-left: 1px;
   font-size: 8px;
+  color: #151a41;
 }
 
 table.pvtTable.newPvtTable.colorized tr th.colTotal,
@@ -238,11 +260,6 @@ table.pvtTable.newPvtTable tbody tr td.rowTotal {
   background-color: #dfe6ec !important;
   border-color: #ffffff !important;
 }
-table.pvtTable.newPvtTable .pvtColLabel,
-table.pvtTable.newPvtTable .pvtTotalLabel,
-table.pvtTable.newPvtTable .pvtTotalLabel.rowTotal {
-  text-align: left;
-}
 
 table.pvtTable.newPvtTable tbody tr th .fa {
   padding: 2px;
@@ -262,6 +279,90 @@ table.pvtTable.newPvtTable tbody tr td {
   padding: 0 5px;
   vertical-align: middle;
 }
+
+table.pvtTable thead tr th.axis-freeze-pane:before,
+table.pvtTable thead tr th.vertical-freeze-pane:before,
+table.pvtTable.newPvtTable thead tr th.axis-freeze-pane:before,
+table.pvtTable.newPvtTable thead tr th.vertical-freeze-pane:before {
+  content: '';
+  width: calc(100% + 1px);
+  height: 1px;
+  background: white;
+  position: absolute;
+  top: -1px;
+  left: 0;
+}
+
+table.pvtTable thead tr th.axis-freeze-pane:before,
+table.pvtTable thead tr th.vertical-freeze-pane:before {
+  background: #cdcdcd;
+}
+
+table.pvtTable thead tr th.axis-freeze-pane:after,
+table.pvtTable thead tr th.vertical-freeze-pane:after,
+table.pvtTable.newPvtTable thead tr th.axis-freeze-pane:after,
+table.pvtTable.newPvtTable thead tr th.vertical-freeze-pane:after {
+  content: '';
+  width: 1px;
+  height: 100%;
+  background: white;
+  position: absolute;
+  right: -1px;
+  top: 0;
+}
+table.pvtTable thead tr th.axis-freeze-pane:after,
+table.pvtTable thead tr th.vertical-freeze-pane:after {
+  background: #cdcdcd;
+}
+
+table.pvtTable tbody tr th.horizontal-freeze-pane:before,
+table.pvtTable tbody tr td.horizontal-freeze-pane:before,
+table.pvtTable.newPvtTable tbody tr th.horizontal-freeze-pane:before,
+table.pvtTable.newPvtTable tbody tr td.horizontal-freeze-pane:before {
+  content: '';
+  width: calc(100% + 1px);
+  height: 1px;
+  background: #dfe6ec;
+  position: absolute;
+  top: -1px;
+  left: 0;
+}
+table.pvtTable tbody tr th.horizontal-freeze-pane:before,
+table.pvtTable tbody tr td.horizontal-freeze-pane:before {
+  background: #cdcdcd;
+}
+table.pvtTable tbody tr th.colTotal.horizontal-freeze-pane:before,
+table.pvtTable tbody tr td.colTotal.horizontal-freeze-pane:before {
+  background: transparent;
+}
+
+table.pvtTable tbody tr th.horizontal-freeze-pane:after,
+table.pvtTable tbody tr td.horizontal-freeze-pane:after,
+table.pvtTable.newPvtTable tbody tr th.horizontal-freeze-pane:after,
+table.pvtTable.newPvtTable tbody tr td.horizontal-freeze-pane:after {
+  content: '';
+  width: 1px;
+  height: 100%;
+  background: #dfe6ec;
+  position: absolute;
+  right: -1px;
+  top: 0;
+}
+
+table.pvtTable tbody tr th.horizontal-freeze-pane:after,
+table.pvtTable tbody tr td.horizontal-freeze-pane:after {
+  background: #cdcdcd;
+}
+
+table.pvtTable.newPvtTable tbody tr th.horizontal-freeze-pane.colTotal:after {
+  background: #fff;
+}
+
+table.pvtTable.colorized:not(.newPvtTable) tbody tr th.horizontal-freeze-pane,
+table.pvtTable.newPvtTable.colorized tbody tr th.horizontal-freeze-pane:not(.highlighted):not(.colTotal) {
+  background-color: #fff !important;
+}
+
 table.pvtTable.newPvtTable tbody tr th {
   vertical-align: top;
   padding-top: 2.5px;
@@ -290,7 +391,7 @@ table.pvtTable.newPvtTable tbody tr td:hover {
 
 table.pvtTable.newPvtTable tbody tr td.hover:after,
 table.pvtTable.newPvtTable tbody tr td:hover:after {
-  content: "\e90c";
+  content: "\e923";
   width: 2px;
   color: #85889c;
   font:  normal normal normal 14px/1 DataRails;
@@ -299,3 +400,27 @@ table.pvtTable.newPvtTable tbody tr td:hover:after {
   top: 4px;
   font-size: 12px;
 }
+
+
+/* Table cells alignment */
+table.pvtTable .pvtColLabel {text-align: center;}
+table.pvtTable .pvtTotalLabel {text-align: right;}
+
+table.pvtTable.newPvtTable .pvtColLabel,
+table.pvtTable.newPvtTable .pvtTotalLabel,
+table.pvtTable.newPvtTable .pvtTotalLabel.rowTotal {
+    text-align: left;
+}
+
+table.pvtTable thead tr th.pvtColLabel,
+table.pvtTable thead tr th.pvtTotalLabel  {
+    text-align: center !important;
+}
+
+table.pvtTable.numbers-to-right tbody tr td.pvtVal,
+table.pvtTable.numbers-to-right tbody tr td.rowTotal.rowTotal,
+table.pvtTable.numbers-to-right tbody tr td.pvtGrandTotal  {
+    text-align: right;
+    padding-right: 9px;
+    line-height: 15px;
+}