@datarailsshared/dr_renderer 1.2.170-dragons → 1.2.172-dragons

package/package.json

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

package/src/highcharts_renderer.js

@@ -1,3 +1,29 @@
+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',
+}
+
 let getHighchartsRenderer = function ($, document, Highcharts, default_colors, highchartsRenderer,
                                       DataFormatter, lodash, moment_lib, isNewAngular) {
 
@@ -445,6 +471,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     || this.series.options.className === 'trendSeries') {
                     rows = [];
                 }
+
                 var cols = this.key;
                 if (typeof (cols) == 'object' && cols.name) {
                     cols = cols.name;
@@ -500,6 +527,13 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     }
 
                     const percentageWrapper = percentageArray.length ? `(${percentageArray.join(', ')})` : '';
+
+                    if (this.series.options.className === 'waterfallBreakdown') {
+                        const modifiedRowsAndCols = highchartsRenderer.transformRowsAndColsForBreakdown(rows, cols, this.point, opts);
+                        rows = modifiedRowsAndCols.rows;
+                        cols = modifiedRowsAndCols.cols;
+                    }
+
                     var aggr = pivotData.getAggregator(rows, cols);
 
                     const formattedValue = is_drill_down_pie || labelOptions.show_value ? $.pivotUtilities.getFormattedNumber(value, aggr, opts, true) : '';
@@ -570,6 +604,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
 
         var func = function () {
+            const isWaterfallBreakdown = this.series.options.className === 'waterfallBreakdown';
+
             var y = parseFloat(this.y);
             if (pivotData) {
                 let series_name = (this.series.name || '') + "";
@@ -604,8 +640,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         cols = rows;
                         rows = temp;
                     }
-                    var aggr = pivotData.getAggregator(rows, cols);
-                    var category_text = `<span style="font-weight: bold;">${cols} </span>`;
+
+                    var category_text = `<span style="font-weight: bold;">${cols}${isWaterfallBreakdown ? ': ' : ' '}</span>`;
                     if (this.category) {
                         category_text = '';
                     }
@@ -617,9 +653,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     if (pivotData.rowAttrs.length == 0) {
                         series_text = ': ';
                     }
+
+                    if (isWaterfallBreakdown) {
+                        const modifiedRowsAndCols = highchartsRenderer.transformRowsAndColsForBreakdown(rows, cols, this.point, opts);
+                        rows = modifiedRowsAndCols.rows;
+                        cols = modifiedRowsAndCols.cols;
+                    }    
+
+                    var aggr = pivotData.getAggregator(rows, cols);
+
                     let formatted_value_to_return = $.pivotUtilities.getFormattedNumber(y, null, opts);
-                    if (aggr.value()) {
-                        formatted_value_to_return = $.pivotUtilities.getFormattedNumber(aggr.value(), aggr, opts);
+                    if (aggr.value() || isWaterfallBreakdown) {
+                        formatted_value_to_return = $.pivotUtilities.getFormattedNumber(isWaterfallBreakdown ? y : aggr.value(), aggr, opts);
                     }
 
                     let wrappedFormattedValue = highchartsRenderer.getSpanWrapper(formatted_value_to_return);
@@ -628,7 +673,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     category_text = tooltipOptions.show_x_axis ? category_text : '';
                     series_text = tooltipOptions.show_data_series ? series_text : '';
 
-                    let to_return = category_text + series_text + wrappedFormattedValue;
+                    let to_return = isWaterfallBreakdown ? `${ category_text }${ wrappedFormattedValue }` : category_text + series_text + wrappedFormattedValue;
 
                     if (is_drill_down_pie) {
                         to_return = wrappedFormattedValue;
@@ -1128,7 +1173,7 @@ 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, {'chartOptions': additionOptions, total_value_options: opts.total_value_options}),
-                style: highchartsRenderer.getDataLabelsStyle(additionOptions)
+                style: highchartsRenderer.getDataLabelsStyle(additionOptions),
             }
 
             ob = highchartsRenderer.getDataLabelsOptions(additionOptions, ob);
@@ -1284,6 +1329,95 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return chart_series;
     }
 
