@datarailsshared/dr_renderer 1.2.251 → 1.2.252

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datarailsshared/dr_renderer",
-  "version": "1.2.251",
+  "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;
     }
 
@@ -3352,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),
@@ -7204,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',
@@ -7219,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',
@@ -7886,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"],
@@ -7898,8 +7931,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             highchartsRenderer.suboptions["negative_number_format"],
                             highchartsRenderer.suboptions["advanced"],
                             highchartsRenderer.suboptions["legends"],
-                        ],
-                        hidden: true,
+                        ]
                     },
                 ]
             },