@datarailsshared/dr_renderer 1.2.415 → 1.2.417

package/package.json

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

package/src/highcharts_renderer.js

@@ -859,7 +859,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     /*  model renderers */
 
-    highchartsRenderer.tableCSVExportRenderer = function (pivotData) {
+    highchartsRenderer.tableCSVExportRenderer = function (pivotData, chartOptions) {
         var aggregator, colAttrs, colKey, colKeys, i, j, rowAttrs, rowKey, rowKeys, tempAr,
             totalAggregator, val;
 
@@ -867,11 +867,15 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         var forExport = [];
 
         const TOTAL_CELL = 'Totals'; 
+
         colAttrs = pivotData.colAttrs;
         rowAttrs = pivotData.rowAttrs;
         rowKeys = pivotData.getRowKeys();
         colKeys = pivotData.getColKeys();
 
+        let isDisplayingColTotals = lodash.get(chartOptions, 'table_options.show_column_total') && colKeys.length;
+        let isDisplayingRowTotals = lodash.get(chartOptions, 'table_options.show_row_total') && rowKeys.length;
+
         for (j in colAttrs) {
             if (!hasProp.call(colAttrs, j)) continue;
             tempAr = [];
@@ -888,7 +892,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             tempAr = tempAr.concat(lodash.map(colKeys, function (row) {
                 return row[j];
             }));
-            tempAr.push(TOTAL_CELL);
+
+            if (isDisplayingRowTotals) {
+                tempAr.push(TOTAL_CELL);
+            }
+
             forExport.push(tempAr);
         }
 
@@ -911,31 +919,42 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 val = aggregator.value();
                 tempAr.push(val);
             }
-            totalAggregator = pivotData.getAggregator(rowKey, []);
-            val = totalAggregator.value();
-            tempAr.push(val);
+
+            if (isDisplayingRowTotals) {
+                totalAggregator = pivotData.getAggregator(rowKey, []);
+                val = totalAggregator.value();
+                tempAr.push(val);
+            }
+
             forExport.push(tempAr);
         }
 
         tempAr = [];
 
