@datarailsshared/dr_renderer 1.3.20 → 1.3.22

package/package.json

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

package/src/dr_chart_tooltip.js

@@ -226,24 +226,31 @@ function DrChartTooltip(chart, options) {
     }
 
     this.getAnchorBox = function(el) {
+        const containerRect = this.chart.container.getBoundingClientRect();
+        const zoom = this.chart.container.clientWidth / containerRect.width;
+
         if (el.getBBox) {
-            return el.getBBox();
-        }
+            const bBox = el.getBBox();
+            bBox.x = bBox.x * zoom;
+            bBox.y = bBox.y * zoom;
+            bBox.width = bBox.width * zoom;
+            bBox.height = bBox.height * zoom;
 
-        const containerRect = this.chart.container.getBoundingClientRect();
+            return bBox;
+        }
 
         if (el.getBoundingClientRect) {
             const elRect = el.getBoundingClientRect();
             return {
-                x: elRect.x - containerRect.x,
-                y: elRect.y - containerRect.y,
-                width: elRect.width,
-                height: elRect.height,
+                x: (elRect.x - containerRect.x) * zoom,
+                y: (elRect.y - containerRect.y) * zoom,
+                width: elRect.width * zoom,
+                height: elRect.height * zoom,
             };
         }
         return {
-            x: el.x - containerRect.x,
-            y: el.y - containerRect.y,
+            x: (el.x - containerRect.x) * zoom,
+            y: (el.y - containerRect.y) * zoom,
             width: 0,
             height: 0,
         };

package/src/highcharts_renderer.js

@@ -2226,9 +2226,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return {aggfunc: aggfunc, base: base};
     }
 
-    highchartsRenderer.ptRenderSolidGauge = (pivotData, opts) => {
-        return highchartsRenderer.ptRenderGauge(pivotData, opts, true);
-    };
 
     highchartsRenderer.transformOldGaugeOptions = (oldOptions) => {
         const newOptions = highchartsRenderer.objectCopyJsonMethod(oldOptions);
@@ -2265,195 +2262,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return new DrGaugeChart(pivotData, opts).render();
     };
 
