@datarailsshared/dr_renderer 1.2.80 → 1.2.81

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/dr_renderer",
-  "version": "1.2.80",
+  "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) {