@datarailsshared/dr_renderer 1.2.197 → 1.2.199

package/package.json

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

package/src/highcharts_renderer.js

@@ -3276,6 +3276,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             enabled: false
         };
 
+        chartOptions.xAxis.labels = {
+            formatter: highchartsRenderer.getBreakdownXAxisLabelFormatter(chartOptions.series),
+        };
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -6794,16 +6798,18 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     highchartsRenderer.chartsTypesInfo = {
         [highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN]: {
-            name: 'Waterfall Breakdown Chart ',
-            label: 'Waterfall Breakdown Chart ',
-            title: 'TODO: add text',
-            description: 'TODO: add text',
+            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.',
             titleInEditor: 'This chart displays the breakdown of variance between two or more total values.',
             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',
+            axisTooltipTitle: 'Drag one field to configure your x-axis.',
+            axisTooltipDescription: 'The category (usually an independent variable) is shown on the x-axis and should be between 2 to 5 total columns. ',
+            legendTooltipTitle: 'Drag one field to further configure your x-axis.',
+            legendTooltipDescription: 'The breakdown subdivides the chart by a category field for further analysis of what’s contributing to the increase or decrease.',
         }, 
         'combo-chart': {
             name: 'Combo Chart ',
@@ -7440,13 +7446,12 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             {
                 type: 'waterfall-chart',
                 name: 'Waterfall',
-                hidden: true,
-                class: 'google-visualization-charteditor-mini-column',
+                class: 'google-visualization-charteditor-mini-waterfall',
                 subtypes: [
                     {
                         type: highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN,
                         name:  highchartsRenderer.chartsTypesInfo[highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN].name,
-                        class: 'google-visualization-charteditor-thumbs-columnchart',
+                        class: 'google-visualization-charteditor-thumbs-breakdown',
                         render: highchartsRenderer.ptRenderWaterfallBreakdown,
                         suboptions: [
                             highchartsRenderer.suboptions["axisY"],
@@ -8674,6 +8679,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return { rows, cols };
     }
 
+    highchartsRenderer.getBreakdownXAxisLabelFormatter = function(chartSeries) {
+        const styleForBreakdownLabel = 'font-weight: normal; color: #51566f;';
+        return function() {
+            const isTotal = lodash.some(chartSeries[0].data, point => point.name === this.value && point.isTotal);
+            return `<span style="${ isTotal ? '' : styleForBreakdownLabel }">${ this.value }</span>`;
+        }
+    }
+
     return highchartsRenderer;
 };