-    highchartsRenderer.ptRenderGauge = (pivotData, opts, isSolidGauge = false) => {
-        const gaugeopts = opts.chartOptions
-            || highchartsRenderer.getDefaultValueForChart(isSolidGauge ? 'gauge-solid-chart' : 'gauge-chart');
-
-        const chartOptions = {
-            chart: {
-                type: isSolidGauge ? 'solidgauge' : 'gauge',
-                animation: disableAnimation ? false : true,
-            },
-            plotOptions: {
-                solidgauge: {
-                    allowPointSelect: true,
-                    cursor: 'pointer',
-                    dataLabels: {
-                        allowOverlap: gaugeopts && gaugeopts.label
-                            ? gaugeopts.label.overlap
-                            : false,
-                        y: 5,
-                        borderWidth: 0,
-                        useHTML: true,
-                        style: highchartsRenderer.getDataLabelsStyle(gaugeopts),
-                    },
-                },
-                series: {
-                    animation: !disableAnimation,
-                },
-            },
-            credits: {
-                enabled: false,
-            },
-            xAxis: {
-                categories: highchartsRenderer.getFormattedColKeys(pivotData, null),
-            },
-            yAxis: isSolidGauge
-                ? {
-                      min: 0,
-                      max: gaugeopts.range.max,
-                      stops: [
-                          [gaugeopts.range.low / 100, '#55BF3B'], // green
-                          [gaugeopts.range.medium / 100, '#DDDF0D'], // yellow
-                          [gaugeopts.range.high / 100, '#DF5353'], // red
-                      ],
-                      lineWidth: 0,
-                      minorTickInterval: null,
-                      tickPixelInterval: 400,
-                      tickWidth: 0,
-                      labels: {
-                          y: 16,
-                      },
-                  }
-                : {
-                      min: 0,
-                      max: gaugeopts.range.max,
-                      minorTickInterval: 'auto',
-                      minorTickWidth: 1,
-                      minorTickLength: 10,
-                      minorTickPosition: 'inside',
-                      minorTickColor: CHART_COLORS.TICK_COLOR,
-                      tickPixelInterval: 30,
-                      tickWidth: 2,
-                      tickPosition: 'inside',
-                      tickLength: 10,
-                      tickColor: CHART_COLORS.TICK_COLOR,
-                      labels: {
-                          step: 2,
-                          rotation: 'auto',
-                      },
-                      title: {
-                          text: '', //'km/h'
-                      },
-                      plotBands: [
-                          {
-                              from: 0,
-                              to: (gaugeopts.range.max * gaugeopts.range.low) / 100,
-                              color: '#55BF3B', // green
-                          },
-                          {
-                              from: (gaugeopts.range.max * gaugeopts.range.low) / 100,
-                              to: (gaugeopts.range.max * gaugeopts.range.medium) / 100,
-                              color: '#DDDF0D', // yellow
-                          },
-                          {
-                              from: (gaugeopts.range.max * gaugeopts.range.medium) / 100,
-                              to: gaugeopts.range.max,
-                              color: '#DF5353', // red
-                          },
-                      ],
-                  },
-            pane: isSolidGauge
-                ? {
-                      center: ['50%', '85%'],
-                      size: '140%',
-                      startAngle: -90,
-                      endAngle: 90,
-                      background: {
-                          backgroundColor: (highchartsRenderer.highcharts_theme && highchartsRenderer.highcharts_theme .background2) || '#EEE',
-                          innerRadius: '60%',
-                          outerRadius: '100%',
-                          shape: 'arc',
-                      },
-                  }
-                : {
-                      startAngle: -150,
-                      endAngle: 150,
-                      background: [
-                          {
-                              backgroundColor: {
-                                  linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-                                  stops: [
-                                      [0, CHART_COLORS.BACKGROUND],
-                                      [1, '#333'],
-                                  ],
-                              },
-                              borderWidth: 0,
-                              outerRadius: '109%',
-                          },
-                          {
-                              backgroundColor: {
-                                  linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
-                                  stops: [
-                                      [0, '#333'],
-                                      [1, CHART_COLORS.BACKGROUND],
-                                  ],
-                              },
-                              borderWidth: 1,
-                              outerRadius: '107%',
-                          },
-                          {
-                              // default background
-                          },
-                          {
-                              backgroundColor: '#DDD',
-                              borderWidth: 0,
-                              outerRadius: '105%',
-                              innerRadius: '103%',
-                          },
-                      ],
-                  },
-        };
-    
-        chartOptions.series = highchartsRenderer.ptCreateGaugeSeries(pivotData, opts, chartOptions, gaugeopts, isSolidGauge);
-
-        highchartsRenderer.setTitleAndSubTitle(chartOptions, opts, gaugeopts);
-        chartOptions.plotOptions.solidgauge = highchartsRenderer.getDataLabelsOptions(gaugeopts, chartOptions.plotOptions.solidgauge);
-    
-        return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
-    };
-    
-    highchartsRenderer.ptCreateGaugeSeries = (pivotData, opts, chartOptions, gaugeopts, isSolidGauge) => {
-        const lineSeries = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true, null, null, opts, chartOptions);
-    
-        let total = [];
-        lodash.forEach(lineSeries, (obj) => {
-            lodash.forEach(obj.data, (arr2) => {
-                total = total.concat(arr2);
-            });
-        });
-        total = lodash.filter(total, value => !isNaN(value));
-    
-        let aggfunc = (a, b) => a + b;
-        let base = 0;
-        let __ret = highchartsRenderer.getSingleValueAgg(gaugeopts, aggfunc, base);
-    
-        aggfunc = __ret.aggfunc;
-        base = __ret.base;
-    
-        const aggregator = pivotData.getAggregator([], []);
-        const value = total.length > 0 ? total.reduce(aggfunc, base) : aggregator.value();
-        const valueFormatted = lodash.isNumber(value) ? aggregator.format(value, true) : value;
-
-        let gaugeSeries = [
-            {
-                name: '',
-                colorByPoint: true,
-                data: [value],
-                dataLabels: {
-                    format: `<div style="text-align:center"><span style="font-size:${ isSolidGauge ? 25 : 15 }px;color:black">`
-                        + valueFormatted + '</span><br/><span style="font-size:12px;color:silver"></span></div>',
-                    enabled: gaugeopts && gaugeopts.label && !isSolidGauge ? gaugeopts.label.show : true,
-                    allowOverlap: gaugeopts && gaugeopts.label ? gaugeopts.label.overlap : false,
-                    style: highchartsRenderer.getDataLabelsStyle(gaugeopts),
-                },
-            },
-        ];
-        gaugeSeries[0] = highchartsRenderer.getDataLabelsOptions(gaugeopts, gaugeSeries[0]);
-    
-        return gaugeSeries;
-    };    
-
     highchartsRenderer.ptRenderKpi = function (pivotData, opts) {
         var chartOptions = {};
 
@@ -7762,21 +7570,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             axisTooltipTitle: ' Best practice: we recommend no more than one segment.',
             legendTooltipTitle: 'To create a drill-down within this category, drag a field here.',
         },
