@datarailsshared/dr_renderer 1.2.173-dragons → 1.2.175-dragons

package/package.json

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

package/src/highcharts_renderer.js

@@ -1,28 +1,11 @@
-const CHART_TYPES = {
-    LINE_CHART: 'line-chart',
-    LINE_CHART_SMOOTH: 'line-chart-smooth',
-    COLUMN_CHART: 'column-chart',
-    COLUMN_CHART_STACKED: 'column-chart-stacked',
-    COMBO_CHART: 'combo-chart',
-    COMBO_COLUMN_CHART: 'combo-column-chart',
-    COMBO_STACKED_CHART: 'combo-stacked-chart',
-    BAR_CHART: 'bar-chart',
-    BAR_CHART_STACKED: 'bar-chart-stacked',
-    SCATTER_CHART: 'scatter-chart',
-    AREA_CHART: 'area-chart',
-    AREA_CHART_SMOOTH: 'area-chart-smooth',
-    TABLE_ONLY: 'table_only',
-    POLYGON_CHART: 'polygon-chart',
-    PIE_CHART: 'pie-chart',
-    PIE_CHART_DRILLDOWN: 'pie-chart-drilldown',
-    GAUGE_SOLID_CHART: 'gauge-solid-chart',
-    GAUGE_CHART: 'gauge-chart',
-    KPI_WIDGET: 'kpi-widget',
-    TEXT_WIDGET: 'text-widget',
-    WATERFALL_BREAKDOWN: 'waterfall-chart-breakdown',
-    PUBLISHED_ITEM: 'published_item',
-    RICH_TEXT: 'rich_text',
-}
+const SERIES_CLASSNAMES = {
+    WATERFALL_BREAKDOWN: 'waterfallBreakdown',
+    TOTAL_SERIES: 'totalSeries',
+    TREND_SERIES: 'trendSeries',
+};
+
+const EMPTY_ROW_N_KEYS = [[]];
+const NULL_VALUE = '[null]';
 
 let getHighchartsRenderer = function ($, document, Highcharts, default_colors, highchartsRenderer,
                                       DataFormatter, lodash, moment_lib, isNewAngular) {
@@ -77,6 +60,32 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     ].join(''), 'i');
     highchartsRenderer.isMobile = mobileBrowserRegex.test(navigator.userAgent);
 
