@datarailsshared/dr_renderer 1.4.57 → 1.4.59

package/package.json

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

package/src/highcharts_renderer.js

@@ -1983,14 +1983,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart = function (pivotData, chartOptions, additionOptions, opts) {
-
         var pie_drill_down_series = [],
         row_n_keys = pivotData.getRowKeys(),
         col_n_keys = pivotData.getColKeys();
 
-        var num_cols = col_n_keys.length;
-        var num_rows = row_n_keys.length;
-
         const othersName = highchartsRenderer.getOthersName(opts);
 
         lodash.forEach(col_n_keys, function (col_n_value) {
@@ -2009,19 +2005,17 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 col_ob.name = highchartsRenderer.getFormattedColKey(col_ob.initialName, pivotData);
                 col_ob.data = [];
                 lodash.forEach(row_n_keys, function (row_n_value) {
-                    var agg = pivotData.getAggregator(row_n_value, col_n_value);
+                    // always takes the first key during drilldown,
+                    // we are only supporting one level drilldown but pivot table could have multiple nested row keys
+                    const rowKey = [row_n_value[0]];
+                    var agg = pivotData.getAggregator(rowKey, col_n_value);
                     var val = agg.value();
-                    if (val != null && row_n_value[0]) {
+                    if (val != null && rowKey[0]) {
                         if ($.isNumeric(val)) {
                             val = parseFloat(val);
-                            // if (val > -1 && val < 1) {
-                            //     val = parseFloat(val.toPrecision(4));
-                            // } else {
-                            //     val = parseFloat(val.toFixed(2));
-                            // }
                         }
 
-                        const row_initial_name = row_n_value[0] === highchartsRenderer.DR_OTHERS_KEY ? othersName : row_n_value[0];
+                        const row_initial_name = rowKey[0] === highchartsRenderer.DR_OTHERS_KEY ? othersName : rowKey;
                         const row_name = highchartsRenderer.getFormattedRowKey(row_initial_name, pivotData);
                         col_ob.data.push({
                             name: row_name,
@@ -2031,6 +2025,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     }
                 });
                 if (col_ob.data.length) {
+                    // filtering out when there are multiple data series
+                    col_ob.data = lodash.uniqBy(col_ob.data, item =>
+                        Array.isArray(item.name) ? item.name.join(highchartsRenderer.delimer) : item.name
+                    );
                     pie_drill_down_series.push(col_ob);
                 }
             }
@@ -3195,95 +3193,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
-    highchartsRenderer.ptRenderColumnWithDrilldown = function (pivotData, opts, drilldownFunc) {
-        var chartOptions = {};
-        var additionOptions = opts.chartOptions ? opts.chartOptions : highchartsRenderer.getDefaultValueForChart('column-chart-drilldown');
-
-
-        chartOptions.chart = {
-            type: 'column',
-            events: {
-                'drilldown': function (e) {
-                    highchartsRenderer.modifyEventPointForDrilldown(e);
-                    if (drilldownFunc)
-                        drilldownFunc(e, this, "drilldown");
-
-                },
-                'drillup': function (e) {
-                    if (drilldownFunc)
-                        drilldownFunc(e, this, "drillup");
-
-                }
-
-            }
-        };
-        if (disableAnimation) {
-            chartOptions.chart.animation = false;
-        }
-        highchartsRenderer.setTitleAndSubTitle(chartOptions, opts, additionOptions);
-
-        chartOptions.yAxis = {
-            min: null,
-            max: null,
-            title: {
-                text: additionOptions && additionOptions.axisY ? additionOptions.axisY.name : ''
-            },
-            labels: {
-                formatter: highchartsRenderer.defaultValueLabelsFormatter(pivotData, opts)
-            }
-        };
-        if (additionOptions) {
-            highchartsRenderer.setYAxisMinMax(chartOptions.yAxis, additionOptions.axisY);
-        }
-
-        chartOptions.legend = {enabled: false};
-
-        chartOptions.plotOptions = {
-            series: {
-                animation: !disableAnimation,
-                borderWidth: 0,
-                cropThreshold: 1000,
-                dataLabels: {
-                    allowOverlap: additionOptions && additionOptions.label ? additionOptions.label.overlap : false,
-                    enabled: additionOptions && additionOptions.label ? additionOptions.label.show : true,
-                    formatter: highchartsRenderer.defaultDataLabelFormatter(pivotData, opts),
-                    style: highchartsRenderer.getDataLabelsStyle(additionOptions)
-                }
-            },
-            column: {
-                borderRadius: 1,
-            }
-        };
-
-        chartOptions.tooltip = {
-            formatter: function () {
-                var y = parseFloat(this.y);
-                var agg = pivotData.getAggregator([], []);
-                if (agg) {
-                    return '<b>' + this.point.name + '</b>: ' + agg.format(y, true);
-                } else {
-                    return '<b>' + this.point.name + '</b>: ' + y.toLocaleString();
-                }
-            },
-        };
-
-        chartOptions.xAxis = {
-            type: 'category',
-        };
-        chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
-        chartOptions.series = highchartsRenderer.ptCreateSeriesToDrillDownChart(pivotData, chartOptions, additionOptions, opts);
-        //if (drilldownFunc)
-        //    chartOptions.drilldown = {}
-        //else
-        chartOptions.drilldown = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(pivotData, chartOptions, additionOptions, opts);
-
-        highchartsRenderer.handleGridLines(additionOptions, chartOptions)
-
-        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
-
-        return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
-    };
-
     highchartsRenderer.ptRenderBar = function (pivotData, opts) {
         var chartOptions = {};
         var rowAttrs = pivotData.rowAttrs;

package/tests/ptCreateDrillDownSeriesToDrilldownChart.test.js

@@ -0,0 +1,491 @@
+import * as JQuery from "jquery";
+import * as lodash from 'lodash';
+import moment from 'moment/min/moment.min';
+import initPivotTable from "../src/pivottable";
+import initDRPivotTable from "../src/dr_pivottable";
+
+const getHighchartsRenderer = require('../src/highcharts_renderer');
+const DataFormatter = require('../src/dataformatter');
+
+global.$ = JQuery;
+global.lodash = lodash;
+
+const Highcharts = {
+    Color: jest.fn(),
+    chart: jest.fn(),
+    setOptions: jest.fn(),
+    wrap: jest.fn(),
+    Tooltip: {
+        prototype: {
+            hide: jest.fn()
+        }
+    },
+    Point: {
+        prototype: {
+            setState: jest.fn()
+        }
+    },
+    Series: {
+        prototype: {
+            setState: jest.fn()
+        }
+    },
+    defaultOptions: {
+        global: {
+            useUTC: false
+        }
+    },
+    merge: jest.fn((target, source) => Object.assign({}, target, source))
+};
+
+const _document = {
+    createElement: jest.fn(() => ({
+        style: {},
+        setAttribute: jest.fn(),
+        appendChild: jest.fn()
+    })),
+    body: {
+        appendChild: jest.fn()
+    }
+};
+
+function createMockAggregator(value) {
+    return {
+        value: () => value
+    };
+}
+
+
+let highchartsRenderer = {};
+
+describe('ptCreateDrillDownSeriesToDrilldownChart', () => {
+    let mockPivotData;
+    let mockChartOptions;
+    let mockAdditionOptions;
+    let mockOpts;
+
+    beforeAll(() => {
+        const _window = {
+            DataFormatter: DataFormatter
+        };
+        
+        initPivotTable(JQuery, _window, _document);
+        initDRPivotTable(JQuery, _window, _document);
+        
+        const DEFAULT_USER_COLORS = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9', '#f15c80', '#e4d354', '#2b908f', '#f45b5b', '#91e8e1'];
+        highchartsRenderer = getHighchartsRenderer(JQuery, _document, Highcharts, lodash.cloneDeep(DEFAULT_USER_COLORS), highchartsRenderer, DataFormatter, lodash, moment, false);
+    });
+
+    beforeEach(() => {
+        const createMockAggregator = (value) => ({
+            value: () => value
+        });
+
+        mockPivotData = {
+            getRowKeys: jest.fn(() => [
+                ['CITY SERVICE DEPTS'],
+                ['MID-SOUTH'],
+                ['NORTH TX'],
+                ['SOUTH TX'],
+                ['VIRGINIA'],
+                ['CAROLINA']
+            ]),
+            getColKeys: jest.fn(() => [
+                ['003-NATIONAL ACCOUNTS'],
+                ['015-MEMPHIS'],
+                ['016-WICHITA FALLS'],
+                ['017-AMARILLO'],
+                ['019-AUSTIN'],
+                ['020-NORFOLK'],
+                ['023-NEWPORT NEWS'],
+                ['035-CHARLOTTE CITY SERVICE']
+            ]),
+            getAggregator: jest.fn((rowKey, colKey) => {
+                const rowStr = Array.isArray(rowKey) ? rowKey[0] : rowKey;
+                const colStr = Array.isArray(colKey) ? colKey[0] : colKey;
+                
+                const dataMap = {
+                    'CITY SERVICE DEPTS,003-NATIONAL ACCOUNTS': 305550.96,
+                    'MID-SOUTH,015-MEMPHIS': 78827.94,
+                    'NORTH TX,016-WICHITA FALLS': 28926.52,
+                    'NORTH TX,017-AMARILLO': 92653.77,
+                    'SOUTH TX,019-AUSTIN': 103645.51,
+                    'VIRGINIA,020-NORFOLK': 0,
+                    'VIRGINIA,023-NEWPORT NEWS': 19997.5,
+                    'CAROLINA,035-CHARLOTTE CITY SERVICE': 124248.97
+                };
+                
+                const key = `${rowStr},${colStr}`;
+                const value = dataMap[key] || null;
+                
+                return createMockAggregator(value);
+            }),
+            colFormats: [
+                {
+                    type: "Text",
+                    name: "Br number & Name",
+                    format: null,
+                    val_not_convert: []
+                }
+            ],
+            rowFormats: [
+                {
+                    type: "Text",
+                    name: "Area",
+                    format: null,
+                    val_not_convert: []
+                }
+            ]
+        };
+
+        mockChartOptions = {
+            chart: {
+                type: 'pie'
+            }
+        };
+
+        mockAdditionOptions = {
+            dataLabels: {
+                color: '#151a41'
+            }
+        };
+
+        mockOpts = {
+            total_value_options: {
+                filter_options: {
+                    filteredOutFieldName: 'Others'
+                }
+            }
+        };
+
+        jest.spyOn(highchartsRenderer, 'getFormattedColKey').mockImplementation((name) => name);
+        jest.spyOn(highchartsRenderer, 'getFormattedRowKey').mockImplementation((name) => Array.isArray(name) ? name : [name]);
+        jest.spyOn(highchartsRenderer, 'moveSeriesToSecondYAxisIfNeeded').mockImplementation(() => {});
+        jest.spyOn(highchartsRenderer, 'getDataLabelsStylesForDrillDown').mockReturnValue({
+            activeDataLabelStyle: {
+                color: '#151a41'
+            }
+        });
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+    });
+
+    describe('with valid pivot data', () => {
+        it('should create drill-down series correctly', () => {
+            const result = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(
+                mockPivotData,
+                mockChartOptions,
+                mockAdditionOptions,
+                mockOpts
+            );
+
+            // Verify the structure of the result
+            expect(result).toHaveProperty('activeDataLabelStyle');
+            expect(result).toHaveProperty('series');
+            expect(result.activeDataLabelStyle).toEqual({
+                color: '#151a41'
+            });
+
+            // Verify series structure
+            expect(Array.isArray(result.series)).toBe(true);
+            expect(result.series.length).toBe(7);
+
+            // Check first series (003-NATIONAL ACCOUNTS)
+            const firstSeries = result.series[0];
+            expect(firstSeries).toMatchObject({
+                id: '003-NATIONAL ACCOUNTS',
+                initialName: '003-NATIONAL ACCOUNTS',
+                name: '003-NATIONAL ACCOUNTS',
+                data: expect.any(Array)
+            });
+
+            // Verify data points in first series
+            expect(firstSeries.data).toHaveLength(1);
+            expect(firstSeries.data[0]).toMatchObject({
+                name: ['CITY SERVICE DEPTS'],
+                initialName: ['CITY SERVICE DEPTS'],
+                y: 305550.96
+            });
+        });
+
+        it('should handle numeric column IDs correctly', () => {
+            // Test with numeric column keys
+            mockPivotData.getColKeys.mockReturnValue([
+                [123],
+                [456]
+            ]);
+
+            mockPivotData.getAggregator.mockImplementation(() => createMockAggregator(100));
+
+            const result = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(
+                mockPivotData,
+                mockChartOptions,
+                mockAdditionOptions,
+                mockOpts
+            );
+
+            expect(result.series[0].id).toBe(123);
+            expect(result.series[1].id).toBe(456);
+        });
+
+        it('should handle boolean column IDs correctly', () => {
+            // Test with boolean column keys
+            mockPivotData.getColKeys.mockReturnValue([
+                [true],
+                [false]
+            ]);
+
+            mockPivotData.getAggregator.mockImplementation(() => createMockAggregator(100));
+
+            const result = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(
+                mockPivotData,
+                mockChartOptions,
+                mockAdditionOptions,
+                mockOpts
+            );
+
+            expect(result.series[0].id).toBe('true');
+            expect(result.series[1].id).toBe('false');
+        });
+
+        it('should filter out null values', () => {
+            mockPivotData.getAggregator.mockImplementation((rowKey, colKey) => {
+                const rowStr = Array.isArray(rowKey) ? rowKey[0] : rowKey;
+                const colStr = Array.isArray(colKey) ? colKey[0] : colKey;
+                
+                // Return null for specific combinations
+                if (rowStr === 'CITY SERVICE DEPTS' && colStr === '015-MEMPHIS') {
+                    return { value: () => null };
+                }
+                
+                return { value: () => 100 };
+            });
+
+            const result = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(
+                mockPivotData,
+                mockChartOptions,
+                mockAdditionOptions,
+                mockOpts
+            );
+
+            // Find the series for '015-MEMPHIS'
+            const memphisSeries = result.series.find(s => s.id === '015-MEMPHIS');
+            
+            // Should not include data point with null value
+            expect(memphisSeries.data).not.toContainEqual(
+                expect.objectContaining({
+                    name: ['CITY SERVICE DEPTS']
+                })
+            );
+        });
+
+        it('should handle undefined column keys', () => {
+            mockPivotData.getColKeys.mockReturnValue([
+                [undefined],
+                ['valid-key']
+            ]);
+            
+            mockPivotData.getAggregator.mockImplementation((rowKey, colKey) => {
+                return { value: () => 100 }; // Return valid value for all combinations
+            });
+
+            const result = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(
+                mockPivotData,
+                mockChartOptions,
+                mockAdditionOptions,
+                mockOpts
+            );
+
+            // Should only process series with defined column keys (undefined keys are filtered out)
+            expect(result.series).toHaveLength(1);
+            expect(result.series[0].id).toBe('valid-key');
+        });
+
+        it('should handle empty row keys', () => {
+            mockPivotData.getRowKeys.mockReturnValue([
+                [null],
+                [''],
+                ['valid-row']
+            ]);
+
+            mockPivotData.getAggregator.mockImplementation((rowKey) => {
+                const rowStr = Array.isArray(rowKey) ? rowKey[0] : rowKey;
+                if (!rowStr) {
+                    return { value: () => 100 };
+                }
+                return { value: () => 200 };
+            });
+
+            const result = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(
+                mockPivotData,
+                mockChartOptions,
+                mockAdditionOptions,
+                mockOpts
+            );
+
+            // Should filter out data points with null/empty row keys
+            result.series.forEach(series => {
+                series.data.forEach(dataPoint => {
+                    expect(dataPoint.name[0]).toBeTruthy();
+                });
+            });
+        });
+
+        it('should convert string numbers to float', () => {
+            mockPivotData.getAggregator.mockImplementation(() => ({
+                value: () => '123.45' // Return string number
+            }));
+
+            const result = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(
+                mockPivotData,
+                mockChartOptions,
+                mockAdditionOptions,
+                mockOpts
+            );
+
+            result.series.forEach(series => {
+                series.data.forEach(dataPoint => {
+                    expect(typeof dataPoint.y).toBe('number');
+                    expect(dataPoint.y).toBe(123.45);
+                });
+            });
+        });
+
+        it('should remove duplicate data points', () => {
+            // Mock duplicate row keys
+            mockPivotData.getRowKeys.mockReturnValue([
+                ['DUPLICATE'],
+                ['DUPLICATE'],
+                ['UNIQUE']
+            ]);
+
+            mockPivotData.getAggregator.mockImplementation(() => ({
+                value: () => 100
+            }));
+
+            // Mock getFormattedRowKey to return same name for duplicates
+            jest.spyOn(highchartsRenderer, 'getFormattedRowKey').mockImplementation((name) => {
+                if (Array.isArray(name) && name[0] === 'DUPLICATE') {
+                    return ['DUPLICATE'];
+                }
+                return Array.isArray(name) ? name : [name];
+            });
+
+            const result = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(
+                mockPivotData,
+                mockChartOptions,
+                mockAdditionOptions,
+                mockOpts
+            );
+
+            // Each series should have unique data points
+            result.series.forEach(series => {
+                const names = series.data.map(d => d.name.join(','));
+                const uniqueNames = [...new Set(names)];
+                expect(names.length).toBe(uniqueNames.length);
+            });
+        });
+
+        it('should call helper functions with correct parameters', () => {
+            highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(
+                mockPivotData,
+                mockChartOptions,
+                mockAdditionOptions,
+                mockOpts
+            );
+
+            expect(highchartsRenderer.moveSeriesToSecondYAxisIfNeeded).toHaveBeenCalledWith(
+                expect.any(Array),
+                mockPivotData,
+                mockChartOptions,
+                mockAdditionOptions,
+                mockOpts
+            );
+            expect(highchartsRenderer.getDataLabelsStylesForDrillDown).toHaveBeenCalledWith(mockAdditionOptions);
+        });
+    });
+
+    describe('edge cases', () => {
+        it('should handle empty column keys', () => {
+            mockPivotData.getColKeys.mockReturnValue([]);
+
+            const result = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(
+                mockPivotData,
+                mockChartOptions,
+                mockAdditionOptions,
+                mockOpts
+            );
+
+            expect(result.series).toHaveLength(0);
+        });
+
+        it('should handle empty row keys', () => {
+            mockPivotData.getRowKeys.mockReturnValue([]);
+
+            const result = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(
+                mockPivotData,
+                mockChartOptions,
+                mockAdditionOptions,
+                mockOpts
+            );
+
+            // Series should exist but have no data
+            result.series.forEach(series => {
+                expect(series.data).toHaveLength(0);
+            });
+        });
+
+        it('should filter out series with no data', () => {
+            // Mock aggregator to return null for all combinations
+            mockPivotData.getAggregator.mockImplementation(() => ({
+                value: () => null
+            }));
+
+            const result = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(
+                mockPivotData,
+                mockChartOptions,
+                mockAdditionOptions,
+                mockOpts
+            );
+
+            expect(result.series).toHaveLength(0);
+        });
+    });
+
+    describe('with Others key handling', () => {
+        it('should replace DR_OTHERS_KEY with othersName', () => {
+            // Mock DR_OTHERS_KEY constant
+            highchartsRenderer.DR_OTHERS_KEY = 'DR_OTHERS_KEY';
+            
+            mockPivotData.getColKeys.mockReturnValue([
+                ['DR_OTHERS_KEY'],
+                ['normal-key']
+            ]);
+
+            mockPivotData.getRowKeys.mockReturnValue([
+                ['DR_OTHERS_KEY'],
+                ['normal-row']
+            ]);
+            
+            // Mock aggregator to return valid data
+            mockPivotData.getAggregator.mockImplementation((rowKey, colKey) => {
+                return { value: () => 100 }; // Return valid value for all combinations
+            });
+
+            const result = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(
+                mockPivotData,
+                mockChartOptions,
+                mockAdditionOptions,
+                mockOpts
+            );
+
+            // Check that DR_OTHERS_KEY is replaced with Others name
+            const othersColSeries = result.series.find(s => s.initialName === 'Others');
+            expect(othersColSeries).toBeDefined();
+            expect(othersColSeries.name).toBe('Others');
+        });
+    });
+});
+