@datarailsshared/dr_renderer 1.2.78 → 1.2.81

package/package.json

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

package/src/dr_pivottable.js

@@ -6,8 +6,6 @@ let initDRPivotTable = function($, window, document) {
     var DRPivotData, sortDateStrings, getSort, processKey, SubtotalRenderer, getFormattedNumber, largeToSmallSort, largeToSmallSortByAbsolute, NovixRenderer;
 
     var delim = " , ";
-    const newTableColors = ['rgb(127, 196, 255)', 'rgb(200, 243,243)', 'rgb(247, 161, 173)', 'rgb(255, 237, 178)', 'rgb(221, 239, 255)',
-        'rgb(171, 216, 255)', 'rgb(174, 231, 220)', 'rgb(227, 255, 236)', 'rgb(162, 215, 227)', 'rgb(223, 239, 236)'];
     const useNewUx = document.ReportHippo && document.ReportHippo && document.ReportHippo.user &&
       document.ReportHippo.user.organization.settings && document.ReportHippo.user.organization.settings.use_new_ux;
     // const numberOfRows = 500; // change to activate the handsontable when num of rows bigger then this.
@@ -643,18 +641,56 @@ let initDRPivotTable = function($, window, document) {
         }
 
         getColorsWithOffsetForTable = function (value) {
+            var colors = [];
+
+            if (opts.paletteOptions.widgetPalette) {
+                const mc_palette = _.find(_.get(opts.paletteOptions, 'monochromePalettes', []), { selected: true });
+                colors = mc_palette ? mc_palette.colors : opts.paletteOptions.widgetPalette;
+            } else if (opts.paletteOptions.dashboardPalette.colors) {
+                colors = opts.paletteOptions.dashboardPalette.colors;
+            }
+
             var isNewDesign = useNewUx && opts.chartOptions.table_options.use_new_table_design;
             if (value) {
                 var offset = parseInt(value);
                 if (offset) {
                     if (isNewDesign) {
-                        return offsetColors(offset, newTableColors);
+                        return offsetColors(offset, colors);
                     } else {
                         return offsetColors(offset, opts.defaults_colors);
                     }
                 }
             }
-            return isNewDesign ? newTableColors : opts.defaults_colors;
+            return isNewDesign ? colors : opts.defaults_colors;
+        }
+
+        function invertColors(color) {
+            const hexLuminance = 186;
+            const rgbLuminance = 0.5;
+            let isHex = color[0] === '#';
+            let r;
+            let g;
+            let b;
+            if (!isHex) {
+                let rgbaColorParts = color.replace(/[^0-9.,]/g, '').split(',');
+                r = rgbaColorParts[0]/255;
+                g = rgbaColorParts[1]/255;
+                b = rgbaColorParts[2]/255;
+            } else {
+                color = color.slice(1);
+
+                if (color.length === 3) {
+                    color = color[0].repeat(2) + color[1].repeat(2) + color[2].repeat(2);
+                } else if (color.length !== 6) {
+                    return "#FFFFFF";
+                }
+                r = parseInt(color.slice(0, 2), 16);
+                g = parseInt(color.slice(2, 4), 16);
+                b = parseInt(color.slice(4, 6), 16);
+            }
+            return (r * 0.299 + g * 0.587 + b * 0.114) > (isHex ? hexLuminance : rgbLuminance)
+                ? '#000000'
+                : '#FFFFFF';
         }
 
         colorizeRowLabelHeaders = function(element, cols_count){
@@ -665,7 +701,9 @@ let initDRPivotTable = function($, window, document) {
                 if(color_to_set){
                     element.style.setProperty("background-color", color_to_set, "important");
                     element.style.setProperty("border-color", color_to_set, "important");
-                    element.style.color = useNewUx && opts.chartOptions.table_options.use_new_table_design? '#3a3b39' : '#FFFFFF';
+                    element.style.color = useNewUx && opts.chartOptions.table_options.use_new_table_design
+                        ? invertColors(color_to_set)
+                        : '#3a3b39';
                     element.style.fontWeight = "bold";
                     if (opts.chartOptions.table_options.freeze_panes && element.firstChild) {
                         for (const child of element.children) {
@@ -695,7 +733,9 @@ let initDRPivotTable = function($, window, document) {
                     element.style.setProperty("background-color", color_to_set, "important");
                     element.style.setProperty("border-color", color_to_set, "important");
                     element.style.setProperty("vertical-align", "baseline");
-                    element.style.color = useNewUx && opts.chartOptions.table_options.use_new_table_design? '#3a3b39' : '#FFFFFF';
+                    element.style.color = useNewUx && opts.chartOptions.table_options.use_new_table_design
+                        ? invertColors(color_to_set)
+                        : '#3a3b39';
                     element.style.fontWeight = "bold";
                     if (opts.chartOptions.table_options.freeze_panes && element.firstChild) {
                         for (const child of element.children) {

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;
@@ -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;
@@ -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 => {

package/src/published_items_renderer.js

@@ -155,14 +155,14 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
             labelEl.innerText = inputMetaData.format ? formatValue('n', inputMetaData.format, inputMetaData.value).value : inputMetaData.value;
           }
           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;");
+            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 8px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;width: calc(100% - 15px);border: 0;margin: 5px;text-align: inherit;display: block;");
+              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;");
             }
@@ -176,7 +176,7 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
           inEl.setAttribute("type", "number");
           inEl.setAttribute("name", inputMetaData.name);
           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;");
+            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;");
           }
@@ -207,7 +207,7 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
           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 8px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;cursor:pointer;">' + formattedDate + '</label>';
+             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>';
           }
@@ -244,7 +244,7 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
           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 8px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;cursor: pointer;">' + inputMetaData.value + '</label><i class="filter_icon"></i>';
+            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>';
           }
@@ -289,7 +289,7 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
     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;";
+    const styleForLabel = "background: #FFEDBF;padding: 2px 1px 2px 6px;border: 1px solid #FABC5F;border-radius: 6px;cursor:pointer;";
     if (!options.inputValuesData) {
       options.inputValuesData = {};
     }
@@ -299,7 +299,7 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
       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: #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;");
       });
     }