-        for (j in rowAttrs) {
-            if (!hasProp.call(rowAttrs, j)) continue;
-            tempAr.push(TOTAL_CELL)
+        if (isDisplayingColTotals) {
+            for (j in rowAttrs) {
+                if (!hasProp.call(rowAttrs, j)) continue;
+                tempAr.push(TOTAL_CELL)
+            }
+
+            for (j in colKeys) {
+                if (!hasProp.call(colKeys, j)) continue;
+                colKey = colKeys[j];
+                aggregator = pivotData.getAggregator([], colKey);
+                val = aggregator.value();
+                tempAr.push(val);
+            }
         }
 
-        for (j in colKeys) {
-            if (!hasProp.call(colKeys, j)) continue;
-            colKey = colKeys[j];
-            aggregator = pivotData.getAggregator([], colKey);
-            val = aggregator.value();
+        if (isDisplayingColTotals && isDisplayingRowTotals) {
+            totalAggregator = pivotData.getAggregator([], []);
+            val = totalAggregator.value();
             tempAr.push(val);
         }
 
-        totalAggregator = pivotData.getAggregator([], []);
-        val = totalAggregator.value();
-        tempAr.push(val);
-        forExport.push(tempAr);
+        if (tempAr.length) {
+            forExport.push(tempAr);
+        }
 
         return forExport;
     };

package/tests/highcharts_renderer.test.js

@@ -5962,7 +5962,15 @@ describe('highcharts_renderer', () => {
 
     describe('Function tableCSVExportRenderer', () => {
         window._ = lodash;
-        it('should create csv json object representation based on pivot data', () => {
+
+        it('should create csv json object representation based on pivot data (only cols)', () => {
+            const chartOptions = {
+                table_options: {
+                    show_column_total: true,
+                    show_row_total: true,
+                },
+            };
+
             const inputs = [
                 {
                     "Date": 1653955200,
@@ -6026,7 +6034,7 @@ describe('highcharts_renderer', () => {
                 },
             };
             const pivotData = $.pivotUtilities.getPivotDataModel(inputs, subOptions);
-            const csvJson = highchartsRenderer.tableCSVExportRenderer(pivotData);
+            const csvJson = highchartsRenderer.tableCSVExportRenderer(pivotData, chartOptions);
             expect(csvJson).toEqual(
                 [
                     [ 1651363200, 1652400000, 1653177600, 1653955200, 'Totals' ],
@@ -6037,6 +6045,164 @@ describe('highcharts_renderer', () => {
                 ]
             );
         });
+
+        describe('cases for both col and row present', () => {
+            const inputs = [
+                {
+                    "Date": 1653955200,
+                    "Type": 'Food',
+                    "Amount": 2849521.69
+                },
+                {
+                    "Date": 1653955200,
+                    "Type": 'Technology',
+                    "Amount": 321123
+                },
+                {
+                    "Date": 1653177600,
+                    "Type": 'Food',
+                    "Amount": 3141257.27
+                },
+                {
+                    "Date": 1653177600,
+                    "Type": 'Technology',
+                    "Amount": 4321
+                },
+                {
+                    "Date": 1653955200,
+                    "Amount": 123
+                },
+                {
+                    "Type": 'Technology',
+                    "Amount": 1
+                },
+                {
+                    "Type": 'Food',
+                    "Amount": 2
+                },
+                {
+                    "Date": 1653177600,
+                    "Amount": 321
+                },
+                {
+                    "Amount": 9834311.05
+                },
+                {
+                    "col_keys": [
+                        [
+                            1651363200
+                        ],
+                        [
+                            1653177600
+                        ],
+                    ],
+                    "row_keys": [
+                        [
+                            'Food'
+                        ],
+                        [
+                            'Technology'
+                        ]
+                    ]
+                }
+            ];
+            const subOptions = {
+                "sorters": () => null,
+                "sortByValueAttrs": [],
+                "cols": ["Date"],
+                "rows": ["Type"],
+                "colFormats": [
+                    {
+                        "type": "Date",
+                        "name": "Date",
+                        "val_not_convert": []
+                    },
+                ],
+                "rowFormats": [
+                    {
+                        "type": "Text",
+                        "name": "Type",
+                        "val_not_convert": []
+                    },
+                ],
+                "rendererOptions": {
+                },
+            };
+    
+            it('should create csv json object representation based on pivot data, with totals', () => {
+                const chartOptions = {
+                    table_options: {
+                        show_column_total: true,
+                        show_row_total: true,
+                    },
+                };
+                const pivotData = $.pivotUtilities.getPivotDataModel(inputs, subOptions);
+                const csvJson = highchartsRenderer.tableCSVExportRenderer(pivotData, chartOptions);
+                expect(csvJson).toEqual(
+                    [
+                        ["Date", 1653177600, 1653955200, "Totals"],
+                        ["Type"],
+                        ["Food", 1, 1, 1],
+                        ["Technology", 1, 1, 1],
+                        ["Totals", 1, 1, 2]
+                    ]
+                );
+            });
+    
+            it('should create csv json object representation based on pivot data, without col totals', () => {
+                const chartOptions = {
+                    table_options: {
+                        show_column_total: false,
+                        show_row_total: true,
+                    },
+                };
+                const pivotData = $.pivotUtilities.getPivotDataModel(inputs, subOptions);
+                const csvJson = highchartsRenderer.tableCSVExportRenderer(pivotData, chartOptions);
+                expect(csvJson).toEqual([
+                    ["Date", 1653177600, 1653955200, "Totals"],
+                    ["Type"],
+                    ["Food", 1, 1, 1],
+                    ["Technology", 1, 1, 1]
+                ]);
+            });
+    
+            it('should create csv json object representation based on pivot data, without row totals', () => {
+                const chartOptions = {
+                    table_options: {
+                        show_column_total: true,
+                        show_row_total: false,
+                    },
+                };
+    
+                const pivotData = $.pivotUtilities.getPivotDataModel(inputs, subOptions);
+                const csvJson = highchartsRenderer.tableCSVExportRenderer(pivotData, chartOptions);
+                expect(csvJson).toEqual([
+                    ["Date", 1653177600, 1653955200],
+                    ["Type"],
+                    ["Food", 1, 1],
+                    ["Technology", 1, 1],
+                    ["Totals", 1, 1]
+                ]);
+            });
+    
+            it('should create csv json object representation based on pivot data, without col and row totals', () => {
+                const chartOptions = {
+                    table_options: {
+                        show_column_total: false,
+                        show_row_total: false,
+                    },
+                };
+    
+                const pivotData = $.pivotUtilities.getPivotDataModel(inputs, subOptions);
+                const csvJson = highchartsRenderer.tableCSVExportRenderer(pivotData, chartOptions);
+                expect(csvJson).toEqual([
+                    ["Date", 1653177600, 1653955200],
+                    ["Type"],
+                    ["Food", 1, 1],
+                    ["Technology", 1, 1],
+                ]);
+            });
+        });
     });
 
     describe("Function returnRawDataValue", () => {
@@ -8392,4 +8558,199 @@ describe('highcharts_renderer', () => {
         highchartsRenderer.ptRenderSolidGauge('mock_pivot_data', 'mock_opts');
         expect(highchartsRenderer.ptRenderGauge).toHaveBeenCalledWith('mock_pivot_data', 'mock_opts', true);
     });
+
+    describe("Function ptCreateWaterfallBreakdownSeries", () => {
+        const format = null;
+        const additionalOptionsMock = { testOption: 'test additional option 1' }
+
+        const commonPivotDataMockProps = {
+            colFormats: 'mock_formats',
+            colAttrs: ['Test Number Field'],
+            allTotal: {
+                uniq: 1
+            }
+        };
+
+        const optsMock = {
+            breakdown_options: {
+                colors: {
+                    decrease: "#BF1D30",
+                    increase: "#20A452",
+                    total: "rgba(0, 254, 87, 1)",
+                },
+            },
+        };
+
+        const pivotDataMockWithNoBreakdownField = {
+            getAggregator: (rows, cols) => {
+                let aggregator = highchartsRenderer.rhPivotAggregatorSum([''], format, true, {}, {});
+                const agg = aggregator({}, '', '');
+
+                if (lodash.isEqual(cols, [1]) && lodash.isEqual(rows, [])) {
+                    agg.sum = 10;
+                } else if (lodash.isEqual(cols, [2]) && lodash.isEqual(rows, [])) {
+                    agg.sum = 30;
+                } else if (lodash.isEqual(cols, [3]) && lodash.isEqual(rows, [])) {
+                    agg.sum = 80;
+                } else if (lodash.isEqual(cols, [1]) && lodash.isEqual(rows, ['Variance'])) {
+                    agg.sum = 20;
+                } else if (lodash.isEqual(cols, [2]) && lodash.isEqual(rows, ['Variance'])) {
+                    agg.sum = 50;
+                }
+                return agg;
+            },
+            getColKeys: () => [[1], [2], [3]],
+            getRowKeys: () => [],
+            getRowKeysByCols: () => [[["Variance"]], [["Variance"]]],
+            ...commonPivotDataMockProps,
+        };
+
+        const pivotDataMockWithBreakdownField = {
+            getAggregator: (rows, cols) => {
+                let aggregator = highchartsRenderer.rhPivotAggregatorSum([''], format, true, {}, {});
+                const agg = aggregator({}, '', '');
+
+                if (lodash.isEqual(cols, [1]) && lodash.isEqual(rows, [])) {
+                    agg.sum = 10;
+                } else if (lodash.isEqual(cols, [2]) && lodash.isEqual(rows, [])) {
+                    agg.sum = 30;
+                } else if (lodash.isEqual(cols, [3]) && lodash.isEqual(rows, [])) {
+                    agg.sum = 80;
+                } else if (lodash.isEqual(cols, [1]) && lodash.isEqual(rows, ['val1'])) {
+                    agg.sum = 5;
+                } else if (lodash.isEqual(cols, [1]) && lodash.isEqual(rows, ['val2'])) {
+                    agg.sum = 15;
+                } else if (lodash.isEqual(cols, [2]) && lodash.isEqual(rows, ['val1'])) {
+                    agg.sum = 30;
+                } else if (lodash.isEqual(cols, [2]) && lodash.isEqual(rows, ['val2'])) {
+                    agg.sum = 20;
+                }
+                return agg;
+            },
+            getColKeys: () => [[1], [2], [3]],
+            getRowKeys: () => [],
+            getRowKeysByCols: () => [[["val2"], ["val1"]], [["val1"], ["val2"]]],
+            ...commonPivotDataMockProps,
+        };
+
+        beforeEach(() => {
+            spyOn(highchartsRenderer, "defaultDataLabelFormatter").and.returnValue("mock formatter function");
+            spyOn(highchartsRenderer, "getDataLabelsStyle").and.returnValue({ height: '100px' });
+            spyOn(highchartsRenderer, "getOthersName").and.returnValue({ height: 'Test Others Name' });
+            spyOn(highchartsRenderer, 'getDataLabelsOptions').and.callFake((additionOptions, resultObject) => {
+                resultObject.dataLabels.additionalTestProp = 'test_value';
+                return resultObject;
+            });
+            spyOn(highchartsRenderer, 'getFormattedColKey')
+                .and.callFake((initialName, pivotData) => `formatted_col(${ initialName })`);
+            spyOn(highchartsRenderer, 'getFormattedRowKey')
+                .and.callFake((initialName, pivotData) => `formatted_row(${ initialName })`);
+            spyOn(highchartsRenderer, 'isFormattingDatesAsOtherAxisTypes').and.returnValue(true);
+        });
+
+        it("should create appropriate series for case no breakdown field (one row value - Variance instead)", () => {
+            const pivotDataMock = lodash.cloneDeep(pivotDataMockWithNoBreakdownField);
+
+            const series = highchartsRenderer.ptCreateWaterfallBreakdownSeries(pivotDataMock, additionalOptionsMock, optsMock);
+            expect(series).toEqual([
+                {
+                    className: 'waterfallBreakdown',
+                    color: '#BF1D30',
+                    data: [
+                        {
+                            color: 'rgba(0, 254, 87, 1)',
+                            initialName: '1',
+                            isSum: false,
+                            isTotal: true,
+                            name: 'formatted_col(1)',
+                            y: 10,
+                        },
+                        { colKeys: ['1', '2'], initialName: 'Variance', name: 'formatted_row(Variance)', y: 20 },
+                        {
+                            color: 'rgba(0, 254, 87, 1)',
+                            initialName: '2',
+                            isSum: true,
+                            isTotal: true,
+                            name: 'formatted_col(2)',
+                            y: 30,
+                        },
+                        { colKeys: ['2', '3'], initialName: 'Variance', name: 'formatted_row(Variance)', y: 50 },
+                        {
+                            color: 'rgba(0, 254, 87, 1)',
+                            initialName: '3',
+                            isSum: true,
+                            isTotal: true,
+                            name: 'formatted_col(3)',
+                            y: 80,
+                        },
+                    ],
+                    dataLabels: {
+                        additionalTestProp: 'test_value',
+                        allowOverlap: false,
+                        enabled: true,
+                        formatter: 'mock formatter function',
+                        style: { height: '100px' },
+                    },
+                    name: 'Test Number Field',
+                    upColor: '#20A452',
+                },
+                { color: '#20A452', name: 'Positive', visible: false },
+                { color: '#BF1D30', name: 'Negative', visible: false },
+            ]);
+        });
+
+        it("should create appropriate series for case there is breakdown field (differently sorted vals)", () => {
+            const pivotDataMock = lodash.cloneDeep(pivotDataMockWithBreakdownField);
+
+            const series = highchartsRenderer.ptCreateWaterfallBreakdownSeries(pivotDataMock, additionalOptionsMock, optsMock);
+            expect(series).toEqual([
+                {
+                    className: 'waterfallBreakdown',
+                    color: '#BF1D30',
+                    data: [
+                        {
+                            color: 'rgba(0, 254, 87, 1)',
+                            initialName: '1',
+                            isSum: false,
+                            isTotal: true,
+                            name: 'formatted_col(1)',
+                            y: 10,
+                        },
+                        { colKeys: ['1', '2'], initialName: 'val2', name: 'formatted_row(val2)', y: 15 },
+                        { colKeys: ['1', '2'], initialName: 'val1', name: 'formatted_row(val1)', y: 5 },
+                        {
+                            color: 'rgba(0, 254, 87, 1)',
+                            initialName: '2',
+                            isSum: true,
+                            isTotal: true,
+                            name: 'formatted_col(2)',
+                            y: 30,
+                        },
+                        { colKeys: ['2', '3'], initialName: 'val1', name: 'formatted_row(val1)', y: 30 },
+                        { colKeys: ['2', '3'], initialName: 'val2', name: 'formatted_row(val2)', y: 20 },
+                        {
+                            color: 'rgba(0, 254, 87, 1)',
+                            initialName: '3',
+                            isSum: true,
+                            isTotal: true,
+                            name: 'formatted_col(3)',
+                            y: 80,
+                        },
+                    ],
+                    dataLabels: {
+                        additionalTestProp: 'test_value',
+                        allowOverlap: false,
+                        enabled: true,
+                        formatter: 'mock formatter function',
+                        style: { height: '100px' },
+                    },
+                    name: 'Test Number Field',
+                    upColor: '#20A452',
+                },
+                { color: '#20A452', name: 'Positive', visible: false },
+                { color: '#BF1D30', name: 'Negative', visible: false },
+            ]);
+        });
+    });
+
 });