@datarailsshared/dr_renderer 1.2.462 → 1.3.1-27.merge

package/src/highcharts_renderer.js

@@ -1,6 +1,9 @@
 const helpers = require('./dr-renderer-helpers');
 const { DrGaugeChart, GAUGE_OPTIONS_DEFAULT } = require('./charts/dr_gauge_chart');
+const { DrDonutChart } = require('./charts/dr_donut_chart');
 const seriesPointStylesHelper= require('./seriesPointStyles-helper');
+const smartQueriesHelper = require('./smart_queries_helper');
+const {DrGaugeCategoriesSummaryChart} = require("./charts/dr_gauge_categories_summary_chart");
 
 const mobileBrowserRegex = new RegExp([
     '(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)',
@@ -58,6 +61,7 @@ const CHART_TYPES = {
     GAUGE_SOLID_CHART: 'gauge-solid-chart',
     GAUGE_CHART: 'gauge-chart',
     GAUGE_CHART_ENHANCED: 'gauge-chart-enhanced',
+    GAUGE_CHART_CATEGORIES_SUMMARY: 'gauge-chart-categories-summary',
     KPI_WIDGET: 'kpi-widget',
     TEXT_WIDGET: 'text-widget',
     WATERFALL_BREAKDOWN: 'waterfall-chart-breakdown',
@@ -65,6 +69,7 @@ const CHART_TYPES = {
     PUBLISHED_ITEM: 'published_item',
     RICH_TEXT: 'rich_text',
     EXCEL_VIEWER: 'excel_viewer',
+    DONUT_CHART: 'donut-chart',
 }
 
 const HIGHCHARTS_CONSTANTS = {
@@ -397,6 +402,22 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return  {};
     };
 
+    const isChartTypeSupportedForSmartQuery = (type) => {
+        if (!type) return null;
+        return [
+            'line',
+            'line-chart-forecast',
+            'spline',
+            'area',
+            'areaspline',
+            highchartsRenderer.CHART_TYPES.LINE_CHART,
+            highchartsRenderer.CHART_TYPES.LINE_CHART_SMOOTH,
+            highchartsRenderer.CHART_TYPES.AREA_CHART,
+            highchartsRenderer.CHART_TYPES.AREA_CHART_SMOOTH,
+        ].includes(type);
+    };
+
+
     const chartHasVerticalDataLabelsOption = (type) => {
         return ![
             highchartsRenderer.CHART_TYPES.LINE_CHART,
@@ -1246,6 +1267,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     .replace(highchartsRenderer.DR_OTHERS_KEY, othersName);
                 ob.name = highchartsRenderer.getFormattedRowKey(ob.initialName, pivotData);
             }
+
             lodash.forEach(col_n_keys, function (col_n_value, index) {
                 var agg = pivotData.getAggregator(row_n_value, col_n_value);
                 var val = agg.value();
@@ -1256,13 +1278,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 if (val != null) {
                     if ($.isNumeric(val)) {
                         val = parseFloat(val);
-                        // if (val > -1 && val < 1) {
-                        //     val = parseFloat(val.toPrecision(4));
-                        // } else {
-                        //     val = parseFloat(val.toFixed(2));
-                        // }
                     }
-                } else {
+                } else if (helpers.isShowingEmptyValues(additionOptions)) {
                     if (onlyNumbers)
                         val = NaN;
                     else
@@ -1296,7 +1313,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 );
             });
 
-            if (colors && colors[i]) {
+            if (additionOptions && additionOptions.series_colors) {
+                ob.color = additionOptions.series_colors[row_n_value] || undefined;
+            } else if (colors && colors[i]) {
                 ob.color = colors[i];
             }
 
@@ -1398,6 +1417,22 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         chart_series = chart_series.concat(trendSerieses);
 
         highchartsRenderer.moveSeriesToSecondYAxisIfNeeded(chart_series, pivotData, chartOptions, additionOptions, opts, opts.total && opts.totalSeriesSettings && opts.totalSeriesSettings.secondaryAxis);
+        
+        const chartType = chartOptions && chartOptions.chart && chartOptions.chart.type ? chartOptions.chart.type : null;
+        const smartQuerySeries = isChartTypeSupportedForSmartQuery(chartType)
+            ? smartQueriesHelper.createSingleDataSeriesForForecast(chart_series, opts.chartOptions, pivotData)
+            : null;
+
+        if (smartQuerySeries) {
+            if (chart_series.length > 1) {
+                lodash.remove(chart_series, s => 
+                (s.name && lodash.includes(s.name, 'SQ_Actuals')) || s.name === 'Forecast'
+                );
+            } else {
+                chart_series = []
+            }
+            chart_series.push(smartQuerySeries);
+        }
 
         return chart_series;
     };
@@ -1450,13 +1485,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 if (val != null) {
                     if ($.isNumeric(val)) {
                         val = parseFloat(val);
-                        // if (val > -1 && val < 1) {
-                        //     val = parseFloat(val.toPrecision(4));
-                        // } else {
-                        //     val = parseFloat(val.toFixed(2));
-                        // }
                     }
-                } else {
+                } else if (helpers.isShowingEmptyValues(additionOptions)) {
                     if (onlyNumbers)
                         val = NaN;
                     else
@@ -1489,7 +1519,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 ob.data.push(tmoobj);
             });
 
-            if (colors && colors[i]) {
+            if (additionOptions && additionOptions.series_colors) {
+                ob.color = additionOptions.series_colors[row_n_value] || undefined;
+            } else if (colors && colors[i]) {
                 ob.color = colors[i];
             }
 
@@ -1539,6 +1571,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 } else if (seriesIndex === chart_series.length - 1 && chart_series.length > 1 && !has_delta && !opts.total && !trendSerieses.length) {
                     series.type = 'line';
                 }
+                series.connectNulls = !helpers.isShowingEmptyValues(additionOptions);
             });
         }
 
