@datarailsshared/dr_renderer 1.2.463 → 1.3.1-27.merge

package/src/charts/dr_gauge_chart.js

@@ -37,13 +37,13 @@ const GAUGE_OPTIONS_DEFAULT = {
             color: "#BF1D30",
         },
         {
-            from: 51,
+            from: 50,
             to: 90,
             title: "Medium",
             color: "#FFA310",
         },
         {
-            from: 91,
+            from: 90,
             to: 100,
             title: "High",
             color: "#037C5A",
@@ -80,38 +80,11 @@ function DrGaugeChart(pivotData, opts) {
         return DrGaugeChart.highchartsRenderer.getSingleValueAgg(opts, aggfunc, base);
     };
 
-    this.isLeftQuarter = function (value, max = this.max) {
-        return value < max / 2;
+    this.isLeftQuarter = function (value, max = this.max, min = this.min) {
+        return (value - min) < (max - min) / 2;
     };
 
-    this.createPlotBands = function (options) {
-        const {
-            segments,
-            isAbsoluteValue,
-            goal: { value: goalValue },
-            gauge: { thickness },
-        } = options;
-
-        const bands = segments.map((item, index) => {
-            const itemFrom = !!index ? item.from - 1 : item.from;
-            return {
-                from: isAbsoluteValue ? itemFrom : (itemFrom * goalValue) / 100,
-                to: isAbsoluteValue ? item.to : (item.to * goalValue) / 100,
-                color: item.color,
-                thickness: thickness,
-                title: item.title,
-            };
-        });
-
-        // clamp last segment
-        bands[bands.length - 1].to = Math.max(bands[bands.length - 1].to, goalValue);
-
-        return bands;
-    };
-
-    this.createTicks = function (plotBands, options) {
-        return _.uniq([plotBands[0].from || 0, ...plotBands.map((b) => b.to), options.goal.value]).sort((a, b) => a - b);
-    };
+    this.createTicks = DrGaugeChart.createTicks;
 
     this.mergeOptions = function (options) {
         return helpers.mergeDeep(
@@ -142,21 +115,17 @@ function DrGaugeChart(pivotData, opts) {
     };
 
     this.formatValueLabel = function (value, options) {
-        return `<span style="display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: ${
-            options.label.font_size
-        }px;">
-            <span style="font-weight: 600; font-size: 1.5em; line-height: 1; color: ${options.label.font_color}">
+        return `<span style="display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: ${options.label.font_size
+            }px;">
+            <span style="font-weight: 600; font-size: 1.3em; line-height: 1; color: ${options.label.font_color}">
                 ${this.formatValue(value)}
-                ${
-                    options.label.show_percentage_in_value
-                        ? `<span style="font-size: 0.5833em; font-weight: 600; color: ${
-                              options.gauge.colors.meta
-                          };">(${this.toPercent(value)})</span>`
-                        : ""
-                }
+                ${options.label.show_percentage_in_value
+                ? `<span style="font-size: 0.5833em; font-weight: 600; color: ${options.gauge.colors.meta
+                };">(${this.toPercent(value)})</span>`
+                : ""
+            }
             </span>
-            <span style="font-weight: 500; font-size: 0.875em; line-height: 1; color: ${
-                options.gauge.colors.meta
+            <span style="font-weight: 500; font-size: 0.875em; line-height: 1; color: ${options.gauge.colors.meta
             };">Current status</span>
         </span>`;
     };
@@ -176,8 +145,8 @@ function DrGaugeChart(pivotData, opts) {
                 : "";
         const percentage = options.label.show_percentage_in_segments
             ? `<span style="font-size: 0.75em; color: ${options.gauge.colors.meta}; font-weight: 400;">(${this.toPercent(
-                  value
-              )})</span>`
+                value
+            )})</span>`
             : "";
 
         return `<span style="
@@ -194,67 +163,6 @@ function DrGaugeChart(pivotData, opts) {
         </span>`;
     };
 
-    this.getValue = function (pivotData, opts) {
-        const lineSeries = this.ptCreateBasicLineSeries(pivotData, null, true, null, null, opts, {});
-
-        let total = _.flatten(lineSeries
-            .map((s) => s.data.map((v) => v))
-            .filter((v) => !_.isNaN(v))
-        );
-
-        let aggfunc = (a, b) => a + b;
-        let base = 0;
-        let singleValueAgg = this.getSingleValueAgg(
-            {
-                value: {
-                    value: "Sum",
-                },
-            },
-            aggfunc,
-            base
-        );
-
-        aggfunc = singleValueAgg.aggfunc;
-        base = singleValueAgg.base;
-
-        const aggregator = pivotData.getAggregator([], []);
-        const value = total.length > 0 ? total.reduce(aggfunc, base) : aggregator.value();
-
-        return value;
-    };
-
-    this.getBorderPosition = function (chart, options, position) {
-        const { center, size } = chart.pane[0].options;
-        const {
-            gauge: { tickLength, tickWidth },
-        } = options;
-
-        return {
-            x: position === "start" ? center[0] - size / 2 + tickLength / 2 : center[0] + size / 2 - tickLength / 2,
-            y: center[1] + tickWidth / 2,
-        };
-    };
-
-    this.createBorder = function (chart, options, position) {
-        return chart.renderer
-            .arc(
-                Object.assign(this.getBorderPosition(chart, options, position), {
-                    r: options.gauge.thickness / 2,
-                    innerR: 0,
-                    start: 0,
-                    end: Math.PI,
-                })
-            )
-            .attr({
-                fill:
-                    position === "start"
-                        ? chart.yAxis[0].options.plotBands[0].color
-                        : chart.yAxis[0].options.plotBands.slice(-1)[0].color,
-            })
-            .add()
-            .toFront();
-    };
-
     this.getGoalIconPosition = function (chart, options) {
         const { center, size } = chart.pane[0].options;
         const radius = size / 2;
@@ -277,20 +185,12 @@ function DrGaugeChart(pivotData, opts) {
             .toFront();
     };
 
-    this.getValueLabelPosition = function (chart, options) {
-        const { center } = chart.pane[0].options;
-        return {
-            x: center[0],
-            y: center[1] + options.gauge.valueOffset[0],
-        };
-    };
-
     this.createValueLabel = function (chart, options) {
         const label = chart.renderer.text(this.formatValueLabel(this.value, options), 0, 0, true).add().toFront();
 
         helpers.removeSVGTextCorrection(label, "yCorr");
 
-        label.attr(this.getValueLabelPosition(chart, options)).css({
+        label.attr(DrGaugeChart.getValueLabelPosition(chart, options)).css({
             transform: "translateX(-50%)",
         });
 
@@ -314,12 +214,12 @@ function DrGaugeChart(pivotData, opts) {
                 // depends on label width
                 radiuses.push(
                     (chart.chartWidth / 2 - label.bBox.width - Math.max(offset[1], offset[3])) /
-                        Math.sin(Math.abs(Math.PI / 2 - angle))
+                    Math.sin(Math.abs(Math.PI / 2 - angle))
                 );
                 // depends on label height
                 radiuses.push(
                     (chart.chartHeight - offsetBottom - label.bBox.height / 2 - offset[0]) /
-                        Math.cos(Math.abs(Math.PI / 2 - angle))
+                    Math.cos(Math.abs(Math.PI / 2 - angle))
                 );
                 label.destroy();
             });
@@ -338,8 +238,9 @@ function DrGaugeChart(pivotData, opts) {
     };
 
     this.setTicksStyles = function (chart, options) {
-        Object.keys(chart.yAxis[0].ticks).forEach((i) => {
-            const tick = chart.yAxis[0].ticks[i];
+        const ticks = chart.yAxis[0].ticks;
+        Object.keys(ticks).forEach((i) => {
+            const tick = ticks[i];
             const isLeftQuarter = this.isLeftQuarter(tick.pos);
 
             if (tick.pos === options.goal.value) {
@@ -357,8 +258,42 @@ function DrGaugeChart(pivotData, opts) {
                 transform: `translate(${isLeftQuarter ? "-100%" : 0}, 0)`,
             });
         });
+
+        // If goal is hidden, we need to always show goal and hide the closest visible label before it
+        this.updateLabelsWhenGoalIsHidden(ticks, options);
+
     };
 
+    this.updateLabelsWhenGoalIsHidden = function (ticks, options) {
+        if (ticks[options.goal.value].label.opacity === 0) {
+
+            const ticksArray = Object.entries(ticks);
+
+            const goalTick = ticks[options.goal.value];
+
+            let firstVisibleLabelBeforeGoal = options.goal.value;
+            for (let i = ticksArray.findIndex(([key, _]) => Number(key) === options.goal.value) - 1; i >= 0; i--) {
+                const [key, tick] = ticksArray[i];
+
+                if (tick.label.opacity === 1) {
+                    firstVisibleLabelBeforeGoal = Number(key);
+                    break;
+                }
+            }
+
+            ticks[firstVisibleLabelBeforeGoal].label.css({
+                opacity: 0,
+                visibility: "hidden",
+            });
+
+            goalTick.label.css({
+                opacity: 1,
+                visibility: "visible",
+            });
+
+        }
+    }
+
     this.addTooltips = function (chart, options) {
         if (!options.tooltips.show) {
             return false;
@@ -395,8 +330,7 @@ function DrGaugeChart(pivotData, opts) {
             // goal tooltip if lebels are hidden
             if (tick.pos === options.goal.value && !options.label.show) {
                 drTooltip.add(
-                    `${
-                        options.label.show_goal_name ? options.goal.title || "" : ""
+                    `${options.label.show_goal_name ? options.goal.title || "" : ""
                     }<span style="font-weight: 600">${this.formatValue(options.goal.value)}</span>`,
                     chart.goalIcon.element,
                     {
@@ -426,16 +360,40 @@ function DrGaugeChart(pivotData, opts) {
 
     this.setCustomElements = function (chart, options) {
         chart.label = this.createValueLabel(chart, options);
-        chart.startBorder = this.createBorder(chart, options, "start");
-        chart.endBorder = this.createBorder(chart, options, "end");
+        chart.startBorder = DrGaugeChart.createBorder(chart, options, "start");
+        chart.endBorder = DrGaugeChart.createBorder(chart, options, "end");
         chart.goalIcon = this.createGoalIcon(chart, options);
     };
 
     this.updateCustomElements = function (chart, options) {
-        chart.startBorder.attr(this.getBorderPosition(chart, options, "start"));
-        chart.endBorder.attr(this.getBorderPosition(chart, options, "end"));
+        chart.startBorder.attr(DrGaugeChart.getBorderPosition(chart, options, "start"));
+        chart.endBorder.attr(DrGaugeChart.getBorderPosition(chart, options, "end"));
         chart.goalIcon.attr(this.getGoalIconPosition(chart, options));
-        chart.label.attr(this.getValueLabelPosition(chart, options));
+        chart.label.attr(DrGaugeChart.getValueLabelPosition(chart, options));
+    };
+
+    this.createPlotBands = function (options) {
+        const {
+            segments,
+            isAbsoluteValue,
+            goal: { value: goalValue },
+            gauge: { thickness },
+        } = options;
+
+        const bands = segments.map((item) => {
+            return {
+                from: isAbsoluteValue ? item.from : (item.from * goalValue) / 100,
+                to: isAbsoluteValue ? item.to : (item.to * goalValue) / 100,
+                color: item.color,
+                thickness: thickness,
+                title: item.title,
+            };
+        });
+
+        // clamp last segment
+        bands[bands.length - 1].to = Math.max(bands[bands.length - 1].to, goalValue);
+
+        return bands;
     };
 
     this.moveCustomElementsToFront = function (chart) {
@@ -487,6 +445,7 @@ function DrGaugeChart(pivotData, opts) {
                 },
                 margin: [0, 0, 0, 0],
                 spacing: [0, 0, 0, 0],
+                animation: !DrGaugeChart.highchartsRenderer.chartAnimationsDisabled(),
             },
 
             pane: {
@@ -511,7 +470,7 @@ function DrGaugeChart(pivotData, opts) {
                     enabled: !!this.options.label.show,
                     distance: 0,
                     verticalAlign: "middle",
-                    allowOverlap: true,
+                    allowOverlap: false,
                     align: "left",
                     style: {
                         whiteSpace: "nowrap",
@@ -546,6 +505,7 @@ function DrGaugeChart(pivotData, opts) {
                         backgroundColor: this.options.gauge.pivot.color,
                         radius: this.options.gauge.pivot.radius,
                     },
+                    animation: !DrGaugeChart.highchartsRenderer.chartAnimationsDisabled(),
                 },
             ],
         };
@@ -558,9 +518,98 @@ function DrGaugeChart(pivotData, opts) {
     this.goal = this.options.goal;
     this.plotBands = this.createPlotBands(this.options);
     this.ticks = this.createTicks(this.plotBands, this.options);
-    this.value = this.getValue(pivotData, opts);
+    this.value = DrGaugeChart.getValue(pivotData, opts);
     this.max = this.ticks[this.ticks.length - 1];
     this.min = this.ticks[0];
 }
 
+DrGaugeChart.createTicks = function (plotBands, options) {
+    return _.uniq([plotBands[0].from || 0, ...plotBands.map((b) => b.to), options.goal.value]).sort((a, b) => a - b);
+};
+
+DrGaugeChart.getBorderPosition = function (chart, options, position) {
+    const { center, size } = chart.pane[0].options;
+    const {
+        gauge: { tickLength, tickWidth },
+    } = options;
+
+    return {
+        x: position === "start" ? center[0] - size / 2 + tickLength / 2 : center[0] + size / 2 - tickLength / 2,
+        y: center[1] + tickWidth / 2,
+    };
+};
+
+DrGaugeChart.createBorder = function (chart, options, position) {
+    return chart.renderer
+        .arc(
+            Object.assign(DrGaugeChart.getBorderPosition(chart, options, position), {
+                r: options.gauge.thickness / 2,
+                innerR: 0,
+                start: 0,
+                end: Math.PI,
+            })
+        )
+        .attr({
+            fill:
+                position === "start"
+                    ? chart.yAxis[0].options.plotBands[0].color
+                    : chart.yAxis[0].options.plotBands.slice(-1)[0].color,
+        })
+        .add()
+        .toFront();
+};
+
+DrGaugeChart.getValueLabelPosition = function (chart, options) {
+    const { center } = chart.pane[0].options;
+    return {
+        x: center[0],
+        y: center[1] + options.gauge.valueOffset[0],
+    };
+};
+
+DrGaugeChart.ptCreateBasicLineSeries = function (pivotData, colors, onlyNumbers, isUniqueVals, additionOptions, opts, chartOptions) {
+    return DrGaugeChart.highchartsRenderer.ptCreateBasicLineSeries(
+        pivotData,
+        colors,
+        onlyNumbers,
+        isUniqueVals,
+        additionOptions,
+        opts,
+        chartOptions
+    );
+};
+
+DrGaugeChart.getSingleValueAgg = function (opts, aggfunc, base) {
+    return DrGaugeChart.highchartsRenderer.getSingleValueAgg(opts, aggfunc, base);
+};
+
+DrGaugeChart.getValue = function (pivotData, opts) {
+    const lineSeries = DrGaugeChart.ptCreateBasicLineSeries(pivotData, null, true, null, null, opts, {});
+
+    let total = _.flatten(lineSeries
+        .map((s) => s.data.map((v) => v))
+        .filter((v) => !_.isNaN(v))
+    );
+
+    let aggfunc = (a, b) => a + b;
+    let base = 0;
+    let singleValueAgg = DrGaugeChart.getSingleValueAgg(
+        {
+            value: {
+                value: "Sum",
+            },
+        },
+        aggfunc,
+        base
+    );
+
+    aggfunc = singleValueAgg.aggfunc;
+    base = singleValueAgg.base;
+
+    const aggregator = pivotData.getAggregator([], []);
+    const value = total.length > 0 ? total.reduce(aggfunc, base) : aggregator.value();
+
+    return value;
+};
+
 module.exports = { DrGaugeChart, GAUGE_OPTIONS_DEFAULT };

package/src/dr-renderer-helpers.js

@@ -1,3 +1,5 @@
+const _ = require('lodash');
+
 function backendSortingKeysAreNotEmpty(keys) {
     return !!keys && (!!keys.row_keys && !!keys.row_keys.length || !!keys.col_keys && !!keys.col_keys.length);
 }
@@ -48,6 +50,22 @@ function removeSVGTextCorrection(svgEl, corr = 'yCorr') {
     return svgEl;
 }
 
+function disableLegendInteractionIfRequired(chartOptions, additionOptions) {
+    const type = _.get(chartOptions, 'chart.type');
+    if (!type || !_.get(additionOptions, 'disable_legend_interaction')) return;
+
+    const legendItemClickFnPath = type === 'pie'
+        ? 'plotOptions.pie.point.events.legendItemClick'
+        : 'plotOptions.series.events.legendItemClick';
+
+    _.set(chartOptions, legendItemClickFnPath, () => false);
+    _.set(chartOptions, 'legend.itemStyle.cursor', 'default');
+}
+
+function isShowingEmptyValues(additionOptions) {
+    return !additionOptions || !additionOptions.chart || additionOptions.chart.dislay_empty_values !== false;
+}
+
 module.exports = {
     backendSortingKeysAreNotEmpty,
     capitalize,
@@ -55,4 +73,6 @@ module.exports = {
     isNumber,
     mergeDeep,
     removeSVGTextCorrection,
+    disableLegendInteractionIfRequired,
+    isShowingEmptyValues,
 }

package/src/dr_chart_tooltip.js

@@ -226,24 +226,31 @@ function DrChartTooltip(chart, options) {
     }
 
     this.getAnchorBox = function(el) {
+        const containerRect = this.chart.container.getBoundingClientRect();
+        const zoom = this.chart.container.clientWidth / containerRect.width;
+
         if (el.getBBox) {
-            return el.getBBox();
-        }
+            const bBox = el.getBBox();
+            bBox.x = bBox.x * zoom;
+            bBox.y = bBox.y * zoom;
+            bBox.width = bBox.width * zoom;
+            bBox.height = bBox.height * zoom;
 
-        const containerRect = this.chart.container.getBoundingClientRect();
+            return bBox;
+        }
 
         if (el.getBoundingClientRect) {
             const elRect = el.getBoundingClientRect();
             return {
-                x: elRect.x - containerRect.x,
-                y: elRect.y - containerRect.y,
-                width: elRect.width,
-                height: elRect.height,
+                x: (elRect.x - containerRect.x) * zoom,
+                y: (elRect.y - containerRect.y) * zoom,
+                width: elRect.width * zoom,
+                height: elRect.height * zoom,
             };
         }
         return {
-            x: el.x - containerRect.x,
-            y: el.y - containerRect.y,
+            x: (el.x - containerRect.x) * zoom,
+            y: (el.y - containerRect.y) * zoom,
             width: 0,
             height: 0,
         };

package/src/dr_pivottable.js

@@ -1,3 +1,6 @@
+const { DR_SCENARIO } = require('./smart_queries_helper');
+
+
 let initDRPivotTable = function($, window, document) {
     var hasProp = {}.hasOwnProperty;
     var slice = [].slice;
@@ -514,8 +517,8 @@ let initDRPivotTable = function($, window, document) {
         isColHideOnExpand = (ref5 = opts.colSubtotalDisplay) != null ? ref5.hideOnExpand : !opts.chartOptions.table_options.show_subtotals_for_columns;
         isColDisableExpandCollapse = (ref6 = opts.colSubtotalDisplay) != null ? ref6.disableExpandCollapse : void 0;
         colDisableAfter = (ref7 = opts.colSubtotalDisplay) != null ? ref7.disableAfter != null ? ref7.disableAfter : ref7.disableAfter = 9999 : void 0;
-        arrowCollapsed = opts.arrowCollapsed != null ? opts.arrowCollapsed : opts.arrowCollapsed = '<i class="fa fa-plus dr-icon-add"></i> ';
-        arrowExpanded = opts.arrowExpanded != null ? opts.arrowExpanded : opts.arrowExpanded = '<i class="fa fa-minus dr-icon-minus"></i> ';
+        arrowCollapsed = opts.arrowCollapsed != null ? opts.arrowCollapsed : opts.arrowCollapsed = '<i class="dr-icon-add"></i> ';
+        arrowExpanded = opts.arrowExpanded != null ? opts.arrowExpanded : opts.arrowExpanded = '<i class="dr-icon-minus"></i> ';
         colAttrs = pivotData.colAttrs;
         rowAttrs = pivotData.rowAttrs;
         rowKeys = pivotData.getRowKeys();
@@ -1269,6 +1272,9 @@ let initDRPivotTable = function($, window, document) {
                 "rowspan": rowHeader.descendants + 1,
                 "colspan": colspan
             });
+            if (opts.chartOptions.isSmartQueriesEnabled) {
+                th.textContent = th.textContent.replace(DR_SCENARIO.Forecast, 'Forecast Smart Query');
+            }
             if (opts.chartOptions.table_options.hide_nulls_in_headers) {
                 th.textContent = th.textContent.replace('[null]', '');
             }
@@ -1516,6 +1522,13 @@ let initDRPivotTable = function($, window, document) {
                         }
                     };
                     val = aggregator.value();
+
+                    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;
+                        }
+                    }
                     isColSubtotal = colHeader.children.length !== 0;
                     style = "pvtVal";
                     if (isColSubtotal) {
@@ -1558,6 +1571,9 @@ 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;
+                }
                 style = "pvtTotal rowTotal";
                 if (isRowSubtotal) {
                     style += " pvtRowSubtotal";
@@ -2338,6 +2354,9 @@ let initDRPivotTable = function($, window, document) {
         }
 
         main = function(rowAttrs, rowKeys, colAttrs, colKeys, pivotData) {
+            if (opts.chartOptions.isSmartQueriesEnabled) {
+                rowKeys = rowKeys.filter(rowKey => !rowKey.includes(DR_SCENARIO.SQ_Actuals));
+            }
             var c,rowspan, colHeaderCols, colHeaderHeaders, colHeaders, h, k, l, len, len1, result, rowHeaderHeaders, rowHeaderRows, rowHeaders, tbody, thead, tr;
             rowHeaders = [];
             colHeaders = [];
@@ -2476,7 +2495,12 @@ let initDRPivotTable = function($, window, document) {
             }
 
             if (tooMuch) {
-                const defaultPlaceholder = $('<div class="noData"><i class="fa fa-info"></i> There are too many rows to display in the table.<br>Please filter or change the table type in options.</div>');
+                const defaultPlaceholder = $(`
+                        <div class="noData--table-many-rows">
+                            <span><i class="noData-icon dr-icon-info"></i> There are too many rows to display in the table.</span>
+                            <span>Please filter or change the table type in options.</span>
+                        </div>
+                `);
 
                 resultsArr.push($.pivotUtilities.errorHandling.getErrorPlaceholder(error_params) || defaultPlaceholder);
             } else {