@datarailsshared/dr_renderer 1.4.37 → 1.4.40

package/package.json

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

package/src/charts/dr_donut_chart.js

@@ -110,7 +110,7 @@ function DrDonutChart(highchartsRenderer, pivotData, opts, drilldownFunc, disabl
 				x="0"
 				style="font-size: ${series.center[2] / 16}px; fill: #6D6E6F;">
 				${(additionOptions.total_value_label && additionOptions.total_value_label.total_value_label_text) || 'Total'}
-			 </tspan>`,
+			 </tspan>`
             )
             .css({
                 textAnchor: 'middle',
@@ -123,7 +123,7 @@ function DrDonutChart(highchartsRenderer, pivotData, opts, drilldownFunc, disabl
         const x = series.center[0] + chart.plotLeft;
         const y = chart.plotTop + series.center[1] - rect.height / 2;
 
-        totalLabel.attr({ x, y });
+        totalLabel.attr({ x: x, y: y });
     };
 
     this.setDrilldownConfig = function (chartConfig) {
@@ -134,7 +134,7 @@ function DrDonutChart(highchartsRenderer, pivotData, opts, drilldownFunc, disabl
                 pivotData,
                 chartConfig,
                 additionOptions,
-                opts,
+                opts
             );
         } else {
             chartConfig.drilldown = highchartsRenderer.getDataLabelsStylesForDrillDown(additionOptions);

package/src/charts/dr_gauge_categories_summary_chart.js

@@ -61,12 +61,12 @@ function DrGaugeCategoriesSummaryChart(pivotData, opts) {
 
     this.createPlotBands = function (options) {
         const {
-            segments,
+            segments: segments,
             goal: { value: goalValue },
-            gauge: { thickness },
+            gauge: { thickness: thickness },
         } = options;
 
-        let bands = segments.map((item, index) => {
+        let bands = _.map(segments, (item, index) => {
             return {
                 from: item.from,
                 to: item.to,
@@ -120,7 +120,7 @@ function DrGaugeCategoriesSummaryChart(pivotData, opts) {
                 }
             );
         }
-        segmentsOutput = segmentsOutput.filter(
+        segmentsOutput = _.filter(segmentsOutput,
             (segment) => {
                 return segment.from !== segment.to;
             }
@@ -133,8 +133,9 @@ function DrGaugeCategoriesSummaryChart(pivotData, opts) {
     }
 
     this.getCompletionPercentage = function (options) {
-        const countOfCompletedItems = options.segments.find(segment => !!segment.isCompletionParameter)?.count || 0;
-        const totalCount = options.segments.reduce((acc, segment) => acc + segment.count, 0);
+        const completedSegment = _.find(options.segments, segment => !!segment.isCompletionParameter);
+        const countOfCompletedItems = completedSegment ? completedSegment.count : 0;
+        const totalCount = _.reduce(options.segments, (acc, segment) => acc + segment.count, 0);
         if (totalCount === 0) {
             return 0;
         }
@@ -179,8 +180,7 @@ function DrGaugeCategoriesSummaryChart(pivotData, opts) {
 
 
     this.getPaneDimensions = function (chart, options) {
-        const {renderer} = chart;
-        const {offset} = options.gauge;
+        const offset = options.gauge.offset;
 
         const offsetBottom = options.gauge.valueOffset[0] + options.gauge.valueOffset[2] + offset[2];
 
@@ -199,7 +199,7 @@ function DrGaugeCategoriesSummaryChart(pivotData, opts) {
         const {radius, center} = this.getPaneDimensions(chart, options);
         chart.pane[0].options.size = 2 * radius;
         chart.pane[0].options.center = center;
-        chart.yAxis[0].options.plotBands.forEach((band) => {
+        _.forEach(chart.yAxis[0].options.plotBands, (band) => {
             band.outerRadius = radius - (options.gauge.tickLength - options.gauge.thickness) / 2;
         });
     };
@@ -241,16 +241,16 @@ function DrGaugeCategoriesSummaryChart(pivotData, opts) {
                 plotBorderWidth: 0,
                 plotShadow: false,
                 events: {
-                    render: ({target: chart}) => {
-                        this.moveCustomElementsToFront(chart);
+                    render: (event) => {
+                        this.moveCustomElementsToFront(event.target);
                     },
-                    beforeRedraw: ({target: chart}) => {
-                        this.setPane(chart, this.options);
-                        this.updateCustomElements(chart, this.options);
+                    beforeRedraw: (event) => {
+                        this.setPane(event.target, this.options);
+                        this.updateCustomElements(event.target, this.options);
                     },
-                    beforeRender: ({target: chart}) => {
-                        this.setPane(chart, this.options);
-                        this.setCustomElements(chart, this.options);
+                    beforeRender: (event) => {
+                        this.setPane(event.target, this.options);
+                        this.setCustomElements(event.target, this.options);
                     }
                 },
                 margin: [0, 0, 0, 0],

package/src/dr_pivottable.js

@@ -1526,7 +1526,7 @@ let initDRPivotTable = function($, window, document) {
                     if (opts.chartOptions.isSmartQueriesEnabled && flatRowKey.split(' , ').includes(DR_SCENARIO.Forecast)) {
                         const actualsRow = tree[flatRowKey.replace(DR_SCENARIO.Forecast, DR_SCENARIO.SQ_Actuals)] || {};
                         if (actualsRow && actualsRow[flatColKey]) {
-                            val += actualsRow[flatColKey]?.value() || 0;
+                            val += (actualsRow[flatColKey] && actualsRow[flatColKey].value()) || 0;
                         }
                     }
                     isColSubtotal = colHeader.children.length !== 0;
@@ -1572,7 +1572,7 @@ let initDRPivotTable = function($, window, document) {
 
                 val = totalAggregator.value();
                 if (opts.chartOptions.isSmartQueriesEnabled && flatRowKey.split(' , ').includes(DR_SCENARIO.Forecast)) {
-                    val += rowTotals[flatRowKey.replace(DR_SCENARIO.Forecast, DR_SCENARIO.SQ_Actuals)]?.value() || 0;
+                    val += _.get(rowTotals[flatRowKey.replace(DR_SCENARIO.Forecast, DR_SCENARIO.SQ_Actuals)], 'value', () => null)() || 0;
                 }
                 style = "pvtTotal rowTotal";
                 if (isRowSubtotal) {

package/src/highcharts_renderer.js

@@ -64,6 +64,7 @@ const CHART_TYPES = {
     GAUGE_CHART_DYNAMIC_GOAL: 'gauge-chart-dynamic-goal',
     GAUGE_CHART_CATEGORIES_SUMMARY: 'gauge-chart-categories-summary',
     KPI_WIDGET: 'kpi-widget',
+    SMART_KPI: 'smart-kpi',
     TEXT_WIDGET: 'text-widget',
     WATERFALL_BREAKDOWN: 'waterfall-chart-breakdown',
     WATERFALL_WALKTHROUGH: 'waterfall-chart-walkthrough',
@@ -399,7 +400,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
 
     const isChartTypeSupportedForSmartQuery = (type) => {
         if (!type) return null;
-        return [
+        return lodash.includes([
             'line',
             'line-chart-forecast',
             'spline',
@@ -409,7 +410,7 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             highchartsRenderer.CHART_TYPES.LINE_CHART_SMOOTH,
             highchartsRenderer.CHART_TYPES.AREA_CHART,
             highchartsRenderer.CHART_TYPES.AREA_CHART_SMOOTH,
-        ].includes(type);
+        ], type);
     };
 
 
@@ -7875,6 +7876,14 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             legendName: 'Data Series',
             startedMessage: '',
         },
+        [highchartsRenderer.CHART_TYPES.SMART_KPI]: {
+            name: 'Smart Kpi',
+            label: 'Smart KPI',
+            title: 'Present a single Key Performance Indicator.',
+            axisName: 'X-Axis',
+            legendName: 'Data Series',
+            startedMessage: 'To get started, drag one field to the value section. Best practice: Drag one field to the filter section, and filter as required.',
+        },
         'kpi-widget': {
             name: 'Kpi ',
             label: 'KPI',
@@ -8341,6 +8350,23 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                         highchartsRenderer.suboptions["negative_number_format"],
                         highchartsRenderer.suboptions["legends"],
                     ]
+                },
+                {
+                    type: 'smart-kpi',
+                    hidden: true,
+                    name: highchartsRenderer.chartsTypesInfo['smart-kpi'].name,
+                    class: 'google-visualization-charteditor-thumbs-kpi',
+                    render: () => { throw new Error('Smart KPI widget is not implemented yet'); },
+                    suboptions: [
+                        highchartsRenderer.suboptions["value"],
+                        highchartsRenderer.suboptions["range"],
+                        highchartsRenderer.suboptions["widget_library"],
+                        highchartsRenderer.suboptions["name"],
+                        highchartsRenderer.suboptions["table_options_transpose"],
+                        highchartsRenderer.suboptions["table_design_options"],
+                        highchartsRenderer.suboptions["negative_number_format"],
+                        highchartsRenderer.suboptions["legends"],
+                    ]
                 }]
             },
             {

package/src/smart_queries_helper.js

@@ -11,7 +11,7 @@ function createSingleDataSeriesForForecast(chart_series, chartOptions, pivotData
   const { actuals, forecast, smart_query } = chartOptions.chart;
   const input = pivotData.input;
 
-  const hasSQActuals = input.some(item => item.Scenario && item.Scenario.indexOf(DR_SCENARIO.SQ_Actuals) !== -1);
+  const hasSQActuals = lodash.some(input, item => lodash.includes(item.Scenario, DR_SCENARIO.SQ_Actuals));
   chartOptions.isSmartQueriesEnabled = hasSQActuals;
   if (!smart_query || !hasSQActuals) return null;
 
@@ -29,14 +29,14 @@ function buildChartSeriesFromPivotInputOnly(input, actuals, forecast, midMonthOf
     item.Amount !== 0
   );
 
-  const data = filtered.map(item => ({
+  const data = lodash.map(filtered, item => ({
     y: item.Amount,
     name: item['Reporting Month'],
     initialName: item['Reporting Month'],
     type: item.Scenario,
   })).sort((a, b) => new Date(a.name) - new Date(b.name));
 
-  const sqCount = input.filter(item => item.Scenario === DR_SCENARIO.SQ_Actuals).length;
+  const sqCount = lodash.filter(input, item => item.Scenario === DR_SCENARIO.SQ_Actuals).length;
 
   return {
     name,
@@ -55,21 +55,22 @@ function buildChartSeriesForMultipleSeriesCombinedLine(chart_series, input, actu
         const series = chart_series[i];
         if (!series || !series.data || !series.data.length) continue;
 
-        const data = input.filter(item => item['Scenario Cycle'] === series.name &&
-            (item['Scenario'] === DR_SCENARIO.SQ_Actuals || item['Scenario'] === DR_SCENARIO.Forecast))
+        const data = lodash.chain(input)
+            .filter(item => item['Scenario Cycle'] === series.name &&
+          (item['Scenario'] === DR_SCENARIO.SQ_Actuals || item['Scenario'] === DR_SCENARIO.Forecast))
             .map(item => ({
-                y: item.Amount,
-                name: item['Reporting Month'],
-                initialName: item['Reporting Month'],
-                type: item.Scenario,
-            })).sort((a, b) => new Date(a.name) - new Date(b.name));
-
+              y: item.Amount,
+              name: item['Reporting Month'],
+              initialName: item['Reporting Month'],
+              type: item.Scenario,
+            }))
+            .value().sort((a, b) => new Date(a.name) - new Date(b.name));
         if (!data.length) {
             resultingSeries.push(series);
             continue;
         }
 
-        const sqCount = data.filter(item => item.type === DR_SCENARIO.SQ_Actuals).length;
+        const sqCount = lodash.filter(data, item => item.type === DR_SCENARIO.SQ_Actuals).length;
         resultingSeries.push(
             {
                 name: series.name,