From 1f5bc021d8e30c5d54dacbb47f0dbe8e3dd26d06 Mon Sep 17 00:00:00 2001 From: Pierre-Gilles Leymarie Date: Thu, 23 Jan 2025 14:33:31 +0100 Subject: [PATCH 01/10] Chart: Improve min, max & step on yAxis --- .../boxs/chart/ApexChartComponent.jsx | 32 +++++++++++++++++++ .../boxs/chart/ApexChartLineOptions.js | 5 ++- 2 files changed, 36 insertions(+), 1 deletion(-) diff --git a/front/src/components/boxs/chart/ApexChartComponent.jsx b/front/src/components/boxs/chart/ApexChartComponent.jsx index f4d96144ee..439fa59fd0 100644 --- a/front/src/components/boxs/chart/ApexChartComponent.jsx +++ b/front/src/components/boxs/chart/ApexChartComponent.jsx @@ -31,6 +31,33 @@ const DEFAULT_COLORS_NAME = ['blue', 'red', 'green', 'yellow', 'purple', 'aqua', class ApexChartComponent extends Component { chartRef = createRef(); + calculateYAxisRange = () => { + const { series } = this.props; + // Extract all values from all series + const allValues = series.flatMap(serie => serie.data.map(([_, value]) => value)); + + const minVal = Math.min(...allValues); + const maxVal = Math.max(...allValues); + + const range = maxVal - minVal; + const f = Math.pow(10, Math.floor(Math.log10(Math.abs(range)))); // Scaling factor + + const minY = Math.floor(minVal / f) * f; + const maxY = Math.ceil(maxVal / f) * f; + + // Optional: Constrain the step size + const theoreticalStep = (maxY - minY) / f; + let step = f; // Default step size + + // Adjust step size for better visuals + if (theoreticalStep < 5) { + step = f / 2; + } else if (theoreticalStep > 10) { + step = f * 2; + } + + return { minY, maxY, step }; + }; addDateFormatter(options) { let formatter; if (this.props.interval <= 24 * 60) { @@ -143,8 +170,12 @@ class ApexChartComponent extends Component { } else { height = 200 + this.props.additionalHeight; } + const { minY, maxY, step } = this.calculateYAxisRange(); const options = getApexChartLineOptions({ height, + minY, + maxY, + step, colors: mergeArray(this.props.colors, DEFAULT_COLORS), displayAxes: this.props.display_axes, series: this.props.series, @@ -197,6 +228,7 @@ class ApexChartComponent extends Component { }; displayChart = () => { let options; + if (this.props.chart_type === 'timeline') { options = this.getTimelineChartOptions(); } else if (this.props.chart_type === 'area') { diff --git a/front/src/components/boxs/chart/ApexChartLineOptions.js b/front/src/components/boxs/chart/ApexChartLineOptions.js index 24a9f2365d..a9514240cc 100644 --- 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, minY, maxY, step }) => { const options = { chart: { locales, @@ -49,6 +49,9 @@ const getApexChartLineOptions = ({ height, displayAxes, series, colors, locales, type: 'datetime' }, yaxis: { + min: minY, + max: maxY, + tickAmount: (maxY - minY) / step, labels: { padding: 4, formatter: function(value) { From 58467ba74ebc4073f3f65964b77e7396f02f7e1e Mon Sep 17 00:00:00 2001 From: Pierre-Gilles Leymarie Date: Fri, 24 Jan 2025 11:34:43 +0100 Subject: [PATCH 02/10] Update step calculation --- .../src/components/boxs/chart/ApexChartComponent.jsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/front/src/components/boxs/chart/ApexChartComponent.jsx b/front/src/components/boxs/chart/ApexChartComponent.jsx index 439fa59fd0..41fcdea3e6 100644 --- a/front/src/components/boxs/chart/ApexChartComponent.jsx +++ b/front/src/components/boxs/chart/ApexChartComponent.jsx @@ -46,14 +46,14 @@ class ApexChartComponent extends Component { const maxY = Math.ceil(maxVal / f) * f; // Optional: Constrain the step size - const theoreticalStep = (maxY - minY) / f; + const nbTheoreticalStep = (maxY - minY) / f; let step = f; // Default step size - // Adjust step size for better visuals - if (theoreticalStep < 5) { - step = f / 2; - } else if (theoreticalStep > 10) { - step = f * 2; + // Adjust number of steps for better visuals + if (nbTheoreticalStep > 5) { + step = f * 2; // if too much steps, increase step size + } else if (nbTheoreticalStep < 3) { + step = f / 2; // if too few steps, reduce step size } return { minY, maxY, step }; From 7089357b0b2dd46cceca26f14a95ece47c49ad22 Mon Sep 17 00:00:00 2001 From: Pierre-Gilles Leymarie Date: Fri, 24 Jan 2025 11:41:25 +0100 Subject: [PATCH 03/10] Fix lint --- front/src/components/boxs/chart/ApexChartComponent.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/front/src/components/boxs/chart/ApexChartComponent.jsx b/front/src/components/boxs/chart/ApexChartComponent.jsx index 41fcdea3e6..50a3702f9a 100644 --- a/front/src/components/boxs/chart/ApexChartComponent.jsx +++ b/front/src/components/boxs/chart/ApexChartComponent.jsx @@ -34,7 +34,7 @@ class ApexChartComponent extends Component { calculateYAxisRange = () => { const { series } = this.props; // Extract all values from all series - const allValues = series.flatMap(serie => serie.data.map(([_, value]) => value)); + const allValues = series.flatMap(serie => serie.data.map(([, value]) => value)); const minVal = Math.min(...allValues); const maxVal = Math.max(...allValues); From c83a2034e071277aec6b64a4eee46fe481b33bdf Mon Sep 17 00:00:00 2001 From: Pierre-Gilles Leymarie Date: Thu, 23 Jan 2025 15:07:17 +0100 Subject: [PATCH 04/10] Chart: color cannot be null, fix bug on edit, move & remove of device_feature (#2201) --- front/src/components/boxs/chart/EditChart.jsx | 38 +++++++++++++++++-- 1 file changed, 34 insertions(+), 4 deletions(-) diff --git a/front/src/components/boxs/chart/EditChart.jsx b/front/src/components/boxs/chart/EditChart.jsx index 50415bb5c0..b2c68eead8 100644 --- a/front/src/components/boxs/chart/EditChart.jsx +++ b/front/src/components/boxs/chart/EditChart.jsx @@ -91,11 +91,20 @@ class EditChart extends Component { 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 }); + // Make sure all colors are filled with a defaut color + for (let y = 0; y < this.state.selectedDeviceFeaturesOptions.length; y += 1) { + // if no color is filled, pick a default color in array + if (colors[y] === null || colors[y] === undefined) { + colors[y] = DEFAULT_COLORS[y]; + // if we are outside of the default color array, + // Take the first default color + if (!colors[y]) { + colors[y] = DEFAULT_COLORS[0]; + } + } + } + this.props.updateBoxConfig(this.props.x, this.props.y, { colors }); }; updateDisplayAxes = e => { @@ -321,6 +330,7 @@ class EditChart extends Component { }; moveDevice = async (currentIndex, newIndex) => { + // Move element const element = this.state.selectedDeviceFeaturesOptions[currentIndex]; const newStateWithoutElement = update(this.state, { @@ -335,6 +345,19 @@ class EditChart extends Component { }); await this.setState(newState); this.refreshDeviceFeaturesNames(); + // Move color if needed + if (this.props.box.colors && this.props.box.colors[currentIndex]) { + const currentColor = this.props.box.colors[currentIndex]; + const newArrayWithoutOldColor = update(this.props.box.colors, { + $splice: [[currentIndex, 1]] + }); + const newColorsArray = update(newArrayWithoutOldColor, { + $splice: [[newIndex, 0, currentColor]] + }); + this.props.updateBoxConfig(this.props.x, this.props.y, { + colors: newColorsArray + }); + } }; removeDevice = async index => { @@ -343,6 +366,13 @@ class EditChart extends Component { $splice: [[index, 1]] } }); + // Update color array + if (this.props.box.colors) { + const newColors = update(this.props.box.colors, { + $splice: [[index, 1]] + }); + this.props.updateBoxConfig(this.props.x, this.props.y, { colors: newColors }); + } await this.setState(newStateWithoutElement); await this.refreshDeviceFeaturesNames(); this.refreshDeviceUnitAndChartType(this.state.selectedDeviceFeaturesOptions); From 487eb55129a822e5e52523fc37e69aa728dd9190 Mon Sep 17 00:00:00 2001 From: Pierre-Gilles Leymarie Date: Thu, 23 Jan 2025 15:08:28 +0100 Subject: [PATCH 05/10] Gladys Plus: Improve error handling on login page (#2208) --- front/src/actions/login/loginGateway.js | 12 ++++++++++-- front/src/components/gateway/GatewayLoginForm.jsx | 10 ++++++++++ front/src/routes/login-gateway/index.js | 2 +- front/src/utils/consts.js | 3 ++- 4 files changed, 23 insertions(+), 4 deletions(-) diff --git a/front/src/actions/login/loginGateway.js b/front/src/actions/login/loginGateway.js index 666156948d..89c824e739 100644 --- a/front/src/actions/login/loginGateway.js +++ b/front/src/actions/login/loginGateway.js @@ -33,7 +33,8 @@ function createActions(store) { }); } store.setState({ - gatewayLoginStatus: RequestStatus.Getting + gatewayLoginStatus: RequestStatus.Getting, + gatewayLoginError: null }); try { const gatewayLoginResults = await state.session.gatewayClient.login( @@ -52,14 +53,21 @@ function createActions(store) { } } catch (e) { const error = get(e, 'response.data.error'); + const status = get(e, 'response.status'); + if (error === ERROR_MESSAGES.NO_CONNECTED_TO_THE_INTERNET) { store.setState({ gatewayLoginStatus: RequestStatus.NetworkError }); - } else { + } else if (status === 403 || status === 404) { store.setState({ gatewayLoginStatus: LoginStatus.WrongCredentialsError }); + } else { + store.setState({ + gatewayLoginStatus: LoginStatus.UnknownError, + gatewayLoginError: e.message + }); } } }, diff --git a/front/src/components/gateway/GatewayLoginForm.jsx b/front/src/components/gateway/GatewayLoginForm.jsx index 35cd03ad63..c0d853113e 100644 --- a/front/src/components/gateway/GatewayLoginForm.jsx +++ b/front/src/components/gateway/GatewayLoginForm.jsx @@ -22,6 +22,16 @@ const GatewayLoginForm = ({ children, ...props }) => ( )} + {props.gatewayLoginStatus === LoginStatus.UnknownError && ( + <> + + + + )} {props.gatewayLoginStatus === RequestStatus.UserNotAcceptedLocally && (