@@ -1917,6 +1950,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             // check string contains hebrew
             ob.initialName = (/[\u0590-\u05FF]/).test(key) ? ('\u200E' + key) : key;
 
+            if (additionOptions && additionOptions.series_colors) {
+                ob.color = additionOptions.series_colors[key] || undefined;
+            }
+
             if (ob.initialName === highchartsRenderer.DR_OTHERS_KEY) {
                 ob.initialName = othersName;
             }
@@ -2067,8 +2104,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             opposite: true,
             tickPositioner: function () {
                 const primaryAxisTicksCount = this.chart.yAxis[0].tickPositions.length;
-                const minFromSettings = parseInt(lodash.get(opts, 'comboOptions.secondaryAxisSettings.min'));
-                const maxFromSettings = parseInt(lodash.get(opts, 'comboOptions.secondaryAxisSettings.max'));
+                const minFromSettings = parseFloat(lodash.get(opts, 'comboOptions.secondaryAxisSettings.min'));
+                const maxFromSettings = parseFloat(lodash.get(opts, 'comboOptions.secondaryAxisSettings.max'));
                 let secondaryAxisMin = !isNaN(minFromSettings) ? minFromSettings : this.tickPositions[0];
                 let secondaryAxisMax = !isNaN(maxFromSettings) ? maxFromSettings : this.tickPositions[this.tickPositions.length - 1];
 
@@ -2193,6 +2230,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }];
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, 1, false, true);
 
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -2226,9 +2265,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);
@@ -2242,7 +2278,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             return newOptions;
         }
 
-        const rangeArr = [range.low, range.medium, Math.max(range.high || 100, 100)];
+        const rangeArr = [1 * range.low, 1 * range.medium, Math.max(1 * range.high || 100, 100)];
 
         newOptions.segments.forEach((segment, i) => {
             segment.from = (rangeArr[i - 1] + 1) || segment.from;
@@ -2253,7 +2289,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             newOptions.goal = highchartsRenderer.objectCopyJsonMethod(GAUGE_OPTIONS_DEFAULT.goal);
         }
 
-        newOptions.goal.value = range.max || newOptions.goal.value;
+        newOptions.goal.value = 1 * range.max || newOptions.goal.value;
 
         delete newOptions.range;
 
@@ -2265,194 +2301,9 @@ 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.ptRenderGaugeCategoriesSummary = (pivotData, opts) => {
+        return new DrGaugeCategoriesSummaryChart(pivotData, opts).render();
     };
-    
-    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 = {};
@@ -2600,10 +2451,16 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         else if (!pivotData.isDrillDownDisabled)
             chartOptions.drilldown = highchartsRenderer.ptCreateDrillDownSeriesToDrilldownChart(pivotData, chartOptions, additionOptions, opts);
 
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
 
     };
 
