@datarailsshared/dr_renderer 1.2.413 → 1.2.414

package/package.json

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

package/src/highcharts_renderer.js

@@ -2126,290 +2126,198 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return {aggfunc: aggfunc, base: base};
     }
 
-    highchartsRenderer.ptRenderSolidGauge = function (pivotData, opts) {
-        var chartOptions = {};
+    highchartsRenderer.ptRenderSolidGauge = (pivotData, opts) => {
+        return highchartsRenderer.ptRenderGauge(pivotData, opts, true);
+    };
 
-        var gaugeopts = opts.chartOptions ? opts.chartOptions : highchartsRenderer.getDefaultValueForChart('gauge-solid-chart');
-        chartOptions.chart = {
-            type: 'solidgauge'
-        };
-        if (disableAnimation) {
-            chartOptions.chart.animation = false;
-        }
-        highchartsRenderer.setTitleAndSubTitle(chartOptions, opts, gaugeopts);
+    highchartsRenderer.ptRenderGauge = (pivotData, opts, isSolidGauge = false) => {
+        const gaugeopts = opts.chartOptions
+            || highchartsRenderer.getDefaultValueForChart(isSolidGauge ? 'gauge-solid-chart' : 'gauge-chart');
 
-        chartOptions.plotOptions = {
-            solidgauge: {
-                allowPointSelect: true,
-                cursor: 'pointer',
-                dataLabels: {
-                    //formatter: function() {
-                    //    return '<b>' + this.point.name + ':</b> ' + Highcharts.numberFormat(this.point.percentage, 2) + '%';
-                    //}
-                    allowOverlap: gaugeopts && gaugeopts.label ? gaugeopts.label.overlap : false,
-                    y: 5,
-                    borderWidth: 0,
-                    useHTML: true,
-                    style: highchartsRenderer.getDataLabelsStyle(gaugeopts)
-                }
+        const chartOptions = {
+            chart: {
+                type: isSolidGauge ? 'solidgauge' : 'gauge',
+                animation: disableAnimation ? false : true,
             },
-            series: {
-                animation: !disableAnimation
-            }
+            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);
-        //chartOptions.tooltip = { pointFormat: '{series.name}: <b>{point.y}</b>', valueDecimals: 0 };
-
-        chartOptions.credits = {
-            enabled: false
-        };
-
-        chartOptions.pane = {
-            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'
-            }
-        };
-
-        chartOptions.xAxis = {
-            categories: highchartsRenderer.getFormattedColKeys(pivotData, null),
-        };
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true, null, null, opts, chartOptions);
-
-        var total = [];
-        lodash.forEach(chartOptions.series, function (obj) {
-            lodash.forEach(obj.data, function (arr2) {
-                total = total.concat(arr2)
-            })
-        })
-        total = lodash.filter(total, function (value) {
-            return !isNaN(value);
-        })
-        var aggfunc = (a, b) => a + b;
-
-        var value = 0
-        var base = 0;
-        var __ret = highchartsRenderer.getSingleValueAgg(gaugeopts, aggfunc, base);
-        aggfunc = __ret.aggfunc;
-        base = __ret.base;
-        var aggregator = pivotData.getAggregator([], []);
-        if (total.length > 0) {
-            value = total.reduce(aggfunc, base);
-        } else {
-            value = aggregator.value();
-        }
-        var gauge_series = [value]
-        var valuef = lodash.isNumber(value) ? aggregator.format(value, true) : value;
-
-        chartOptions.yAxis = {
-            min: 0,
-            max: gaugeopts.range.max,
-            //title: {
-            //    text: '' //title
-            //},
-            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
-            }
-        },
-
-
-            chartOptions.series = [{
-                name: "", //tooltip title
-                colorByPoint: true,
-                data: gauge_series,
-                dataLabels: {
-                    allowOverlap: gaugeopts && gaugeopts.label ? gaugeopts.label.overlap : false,
-                    format: '<div style="text-align:center"><span style="font-size:25px;color:black">' + valuef + '</span><br/>' +
-                        '<span style="font-size:12px;color:silver">' + '</span></div>',
-                    style: highchartsRenderer.getDataLabelsStyle(gaugeopts)
-                }
-                //
-                //,tooltip: {
-                //    valueSuffix: ''// km/h
-                //}
-            }];
-
-        chartOptions.series[0] = highchartsRenderer.getDataLabelsOptions(gaugeopts, chartOptions.series[0]);
-
+    
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
-
-    highchartsRenderer.ptRenderGauge = function (pivotData, opts) {
-        var chartOptions = {};
-
-        var gaugeopts = opts.chartOptions ? opts.chartOptions : highchartsRenderer.getDefaultValueForChart('gauge-chart');
-
-        chartOptions.chart = {
-            type: 'gauge'
-        };
-        if (disableAnimation) {
-            chartOptions.chart.animation = false;
-        }
-        highchartsRenderer.setTitleAndSubTitle(chartOptions, opts, gaugeopts);
-        chartOptions.plotOptions = {
-            solidgauge: {
-                allowPointSelect: true,
-                cursor: 'pointer',
-                dataLabels: {
-                    //formatter: function() {
-                    //    return '<b>' + this.point.name + ':</b> ' + Highcharts.numberFormat(this.point.percentage, 2) + '%';
-                    //}
-                    allowOverlap: gaugeopts && gaugeopts.label ? gaugeopts.label.overlap : false,
-                    y: 5,
-                    borderWidth: 0,
-                    useHTML: true,
-                    style: highchartsRenderer.getDataLabelsStyle(gaugeopts)
-                }
-            },
-            series: {
-                animation: !disableAnimation
-            }
-        };
-
-        chartOptions.plotOptions.solidgauge = highchartsRenderer.getDataLabelsOptions(gaugeopts, chartOptions.plotOptions.solidgauge);
-
-        chartOptions.credits = {
-            enabled: false
-        },
-
-            chartOptions.pane = {
-                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.xAxis = {
-            categories: highchartsRenderer.getFormattedColKeys(pivotData, null),
-        };
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, true, null, null, opts, chartOptions);
-
-        var total = [];
-        lodash.forEach(chartOptions.series, function (obj) {
-            lodash.forEach(obj.data, function (arr2) {
-                total = total.concat(arr2)
-            })
-        })
-        total = lodash.filter(total, function (value) {
-            return !isNaN(value);
-        })
-        var aggfunc = (a, b) => a + b;
-        var value = 0
-        var base = 0;
-        var __ret = highchartsRenderer.getSingleValueAgg(gaugeopts, aggfunc, base);
+    
+    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;
 
-        var aggregator = pivotData.getAggregator([], []);
-        if (total.length > 0) {
-            value = total.reduce(aggfunc, base);
-        } else {
-            value = aggregator.value();
-        }
-        var gauge_series = [value]
-
-        var valuef = lodash.isNumber(value) ? aggregator.format(value, true) : value;
-
-        chartOptions.yAxis = {
-            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
-            }]
-        },
-
-
-            chartOptions.series = [{
-                name: "", //tooltip title
+        let gaugeSeries = [
+            {
+                name: '',
                 colorByPoint: true,
-                data: gauge_series,
+                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,
-                    enabled: gaugeopts && gaugeopts.label ? gaugeopts.label.show : true,
-                    format: '<div style="text-align:center"><span style="font-size:15px;color:black">' + valuef + '</span><br/>' +
-                        '<span style="font-size:12px;color:silver">' + '</span></div>',
-                    style: highchartsRenderer.getDataLabelsStyle(gaugeopts)
-                }
-                //
-                //,tooltip: {
-                //    valueSuffix: ''// km/h
-                //}
-            }];
-
-        chartOptions.series[0] = highchartsRenderer.getDataLabelsOptions(gaugeopts, chartOptions.series[0]);
-
-        return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
-    };
+                    style: highchartsRenderer.getDataLabelsStyle(gaugeopts),
+                },
+            },
+        ];
+        gaugeSeries[0] = highchartsRenderer.getDataLabelsOptions(gaugeopts, gaugeSeries[0]);
+    
+        return gaugeSeries;
+    };    
 
     highchartsRenderer.ptRenderKpi = function (pivotData, opts) {
         var chartOptions = {};
@@ -7964,24 +7872,25 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 type: 'gauge',
                 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"],
-                    ]
-                },
+                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,

