@datarailsshared/dr_renderer 1.2.366 → 1.2.368

package/package.json

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

package/src/dr-renderer-helpers.js

@@ -2,6 +2,12 @@ function backendSortingKeysAreNotEmpty(keys) {
     return !!keys && (!!keys.row_keys && !!keys.row_keys.length || !!keys.col_keys && !!keys.col_keys.length);
 }
 
+function capitalize(string) {
+    if (typeof string !== 'string') return '';
+    return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
 module.exports = {
-    backendSortingKeysAreNotEmpty: backendSortingKeysAreNotEmpty,
+    backendSortingKeysAreNotEmpty,
+    capitalize,
 }

package/src/highcharts_renderer.js

@@ -85,6 +85,8 @@ const HIGHCHARTS_CONSTANTS = {
     CHART_TYPES: CHART_TYPES,
     MAX_SELECTED_ITEMS_IN_LABEL: 20,
     MAX_SELECTED_ITEMS_CHARECHTERS_IN_LABEL: 50,
+    MAX_SELECTED_ITEMS_BEFORE_COLLAPSING: 11,
+    MAX_SELECTED_ITEMS_BEFORE_SHOWING_COUNTER: 3,
 }
 
 const SUBOPTIONS_FONTS = [
@@ -484,7 +486,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         } else {
             const graphIdString = graph_id.split('_')[1];
             const graphId = Number(graphIdString) || graphIdString;
-            chart = lodash.find(Highcharts.charts, function(value) {
+            chart = lodash.findLast(Highcharts.charts, function(value) {
                 return value.options.widgetId === graphId;
             });
         }
@@ -8040,7 +8042,22 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         suboptions: []
     };
 
-    highchartsRenderer.getFilterLabel = function (fieldFilter, showTemplateName, isFormattingNumbers) {
+    highchartsRenderer.DATE_FILTER_TIMEFRAME_LABELS = {
+        day: 'End of period',
+        week: 'Week to date',
+        month: 'Month to date',
+        quarter: 'Quarter to date',
+        year: 'Year to date',
+        'week-full': 'Full week',
+        'month-full': 'Full month',
+        'quarter-full': 'Full quarter',
+        'year-full': 'Full year',
+        year_over_year: 'Year over Year',
+        year_to_go: 'Year to Go',
+    }
+
+    // TODO: refactor, too many conditions, unreadable
+    highchartsRenderer.getFilterLabel = function (fieldFilter, showTemplateName, isFormattingNumbers, isGlobalFilter = false) {
         var displayname;
         if (fieldFilter.new_name)
             displayname = fieldFilter.new_name.replace('RH_DIM_', '');
@@ -8052,11 +8069,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             displayname = fieldFilter.template_name + " - " + displayname;
         }
 
-        if (fieldFilter.template_name && fieldFilter.datetypevalues && (fieldFilter.datetypevalues.datetype == 'range' || fieldFilter.datetypevalues.datetype == 'frame'))
+        if (fieldFilter.template_name && fieldFilter.datetypevalues && (fieldFilter.datetypevalues.datetype == 'range' || fieldFilter.datetypevalues.datetype == 'frame')) {
+            const label = displayname + (isGlobalFilter ? highchartsRenderer.getGlobalFilterValueHighlighter(fieldFilter.datetypevalues.datetype) : ' (' + fieldFilter.datetypevalues.datetype + ')');
             return {
-              label: displayname + ' (' + fieldFilter.datetypevalues.datetype + ')',
+              label,
               tooltip: displayname + ' (' + fieldFilter.datetypevalues.datetype + ')'
             };
+        }
 
         if ((fieldFilter.includes && lodash.isArray(fieldFilter.includes)) || (fieldFilter.excludes && lodash.isArray(fieldFilter.excludes))) {
             if (fieldFilter.includes && fieldFilter.includes.length > 0 && fieldFilter.includes.length < highchartsRenderer.MAX_SELECTED_ITEMS_IN_LABEL) {
@@ -8073,7 +8092,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         all_vals.push(val);
                     });
                 } else if (isFormattingNumbers && highchartsRenderer.isFormattingAxisFeatureOn()) {
-                    all_vals = lodash.map(lodash.cloneDeep(fieldFilter.includes), val => 
+                    all_vals = lodash.map(lodash.cloneDeep(fieldFilter.includes), val =>
                         highchartsRenderer.returnRawDataValue(fieldFilter.type, val, fieldFilter.format || '', null, null, true) + ""
                     );
                 } else {
@@ -8083,10 +8102,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     if (fieldFilter.allow_nulls && all_vals.length > 1) {
                       all_vals = all_vals.filter(x => x !== '[null]')
                     }
-                    all_vals = all_vals.join(',');
+                    all_vals = all_vals.join(', ');
                     tooltip = ' (' + all_vals + ')';
-                    if (all_vals.length > highchartsRenderer.MAX_SELECTED_ITEMS_CHARECHTERS_IN_LABEL) {
-                        all_vals = 'many';
+                    if (all_vals.split(',').length > highchartsRenderer.MAX_SELECTED_ITEMS_BEFORE_COLLAPSING && isGlobalFilter
+                        || all_vals.length > highchartsRenderer.MAX_SELECTED_ITEMS_CHARECHTERS_IN_LABEL && !isGlobalFilter) {
+                        all_vals = 'Many';
                     }
                     all_vals = ' (' + all_vals + ')';
                 } else {
@@ -8096,7 +8116,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
                 all_vals = highchartsRenderer.decodeFunc(all_vals);
                 tooltip = highchartsRenderer.decodeFunc(tooltip);
-
+                if (isGlobalFilter) {
+                    all_vals = highchartsRenderer.getGlobalFilterCounterString(all_vals);
+                    displayname = displayname + ': ';
+                };
                 return {
                     label: displayname + all_vals,
                     tooltip: displayname + tooltip
@@ -8123,20 +8146,24 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     if (fieldFilter.allow_nulls && all_vals.length > 1) {
                       all_vals = all_vals.filter(x => x !== '[null]')
                     }
-                    all_vals = all_vals.join(',');
+                    all_vals = all_vals.join(', ');
                     tooltip = ' (Exclusions: ' + all_vals + ')';
-                    if (all_vals.length > highchartsRenderer.MAX_SELECTED_ITEMS_CHARECHTERS_IN_LABEL) {
-                        all_vals = 'many';
+                    if (all_vals.split(',').length > highchartsRenderer.MAX_SELECTED_ITEMS_BEFORE_COLLAPSING && isGlobalFilter
+                        || all_vals.length > highchartsRenderer.MAX_SELECTED_ITEMS_CHARECHTERS_IN_LABEL && !isGlobalFilter) {
+                        all_vals = 'Many';
                     }
                     all_vals = ' (Exclusions: ' + all_vals + ')';
                 } else {
-                    tooltip = ' (All)';
-                    all_vals = ' (All)';
+                    tooltip = isGlobalFilter ? ': All' : ' (All)';
+                    all_vals = 'All';
                 }
 
                 all_vals = highchartsRenderer.decodeFunc(all_vals);
                 tooltip = highchartsRenderer.decodeFunc(tooltip);
-
+                if (isGlobalFilter) {
+                    all_vals = highchartsRenderer.getGlobalFilterCounterString(all_vals);
+                    displayname = displayname + ': ';
+                };
                 return {
                     label: displayname + all_vals,
                     tooltip: displayname + tooltip
@@ -8144,33 +8171,42 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             } else {
                 if ((fieldFilter.includes && fieldFilter.includes.length == 0))
                     return {
-                      label: displayname + ' (none)',
-                      tooltip: displayname + ' (none)'
+                      label: displayname + (isGlobalFilter ? ': None' : ' (None)'),
+                      tooltip: displayname + (isGlobalFilter ? ' None' : ' (None)'),
                     };
                 else if ((fieldFilter.excludes && fieldFilter.excludes.length == 0))
                     return {
-                      label: displayname + ' (All)',
-                      tooltip: displayname + ' (All)'
+                      label: displayname + (isGlobalFilter ? ': All' : ' (All)'),
+                      tooltip: displayname + (isGlobalFilter ? ' All' : ' (All)'),
                     };
                 else if ((fieldFilter.includes))
                     return {
-                      label: displayname + ' (many)',
+                      label: displayname + (isGlobalFilter ? ': ' + highchartsRenderer.getGlobalFilterValueHighlighter('Many') : ' (Many)'),
                       tooltip: displayname + ' (' +
                           lodash.map(fieldFilter.includes, item => highchartsRenderer.returnRawDataValue(fieldFilter.type, item, fieldFilter.format)).join(', ') +
                           ')'
                     };
-                else
-                  return {
-                    label: displayname + ' (Exclusions many)',
-                    tooltip: displayname + ' (Exclusions: ' +
-                        lodash.map(fieldFilter.excludes, item => highchartsRenderer.returnRawDataValue(fieldFilter.type, item, fieldFilter.format)).join(', ') +
-                        ')'
-                  };
+                else {
+                    const label = displayname + (isGlobalFilter ? ': ' + highchartsRenderer.getGlobalFilterValueHighlighter('Exclusions: Many') : ' (Exclusions Many)');
+                    return {
+                        label,
+                        tooltip: displayname + ' (Exclusions: ' +
+                            lodash.map(fieldFilter.excludes, item => highchartsRenderer.returnRawDataValue(fieldFilter.type, item, fieldFilter.format)).join(', ') +
+                            ')'
+                    };
+                }
             }
         } else {
             if (fieldFilter && fieldFilter.type && fieldFilter.type === 'Date' && fieldFilter.datetypevalues) {
                 if (fieldFilter.datetypevalues.datetype === "frame") {
-                    displayname += ` (${fieldFilter.datetypevalues.val.timeframe})`;
+                    const timeframeLabel = highchartsRenderer.DATE_FILTER_TIMEFRAME_LABELS[fieldFilter.datetypevalues.val.timeframe] || highchartsRenderer.getDateFilterCustomTimeframeLabel(fieldFilter.datetypevalues.val);
+                    if (isGlobalFilter) {
+                        return {
+                            label: displayname + ': ' + highchartsRenderer.getGlobalFilterValueHighlighter(timeframeLabel),
+                            tooltip: displayname + ': ' + timeframeLabel,
+                        }
+                    }
+                    displayname += ` (${ timeframeLabel })`;
                 } else if (fieldFilter.datetypevalues.datetype === "range") {
                     const dates = {
                         from: { timestamp: fieldFilter.datetypevalues.val.fromdate, displayedValue: '' },
@@ -8189,16 +8225,29 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                                 .toLocaleDateString();
                         }
                     });
+                    if (isGlobalFilter) {
+                        displayname += `: ${ highchartsRenderer.getGlobalFilterValueHighlighter(dates.from.displayedValue + '-' + dates.to.displayedValue) }`;
+                        return {
+                            label: displayname,
+                            tooltip: dates.from.displayedValue + '-' + dates.to.displayedValue,
+                        }
+                    }
                     displayname += ` (${ dates.from.displayedValue }-${ dates.to.displayedValue })`;
                 } else {
-                    displayname += ' (All)';
+                    displayname += isGlobalFilter ? ': All' : ' (All)';
                 }
             } else if (fieldFilter &&
                 ((fieldFilter.values && fieldFilter.values.type === 'advanced') || (fieldFilter.datetypevalues && fieldFilter.datetypevalues.type === 'advanced'))) {
-                displayname += ' (Advanced)';
+                displayname +=  (isGlobalFilter ? ': ' + highchartsRenderer.getGlobalFilterValueHighlighter('Advanced') : ' (Advanced)');
+                return {
+                    label: displayname,
+                    tooltip: isGlobalFilter ? 'Advanced' : displayname,
+                };
+
             } else {
-                displayname += ' (All)';
+                displayname += isGlobalFilter ? ': All' : ' (All)';
             }
+
             return {
               label: displayname,
               tooltip: displayname
@@ -8206,6 +8255,27 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
     };
 
+    highchartsRenderer.getGlobalFilterValueHighlighter = function (value) {
+        return `<span class="filters-values-label">${ value }</span>`;
+    }
+
+    highchartsRenderer.getDateFilterCustomTimeframeLabel = function (value) {
+        if (!value || !value.timeframe || !value.timeframe.startsWith('x')) return 'Custom';
+
+        const deltaDirectionLabel = value.delta_direction === 'next' ? 'Next' : 'Last';
+        return `${ deltaDirectionLabel } ${ value.delta_absolute } ${ helpers.capitalize(value.timeframe.slice(1)) }${ value.delta_absolute > 1 ? 's' : '' }`
+    }
+
+    highchartsRenderer.getGlobalFilterCounterString = function(all_vals) {
+        const counterStartsAt = highchartsRenderer.MAX_SELECTED_ITEMS_BEFORE_SHOWING_COUNTER;
+
+        all_vals = all_vals.slice(0, -1).slice(counterStartsAt - 1, all_vals.length);
+        all_vals = all_vals.split(',');
+        if (all_vals.length > counterStartsAt) all_vals = all_vals.slice(0, counterStartsAt - 1) + ' + ' + (all_vals.length - (counterStartsAt - 1));
+        all_vals = highchartsRenderer.getGlobalFilterValueHighlighter(all_vals);
+        return all_vals;
+    }
+
     highchartsRenderer.getRelevantFilters = function (filtersList) {
         var dashboardsFilters = lodash.filter(filtersList, function (element) {
             return (element.hasOwnProperty('includes') && element.includes != null) || (element.hasOwnProperty('excludes') && element.excludes != null) ||

package/tests/dr-renderer-helpers.test.js

@@ -1,6 +1,6 @@
-describe('dr-renderer-helpers', () => {
-    const drRendererHelpers = require('../src/dr-renderer-helpers');
+import drRendererHelpers from '../src/dr-renderer-helpers';
 
+describe('dr-renderer-helpers', () => {
     describe('backendSortingKeysAreNotEmpty', () => {
         it('should return true if keys are not empty', () => {
             const keys = {
@@ -31,4 +31,21 @@ describe('dr-renderer-helpers', () => {
             expect(drRendererHelpers.backendSortingKeysAreNotEmpty(keys)).toBe(false);
         });
     });
+
+    describe('capitalize', () => {
+        it('should capitalize a string', () => {
+            const string = 'test';
+            expect(drRendererHelpers.capitalize(string)).toBe('Test');
+        });
+
+        it('should not capitalize a string when it was not trimmed', () => {
+            const string = ' test';
+            expect(drRendererHelpers.capitalize(string)).toBe(' test');
+        });
+
+        it('should return an empty string if string is null', () => {
+            const string = null;
+            expect(drRendererHelpers.capitalize(string)).toBe('');
+        });
+    });
 });

package/tests/highcharts_renderer.test.js

@@ -3571,95 +3571,145 @@ describe('highcharts_renderer', () => {
        });
 
        describe('Should present includes/excludes names', () => {
-           let fieldFilter;
+            let fieldFilter;
 
-           beforeEach(() => {
-               fieldFilter = {
-                   name: 'test',
-                   includes: null,
-                   excludes: null,
-                   type: 'Text',
-               };
-           });
+            beforeEach(() => {
+                fieldFilter = {
+                    name: 'test',
+                    includes: null,
+                    excludes: null,
+                    type: 'Text',
+                };
+            });
 
-           it('Should return "none" label when excludes empty', () => {
-               fieldFilter.includes = [];
-               const res = highchartsRenderer.getFilterLabel(fieldFilter, false);
-               expect(res.label).toEqual('test (none)');
-               expect(res.tooltip).toEqual('test (none)');
-           });
+            it('Should return "none" label when excludes empty', () => {
+                fieldFilter.includes = [];
+                const res = highchartsRenderer.getFilterLabel(fieldFilter, false);
+                expect(res.label).toEqual('test (None)');
+                expect(res.tooltip).toEqual('test (None)');
+            });
 
-           it('Should return "All" label when excludes empty', () => {
-               fieldFilter.excludes = [];
-               const res = highchartsRenderer.getFilterLabel(fieldFilter, false);
-               expect(res.label).toEqual('test (All)');
-               expect(res.tooltip).toEqual('test (All)');
-           });
+            it('Should return "All" label when excludes empty', () => {
+                fieldFilter.excludes = [];
+                const res = highchartsRenderer.getFilterLabel(fieldFilter, false);
+                expect(res.label).toEqual('test (All)');
+                expect(res.tooltip).toEqual('test (All)');
+            });
 
-           it('Should return "many" label when includes/excludes has more than MAX_SELECTED_ITEMS_IN_LABEL items', () => {
-               fieldFilter.includes = new Array(highchartsRenderer.MAX_SELECTED_ITEMS_IN_LABEL).fill('val');
-               let res = highchartsRenderer.getFilterLabel(fieldFilter, false);
-               expect(res.label).toEqual('test (many)');
-               expect(res.tooltip).toEqual('test (' + fieldFilter.includes.join(', ') + ')');
-
-               fieldFilter.excludes = fieldFilter.includes;
-               delete fieldFilter.includes;
-               res = highchartsRenderer.getFilterLabel(fieldFilter, false);
-               expect(res.label).toEqual('test (Exclusions many)');
-               expect(res.tooltip).toEqual('test (Exclusions: ' + fieldFilter.excludes.join(', ') + ')');
-           });
+            it('Should return "none" global filter label when excludes empty', () => {
+                fieldFilter.includes = [];
+                const res = highchartsRenderer.getFilterLabel(fieldFilter, false, false, true);
+                expect(res.label).toEqual('test: None');
+                expect(res.tooltip).toEqual('test None');
+            });
 
-           it('Should return "many" in label when includes has label length more than MAX_SELECTED_ITEMS_CHARECHTERS_IN_LABEL', () => {
-               fieldFilter.includes = ['[null]', 'long long long value 2', 'long long long value 3'];
-               let res = highchartsRenderer.getFilterLabel(fieldFilter, false);
-               expect(res.label).toEqual('test (many)');
-               expect(res.tooltip).toEqual('test (' + fieldFilter.includes.join(',') + ')');
-           });
 
-           it('Should return "many" in label when excludes has label length more than MAX_SELECTED_ITEMS_CHARECHTERS_IN_LABEL', () => {
-               fieldFilter.excludes = ['[null]', 'long long long value 2', 'long long long value 3'];
-               let res = highchartsRenderer.getFilterLabel(fieldFilter, false);
-               expect(res.label).toEqual('test (Exclusions: many)');
-               expect(res.tooltip).toEqual('test (Exclusions: ' + fieldFilter.excludes.join(',') + ')');
-           });
+            it('Should return "All" global filter label when excludes empty', () => {
+                fieldFilter.excludes = [];
+                const res = highchartsRenderer.getFilterLabel(fieldFilter, false, false, true);
+                expect(res.label).toEqual('test: All');
+                expect(res.tooltip).toEqual('test All');
+            });
 
-           it('Should exclude "[null]" from includes if allow_nulls enabled', () => {
-               fieldFilter.allow_nulls = true;
-               fieldFilter.includes = ['value 1', '[null]'];
-               let res = highchartsRenderer.getFilterLabel(fieldFilter, false);
-               expect(res.label).toEqual('test (value 1)');
-               expect(res.tooltip).toEqual('test (' + fieldFilter.includes[0] + ')');
-           });
+            it('Should return "many" label when includes/excludes has more than MAX_SELECTED_ITEMS_IN_LABEL items', () => {
+                fieldFilter.includes = new Array(highchartsRenderer.MAX_SELECTED_ITEMS_IN_LABEL).fill('val');
+                let res = highchartsRenderer.getFilterLabel(fieldFilter, false);
+                expect(res.label).toEqual('test (Many)');
+                expect(res.tooltip).toEqual('test (' + fieldFilter.includes.join(', ') + ')');
+
+                fieldFilter.excludes = fieldFilter.includes;
+                delete fieldFilter.includes;
+                res = highchartsRenderer.getFilterLabel(fieldFilter, false);
+                expect(res.label).toEqual('test (Exclusions Many)');
+                expect(res.tooltip).toEqual('test (Exclusions: ' + fieldFilter.excludes.join(', ') + ')');
+            });
 
-           it('Should exclude "[null]" from excludes if allow_nulls enabled', () => {
-               fieldFilter.allow_nulls = true;
-               fieldFilter.excludes = ['value 1', '[null]'];
-               let res = highchartsRenderer.getFilterLabel(fieldFilter, false);
-               expect(res.label).toEqual('test (Exclusions: value 1)');
-               expect(res.tooltip).toEqual('test (Exclusions: ' + fieldFilter.excludes[0] + ')');
-           });
+            it('Should return "many" in label when includes has label length more than MAX_SELECTED_ITEMS_CHARECHTERS_IN_LABEL', () => {
+                fieldFilter.includes = ['[null]', 'long long long value 2', 'long long long value 3'];
+                let res = highchartsRenderer.getFilterLabel(fieldFilter, false);
+                expect(res.label).toEqual('test (Many)');
+                expect(res.tooltip).toEqual('test (' + fieldFilter.includes.join(', ') + ')');
+            });
 
-           it('Should present formatted dates in includes. Get formatted value from invertValueFormatMap object if exist ', () => {
-               fieldFilter.includes = [1682063884, 1682060884, 1682013884];
-               fieldFilter.type = 'Date';
-               fieldFilter.valueFormatMap = {
-                   'April 21, 2023': 1682063884
-               };
-               let res = highchartsRenderer.getFilterLabel(fieldFilter, false);
-               expect(res.label).toEqual('test (April 21, 2023,04/21/2023,04/20/2023)');
-               expect(res.tooltip).toEqual('test (April 21, 2023,04/21/2023,04/20/2023)');
-           });
+            it('Should return "many" in label when excludes has label length more than MAX_SELECTED_ITEMS_CHARECHTERS_IN_LABEL', () => {
+                fieldFilter.excludes = ['[null]', 'long long long value 2', 'long long long value 3'];
+                let res = highchartsRenderer.getFilterLabel(fieldFilter, false);
+                expect(res.label).toEqual('test (Exclusions: Many)');
+                expect(res.tooltip).toEqual('test (Exclusions: ' + fieldFilter.excludes.join(', ') + ')');
+            });
 
-           it('Should present formatted dates in excludes. Get formatted value from invertValueFormatMap object if exist ', () => {
-               fieldFilter.excludes = [1682063884, 1682060884];
-               fieldFilter.type = 'Date';
-               fieldFilter.valueFormatMap = {
-                   'April 21, 2023': 1682063884
-               };
-               let res = highchartsRenderer.getFilterLabel(fieldFilter, false);
-               expect(res.label).toEqual('test (Exclusions: April 21, 2023,04/21/2023)');
-               expect(res.tooltip).toEqual('test (Exclusions: April 21, 2023,04/21/2023)');
-           });
+            it('Should return all selected values in global filter label when selected is acceptable to show actual values', () => {
+                fieldFilter.includes = ['value', 'value', 'value']
+                let res = highchartsRenderer.getFilterLabel(fieldFilter, false, false, true);
+                expect(res.label).toEqual('test: <span class=\"filters-values-label\">value, value, value</span>');
+                expect(res.tooltip).toEqual('test:  (' + fieldFilter.includes.join(', ') + ')');
+            });
+
+            it('Should return "many" in global filter label when selected more than acceptable to show amount of values ', () => {
+                fieldFilter.includes = new Array(highchartsRenderer.MAX_SELECTED_ITEMS_BEFORE_COLLAPSING + 1).fill('val');
+                let res = highchartsRenderer.getFilterLabel(fieldFilter, false, false, true);
+                expect(res.label).toEqual('test: <span class=\"filters-values-label\">Many</span>');
+                expect(res.tooltip).toEqual('test:  (' + fieldFilter.includes.join(', ') + ')');
+            });
+
+            it('Should return selected value + counter in global filter label when selected more than acceptable to show amount of values but acceptable to show counter', () => {
+                fieldFilter.includes = new Array(highchartsRenderer.MAX_SELECTED_ITEMS_BEFORE_COLLAPSING).fill('val');
+                let res = highchartsRenderer.getFilterLabel(fieldFilter, false, false, true);
+                expect(res.label).toEqual('test: <span class=\"filters-values-label\">val, val + 9</span>');
+                expect(res.tooltip).toEqual('test:  (' + fieldFilter.includes.join(', ') + ')');
+            });
+
+            it('Should return selected values + counter in global filter label when selected more than acceptable to show amount of values but acceptable to show counter', () => {
+                fieldFilter.includes = new Array(highchartsRenderer.MAX_SELECTED_ITEMS_BEFORE_COLLAPSING).fill('val');
+                let res = highchartsRenderer.getFilterLabel(fieldFilter, false, false, true);
+                expect(res.label).toEqual('test: <span class=\"filters-values-label\">val, val + 9</span>');
+                expect(res.tooltip).toEqual('test:  (' + fieldFilter.includes.join(', ') + ')');
+            });
+
+            it('Should return excluded value + counter in global filter label when selected more than acceptable to show amount of values but acceptable to show counter', () => {
+                fieldFilter.excludes = new Array(highchartsRenderer.MAX_SELECTED_ITEMS_BEFORE_COLLAPSING).fill('val');
+                let res = highchartsRenderer.getFilterLabel(fieldFilter, false, false, true);
+                expect(res.label).toEqual('test: <span class=\"filters-values-label\">Exclusions: val, val + 9</span>');
+                expect(res.tooltip).toEqual('test:  (Exclusions: ' + fieldFilter.excludes.join(', ') + ')');
+            });
+
+            it('Should exclude "[null]" from includes if allow_nulls enabled', () => {
+                fieldFilter.allow_nulls = true;
+                fieldFilter.includes = ['value 1', '[null]'];
+                let res = highchartsRenderer.getFilterLabel(fieldFilter, false);
+                expect(res.label).toEqual('test (value 1)');
+                expect(res.tooltip).toEqual('test (' + fieldFilter.includes[0] + ')');
+            });
+
+            it('Should exclude "[null]" from excludes if allow_nulls enabled', () => {
+                fieldFilter.allow_nulls = true;
+                fieldFilter.excludes = ['value 1', '[null]'];
+                let res = highchartsRenderer.getFilterLabel(fieldFilter, false);
+                expect(res.label).toEqual('test (Exclusions: value 1)');
+                expect(res.tooltip).toEqual('test (Exclusions: ' + fieldFilter.excludes[0] + ')');
+            });
+
+            it('Should present formatted dates in includes. Get formatted value from invertValueFormatMap object if exist ', () => {
+                fieldFilter.includes = [1682063884, 1682060884, 1682013884];
+                fieldFilter.type = 'Date';
+                fieldFilter.valueFormatMap = {
+                    'April 21, 2023': 1682063884
+                };
+                let res = highchartsRenderer.getFilterLabel(fieldFilter, false);
+                expect(res.label).toEqual('test (April 21, 2023, 04/21/2023, 04/20/2023)');
+                expect(res.tooltip).toEqual('test (April 21, 2023, 04/21/2023, 04/20/2023)');
+            });
+
+            it('Should present formatted dates in excludes. Get formatted value from invertValueFormatMap object if exist ', () => {
+                fieldFilter.excludes = [1682063884, 1682060884];
+                fieldFilter.type = 'Date';
+                fieldFilter.valueFormatMap = {
+                    'April 21, 2023': 1682063884
+                };
+                let res = highchartsRenderer.getFilterLabel(fieldFilter, false);
+                expect(res.label).toEqual('test (Exclusions: April 21, 2023, 04/21/2023)');
+                expect(res.tooltip).toEqual('test (Exclusions: April 21, 2023, 04/21/2023)');
+            });
        });
 
        describe('Should present date range or frame selection', () => {
@@ -3691,12 +3741,12 @@ describe('highcharts_renderer', () => {
                fieldFilter.datetypevalues = {
                    datetype: 'frame',
                    val: {
-                       timeframe: 'xday'
+                       timeframe: 'day'
                    }
                };
                const res = highchartsRenderer.getFilterLabel(fieldFilter, false);
-               expect(res.label).toEqual('test (xday)');
-               expect(res.tooltip).toEqual('test (xday)');
+               expect(res.label).toEqual('test (End of period)');
+               expect(res.tooltip).toEqual('test (End of period)');
            });
 
            it('Should return "All" label when datetype is not selected', () => {
@@ -3707,19 +3757,31 @@ describe('highcharts_renderer', () => {
            });
        });
 
-       describe('Should present advanced filter selection', () => {
-           it('Should return "Advanced" label when advanced type in values', () => {
+        describe('Should present advanced filter selection', () => {
+            it('Should return "Advanced" label when advanced type in values', () => {
                const res = highchartsRenderer.getFilterLabel({ name: 'test', values: { type: 'advanced'} }, false);
                expect(res.label).toEqual('test (Advanced)');
                expect(res.tooltip).toEqual('test (Advanced)');
-           });
+            });
 
-           it('Should return "Advanced" label when advanced type in datetypevalues', () => {
+            it('Should return "Advanced" label when advanced type in datetypevalues', () => {
                const res = highchartsRenderer.getFilterLabel({ name: 'test', datetypevalues: { type: 'advanced'} }, false);
                expect(res.label).toEqual('test (Advanced)');
                expect(res.tooltip).toEqual('test (Advanced)');
-           });
-       });
+            });
+
+            it('Should return "Advanced" global filter label when advanced type in values', () => {
+                const res = highchartsRenderer.getFilterLabel({ name: 'test', values: { type: 'advanced'} }, false, false, true);
+                expect(res.label).toEqual('test: <span class=\"filters-values-label\">Advanced</span>');
+                expect(res.tooltip).toEqual('Advanced');
+             });
+
+            it('Should return "Advanced" global filter label when advanced type in datetypevalues', () => {
+               const res = highchartsRenderer.getFilterLabel({ name: 'test', datetypevalues: { type: 'advanced'} }, false, false, true);
+               expect(res.label).toEqual('test: <span class=\"filters-values-label\">Advanced</span>');
+               expect(res.tooltip).toEqual('Advanced');
+            });
+        });
 
        describe('Should present All if nothing selected', () => {
            it('Should return "All" label when nothing selected', () => {
@@ -3730,6 +3792,48 @@ describe('highcharts_renderer', () => {
        });
     });
 
+    describe('function getGlobalFilterValueHighlighter', () => {
+        it('should return a html wrapper with value', () => {
+            const value = 'test';
+            const res = highchartsRenderer.getGlobalFilterValueHighlighter(value);
+            expect(res).toEqual('<span class=\"filters-values-label\">test</span>');
+        });
+
+        it('should return a html wrapper with empty value', () => {
+            const value = '';
+            const res = highchartsRenderer.getGlobalFilterValueHighlighter(value);
+            expect(res).toEqual('<span class=\"filters-values-label\"></span>');
+        });
+    });
+
+    describe('function getDateFilterCustomTimeframeLabel', () => {
+        it('should return a label for a timeframe that not in the list', () => {
+            const timeframe = 'custom';
+            const res = highchartsRenderer.getDateFilterCustomTimeframeLabel({ timeframe });
+            expect(res).toEqual('Custom');
+        });
+
+        it('should return a label for a empty timeframe', () => {
+            const timeframe = '';
+            const res = highchartsRenderer.getDateFilterCustomTimeframeLabel({ timeframe });
+            expect(res).toEqual('Custom');
+        });
+
+        it('should return a label for a xday timeframe', () => {
+            const timeframe = 'xday';
+            const res = highchartsRenderer.getDateFilterCustomTimeframeLabel({ timeframe, delta_absolute: 1, delta_direction: 'next' });
+
+            expect(res).toEqual('Next 1 Day');
+        });
+
+        it('should return a label for a xday timeframe with delta_absolute > 1', () => {
+            const timeframe = 'xday';
+            const res = highchartsRenderer.getDateFilterCustomTimeframeLabel({ timeframe, delta_absolute: 2, delta_direction: 'next' });
+
+            expect(res).toEqual('Next 2 Days');
+        });
+    });
+
     describe('function getRelevantFilters', () => {
         it('should return an empty array if given an empty array', () => {
             const filters = highchartsRenderer.getRelevantFilters([]);