Dashboard: Customize chart colors (#2045)

GladysAssistant · Apr 1, 2024 · 9109e8a · 9109e8a
1 parent c7df2f2
commit 9109e8a
Show file tree

Hide file tree

Showing 12 changed files with 154 additions and 31 deletions.
diff --git a/front/src/components/boxs/chart/ApexChartAreaOptions.js b/front/src/components/boxs/chart/ApexChartAreaOptions.js
@@ -1,4 +1,4 @@
-const getApexChartAreaOptions = ({ displayAxes, height, series, COLORS, locales, defaultLocale }) => {
+const getApexChartAreaOptions = ({ displayAxes, height, series, colors, locales, defaultLocale }) => {
   const options = {
     chart: {
       locales,
@@ -54,7 +54,7 @@ const getApexChartAreaOptions = ({ displayAxes, height, series, COLORS, locales,
         padding: 4
       }
     },
-    colors: COLORS,
+    colors,
     legend: {
       show: displayAxes,
       position: 'bottom'

diff --git a/front/src/components/boxs/chart/ApexChartBarOptions.js b/front/src/components/boxs/chart/ApexChartBarOptions.js
@@ -1,4 +1,4 @@
-const getApexChartBarOptions = ({ displayAxes, series, COLORS, locales, defaultLocale }) => {
+const getApexChartBarOptions = ({ displayAxes, series, colors, locales, defaultLocale }) => {
   const options = {
     chart: {
       locales,
@@ -62,7 +62,7 @@ const getApexChartBarOptions = ({ displayAxes, series, COLORS, locales, defaultL
         padding: 4
       }
     },
-    colors: COLORS,
+    colors,
     legend: {
       show: displayAxes,
       position: 'bottom'

diff --git a/front/src/components/boxs/chart/ApexChartComponent.jsx b/front/src/components/boxs/chart/ApexChartComponent.jsx
@@ -11,10 +11,22 @@ import { getApexChartBarOptions } from './ApexChartBarOptions';
 import { getApexChartAreaOptions } from './ApexChartAreaOptions';
 import { getApexChartLineOptions } from './ApexChartLineOptions';
 import { getApexChartStepLineOptions } from './ApexChartStepLineOptions';
+import mergeArray from '../../../utils/mergeArray';
 
 dayjs.extend(localizedFormat);
 
-const COLORS = ['#206bc4', '#FF7878', '#E0C097', '#F7D59C'];
+const DEFAULT_COLORS = [
+  '#316cbe',
+  '#d63031',
+  '#00b894',
+  '#fdcb6e',
+  '#6c5ce7',
+  '#00cec9',
+  '#e84393',
+  '#e17055',
+  '#636e72'
+];
+const DEFAULT_COLORS_NAME = ['blue', 'red', 'green', 'yellow', 'purple', 'aqua', 'pink', 'orange', 'grey'];
 
 class ApexChartComponent extends Component {
   chartRef = createRef();
@@ -43,7 +55,7 @@ class ApexChartComponent extends Component {
     const options = getApexChartBarOptions({
       displayAxes: this.props.display_axes,
       series: this.props.series,
-      COLORS,
+      colors: mergeArray(this.props.colors, DEFAULT_COLORS),
       locales: [fr, en, de],
       defaultLocale: this.props.user.language
     });
@@ -63,7 +75,7 @@ class ApexChartComponent extends Component {
       height,
       series: this.props.series,
       displayAxes: this.props.display_axes,
-      COLORS,
+      colors: mergeArray(this.props.colors, DEFAULT_COLORS),
       locales: [fr, en, de],
       defaultLocale: this.props.user.language
     });
@@ -82,7 +94,7 @@ class ApexChartComponent extends Component {
     }
     const options = getApexChartLineOptions({
       height,
-      COLORS,
+      colors: mergeArray(this.props.colors, DEFAULT_COLORS),
       displayAxes: this.props.display_axes,
       series: this.props.series,
       locales: [fr, en, de],
@@ -102,7 +114,7 @@ class ApexChartComponent extends Component {
     }
     const options = getApexChartStepLineOptions({
       height,
-      COLORS,
+      colors: mergeArray(this.props.colors, DEFAULT_COLORS),
       displayAxes: this.props.display_axes,
       series: this.props.series,
       locales: [fr, en, de],
@@ -155,3 +167,5 @@ class ApexChartComponent extends Component {
 }
 
 export default ApexChartComponent;
+
+export { DEFAULT_COLORS, DEFAULT_COLORS_NAME };
diff --git a/front/src/components/boxs/chart/ApexChartLineOptions.js b/front/src/components/boxs/chart/ApexChartLineOptions.js
@@ -1,4 +1,4 @@
-const getApexChartLineOptions = ({ height, displayAxes, series, COLORS, locales, defaultLocale }) => {
+const getApexChartLineOptions = ({ height, displayAxes, series, colors, locales, defaultLocale }) => {
   const options = {
     chart: {
       locales,
@@ -53,7 +53,7 @@ const getApexChartLineOptions = ({ height, displayAxes, series, COLORS, locales,
         padding: 4
       }
     },
-    colors: COLORS,
+    colors,
     legend: {
       show: displayAxes,
       position: 'bottom'

diff --git a/front/src/components/boxs/chart/ApexChartStepLineOptions.js b/front/src/components/boxs/chart/ApexChartStepLineOptions.js
@@ -1,4 +1,4 @@
-const getApexChartStepLineOptions = ({ height, displayAxes, series, COLORS, locales, defaultLocale }) => {
+const getApexChartStepLineOptions = ({ height, displayAxes, series, colors, locales, defaultLocale }) => {
   const options = {
     chart: {
       locales,
@@ -52,7 +52,7 @@ const getApexChartStepLineOptions = ({ height, displayAxes, series, COLORS, loca
         padding: 4
       }
     },
-    colors: COLORS,
+    colors,
     legend: {
       show: displayAxes,
       position: 'bottom'

diff --git a/front/src/components/boxs/chart/Chart.jsx b/front/src/components/boxs/chart/Chart.jsx
@@ -441,6 +441,7 @@ class Chartbox extends Component {
                 size="big"
                 chart_type={props.box.chart_type}
                 display_axes={props.box.display_axes}
+                colors={props.box.colors}
               />
             </div>
           )}
@@ -477,6 +478,7 @@ class Chartbox extends Component {
                 size="big"
                 chart_type={props.box.chart_type}
                 display_axes={props.box.display_axes}
+                colors={props.box.colors}
               />
             )}
           </div>

diff --git a/front/src/components/boxs/chart/EditChart.jsx b/front/src/components/boxs/chart/EditChart.jsx
@@ -9,6 +9,7 @@ import Chart from './Chart';
 import { getDeviceFeatureName } from '../../../utils/device';
 import { DEVICE_FEATURE_TYPES } from '../../../../../server/utils/constants';
 import withIntlAsProp from '../../../utils/withIntlAsProp';
+import { DEFAULT_COLORS, DEFAULT_COLORS_NAME } from './ApexChartComponent';
 
 const FEATURES_THAT_ARE_NOT_COMPATIBLE = {
   [DEVICE_FEATURE_TYPES.LIGHT.BINARY]: true,
@@ -17,6 +18,41 @@ const FEATURES_THAT_ARE_NOT_COMPATIBLE = {
   [DEVICE_FEATURE_TYPES.CAMERA.IMAGE]: true
 };
 
+const square = (color = 'transparent') => ({
+  alignItems: 'center',
+  display: 'flex',
+
+  ':before': {
+    backgroundColor: color,
+    content: '" "',
+    display: 'block',
+    marginRight: 8,
+    height: 10,
+    width: 10
+  }
+});
+
+const colorSelectorStyles = {
+  control: styles => ({ ...styles, backgroundColor: 'white' }),
+  option: (styles, { data, isDisabled, isFocused, isSelected }) => {
+    const { value: color } = data;
+    return {
+      ...styles,
+      backgroundColor: isDisabled ? undefined : isSelected ? color : isFocused ? color : undefined,
+      color: isDisabled ? '#ccc' : isSelected ? 'white' : isFocused ? 'white' : color,
+      cursor: isDisabled ? 'not-allowed' : 'default',
+
+      ':active': {
+        ...styles[':active'],
+        backgroundColor: !isDisabled ? color : undefined
+      }
+    };
+  },
+  input: styles => ({ ...styles, ...square() }),
+  placeholder: styles => ({ ...styles, ...square('#ccc') }),
+  singleValue: (styles, { data }) => ({ ...styles, ...square(data.value) })
+};
+
 class EditChart extends Component {
   showPreview = () => {
     this.setState({
@@ -40,6 +76,17 @@ class EditChart extends Component {
     }
   };
 
+  updateChartColor = (i, value) => {
+    const colors = this.props.box.colors || [];
+    if (value) {
+      colors[i] = value;
+    } else {
+      colors[i] = null;
+    }
+    const atLeastOneColor = colors.some(Boolean);
+    this.props.updateBoxConfig(this.props.x, this.props.y, { colors: atLeastOneColor ? colors : undefined });
+  };
+
   updateDisplayAxes = e => {
     if (e.target.value && e.target.value.length) {
       const valueBoolean = e.target.value === 'yes';
@@ -150,6 +197,11 @@ class EditChart extends Component {
   }
 
   render(props, { selectedDeviceFeaturesOptions, deviceOptions, loading, displayPreview }) {
+    const manyFeatures = selectedDeviceFeaturesOptions && selectedDeviceFeaturesOptions.length > 1;
+    const colorOptions = DEFAULT_COLORS.map((colorValue, i) => ({
+      value: colorValue,
+      label: props.intl.dictionary.color[DEFAULT_COLORS_NAME[i]] || DEFAULT_COLORS_NAME[i]
+    }));
     return (
       <BaseEditBox {...props} titleKey="dashboard.boxTitle.chart" titleValue={props.box.title}>
         <div class={loading ? 'dimmer active' : 'dimmer'}>
@@ -207,6 +259,28 @@ class EditChart extends Component {
                 </option>
               </select>
             </div>
+            {selectedDeviceFeaturesOptions &&
+              selectedDeviceFeaturesOptions.map((feature, i) => (
+                <div class="form-group">
+                  <label>
+                    <Text
+                      id={`dashboard.boxes.chart.${manyFeatures ? 'dataColor' : 'chartColor'}`}
+                      fields={{ featureLabel: feature && feature.label }}
+                    />
+                  </label>
+                  <Select
+                    defaultValue={colorOptions.find(({ value }) => value === DEFAULT_COLORS[i])}
+                    value={
+                      props.box.colors &&
+                      props.box.colors.length &&
+                      colorOptions.find(({ value }) => value === props.box.colors[i])
+                    }
+                    onChange={({ value }) => this.updateChartColor(i, value)}
+                    options={colorOptions}
+                    styles={colorSelectorStyles}
+                  />
+                </div>
+              ))}
             <div class="form-group">
               <label>
                 <Text id="dashboard.boxes.chart.displayAxes" />

diff --git a/front/src/config/i18n/de.json b/front/src/config/i18n/de.json
@@ -21,12 +21,16 @@
     "selectPlaceholder": "Auswählen …"
   },
   "color": {
+    "aqua": "Aqua",
+    "black": "Schwarz",
     "blue": "Blau",
-    "red": "Rot",
     "green": "Grün",
-    "black": "Schwarz",
-    "yellow": "Gelb",
-    "purple": "Lila"
+    "grey": "Grau",
+    "orange": "Orange",
+    "pink": "Rosa",
+    "purple": "Lila",
+    "red": "Rot",
+    "yellow": "Gelb"
   },
   "calendar": {
     "allDay": "Ganztägig",
@@ -342,6 +346,8 @@
         "editRoomLabel": "Wähle den Raum aus, der hier angezeigt werden soll",
         "editNamePlaceholder": "Name auf dem Dashboard angezeigt",
         "chartType": "Wähle den Diagrammtyp aus, der angezeigt werden soll",
+        "chartColor": "Wählen Sie die Farbe des Diagramms aus",
+        "dataColor": "Wählen Sie die Farbe für {{featureLabel}}",
         "line": "Linie",
         "area": "Fläche",
         "bar": "Balken",

diff --git a/front/src/config/i18n/en.json b/front/src/config/i18n/en.json
@@ -21,12 +21,16 @@
     "selectPlaceholder": "Select..."
   },
   "color": {
+    "aqua": "Aqua",
+    "black": "Black",
     "blue": "Blue",
-    "red": "Red",
     "green": "Green",
-    "black": "Black",
-    "yellow": "Yellow",
-    "purple": "Purple"
+    "grey": "Grey",
+    "orange": "Orange",
+    "pink": "Pink",
+    "purple": "Purple",
+    "red": "Red",
+    "yellow": "Yellow"
   },
   "calendar": {
     "allDay": "All Day",
@@ -342,6 +346,8 @@
         "editRoomLabel": "Select the room you want to display here",
         "editNamePlaceholder": "Name displayed on the dashboard",
         "chartType": "Select the type of chart to display",
+        "chartColor": "Select the color of chart",
+        "dataColor": "Select color for {{featureLabel}}",
         "line": "Line",
         "area": "Area",
         "bar": "Bar",
@@ -762,7 +768,6 @@
       "description": "Control your devices with Node-RED.",
       "setupTab": "Setup",
       "documentation": "Node-RED documentation",
-
       "status": {
         "notInstalled": "Node-RED server failed to install.",
         "notRunning": "Node-RED server failed to start.",
@@ -792,7 +797,6 @@
         "urlLabel": "Node-RED interface url: <a href=\"{{nodeRedUrl}}\" target=\"_blank\">{{nodeRedUrl}}</a> (Not accessible from Gladys Plus)"
       }
     },
-
     "googleHome": {
       "title": "Google Home",
       "documentation": "Google Home documentation",

diff --git a/front/src/config/i18n/fr.json b/front/src/config/i18n/fr.json
@@ -21,12 +21,16 @@
     "selectPlaceholder": "Sélectionnez..."
   },
   "color": {
+    "aqua": "Aqua",
+    "black": "Noir",
     "blue": "Bleu",
-    "red": "Rouge",
     "green": "Vert",
-    "black": "Noir",
-    "yellow": "Jaune",
-    "purple": "Violet"
+    "grey": "Gris",
+    "orange": "Orange",
+    "pink": "Rose",
+    "purple": "Violet",
+    "red": "Rouge",
+    "yellow": "Jaune"
   },
   "calendar": {
     "allDay": "Toute la journée",
@@ -342,6 +346,8 @@
         "editDeviceFeaturesLabel": "Sélectionnez les appareils que vous voulez afficher",
         "editRoomLabel": "Sélectionnez une pièce",
         "chartType": "Sélectionner le type de graphique",
+        "chartColor": "Sélectionner la couleur du graphique",
+        "dataColor": "Sélectionner la couleur pour {{featureLabel}}",
         "line": "Ligne",
         "area": "Aire",
         "bar": "Histogramme",
@@ -919,7 +925,6 @@
         "urlLabel": "Url de l'interface Node-RED : <a href=\"{{nodeRedUrl}}\" target=\"_blank\">{{nodeRedUrl}}</a> (Pas accessible depuis Gladys Plus)"
       }
     },
-
     "googleHome": {
       "title": "Google Home",
       "documentation": "Documentation Google Home",
@@ -1115,7 +1120,6 @@
         "connected": "Connexion réussie au compte cloud Tuya !",
         "connectionError": "Erreur lors de la connexion, veuillez vérifier votre configuration."
       },
-
       "error": {
         "defaultError": "Une erreur s'est produite lors de l'enregistrement de l'appareil.",
         "defaultDeletionError": "Une erreur s'est produite lors de la suppression de l'appareil.",
@@ -1151,7 +1155,6 @@
         "errorWhileScanning": "Une erreur est survenue lors du scan.",
         "scan": "Scanner"
       },
-
       "error": {
         "defaultError": "Une erreur s'est produite lors de l'enregistrement de l'appareil.",
         "defaultDeletionError": "Une erreur s'est produite lors de la suppression de l'appareil.",
@@ -1265,7 +1268,6 @@
         "connected": "Connexion réussie au compte cloud MELCloud !",
         "connectionError": "Erreur lors de la connexion, veuillez vérifier votre configuration."
       },
-
       "error": {
         "defaultError": "Une erreur s'est produite lors de l'enregistrement de l'appareil.",
         "defaultDeletionError": "Une erreur s'est produite lors de la suppression de l'appareil.",