feat: add more widget graph types

package.json

@@ -6,8 +6,12 @@
     "@babel/runtime": "7.13",
     "@blueprintjs/core": "^3.54.0",
     "@blueprintjs/icons": "^3.33.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@mapbox/mapbox-gl-draw": "^1.4.1",
     "@material-ui/lab": "^4.0.0-alpha.61",
+    "@mui/material": "^7.3.6",
+    "@mui/x-charts": "^7.29.1",
     "@sentry/react": "^7.75.1",
     "@terralego/core": "^1.31.4",
     "@terralego/ra-data-drf": "^2.0.1-mkc.0",

public/locales/en/translation.json

@@ -388,31 +388,31 @@
       "error": "Error"
     },
     "tooltip": {
-     "times": "Times",
-     "started": "Started on",
-     "finished": "Finished on",
-     "notStarted": "Not started yet",
-     "notFinished": "Not finished yet",
-     "lines": {
-       "singular": "line",
-       "plural": "lines"
-     },
-     "added": {
-       "singular": "line added",
-       "plural": "lines added"
-     },
-     "modified": {
-       "singular": "line modified",
-       "plural": "lines modified"
-     },
-     "deleted": {
-       "singular": "line deleted",
-       "plural": "lines deleted"
-     },
-     "errors": {
-       "singular": "error",
-       "plural": "errors"
-     }
+      "times": "Times",
+      "started": "Started on",
+      "finished": "Finished on",
+      "notStarted": "Not started yet",
+      "notFinished": "Not finished yet",
+      "lines": {
+        "singular": "line",
+        "plural": "lines"
+      },
+      "added": {
+        "singular": "line added",
+        "plural": "lines added"
+      },
+      "modified": {
+        "singular": "line modified",
+        "plural": "lines modified"
+      },
+      "deleted": {
+        "singular": "line deleted",
+        "plural": "lines deleted"
+      },
+      "errors": {
+        "singular": "error",
+        "plural": "errors"
+      }
     }
   },
   "datalayer": {
@@ -425,7 +425,7 @@
       "data-source": "Data source",
       "definition": "Definition",
       "source-filter": {
-        "label":"Source filter",
+        "label": "Source filter",
         "helper": "You can use an expression to filter the source data. ex: « name == \"john\" and age > 18 »",
         "error": "Your input can't be parsed, please fix it.",
         "error-invalid": "Your input is invalid, see error below.",
@@ -1017,10 +1017,41 @@
       "forcedCaseName": "Layer",
       "widgets-editor": {
         "title": "Widgets configuration",
+        "settings": "Widget settings",
         "json-editor": "JSON editor",
         "label": "Label",
         "type": "Type",
-        "field": "Field",
+        "decimals": "Number of decimal digits",
+        "data": "Data configuration",
+        "description": {
+          "sum": "Total sum of all values in the dataset.",
+          "avg": "Arithmetic mean of the values.",
+          "value_count": "Total number of recorded values.",
+          "distribution": "Statistical distribution graph of values.",
+          "categoric": "Categorical breakdown graph of values.",
+          "numeric": "Graph of numeric values used for quantitative analysis."
+        },
+        "graph": {
+          "title": "Graph configuration",
+          "type": "Graph type",
+          "percent": "Display as percents",
+          "unit": "Unit",
+          "orientation": {
+            "label": "Orientation",
+            "vertical": "Vertical",
+            "horizontal": "Horizontal"
+          },
+          "field": {
+            "categoric": "String category field",
+            "numeric": "Integer fields",
+            "value": "Integer value field"
+          },
+          "aggregation_type": "Aggregation Type"
+        },
+        "field": {
+          "integer": "Integer Field",
+          "string": "String Field"
+        },
         "template": "Template",
         "name": "Name",
         "icon": "Icon",

public/locales/fr/translation.json

@@ -440,31 +440,31 @@
       "error": "Erreur"
     },
     "tooltip": {
-     "times": "Temps",
-     "started": "Commencé le",
-     "finished": "Finit le",
+      "times": "Temps",
+      "started": "Commencé le",
+      "finished": "Finit le",
       "notStarted": "Pas encore commencé",
       "notFinished": "Pas encore fini",
-     "lines": {
-       "singular": "ligne",
-       "plural": "lignes"
-     },
-     "added": {
-       "singular": "ligne ajoutée",
-       "plural": "lignes ajoutées"
-     },
-     "modified": {
-       "singular": "ligne modifiée",
-       "plural": "lignes modifiées"
-     },
-     "deleted": {
-       "singular": "ligne supprimée",
-       "plural": "lignes supprimées"
-     },
-     "errors": {
-       "singular": "erreur",
-       "plural": "erreurs"
-     }
+      "lines": {
+        "singular": "ligne",
+        "plural": "lignes"
+      },
+      "added": {
+        "singular": "ligne ajoutée",
+        "plural": "lignes ajoutées"
+      },
+      "modified": {
+        "singular": "ligne modifiée",
+        "plural": "lignes modifiées"
+      },
+      "deleted": {
+        "singular": "ligne supprimée",
+        "plural": "lignes supprimées"
+      },
+      "errors": {
+        "singular": "erreur",
+        "plural": "erreurs"
+      }
     }
   },
   "datalayer": {
@@ -1071,10 +1071,41 @@
       "forcedCaseName": "Couche",
       "widgets-editor": {
         "title": "Configuration des widgets",
+        "settings": "Paramètres du widget",
         "json-editor": "Éditeur JSON",
         "label": "Label",
         "type": "Type",
-        "field": "Champ",
+        "decimals": "Nombre de chiffres après la virgule",
+        "data": "Configuration des données",
+        "description": {
+          "sum": "Somme totale de toutes les valeurs.",
+          "avg": "Moyenne de toutes les valeurs.",
+          "value_count": "Nombre total d'occurences de la valeur.",
+          "distribution": "Graphique de la distribution statistique des valeurs.",
+          "categoric": "Graphique par catégories des valeurs.",
+          "numeric": "Graphique de valeurs numériques utilisées pour une analyse quantitative."
+        },
+        "graph": {
+          "title": "Configuration du graphique",
+          "type": "Type de graphique",
+          "percent": "Afficher en pourcentage",
+          "unit": "Unité",
+          "orientation": {
+            "label": "Orientation",
+            "vertical": "Vertical",
+            "horizontal": "Horizontal"
+          },
+          "field": {
+            "categoric": "Champ de catégorie textuel",
+            "numeric": "Champs numériques",
+            "value": "Champ de valeur numérique"
+          },
+          "aggregation_type": "Aggregation Type"
+        },
+        "field": {
+          "integer": "Champ numérique",
+          "string": "Champ textuel"
+        },
         "template": "Modèle",
         "name": "Nom",
         "icon": "Icône",

src/modules/RA/DataLayer/components/tabs/WidgetsTab/DataFieldInput.js

@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from 'react';
+
+import { SelectArrayInput, SelectInput, useInput } from 'react-admin';
+
+const DataFieldInput = ({ fields, multiple, ...selectProps }) => {
+  const { input: { value, onChange } } = useInput({ source: selectProps.source });
+  const [lastValue, setLastValue] = useState(value);
+
+
+  useEffect(() => {
+    if (!multiple) {
+      // Reset the value when the field list change and the current value is not present in it
+      if (value !== '' && !fields.find(f => f.name === value)) {
+        setLastValue(value);
+        onChange('');
+        // Use the last valid value if there is no current value and the field list changed
+      } else if (value === '' && fields.find(f => f.name === lastValue)) {
+        onChange(lastValue);
+      }
+    }
+  }, [fields, lastValue, onChange, value, multiple]);
+
+  if (multiple) {
+    return (
+      <SelectArrayInput
+        {...selectProps}
+        choices={fields.map(f => ({ id: f.name, name: f.label && f.label !== f.name ? `${f.name} (${f.label})` : f.name }))}
+        style={{ minWidth: 200, maxWidth: 500, ...selectProps.style }}
+      />
+    );
+  }
+
+  return (
+    <SelectInput
+      {...selectProps}
+      choices={fields.map(f => ({ id: f.name, name: f.label && f.label !== f.name ? `${f.name} (${f.label})` : f.name }))}
+      style={{ minWidth: 200, ...selectProps.style }}
+    />
+  );
+};
+
+export default DataFieldInput;

src/modules/RA/DataLayer/components/tabs/WidgetsTab/WidgetDetails/DataSettingsTitle.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Divider, Typography } from '@material-ui/core';
+import { useTranslate } from 'ra-core';
+
+function DataSettingsTitle () {
+  const translate = useTranslate();
+  return (
+    <>
+      <Divider />
+      <Typography>{translate('resources.datalayer.widgets-editor.data')}</Typography>
+    </>
+  );
+}
+
+export default DataSettingsTitle;

src/modules/RA/DataLayer/components/tabs/WidgetsTab/WidgetDetails/GraphSettingsTitle.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { Divider, Typography } from '@material-ui/core';
+import { useTranslate } from 'ra-core';
+
+function GraphSettingsTitle () {
+  const translate = useTranslate();
+  return (
+    <>
+      <Divider />
+      <Typography>{translate('resources.datalayer.widgets-editor.graph.title')}</Typography>
+    </>
+  );
+}
+
+export default GraphSettingsTitle;

src/modules/RA/DataLayer/components/tabs/WidgetsTab/WidgetDetails/GraphTypeInputs.js

@@ -0,0 +1,52 @@
+import { useInput } from 'ra-core';
+import React from 'react';
+import { SelectInput } from 'react-admin';
+
+const AVAILABLE_GRAPHS = [
+  { id: 'bars', name: 'Bars' },
+  { id: 'stacked-bars', name: 'Stacked Bars' },
+  { id: 'pie', name: 'Pie' },
+];
+
+function GraphTypeInputs ({ source }) {
+  const {
+    input: { value: graphTypeValue },
+  } = useInput({ source: `${source}.graph.type` });
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '1em',
+      }}
+    >
+      <SelectInput
+        required
+        source={`${source}.graph.type`}
+        label="resources.datalayer.widgets-editor.graph.type"
+        choices={AVAILABLE_GRAPHS}
+        defaultValue="bar"
+        translateChoice={false}
+        helperText={false}
+        style={{ flex: 1 }}
+      />
+      {graphTypeValue !== 'pie' && (
+        <SelectInput
+          required
+          source={`${source}.graph.orientation`}
+          label="resources.datalayer.widgets-editor.graph.orientation.label"
+          choices={[
+            { id: 'vertical', name: 'resources.datalayer.widgets-editor.graph.orientation.vertical' },
+            { id: 'horizontal', name: 'resources.datalayer.widgets-editor.graph.orientation.horizontal' },
+          ]}
+          defaultValue="vertical"
+          helperText={false}
+          style={{ flex: 1 }}
+        />
+      )}
+    </div>
+  );
+}
+
+export default GraphTypeInputs;

src/modules/RA/DataLayer/components/tabs/WidgetsTab/WidgetDetails/UnitsInputs.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { BooleanInput, TextInput, useInput } from 'react-admin';
+
+function UnitsInputs ({ source }) {
+  const {
+    input: { value: percentValue },
+  } = useInput({ source: `${source}.graph.percent` });
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '1em',
+        alignItems: 'center',
+      }}
+    >
+      <BooleanInput
+        label="resources.datalayer.widgets-editor.graph.percent"
+        source={`${source}.graph.percent`}
+        style={{ flex: 1 }}
+      />
+      {!percentValue && (
+        <TextInput
+          label="resources.datalayer.widgets-editor.graph.unit"
+          source={`${source}.graph.unit`}
+          style={{ flex: 1 }}
+        />
+      )}
+    </div>
+  );
+}
+
+export default UnitsInputs;