+    highchartsRenderer.ptRenderDonut = function (pivotData, opts, drilldownFunc) {
+        return new DrDonutChart(highchartsRenderer, pivotData, opts, drilldownFunc, disableAnimation).render();
+    };
+
     highchartsRenderer.setTitleAndSubTitle = function (chartOptions, opts, additionOptions) {
         chartOptions.title = opts.chartOptions.hideChartHeader ? { text: null } : {
             align: 'center',
@@ -2672,7 +2529,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     enabled: additionOptions && additionOptions.label ? additionOptions.label.show : true,
                     formatter: highchartsRenderer.defaultDataLabelFormatter(pivotData, opts),
                     style: highchartsRenderer.getDataLabelsStyle(additionOptions)
-                }
+                },
+                connectNulls: !helpers.isShowingEmptyValues(additionOptions),
             }
         };
 
@@ -2709,6 +2567,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         if (opts.selectedPoint) {
             seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
         }
+
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -2758,7 +2619,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     enabled: additionOptions && additionOptions.label ? additionOptions.label.show : true,
                     formatter: highchartsRenderer.defaultDataLabelFormatter(pivotData, opts),
                     style: highchartsRenderer.getDataLabelsStyle(additionOptions)
-                }
+                },
+                connectNulls: !helpers.isShowingEmptyValues(additionOptions),
             }
         };
 
@@ -2794,6 +2656,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
         }
 
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -2852,8 +2716,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     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)
-                }
+                    style: highchartsRenderer.getDataLabelsStyle(additionOptions),
+                },
+                connectNulls: !helpers.isShowingEmptyValues(additionOptions),
             }
         };
 
@@ -2890,6 +2755,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         if (opts.selectedPoint) {
             seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
         }
+
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -2936,13 +2804,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         };
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, null, opts, chartOptions);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, additionOptions, opts, chartOptions);
 
         highchartsRenderer.handleGridLines(additionOptions, chartOptions);
 
+        const isShowingEmptyValues = helpers.isShowingEmptyValues(additionOptions);
         chartOptions.plotOptions = {
             [type === 'area-chart' ? 'area' : 'areaspline']: {
-                stacking: 'normal',
+                stacking: isShowingEmptyValues ? 'normal' : undefined,
                 lineColor: CHART_COLORS.TICK_COLOR,
                 lineWidth: 1,
                 marker: {
@@ -2957,7 +2826,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     enabled: additionOptions && additionOptions.label ? additionOptions.label.show : true,
                     formatter: highchartsRenderer.defaultDataLabelFormatter(pivotData, opts),
                     style: highchartsRenderer.getDataLabelsStyle(additionOptions)
-                }
+                },
+                connectNulls: !isShowingEmptyValues,
             }
         };
 
@@ -2977,6 +2847,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         if (opts.selectedPoint) {
             seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
         }
+
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -3013,7 +2886,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     enabled: additionOptions && additionOptions.label ? additionOptions.label.show : true,
                     formatter: highchartsRenderer.defaultDataLabelFormatter(pivotData, opts),
                     style: highchartsRenderer.getDataLabelsStyle(additionOptions)
-                }
+                },
+                connectNulls: !helpers.isShowingEmptyValues(additionOptions),
             }
         };
 
@@ -3040,10 +2914,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             },
             lineWidth: 0
         };
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, null, opts, chartOptions);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, additionOptions, opts, chartOptions);
 
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, false);
 
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -3108,7 +2984,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             highchartsRenderer.setYAxisMinMax(chartOptions.yAxis, additionOptions.axisY);
         }
 
