From 8a7a48488736535f3507b7dbbf1b01e8c750ae48 Mon Sep 17 00:00:00 2001 From: Terdious Date: Thu, 5 Sep 2024 16:13:22 +0200 Subject: [PATCH 1/6] chore: Update EditChart component to include device features threshold options --- front/src/components/boxs/chart/EditChart.jsx | 71 ++++++++++++++++++- 1 file changed, 69 insertions(+), 2 deletions(-) diff --git a/front/src/components/boxs/chart/EditChart.jsx b/front/src/components/boxs/chart/EditChart.jsx index d0877178b7..66ced2231a 100644 --- a/front/src/components/boxs/chart/EditChart.jsx +++ b/front/src/components/boxs/chart/EditChart.jsx @@ -133,28 +133,63 @@ class EditChart extends Component { this.setState({ selectedDeviceFeaturesOptions }); }; + updateDeviceFeaturesTreshold = selectedDeviceFeaturesTresholdOptions => { + if (selectedDeviceFeaturesTresholdOptions && selectedDeviceFeaturesTresholdOptions.length > 0) { + const deviceFeaturesSelectors = selectedDeviceFeaturesTresholdOptions.map( + selectedDeviceFeaturesOption => selectedDeviceFeaturesOption.value + ); + const units = selectedDeviceFeaturesTresholdOptions.map(selectedDeviceFeaturesOption => { + const deviceFeature = this.deviceFeatureBySelector.get(selectedDeviceFeaturesOption.value); + return deviceFeature.unit; + }); + this.props.updateBoxConfig(this.props.x, this.props.y, { + device_features_treshold: deviceFeaturesSelectors, + units, + unit: undefined + }); + } else { + this.props.updateBoxConfig(this.props.x, this.props.y, { + device_features_treshold: [], + units: [], + unit: undefined + }); + } + this.setState({ selectedDeviceFeaturesTresholdOptions }); + }; + getDeviceFeatures = async () => { try { this.setState({ loading: true }); const devices = await this.props.httpClient.get('/api/v1/device'); const deviceOptions = []; + const deviceThresholdOptions = []; const selectedDeviceFeaturesOptions = []; + const selectedDeviceFeaturesTresholdOptions = []; devices.forEach(device => { const deviceFeaturesOptions = []; + const deviceFeaturesTresholdOptions = []; device.features.forEach(feature => { const featureOption = { value: feature.selector, label: getDeviceFeatureName(this.props.intl.dictionary, device, feature) }; + const featureOptionTreshold = { + value: feature.selector, + label: getDeviceFeatureName(this.props.intl.dictionary, device, feature) + }; this.deviceFeatureBySelector.set(feature.selector, feature); // We don't support all devices for this view if (!FEATURES_THAT_ARE_NOT_COMPATIBLE[feature.type]) { deviceFeaturesOptions.push(featureOption); + deviceFeaturesTresholdOptions.push(featureOptionTreshold); } if (this.props.box.device_features && this.props.box.device_features.indexOf(feature.selector) !== -1) { selectedDeviceFeaturesOptions.push(featureOption); } + if (this.props.box.device_features_treshold && this.props.box.device_features_treshold.indexOf(feature.selector) !== -1) { + selectedDeviceFeaturesTresholdOptions.push(featureOptionTreshold); + } }); if (deviceFeaturesOptions.length > 0) { deviceFeaturesOptions.sort((a, b) => { @@ -170,8 +205,22 @@ class EditChart extends Component { options: deviceFeaturesOptions }); } + if (deviceFeaturesTresholdOptions.length > 0) { + deviceFeaturesTresholdOptions.sort((a, b) => { + if (a.label < b.label) { + return -1; + } else if (a.label > b.label) { + return 1; + } + return 0; + }); + deviceThresholdOptions.push({ + label: device.name, + options: deviceFeaturesTresholdOptions + }); + } }); - await this.setState({ deviceOptions, selectedDeviceFeaturesOptions, loading: false }); + await this.setState({ deviceOptions, selectedDeviceFeaturesOptions, deviceThresholdOptions, selectedDeviceFeaturesTresholdOptions, loading: false }); } catch (e) { console.error(e); this.setState({ loading: false }); @@ -196,12 +245,16 @@ class EditChart extends Component { } } - render(props, { selectedDeviceFeaturesOptions, deviceOptions, loading, displayPreview }) { + render(props, { selectedDeviceFeaturesOptions, selectedDeviceFeaturesTresholdOptions, deviceOptions, deviceThresholdOptions, 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] })); + console.log(deviceThresholdOptions); + console.log(selectedDeviceFeaturesTresholdOptions); + console.log("this", this); + console.log("props", props); return (
@@ -259,6 +312,20 @@ class EditChart extends Component {
+ {deviceThresholdOptions && ( +
+ +
- {deviceThresholdOptions && ( -
- -
+ {deviceThresholdOptions && ( +
+ +
+ updateManualThresholdDetail(index, 'name', e.target.value)} + /> +
+
+
+
+ + updateManualThresholdDetail(index, 'value', e.target.value)} + /> +
+
+ +
+
+
+ + +
+
+
+
+ + updateManualThresholdDetail(index, 'name', e.target.value)} - /> + deleteManualThreshold, + closeFlyout +}) => { + const isManualMoreOrLess = manualThresholdDetail.more_or_less === 'manual'; + const isWithoutMoreOrLess = !manualThresholdDetail.more_or_less || manualThresholdDetail.more_or_less === 'without'; + return ( +
+ +
+
+
+ + updateManualThresholdDetail(index, 'name', e.target.value)} + /> +
+
+
+
+ + updateManualThresholdDetail(index, 'value', e.target.value)} + /> +
-
-
- - updateManualThresholdDetail(index, 'value', e.target.value)} - /> +
+
+
+ + +
+
+
+ {!isWithoutMoreOrLess && ( +
+ + updateManualThresholdDetail(index, 'value_more_or_less', e.target.value)} + /> +
+ )}
-
-
-
-
- - +
+
+
+ + +
+
+
+
+ + value === DEFAULT_COLORS)} - value={ - manualThresholdDetail && - manualThresholdDetail.color && - colorOptions.find(({ value }) => value === manualThresholdDetail.color) - } - onChange={({ value }) => updateManualThresholdDetail(index, 'color', value)} - options={colorOptions} - styles={colorSelectorStyles} - /> +
+
+ +
+
+
- -
-); + ); +}; export default ManualThresholdForm; diff --git a/front/src/components/boxs/chart/style.css b/front/src/components/boxs/chart/style.css index 6d016a59da..7006709222 100644 --- a/front/src/components/boxs/chart/style.css +++ b/front/src/components/boxs/chart/style.css @@ -139,4 +139,10 @@ padding: 15px; top: 10px; left: 0px; -} \ No newline at end of file + font-size: smaller; +} +.detailItem { + border-bottom: 1px solid #ccc; + margin-bottom: 10px; + padding-bottom: 10px; +} diff --git a/front/src/config/i18n/fr.json b/front/src/config/i18n/fr.json index 6874212e76..b06d888ba0 100644 --- a/front/src/config/i18n/fr.json +++ b/front/src/config/i18n/fr.json @@ -357,12 +357,34 @@ "editDeviceFeaturesLabel": "Sélectionnez les appareils que vous voulez afficher", "editDeviceFeaturesTresholdLabel": "Sélectionnez les valeurs seuils que vous souhaitez afficher sur la courbe", "editDeviceFeaturesTresholdManualLabel": "Ajouter une valeur seuil manuelle", + "editManualThresholdLabel": "Configurer une valeur seuil manuelle.", + "editManualThresholdDescription": "- Par exemple, une valeur manuelle sans seuil pour une température de 20°C.", + "editManualThresholdDescription2": "- Une valeur avec un seuil large pour une température de 20°C de + ou - 1°C (Zone de 19 à 21°C).", + "editManualThresholdDescription3": "- Une valeur manuelle pour une température mini de 20°C et maxi de 25°C.", "editTreshold": { + "validateButton": "Valider", + "configureButton": "Modifier", "nameLabel": "Nom", "valueLabel": "Valeur", + "valueMoreOrLessLabel": "Valeur base", + "valueManualLabel": "Valeur min", + "valueManualDescription": "Vous pouvez définir une valeur min et max pour définir un seuil personnalisé.", + "maxValueMoreOrLessLabel": "Valeur seuil large", + "maxValueManualDescription": "La valeur sera ajoutée à la valeur base.", + "maxValueManualLabel": "Valeur max", "unitLabel": "Unité", "colorLabel": "Couleur", - "deleteButton": "Supprimer" + "deleteButton": "Supprimer", + "moreOrLessLabel": "Seuil large", + "maxValueLabel": "Valeur max", + "moreOrLessValueLabel": "Valeur min", + "moreOrLess": { + "without": "Sans", + "more": "+", + "less": "-", + "moreOrLess": "+ ou -", + "manual": "Manuel" + } }, "editRoomLabel": "Sélectionnez une pièce", "chartType": "Sélectionner le type de graphique", diff --git a/server/models/dashboard.js b/server/models/dashboard.js index 1b8b08d7ee..a47998a4ca 100644 --- a/server/models/dashboard.js +++ b/server/models/dashboard.js @@ -19,10 +19,15 @@ const boxesSchema = Joi.array().items( device_features_treshold: Joi.array().items(Joi.string()), manual_features_treshold_details: Joi.array().items( Joi.object().keys({ - name: Joi.string().allow(null), - value: Joi.number().allow(null), + name: Joi.string(), + value: Joi.number(), + value_more_or_less: Joi.number().allow(null), + min: Joi.number().allow(null), + max: Joi.number().allow(null), unit: Joi.string().allow(''), - color: Joi.string().allow('') + color: Joi.string().allow(''), + fill_color: Joi.string().allow(null), + more_or_less: Joi.string().valid('without', 'more', 'less', 'moreOrLess', 'manual'), }), ), device_feature: Joi.string(), From b56bb92031e0d8c2bf855a6fce1174692062b350 Mon Sep 17 00:00:00 2001 From: Terdious Date: Fri, 11 Oct 2024 10:18:12 +0200 Subject: [PATCH 4/6] fix: Handle empty deviceFeaturesTreshold in Chart.jsx --- front/src/components/boxs/chart/Chart.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/front/src/components/boxs/chart/Chart.jsx b/front/src/components/boxs/chart/Chart.jsx index a0a7aacd81..b1bc69a499 100644 --- a/front/src/components/boxs/chart/Chart.jsx +++ b/front/src/components/boxs/chart/Chart.jsx @@ -259,8 +259,8 @@ class Chartbox extends Component { } catch (e) { console.error(e); } - - if (deviceFeaturesTreshold.length === 0) { + console.log('deviceFeaturesTreshold', deviceFeaturesTreshold); + if (!deviceFeaturesTreshold || deviceFeaturesTreshold.length === 0) { await this.setState({ loading: false }); return; } From ef88f985b972047cec0b750ad86cebaff23dd905 Mon Sep 17 00:00:00 2001 From: Terdious Date: Sat, 12 Oct 2024 08:42:46 +0200 Subject: [PATCH 5/6] chore: Refactor Chart.jsx to improve code readability and remove unused code --- front/src/components/boxs/chart/Chart.jsx | 86 +---------------------- 1 file changed, 2 insertions(+), 84 deletions(-) diff --git a/front/src/components/boxs/chart/Chart.jsx b/front/src/components/boxs/chart/Chart.jsx index c8541fdcce..6ddc941b91 100644 --- a/front/src/components/boxs/chart/Chart.jsx +++ b/front/src/components/boxs/chart/Chart.jsx @@ -562,6 +562,8 @@ class Chartbox extends Component {
)} -
0 && !variationDownIsPositive) || (variation < 0 && variationDownIsPositive), - [style.textYellow]: variation === 0, - [style.textRed]: - (variation > 0 && variationDownIsPositive) || (variation < 0 && !variationDownIsPositive) - })} - > - {variation !== undefined && ( - - {roundWith2DecimalIfNeeded(variation)} - - {variation > 0 && ( - - - - - - )} - {variation === 0 && ( - - - - - )} - {variation < 0 && ( - - - - - - )} - - )} -
-
- )} - {emptySeries === false && props.box.display_axes && ( -
-
)}
From b9c81d46c403dfb8522b52a374541970d328afd3 Mon Sep 17 00:00:00 2001 From: Terdious Date: Fri, 25 Oct 2024 12:43:41 +0200 Subject: [PATCH 6/6] chore: Adjust height dynamically based on number of features in ApexChartComponent --- front/src/components/boxs/chart/ApexChartComponent.jsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/front/src/components/boxs/chart/ApexChartComponent.jsx b/front/src/components/boxs/chart/ApexChartComponent.jsx index c08dedae14..9a74043f19 100644 --- a/front/src/components/boxs/chart/ApexChartComponent.jsx +++ b/front/src/components/boxs/chart/ApexChartComponent.jsx @@ -141,8 +141,10 @@ class ApexChartComponent extends Component { } else if (this.props.size === 'big' && !this.props.display_axes) { height = 80; } else { + console.log('height this.props', this.props); height = 200 + this.props.additionalHeight; } + console.log('height', height); let seriesAnnotationsYaxis = []; let seriesPoints = []; console.log('this.props', this.props);