@datarailsshared/dr_renderer 1.4.25 → 1.4.26

package/package.json

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

package/src/charts/dr_gauge_chart.js

@@ -51,7 +51,7 @@ const GAUGE_OPTIONS_DEFAULT = {
     ],
 };
 
-function DrGaugeChart(pivotData, opts) {
+function DrGaugeChart(pivotData, opts, isDynamicGoal) {
     this.render = function () {
         return DrGaugeChart.highchartsRenderer.ptCreateElementAndDraw(this.configChart(), opts);
     };
@@ -84,7 +84,9 @@ function DrGaugeChart(pivotData, opts) {
         return (value - min) < (max - min) / 2;
     };
 
-    this.createTicks = DrGaugeChart.createTicks;
+    this.createTicks = function(plotBands, options) {
+        return DrGaugeChart.createTicks(plotBands, options);
+    }
 
     this.mergeOptions = function (options) {
         return helpers.mergeDeep(
@@ -111,7 +113,7 @@ function DrGaugeChart(pivotData, opts) {
     };
 
     this.toPercent = function (value) {
-        return `${Math.round((value * 100) / (this.options.isAbsoluteValue ? this.max : this.goal.value))}%`;
+        return `${Math.round((value * 100) / (this.options.isAbsoluteValue ? this.max : this.options.goal.value))}%`;
     };
 
     this.formatValueLabel = function (value, options) {
@@ -171,9 +173,17 @@ function DrGaugeChart(pivotData, opts) {
             goal: { value },
         } = options;
 
+        let valueForPosition = value;
+        let verticalOffset = 0;
+
+        if (DrGaugeChart.dynamicGoalFeatureEnabled() && (value > this.max || value < this.min)) {
+            valueForPosition = value > this.max ? this.max : this.min;
+            verticalOffset = 30;
+        }
+
         return {
-            x: center[0] - radius * Math.sin(Math.PI / 2 - this.getAngleForValue(value)) - goalIconSize[0] / 2,
-            y: center[1] - radius * Math.cos(Math.PI / 2 - this.getAngleForValue(value)) - goalIconSize[1] / 2,
+            x: center[0] - radius * Math.sin(Math.PI / 2 - this.getAngleForValue(valueForPosition)) - goalIconSize[0] / 2,
+            y: center[1] + verticalOffset - radius * Math.cos(Math.PI / 2 - this.getAngleForValue(valueForPosition)) - goalIconSize[1] / 2,
         };
     };
 
@@ -197,6 +207,42 @@ function DrGaugeChart(pivotData, opts) {
         return label;
     };
 
+    this.getGoalLabelPosition = function (chart, options, goalLabel) {
+        const padding = 7;
+        const point = this.getGoalIconPosition(chart, options);
+        const isLower = options.goal.value < this.min;
+
+        return {
+            x: point.x + (isLower ? -goalLabel.element.clientWidth : padding),
+            y: point.y + padding,
+        };
+    }
+
+    this.createGoalLabel = function (chart, options) {
+        const label = chart.renderer.text(
+            this.formatTickLabel(options.goal.value, options), 0, 0, true
+        ).add().toFront();
+
+        label.attr(this.getGoalLabelPosition(chart, options, label));
+
+        if (options.tooltips.show) {
+            const drTooltip = new DrChartTooltip(chart, {
+                fontSize: options.tooltips.font_size,
+                fontFamily: options.tooltips.font_style,
+                color: options.tooltips.font_color,
+            });
+            drTooltip.add(
+                this.toPercent(options.goal.value),
+                label.element,
+                {
+                    direction: "right",
+                }
+            );
+        }
+
+        return label;
+    };
+
     this.getPaneDimensions = function (chart, options) {
         const { renderer } = chart;
         const valueLabel = this.createValueLabel(chart, this.options);
@@ -265,7 +311,7 @@ function DrGaugeChart(pivotData, opts) {
     };
 
     this.updateLabelsWhenGoalIsHidden = function (ticks, options) {
-        if (ticks[options.goal.value].label.opacity === 0) {
+        if (ticks[options.goal.value] && ticks[options.goal.value].label.opacity === 0) {
 
             const ticksArray = Object.entries(ticks);
 
@@ -363,6 +409,10 @@ function DrGaugeChart(pivotData, opts) {
         chart.startBorder = DrGaugeChart.createBorder(chart, options, "start");
         chart.endBorder = DrGaugeChart.createBorder(chart, options, "end");
         chart.goalIcon = this.createGoalIcon(chart, options);
+
+        if (DrGaugeChart.dynamicGoalFeatureEnabled() && (options.goal.value > this.max || options.goal.value < this.min)) {
+            chart.goalLabel = this.createGoalLabel(chart, options);
+        }
     };
 
     this.updateCustomElements = function (chart, options) {
@@ -370,6 +420,10 @@ function DrGaugeChart(pivotData, opts) {
         chart.endBorder.attr(DrGaugeChart.getBorderPosition(chart, options, "end"));
         chart.goalIcon.attr(this.getGoalIconPosition(chart, options));
         chart.label.attr(DrGaugeChart.getValueLabelPosition(chart, options));
+
+        if (chart.goalLabel) {
+            chart.goalLabel.attr(this.getGoalLabelPosition(chart, options, chart.goalLabel));
+        }
     };
 
     this.createPlotBands = function (options) {
@@ -391,7 +445,9 @@ function DrGaugeChart(pivotData, opts) {
         });
 
         // clamp last segment
-        bands[bands.length - 1].to = Math.max(bands[bands.length - 1].to, goalValue);
+        if (!DrGaugeChart.dynamicGoalFeatureEnabled()) {
+            bands[bands.length - 1].to = Math.max(bands[bands.length - 1].to, goalValue);
+        }
 
         return bands;
     };
@@ -400,6 +456,10 @@ function DrGaugeChart(pivotData, opts) {
         chart.startBorder.toFront();
         chart.endBorder.toFront();
         chart.goalIcon.toFront();
+
+        if (chart.goalLabel) {
+            chart.goalLabel.toFront();
+        }
     };
 
     this.clampValueToPane = function (value, max = this.max, min = this.min) {
@@ -407,6 +467,16 @@ function DrGaugeChart(pivotData, opts) {
         return helpers.clamp(min - correction, value, max + correction);
     };
 
+    this.setGoal = function (pivotData, opts) {
+        if (isDynamicGoal) {
+            this.options.goal = {
+                title: this.options.goal.title,
+                value: DrGaugeChart.getValue(pivotData, opts, true, true),
+            };
+        }
+        this.goal = this.options.goal;
+    };
+
     this.configChart = function () {
         return {
             title: {
@@ -513,18 +583,25 @@ function DrGaugeChart(pivotData, opts) {
 
     this.originalOptions = opts;
     this.options = this.mergeOptions(opts.chartOptions);
-    this.aggregation = pivotData.getAggregator([], []);
+    this.aggregation = DrGaugeChart.getAggregation(pivotData, opts.chartOptions);
     this.format = this.aggregation.widget_values_format;
-    this.goal = this.options.goal;
+    this.setGoal(pivotData, opts);
     this.plotBands = this.createPlotBands(this.options);
     this.ticks = this.createTicks(this.plotBands, this.options);
-    this.value = DrGaugeChart.getValue(pivotData, opts);
+    this.value = DrGaugeChart.getValue(pivotData, opts, isDynamicGoal);
     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);
+    const goal = options.goal.value;
+    const ticks = [plotBands[0].from || 0, ...plotBands.map((b) => b.to)];
+
+    if (!DrGaugeChart.dynamicGoalFeatureEnabled() || goal < Math.max(...ticks) && goal > Math.min(...ticks)) {
+        ticks.push(options.goal.value);
+    }
+
+    return _.uniq(ticks.sort((a, b) => a - b));
 };
 
 DrGaugeChart.getBorderPosition = function (chart, options, position) {
@@ -583,33 +660,51 @@ 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, {});
+DrGaugeChart.getAggregation = function(pivotData, options, isForGoal = false) {
+    if (_.get(options, 'dynamicGaugeConfig')) {
+        return pivotData.getAggregator([], [isForGoal ? options.dynamicGaugeConfig.goal : options.dynamicGaugeConfig.needle]);
+    }
+    return pivotData.getAggregator([], []);
+}
 
-    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",
+DrGaugeChart.getValue = function (pivotData, opts, isDynamicGoal = false, isForGoal = false) {
+    const aggregator = DrGaugeChart.getAggregation(pivotData, opts.chartOptions, isForGoal)
+
+    let total;
+    if (!isDynamicGoal) {
+        const lineSeries = DrGaugeChart.ptCreateBasicLineSeries(pivotData, null, true, null, null, opts, {});
+
+        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,
+            base
+        );
 
-    aggfunc = singleValueAgg.aggfunc;
-    base = singleValueAgg.base;
+        aggfunc = singleValueAgg.aggfunc;
+        base = singleValueAgg.base;
 
-    const aggregator = pivotData.getAggregator([], []);
-    const value = total.length > 0 ? total.reduce(aggfunc, base) : aggregator.value();
+        if (total.length > 0) {
+            return total.reduce(aggfunc, base);
+        }
+    }
 
-    return value;
+    return aggregator.value();
 };
 
+DrGaugeChart.dynamicGoalFeatureEnabled = function() {
+    return DrGaugeChart.highchartsRenderer.hasFeature(helpers.FEATURES.ENABLE_GAUGE_DYNAMIC_GOAL);
+}
+
 module.exports = { DrGaugeChart, GAUGE_OPTIONS_DEFAULT };

package/src/dr-renderer-helpers.js

@@ -66,6 +66,15 @@ function isShowingEmptyValues(additionOptions) {
     return !additionOptions || !additionOptions.chart || additionOptions.chart.dislay_empty_values !== false;
 }
 
+const FEATURES = {
+    ENABLE_NEW_WIDGET_VALUE_FORMATTING: 'enable_new_widget_value_formatting',
+    FORMAT_DATES_AS_OTHER_AXIS_TYPES: 'format_dates_as_other_axis_types',
+    MULTIPLE_DIMENSION_TAGS: 'multiple_dimension_tags',
+    USE_NEW_SCENARIO_TAG: 'use_new_scenario_tag',
+    ENABLE_SERVER_WIDGET_DATA_SORTING: 'enable_server_widget_data_sorting',
+    ENABLE_GAUGE_DYNAMIC_GOAL: 'enable_gauge_dynamic_goal',
+}
+
 module.exports = {
     backendSortingKeysAreNotEmpty,
     capitalize,
@@ -75,4 +84,5 @@ module.exports = {
     removeSVGTextCorrection,
     disableLegendInteractionIfRequired,
     isShowingEmptyValues,
+    FEATURES
 }

package/src/highcharts_renderer.js

@@ -61,6 +61,7 @@ const CHART_TYPES = {
     GAUGE_SOLID_CHART: 'gauge-solid-chart',
     GAUGE_CHART: 'gauge-chart',
     GAUGE_CHART_ENHANCED: 'gauge-chart-enhanced',
+    GAUGE_CHART_DYNAMIC_GOAL: 'gauge-chart-dynamic-goal',
     GAUGE_CHART_CATEGORIES_SUMMARY: 'gauge-chart-categories-summary',
     KPI_WIDGET: 'kpi-widget',
     TEXT_WIDGET: 'text-widget',
@@ -155,13 +156,7 @@ const CHART_AXIS_DEFAULT_LABEL = 'Axis (Category)';
 
 const CHART_LEGEND_DEFAULT_LABEL = 'Legend (Series)';
 
-const FEATURES = {
-    ENABLE_NEW_WIDGET_VALUE_FORMATTING: 'enable_new_widget_value_formatting',
-    FORMAT_DATES_AS_OTHER_AXIS_TYPES: 'format_dates_as_other_axis_types',
-    MULTIPLE_DIMENSION_TAGS: 'multiple_dimension_tags',
-    USE_NEW_SCENARIO_TAG: 'use_new_scenario_tag',
-    ENABLE_SERVER_WIDGET_DATA_SORTING: 'enable_server_widget_data_sorting',
-}
+const FEATURES = helpers.FEATURES;
 
 const TICKS_COUNT = 5;
 
@@ -2305,6 +2300,10 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         return new DrGaugeChart(pivotData, opts).render();
     };
 
+    highchartsRenderer.ptRenderGaugeDynamicGoal = (pivotData, opts) => {
+        return new DrGaugeChart(pivotData, opts, true).render();
+    };
+
     highchartsRenderer.ptRenderGaugeCategoriesSummary = (pivotData, opts) => {
         return new DrGaugeCategoriesSummaryChart(pivotData, opts).render();
     };
@@ -4740,6 +4739,23 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             return highchartsRenderer.getNoDataResult(true);
         }
 
+        if (lodash.get(widget, 'chart_type') === highchartsRenderer.CHART_TYPES.GAUGE_CHART_DYNAMIC_GOAL) {
+            const noNeedleOrGoalSelected =
+                !lodash.get(widget, 'options.chartOptions.dynamicGaugeConfig.goal')
+                || !lodash.get(widget, 'options.chartOptions.dynamicGaugeConfig.needle');
+
+            if (noNeedleOrGoalSelected) {
+                options.error_has_occurred = true;
+                options.error_params = {
+                    title: 'Please configure goal and needle',
+                    // TODO: add text
+                    text: '',
+                    class: 'configure-gauge-settings',
+                }
+                return highchartsRenderer.getNoDataResult(true);
+            }
+        }
+
         var tmp = $.pivotUtilities.aggregatorTemplates;
         var defaults, e, result, opts, optsFiltered;
         defaults = {
@@ -7600,6 +7616,21 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             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.',
+            categoryContainerSettings: {
+                multiple: false,
+                singleFieldReplacement: true,
+                onlyOneFieldHeight: true,
+            },
+            legendContainerSettings: {
+                multiple: false,
+                singleFieldReplacement: true,
+                onlyOneFieldHeight: true,
+            },
+            valuesContainerSettings: {
+                multiple: false,
+                singleFieldReplacement: true,
+                onlyOneFieldHeight: true,
+            },
         },
         [highchartsRenderer.CHART_TYPES.WATERFALL_WALKTHROUGH]: {
             name: 'Walkthrough Chart',
@@ -7613,6 +7644,17 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
             axisTooltipTitle: 'Drag one or more fields to configure your x-axis.',
             axisTooltipDescription: 'The category is shown on the x-axis and should be between 2 to 10 columns.',
             legendTooltipTitle: '',
+            categoryContainerSettings: {
+                fixedInitialHeight: true,
+            },
+            valuesContainerSettings: {
+                multiple: false,
+                singleFieldReplacement: true,
+                onlyOneFieldHeight: true,
+            },
+            filtersContainerSettings: {
+                fixedInitialHeight: true,
+            },
         },
         'combo-chart': {
             name: 'Combo Chart ',
@@ -7786,12 +7828,45 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
         },
         [highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED]: {
             name: 'Gauge chart',
-            label: 'Gauge',
+            categoryLabel: 'Gauge',
+            displayLabelInEditor: highchartsRenderer.hasFeature(FEATURES.ENABLE_GAUGE_DYNAMIC_GOAL),
+            label: highchartsRenderer.hasFeature(FEATURES.ENABLE_GAUGE_DYNAMIC_GOAL) ? 'Static goal' : 'Gauge',
             title: 'Measures progress toward a goal or a KPI.',
             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.',
+            valuesContainerSettings: {
+                fixedInitialHeight: true,
+            },
+            filtersContainerSettings: {
+                fixedInitialHeight: true,
+            },
+        },
+
+        // TODO: update descriptions if required
+        [highchartsRenderer.CHART_TYPES.GAUGE_CHART_DYNAMIC_GOAL]: {
+            name: 'Gauge chart with dynamic goal',
+            categoryLabel: 'Gauge',
+            displayLabelInEditor: true,
+            iconType: highchartsRenderer.CHART_TYPES.GAUGE_CHART_ENHANCED,
+            label: 'Dynamic goal',
+            title: 'Measures progress toward a goal or a KPI.',
+            axisName: 'Goal',
+            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.',
+            categoryContainerSettings: {
+                multiple: false,
+                singleFieldReplacement: true,
+                onlyOneFieldHeight: true,
+            },
+            valuesContainerSettings: {
+                fixedInitialHeight: true,
+            },
+            filtersContainerSettings: {
+                fixedInitialHeight: true,
+            },
         },
+
         [highchartsRenderer.CHART_TYPES.GAUGE_CHART_CATEGORIES_SUMMARY]: {
             name: 'Gauge chart categories summary',
             label: 'Gauge',
@@ -8212,27 +8287,41 @@ let getHighchartsRenderer = function ($, document, Highcharts, default_colors, h
                             highchartsRenderer.suboptions["table_design_options"],
                         ]
                     },
+                    {
+                        type: highchartsRenderer.CHART_TYPES.GAUGE_CHART_DYNAMIC_GOAL,
+                        name:  highchartsRenderer.chartsTypesInfo[highchartsRenderer.CHART_TYPES.GAUGE_CHART_DYNAMIC_GOAL].name,
+                        class: 'google-visualization-charteditor-thumbs-gauge-solid',
+                        render: highchartsRenderer.ptRenderGaugeDynamicGoal,
+                        suboptions: [
+                            highchartsRenderer.suboptions["label_gauge"],
+                            highchartsRenderer.suboptions["tooltips_gauge"],
+                            highchartsRenderer.suboptions["subtitle"],
+                            highchartsRenderer.suboptions["table_options_gauge"],
+                            highchartsRenderer.suboptions["table_design_options"],
+                        ],
+                        hidden: !highchartsRenderer.hasFeature(FEATURES.ENABLE_GAUGE_DYNAMIC_GOAL),
+                    },
+                ]
+            },
+            {
+                type: 'gauge-categories-summary',
+                name: 'Gauge Categories Summary',
+                class: 'google-visualization-charteditor-mini-gauge',
+                hidden: true,
+                subtypes: [
+                    {
+                        type: highchartsRenderer.CHART_TYPES.GAUGE_CHART_CATEGORIES_SUMMARY,
+                        name: highchartsRenderer.chartsTypesInfo[highchartsRenderer.CHART_TYPES.GAUGE_CHART_CATEGORIES_SUMMARY].name,
+                        class: 'google-visualization-charteditor-thumbs-gauge-solid',
+                        render: highchartsRenderer.ptRenderGaugeCategoriesSummary,
+                        suboptions: [
+                            highchartsRenderer.suboptions["label_gauge"],
+                            highchartsRenderer.suboptions["tooltips_gauge"],
+                            highchartsRenderer.suboptions["subtitle"]
+                        ]
+                    },
                 ]
             },
-        {
-            type: 'gauge-categories-summary',
-            name: 'Gauge Categories Summary',
-            class: 'google-visualization-charteditor-mini-gauge',
-            hidden: true,
-            subtypes: [
-                {
-                    type: highchartsRenderer.CHART_TYPES.GAUGE_CHART_CATEGORIES_SUMMARY,
-                    name: highchartsRenderer.chartsTypesInfo[highchartsRenderer.CHART_TYPES.GAUGE_CHART_CATEGORIES_SUMMARY].name,
-                    class: 'google-visualization-charteditor-thumbs-gauge-solid',
-                    render: highchartsRenderer.ptRenderGaugeCategoriesSummary,
-                    suboptions: [
-                        highchartsRenderer.suboptions["label_gauge"],
-                        highchartsRenderer.suboptions["tooltips_gauge"],
-                        highchartsRenderer.suboptions["subtitle"]
-                    ]
-                },
-            ]
-        },
             {
                 type: 'kpi',
                 name: 'KPI',

package/tests/dr_gauge_chart.test.js

@@ -23,6 +23,7 @@ DrGaugeChart.highchartsRenderer = {
     }),
     disableChartAnimations: jest.fn((value) => disableChartAnimation = value),
     chartAnimationsDisabled: jest.fn(() => disableChartAnimation),
+    hasFeature: jest.fn().mockReturnValue(false),
 };
 
 const mockAggregationValue = 1000;