package/src/published_items_renderer.js

@@ -19,7 +19,6 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
   }
 
   publishedItemsRenderer.resizeTable = function (options, iframeWindow) {
-    options.alreadySetTimeout = null;
     const publish_item_image = iframeWindow.document.getElementById('publish_item_image');
     const table = iframeWindow.document.getElementsByTagName("table")[0];
     const body = iframeWindow.document.getElementsByTagName("body")[0];
@@ -32,37 +31,13 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
   }
 
   publishedItemsRenderer.zoomTable = function(iframeWindow, table, body) {
-    let body_zoom = body.style.zoom;
-    body_zoom = parseFloat(body_zoom) || 1;
-
-    let zoom = table.style.zoom;
-    zoom = parseFloat(zoom) || 1;
-
-    const positionInfo = table.getBoundingClientRect();
-    let width = Math.ceil((positionInfo.width + iframeWindow.innerWidth - iframeWindow.document.body.offsetWidth) * zoom * body_zoom);
+    const bodyZoom = parseFloat(body.style.zoom) || 1;
 
-    if (width < iframeWindow.innerWidth) {
-      zoom += 0.05;
-
-      width = Math.ceil((positionInfo.width + iframeWindow.innerWidth - iframeWindow.document.body.offsetWidth) * zoom * body_zoom);
-      if (width < iframeWindow.innerWidth) {
-        table.style.zoom = zoom;
-        setTimeout(function () {
-          publishedItemsRenderer.zoomTable(iframeWindow, table, body);
-        }, 10);
-      }
-    } else if (width >= iframeWindow.innerWidth) {
-      zoom -= 0.05;
-
-      width = Math.ceil((positionInfo.width + iframeWindow.innerWidth - iframeWindow.document.body.offsetWidth) * zoom * body_zoom);
-      table.style.zoom = zoom;
-      if (width >= iframeWindow.innerWidth) {
-        setTimeout(function () {
-          publishedItemsRenderer.zoomTable(iframeWindow, table, body);
-        }, 10);
-      }
-    }
-  }
+    const tableWidth = (table.getBoundingClientRect().width + (iframeWindow.innerWidth - body.offsetWidth)) * bodyZoom;
+    const requiredZoom = iframeWindow.innerWidth / tableWidth;
+  
+    table.style.zoom = requiredZoom;
+  };
 
   publishedItemsRenderer.resizePublishedImage = function(publish_item_image, iframeWindow, body) {
     if (!publish_item_image) return;
@@ -107,11 +82,7 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
     if (!options.responsive) {
       publishedItemsRenderer.resetTableZoom(document);
     } else {
-      if (!options.alreadySetTimeout) {
-        options.alreadySetTimeout = setTimeout(function () {
-          publishedItemsRenderer.resizeTable(options, iframeWindow);
-        }, 100);
-      }
+      publishedItemsRenderer.resizeTable(options, iframeWindow);
     }
   }
 