-
         chartOptions.tooltip = {
             formatter: highchartsRenderer.defaultFormatterToTooltip(pivotData, opts),
             valueDecimals: 2,
@@ -3139,7 +3014,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     enabled: additionOptions && additionOptions.label ? additionOptions.label.show : true,
                     formatter: highchartsRenderer.defaultDataLabelFormatter(pivotData, opts),
                     style: highchartsRenderer.getDataLabelsStyle(additionOptions)
-                }
+                },
             }
         };
         if (opts.drillDownListFunc) {
@@ -3161,6 +3036,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, rowAttrs.length, false);
 
         chartOptions.drilldown = highchartsRenderer.getDataLabelsStylesForDrillDown(additionOptions);
+
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -3306,7 +3184,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
         }
 
-        highchartsRenderer.handleGridLines(additionOptions, chartOptions)
+        highchartsRenderer.handleGridLines(additionOptions, chartOptions);
+
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
 
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
@@ -3395,6 +3275,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         highchartsRenderer.handleGridLines(additionOptions, chartOptions)
 
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -3439,7 +3321,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             },
         };
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, null, opts, chartOptions);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, additionOptions, opts, chartOptions);
 
         highchartsRenderer.handleGridLines(additionOptions, chartOptions)
 
@@ -3457,7 +3339,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     enabled: additionOptions && additionOptions.label ? additionOptions.label.show : true,
                     formatter: highchartsRenderer.defaultDataLabelFormatter(pivotData, opts),
                     style: highchartsRenderer.getDataLabelsStyle(additionOptions)
-                }
+                },
             }
         };
 
@@ -3475,6 +3357,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         if (opts.selectedPoint) {
             seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
         }
+
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -3562,12 +3447,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             },
         };
         chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
-        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, null, opts, chartOptions);
+        chartOptions.series = highchartsRenderer.ptCreateBasicLineSeries(pivotData, null, null, null, additionOptions, opts, chartOptions);
 
         if (opts.selectedPoint) {
             seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
         }
-        highchartsRenderer.handleGridLines(additionOptions, chartOptions)
+        highchartsRenderer.handleGridLines(additionOptions, chartOptions);
+
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
 
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
@@ -3692,6 +3579,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         if (opts.selectedPoint) {
             seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
         }
+
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -3812,6 +3702,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
         }
 
+        helpers.disableLegendInteractionIfRequired(chartOptions, additionOptions);
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     }
 
@@ -4438,7 +4330,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         let ret_str = '';
         if (options && options.total_value_options && options.total_value_options.filter_options && options.total_value_options.filter_options.axis == tr_axis) {
             //TODO add tooltip with description of filter
-            ret_str += '<i class="fa fa-filter"></i>';
+            ret_str += '<i class="dr-icon-filter-old"></i>';
         }
 
         return ret_str;
@@ -6704,12 +6596,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             category_class: 'google-visualization-charteditor-mini-more',
             category_label: 'Chart',
             category_type: 'chart',
