@datarailsshared/dr_renderer 1.2.442 → 1.2.445

package/package.json

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

package/src/highcharts_renderer.js

@@ -1567,6 +1567,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             totalSeries.className = 'totalSeries';
             totalSeries.name = 'Total';
             totalSeries.data = [];
+            
+            // DEV_FF: DR-31422
+            if (opts.devFixDrollDownByTotal) {
+                totalSeries.initialName = 'Total';
+                totalSeries.isTotal = true;
+            }
 
             if (colors && colors[i]) {
                 totalSeries.color = colors[i];
@@ -8120,8 +8126,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     }
 
     // TODO: refactor, too many conditions, unreadable
-    highchartsRenderer.getFilterLabel = function (fieldFilter, showTemplateName, isFormattingNumbers, isGlobalFilter = false) {
+    highchartsRenderer.getFilterLabel = function (fieldFilter, showTemplateName, isFormattingNumbers, isGlobalFilter = false, isPermissionFilter = false) {
         var displayname;
+        const isPermissionOrGlobalFilter = (isGlobalFilter || isPermissionFilter);
+        const separator = isGlobalFilter ? ': ' : isPermissionFilter ? highchartsRenderer.getPermissionFilterSeparatorHighlighter(` ${fieldFilter.excludes ? 'exclude': 'include'} `) : '';
+
         if (fieldFilter.new_name)
             displayname = fieldFilter.new_name.replace('RH_DIM_', '');
         else {
@@ -8133,7 +8142,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
 
         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 + ')');
+            const label = displayname + (isPermissionOrGlobalFilter ? highchartsRenderer.getGlobalFilterValueHighlighter(fieldFilter.datetypevalues.datetype) : ' (' + fieldFilter.datetypevalues.datetype + ')');
             return {
               label,
               tooltip: displayname + ' (' + fieldFilter.datetypevalues.datetype + ')'
@@ -8164,8 +8173,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 if (all_vals) {
                     all_vals = all_vals.join(', ');
                     tooltip = ' (' + all_vals + ')';
-                    if (all_vals.split(',').length > highchartsRenderer.MAX_SELECTED_ITEMS_BEFORE_COLLAPSING && isGlobalFilter
-                        || all_vals.length > highchartsRenderer.MAX_SELECTED_ITEMS_CHARECHTERS_IN_LABEL && !isGlobalFilter) {
+                    if (all_vals.split(',').length > highchartsRenderer.MAX_SELECTED_ITEMS_BEFORE_COLLAPSING && isPermissionOrGlobalFilter
+                        || all_vals.length > highchartsRenderer.MAX_SELECTED_ITEMS_CHARECHTERS_IN_LABEL && !isPermissionOrGlobalFilter) {
                         all_vals = 'Many';
                     }
                     all_vals = ' (' + all_vals + ')';
@@ -8176,9 +8185,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
                 all_vals = highchartsRenderer.decodeFunc(all_vals);
                 tooltip = highchartsRenderer.decodeFunc(tooltip);
-                if (isGlobalFilter) {
+                if (isPermissionOrGlobalFilter) {
                     all_vals = highchartsRenderer.getGlobalFilterCounterString(all_vals);
-                    displayname = displayname + ': ';
+                    displayname = displayname + separator;
                 };
                 return {
                     label: displayname + all_vals,
@@ -8204,22 +8213,22 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
                 if (all_vals) {
                     all_vals = all_vals.join(', ');
-                    tooltip = ' (Exclusions: ' + all_vals + ')';
-                    if (all_vals.split(',').length > highchartsRenderer.MAX_SELECTED_ITEMS_BEFORE_COLLAPSING && isGlobalFilter
-                        || all_vals.length > highchartsRenderer.MAX_SELECTED_ITEMS_CHARECHTERS_IN_LABEL && !isGlobalFilter) {
+                    tooltip = (isPermissionFilter ? ' (' : ' (Exclusions: ') + all_vals + ')';
+                    if (all_vals.split(',').length > highchartsRenderer.MAX_SELECTED_ITEMS_BEFORE_COLLAPSING && isPermissionOrGlobalFilter
+                        || all_vals.length > highchartsRenderer.MAX_SELECTED_ITEMS_CHARECHTERS_IN_LABEL && !isPermissionOrGlobalFilter) {
                         all_vals = 'Many';
                     }
-                    all_vals = ' (Exclusions: ' + all_vals + ')';
+                    all_vals = (isPermissionFilter ? ' (' : ' (Exclusions: ') + all_vals + ')';
                 } else {
-                    tooltip = isGlobalFilter ? ': All' : ' (All)';
+                    tooltip = isPermissionOrGlobalFilter ? separator + 'All' : ' (All)';
                     all_vals = 'All';
                 }
 
                 all_vals = highchartsRenderer.decodeFunc(all_vals);
                 tooltip = highchartsRenderer.decodeFunc(tooltip);
-                if (isGlobalFilter) {
+                if (isPermissionOrGlobalFilter) {
                     all_vals = highchartsRenderer.getGlobalFilterCounterString(all_vals);
-                    displayname = displayname + ': ';
+                    displayname = displayname + separator;
                 };
                 return {
                     label: displayname + all_vals,
@@ -8228,26 +8237,29 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             } else {
                 if ((fieldFilter.includes && fieldFilter.includes.length == 0))
                     return {
-                      label: displayname + (isGlobalFilter ? ': None' : ' (None)'),
-                      tooltip: displayname + (isGlobalFilter ? ' None' : ' (None)'),
+                      label: displayname + (isPermissionOrGlobalFilter ? separator + 'None' : ' (None)'),
+                      tooltip: displayname + (isPermissionOrGlobalFilter ? ' None' : ' (None)'),
                     };
                 else if ((fieldFilter.excludes && fieldFilter.excludes.length == 0))
                     return {
-                      label: displayname + (isGlobalFilter ? ': All' : ' (All)'),
-                      tooltip: displayname + (isGlobalFilter ? ' All' : ' (All)'),
+                      label: displayname + (isPermissionOrGlobalFilter ? separator + 'All' : ' (All)'),
+                      tooltip: displayname + (isPermissionOrGlobalFilter ? (isPermissionFilter ? separator : ' ') + 'All' : ' (All)'),
                     };
                 else if ((fieldFilter.includes))
                     return {
-                      label: displayname + (isGlobalFilter ? ': ' + highchartsRenderer.getGlobalFilterValueHighlighter('Many') : ' (Many)'),
+                      label: displayname + (isPermissionOrGlobalFilter ? separator + highchartsRenderer.getGlobalFilterValueHighlighter('Many') : ' (Many)'),
                       tooltip: displayname + ' (' +
                           lodash.map(fieldFilter.includes, item => highchartsRenderer.returnRawDataValue(fieldFilter.type, item, fieldFilter.format)).join(', ') +
                           ')'
                     };
                 else {
-                    const label = displayname + (isGlobalFilter ? ': ' + highchartsRenderer.getGlobalFilterValueHighlighter('Exclusions: Many') : ' (Exclusions Many)');
-                    return {
+                    let label = displayname + (isGlobalFilter ? separator + highchartsRenderer.getGlobalFilterValueHighlighter('Exclusions: Many') : ' (Exclusions Many)');
+                    if (isPermissionFilter) {
+                        label = displayname + separator + ' Many';
+                    }
+                     return {
                         label,
-                        tooltip: displayname + ' (Exclusions: ' +
+                        tooltip: displayname + (isPermissionFilter ? ' (' : ' (Exclusions: ') +
                             lodash.map(fieldFilter.excludes, item => highchartsRenderer.returnRawDataValue(fieldFilter.type, item, fieldFilter.format)).join(', ') +
                             ')'
                     };
@@ -8257,10 +8269,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             if (fieldFilter && fieldFilter.type && fieldFilter.type === 'Date' && fieldFilter.datetypevalues) {
                 if (fieldFilter.datetypevalues.datetype === "frame") {
                     const timeframeLabel = highchartsRenderer.DATE_FILTER_TIMEFRAME_LABELS[fieldFilter.datetypevalues.val.timeframe] || highchartsRenderer.getDateFilterCustomTimeframeLabel(fieldFilter.datetypevalues.val);
-                    if (isGlobalFilter) {
+                    if (isPermissionOrGlobalFilter) {
                         return {
-                            label: displayname + ': ' + highchartsRenderer.getGlobalFilterValueHighlighter(timeframeLabel),
-                            tooltip: displayname + ': ' + timeframeLabel,
+                            label: displayname + separator + highchartsRenderer.getGlobalFilterValueHighlighter(timeframeLabel),
+                            tooltip: displayname + separator + timeframeLabel,
                         }
                     }
                     displayname += ` (${ timeframeLabel })`;
@@ -8282,8 +8294,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                                 .toLocaleDateString();
                         }
                     });
-                    if (isGlobalFilter) {
-                        displayname += `: ${ highchartsRenderer.getGlobalFilterValueHighlighter(dates.from.displayedValue + '-' + dates.to.displayedValue) }`;
+                    if (isPermissionOrGlobalFilter) {
+                        displayname += `${separator}${ highchartsRenderer.getGlobalFilterValueHighlighter(dates.from.displayedValue + '-' + dates.to.displayedValue) }`;
                         return {
                             label: displayname,
                             tooltip: dates.from.displayedValue + '-' + dates.to.displayedValue,
@@ -8291,18 +8303,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     }
                     displayname += ` (${ dates.from.displayedValue }-${ dates.to.displayedValue })`;
                 } else {
-                    displayname += isGlobalFilter ? ': All' : ' (All)';
+                    displayname += isPermissionOrGlobalFilter ? separator + 'All' : ' (All)';
                 }
             } else if (fieldFilter &&
                 ((fieldFilter.values && fieldFilter.values.type === 'advanced') || (fieldFilter.datetypevalues && fieldFilter.datetypevalues.type === 'advanced'))) {
-                displayname +=  (isGlobalFilter ? ': ' + highchartsRenderer.getGlobalFilterValueHighlighter('Advanced') : ' (Advanced)');
+                displayname +=  (isPermissionOrGlobalFilter ? separator + highchartsRenderer.getGlobalFilterValueHighlighter('Advanced') : ' (Advanced)');
                 return {
                     label: displayname,
-                    tooltip: isGlobalFilter ? 'Advanced' : displayname,
+                    tooltip: isPermissionOrGlobalFilter ? 'Advanced' : displayname,
                 };
 
             } else {
-                displayname += isGlobalFilter ? ': All' : ' (All)';
+                displayname += isPermissionOrGlobalFilter ? separator + 'All' : ' (All)';
             }
 
             return {
@@ -8316,6 +8328,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return `<span class="filters-values-label">${ value }</span>`;
     }
 
+    highchartsRenderer.getPermissionFilterSeparatorHighlighter = function (value) {
+        return `<span class="filters-values-separator">${ value }</span>`;
+    }
+
     highchartsRenderer.getDateFilterCustomTimeframeLabel = function (value) {
         if (!value || !value.timeframe || !value.timeframe.startsWith('x')) return 'Custom';
 

package/tests/highcharts_renderer.test.js

@@ -6882,7 +6882,174 @@ describe('highcharts_renderer', () => {
                     color: '#b3060e'
                 }
             ]);
-        })
+        });
+
+        describe("DR-31214 - Fix drilldown by total", () => {
+            const originResponse = [{
+                color: '#ff0202',
+                data: [
+                    {
+                        drilldown: true,
+                        initialName: 'col 1',
+                        name: 'col 1',
+                        y: 12345
+                    },
+                    {
+                        drilldown: true,
+                        initialName: 'col 2',
+                        name: 'col 2',
+                        y: 54321
+                    },
+                    {
+                        drilldown: true,
+                        initialName: 'Others',
+                        name: 'Others',
+                        y: 99999
+                    }
+                ],
+                dataLabels: {
+                    allowOverlap: false,
+                    color: '#151a41',
+                    enabled: true,
+                    formatter: expect.any(Function),
+                    style: {
+                        fontFamily: 'Poppins',
+                        fontSize: '11',
+                        fontWeight: 'normal'
+                    }
+                },
+                initialName: 'row 1',
+                name: 'row 1'
+            },
+            {
+                color: '#b3060e',
+                data: [
+                    {
+                        drilldown: true,
+                        initialName: 'col 1',
+                        name: 'col 1',
+                        y: 123450
+                    },
+                    {
+                        drilldown: true,
+                        initialName: 'col 2',
+                        name: 'col 2',
+                        y: 11111
+                    },
+                    {
+                        drilldown: true,
+                        initialName: 'Others',
+                        name: 'Others',
+                        y: 99991
+                    }
+                ],
+                dataLabels: {
+                    allowOverlap: false,
+                    color: '#151a41',
+                    enabled: true,
+                    formatter: expect.any(Function),
+                    style: {
+                        fontFamily: 'Poppins',
+                        fontSize: '11',
+                        fontWeight: 'normal'
+                    }
+                },
+                initialName: 'row 2',
+                name: 'row 2'
+            },
+            {
+                className: 'totalSeries',
+                color: '#70000a',
+                data: [
+                    {
+                        initialName: 'col 1',
+                        name: 'col 1',
+                        y: 123450
+                    },
+                    {
+                        initialName: 'col 2',
+                        name: 'col 2',
+                        y: 123451
+                    },
+                    {
+                        initialName: 'DR_Others',
+                        name: 'DR_Others',
+                        y: 123452
+                    }
+                ],
+                dataLabels: {
+                    allowOverlap: false,
+                    color: '#151a41',
+                    enabled: true,
+                    formatter: expect.any(Function),
+                    style: {
+                        fontFamily: 'Poppins',
+                        fontSize: '11',
+                        fontWeight: 'normal'
+                    }
+                },
+                initialName: 'row 2',
+                name: 'Total'
+            }];
+  
+            it("should mark the series as total if the feature flag is on", () => {
+                additionalOptionsMock = {};
+                opts = {
+                    total: true,
+                    devFixDrollDownByTotal: true,
+                };
+                pivotDataMock.colTotals = {
+                    "col 1": { value: () => 123450 },
+                    "col 2": { value: () => 123451 },
+                    DR_Others: { value: () => 123452 },
+                };
+                const value = highchartsRenderer.ptCreateColumnSeries(
+                    pivotDataMock,
+                    colors,
+                    onlyNumbers,
+                    isUniqueVals,
+                    isNotDrillDown,
+                    additionalOptionsMock,
+                    opts,
+                    chartOptions,
+                    chartType
+                );
+                const fixedResponse = [...originResponse];
+                fixedResponse[fixedResponse.length - 1] = {
+                    ...fixedResponse[fixedResponse.length - 1],
+                    ...{
+                        initialName: "Total",
+                        isTotal: true,
+                    },
+                };
+                expect(value).toEqual(fixedResponse);
+            });
+  
+            it("should not change the original series if the feature flag is off", () => {
+                additionalOptionsMock = {};
+                opts = {
+                    total: true,
+                    devFixDrollDownByTotal: false,
+                };
+                pivotDataMock.colTotals = {
+                    "col 1": { value: () => 123450 },
+                    "col 2": { value: () => 123451 },
+                    DR_Others: { value: () => 123452 },
+                };
+                const value = highchartsRenderer.ptCreateColumnSeries(
+                    pivotDataMock,
+                    colors,
+                    onlyNumbers,
+                    isUniqueVals,
+                    isNotDrillDown,
+                    additionalOptionsMock,
+                    opts,
+                    chartOptions,
+                    chartType
+                );
+                expect(value).toEqual(originResponse);
+            });
+        });
     });
     describe('Function ptCreateBasicLineSeries', () => {
         const format = null;