@@ -323,20 +294,19 @@ let getPublishedItemsRenderer = function (publishedItemsRenderer) {
   }
 
   publishedItemsRenderer.addEventListeners = function (document, iframeWindow, scope, options) {
-    document.addEventListener("DOMContentLoaded", function () {
-      if (!options.alreadySetTimeout) {
-        options.alreadySetTimeout = setTimeout(function () {
-          publishedItemsRenderer.resizeTable(options, iframeWindow);
-        }, 50);
-      }
-    });
-    iframeWindow.addEventListener("resize", function () {
-      if (!options.alreadySetTimeout) {
-        options.alreadySetTimeout = setTimeout(function () {
-          publishedItemsRenderer.resizeTable(iframeWindow.__options__, iframeWindow);
-        }, 100);
+    let resizeTimeout;
+    const handleDimensionChange = () => {
+      if (resizeTimeout) {
+        cancelAnimationFrame(resizeTimeout);
       }
-    });
+    
+      resizeTimeout = requestAnimationFrame(() => {
+        publishedItemsRenderer.resizeTable(iframeWindow.__options__, iframeWindow);
+      });
+    }
+
+    document.addEventListener("DOMContentLoaded", handleDimensionChange);
+    iframeWindow.addEventListener("resize", handleDimensionChange);
 
     // Add click event to cell with formula
     let all_a_hrefs = document.querySelectorAll('td a[location_id]');

package/tests/highcharts_renderer.test.js

@@ -7997,4 +7997,399 @@ 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('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);
+    });
 });