@datarailsshared/dr_renderer 1.2.251 → 1.2.253

package/package.json

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

package/src/highcharts_renderer.js

@@ -1366,7 +1366,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             className: SERIES_CLASSNAMES.WATERFALL_BREAKDOWN
         };
         resultObject = highchartsRenderer.getDataLabelsOptions(additionOptions, resultObject);
-
+        resultObject.name = pivotData.colAttrs[0];
         lodash.forEach(col_n_keys, function(col_n_value, col_index) {
 
             const totalColumnValue = pivotData.getAggregator([], col_n_value).value();
@@ -1415,6 +1415,20 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             });
         }
 
+        chart_series.push(
+            {
+                name: 'Positive',
+                visible: false,
+                color: colorOptions.increase
+            });
+
+        chart_series.push(
+            {
+                name: 'Negative',
+                visible: false,
+                color: colorOptions.decrease
+            });
+
         return chart_series;
     }
 
@@ -1441,7 +1455,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                 keys = value.key;
             } else {
                 _.forEach(value.key, (item) => {
-                    const findKeyByValue = Object.keys(pivotData.dateValuesDictionary || {}).find(key => pivotData.dateValuesDictionary[key] === item);
+                    const findKeyByValue = lodash.find(
+                        Object.keys(pivotData.dateValuesDictionary || {}),
+                        key => pivotData.dateValuesDictionary[key] === item
+                    );
                     keys.push(findKeyByValue ? findKeyByValue : item);
                  })
             }
@@ -1479,7 +1496,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
             resultObject.data.push({
                 y: val,
-                name: lodash.unescape(name).replace('DR_Others', highchartsRenderer.getOthersName(opts)),
+                name: lodash.replace(lodash.unescape(name), 'DR_Others', highchartsRenderer.getOthersName(opts)),
                 totalIndex: value.trend === 'total' ? index : undefined,
                 isSum: value.trend === 'total',
                 isTotal: value.trend === 'total',
@@ -3352,9 +3369,21 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             };
         }
 
-        chartOptions.legend = {
-            enabled: false
-        };
+        chartOptions.legend = highchartsRenderer.getOptionsForLegends(additionOptions, 3, false);
+        chartOptions.legend.useHTML = true;
+        chartOptions.legend.labelFormatter = function() {
+            const name = this.name;
+            const findTotal = _.find(this.options.data, {isTotal: true});
+            const color = lodash.get(findTotal, 'color') ? findTotal.color : this.color;
+            return `<span style="margin: 5px; vertical-align: middle; display:inline-block; background-color: ${color};
+                        width: 12px; height: 12px; border-radius: 50%"></span>
+                    <span style="color: #000; display: inline-block; margin: 5px; vertical-align: middle;">${name}</span>`;
+        }
+
+        chartOptions.legend.symbolPadding = 0;
+        chartOptions.legend.symbolWidth = 0;
+        chartOptions.legend.symbolHeight = 0;
+        chartOptions.legend.squareSymbol = false;
 
         chartOptions.xAxis.labels = {
             formatter: highchartsRenderer.getBreakdownXAxisLabelFormatter(chartOptions.series),
@@ -7204,11 +7233,17 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
     };
 
     highchartsRenderer.chartsTypesInfo = {
+        'waterfall-chart': {
+            name: 'Waterfall Chart',
+            label: 'Waterfall Chart',
+            title: 'Describe and explain changes in your financial outcomes.',
+        },
         [highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN]: {
-            name: 'Breakdown Chart ',
-            label: 'Breakdown Chart ',
-            title: 'Analyzes what’s contributing to the financial increase or decrease.',
-            description: 'For example, analyzes what’s contributing most to the difference in total revenue between last year and this year.',
+            name: 'Breakdown Chart',
+            label: 'Breakdown Chart',
+            title: 'Describe and explain changes in your financial outcomes.',
+            description: `For example, describe the gaps between income and your gross profit or describe the \n
+                gaps between last and current year total revenue, breakdown by locations.`,
             titleInEditor: 'This chart displays the breakdown of variance between two or more total values.',
             axisName: 'Category',
             legendName: 'Breakdown',
@@ -7219,10 +7254,11 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             legendTooltipDescription: 'The breakdown subdivides the chart by a category field for further analysis of what’s contributing to the increase or decrease.',
         },
         [highchartsRenderer.CHART_TYPES.WATERFALL_WALKTHROUGH]: {
-            name: 'Waterfall Walkthrough Chart ',
-            label: 'Waterfall Walkthrough Chart ',
-            title: 'TODO: add text',
-            description: 'TODO: add text',
+            name: 'Walkthrough Chart',
+            label: 'Walkthrough Chart',
+            title: 'Describe and explain changes in your financial outcomes.',
+            titleInEditor: 'TODO: add text',
+            description: 'For example, describe the gaps between income and your gross profit.',
             axisName: 'Category',
             startedMessage: 'TODO: add text',
             axisTooltipTitle: 'TODO: add text',
@@ -7886,7 +7922,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                     {
                         type: highchartsRenderer.CHART_TYPES.WATERFALL_WALKTHROUGH,
                         name:  highchartsRenderer.chartsTypesInfo[highchartsRenderer.CHART_TYPES.WATERFALL_WALKTHROUGH].name,
-                        class: 'google-visualization-charteditor-thumbs-columnchart',
+                        class: 'google-visualization-charteditor-thumbs-walkthrough',
                         render: highchartsRenderer.ptRenderWaterfallWalkthrough,
                         suboptions: [
                             highchartsRenderer.suboptions["axisX"],
@@ -7898,8 +7934,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             highchartsRenderer.suboptions["negative_number_format"],
                             highchartsRenderer.suboptions["advanced"],
                             highchartsRenderer.suboptions["legends"],
-                        ],
-                        hidden: true,
+                        ]
                     },
                 ]
             },
@@ -8883,12 +8918,21 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         }
 
         let pivot = {};
+
+        let templateNoData = lodash.find(templates, {id: widget_obj.template_id});
+        if (templateNoData) {
+
+            // we need to assign this before calling getWidgetDataSorters method
+            // other way we won't get dateValuesDictionary
+            // preserved condition templateNoData == true - not to interfere with further logic
+            widget_obj.pivot = pivot;
+        }
+
         pivot.sorters = highchartsRenderer.getWidgetDataSorters(res, widget_obj);
         pivot.rowData = res;
         widget_obj.options = highchartsRenderer.parseOptionsToObject(widget_obj.options);
-        let templateNoData = lodash.find(templates, {id: widget_obj.template_id});
+        
         if (templateNoData) {
-            widget_obj.pivot = pivot;
             let hasServerDrill = widget_obj.chart_type.indexOf("column-chart") > -1 && widget_obj.cols && widget_obj.cols.length >= 1;
             if (hasServerDrill)
                 highchartsRenderer.addPivotOptions(templateNoData, widget_obj, drillDownFunction, openDrillDownListFunction);