@datarailsshared/dr_renderer 1.2.346 → 1.2.348

package/package.json

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

package/src/highcharts_renderer.js

@@ -143,7 +143,10 @@ 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',
+    FORMAT_DATES_AS_OTHER_AXIS_TYPES: 'format_dates_as_other_axis_types',
     DASHBOARD_INSIGHT_TOOLTIP_RELATIVE_POSITION: 'dashboard_insight_tooltip_relative_position',
+    MULTIPLE_DIMENSION_TAGS: 'multiple_dimension_tags',
+    USE_NEW_SCENARIO_TAG: 'use_new_scenario_tag',
 }
 
 const TICKS_COUNT = 5;
@@ -178,11 +181,16 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     highchartsRenderer.enabledNewWidgetValueFormatting = false;
     highchartsRenderer.relativePositionForInsightTooltips = false;
     let disableAnimation = false;
-    if (document.ReportHippo && document.ReportHippo && document.ReportHippo.user) {
-        highchartsRenderer.useTotalsCalculation = lodash.includes(document.ReportHippo.user.features, FEATURES.ENABLE_SERVER_TOTALS_CALCULATION);
+
+    highchartsRenderer.hasFeature = function(featureFlagKey) {
+        return lodash.includes(lodash.get(document, 'ReportHippo.user.features', []), featureFlagKey);
+    }
+    
+    if (!!lodash.get(document, 'ReportHippo.user')) {
+        highchartsRenderer.useTotalsCalculation = highchartsRenderer.hasFeature(FEATURES.ENABLE_SERVER_TOTALS_CALCULATION);
         disableAnimation = document.ReportHippo.user.organization && document.ReportHippo.user.organization.settings && document.ReportHippo.user.organization.settings.disable_animation
-        highchartsRenderer.enabledNewWidgetValueFormatting = lodash.includes(document.ReportHippo.user.features, FEATURES.ENABLE_NEW_WIDGET_VALUE_FORMATTING);
-        highchartsRenderer.relativePositionForInsightTooltips = lodash.includes(document.ReportHippo.user.features, FEATURES.DASHBOARD_INSIGHT_TOOLTIP_RELATIVE_POSITION);
+        highchartsRenderer.enabledNewWidgetValueFormatting = highchartsRenderer.hasFeature(FEATURES.ENABLE_NEW_WIDGET_VALUE_FORMATTING);
+        highchartsRenderer.relativePositionForInsightTooltips = highchartsRenderer.hasFeature(FEATURES.DASHBOARD_INSIGHT_TOOLTIP_RELATIVE_POSITION);
     }
 
     // fix issue of use tootip.stickOnContact with tooltip.outside , source: https://github.com/highcharts/highcharts/pull/15960
@@ -774,7 +782,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             ? isWaterfallWalkthrough
                                 ? this.key
                                 : cols[0]
-                            : highchartsRenderer.isFormattingAxis(pivotData) && lodash.get(this, 'point.name') || cols
+                            : highchartsRenderer.isFormattingAxisFeatureOn() && lodash.get(this, 'point.name') || cols
                     );
 
                     highchartsRenderer.replaceDrOthersKeys(cols, rows, drOthersInAxis, othersName);