-            elements: [{
-                element_type: 'input',
-                value_name: 'colors_offset',
-                element_label: 'Colors offset',
-                default_value: 0
-            },
+            elements: [
+                {
+                    element_type: 'input',
+                    value_name: 'colors_offset',
+                    element_label: 'Colors offset',
+                    default_value: 0
+                },
                 {
                     element_type: 'radio',
                     value_name: 'zoom_type',
@@ -6721,12 +6614,19 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         {label: 'xy', value: 'xy'}
                     ],
                     default_value: 'None'
-                }, {
+                },
+                {
                     element_type: 'checkbox',
                     value_name: 'show',
                     element_label: 'Show grid',
                     default_value: true
-                }
+                },
+                {
+                    element_type: 'checkbox',
+                    value_name: 'dislay_empty_values',
+                    element_label: 'Display empty values',
+                    default_value: true
+                },
             ]
         },
         'chart_grid': {
@@ -6748,8 +6648,115 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 value_name: 'showAllLegends',
                 element_label: 'Show legends over 10',
                 default_value: false
+            },
+            {
+                element_type: 'checkbox',
+                value_name: 'dislay_empty_values',
+                element_label: 'Display empty values',
+                default_value: true
+            },
+            {
+                element_type: 'devider',
+                element_label: 'Chart Patterns',
+                showFn: isChartTypeSupportedForSmartQuery
+            },
+            {
+                element_type: 'toggle',
+                element_label: 'Forecast Chart',
+                value_name: 'smart_query',
+                default_value: true,
+                showFn: isChartTypeSupportedForSmartQuery
+            },
+            {
+                element_type: 'select',
+                value_name: 'actuals',
+                element_label: 'Actuals',
+                element_options: [
+                    {label: 'Solid', value: 'solid'},
+                    {label: 'Dash', value: 'dash'},
+                ],
+                default_value: 'Solid',
+                showFn: isChartTypeSupportedForSmartQuery
+            },
+            {
+                element_type: 'select',
+                value_name: 'forecast',
+                element_label: 'Forecast',
+                element_options: [
+                    {label: 'Solid', value: 'solid'},
+                    {label: 'Dash', value: 'dash'},
+                ],
+                default_value: 'Dash',
+                showFn: isChartTypeSupportedForSmartQuery
+            }
+        ]
+        },
+        'total_value_label_donut': {
+            category_class: 'google-visualization-charteditor-mini-more',
+            category_label: 'Total Value Label',
+            category_type: 'total_value_label',
+            elements: [{
+                element_type: 'input',
+                value_name: 'total_value_label_text',
+                element_label: 'Total value label text for donut chart',
+                default_value: 'Total'
             }]
         },
+        'chart_position': {
+            category_class: 'google-visualization-charteditor-mini-more',
+            category_label: 'Chart position',
+            category_type: 'chart_position',
+            elements: [
+                {
+                    element_type: 'input',
+                    value_name: 'margin_top',
+                    element_label: 'Marging top',
+                    default_value: 0,
+                },
+                {
+                    element_type: 'input',
+                    value_name: 'margin_right',
+                    element_label: 'Marging right',
+                    default_value: 0,
+                },
+                {
+                    element_type: 'input',
+                    value_name: 'margin_bottom',
+                    element_label: 'Marging bottom',
+                    default_value: 0,
+                },
+                {
+                    element_type: 'input',
+                    value_name: 'margin_left',
+                    element_label: 'Marging left',
+                    default_value: 0,
+                },
+                {
+                    element_type: 'input',
+                    value_name: 'spacing_top',
+                    element_label: 'Spacing top',
+                    default_value: 0,
+                },
+                {
+                    element_type: 'input',
+                    value_name: 'spacing_right',
+                    element_label: 'Spacing right',
+                    default_value: 0,
+                },
+                {
+                    element_type: 'input',
+                    value_name: 'spacing_bottom',
+                    element_label: 'Spacing bottom',
+                    default_value: 0,
+                },
+                {
+                    element_type: 'input',
+                    value_name: 'spacing_left',
+                    element_label: 'Spacing left',
+                    default_value: 0,
+                },
+            ]
+        },
         'label': {
             category_class: 'google-visualization-charteditor-mini-more',
             category_label: 'Label',
@@ -7658,6 +7665,17 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             axisTooltipTitle: 'Drag one or more fields here to create your x-axis.',
             legendTooltipTitle: 'Adding a field in this section will display lines for each item in that field.',
         },