+    highchartsRenderer.CHART_TYPES = {
+        LINE_CHART: 'line-chart',
+        LINE_CHART_SMOOTH: 'line-chart-smooth',
+        COLUMN_CHART: 'column-chart',
+        COLUMN_CHART_STACKED: 'column-chart-stacked',
+        COMBO_CHART: 'combo-chart',
+        COMBO_COLUMN_CHART: 'combo-column-chart',
+        COMBO_STACKED_CHART: 'combo-stacked-chart',
+        BAR_CHART: 'bar-chart',
+        BAR_CHART_STACKED: 'bar-chart-stacked',
+        SCATTER_CHART: 'scatter-chart',
+        AREA_CHART: 'area-chart',
+        AREA_CHART_SMOOTH: 'area-chart-smooth',
+        TABLE_ONLY: 'table_only',
+        POLYGON_CHART: 'polygon-chart',
+        PIE_CHART: 'pie-chart',
+        PIE_CHART_DRILLDOWN: 'pie-chart-drilldown',
+        GAUGE_SOLID_CHART: 'gauge-solid-chart',
+        GAUGE_CHART: 'gauge-chart',
+        KPI_WIDGET: 'kpi-widget',
+        TEXT_WIDGET: 'text-widget',
+        WATERFALL_BREAKDOWN: 'waterfall-chart-breakdown',
+        PUBLISHED_ITEM: 'published_item',
+        RICH_TEXT: 'rich_text',
+    };
+
     highchartsRenderer.highcharts_theme = {
         "colors": highchartsRenderer.defaults_colors,
         "chart": {
@@ -528,7 +537,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
                     const percentageWrapper = percentageArray.length ? `(${percentageArray.join(', ')})` : '';
 
-                    if (this.series.options.className === 'waterfallBreakdown') {
+                    if (this.series.options.className === SERIES_CLASSNAMES.WATERFALL_BREAKDOWN) {
                         const modifiedRowsAndCols = highchartsRenderer.transformRowsAndColsForBreakdown(rows, cols, this.point, opts);
                         rows = modifiedRowsAndCols.rows;
                         cols = modifiedRowsAndCols.cols;
@@ -604,7 +613,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
 
         var func = function () {
-            const isWaterfallBreakdown = this.series.options.className === 'waterfallBreakdown';
+            const isWaterfallBreakdown = this.series.options.className === SERIES_CLASSNAMES.WATERFALL_BREAKDOWN;
 
             var y = parseFloat(this.y);
             if (pivotData) {
@@ -641,7 +650,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         rows = temp;
                     }
 
-                    var category_text = `<span style="font-weight: bold;">${cols}${isWaterfallBreakdown ? ': ' : ' '}</span>`;
+                    var category_text = `<span style="font-weight: bold;">${ cols }${ isWaterfallBreakdown ? ': ' : ' ' }</span>`;
                     if (this.category) {
                         category_text = '';
                     }
@@ -1106,7 +1115,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         opts.chart_series = []
 
-        if (!lodash.isEqual(row_n_keys, [[]])) {
+        if (!lodash.isEqual(row_n_keys, EMPTY_ROW_N_KEYS)) {
             chart_series.forEach(series => {
                 opts.chart_series.push(series.name);
             })
@@ -1266,7 +1275,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         let weights = { line: 2,spline: 3 ,area:-2, areaspline: -1, scatter:4, column: 1 };
 
-        if (opts.comboOptions && lodash.includes(chartType,'combo') && !lodash.isEqual(row_n_keys, [[]])) {
+        if (opts.comboOptions && lodash.includes(chartType,'combo') && !lodash.isEqual(row_n_keys, EMPTY_ROW_N_KEYS)) {
             chart_series.forEach((series, seriesIndex) => {
                 const savedSeriesOption = lodash.find(opts.comboOptions.seriesOptions, {series: series.name});
                 if (savedSeriesOption) {
@@ -1279,7 +1288,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         opts.chart_series = []
 
-        if (!lodash.isEqual(row_n_keys, [[]])) {
+        if (!lodash.isEqual(row_n_keys, EMPTY_ROW_N_KEYS)) {
             chart_series.forEach(series => {
                 opts.chart_series.push(series.name);
             })
@@ -1330,15 +1339,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     }
 
     highchartsRenderer.ptCreateWaterfallBreakdownSeries = function (pivotData, onlyNumbers, additionOptions, opts) {
-        
         const colorOptions = opts.breakdown_options.colors;
-
         var chart_series = [],
             row_n_keys = pivotData.getRowKeys(),
             col_n_keys = pivotData.getColKeys();
 
-        if (row_n_keys.length == 0)
+        if (row_n_keys.length === 0) {
             row_n_keys.push([]);
+        }
 
         let resultObject = {
             data: [],
@@ -1350,7 +1358,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             },
             upColor: colorOptions.increase,
             color: colorOptions.decrease,
-            className: 'waterfallBreakdown'
+            className: SERIES_CLASSNAMES.WATERFALL_BREAKDOWN
         };
         resultObject = highchartsRenderer.getDataLabelsOptions(additionOptions, resultObject);
 
@@ -1408,11 +1416,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         chart_series.push(resultObject);
 
-        opts.chart_series = []
-        if (!lodash.isEqual(row_n_keys, [[]])) {
+        opts.chart_series = [];
+        if (!lodash.isEqual(row_n_keys, EMPTY_ROW_N_KEYS)) {
             chart_series.forEach(series => {
                 opts.chart_series.push(series.name);
-            })
+            });
         }
 
         return chart_series;
@@ -3173,7 +3181,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     highchartsRenderer.ptRenderWaterfallBreakdown = function (pivotData, opts, drilldownFunc, chartType) {
         let chartOptions = {};
-        const additionOptions = opts.chartOptions ? opts.chartOptions : highchartsRenderer.getDefaultValueForChart('column-chart');
+        const additionOptions = opts.chartOptions 
+            ? opts.chartOptions
+            : highchartsRenderer.getDefaultValueForChart(highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN);
 
         chartOptions.chart = {
             type: 'waterfall',
@@ -4336,7 +4346,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             return null;
         }
 
-        if (widget && widget.chart_type === CHART_TYPES.WATERFALL_BREAKDOWN) {
+        if (widget && widget.chart_type === highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN) {
             const breakdownSettings = widget.options.breakdown_options.settings;
             const maxCategories = breakdownSettings.maxCategoriesCount;
             const minCategories = breakdownSettings.minCategoriesCount;
@@ -6766,7 +6776,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     highchartsRenderer.chartsTypesInfo = {
-        [CHART_TYPES.WATERFALL_BREAKDOWN]: {
+        [highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN]: {
             name: 'Waterfall Breakdown Chart ',
             label: 'Waterfall Breakdown Chart ',
             title: 'TODO: add text',
@@ -7416,8 +7426,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 class: 'google-visualization-charteditor-mini-column',
                 subtypes: [
                     {
-                        type: CHART_TYPES.WATERFALL_BREAKDOWN,
-                        name:  highchartsRenderer.chartsTypesInfo[CHART_TYPES.WATERFALL_BREAKDOWN].name,
+                        type: highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN,
+                        name:  highchartsRenderer.chartsTypesInfo[highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN].name,
                         class: 'google-visualization-charteditor-thumbs-columnchart',
                         render: highchartsRenderer.ptRenderWaterfallBreakdown,
                         suboptions: [
@@ -7907,7 +7917,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         let filters = [];
         
-        if (widget.chart_type === CHART_TYPES.WATERFALL_BREAKDOWN) {
+        if (widget.chart_type === highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN) {
             const colFilter = highchartsRenderer.createFilterObject(widget.cols[0]);
             const labels = [];
             colFilter.values = [];
@@ -8033,7 +8043,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             }
         }
 
-        if (widget.chart_type === CHART_TYPES.WATERFALL_BREAKDOWN) {
+        if (widget.chart_type === highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN) {
             let filter = lodash.find(filters, {name: widget.cols[0].name});
             if (filter) {
                 filter.is_excluded = false;
@@ -8202,9 +8212,16 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         lodash.forEach(datesFields, function (row) {
             row.values = lodash.uniq(row.values);
 
-            const isTimestampDateField = row.type === 'Date' && typeof row.values[0] === 'number';
+            const isTimestampDateField = row.type === 'Date' && lodash.some(row.values, value => typeof value ==='number');
             if (isTimestampDateField) {
+                const nullValueIndex = row.values.indexOf(NULL_VALUE);
+                if (~nullValueIndex) {
+                    row.values.splice(nullValueIndex, 1);
+                }
                 row.values = row.values.sort((a, b) => a - b);
+                if (~nullValueIndex) {
+                    row.values.push(NULL_VALUE);
+                }
             } else {
                 row.values = row.values.sort();
             }
@@ -8636,7 +8653,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             rows = cols;
             cols = [];
         }
-        return { rows: rows, cols: cols };
+        return { rows, cols };
     }
 
     return highchartsRenderer;