Fix #9617 legends with percent for pie chart (#9618)

* Fix #9617 legends with percent for pie chart

web/client/components/charts/WidgetChart.jsx

@@ -1,5 +1,5 @@
 import React, { Suspense } from 'react';
-import {every, includes, isNumber, isString, union, orderBy, flatten} from 'lodash';
+import {isNull, every, includes, isNumber, isString, union, orderBy, flatten} from 'lodash';
 
 import LoadingView from '../misc/LoadingView';
 import { sameToneRangeColors } from '../../utils/ColorUtils';
@@ -25,7 +25,38 @@ export const defaultColorGenerator = (total, colorOptions) => {
     const { base, range, ...opts } = colorOptions;
     return (sameToneRangeColors(base, range, total + 1, opts) || [0]).slice(1);
 };
-
+//
+/**
+ * Returns the labels for the pie chart, adds % to the labels, for legend, if the prop `includeLegendPercent` is true
+ * @param {string|number[]} keys the values of the chart ["California", "Ohio", ...]
+ * @param {number[]} y array of values to be used to calculate the percentage of the label
+ * @param {boolean} opts.includeLegendPercent if true, it adds the % on the label legend
+ * @returns {string[]} the labels for the pie chart
+ */
+export const renderLabels = (keys = [], y = [], {includeLegendPercent} = {}) => {
+    if (!includeLegendPercent) {
+        return keys;
+    }
+    const total = y.reduce((p, c) => {
+        if (isNumber(c) && !isNaN(p)) {
+            return p + c;
+        }
+        return p;
+    }, 0);
+    if (includeLegendPercent && isNumber(total) && total !== 0) {
+        return keys.map((v, i) => {
+            if (!isNull(y[i])) { // avoid implicit conversion of null to 0
+                const percent = (y[i] / total * 100).toPrecision(3); // use precision to be consistent with formatting of plotlyJS (3 digits)
+                if (!isNaN(percent)) {
+                    return v + " - " + percent + "%";
+                }
+            }
+            return v;
+        });
+    }
+    // prevent cases when division by zero
+    return keys;
+};
 /**
  * Checks the parameters and return the color classification type for the chart. Classification type can be:
  * - 'value' for classifications based on exact value. Used if the type of `classificationAttr` is "string".
@@ -294,10 +325,11 @@ function getData({
         if (formula) {
             y = preProcessValues(formula, y);
         }
-
+        // if includeLegendPercent is true, the percent is already included in the label
+        const percentHover = !yAxisOpts?.includeLegendPercent ? '%{percent}' : '';
         let pieChartTrace = {
             name: yAxisLabel || yDataKey,
-            hovertemplate: `%{label}<br>${yDataKey}<br>${yAxisOpts?.tickPrefix ?? ""}%{value${yAxisOpts?.format ? `:${yAxisOpts?.format}` : ''}}${yAxisOpts?.tickSuffix ?? ""}<br>%{percent}<extra></extra>`,
+            hovertemplate: `%{label}<br>${yDataKey}<br>${yAxisOpts?.tickPrefix ?? ""}%{value${yAxisOpts?.format ? `:${yAxisOpts?.format}` : ''}}${yAxisOpts?.tickSuffix ?? ""}<br>${percentHover}<extra></extra>`,
             type,
             textinfo: yAxisOpts?.textinfo,
             // hide labels with textinfo = "none", in this case we have to omit texttemplate which would win over this.
@@ -306,6 +338,7 @@ function getData({
             values: y,
             pull: 0.005
         };
+
         /* pie chart is classified colored */
         if (classificationType !== 'default' && classificationColors.length) {
             const legendLabels = classifications.map((item, index) => {
@@ -319,7 +352,7 @@ function getData({
             });
             pieChartTrace = {
                 ...pieChartTrace,
-                labels: legendLabels,
+                labels: renderLabels(legendLabels, y, yAxisOpts),
                 marker: {colors: classificationColors}
             };
             return pieChartTrace;
@@ -328,7 +361,7 @@ function getData({
         return {
             ...(yDataKey && { legendgroup: yDataKey }),
             ...pieChartTrace,
-            labels: x,
+            labels: renderLabels(x, y, yAxisOpts),
             ...(customColorEnabled ? { marker: {colors: x.reduce((acc) => ([...acc, autoColorOptions?.defaultCustomColor || '#0888A1']), [])} } : {})
         };
 
@@ -541,6 +574,7 @@ export const toPlotly = (props) => {
  * @prop {string} [yAxisOpts.format] format for y axis value. See {@link https://d3-wiki.readthedocs.io/zh_CN/master/Formatting/}
  * @prop {string} [yAxisOpts.tickPrefix] the prefix on y value
  * @prop {string} [yAxisOpts.tickSuffix] the suffix of y value.
+ * @prop {boolean} [yAxisOpts.includeLegendPercent] if true, it adds the % on the label legend
  * @prop {string} [formula] a formula to calculate the final value
  * @prop {string} [yAxisLabel] the label of yAxis, to show in the legend
  * @prop {boolean} [cartesian] show the cartesian grid behind the chart

web/client/components/charts/__tests__/WidgetChart-test.js

@@ -27,7 +27,7 @@ import {
     DATASET_WITH_DATES,
     SPLIT_DATASET_4
 } from './sample_data';
-import WidgetChart, { toPlotly, defaultColorGenerator, COLOR_DEFAULTS } from '../WidgetChart';
+import WidgetChart, { toPlotly, defaultColorGenerator, COLOR_DEFAULTS, renderLabels } from '../WidgetChart';
 
 describe('WidgetChart', () => {
     beforeEach((done) => {
@@ -902,4 +902,18 @@ describe('Widget Chart: data conversions ', () => {
             expect(layout.xaxis.tickangle).toEqual('auto');
         });
     });
+    it('renderLabels', () => {
+        const tests = [
+            [["a", "b", "c"], [3, 5, 2], ['a - 30.0%', 'b - 50.0%', 'c - 20.0%']],
+            [["a", "b", "c"], [3, 7], ['a - 30.0%', 'b - 70.0%', 'c']], // handle undefined values
+            [["a", "b", "c"], [3, 7, null], ['a - 30.0%', 'b - 70.0%', 'c']], // handle null values
+            [["a", "b", "c"], [0, 0, 0], ["a", "b", "c"]], // handle 0 sum
+            [["a", "b", "c"], [0, 0, 1], ['a - 0.00%', 'b - 0.00%', 'c - 100%']], // check 100% rendering
+            [["a", "b", "c"], [1, 1, 1], ['a - 33.3%', 'b - 33.3%', 'c - 33.3%']] // check 3 digits rendering
+        ];
+        tests.forEach(([keys, values, expectedPercent]) => {
+            expect(renderLabels(keys, values)).toEqual(keys); // remains the same
+            expect(renderLabels(keys, values, {includeLegendPercent: true})).toEqual(expectedPercent);
+        });
+    });
 });

web/client/components/widgets/builder/wizard/common/PieChartAdvancedOptions.jsx

@@ -44,6 +44,16 @@ function PieChartAdvancedOptions({
                     onChange={(val) => { onChange("yAxisOpts.textinfo", val ? "none" : null); }}
                 />
             </Col>
+            <Col componentClass={ControlLabel} sm={6}>
+                <Message msgId="widgets.advanced.includeLegendPercent" />
+            </Col>
+            <Col sm={6}>
+                <SwitchButton
+                    checked={data?.yAxisOpts?.includeLegendPercent ?? false}
+                    onChange={(val) => { onChange("yAxisOpts.includeLegendPercent", val); }}
+                />
+            </Col>
+
         </FormGroup>
     </SwitchPanel>);
 }

web/client/components/widgets/view/WidgetsView.jsx

@@ -33,7 +33,7 @@ export default pure(({
     widgets = [],
     layouts,
     dependencies,
-    verticalCompact = false,
+    compactType = null,
     compactMode,
     useDefaultWidthProvider = true,
     measureBeforeMount,
@@ -75,7 +75,7 @@ export default pure(({
         // TODO: this prop triggers a deprecation warning
         // we should remove it keeping the current behavior
         // a user should be able to move cards everywhere without force cards on first row
-        verticalCompact={verticalCompact}
+        compactType={compactType}
         compactMode={compactMode}
         breakpoints={breakpoints}
         cols={cols}

web/client/translations/data.de-DE.json

@@ -2161,6 +2161,7 @@
                 "xAxis": "X-Achse",
                 "xAxisAngle": "Beschriftungsdrehung",
                 "hideLabels": "Beschriftung ausblenden",
+                "includeLegendPercent": "Include percentages in legend",
                 "format": "Format",
                 "prefix": "Präfix",
                 "suffix": "Suffix",

web/client/translations/data.en-US.json

@@ -2124,6 +2124,7 @@
               "xAxis": "X axis",
               "xAxisAngle": "Label rotation",
               "hideLabels": "Hide labels",
+              "includeLegendPercent": "Include percentages in legend",
               "format": "Format",
               "prefix": "Prefix",
               "suffix": "Suffix",

web/client/translations/data.es-ES.json

@@ -2124,6 +2124,7 @@
               "xAxis": "Eje X",
               "xAxisAngle": "Rotación de etiquetas",
               "hideLabels": "Ocultar etiquetas",
+              "includeLegendPercent": "Include percentages in legend",
               "format": "Formato",
               "prefix": "Prefijo",
               "suffix": "Sufijo",

web/client/translations/data.fr-FR.json

@@ -2124,6 +2124,7 @@
               "xAxis": "Axe X",
               "xAxisAngle": "Rotation des étiquettes",
               "hideLabels": "Masquer les libellés",
+              "includeLegendPercent": "Include percentages in legend",
               "format": "Format",
               "prefix": "Prefix",
               "suffix": "Suffixe",

web/client/translations/data.it-IT.json

@@ -2125,6 +2125,7 @@
               "xAxis": "Asse X",
               "xAxisAngle": "Rotazione etichetta",
               "hideLabels": "Nascondi etichette",
+              "includeLegendPercent": "Includi percentuali nella legenda",
               "format": "Formato",
               "prefix": "Prefisso",
               "suffix": "Suffisso",