@datarailsshared/dr_renderer 1.2.331 → 1.2.333

package/package.json

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

package/src/dr_pivottable.js

@@ -920,7 +920,7 @@ let initDRPivotTable = function($, window, document) {
             return string_val;
         };
 
-        processKeys = function(keysArr, className, dimention, attrs) {
+        processKeys = function(keysArr, className, dimention, attrs, formattedKeys) {
             for (let i = 0; i < keysArr.length; i++) {
                 const additionalField = _.find(additionalFieldsList, {key: keysArr[i][0]})
 
@@ -941,7 +941,7 @@ let initDRPivotTable = function($, window, document) {
                 lastCol = 0;
             }
             rMark = [];
-            th = createElement("th", className, valueNoDashes(encodeHtmlEntities(keysArr[0][0]) + getSubtotalInBrackets(keysArr, className, lastCol, lastRow, 0, 0)));
+            th = createElement("th", className, valueNoDashes(encodeHtmlEntities(formattedKeys[0][0]) + getSubtotalInBrackets(keysArr, className, lastCol, lastRow, 0, 0)));
             key = [];
             key.push(keysArr[0][0]);
             nodePos = 0;
@@ -961,7 +961,7 @@ let initDRPivotTable = function($, window, document) {
             rMark[0] = node;
             c = 1;
             while (c <= lastCol) {
-                th = createElement("th", className, valueNoDashes(encodeHtmlEntities(keysArr[0][c]) + getSubtotalInBrackets(keysArr, className, lastCol, lastRow, 0, c)));
+                th = createElement("th", className, valueNoDashes(encodeHtmlEntities(formattedKeys[0][c]) + getSubtotalInBrackets(keysArr, className, lastCol, lastRow, 0, c)));
                 key = key.slice();
                 key.push(keysArr[0][c]);
                 ++nodePos;
@@ -1027,7 +1027,7 @@ let initDRPivotTable = function($, window, document) {
                     }
 
 
-                    th = createElement("th", className, valueNoDashes(encodeHtmlEntities(keysArr[r][c]) + getSubtotalInBrackets(keysArr, className, lastCol, lastRow, r, c)));
+                    th = createElement("th", className, valueNoDashes(encodeHtmlEntities(formattedKeys[r][c]) + getSubtotalInBrackets(keysArr, className, lastCol, lastRow, r, c)));
                     ++nodePos;
                     node = {
                         node: nodePos,
@@ -2451,7 +2451,7 @@ let initDRPivotTable = function($, window, document) {
             return Array.from(wrapper.querySelectorAll(selectString));
         }
 
-        main = function(rowAttrs, rowKeys, colAttrs, colKeys) {
+        main = function(rowAttrs, rowKeys, colAttrs, colKeys, pivotData) {
             var c,rowspan, colHeaderCols, colHeaderHeaders, colHeaders, h, k, l, len, len1, result, rowHeaderHeaders, rowHeaderRows, rowHeaders, tbody, thead, tr;
             rowHeaders = [];
             colHeaders = [];
@@ -2460,10 +2460,12 @@ let initDRPivotTable = function($, window, document) {
             colHeaderHeaders = [];
             colHeaderCols = [];
             if (rowAttrs.length > 0 && rowKeys.length > 0) {
-                rowHeaders = processKeys(rowKeys, "pvtRowLabel", 'rows', rowAttrs);
+                const formattedKeys = pivotData.getFormattedRowKeys(rowKeys);
+                rowHeaders = processKeys(rowKeys, "pvtRowLabel", 'rows', rowAttrs, formattedKeys);
             }
             if (colAttrs.length > 0 && colKeys.length > 0) {
-                colHeaders = processKeys(colKeys, "pvtColLabel", 'cols', colAttrs);
+                const formattedKeys = pivotData.getFormattedColKeys(colKeys);
+                colHeaders = processKeys(colKeys, "pvtColLabel", 'cols', colAttrs, formattedKeys);
             }
             var tableClasses = ['pvtTable'];
             if (opts.chartOptions.table_options.use_new_table_design) {
@@ -2608,7 +2610,7 @@ let initDRPivotTable = function($, window, document) {
 
             return wrapper;
         };
-        return main(rowAttrs, rowKeys, colAttrs, colKeys);
+        return main(rowAttrs, rowKeys, colAttrs, colKeys, pivotData);
     };
     // $.pivotUtilities.subtotal_renderers = SubtotalRenderer;
     $.pivotUtilities.subtotal_renderers = NovixRenderer;

package/src/highcharts_renderer.js

@@ -142,6 +142,7 @@ const CHART_LEGEND_DEFAULT_LABEL = 'Legend (Series)';
 const FEATURES = {
     ENABLE_NEW_WIDGET_VALUE_FORMATTING: 'enable_new_widget_value_formatting',
     ENABLE_SERVER_TOTALS_CALCULATION: 'enable_server_totals_calculation',
+    FORMAT_AXIS: 'use_default_table_format_for_axis',
 }
 
 let getHighchartsRenderer = function ($, document, Highcharts, default_colors, highchartsRenderer,
@@ -1154,8 +1155,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             let squareXSum = 0;
             ob.data = [];
             if (row_n_value && row_n_value.length > 0) {
-                ob.name = row_n_value.join(highchartsRenderer.delimer)
+                ob.initialName = row_n_value.join(highchartsRenderer.delimer)
                     .replace(highchartsRenderer.DR_OTHERS_KEY, othersName);
+                ob.name = highchartsRenderer.getFormattedRowKey(ob.initialName, pivotData); 
             }
             lodash.forEach(col_n_keys, function (col_n_value, index) {
                 var agg = pivotData.getAggregator(row_n_value, col_n_value);
@@ -1196,7 +1198,15 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     );
                 }
 
-                ob.data.push(key ? { y: val, name: lodash.unescape(key) } : val);
+                ob.data.push(
+                    key
+                        ? { 
+                            y: val,
+                            initialName: lodash.unescape(key),
+                            name: highchartsRenderer.getFormattedColKey(lodash.unescape(key), pivotData),
+                        }
+                        : val
+                );
             });
 
             if (colors && colors[i]) {
@@ -1326,8 +1336,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             var ob = {};
             ob.data = [];
             if (row_n_value && row_n_value.length > 0) {
-                ob.name = lodash.unescape(row_n_value.join(highchartsRenderer.delimer)
+                ob.initialName = lodash.unescape(row_n_value.join(highchartsRenderer.delimer)
                     .replace(highchartsRenderer.DR_OTHERS_KEY, othersName));
+                ob.name = highchartsRenderer.getFormattedRowKey(ob.initialName, pivotData);
             }
 
             ob.dataLabels = {
@@ -1364,15 +1375,17 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 if (lodash.isArray(col_n_value)) {
                     key = col_n_value[0];
                 }
-                tmoobj.name = lodash.unescape(key);
+                tmoobj.initialName = lodash.unescape(key);
 
-                if (tmoobj.name) {
-                    tmoobj.name = tmoobj.name.replace(highchartsRenderer.DR_OTHERS_KEY, othersName);
+                if (tmoobj.initialName) {
+                    tmoobj.initialName = tmoobj.initialName.replace(highchartsRenderer.DR_OTHERS_KEY, othersName);
                 }
 
-                if (lodash.isEmpty(String(tmoobj.name))) {
-                    tmoobj.name = "[blank]";
+                if (lodash.isEmpty(String(tmoobj.initialName))) {
+                    tmoobj.initialName = "[blank]";
                 }
+                tmoobj.name = highchartsRenderer.getFormattedColKey(tmoobj.initialName, pivotData);
+
                 tmoobj.y = val;
                 if (!isNotDrilldown)
                     tmoobj.drilldown = true;
@@ -1528,10 +1541,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         lodash.forEach(col_n_keys, function(col_n_value, col_index) {
 
             const totalColumnValue = pivotData.getAggregator([], col_n_value).value();
+            const totalName = lodash.unescape(col_n_value).replace(highchartsRenderer.DR_OTHERS_KEY, highchartsRenderer.getOthersName(opts));
             resultObject.data.push({
                 y: totalColumnValue,
-                name: lodash.unescape(col_n_value)
-                    .replace(highchartsRenderer.DR_OTHERS_KEY, highchartsRenderer.getOthersName(opts)),
+                name: highchartsRenderer.getFormattedColKey(totalName, pivotData),
+                initialName: totalName,
                 isSum: !!col_index,
                 isTotal: true,
                 color: colorOptions.total,
@@ -1546,18 +1560,19 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     if (val) {
                         const tmoobj = {};
                         const key = lodash.isArray(row_n_value) ? row_n_value[0] : row_n_value;
-                        tmoobj.name = lodash.unescape(key);
+                        tmoobj.initialName = lodash.unescape(key);
 
-                        if (tmoobj.name) {
-                            tmoobj.name = tmoobj.name
+                        if (tmoobj.initialName) {
+                            tmoobj.initialName = tmoobj.initialName
                                 .replace(highchartsRenderer.DR_OTHERS_KEY, highchartsRenderer.getOthersName(opts));
                         }
 
-                        if (lodash.isEmpty(String(tmoobj.name))) {
-                            tmoobj.name = lodash.unescape(col_n_value);
+                        if (lodash.isEmpty(String(tmoobj.initialName))) {
+                            tmoobj.initialName = lodash.unescape(col_n_value);
                             tmoobj.visible = false;
                         }
 
+                        tmoobj.name = highchartsRenderer.getFormattedRowKey(tmoobj.initialName, pivotData);
                         tmoobj.y = val;
                         tmoobj.colKeys = [lodash.unescape(col_n_value), lodash.unescape(col_n_keys[col_index + 1])];
                         resultObject.data.push(tmoobj);
@@ -1644,7 +1659,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 increase: '#20A452',
             };
 
-            const name = value.trend === 'total' ? value.formattedKey || value.key[0] : keys.join(highchartsRenderer.delimer);
+            let initialName = value.trend === 'total' ? value.formattedKey || value.key[0] : keys.join(highchartsRenderer.delimer);
+            let name = value.trend === 'total' ? initialName : highchartsRenderer.getFormattedColKey(initialName, pivotData);
+                
             let color = '';
 
             if (!lodash.get(waterfallOptions, 'colors', {}) && value.color) {
@@ -1804,15 +1821,17 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
             var ob = {};
             // check string contains hebrew
-            ob.name = (/[\u0590-\u05FF]/).test(key) ? ('\u200E' + key) : key;
+            ob.initialName = (/[\u0590-\u05FF]/).test(key) ? ('\u200E' + key) : key;
             if (lodash.isEmpty(String(ob.name))) {
-                ob.name = "[blank]";
+                ob.initialName = "[blank]";
             }
 
-            if (ob.name === highchartsRenderer.DR_OTHERS_KEY) {
-                ob.name = othersName;
+            if (ob.initialName === highchartsRenderer.DR_OTHERS_KEY) {
+                ob.initialName = othersName;
             }
 
+            ob.name = highchartsRenderer.getFormattedColKey(ob.initialName, pivotData);
+
             ob.y = val;
             if (!isNaN(key))
                 key = Number(key)
@@ -1844,7 +1863,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             var col_n = col_n_value[0];
             if (col_n != undefined) {
                 col_ob.id = !isNaN(col_n) ? Number(col_n) : col_n;
-                col_ob.name = col_n === highchartsRenderer.DR_OTHERS_KEY ? othersName : col_n;
+                col_ob.initialName = col_n === highchartsRenderer.DR_OTHERS_KEY ? othersName : col_n;
+                col_ob.name = highchartsRenderer.getFormattedColKey(col_ob.initialName, pivotData);
                 col_ob.data = [];
                 lodash.forEach(row_n_keys, function (row_n_value) {
                     var agg = pivotData.getAggregator(row_n_value, col_n_value);
@@ -1859,8 +1879,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             // }
                         }
 
-                        const row_name = row_n_value[0] === highchartsRenderer.DR_OTHERS_KEY ? othersName : row_n_value[0];
-                        col_ob.data.push([row_name, val]);
+                        const row_initial_name = row_n_value[0] === highchartsRenderer.DR_OTHERS_KEY ? othersName : row_n_value[0];
+                        const row_name = highchartsRenderer.getFormattedRowKey(row_initial_name, pivotData);
+                        col_ob.data.push({
+                            name: row_name,
+                            initialName: row_initial_name,
+                            y: val
+                        });
                     }
                 });
                 if (col_ob.data.length) {
@@ -2024,9 +2049,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         lodash.forEach(col_n_keys, function (key) {
             var ob = {};
-            ob.name = key;
-            if (lodash.isEmpty(String(ob.name))) {
-                ob.name = "[blank]";
+            ob.initialName = key;
+            if (lodash.isEmpty(String(ob.initialName))) {
+                ob.initialName = "[blank]";
             }
             if (row_n_keys && row_n_keys.length > 0) {
                 agg = pivotData.getAggregator(row_n_keys[0], key); // tale first row
@@ -2034,6 +2059,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 agg = pivotData.getAggregator([], key);
             }
             ob.y = agg.value();
+            ob.name = highchartsRenderer.getFormattedColKey(ob.initialName, pivotData);
             pie_series.push(ob);
         });
 
@@ -2138,7 +2164,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
 
-        chartOptions.xAxis = {categories: pivotData.getColKeys()};
+        chartOptions.xAxis = {
+            categories: highchartsRenderer.getFormattedColKeys(pivotData, null),
+        };
         chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true, null, null, opts, chartOptions);
 
         var total = [];
@@ -2280,7 +2308,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             };
 
 
-        chartOptions.xAxis = {categories: pivotData.getColKeys()};
+        chartOptions.xAxis = {
+            categories: highchartsRenderer.getFormattedColKeys(pivotData, null),
+        };
         chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true, null, null, opts, chartOptions);
 
         var total = [];
@@ -2620,10 +2650,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             };
 
         chartOptions.xAxis = {
-            categories: pivotData.getColKeys(),
+            categories: highchartsRenderer.getFormattedColKeys(pivotData, null),
             title: {
                 text: additionOptions && additionOptions.axisX ? additionOptions.axisX.name : '',
-            }
+            },
         };
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
         chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, additionOptions, opts, chartOptions);
@@ -2704,7 +2734,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         };
 
         chartOptions.xAxis = {
-            categories: pivotData.getColKeys(),
+            categories: highchartsRenderer.getFormattedColKeys(pivotData, null),
             title: {
                 text: additionOptions && additionOptions.axisX ? additionOptions.axisX.name : '',
             }
@@ -2805,7 +2835,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
 
         chartOptions.xAxis = {
-            categories: pivotData.getColKeys(),
+            categories: highchartsRenderer.getFormattedColKeys(pivotData, null),
             title: {
                 text: additionOptions && additionOptions.axisX ? additionOptions.axisX.name : '',
             }
@@ -2853,7 +2883,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
 
         chartOptions.xAxis = {
-            categories: pivotData.getColKeys(),
+            categories: highchartsRenderer.getFormattedColKeys(pivotData, null),
             tickmarkPlacement: 'on',
             title: {
                 text: additionOptions && additionOptions.axisX ? additionOptions.axisX.name : '',
@@ -2954,7 +2984,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
 
         chartOptions.xAxis = {
-            categories: pivotData.getColKeys(),
+            categories: highchartsRenderer.getFormattedColKeys(pivotData, null),
             tickmarkPlacement: 'on',
             title: {
                 text: additionOptions && additionOptions.axisX ? additionOptions.axisX.name : '',
@@ -2979,6 +3009,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             zoomType: additionOptions && additionOptions.chart && additionOptions.chart.zoom_type ? additionOptions.chart.zoom_type : 'None',
             events: {
                 'drilldown': function (e) {
+                    highchartsRenderer.modifyEventPointForDrilldown(e);
                     if (drilldownFunc)
                         drilldownFunc(e, this, "drilldown");
 
@@ -3097,6 +3128,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             zoomType: 'x',
             events: {
                 'drilldown': function (e) {
+                    highchartsRenderer.modifyEventPointForDrilldown(e);
                     if (drilldownFunc)
                         drilldownFunc(e, this, "drilldown");
 
@@ -3254,6 +3286,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             type: 'column',
             events: {
                 'drilldown': function (e) {
+                    highchartsRenderer.modifyEventPointForDrilldown(e);
                     if (drilldownFunc)
                         drilldownFunc(e, this, "drilldown");
 
@@ -3316,7 +3349,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             },
         };
 
-        chartOptions.xAxis = {type: 'category'};
+        chartOptions.xAxis = {
+            type: 'category',
+        };
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
         chartOptions.series = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData, chartOptions, additionOptions, opts);
         //if (drilldownFunc)
@@ -3365,11 +3400,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             chartOptions.colors = highchartsRenderer.getColorsWithOffset(additionOptions.chart.colors_offset);
         }
         chartOptions.xAxis = {
-            categories: pivotData.getColKeys(),
+            categories: highchartsRenderer.getFormattedColKeys(pivotData, null),
             crosshair: true,
             title: {
                 text: additionOptions && additionOptions.axisX ? additionOptions.axisX.name : ''
-            }
+            },
         };
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
         chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, null, opts, chartOptions);
@@ -3449,11 +3484,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     return "";
                 },
                 style: lodash.merge(
-                    highchartsRenderer.getDataLabelsStyle(additionOptions),
+                    LABEL_DEFAULT_OPTIONS.style,
                     {
-                        fontWeight: 'normal',
-                        color: (highchartsRenderer.highcharts_theme && highchartsRenderer.highcharts_theme.textColor) || 'gray'
-                    }
+                        color: lodash.get(additionOptions, `${ highchartsRenderer.getLabelOptionKey(additionOptions) }.font_color`)
+                            || LABEL_DEFAULT_OPTIONS.color,
+                    },
+                    highchartsRenderer.getDataLabelsStyle(additionOptions),
                 ),
             },
             labels: {
@@ -3499,10 +3535,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
 
         chartOptions.xAxis = {
-            categories: pivotData.getColKeys(),
+            categories: highchartsRenderer.getFormattedColKeys(pivotData, null),
             title: {
                 text: additionOptions && additionOptions.axisX ? additionOptions.axisX.name : ''
-            }
+            },
         };
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
         chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, null, opts, chartOptions);
@@ -4771,6 +4807,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         optsFiltered = $.extend(defaults, opts);
         result = null;
         try {
+            const isTranspose = lodash.get(opts, 'rendererOptions.chartOptions.table_options.transpose_table', false);
+            opts.getFormattedColKeys = isTranspose ? highchartsRenderer.getFormattedRowKeys : highchartsRenderer.getFormattedColKeys;
+            opts.getFormattedRowKeys = isTranspose ? highchartsRenderer.getFormattedColKeys : highchartsRenderer.getFormattedRowKeys;
+
             pivotData = $.pivotUtilities.getPivotDataModel(rowData, opts);
             pivotData.sortByValueAttrs = [];
             try {
@@ -4823,6 +4863,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 result = {};
             }
         }
+        
         return result;
     };
 
@@ -4852,6 +4893,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             sortByValueAttrs: pivotOptions ? pivotOptions.sortByValueAttrs : null,
             cols: lodash.map(pivotOptions.axisArray, 'name'),
             rows: lodash.map(pivotOptions.legendArray, 'name'),
+            colFormats: lodash.map(pivotOptions.axisArray, 'format'),
+            rowFormats: lodash.map(pivotOptions.legendArray, 'format'),
             rendererOptions: widget.options,
             dateValuesDictionary: pivotOptions ? pivotOptions.dateValuesDictionary : null,
         };
@@ -5930,7 +5973,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 if (!opt) {
                     opt = {};
                 }
-                opt.drillDownListFunc = drillDownListFunc;
+                opt.drillDownListFunc = (e) => {
+                    highchartsRenderer.modifyEventPointForDrilldown(e);
+                    drillDownListFunc(e);
+                };
                 opt.insightsTooltipFunc = insightsTooltipFunc;
                 opt.trackUserInsightsTooltipFunc = trackUserInsightsTooltipFunc;
             } else {
@@ -9312,6 +9358,62 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return highchartsRenderer.enabledNewWidgetValueFormatting && (isCustomFormat || !isSecondaryAxis);
     }
 
+    highchartsRenderer.isFormattingAxis = function () {
+        return lodash.includes(lodash.get(document, 'ReportHippo.user.features', []), FEATURES.FORMAT_AXIS);
+    }
+
+    // Method for getting formatted kyes for Axis (cols, rows)
+    // TODO: Move here dates formatting from highchartsRenderer.getWidgetDataSorters. Ticket created: DR-22009
+    highchartsRenderer.getFormattedKey = function (initialKey, pivotData, type) {
+        const isFlatKey = lodash.isString(initialKey) || lodash.isNumber(initialKey);
+        if (highchartsRenderer.isFormattingAxis() && (isFlatKey || lodash.isArray(initialKey))) {
+            let values = isFlatKey ? initialKey.toString().split(highchartsRenderer.delimer) : lodash.cloneDeep(initialKey);
+            if (values) {
+                lodash.forEach(values, (value, key) => {
+                    const format = pivotData[type][key];
+                    const valueToFloat = parseFloat(value);
+                    values[key] = !isNaN(valueToFloat) && format
+                        ? highchartsRenderer.formatValue('n', format, valueToFloat).value
+                        : value;
+                });
+                return isFlatKey ? values.join(highchartsRenderer.delimer) : values;
+            }
+        }
+        return initialKey;
+    }
+
+    highchartsRenderer.getFormattedColKey = function (initialValue, pivotData) {
+        return highchartsRenderer.getFormattedKey(initialValue, pivotData, 'colFormats')
+    }
+
+    highchartsRenderer.getFormattedRowKey = function (initialValue, pivotData) {
+        return highchartsRenderer.getFormattedKey(initialValue, pivotData, 'rowFormats')
+    }
+
+    highchartsRenderer.getFormattedKeys = function(pivotData, isCols, keys) {
+        keys = keys || (isCols ? pivotData.getColKeys() : pivotData.getRowKeys());
+        return highchartsRenderer.isFormattingAxis()
+            ? lodash.map(keys, key => highchartsRenderer.getFormattedKey(key, pivotData, isCols ? 'colFormats' : 'rowFormats'))
+            : keys;
+    }
+
+    highchartsRenderer.getFormattedColKeys = function(pivotData, keys) {
+        return highchartsRenderer.getFormattedKeys(pivotData, true, keys);
+    }
+
+    highchartsRenderer.getFormattedRowKeys = function(pivotData, keys) {
+        return highchartsRenderer.getFormattedKeys(pivotData, false, keys);
+    }
+
+    highchartsRenderer.modifyEventPointForDrilldown = function(e) {
+        if (!highchartsRenderer.isFormattingAxis()) {
+            return;
+        }
+        e.point = lodash.cloneDeep(e.point);
+        e.point.name = e.point.initialName;
+        lodash.set(e, 'point.category.userOptions', e.point.initialName.toString().split(highchartsRenderer.delimer));
+    }
+
     return highchartsRenderer;
 };
 

package/src/novix_renderer.js

@@ -376,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);
@@ -456,8 +457,9 @@ 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 = [];
 
@@ -466,29 +468,29 @@ let initNovixRenderer = function($, window, document, Handsontable){
                             mergeDic[cc] = {
                                 toMerge: 1,
                                 row: 0,
-                                priorText: rowKeys[rr][cc]
+                                priorText: formattedRowKeys[rr][cc]
                             };
                         }
                     }
 
                     //column for row atts
                     for (var cc = 0; cc < pvtData.rowAttrs.length; cc++) {
-                        rowData.push(rowKeys[rr][cc]);
-                        if (rowKeys[rr][cc] === subtotal) {
+                        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 === rowKeys[rr].length - 1 && hasColumnAttr) {
+                        } 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 && rr != 0 && mergeDic[cc]) { // check for merge dic
-                            if (rowKeys[rr][cc] == mergeDic[cc].priorText) {
+                            if (formattedRowKeys[rr][cc] == mergeDic[cc].priorText) {
                                 mergeDic[cc].toMerge++;
-                            } else if (cc < rowKeys[rr].length - 1) {
+                            } 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 = rowKeys[rr][cc];
+                                mergeDic[cc].priorText = formattedRowKeys[rr][cc];
                             }
                         }
                     }

package/src/pivottable.js

@@ -694,6 +694,11 @@ let initPivotTable = function($, window, document) {
             this.sorted = false;
             this.dateValuesDictionary = opts.dateValuesDictionary;
             this.sortByValueAttrs = opts.sortByValueAttrs || [];
+            this.colFormats = opts.colFormats || [];
+            this.rowFormats = opts.rowFormats || [];
+            this.getFormattedColKeys = (keys) => opts.getFormattedColKeys(this, keys);
+            this.getFormattedRowKeys = (keys) => opts.getFormattedRowKeys(this, keys);
+
             PivotData.forEachRecord(this.input, this.derivedAttributes, (function(_this) {
                 return function(record) {
                     if (_this.filter(record)) {

package/tests/highcharts_renderer.test.js

@@ -4818,4 +4818,348 @@ describe('highcharts_renderer', () => {
             expect(result).toEqual(expectedValue);
         });
     });
+
+    describe('Function isFormattingAxis', () => {
+        it('should return true if FF is true', () => {
+            lodash.set(document, 'ReportHippo.user.features', ['use_default_table_format_for_axis']);
+            expect(highchartsRenderer.isFormattingAxis()).toEqual(true);
+        });
+
+        it('should return false if FF is false', () => {
+            lodash.set(document, 'ReportHippo.user.features', []);
+            expect(highchartsRenderer.isFormattingAxis()).toEqual(false);
+        });
+    });
+
+    describe('Function getFormattedKey', () => {
+        describe('getFormattedKey with FF on', () => {
+            beforeEach(() => {
+                lodash.set(document, 'ReportHippo.user.features', ['use_default_table_format_for_axis']);
+            });
+    
+            it('should return properly formatted colKey as array', () => {
+                const initialKey = ['1000'];
+                const pivotData = {
+                    colFormats: ['$####.##', '₪####.##'],
+                    rowFormats: ['€####.##', '£####.##'],
+                };
+                const type = 'colFormats';
+                const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
+                expect(formattedKey).toEqual(['$1000.0']);
+            });
+
+            it('should return properly formatted rowKey as array', () => {
+                const initialKey = ['1000'];
+                const pivotData = {
+                    colFormats: ['€####.##', '£####.##'],
+                    rowFormats: ['$####.##', '₪####.##'],
+                };
+                const type = 'rowFormats';
+                const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
+                expect(formattedKey).toEqual(['$1000.0']);
+            });
+
+            it('should return properly formatted colKey as string', () => {
+                const initialKey = '1000';
+                const pivotData = {
+                    colFormats: ['$####.##', '₪####.##'],
+                    rowFormats: ['€####.##', '£####.##'],
+                };
+                const type = 'colFormats';
+                const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
+                expect(formattedKey).toEqual('$1000.0');
+            });
+
+            it('should return properly formatted rowKey as string', () => {
+                const initialKey = '1000';
+                const pivotData = {
+                    colFormats: ['€####.##', '£####.##'],
+                    rowFormats: ['$####.##', '₪####.##'],
+                };
+                const type = 'rowFormats';
+                const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
+                expect(formattedKey).toEqual('$1000.0');
+            });
+
+            it('should return formatted multivalue colKey as string', () => {
+                const initialKey = '1000 , 2000';
+                const pivotData = {
+                    colFormats: ['$####.##', '₪####.##'],
+                };
+                const type = 'colFormats';
+                const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
+                expect(formattedKey).toEqual('$1000.0 , ₪2000.0');
+            });
+
+            it('should return formatted multivalue colKey as array', () => {
+                const initialKey = ['1000', '2000'];
+                const pivotData = {
+                    colFormats: ['$####.##', '₪####.##'],
+                };
+                const type = 'colFormats';
+                const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
+                expect(formattedKey).toEqual(['$1000.0', '₪2000.0']);
+            });
+
+            it('should return not formatted second value (test as array)', () => {
+                const initialKey = ['1000', '2000'];
+                const pivotData = {
+                    colFormats: ['$####.##', null],
+                };
+                const type = 'colFormats';
+                const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
+                expect(formattedKey).toEqual(['$1000.0', '2000']);
+            });
+
+            it('should return not formatted first value (test as array)', () => {
+                const initialKey = ['1000', '2000'];
+                const pivotData = {
+                    colFormats: [null, '$####.##'],
+                };
+                const type = 'colFormats';
+                const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
+                expect(formattedKey).toEqual(['1000', '$2000.0']);
+            });
+        });
+
+        describe('getFormattedKey with FF off', () => {
+            beforeEach(() => {
+                lodash.set(document, 'ReportHippo.user.features', []);
+            });
+    
+            it('should return NOT formatted colKey as array', () => {
+                const initialKey = ['1000'];
+                const pivotData = {
+                    colFormats: ['$####.##', '₪####.##'],
+                    rowFormats: ['€####.##', '£####.##'],
+                };
+                const type = 'colFormats';
+                const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type,);
+                expect(formattedKey).toEqual(['1000']);
+            });
+
+            it('should return NOT formatted rowKey as array', () => {
+                const initialKey = ['1000'];
+                const pivotData = {
+                    colFormats: ['€####.##', '£####.##'],
+                    rowFormats: ['$####.##', '₪####.##'],
+                };
+                const type = 'rowFormats';
+                const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
+                expect(formattedKey).toEqual(['1000']);
+            });
+
+            it('should return NOT formatted colKey as string', () => {
+                const initialKey = '1000';
+                const pivotData = {
+                    colFormats: ['$####.##', '₪####.##'],
+                    rowFormats: ['€####.##', '£####.##'],
+                };
+                const type = 'colFormats';
+                const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
+                expect(formattedKey).toEqual('1000');
+            });
+
+            it('should return NOT formatted rowKey as string', () => {
+                const initialKey = '1000';
+                const pivotData = {
+                    colFormats: ['€####.##', '£####.##'],
+                    rowFormats: ['$####.##', '₪####.##'],
+                };
+                const type = 'rowFormats';
+                const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
+                expect(formattedKey).toEqual('1000');
+            });
+
+            it('should return NOT formatted multivalue colKey as string', () => {
+                const initialKey = '1000 , 2000';
+                const pivotData = {
+                    colFormats: ['$####.##', '₪####.##'],
+                };
+                const type = 'colFormats';
+                const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
+                expect(formattedKey).toEqual('1000 , 2000');
+            });
+
+            it('should return NOT formatted multivalue colKey as array', () => {
+                const initialKey = ['1000', '2000'];
+                const pivotData = {
+                    colFormats: ['$####.##', '₪####.##'],
+                };
+                const type = 'colFormats';
+                const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
+                expect(formattedKey).toEqual(['1000', '2000']);
+            });
+        });
+    });
+
+    describe('Functions getFormattedColKey/getFormattedRowKey', () => {
+        beforeEach(() => {
+            spyOn(highchartsRenderer, 'getFormattedKey').and.returnValue(null);
+        });
+
+        it('should getFormattedColKey call getFormattedKey for colFormats', () => {
+            highchartsRenderer.getFormattedColKey('test1', 'test2');
+            expect(highchartsRenderer.getFormattedKey).toHaveBeenCalledWith('test1', 'test2', 'colFormats');
+        });
+
+        it('should getFormattedRowKey call getFormattedKey for rowFormats', () => {
+            highchartsRenderer.getFormattedRowKey('test1', 'test2');
+            expect(highchartsRenderer.getFormattedKey).toHaveBeenCalledWith('test1', 'test2', 'rowFormats');
+        });
+    });
+
+    describe('Function getFormattedKeys', () => {
+
+        const testKeys = [['1', '11'], ['2', '32'], ['[null]', '43'], ['5', '54'], ['Others', '33'], ['6', '98']];
+        const pivotData = {
+            getColKeys: () => testKeys,
+            getRowKeys: () => testKeys,
+        };
+
+        beforeEach(() => {
+            spyOn(highchartsRenderer, 'getFormattedKey').and.callThrough();
+        });
+
+        describe('getFormattedKeys with FF on', () => {
+
+            beforeEach(() => {
+                lodash.set(document, 'ReportHippo.user.features', ['use_default_table_format_for_axis']);
+            });
+
+            it('should call getFormattedKey 6 times', () => {
+                pivotData.colFormats = ['$####.##', '₪####.##'];
+                const isCols = true;
+                highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
+                expect(highchartsRenderer.getFormattedKey).toHaveBeenCalledTimes(6);
+            });
+    
+            it('should return properly formatted colKeys as arrays [Dataset 1]', () => {
+                pivotData.colFormats = ['$####.##', '₪####.##'];
+                const isCols = true;
+                const formattedKeys = highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
+                expect(formattedKeys).toEqual(
+                    [['$1.0', '₪11.0'], ['$2.0', '₪32.0'], ['[null]', '₪43.0'], ['$5.0', '₪54.0'], ['Others', '₪33.0'], ['$6.0', '₪98.0']]
+                );
+            });
+    
+            it('should return properly formatted colKeys as arrays [Dataset 2]', () => {
+                pivotData.colFormats =  [null, '₪####.##'];
+                const isCols = true;
+                const formattedKeys = highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
+                expect(formattedKeys).toEqual(
+                    [['1', '₪11.0'], ['2', '₪32.0'], ['[null]', '₪43.0'], ['5', '₪54.0'], ['Others', '₪33.0'], ['6', '₪98.0']]
+                );
+            });
+
+            it('should return properly formatted colKeys as arrays [Dataset 3]', () => {
+                pivotData.colFormats = ['$####.##', null];
+                const isCols = true;
+                const formattedKeys = highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
+                expect(formattedKeys).toEqual(
+                    [['$1.0', '11'], ['$2.0', '32'], ['[null]', '43'], ['$5.0', '54'], ['Others', '33'], ['$6.0', '98']]
+                );
+            });
+
+            it('should return properly formatted rowKeys as arrays [Dataset 1]', () => {
+                pivotData.rowFormats = ['$####.##', '₪####.##'];
+                const isCols = false;
+                const formattedKeys = highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
+                expect(formattedKeys).toEqual(
+                    [['$1.0', '₪11.0'], ['$2.0', '₪32.0'], ['[null]', '₪43.0'], ['$5.0', '₪54.0'], ['Others', '₪33.0'], ['$6.0', '₪98.0']]
+                );
+            });
+    
+            it('should return properly formatted rowKeys as arrays [Dataset 2]', () => {
+                pivotData.rowFormats =  [null, '₪####.##'];
+                const isCols = false;
+                const formattedKeys = highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
+                expect(formattedKeys).toEqual(
+                    [['1', '₪11.0'], ['2', '₪32.0'], ['[null]', '₪43.0'], ['5', '₪54.0'], ['Others', '₪33.0'], ['6', '₪98.0']]
+                );
+            });
+
+            it('should return properly formatted rowKeys as arrays [Dataset 3]', () => {
+                pivotData.rowFormats = ['$####.##', null];
+                const isCols = false;
+                const formattedKeys = highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
+                expect(formattedKeys).toEqual(
+                    [['$1.0', '11'], ['$2.0', '32'], ['[null]', '43'], ['$5.0', '54'], ['Others', '33'], ['$6.0', '98']]
+                );
+            });
+        });
+
+        describe('getFormattedKey with FF off', () => {
+
+            pivotData.colFormats = ['$####.##', '₪####.##'];
+            const isCols = true;
+
+            beforeEach(() => {
+                lodash.set(document, 'ReportHippo.user.features', []);
+            });
+
+            it('should not call getFormattedKey', () => {
+                highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
+                expect(highchartsRenderer.getFormattedKey).not.toHaveBeenCalled();
+            });
+
+            it('should return NOT formatted colKeys', () => {
+                const formattedKeys = highchartsRenderer.getFormattedKeys(pivotData, isCols, null);
+                expect(formattedKeys).toEqual(
+                    [['1', '11'], ['2', '32'], ['[null]', '43'], ['5', '54'], ['Others', '33'], ['6', '98']]
+                );
+            });
+        });
+    });
+
+    describe('Functions getFormattedColKeys/getFormattedRowKeys', () => {
+        beforeEach(() => {
+            spyOn(highchartsRenderer, 'getFormattedKeys').and.returnValue(null);
+        });
+
+        it('should getFormattedColKeys call getFormattedKeys for colFormats', () => {
+            highchartsRenderer.getFormattedColKeys('test1', 'test2');
+            expect(highchartsRenderer.getFormattedKeys).toHaveBeenCalledWith('test1', true, 'test2');
+        });
+
+        it('should getFormattedRowKeys call getFormattedKeys for rowFormats', () => {
+            highchartsRenderer.getFormattedRowKeys('test1', 'test2', 'test3');
+            expect(highchartsRenderer.getFormattedKeys).toHaveBeenCalledWith('test1', false, 'test2');
+        });
+    });
+
+    describe('Function modifyEventPointForDrilldown', () => {
+
+        const event = {
+            point: {
+                initialName: 'key1',
+                name: 'key2',
+                category: {
+                    userOptions: ['key4'],
+                },
+            }
+        };
+
+        beforeEach(() => {
+            spyOn(highchartsRenderer, 'getFormattedKeys').and.returnValue(null);
+        });
+
+        it('should not modify if FF is off', () => {
+            const e = lodash.cloneDeep(event);
+            lodash.set(document, 'ReportHippo.user.features', []);
+
+            highchartsRenderer.modifyEventPointForDrilldown(e);
+            expect(e.point.name).toEqual(event.point.name);
+            expect(e.point.category.userOptions).toEqual(event.point.category.userOptions);
+        });
+
+        it('should modify if FF is on', () => {
+            const e = lodash.cloneDeep(event);
+            lodash.set(document, 'ReportHippo.user.features', ['use_default_table_format_for_axis']);
+
+            highchartsRenderer.modifyEventPointForDrilldown(e);
+            expect(e.point.name).toEqual(event.point.initialName);
+            expect(e.point.category.userOptions).toEqual([event.point.initialName]);
+        });
+    });
 });