+    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)
+            row_n_keys.push([]);
+
+        let resultObject = {
+            data: [],
+            dataLabels: {
+                allowOverlap: additionOptions && additionOptions.label ? additionOptions.label.overlap : false,
+                enabled: additionOptions && additionOptions.label ? additionOptions.label.show : true,
+                formatter: highchartsRenderer.defaultDataLabelFormatter(pivotData, {'chartOptions': additionOptions, total_value_options: opts.total_value_options}),
+                style: highchartsRenderer.getDataLabelsStyle(additionOptions),
+            },
+            upColor: colorOptions.increase,
+            color: colorOptions.decrease,
+            className: 'waterfallBreakdown'
+        };
+        resultObject = highchartsRenderer.getDataLabelsOptions(additionOptions, resultObject);
+
+        const breakdownValues = [];
+        lodash.forEach(col_n_keys, function(col_n_value, col_index) {
+            breakdownValues.push([]);
+            lodash.forEach(row_n_keys, function (row_n_value, row_index) {
+                var agg = pivotData.getAggregator(row_n_value, col_n_value);
+                var val = agg.value();
+
+                if (val != null && $.isNumeric(val)) {
+                    val = parseFloat(val);
+                } else if (onlyNumbers) {
+                    val = NaN;
+                } else {
+                    val = 0;
+                }
+
+                breakdownValues[col_index][row_index] = val;
+
+                if (col_index) {
+                    const value = val - breakdownValues[col_index - 1][row_index];
+
+                    if (value) {
+                        var tmoobj = {};
+                        var key = row_n_value;
+                        if (lodash.isArray(row_n_value)) {
+                            key = row_n_value[0];
+                        }
+                        tmoobj.name = lodash.unescape(key);
+        
+                        if (tmoobj.name) {
+                            tmoobj.name = tmoobj.name.replace('DR_Others', highchartsRenderer.getOthersName(opts));
+                        }
+        
+                        if (lodash.isEmpty(String(tmoobj.name))) {
+                            tmoobj.name = lodash.unescape(col_n_value);
+                            tmoobj.visible = false;
+                        }
+                        tmoobj.y = value;
+                        tmoobj.colKeys = [lodash.unescape(col_n_keys[col_index - 1]), lodash.unescape(col_n_value)];
+                        resultObject.data.push(tmoobj);
+                    }
+                }
+            });
+
+            resultObject.data.push({
+                y: pivotData.colTotals[col_n_value].sum,
+                name: lodash.unescape(col_n_value),
+                isSum: !!col_index,
+                isTotal: true,
+                color: colorOptions.total,
+            });
+        });
+
+        chart_series.push(resultObject);
+
+        opts.chart_series = []
+        if (!lodash.isEqual(row_n_keys, [[]])) {
+            chart_series.forEach(series => {
+                opts.chart_series.push(series.name);
+            })
+        }
+
+        return chart_series;
+    }
+
     highchartsRenderer.setChartTypeBySeriesType = function (type, series) {
         const types = {
             'line-chart': 'line',
@@ -3037,6 +3171,99 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
+    highchartsRenderer.ptRenderWaterfallBreakdown = function (pivotData, opts, drilldownFunc, chartType) {
+        let chartOptions = {};
+        const additionOptions = opts.chartOptions ? opts.chartOptions : highchartsRenderer.getDefaultValueForChart('column-chart');
+
+        chartOptions.chart = {
+            type: 'waterfall',
+            zoomType: additionOptions && additionOptions.chart && additionOptions.chart.zoom_type ? additionOptions.chart.zoom_type : 'None',
+        };
+        if (disableAnimation) {
+            chartOptions.chart.animation = false;
+        }
+
+        const breakdownFieldIsNotSet = lodash.some(pivotData.getRowKeys(), rowKey => !rowKey || lodash.isArray(rowKey) && !rowKey.length);
+        chartOptions.xAxis = {
+            type: 'category',
+            crosshair: true,
+            min: 0,
+            title: {
+                text : additionOptions && additionOptions.axisX ? additionOptions.axisX.name : '',
+            },
+            uniqueNames: breakdownFieldIsNotSet,
+        };
+
+        highchartsRenderer.setTitleAndSubTitle(chartOptions, opts, additionOptions);
+
+        chartOptions.yAxis = {
+            min: null,
+            max: null,
+            title: {
+                text: additionOptions && additionOptions.axisY ? additionOptions.axisY.name : '',
+                autoylabel: additionOptions && additionOptions.axisY ? additionOptions.axisY.autoylabel : ''
+            },
+            labels: {
+                formatter: highchartsRenderer.defaultValueLabelsFormatter(pivotData, opts)
+            },
+        };
+        if (additionOptions) {
+            highchartsRenderer.setYAxisMinMax(chartOptions.yAxis, additionOptions.axisY);
+        }
+
+        chartOptions.tooltip = {
+            formatter: highchartsRenderer.defaultFormatterToTooltip(pivotData, opts),
+            valueDecimals: 2,
+        };
+
+        highchartsRenderer.handleGridLines(additionOptions, chartOptions);
+
+        if (lodash.get(opts, 'paletteOptions.widgetPalette', null)) {
+            const mc_palette = lodash.find(lodash.get(opts.paletteOptions, 'monochromePalettes', []), { selected: true });
+            chartOptions.colors = mc_palette ? mc_palette.colors : opts.paletteOptions.widgetPalette;
+        } else if (lodash.get(opts, 'paletteOptions.dashboardPalette.colors', null)) {
+            chartOptions.colors = opts.paletteOptions.dashboardPalette.colors;
+        }
+        chartOptions.series = highchartsRenderer
+            .ptCreateWaterfallBreakdownSeries(pivotData, null, additionOptions, opts);
+
+        chartOptions = highchartsRenderer.prepareAxisX(chartOptions, additionOptions, pivotData.getColKeys());
+        chartOptions.plotOptions = {
+            waterfall: {
+                pointPadding: 0.2,
+                borderWidth: 0,
+                borderRadius: 1,
+                lineWidth: 0,
+            },
+            series: {
+                animation: !disableAnimation,
+                cropThreshold: 1000,
+                dataLabels: {
+                    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),
+                    inside: false
+                }
+            }
+        };
+
+        if (opts.drillDownListFunc) {
+            chartOptions.plotOptions.series.cursor = 'pointer';
+            chartOptions.plotOptions.series.point = {
+                events: {
+                    click: opts.drillDownListFunc
+                }
+            };
+        }
+
+        chartOptions.legend = {
+            enabled: false
+        };
+
+        return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
+    };
+
     highchartsRenderer.formatFieldValue = function (field, value) {
         let currentType = '';
         switch (field.type) {
@@ -4101,7 +4328,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
     };
 
-    highchartsRenderer.rhPivotView = function (rowData, options, isTable = false) {
+    highchartsRenderer.rhPivotView = function (rowData, options, isTable = false, widget = null) {
         if (!rowData || !rowData) {
             if (options.onlyOptions) {
                 return {};
@@ -4109,6 +4336,28 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             return null;
         }
 
+        if (widget && widget.chart_type === CHART_TYPES.WATERFALL_BREAKDOWN) {
+            const breakdownSettings = widget.options.breakdown_options.settings;
+            const maxCategories = breakdownSettings.maxCategoriesCount;
+            const minCategories = breakdownSettings.minCategoriesCount;
+            const categoryFieldName = widget.cols[0].name;
+            const uniqueCategories = lodash.filter(lodash.uniq(lodash.map(rowData, row => row[categoryFieldName])), value => !!value);
+
+            if (uniqueCategories && (uniqueCategories.length > maxCategories || uniqueCategories.length < minCategories )) {
+                const commonErrorSentence = `Please choose ${minCategories}-${maxCategories} items in the Category section.`
+                options.error_has_occurred = true;
+                options.error_params = {
+                    title: uniqueCategories.length > maxCategories
+                        ? `There is too much data. ${commonErrorSentence}`
+                        : `Not enough data. ${commonErrorSentence}`,
+                    text: '',
+                    btnText: 'Edit Widget',
+                    class: 'too-much-data',
+                }
+                return highchartsRenderer.getNoDataResult(options.rendererOptions, true);
+            }
+        }
+
         if (rowData.length == 0) {
             if (options.onlyOptions) {
                 return {};
@@ -6517,6 +6766,17 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     highchartsRenderer.chartsTypesInfo = {
+        [CHART_TYPES.WATERFALL_BREAKDOWN]: {
+            name: 'Waterfall Breakdown Chart ',
+            label: 'Waterfall Breakdown Chart ',
+            title: 'TODO: add text',
+            description: 'TODO: add text',
+            axisName: 'Category',
+            legendName: 'Breakdown',
+            startedMessage: 'To get started, drag one field to the Category and one field to the Value section.',
+            axisTooltipTitle: 'TODO: add text',
+            legendTooltipTitle: 'TODO: add text',
+        }, 
         'combo-chart': {
             name: 'Combo Chart ',
             label: 'Combo Chart ',
@@ -7149,6 +7409,32 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 }
                 ]
             },
+            {
+                type: 'waterfall-chart',
+                name: 'Waterfall',
+                hidden: true,
+                class: 'google-visualization-charteditor-mini-column',
+                subtypes: [
+                    {
+                        type: CHART_TYPES.WATERFALL_BREAKDOWN,
+                        name:  highchartsRenderer.chartsTypesInfo[CHART_TYPES.WATERFALL_BREAKDOWN].name,
+                        class: 'google-visualization-charteditor-thumbs-columnchart',
+                        render: highchartsRenderer.ptRenderWaterfallBreakdown,
+                        suboptions: [
+                            highchartsRenderer.suboptions["axisY"],
+                            highchartsRenderer.suboptions["axisX"],
+                            highchartsRenderer.suboptions["tooltips"],
+                            highchartsRenderer.suboptions["label"],
+                            highchartsRenderer.suboptions["subtitle"],
+                            highchartsRenderer.suboptions["widget_library"],
+                            highchartsRenderer.suboptions["chart"],
+                            highchartsRenderer.suboptions["negative_number_format"],
+                            highchartsRenderer.suboptions["advanced"],
+                            highchartsRenderer.suboptions["legends"],
+                        ]
+                    },
+                ]
+            },
         ];
 
     highchartsRenderer.richTextSubType = {
@@ -7598,6 +7884,16 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     };
 
+    highchartsRenderer.createDateFromString = function (dateString, format) {
+        if ((format && !highchartsRenderer.isDateFormat(dateString, format)) || !highchartsRenderer.isDate(dateString)) {
+            return null;
+        }
+        const utcDate = format 
+            ? moment_lib.utc(dateString, format, true)
+            : moment_lib.utc(dateString);
+        return utcDate.startOf('day').unix();
+    }
+
     highchartsRenderer.prepareDrillDownFilters = function (r_keys, c_keys, widget) {
         let row_key = r_keys;
         let col_key = c_keys;
@@ -7611,26 +7907,46 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
         let filters = [];
         
-        lodash.forEach(col_key, function (col_value, index) {
-            if (widget && widget.cols[index]) {
-                let temp = highchartsRenderer.createFilterObject(widget.cols[index]);
-                if (widget.cols[index].type === 'Date') {
-                    let datetrange = highchartsRenderer.createDateTypeFromValue(
+        if (widget.chart_type === CHART_TYPES.WATERFALL_BREAKDOWN) {
+            const colFilter = highchartsRenderer.createFilterObject(widget.cols[0]);
+            const labels = [];
+            colFilter.values = [];
+            lodash.forEach(col_key, function (col_value) {
+                if (widget.cols[0].type === 'Date') {
+                    let date = highchartsRenderer.createDateFromString(
                         col_value,
-                        highchartsRenderer.getDateFieldFormat(widget, widget.cols[index])
+                        highchartsRenderer.getDateFieldFormat(widget, widget.cols[0])
                     );
-
-                    if ($.isEmptyObject(datetrange)) {
-                        return;
-                    }
-                    temp.values = datetrange;
-                    temp.values.label = col_value;
+                    colFilter.values.push(date);
                 } else {
-                    temp.values = [col_value];
+                    colFilter.values.push(col_value);
                 }
-                filters.push(temp);
-            }
-        });
+                labels.push(col_value);
+            });
+            colFilter.value_to_show = labels.join(', ');
+            filters.push(colFilter);
+        } else {
+            lodash.forEach(col_key, function (col_value, index) {
+                if (widget && widget.cols[index]) {
+                    let temp = highchartsRenderer.createFilterObject(widget.cols[index]);
+                    if (widget.cols[index].type === 'Date') {
+                        let datetrange = highchartsRenderer.createDateTypeFromValue(
+                            col_value,
+                            highchartsRenderer.getDateFieldFormat(widget, widget.cols[index])
+                        );
+    
+                        if ($.isEmptyObject(datetrange)) {
+                            return;
+                        }
+                        temp.values = datetrange;
+                        temp.values.label = col_value;
+                    } else {
+                        temp.values = [col_value];
+                    }
+                    filters.push(temp);
+                }
+            });
+        }
 
         lodash.forEach(row_key, function (row_value, index) {
             if (widget && widget.rows[index]) {
@@ -7675,6 +7991,9 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         });
 
         lodash.forEach(filters, function (filter) {
+            if (filter.value_to_show) {
+                return;
+            }
             if (Array.isArray(filter.values)) {
                 if (filter.type) {
                     for (let i = 0; i < filter.values.length; i++) {
@@ -8054,7 +8373,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             subopts.onlyOptions = true;
         }
 
-        let hc_options = highchartsRenderer.rhPivotView(res, subopts, is_table);
+        let hc_options = highchartsRenderer.rhPivotView(res, subopts, is_table, widget_obj);
 
         return hc_options;
     }
@@ -8281,6 +8600,24 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
     }
 
+    highchartsRenderer.getOthersName = function(opts) {
+        return lodash.get(opts, "total_value_options.filter_options.filteredOutFieldName") || 'Others';
+    }
+
+    highchartsRenderer.transformRowsAndColsForBreakdown = function(rows, cols, point, opts) {
+        const othersIndex = cols.indexOf(highchartsRenderer.getOthersName(opts));
+        if (othersIndex !== -1) {
+            cols[othersIndex] = 'DR_Others';
+        }
+        if (point.options.isTotal) {
+            rows = [];
+        } else {
+            rows = cols;
+            cols = [];
+        }
+        return { rows: rows, cols: cols };
+    }
+
     return highchartsRenderer;
 };