@datarailsshared/dr_renderer 1.2.388 → 1.2.390

package/package.json

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

package/tests/highcharts_renderer.test.js

@@ -5711,4 +5711,467 @@ describe('highcharts_renderer', () => {
             expect(sortObj).toEqual(expectedObj);
         });
     });
+
+    describe('Function defaultFormatterToTooltip', () => {
+
+        const othersName = 'TEST_DR_OTHERS';
+        let format;
+        let pivotDataMock;
+        let optsMock;
+        let displayTooltipContext;
+        let isForDrilldownPie;
+
+        beforeEach(() => {
+            pivotDataMock = {
+                getAggregator: (rows, cols) => {
+                    let aggregator = highchartsRenderer.rhPivotAggregatorSum([''], format, true, {}, {});
+                    const agg = aggregator({}, '', '');
+                    
+                    if (lodash.isEqual(cols, ['col 1']) && lodash.isEqual(rows, ['row 1'])) {
+                        agg.sum = 12345;
+                    } else if (lodash.isEqual(cols, ['col 1']) && lodash.isEqual(rows, [])) {
+                        agg.sum = 123450;
+                    } else if (lodash.isEqual(cols, []) && lodash.isEqual(rows, ['row 1'])) {
+                        agg.sum = 1234500;
+                    } else if (lodash.isEqual(cols, ['col 1', 'col 2']) && lodash.isEqual(rows, ['row 1'])) {
+                        agg.sum = 54321;
+                    } else if (lodash.isEqual(cols, ['col 1']) && lodash.isEqual(rows, ['row 1', 'row 2'])) {
+                        agg.sum = 11111;
+                    } else if (lodash.isEqual(cols, [highchartsRenderer.DR_OTHERS_KEY]) && lodash.isEqual(rows, ['row 1'])) {
+                        agg.sum = 99999;
+                    } else if (lodash.isEqual(cols, ['Total 1']) && lodash.isEqual(rows, [])) {
+                        agg.sum = 88888;
+                    } else {
+                        return null;
+                    }
+
+                    return agg;
+                },
+                getColKeys: () => [['col 1'], ['col 2'], ['col 3'], [highchartsRenderer.DR_OTHERS_KEY]],
+                getRowKeys: () => [['row 1'], ['row 2'], ['row 3']],
+                rowAttrs: ['row 1'],
+            };
+    
+            optsMock = {
+                total_value_options: {
+                    filter_options: {
+                        filteredOutFieldName: othersName,
+                    }
+                },
+                chartOptions: {
+                    tooltips: {
+                        show_value: true,
+                        show_data_series: true,
+                        show_x_axis: true,
+                    },
+                },
+            };
+    
+            displayTooltipContext = {
+                series: {
+                    options: {
+                        className: 'some custom value',
+                    },
+                    name: 'row 1',
+                    color: 'green',
+                },
+                y: 12345,
+                key: ['col 1']
+            };
+
+            isForDrilldownPie = false;
+            format = '"$"#,###.##';
+        });
+
+        describe('should return proper tooltip html (BASIC, try different formats)', () => {
+
+            const formatCases = [
+                {
+                    format: '$"#,###.##',
+                    expected: '$12,345.0'
+                },
+                {
+                    format: '%"#,###.##',
+                    expected: '%1,234,500.0'
+                },
+                {
+                    format: '#,###',
+                    expected: '12,345'
+                },
+                {
+                    format: '#,###[kilo]K',
+                    expected: '12K'
+                },
+            ];
+
+            formatCases.forEach(formatCase => {
+                it(`for format ${ formatCase.format } expecting value ${ formatCase.expected }`, () => {
+                    format = formatCase.format;
+                    const tooltipFunction =
+                        highchartsRenderer.defaultFormatterToTooltip(pivotDataMock, optsMock, isForDrilldownPie);
+                    const tooltipHtml = tooltipFunction.call(displayTooltipContext);
+
+                    expect(tooltipHtml).toEqual(`<span style="font-weight: bold;">
+                        col 1  
+                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E${ formatCase.expected }</span>`
+                    );
+                });
+            });
+        });
+
+        it('should return proper tooltip html (no column name)', () => {
+            optsMock.chartOptions.tooltips.show_x_axis = false;
+
+            const tooltipFunction =
+                highchartsRenderer.defaultFormatterToTooltip(pivotDataMock, optsMock, isForDrilldownPie);
+            const tooltipHtml = tooltipFunction.call(displayTooltipContext);
+            
+            expect(tooltipHtml).toEqual(
+                '<br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E$12,345.0</span>'
+            );
+        });
+
+        it('should return proper tooltip html (+ show_out_of_x_axis)', () => {
+            optsMock.chartOptions.tooltips.show_out_of_x_axis = true;
+
+            const tooltipFunction =
+                highchartsRenderer.defaultFormatterToTooltip(pivotDataMock, optsMock, isForDrilldownPie);
+            const tooltipHtml = tooltipFunction.call(displayTooltipContext);
+            
+            expect(tooltipHtml).toEqual(
+                `<span style="font-weight: bold;">
+                        col 1  
+                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E$12,345.0</span>`
+                    + '<br/>% Out of Axis (Category): 10%'
+            );
+        });
+
+        it('should return proper tooltip html (+ show_out_of_data_series)', () => {
+            optsMock.chartOptions.tooltips.show_out_of_data_series = true;
+
+            const tooltipFunction =
+                highchartsRenderer.defaultFormatterToTooltip(pivotDataMock, optsMock, isForDrilldownPie);
+            const tooltipHtml = tooltipFunction.call(displayTooltipContext);
+            
+            expect(tooltipHtml).toEqual(
+                `<span style="font-weight: bold;">
+                        col 1  
+                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E$12,345.0</span>`
+                    + '<br/>% Out of Legend (Series): 1%'
+            );
+        });
+
+        it('should return proper tooltip html (+ show_out_of_x_axis, show_out_of_data_series)', () => {
+            optsMock.chartOptions.tooltips.show_out_of_x_axis = true;
+            optsMock.chartOptions.tooltips.show_out_of_data_series = true;
+
+            const tooltipFunction =
+                highchartsRenderer.defaultFormatterToTooltip(pivotDataMock, optsMock, isForDrilldownPie);
+            const tooltipHtml = tooltipFunction.call(displayTooltipContext);
+            
+            expect(tooltipHtml).toEqual(
+                `<span style="font-weight: bold;">
+                        col 1  
+                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E$12,345.0</span>`
+                + '<br/>% Out of Axis (Category): 10%, % Out of Legend (Series): 1%'
+            );
+        });
+
+        it('should return proper tooltip html (+ show_out_of_x_axis, show_out_of_data_series) SPECIFY LABELS', () => {
+            optsMock.chartOptions.tooltips.show_out_of_x_axis = true;
+            optsMock.chartOptions.tooltips.show_out_of_data_series = true;
+            optsMock.chartLabels = {
+                axis: 'X-AXIS',
+                legend: 'DATA-SERIES',
+            }
+
+            const tooltipFunction =
+                highchartsRenderer.defaultFormatterToTooltip(pivotDataMock, optsMock, isForDrilldownPie);
+            const tooltipHtml = tooltipFunction.call(displayTooltipContext);
+            
+            expect(tooltipHtml).toEqual(
+                `<span style="font-weight: bold;">
+                        col 1  
+                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E$12,345.0</span>`
+                    + '<br/>% Out of X-AXIS: 10%, % Out of DATA-SERIES: 1%'
+            );
+        });
+
+        it('should return proper tooltip html (compound col key)', () => {
+
+            displayTooltipContext.key = ['col 1', 'col 2'];
+
+            const tooltipFunction =
+                highchartsRenderer.defaultFormatterToTooltip(pivotDataMock, optsMock, isForDrilldownPie);
+            const tooltipHtml = tooltipFunction.call(displayTooltipContext);
+            
+            expect(tooltipHtml).toEqual(
+                `<span style="font-weight: bold;">
+                        col 1,col 2  
+                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E$54,321.0</span>`
+            );
+        });
+
+        it('should return proper tooltip html (compound row key)', () => {
+            displayTooltipContext.key = ['col 1'];
+            displayTooltipContext.series.name = `row 1${ highchartsRenderer.delimer }row 2`;
+
+            const tooltipFunction =
+                highchartsRenderer.defaultFormatterToTooltip(pivotDataMock, optsMock, isForDrilldownPie);
+            const tooltipHtml = tooltipFunction.call(displayTooltipContext);
+            
+            expect(tooltipHtml).toEqual(
+                `<span style="font-weight: bold;">
+                        col 1  
+                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1 , row 2</span>: <span>\u200E$11,111.0</span>`
+            );
+        });
+
+        it('should return proper tooltip html (with Others)', () => {
+            displayTooltipContext.key = [othersName];
+
+            const tooltipFunction =
+                highchartsRenderer.defaultFormatterToTooltip(pivotDataMock, optsMock, isForDrilldownPie);
+            const tooltipHtml = tooltipFunction.call(displayTooltipContext);
+            
+            expect(tooltipHtml).toEqual(
+                `<span style="font-weight: bold;">
+                        ${ othersName }  
+                    </span><br/><span style="font-weight: bold; color: green;">\u200Erow 1</span>: <span>\u200E$99,999.0</span>`
+            );
+        });
+
+        it('should return proper tooltip html (for Breakdown widget) - BREAKDOWN column', () => {
+            displayTooltipContext = {
+                point : {
+                    options: {
+                        isTotal: false,
+                    },
+                    colKeys: ['col 1'],
+                },
+                series: {
+                    options: {
+                        className: 'waterfallBreakdown',
+                    },
+                    name: 'Field name',
+                    color: 'green',
+                },
+                y: 12345,
+                key: ['row 1']
+            }
+
+            const tooltipFunction =
+                highchartsRenderer.defaultFormatterToTooltip(pivotDataMock, optsMock, isForDrilldownPie);
+            const tooltipHtml = tooltipFunction.call(displayTooltipContext);
+            
+            expect(tooltipHtml).toEqual(
+                `<span style="font-weight: bold;">
+                        row 1 : 
+                    </span><span>\u200E$12,345.0</span>`
+            );
+        });
+
+        it('should return proper tooltip html (for Breakdown widget) - TOTAL column', () => {
+            displayTooltipContext = {
+                point : {
+                    options: {
+                        isTotal: true,
+                    },
+                    colKeys: ['col 1'],
+                },
+                series: {
+                    options: {
+                        className: 'waterfallBreakdown',
+                    },
+                    name: 'Field name',
+                    color: 'green',
+                },
+                y: 88888,
+                key: ['col 1']
+            }
+
+            const tooltipFunction =
+                highchartsRenderer.defaultFormatterToTooltip(pivotDataMock, optsMock, isForDrilldownPie);
+            const tooltipHtml = tooltipFunction.call(displayTooltipContext);
+            
+            expect(tooltipHtml).toEqual(
+                `<span style="font-weight: bold;">
+                        col 1 : 
+                    </span><span>\u200E$88,888.0</span>`
+            );
+        });
+
+        it('should return proper tooltip html (for Walkthrough widget) - TOTAL column', () => {
+            displayTooltipContext = {
+                point : {
+                    options: {
+                        colsForTotal: 'Total 1',
+                        isTotal: true,
+                        name: 'Total 1',
+                    },
+                },
+                series: {
+                    options: {
+                        className: 'waterfallWalkthrough',
+                    },
+                    name: 'Series 1',
+                    color: 'green',
+                },
+                y: 100,
+                key: 'Total 1'
+            }
+            pivotDataMock.rowAttrs = [];
+
+            const tooltipFunction =
+                highchartsRenderer.defaultFormatterToTooltip(pivotDataMock, optsMock, isForDrilldownPie);
+            const tooltipHtml = tooltipFunction.call(displayTooltipContext);
+            
+            expect(tooltipHtml).toEqual(
+                `<span style="font-weight: bold;">
+                        Total 1  
+                    </span>: <span>\u200E$100.0</span>`
+            );
+        });
+
+        it('should return proper tooltip html (for drill down pie)', () => {
+            isForDrilldownPie = true;
+            displayTooltipContext = {
+                series: {
+                    options: {
+                        className: 'any name',
+                    },
+                    name: 'Series 1',
+                    color: 'green',
+                },
+                y: 1000,
+                key: 'col 1'
+            }
+
+            const tooltipFunction =
+                highchartsRenderer.defaultFormatterToTooltip(pivotDataMock, optsMock, isForDrilldownPie);
+            const tooltipHtml = tooltipFunction.call(displayTooltipContext);
+            
+            expect(tooltipHtml).toEqual('<span>\u200E$123,450.0</span>');
+        });
+
+        it('should return proper tooltip html (for trendline point)', () => {
+            displayTooltipContext = {
+                series: {
+                    options: {
+                        className: 'trendSeries',
+                    },
+                    name: 'Trend Line',
+                    color: 'green',
+                },
+                y: 55555,
+                key: 'col 1'
+            }
+
+            const tooltipFunction =
+                highchartsRenderer.defaultFormatterToTooltip(pivotDataMock, optsMock, isForDrilldownPie);
+            const tooltipHtml = tooltipFunction.call(displayTooltipContext);
+            
+            expect(tooltipHtml).toEqual(`<span style="font-weight: bold;">
+                        col 1  
+                    </span><br/><span style="font-weight: bold; color: green;">\u200ETrend Line</span>: <span>\u200E$55,555.0</span>`
+            );
+        });
+    });
+
+    describe('Function pieFormatterToTooltip', () => {
+
+        const displayTooltipContext = {
+            series: {
+                name: 'row 1',
+            },
+            point: {
+                percentage: 10.987654,
+            },
+        };
+        const pivotDataMock = { mockField: 'mock pivot data' };
+
+        it('created function should return result of default fn + <br> without percentage', () => {
+
+            spyOn(highchartsRenderer, 'defaultFormatterToTooltip').and.returnValue(
+                () => 'default tooltip contents',
+            )
+
+            const optsMock = {
+                chartOptions: {
+                    tooltips: {
+                        show_percentage: false,
+                    },
+                },
+            };
+
+            const tooltipFunction = highchartsRenderer.pieFormatterToTooltip(pivotDataMock, optsMock);
+            expect(highchartsRenderer.defaultFormatterToTooltip).toHaveBeenCalledWith(pivotDataMock, optsMock);
+
+            const tooltipHtml = tooltipFunction.call(displayTooltipContext);
+            expect(tooltipHtml).toEqual('default tooltip contents<br>');
+        });
+
+        it('created function should return result of default fn with percentage', () => {
+
+            spyOn(highchartsRenderer, 'defaultFormatterToTooltip').and.returnValue(
+                () => 'default tooltip contents',
+            )
+
+            const optsMock = {
+                chartOptions: {
+                    tooltips: {
+                        show_percentage: true,
+                    },
+                },
+            };
+
+            const tooltipFunction = highchartsRenderer.pieFormatterToTooltip(pivotDataMock, optsMock);
+            expect(highchartsRenderer.defaultFormatterToTooltip).toHaveBeenCalledWith(pivotDataMock, optsMock);
+
+            const tooltipHtml = tooltipFunction.call(displayTooltipContext);
+            expect(tooltipHtml).toEqual('default tooltip contents<br>10.99%');
+        });
+
+        it('created function should return series without percentage (when default function falsy)', () => {
+
+            spyOn(highchartsRenderer, 'defaultFormatterToTooltip').and.returnValue(
+                () => null,
+            )
+
+            const optsMock = {
+                chartOptions: {
+                    tooltips: {
+                        show_percentage: false,
+                    },
+                },
+            };
+
+            const tooltipFunction = highchartsRenderer.pieFormatterToTooltip(pivotDataMock, optsMock);
+            expect(highchartsRenderer.defaultFormatterToTooltip).toHaveBeenCalledWith(pivotDataMock, optsMock);
+
+            const tooltipHtml = tooltipFunction.call(displayTooltipContext);
+            expect(tooltipHtml).toEqual('row 1');
+        });
+
+        it('created function should return series with percentage (when default function falsy)', () => {
+
+            spyOn(highchartsRenderer, 'defaultFormatterToTooltip').and.returnValue(
+                () => null,
+            )
+
+            const optsMock = {
+                chartOptions: {
+                    tooltips: {
+                        show_percentage: true,
+                    },
+                },
+            };
+
+            const tooltipFunction = highchartsRenderer.pieFormatterToTooltip(pivotDataMock, optsMock);
+            expect(highchartsRenderer.defaultFormatterToTooltip).toHaveBeenCalledWith(pivotDataMock, optsMock);
+
+            const tooltipHtml = tooltipFunction.call(displayTooltipContext);
+            expect(tooltipHtml).toEqual('row 1: 10.99%');
+        });
+    });
 });