@@ -1634,7 +1642,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         lodash.forEach(waterfallOptions.values.walkthrough, function(value, index) {
 
             let keys = [];
-            if (value.trend === 'total') {
+            if (value.trend === 'total' || highchartsRenderer.isFormattingDatesAsOtherAxisTypes()) {
                 keys = value.key;
             } else {
                 lodash.forEach(value.key, (item) => {
@@ -1668,6 +1676,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             };
 
             let initialName = value.trend === 'total' ? value.formattedKey || value.key[0] : keys.join(highchartsRenderer.delimer);
+            initialName = lodash.replace(
+                lodash.unescape(initialName), highchartsRenderer.DR_OTHERS_KEY, highchartsRenderer.getOthersName(opts)
+            )
             let name = value.trend === 'total' ? initialName : highchartsRenderer.getFormattedColKey(initialName, pivotData);
 
             let color = '';
@@ -1684,9 +1695,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             if (val !== 0) {
                 resultObject.data.push({
                     y: val,
-                    name: lodash.replace(
-                        lodash.unescape(name), highchartsRenderer.DR_OTHERS_KEY, highchartsRenderer.getOthersName(opts)
-                    ),
+                    name,
+                    initialName,
                     totalIndex: value.trend === 'total' ? index : undefined,
                     isSum: value.trend === 'total',
                     isTotal: value.trend === 'total',
@@ -3498,7 +3508,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         color: lodash.get(additionOptions, `${ highchartsRenderer.getLabelOptionKey(additionOptions) }.font_color`)
                             || LABEL_DEFAULT_OPTIONS.color,
                     },
-                    highchartsRenderer.getDataLabelsStyle(additionOptions),
+                    highchartsRenderer.getDataLabelsStyle(additionOptions)
                 ),
             },
             labels: {
@@ -4853,13 +4863,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         if (!pivotOptions) {
             return;
         }
+
         var subopts = {
             sorters: pivotOptions ? pivotOptions.sorters : null,
             sortByValueAttrs: pivotOptions ? pivotOptions.sortByValueAttrs : null,
             cols: lodash.map(pivotOptions.axisArray, 'name'),
             rows: lodash.map(pivotOptions.legendArray, 'name'),
-            colFormats: highchartsRenderer.getTableFormatInfosForWidgetFields(widget.cols),
-            rowFormats: highchartsRenderer.getTableFormatInfosForWidgetFields(widget.rows),
+            colFormats: highchartsRenderer.getTableFormatInfosForWidgetFields(widget, pivotOptions, widget.cols),
+            rowFormats: highchartsRenderer.getTableFormatInfosForWidgetFields(widget, pivotOptions, widget.rows),
             rendererOptions: widget.options,
             dateValuesDictionary: pivotOptions ? pivotOptions.dateValuesDictionary : null,
         };
@@ -5123,11 +5134,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     highchartsRenderer.isSystemField = function (field) {
-        const features = lodash.get(document, 'ReportHippo.user.features', []);
         const dynamicSystemFields = [];
 
-        const areMultipleAndScenarioTags = lodash.includes(features, 'multiple_dimension_tags')
-            && lodash.includes(features, 'use_new_scenario_tag');
+        const areMultipleAndScenarioTags = highchartsRenderer.hasFeature(FEATURES.MULTIPLE_DIMENSION_TAGS)
+            && highchartsRenderer.hasFeature(FEATURES.USE_NEW_SCENARIO_TAG);
 
         if (areMultipleAndScenarioTags) {
             dynamicSystemFields.push('Scenario', 'Budget Cycle');
@@ -8371,7 +8381,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         const fiscalYearMonthsModifier = highchartsRenderer.getFiscalYearMonthModifier();
 
-        const initialDateString = fieldnametoFilter;
         if (format) {
             format = format.replace(/y/g, 'Y');
             format = format.replace(/d/g, 'D');
@@ -8379,78 +8388,86 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             format = 'MMM YYYY';
         }
 
-        var range = {datetype: "range", val: {todate: 0, fromdate: 0}}
+        const range = { datetype: "range", val: { todate: 0, fromdate: 0 } };
+        const timeframe = highchartsRenderer.getTimeframeByFormat(format);
 
-        if (format) {
-            if (!highchartsRenderer.isDateFormat(fieldnametoFilter, format)) {
-                return {};
-            } else {
+        const isFormattedDate = format && highchartsRenderer.isDateFormat(fieldnametoFilter, format);
+        if (isFormattedDate || highchartsRenderer.isDate(fieldnametoFilter)) {
+            const initialDateString = fieldnametoFilter;
+            if (isFormattedDate) {
                 fieldnametoFilter = moment_lib(fieldnametoFilter, format, true).toISOString();
             }
-        } else if (!highchartsRenderer.isDate(fieldnametoFilter))
-            return {};
-
-        var dt = new Date(fieldnametoFilter);
-
-        const timeframe = highchartsRenderer.getTimeframeByFormat(format);
-        switch (timeframe) {
-            case 'day':
-                range.val.fromdate = Math.round(Date.UTC(
-                    dt.getFullYear(),
-                    dt.getMonth(),
-                    dt.getDate(),
-                    0,
-                    0,
-                    0
-                ) / 1000);
-                range.val.todate = range.val.fromdate + 60 * 60 * 24 - 1;
-                return range;
-                break;
-            case 'month':
-                range.val.fromdate = Math.round(
-                    Date.UTC(
+            const dt = new Date(fieldnametoFilter);
+            switch (timeframe) {
+                case 'day':
+                    range.val.fromdate = Math.round(Date.UTC(
                         dt.getFullYear(),
                         dt.getMonth(),
+                        dt.getDate(),
+                        0,
+                        0,
+                        0
+                    ) / 1000);
+                    range.val.todate = range.val.fromdate + 60 * 60 * 24 - 1;
+                    return range;
+                case 'month':
+                    range.val.fromdate = Math.round(
+                        Date.UTC(
+                            dt.getFullYear(),
+                            dt.getMonth(),
+                            1,
+                            0, 0, 0, 0
+                        ) / 1000)
+                    let lastDay = new Date(dt.getFullYear(), dt.getMonth() + 1, 0);
+                    range.val.todate = Math.round(
+                        Date.UTC(
+                            lastDay.getFullYear(),
+                            lastDay.getMonth(),
+                            lastDay.getDate(),
+                            23,
+                            59,
+                            59) / 1000)
+                    return range;
+                case 'year':
+                    range.val.fromdate = Math.round(Date.UTC(
+                        dt.getFullYear(),
+                        fiscalYearMonthsModifier || dt.getMonth(),
                         1,
                         0, 0, 0, 0
+                    ) / 1000);
+
+                    let lastDay2 = new Date(dt.getFullYear() + 1, fiscalYearMonthsModifier || 0, 0);
+                    range.val.todate = Math.round(Date.UTC(
+                        lastDay2.getFullYear(),
+                        lastDay2.getMonth(),
+                        lastDay2.getDate(),
+                        23, 59, 59
                     ) / 1000)
-                let lastDay = new Date(dt.getFullYear(), dt.getMonth() + 1, 0);
-                range.val.todate = Math.round(
-                    Date.UTC(
-                        lastDay.getFullYear(),
-                        lastDay.getMonth(),
-                        lastDay.getDate(),
-                        23,
-                        59,
-                        59) / 1000)
-                return range;
-                break;
-            case 'year':
-                range.val.fromdate = Math.round(Date.UTC(
-                    dt.getFullYear(),
-                    fiscalYearMonthsModifier || dt.getMonth(),
-                    1,
-                    0, 0, 0, 0
-                ) / 1000);
-
-                let lastDay2 = new Date(dt.getFullYear() + 1, fiscalYearMonthsModifier || 0, 0);
-                range.val.todate = Math.round(Date.UTC(
-                    lastDay2.getFullYear(),
-                    lastDay2.getMonth(),
-                    lastDay2.getDate(),
-                    23, 59, 59
-                ) / 1000)
-                return range;
-                break;
-            case 'quarter':
-                const utcDate = moment_lib.utc(initialDateString, format, true);
-                range.val.fromdate = lodash.cloneDeep(utcDate).startOf(timeframe).add(fiscalYearMonthsModifier, 'M').unix();
-                range.val.todate = lodash.cloneDeep(utcDate).endOf(timeframe).add(fiscalYearMonthsModifier, 'M').endOf('M').unix();
-                return range;
-            default:
-                return "";
+                    return range;
+                case 'quarter':
+                    const utcDate = moment_lib.utc(initialDateString, format, true);
+                    range.val.fromdate = lodash.cloneDeep(utcDate).startOf(timeframe).add(fiscalYearMonthsModifier, 'M').unix();
+                    range.val.todate = lodash.cloneDeep(utcDate).endOf(timeframe).add(fiscalYearMonthsModifier, 'M').endOf('M').unix();
+                    return range;
+                default:
+                    return "";
+            }
+        } else if (!lodash.isNaN(fieldnametoFilter)) {
+            const utcDate = moment_lib.unix(fieldnametoFilter).utc();
+            const fromDateMoment = lodash.cloneDeep(utcDate).startOf(timeframe);
+            const toDateMoment = lodash.cloneDeep(utcDate).endOf(timeframe);
+
+            if (lodash.includes(['year', 'quarter'], timeframe)) {
+                fromDateMoment.add(fiscalYearMonthsModifier, 'M');
+                toDateMoment.add(fiscalYearMonthsModifier, 'M').endOf('M');
+            }
+
+            range.val.fromdate = fromDateMoment.unix();
+            range.val.todate = toDateMoment.unix();
+            return range;
         }
 
+         return {};
     };
 
     highchartsRenderer.createDateFromString = function (dateString, format) {
@@ -8464,6 +8481,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     }
 
     highchartsRenderer.prepareDrillDownFilters = function (r_keys, c_keys, widget) {
+        const isFormattingDatesAsOtherAxisTypes = highchartsRenderer.isFormattingDatesAsOtherAxisTypes();
         let row_key = r_keys;
         let col_key = c_keys;
         if (widget.options &&
@@ -8481,16 +8499,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             const labels = [];
             colFilter.values = [];
             lodash.forEach(col_key, function (col_value) {
+                let label = col_value;
                 if (widget.cols[0].type === 'Date' && col_value !== NULL_VALUE) {
-                    let date = highchartsRenderer.createDateFromString(
-                        col_value,
-                        highchartsRenderer.getDateFieldFormat(widget, widget.cols[0])
-                    );
+                    const format = highchartsRenderer.getDateFieldFormat(widget, widget.cols[0]);
+                    let date = isFormattingDatesAsOtherAxisTypes ? +col_value : highchartsRenderer.createDateFromString(col_value, format);
                     colFilter.values.push(date);
+                    label = isFormattingDatesAsOtherAxisTypes
+                        ? highchartsRenderer.returnRawDataValue(widget.cols[0].type, +col_value, format, widget.cols[0].name)
+                        : col_value;
                 } else {
                     colFilter.values.push(col_value);
                 }
-                labels.push(col_value);
+                labels.push(label);
             });
             colFilter.value_to_show = labels.join(', ');
             filters.push(colFilter);
@@ -8508,17 +8528,16 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 if (widget && widget.cols[index]) {
                     let temp = highchartsRenderer.createFilterObject(widget.cols[index]);
                     if (widget.cols[index].type === 'Date' && col_value !== NULL_VALUE) {
-                        let datetrange = highchartsRenderer.createDateTypeFromValue(
-                            col_value,
-                            highchartsRenderer.getDateFieldFormat(widget, widget.cols[index]),
-                            null
-                        );
+                        const format = highchartsRenderer.getDateFieldFormat(widget, widget.cols[index]);
+                        let datetrange = highchartsRenderer.createDateTypeFromValue(col_value, format);
 
                         if ($.isEmptyObject(datetrange)) {
                             return;
                         }
                         temp.values = datetrange;
-                        temp.values.label = col_value;
+                        temp.values.label = isFormattingDatesAsOtherAxisTypes
+                            ? highchartsRenderer.returnRawDataValue(widget.cols[index].type, +col_value, format, widget.cols[index].name)
+                            : col_value;
                     } else {
                         temp.values = [col_value];
                     }
@@ -8534,15 +8553,16 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 if (widget.rows[index].type === 'Date' && row_value !== NULL_VALUE) {
                     let datetrange = highchartsRenderer.createDateTypeFromValue(
                         row_value,
-                        highchartsRenderer.getDateFieldFormat(widget, widget.rows[index]),
-                        null
+                        highchartsRenderer.getDateFieldFormat(widget, widget.rows[index])
                     );
 
                     if ($.isEmptyObject(datetrange)) {
                         return;
                     }
                     temp.values = datetrange;
-                    temp.values.label = row_value;
+                    temp.values.label = isFormattingDatesAsOtherAxisTypes
+                        ? highchartsRenderer.returnRawDataValue(widget.rows[index].type, +row_value, format, widget.rows[index].name)
+                        : row_value;
                 } else {
                     temp.values = [row_value];
                 }
@@ -8592,6 +8612,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     highchartsRenderer.prepareDrillDownGraphFilters = function (r_key, c_key, widget) {
+        const isFormattingDatesAsOtherAxisTypes = highchartsRenderer.isFormattingDatesAsOtherAxisTypes();
         let rowKey = r_key;
         let colKey = c_key;
         let widgetOptions = typeof widget.options === 'string' ? JSON.parse(widget.options) : widget.options;
@@ -8605,9 +8626,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             let filter = lodash.find(filters, {name: widget.rows[i].name});
             if (filter) {
                 filter.is_excluded = false;
-                filter.values = widget.rows[i].type === 'Date' && rowKey[i] !== NULL_VALUE ?
-                    highchartsRenderer.createDateTypeFromValue(rowKey[i], highchartsRenderer.getDateFieldFormat(widget, widget.rows[i])) :
-                    [rowKey[i]];
+                filter.values = widget.rows[i].type === 'Date' && rowKey[i] !== NULL_VALUE
+                    ? highchartsRenderer.createDateTypeFromValue(
+                        rowKey[i],
+                        highchartsRenderer.getDateFieldFormat(widget, widget.rows[i])
+                    )
+                    : [rowKey[i]];
             } else {
                 filters.push(highchartsRenderer.createDrillDownFilterObject(widget, widget.rows[i], rowKey[i]))
             }
@@ -8624,12 +8648,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             filter.values = [];
             for (let i = 0; i < colKey.length; i++) {
                 filter.values.push(
-                    widget.cols[0].type === 'Date' && colKey[i] !== NULL_VALUE
+                    widget.cols[0].type === 'Date' && colKey[i] !== NULL_VALUE && !isFormattingDatesAsOtherAxisTypes
                         ? highchartsRenderer.createDateFromString(
                             colKey[i],
                             highchartsRenderer.getDateFieldFormat(widget, widget.cols[0])
                         )
-                        : colKey[i]
+                        : +colKey[i]
                 );
             }
         } else if (widget.chart_type === highchartsRenderer.CHART_TYPES.WATERFALL_WALKTHROUGH) {
@@ -8652,9 +8676,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 let filter = lodash.find(filters, {name: widget.cols[i].name});
                 if (filter) {
                     filter.is_excluded = false;
-                    filter.values = widget.cols[i].type === 'Date' && colKey[i] !== NULL_VALUE ?
-                        highchartsRenderer.createDateTypeFromValue(colKey[i], highchartsRenderer.getDateFieldFormat(widget, widget.cols[i])) :
-                        [colKey[i]];
+                    filter.values = widget.cols[i].type === 'Date' && colKey[i] !== NULL_VALUE
+                        ? highchartsRenderer.createDateTypeFromValue(
+                            colKey[i],
+                            highchartsRenderer.getDateFieldFormat(widget, widget.cols[i])
+                        )
+                        : [colKey[i]];
                 } else {
                     filters.push(highchartsRenderer.createDrillDownFilterObject(widget, widget.cols[i], colKey[i]))
                 }
@@ -8674,7 +8701,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         filtOb.field = field.id;
         filtOb.name = highchartsRenderer.decodeFunc(field.name);
         if (field.type === 'Date' && value !== NULL_VALUE) {
-            filtOb.values = highchartsRenderer.createDateTypeFromValue(value, highchartsRenderer.getDateFieldFormat(widget, field));
+            filtOb.values = highchartsRenderer.createDateTypeFromValue(
+                value,
+                highchartsRenderer.getDateFieldFormat(widget, field)
+            );
         }
 
         return filtOb;
@@ -8745,6 +8775,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     highchartsRenderer.getWidgetDataSorters = function (res, widget, defaultDateFormat) {
+
+        const isFormattingDatesAsOtherAxisTypes = highchartsRenderer.isFormattingDatesAsOtherAxisTypes();
+
         if ($.pivotUtilities && !$.pivotUtilities.additionalFieldsList) {
             $.pivotUtilities.additionalFieldsList = [
                 {key: 'DR_Average', name: 'DR_Average'},
@@ -8767,35 +8800,47 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
 
         datesFields = lodash.map(datesFields, function (row) {
-            return { "format": highchartsRenderer.getDateFieldFormat(widget, row), "name": row.name, "type": row.type, "values": [], "sorting": row.sorting } //'MMM - yyyy' format
+            return {
+                "format": isFormattingDatesAsOtherAxisTypes ? null : highchartsRenderer.getDateFieldFormat(widget, row),
+                "name": row.name,
+                "type": row.type,
+                "values": [],
+                "sorting": row.sorting
+            } //'MMM - yyyy' format
         });
 
         var data = res;
 
-        lodash.forEach(datesFields, function (row) {
-            row.val_not_convert = highchartsRenderer.check_values_not_for_convert(widget, row.name);
-        });
-
+        if (!isFormattingDatesAsOtherAxisTypes) {
+            lodash.forEach(datesFields, function (row) {
+                row.val_not_convert = highchartsRenderer.check_values_not_for_convert(widget, row.name);
+            });
+        }
+    
         if (datesFields.length > 0) {
             lodash.forEach(data, function (element) {
                 for (var i in datesFields) {
                     if (element.hasOwnProperty(datesFields[i].name)) {
                         datesFields[i].values.push(element[datesFields[i].name]);
-                        const dateStringValue = highchartsRenderer.returnRawDataValue(
-                            datesFields[i].type, element[datesFields[i].name],
-                            defaultDateFormat ? defaultDateFormat : datesFields[i].format,
-                            datesFields[i].name, datesFields[i].val_not_convert);
-                        if (widget.pivot) {
-                            if (!widget.pivot.dateValuesDictionary) {
-                                widget.pivot.dateValuesDictionary = {}
+
+                        if (!isFormattingDatesAsOtherAxisTypes) {
+                            const dateStringValue = highchartsRenderer.returnRawDataValue(
+                                datesFields[i].type, element[datesFields[i].name],
+                                defaultDateFormat ? defaultDateFormat : datesFields[i].format,
+                                datesFields[i].name, datesFields[i].val_not_convert);
+                            if (widget.pivot) {
+                                if (!widget.pivot.dateValuesDictionary) {
+                                    widget.pivot.dateValuesDictionary = {}
+                                }
+                                widget.pivot.dateValuesDictionary[dateStringValue] = element[datesFields[i].name];
                             }
-                            widget.pivot.dateValuesDictionary[dateStringValue] = element[datesFields[i].name];
+                            element[datesFields[i].name] = dateStringValue;
                         }
-                        element[datesFields[i].name] = dateStringValue;
                     }
                 }
             });
         }
+
         lodash.forEach(datesFields, function (row) {
             row.values = lodash.uniq(row.values);
 
@@ -8817,10 +8862,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 row.values = lodash.reverse(row.values);
             }
             delete row.sorting;
-            row.values = lodash.map(row.values, function (val) {
-                return highchartsRenderer.returnRawDataValue(row.type, val, row.format, row.name, row.val_not_convert) + "";
-            })
 
+            if (!isFormattingDatesAsOtherAxisTypes) {
+                row.values = lodash.map(row.values, function (val) {
+                    return highchartsRenderer.returnRawDataValue(row.type, val, row.format, row.name, row.val_not_convert) + "";
+                });
+            }
         });
 
         /* date string */
@@ -8903,7 +8950,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 } else if (field.sorting && field.sorting.type == "largestToSmallest") {
                     if (field.sorting.is_absolute)
                         return $.pivotUtilities.largeToSmallSortByAbsolute;
-
                     return $.pivotUtilities.largeToSmallSort;
                 } else {
                     return $.pivotUtilities.sortAs(field.values);
@@ -9255,10 +9301,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 filter.values.push(colValue);
             });
         } else {
+            const format = highchartsRenderer.getDateFieldFormat(widget, field);
             filter.values = field.type === 'Date' && colKey !== NULL_VALUE
-                ? highchartsRenderer.createDateTypeFromValue(colKey, highchartsRenderer.getDateFieldFormat(widget, field))
+                ? highchartsRenderer.createDateTypeFromValue(colKey, format)
                 : [colKey];
-            filter.value_to_show = colKey;
+            filter.value_to_show = field.type === 'Date' && highchartsRenderer.isFormattingDatesAsOtherAxisTypes()
+                ? highchartsRenderer.returnRawDataValue(field.type, +colKey, format, field.name)
+                : colKey;
         }
     }
 
@@ -9343,29 +9392,40 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return !highchartsRenderer.enabledNewWidgetValueFormatting || !highchartsRenderer.isChartWithMultiValues(pivotData) || !isSecondaryAxis || isCustomFormat;
     }
 
-    highchartsRenderer.isFormattingAxis = function (pivotData) {
+    highchartsRenderer.isFormattingNumberAxis = function (pivotData) {
         return highchartsRenderer.isFormattingAxisFeatureOn() && pivotData.isFormattingAxisLabels;
     }
 
+    highchartsRenderer.isFormattingDatesAsOtherAxisTypes = function () {
+        return highchartsRenderer.isFormattingAxisFeatureOn() && highchartsRenderer.hasFeature(FEATURES.FORMAT_DATES_AS_OTHER_AXIS_TYPES);
+    }
+
     highchartsRenderer.isFormattingAxisFeatureOn = function () {
-        return lodash.includes(lodash.get(document, 'ReportHippo.user.features', []), FEATURES.FORMAT_AXIS);
+        return highchartsRenderer.hasFeature(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(pivotData) && (isFlatKey || lodash.isArray(initialKey))) {
+        if (isFlatKey || lodash.isArray(initialKey)) {
             let values = isFlatKey ? initialKey.toString().split(highchartsRenderer.delimer) : lodash.cloneDeep(initialKey);
             if (values) {
                 lodash.forEach(values, (value, key) => {
-                    const formatInfo = pivotData[type][key];
-                    if (formatInfo && formatInfo.type !== 'Date') {
-                        const format = formatInfo.format;
-                        const valueToFloat = parseFloat(value);
-                        values[key] = !isNaN(valueToFloat) && format
-                            ? highchartsRenderer.formatValue('n', format, valueToFloat).value
-                            : value;
+                    const formatInfo = pivotData[type][key] || {};
+                    const valueToFloat = parseFloat(value);
+                    const isDate = formatInfo.type === 'Date';
+                    const isDateFormatting = isDate && highchartsRenderer.isFormattingDatesAsOtherAxisTypes();
+                    const isNumberFormatting = !isDate && formatInfo.format && highchartsRenderer.isFormattingNumberAxis(pivotData);
+                    const isApplyingFormat = !isNaN(valueToFloat) && (isNumberFormatting || isDateFormatting);
+                    if (isApplyingFormat) {
+                        values[key] = highchartsRenderer.returnRawDataValue(
+                            formatInfo.type,
+                            valueToFloat,
+                            formatInfo.format,
+                            formatInfo.name,
+                            formatInfo.val_not_convert,
+                            true
+                        );
                     }
                 });
                 return isFlatKey ? values.join(highchartsRenderer.delimer) : values;
@@ -9384,7 +9444,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     highchartsRenderer.getFormattedKeys = function(pivotData, isCols, keys) {
         keys = keys || (isCols ? pivotData.getColKeys() : pivotData.getRowKeys());
-        return highchartsRenderer.isFormattingAxis(pivotData)
+        return highchartsRenderer.isFormattingAxisFeatureOn()
             ? lodash.map(keys, key => highchartsRenderer.getFormattedKey(key, pivotData, isCols ? 'colFormats' : 'rowFormats'))
             : keys;
     }
@@ -9398,7 +9458,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     }
 
     highchartsRenderer.modifyEventPointForDrilldown = function(e, pivotData) {
-        if (!highchartsRenderer.isFormattingAxis(pivotData)) {
+        if (!highchartsRenderer.isFormattingAxisFeatureOn()) {
             return;
         }
         e.point = lodash.cloneDeep(e.point);
@@ -9408,19 +9468,23 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     }
 
     highchartsRenderer.getSeriesNameInFormatterContext = function(context, pivotData) {
-        return ((highchartsRenderer.isFormattingAxis(pivotData) && lodash.get(context, 'series.userOptions.initialName')) || context.series.name || '') + "";
+        return ((highchartsRenderer.isFormattingAxisFeatureOn() && lodash.get(context, 'series.userOptions.initialName')) || context.series.name || '') + "";
     }
 
     highchartsRenderer.getColsInFormatterContext = function(context, pivotData) {
         return lodash.get(context, 'point.options.colsForTotal')
-            || highchartsRenderer.isFormattingAxis(pivotData) && (lodash.get(context, 'point.initialName') || lodash.get(context, 'options.initialName'))
+            || highchartsRenderer.isFormattingAxisFeatureOn() && (lodash.get(context, 'point.initialName') || lodash.get(context, 'options.initialName'))
             || context.key;
     }
 
-    highchartsRenderer.getTableFormatInfosForWidgetFields = function(fields) {
+    highchartsRenderer.getTableFormatInfosForWidgetFields = function(widget, pivotOptions, fields) {
         return lodash.map(fields, field => ({
             type: field.type,
-            format: highchartsRenderer.decodeFunc(field.format),
+            name: field.name,
+            format: field.type === 'Date'
+                ? highchartsRenderer.getDateFieldFormat(widget, field) || pivotOptions.defaultDateFormat
+                : highchartsRenderer.decodeFunc(field.format),
+            val_not_convert: highchartsRenderer.check_values_not_for_convert(widget, field.name),
         }));
     }
 

package/tests/highcharts_renderer.test.js

@@ -4840,23 +4840,23 @@ describe('highcharts_renderer', () => {
         });
     });
 
-    describe('Function isFormattingAxis', () => {
+    describe('Function isFormattingNumberAxis', () => {
         it('should return true if FF is true', () => {
             const pivotData = { isFormattingAxisLabels: true };
             lodash.set(document, 'ReportHippo.user.features', ['use_default_table_format_for_axis']);
-            expect(highchartsRenderer.isFormattingAxis(pivotData)).toEqual(true);
+            expect(highchartsRenderer.isFormattingNumberAxis(pivotData)).toEqual(true);
         });
 
         it('should return false if FF is false', () => {
             const pivotData = { isFormattingAxisLabels: true };
             lodash.set(document, 'ReportHippo.user.features', []);
-            expect(highchartsRenderer.isFormattingAxis(pivotData)).toEqual(false);
+            expect(highchartsRenderer.isFormattingNumberAxis(pivotData)).toEqual(false);
         });
 
         it('should return false if FF is true but isFormattingAxisLabels for chart is false', () => {
             const pivotData = { isFormattingAxisLabels: false };
             lodash.set(document, 'ReportHippo.user.features', []);
-            expect(highchartsRenderer.isFormattingAxis(pivotData)).toEqual(false);
+            expect(highchartsRenderer.isFormattingNumberAxis(pivotData)).toEqual(false);
         });
     });
 
@@ -4959,7 +4959,32 @@ describe('highcharts_renderer', () => {
             });
 
             describe('formatting Dates', () => {
-                it('should return NOT formatted multivalue colKey as array', () => {
+                it('should return formatted multivalue colKey as array (format_dates_as_other_axis_types is ON)', () => {
+                    lodash.set(document, 'ReportHippo.user.features', ['format_dates_as_other_axis_types', 'use_default_table_format_for_axis']);
+                    const initialKey = [1687277052, 1687277052];
+                    const pivotData = {
+                        colFormats: [{ type: 'Date', format: 'MM/DD/YYYY' }, { type: 'Date', format: 'MMM-yy' }],
+                        isFormattingAxisLabels: true,
+                    };
+                    const type = 'colFormats';
+                    const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
+                    expect(formattedKey).toEqual(['06/20/2023', 'Jun-23']);
+                });
+
+                it('should return formatted multivalue rowKey as array (format_dates_as_other_axis_types is ON)', () => {
+                    lodash.set(document, 'ReportHippo.user.features', ['format_dates_as_other_axis_types', 'use_default_table_format_for_axis']);
+                    const initialKey = [1687277052, 1687277052];
+                    const pivotData = {
+                        rowFormats: [{ type: 'Date', format: 'MM/DD/YYYY' }, { type: 'Date', format: 'MMM-yy' }],
+                        isFormattingAxisLabels: true,
+                    };
+                    const type = 'rowFormats';
+                    const formattedKey = highchartsRenderer.getFormattedKey(initialKey, pivotData, type);
+                    expect(formattedKey).toEqual(['06/20/2023', 'Jun-23']);
+                });
+
+                it('should return NOT formatted multivalue colKey as array (format_dates_as_other_axis_types is OFF)', () => {
+                    lodash.set(document, 'ReportHippo.user.features', ['use_default_table_format_for_axis']);
                     const initialKeyAlreadyFormatted = ['10/10/2020', '10/10/2021'];
                     const pivotData = {
                         colFormats: [{ type: 'Date', format: 'MM/DD/YYYY' }, { type: 'Date', format: 'MMM-yy' }],
@@ -4970,7 +4995,8 @@ describe('highcharts_renderer', () => {
                     expect(formattedKey).toEqual(initialKeyAlreadyFormatted);
                 });
 
-                it('should return NOT formatted multivalue rowKey as array', () => {
+                it('should return NOT formatted multivalue rowKey as array (format_dates_as_other_axis_types is OFF)', () => {
+                    lodash.set(document, 'ReportHippo.user.features', ['use_default_table_format_for_axis']);
                     const initialKeyAlreadyFormatted = ['10/10/2020', '10/10/2021'];
                     const pivotData = {
                         rowFormats: [{ type: 'Date', format: 'MM/DD/YYYY' }, { type: 'Date', format: 'MMM-yy' }],