+        'line-chart-forecast': {
+            name: 'Combined Line',
+            label: 'Combined Line',
+            title: 'Show forecast over time.',
+            description: 'For example, see how your Monthly Revenue evolves over a given period.',
+            axisName: 'X - Axis',
+            legendName: 'Data series',
+            startedMessage: '“To get started, drag the Reporting Month field to the x-axis, include the Scenario Cycle field in the data series, and add one field to the value section.”',
+            axisTooltipTitle: 'Drag one or more fields here to create your x-axis.',
+            legendTooltipTitle: 'Adding a field in this section will display lines for each item in that field.',
+        },
         'scatter-chart': {
             name: 'Scatter chart',
             label: 'Scatter Chart',
@@ -7762,7 +7780,7 @@ 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': {
+        [highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED]: {
             name: 'Gauge chart',
             label: 'Gauge',
             title: 'Measures progress toward a goal or a KPI.',
@@ -7770,20 +7788,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             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',
+        [highchartsRenderer.CHART_TYPES.GAUGE_CHART_CATEGORIES_SUMMARY]: {
+            name: 'Gauge chart categories summary',
             label: 'Gauge',
-            title: 'Measures progress toward a goal or a KPI.',
+            title: 'Gauge chart showing summary sections for different categories.',
             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.',
+            startedMessage: '',
         },
         'kpi-widget': {
             name: 'Kpi ',
@@ -7858,6 +7869,27 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             highchartsRenderer.suboptions["legends"],
                         ]
                     },
+                    {
+                        type: 'line-chart-forecast',
+                        name: highchartsRenderer.chartsTypesInfo['line-chart-forecast'].name,
+                        class: 'google-visualization-charteditor-thumbs-linechart-forecast',
+                        render: highchartsRenderer.ptRenderSpLine,
+                        suboptions: [
+                            highchartsRenderer.suboptions["axisY"],
+                            highchartsRenderer.suboptions["axisX"],
+                            highchartsRenderer.suboptions["tooltips"],
+                            highchartsRenderer.suboptions["label"],
+                            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["delta_column"],
+                            highchartsRenderer.suboptions["advanced"],
+                            highchartsRenderer.suboptions["legends"],
+                        ]
+                    },
                     {
                         type: 'scatter-chart',
                         name: highchartsRenderer.chartsTypesInfo['scatter-chart'].name,
@@ -8094,25 +8126,26 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 type: 'pie',
                 name: 'Pie',
                 class: 'google-visualization-charteditor-mini-pie',
-                subtypes: [{
-                    type: 'pie-chart',
-                    hidden: true,
-                    name: highchartsRenderer.chartsTypesInfo['pie-chart'].name,
-                    class: 'google-visualization-charteditor-thumbs-piechart',
-                    render: highchartsRenderer.ptRenderBasicPie,
-                    suboptions: [
-                        highchartsRenderer.suboptions["tooltips_pie"],
-                        highchartsRenderer.suboptions["label_pie"],
-                        highchartsRenderer.suboptions["subtitle"],
-                        highchartsRenderer.suboptions["widget_library"],
-                        highchartsRenderer.suboptions["table_options_transpose"],
-                        highchartsRenderer.suboptions["table_design_options"],
-                        highchartsRenderer.suboptions["chart"],
-                        highchartsRenderer.suboptions["negative_number_format"],
-                        highchartsRenderer.suboptions["advanced"],
-                        highchartsRenderer.suboptions["legends"],
-                    ]
-                },
+                subtypes: [
+					{
+						type: 'pie-chart',
+						hidden: true,
+						name: highchartsRenderer.chartsTypesInfo['pie-chart'].name,
+						class: 'google-visualization-charteditor-thumbs-piechart',
+						render: highchartsRenderer.ptRenderBasicPie,
+						suboptions: [
+							highchartsRenderer.suboptions["tooltips_pie"],
+							highchartsRenderer.suboptions["label_pie"],
+							highchartsRenderer.suboptions["subtitle"],
+							highchartsRenderer.suboptions["widget_library"],
+							highchartsRenderer.suboptions["table_options_transpose"],
+							highchartsRenderer.suboptions["table_design_options"],
+							highchartsRenderer.suboptions["chart"],
+							highchartsRenderer.suboptions["negative_number_format"],
+							highchartsRenderer.suboptions["advanced"],
+							highchartsRenderer.suboptions["legends"],
+						]
+					},
                     {
                         type: 'pie-chart-drilldown',
                         name: highchartsRenderer.chartsTypesInfo['pie-chart-drilldown'].name,
@@ -8130,8 +8163,28 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             highchartsRenderer.suboptions["advanced"],
                             highchartsRenderer.suboptions["legends"],
                         ]
-                    }
-
+                    },
+					{
+						type: highchartsRenderer.CHART_TYPES.DONUT_CHART,
+						name: "Donut chart",
+						class: "google-visualization-charteditor-thumbs-donutchart",
+						render: highchartsRenderer.ptRenderDonut,
+						suboptions: [
+							highchartsRenderer.suboptions["tooltips_pie"],
+							highchartsRenderer.suboptions["label_pie"],
+							highchartsRenderer.suboptions["subtitle"],
+							highchartsRenderer.suboptions["widget_library"],
+							highchartsRenderer.suboptions["table_options_transpose"],
+							highchartsRenderer.suboptions["table_design_options"],
+							highchartsRenderer.suboptions["chart"],
+							highchartsRenderer.suboptions["negative_number_format"],
+							highchartsRenderer.suboptions["advanced"],
+							highchartsRenderer.suboptions["legends"],
+                            highchartsRenderer.suboptions["chart_position"],
+                            highchartsRenderer.suboptions["total_value_label_donut"],
+						],
+						hidden: true,
+					},
                     /*,
                      {type:'pie-chart-3d', name:'3d pie chart', class:'google-visualization-charteditor-thumbs-piechart-3d', render:highchartsRenderer.ptRenderStackedBar},
                      {type:'donut-chart', name:'Donut chart', class:'google-visualization-charteditor-thumbs-donutchart', render:highchartsRenderer.ptRenderStackedBar}*/
@@ -8142,47 +8195,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"],
@@ -8194,6 +8210,25 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     },
                 ]
             },
