@datarailsshared/dr_renderer 1.2.191-dragons → 1.2.193-dragons

package/package.json

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

package/src/highcharts_renderer.js

@@ -3261,6 +3261,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             enabled: false
         };
 
+        chartOptions.xAxis.labels = {
+            formatter: highchartsRenderer.getBreakdownXAxisLabelFormatter(chartOptions.series),
+        };
+
         return highchartsRenderer.ptCreateElementAndDraw(chartOptions, opts);
     };
 
@@ -6781,8 +6785,8 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         [highchartsRenderer.CHART_TYPES.WATERFALL_BREAKDOWN]: {
             name: 'Breakdown Chart ',
             label: 'Breakdown Chart ',
-            title: 'Explain financial outcomes differences.',
-            description: 'For example, describe the gaps between last and current year total revenue, breakdown by department.',
+            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',
@@ -8660,6 +8664,15 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return { rows, cols };
     }
 
+    highchartsRenderer.getBreakdownXAxisLabelFormatter = function(chartSeries) {
+        const styleForCategoryLabel = 'font-weight: 700; font-size: 12px;';
+        const styleForBreakdownLabel = 'font-weight: 600; color: #6f6f6f; font-size: 11px;';
+        return function() {
+            const isTotal = lodash.some(chartSeries[0].data, point => point.name === this.value && point.isTotal);
+            return `<span style="${ isTotal ? styleForCategoryLabel : styleForBreakdownLabel }">${ this.value }</span>`;
+        }
+    }
+
     return highchartsRenderer;
 };