@datarailsshared/dr_renderer 1.2.250 → 1.2.252

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/dr_renderer",
-  "version": "1.2.250",
+  "version": "1.2.252",
   "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;
     }
 
@@ -1480,6 +1494,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             resultObject.data.push({
                 y: val,
                 name: lodash.unescape(name).replace('DR_Others', highchartsRenderer.getOthersName(opts)),
+                totalIndex: value.trend === 'total' ? index : undefined,
                 isSum: value.trend === 'total',
                 isTotal: value.trend === 'total',
                 color,
@@ -3351,9 +3366,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),
@@ -7203,11 +7230,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',
@@ -7218,10 +7251,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',
@@ -7885,7 +7919,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"],
@@ -7897,8 +7931,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             highchartsRenderer.suboptions["negative_number_format"],
                             highchartsRenderer.suboptions["advanced"],
                             highchartsRenderer.suboptions["legends"],
-                        ],
-                        hidden: true,
+                        ]
                     },
                 ]
             },
@@ -8392,6 +8425,15 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             });
             colFilter.value_to_show = labels.join(', ');
             filters.push(colFilter);
+        } else if (widget.chart_type === highchartsRenderer.CHART_TYPES.WATERFALL_WALKTHROUGH) {
+            lodash.forEach(col_key, function (colKeyElement, index) {   
+                const field = lodash.get(widget, `cols[${ index }]`);
+                if (field) {
+                    let filter = highchartsRenderer.createFilterObject(field);
+                    highchartsRenderer.buildFilterValuesFromWalkthroughColKey(widget, field, filter, colKeyElement);
+                    filters.push(filter);
+                }
+            });
         } else {
             lodash.forEach(col_key, function (col_value, index) {
                 if (widget && widget.cols[index]) {
@@ -8519,6 +8561,21 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         : colKey[i]
                 );
             }
+        } else if (widget.chart_type === highchartsRenderer.CHART_TYPES.WATERFALL_WALKTHROUGH) {
+            lodash.forEach(colKey, function (colKeyElement, index) {
+                const field = lodash.get(widget, `cols[${ index }]`);
+                if (field) {
+                    let filter = lodash.find(filters, {name: field.name});
+                    if (filter) {
+                        filter.is_excluded = false;
+                    } else {
+                        filter = highchartsRenderer.createDrillDownFilterObject(widget, field, colKeyElement);
+                        filters.push(filter);
+                    }
+                    filter.values = [];
+                    highchartsRenderer.buildFilterValuesFromWalkthroughColKey(widget, field, filter, colKeyElement);
+                }
+            });
         } else {
             for (let i = 0; i < colKey.length; i++) {
                 let filter = lodash.find(filters, {name: widget.cols[i].name});
@@ -9176,6 +9233,29 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return lodash.concat(modifiedRowData, rowData);
     }
 
+    highchartsRenderer.buildFilterValuesFromWalkthroughColKey = function(widget, field, filter, colKey) {
+        const isTotal = lodash.isArray(colKey);
+        colKey = isTotal ? colKey : [colKey];
+ 
+        lodash.forEach(colKey, function (colValue) {
+            let value = colValue;
+            if (field.type === 'Date' && !isTotal) {
+                value = highchartsRenderer.createDateFromString(
+                    value,
+                    highchartsRenderer.getDateFieldFormat(widget, field)
+                );
+            }
+            if (!filter.values) {
+                filter.values = [];
+            }
+            filter.values.push(value);
+
+            if (!isTotal) {
+                filter.value_to_show = colKey[0];
+            }
+        });
+    }
+
     return highchartsRenderer;
 };