+        {
+            type: 'gauge-categories-summary',
+            name: 'Gauge Categories Summary',
+            class: 'google-visualization-charteditor-mini-gauge',
+            hidden: true,
+            subtypes: [
+                {
+                    type: highchartsRenderer.CHART_TYPES.GAUGE_CHART_CATEGORIES_SUMMARY,
+                    name: highchartsRenderer.chartsTypesInfo[highchartsRenderer.CHART_TYPES.GAUGE_CHART_CATEGORIES_SUMMARY].name,
+                    class: 'google-visualization-charteditor-thumbs-gauge-solid',
+                    render: highchartsRenderer.ptRenderGaugeCategoriesSummary,
+                    suboptions: [
+                        highchartsRenderer.suboptions["label_gauge"],
+                        highchartsRenderer.suboptions["tooltips_gauge"],
+                        highchartsRenderer.suboptions["subtitle"]
+                    ]
+                },
+            ]
+        },
             {
                 type: 'kpi',
                 name: 'KPI',
@@ -8286,6 +8321,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         class: 'google-visualization-charteditor-thumbs-walkthrough',
                         render: highchartsRenderer.ptRenderWaterfallWalkthrough,
                         suboptions: [
+                            highchartsRenderer.suboptions["axisY"],
                             highchartsRenderer.suboptions["axisX"],
                             highchartsRenderer.suboptions["tooltips"],
                             highchartsRenderer.suboptions["label"],
@@ -9877,6 +9913,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         e.point = lodash.cloneDeep(e.point);
         e.point.name = e.point.initialName;
         e.point.series.name = lodash.get(e.point.series, 'userOptions.initialName', e.point.series.name);
+        const seriesData = lodash.get(e.point.series, 'userOptions.data');
+        const initialNameForSmartQueries = seriesData 
+            ? lodash.find(seriesData, obj => obj.name === e.point.name)
+            : null;
+        if (initialNameForSmartQueries && initialNameForSmartQueries.type) {
+            e.point.series.name = initialNameForSmartQueries.type === "SQ_Actuals" ? 'Actuals' : 'Forecast';
+        }
         lodash.set(e, 'point.category.userOptions', e.point.initialName.toString().split(highchartsRenderer.delimer));
     }
 
@@ -10008,6 +10051,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         disableAnimation = disabled;
     };
 
+    highchartsRenderer.chartAnimationsDisabled = function () {
+        return disableAnimation;
+    };
+
     highchartsRenderer.adjustFormatToSupportedByMoment = function(format) {
         return typeof format === 'string'
             ? format.replace(/y/g, 'Y').replace(/d/g, 'D').replace(/h/g, 'H')