Fix geosolutions-it#9617 legends with percent for pie chart

MV88 · Oct 17, 2023 · 51d7dab · 51d7dab
1 parent 3d96f19
commit 51d7dab
Show file tree

Hide file tree

Showing 8 changed files with 24 additions and 5 deletions.
diff --git a/web/client/components/charts/WidgetChart.jsx b/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 {round, every, includes, isNumber, isString, union, orderBy, flatten} from 'lodash';
 
 import LoadingView from '../misc/LoadingView';
 import { sameToneRangeColors } from '../../utils/ColorUtils';
@@ -306,6 +306,9 @@ function getData({
  values: y,
  pull: 0.005
  };
+ const total = y.reduce((p, c) => {
+ return p + c;
+ }, 0);
  /* pie chart is classified colored */
  if (classificationType !== 'default' && classificationColors.length) {
  const legendLabels = classifications.map((item, index) => {
@@ -319,7 +322,7 @@ function getData({
  });
  pieChartTrace = {
  ...pieChartTrace,
- labels: legendLabels,
+ labels: !yAxisOpts?.includeLegendPercent ? legendLabels : legendLabels.map((v, i) => v + " - " + round(y[i] / total, 2) + " %"),
  marker: {colors: classificationColors}
  };
  return pieChartTrace;
@@ -328,7 +331,7 @@ function getData({
  return {
  ...(yDataKey && { legendgroup: yDataKey }),
  ...pieChartTrace,
- labels: x,
+ labels: !yAxisOpts?.includeLegendPercent ? x : x.map((v, i) => v + " - " + round(y[i] / total * 100, 2) + "%"),
  ...(customColorEnabled ? { marker: {colors: x.reduce((acc) => ([...acc, autoColorOptions?.defaultCustomColor || '#0888A1']), [])} } : {})
  };
 
@@ -541,6 +544,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

diff --git a/web/client/components/widgets/builder/wizard/common/PieChartAdvancedOptions.jsx b/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?.includeLegendPercent ?? false}
+ onChange={(val) => { onChange("yAxisOpts.includeLegendPercent", val); }}
+ />
+ </Col>
+
  </FormGroup>
  </SwitchPanel>);
 }

diff --git a/web/client/components/widgets/view/WidgetsView.jsx b/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}

diff --git a/web/client/translations/data.de-DE.json b/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",

diff --git a/web/client/translations/data.en-US.json b/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",

diff --git a/web/client/translations/data.es-ES.json b/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",

diff --git a/web/client/translations/data.fr-FR.json b/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",

diff --git a/web/client/translations/data.it-IT.json b/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",