@datarailsshared/dr_renderer 1.3.38 → 1.3.40

package/package.json

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

package/src/dr-renderer-helpers.js

@@ -62,6 +62,10 @@ function disableLegendInteractionIfRequired(chartOptions, additionOptions) {
     _.set(chartOptions, 'legend.itemStyle.cursor', 'default');
 }
 
+function isShowingEmptyValues(additionOptions) {
+    return !additionOptions || !additionOptions.chart || additionOptions.chart.dislay_empty_values !== false;
+}
+
 module.exports = {
     backendSortingKeysAreNotEmpty,
     capitalize,
@@ -70,4 +74,5 @@ module.exports = {
     mergeDeep,
     removeSVGTextCorrection,
     disableLegendInteractionIfRequired,
+    isShowingEmptyValues,
 }

package/src/highcharts_renderer.js

@@ -406,6 +406,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         if (!type) return null;
         return [
             'line',
+            'line-chart-forecast',
             'spline',
             'area',
             'areaspline',
@@ -1266,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();
@@ -1276,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
@@ -1484,13 +1481,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
@@ -1575,6 +1567,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);
             });
         }
 
@@ -2532,7 +2525,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),
             }
         };
 
@@ -2621,7 +2615,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),
             }
         };
 
@@ -2717,8 +2712,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),
             }
         };
 
@@ -2804,13 +2800,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: {
@@ -2825,7 +2822,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,
             }
         };
 
@@ -2884,7 +2882,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),
             }
         };
 
@@ -2911,7 +2910,7 @@ 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);
 
@@ -2981,7 +2980,6 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             highchartsRenderer.setYAxisMinMax(chartOptions.yAxis, additionOptions.axisY);
         }
 
-
         chartOptions.tooltip = {
             formatter: highchartsRenderer.defaultFormatterToTooltip(pivotData, opts),
             valueDecimals: 2,
@@ -3012,7 +3010,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) {
@@ -3319,7 +3317,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)
 
@@ -3337,7 +3335,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)
-                }
+                },
             }
         };
 
@@ -3445,7 +3443,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);
 
         if (opts.selectedPoint) {
             seriesPointStylesHelper.setInitialPointStyles(opts, chartOptions.series);
@@ -6594,12 +6592,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',
@@ -6611,12 +6610,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': {
@@ -6639,6 +6645,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 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',
@@ -6646,7 +6658,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             },
             {
                 element_type: 'toggle',
-                element_label: 'Smart Queries',
+                element_label: 'Forecast Chart',
                 value_name: 'smart_query',
                 default_value: true,
                 showFn: isChartTypeSupportedForSmartQuery
@@ -7649,6 +7661,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',
@@ -7842,6 +7865,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,

package/tests/highcharts_renderer.test.js

@@ -6811,6 +6811,7 @@ describe('highcharts_renderer', () => {
                         formatter: expect.any(Function),
                     },
                     color: '#ff0202',
+                    connectNulls: false,
                     type: 'area'
                 },
                 {data: [
@@ -6846,6 +6847,7 @@ describe('highcharts_renderer', () => {
                         enabled: true,
                         formatter: expect.any(Function),
                     },
+                    connectNulls: false,
                     color: '#b3060e',
                     type: 'line'
                 }