-        'gauge-solid-chart': {
-            name: 'Gauge chart',
-            label: 'Gauge',
-            title: 'Measures progress toward a goal or a KPI.',
-            axisName: 'X-Axis',
-            legendName: 'Data Series',
-            startedMessage: 'To get started, drag one field to the value section. Best practice: Drag one field to the filter section, and filter as required.',
-        },
-        'gauge-chart': {
-            name: 'Gauge Speedometer',
-            label: 'Gauge Speedometer',
-            axisName: 'X-Axis',
-            legendName: 'Data Series',
-            startedMessage: 'To get started, drag one field to the value section. Best practice: Drag one field to the filter section, and filter as required.',
-        },
         [highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED]: {
             name: 'Gauge chart',
             label: 'Gauge',
@@ -8142,47 +7935,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 name: 'Gauge',
                 class: 'google-visualization-charteditor-mini-gauge',
                 subtypes: [
-                    {
-                        type: 'gauge-solid-chart',
-                        name:  highchartsRenderer.chartsTypesInfo['gauge-solid-chart'].name,
-                        class: 'google-visualization-charteditor-thumbs-gauge-solid',
-                        render: highchartsRenderer.ptRenderSolidGauge,
-                        suboptions: [
-                            highchartsRenderer.suboptions["value"],
-                            highchartsRenderer.suboptions["range"],
-                            highchartsRenderer.suboptions["tooltips"],
-                            highchartsRenderer.suboptions["subtitle"],
-                            highchartsRenderer.suboptions["widget_library"],
-                            highchartsRenderer.suboptions["table_options_transpose"],
-                            highchartsRenderer.suboptions["table_design_options"],
-                            highchartsRenderer.suboptions["chart_grid"],
-                            highchartsRenderer.suboptions["negative_number_format"],
-                            highchartsRenderer.suboptions["legends"],
-                        ]
-                    },
-                    {
-                        type: 'gauge-chart',
-                        name: highchartsRenderer.chartsTypesInfo['gauge-chart'].name,
-                        class: 'google-visualization-charteditor-thumbs-gauge',
-                        render: highchartsRenderer.ptRenderGauge,
-                        suboptions: [
-                            highchartsRenderer.suboptions["value"],
-                            highchartsRenderer.suboptions["range"],
-                            highchartsRenderer.suboptions["tooltips"],
-                            highchartsRenderer.suboptions["subtitle"],
-                            highchartsRenderer.suboptions["widget_library"],
-                            highchartsRenderer.suboptions["table_options_transpose"],
-                            highchartsRenderer.suboptions["table_design_options"],
-                            highchartsRenderer.suboptions["chart_grid"],
-                            highchartsRenderer.suboptions["negative_number_format"],
-                            highchartsRenderer.suboptions["legends"],
-                        ]
-                    },
                     {
                         type: highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED,
                         name:  highchartsRenderer.chartsTypesInfo[highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED].name,
                         class: 'google-visualization-charteditor-thumbs-gauge-solid',
-                        hidden: true,
                         render: highchartsRenderer.ptRenderGaugeEnhanced,
                         suboptions: [
                             highchartsRenderer.suboptions["label_gauge"],

package/tests/dr_chart_tooltip.test.js

@@ -32,6 +32,7 @@ describe("DrChartTooltip", () => {
             },
             container: {
                 getBoundingClientRect: jest.fn().mockReturnValue(chartBBoxMock),
+                clientWidth: 800,
             },
             chartWidth: 800,
             chartHeight: 600,
@@ -349,6 +350,23 @@ describe("DrChartTooltip", () => {
             expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowTopBorderStyles}left:15px`);
         });
 
+        it("sets a top arrow position (tooltip is smaller than anchor) on a zoomed chart", () => {
+            chartMock.container.clientWidth = 1600;
+            tooltipBBoxMock.width = 40;
+            tooltipBBoxMock.height = 20;
+            anchorBBoxMock.width = 50;
+            anchorBBoxMock.height = 50;
+            anchorBBoxMock.x = 200;
+            anchorBBoxMock.y = 200;
+            positionMock = {
+                x: 205,
+                y: 180,
+                direction: "top",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowTopBorderStyles}left:22px`);
+        });
+
         it("sets a top arrow position (clamp left)", () => {
             tooltipBBoxMock.width = 100;
             tooltipBBoxMock.height = 20;
@@ -477,6 +495,23 @@ describe("DrChartTooltip", () => {
             expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowLeftBorderStyles}top:15px`);
         });
 
+        it("sets a left arrow position (tooltip is smaller than anchor) on a zoomed chart", () => {
+            chartMock.container.clientWidth = 1600;
+            tooltipBBoxMock.width = 20;
+            tooltipBBoxMock.height = 40;
+            anchorBBoxMock.width = 50;
+            anchorBBoxMock.height = 50;
+            anchorBBoxMock.x = 200;
+            anchorBBoxMock.y = 200;
+            positionMock = {
+                x: 180,
+                y: 205,
+                direction: "left",
+            };
+            instance.setArrowPosition(tooltipMock, positionMock, anchorMock, optionsMock);
+            expect(arrowElMock.setAttribute).toHaveBeenCalledWith("style", `${commonStyles}${arrowLeftBorderStyles}top:22px`);
+        });
+
         it("sets a left arrow position (clamp top)", () => {
             tooltipBBoxMock.width = 20;
             tooltipBBoxMock.height = 100;
@@ -593,6 +628,11 @@ describe("DrChartTooltip", () => {
             expect(instance.getCoords("top", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 175, y: 170 });
         });
 
+        it("gets coordinates (top - without correction)", () => {
+            chartMock.container.clientWidth = 1600;
+            expect(instance.getCoords("top", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 400, y: 370 });
+        });
+
         it("gets coordinates (top - bound to the chart - left)", () => {
             anchorBBoxMock.x = 0;
             expect(instance.getCoords("top", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 8 /* offset */, y: 170 });
@@ -627,6 +667,11 @@ describe("DrChartTooltip", () => {
             expect(instance.getCoords("left", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 90, y: 215 });
         });
 
+        it("gets coordinates (left - without correction)", () => {
+            chartMock.container.clientWidth = 1600;
+            expect(instance.getCoords("left", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 290, y: 440 });
+        });
+
         it("gets coordinates (left - bound to the chart - bottom)", () => {
             anchorBBoxMock.y = 1000;
             expect(instance.getCoords("left", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 90, y: 572 });
@@ -645,6 +690,11 @@ describe("DrChartTooltip", () => {
             expect(instance.getCoords("right", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 260, y: 215 });
         });
 
+        it("gets coordinates (right - without correction)", () => {
+            chartMock.container.clientWidth = 1600;
+            expect(instance.getCoords("right", tooltipMock, anchorMock, optionsMock)).toEqual({ x: 510, y: 440 });
+        });
+
         it("gets coordinates (right - bound to the chart - bottom)", () => {
             anchorBBoxMock.y = 1000;
             expect(instance.getCoords("right", tooltipMock, anchorMock, optionsMock)).toEqual({

package/tests/highcharts_renderer.test.js

@@ -8349,166 +8349,6 @@ describe('highcharts_renderer', () => {
         });
     });
 
-    describe('Function ptCreateGaugeSeries', () => {
-
-        const pivotDataMock = {
-            getAggregator: () => ({
-                value: () => 1000,
-                format: (val) => `formatted(${ val })`,
-            })
-        }
-
-        beforeEach(() => {
-            spyOn(highchartsRenderer, 'getSingleValueAgg').and.callFake(
-                (_gaugeOpts, aggfunc, base) => ({ aggfunc, base })
-            );
-            spyOn(highchartsRenderer, 'getDataLabelsStyle').and.returnValue('test_style');
-            spyOn(highchartsRenderer, 'getDataLabelsOptions').and.callFake(
-                (_gaugeOpts, seriesElement) => ({...seriesElement, additionalOptions: 'test_additional_opts'})
-            );
-        });
-
-        describe('with two calc values', () => {
-
-            const mockGaugeOpts = {
-                label: {
-                    overlap: true,
-                    show: false,
-                }
-            };
-
-            beforeEach(() => {
-                spyOn(highchartsRenderer, 'ptCreateBasicLineSeries').and.returnValue([
-                    {
-                        data: [39],
-                        initialName: "Test Calc",
-                        name: "Test Calc"
-                    },
-                    {
-                        data: [21],
-                        initialName: "Test Calc 2",
-                        name: "Test Calc 2"
-                    }
-                ]);
-            });
-
-            it('should create gauge series, two calc values, isSolidGauge = false, labels disabled', () => {
-                expect(highchartsRenderer.ptCreateGaugeSeries(pivotDataMock, {}, {}, mockGaugeOpts, false)).toEqual([
-                    {
-                        additionalOptions: 'test_additional_opts',
-                        colorByPoint: true,
-                        data: [60],
-                        dataLabels: {
-                            allowOverlap: true,
-                            enabled: false,
-                            format: '<div style="text-align:center"><span style="font-size:15px;color:black">formatted(60)</span><br/><span style="font-size:12px;color:silver"></span></div>',
-                            style: 'test_style',
-                        },
-                        name: '',
-                    },
-                ]);
-            });
-
-            it('should create gauge series, two calc values, isSolidGauge = false, labels enabled', () => {
-                const gaugeOpts = lodash.cloneDeep(mockGaugeOpts);
-                gaugeOpts.label.show = true;
-                expect(highchartsRenderer.ptCreateGaugeSeries(pivotDataMock, {}, {}, gaugeOpts, false)).toEqual([
-                    {
-                        additionalOptions: 'test_additional_opts',
-                        colorByPoint: true,
-                        data: [60],
-                        dataLabels: {
-                            allowOverlap: true,
-                            enabled: true,
-                            format: '<div style="text-align:center"><span style="font-size:15px;color:black">formatted(60)</span><br/><span style="font-size:12px;color:silver"></span></div>',
-                            style: 'test_style',
-                        },
-                        name: '',
-                    },
-                ]);
-            });
-    
-            it('should create gauge series, two calc values, isSolidGauge = true', () => {
-                expect(highchartsRenderer.ptCreateGaugeSeries(pivotDataMock, {}, {}, mockGaugeOpts, true)).toEqual([
-                    {
-                        additionalOptions: 'test_additional_opts',
-                        colorByPoint: true,
-                        data: [60],
-                        dataLabels: {
-                            allowOverlap: true,
-                            enabled: true,
-                            format: '<div style="text-align:center"><span style="font-size:25px;color:black">formatted(60)</span><br/><span style="font-size:12px;color:silver"></span></div>',
-                            style: 'test_style',
-                        },
-                        name: '',
-                    },
-                ]);
-            });
-        });
-
-        it('should create gauge series, one calc value', () => {
-            const mockGaugeOpts = {
-                label: {
-                    overlap: true,
-                    show: false,
-                }
-            };
-
-            spyOn(highchartsRenderer, 'ptCreateBasicLineSeries').and.returnValue([
-                {
-                    data: [39],
-                    initialName: "Test Calc",
-                    name: "Test Calc"
-                },
-            ]);
-
-            expect(highchartsRenderer.ptCreateGaugeSeries(pivotDataMock, {}, {}, mockGaugeOpts, false)).toEqual([
-                {
-                    additionalOptions: 'test_additional_opts',
-                    colorByPoint: true,
-                    data: [39],
-                    dataLabels: {
-                        allowOverlap: true,
-                        enabled: false,
-                        format: '<div style="text-align:center"><span style="font-size:15px;color:black">formatted(39)</span><br/><span style="font-size:12px;color:silver"></span></div>',
-                        style: 'test_style',
-                    },
-                    name: '',
-                },
-            ]);
-        });
-
-        it('should create gauge series, no calculated, one value field', () => {
-            const mockGaugeOpts = {
-                label: {
-                    overlap: true,
-                    show: false,
-                }
-            };
-
-            spyOn(highchartsRenderer, 'ptCreateBasicLineSeries').and.returnValue([
-                {
-                    data: [32605]
-                },
-            ]);
-
-            expect(highchartsRenderer.ptCreateGaugeSeries(pivotDataMock, {}, {}, mockGaugeOpts, false)).toEqual([
-                {
-                    additionalOptions: 'test_additional_opts',
-                    colorByPoint: true,
-                    data: [32605],
-                    dataLabels: {
-                        allowOverlap: true,
-                        enabled: false,
-                        format: '<div style="text-align:center"><span style="font-size:15px;color:black">formatted(32605)</span><br/><span style="font-size:12px;color:silver"></span></div>',
-                        style: 'test_style',
-                    },
-                    name: '',
-                },
-            ]);
-        });
-    });
-
     describe('highchartsRenderer.ptRenderPieWithDrillDown', () => {
         beforeEach(() => {
             jest.spyOn(highchartsRenderer, 'ptCreateSeriesToDrillDownChart')
@@ -8869,241 +8709,6 @@ describe('highcharts_renderer', () => {
         });
     });
 
-    describe('Function ptRenderGauge', () => {
-
-        const pivotDataMock = {
-            getColKeys: () => [[1], [2], [3]],
-        };
-
-        const commonExpectedOptions = {
-            chart: { animation: true, type: 'gauge' },
-            credits: { enabled: false },
-            pane: {
-                background: [
-                    {
-                        backgroundColor: {
-                            linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
-                            stops: [
-                                [0, '#fff'],
-                                [1, '#333'],
-                            ],
-                        },
-                        borderWidth: 0,
-                        outerRadius: '109%',
-                    },
-                    {
-                        backgroundColor: {
-                            linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 },
-                            stops: [
-                                [0, '#333'],
-                                [1, '#fff'],
-                            ],
-                        },
-                        borderWidth: 1,
-                        outerRadius: '107%',
-                    },
-                    {},
-                    { backgroundColor: '#DDD', borderWidth: 0, innerRadius: '103%', outerRadius: '105%' },
-                ],
-                endAngle: 150,
-                startAngle: -150,
-            },
-            plotOptions: {
-                series: { animation: true },
-                solidgauge: {
-                    additionalOptions: 'test_additional_opts',
-                    allowPointSelect: true,
-                    cursor: 'pointer',
-                    dataLabels: { allowOverlap: true, borderWidth: 0, style: 'test_style', useHTML: true, y: 5 },
-                },
-            },
-            series: 'test_gauge_series',
-            subtitle: 'test_subtitle',
-            title: 'test_title',
-            xAxis: { categories: ['formatted(1)', 'formatted(2)', 'formatted(3)'] },
-        };
-
-        const gaugeDefaultChartOptions = {
-            label: {
-                overlap: true,
-                show: false,
-            },
-            range: {
-                min: 0,
-                max: 12345,
-                low: 100,
-                medium: 200,
-                high: 300,
-            },
-        };
-
-        const chartOptionsInOpts = {
-            label: {
-                overlap: false,
-                show: true,
-            },
-            range: {
-                min: 1,
-                max: 234567,
-                low: 500,
-                medium: 800,
-                high: 1000,
-            },
-        };
-
-        beforeEach(() => {
-            spyOn(highchartsRenderer, 'getDefaultValueForChart').and.returnValue(gaugeDefaultChartOptions);
-            spyOn(highchartsRenderer, 'getDataLabelsStyle').and.returnValue('test_style');
-            spyOn(highchartsRenderer, 'getDataLabelsOptions').and.callFake(
-                (_gaugeOpts, seriesElement) => ({...seriesElement, additionalOptions: 'test_additional_opts'})
-            );
-            spyOn(highchartsRenderer, 'getFormattedColKeys').and.callFake(
-                (pivotData, _keys) => pivotData.getColKeys().map(key => `formatted(${ key })`)
-            );
-            spyOn(highchartsRenderer, 'ptCreateGaugeSeries').and.returnValue('test_gauge_series');
-            spyOn(highchartsRenderer, 'setTitleAndSubTitle').and.callFake((chartOptions, _opts, _gaugeopts) => {
-                chartOptions.title = 'test_title';
-                chartOptions.subtitle = 'test_subtitle';
-            });
-            spyOn(highchartsRenderer, 'ptCreateElementAndDraw').and.returnValue();
-        });
-
-        it('should call ptCreateElementAndDraw with proper options: no chartOptions passed in opts', () => {
-            const optsMock = {
-                testOptsField: 'test_opts_field_value',
-            };
-
-            highchartsRenderer.ptRenderGauge(pivotDataMock, lodash.cloneDeep(optsMock));
-
-            const expectedChartOptions = {
-                ...commonExpectedOptions,
-                yAxis: {
-                    labels: { rotation: 'auto', step: 2 },
-                    max: 12345,
-                    min: 0,
-                    minorTickColor: '#666',
-                    minorTickInterval: 'auto',
-                    minorTickLength: 10,
-                    minorTickPosition: 'inside',
-                    minorTickWidth: 1,
-                    plotBands: [
-                        { color: '#55BF3B', from: 0, to: 12345 },
-                        { color: '#DDDF0D', from: 12345, to: 24690 },
-                        { color: '#DF5353', from: 24690, to: 12345 },
-                    ],
-                    tickColor: '#666',
-                    tickLength: 10,
-                    tickPixelInterval: 30,
-                    tickPosition: 'inside',
-                    tickWidth: 2,
-                    title: { text: '' },
-                },
-            };
-
-            expect(highchartsRenderer.ptCreateGaugeSeries)
-                .toHaveBeenCalledWith(pivotDataMock, optsMock, expectedChartOptions, gaugeDefaultChartOptions, false);
-            expect(highchartsRenderer.ptCreateElementAndDraw).toHaveBeenCalledWith(expectedChartOptions, optsMock);
-        });
-
-        it('should call ptCreateElementAndDraw with proper options: chartOptions passed in opts', () => {
-            const optsMock = {
-                testOptsField: 'test_opts_field_value',
-                chartOptions: chartOptionsInOpts,
-            };
-
-            highchartsRenderer.ptRenderGauge(pivotDataMock, lodash.cloneDeep(optsMock));
-
-            const expectedChartOptions = {
-                ...commonExpectedOptions,
-                yAxis: {
-                    labels: { rotation: 'auto', step: 2 },
-                    max: 234567,
-                    min: 0,
-                    minorTickColor: '#666',
-                    minorTickInterval: 'auto',
-                    minorTickLength: 10,
-                    minorTickPosition: 'inside',
-                    minorTickWidth: 1,
-                    plotBands: [
-                        { color: '#55BF3B', from: 0, to: 1172835 },
-                        { color: '#DDDF0D', from: 1172835, to: 1876536 },
-                        { color: '#DF5353', from: 1876536, to: 234567 },
-                    ],
-                    tickColor: '#666',
-                    tickLength: 10,
-                    tickPixelInterval: 30,
-                    tickPosition: 'inside',
-                    tickWidth: 2,
-                    title: { text: '' },
-                },
-            };
-            lodash.set(expectedChartOptions, 'plotOptions.solidgauge.dataLabels.allowOverlap', false);
-
-            expect(highchartsRenderer.ptCreateGaugeSeries)
-                .toHaveBeenCalledWith(pivotDataMock, optsMock, expectedChartOptions, optsMock.chartOptions, false);
-            expect(highchartsRenderer.ptCreateElementAndDraw).toHaveBeenCalledWith(expectedChartOptions, optsMock);
-        });
-
-        it('should call ptCreateElementAndDraw with proper options: for solid gauge', () => {
-            const optsMock = {
-                testOptsField: 'test_opts_field_value',
-                chartOptions: chartOptionsInOpts,
-            };
-
-            highchartsRenderer.ptRenderGauge(pivotDataMock, lodash.cloneDeep(optsMock), true);
-
-            const expectedChartOptions = {
-                chart: { animation: true, type: 'solidgauge' },
-                credits: { enabled: false },
-                pane: {
-                    background: { backgroundColor: '#fff', innerRadius: '60%', outerRadius: '100%', shape: 'arc' },
-                    center: ['50%', '85%'],
-                    endAngle: 90,
-                    size: '140%',
-                    startAngle: -90,
-                },
-                plotOptions: {
-                    series: { animation: true },
-                    solidgauge: {
-                        additionalOptions: 'test_additional_opts',
-                        allowPointSelect: true,
-                        cursor: 'pointer',
-                        dataLabels: { allowOverlap: false, borderWidth: 0, style: 'test_style', useHTML: true, y: 5 },
-                    },
-                },
-                series: 'test_gauge_series',
-                subtitle: 'test_subtitle',
-                title: 'test_title',
-                xAxis: { categories: ['formatted(1)', 'formatted(2)', 'formatted(3)'] },
-                yAxis: {
-                    labels: { y: 16 },
-                    lineWidth: 0,
-                    max: 234567,
-                    min: 0,
-                    minorTickInterval: null,
-                    stops: [
-                        [5, '#55BF3B'],
-                        [8, '#DDDF0D'],
-                        [10, '#DF5353'],
-                    ],
-                    tickPixelInterval: 400,
-                    tickWidth: 0,
-                },
-            };
-            lodash.set(expectedChartOptions, 'plotOptions.solidgauge.dataLabels.allowOverlap', false);
-
-            expect(highchartsRenderer.ptCreateGaugeSeries)
-                .toHaveBeenCalledWith(pivotDataMock, optsMock, expectedChartOptions, optsMock.chartOptions, true);
-            expect(highchartsRenderer.ptCreateElementAndDraw).toHaveBeenCalledWith(expectedChartOptions, optsMock);
-        });
-    });
-
-    it('ptRenderSolidGauge should call ptRenderGauge with isSolidGauge = true', () => {
-        spyOn(highchartsRenderer, 'ptRenderGauge').and.returnValue();
-        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' }