From 82e91fc4a10d3b81da15d802d6774650f1799933 Mon Sep 17 00:00:00 2001
From: Lukas Joss <lukas.joss@swisstopo.ch>
Date: Fri, 12 Jul 2024 09:36:51 +0200
Subject: [PATCH 1/2] PB-792: Change rounding and decimal places threshold

---
 .../infobox/components/FeatureAreaInfo.vue       | 16 +++++++---------
 tests/cypress/tests-e2e/drawing.cy.js            |  2 +-
 2 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/modules/infobox/components/FeatureAreaInfo.vue b/src/modules/infobox/components/FeatureAreaInfo.vue
index 7250de67b..dfd077960 100644
--- a/src/modules/infobox/components/FeatureAreaInfo.vue
+++ b/src/modules/infobox/components/FeatureAreaInfo.vue
@@ -34,8 +34,13 @@ const humanReadableArea = computed(() => {
     const calculatedArea = area(transformIntoTurfEquivalent(geometryWgs84.value))
     let result = ''
     if (calculatedArea) {
-        result += roundValueIfGreaterThan(calculatedArea, 1000, 1000000)
-        if (calculatedArea > 10000) {
+        const unitThreshold = 1e5
+        const divider = 1e6
+        const precision = 5
+
+        const value = calculatedArea < unitThreshold ? calculatedArea : calculatedArea / divider
+        result += parseFloat(value.toPrecision(precision))
+        if (calculatedArea >= unitThreshold) {
             result += ' km'
         } else {
             result += ' m'
@@ -43,13 +48,6 @@ const humanReadableArea = computed(() => {
     }
     return result
 })
-
-function roundValueIfGreaterThan(value, threshold, divider) {
-    if (value > threshold) {
-        return `${round(value / divider, 2)}`
-    }
-    return `${round(value, 2)}`
-}
 </script>
 
 <template>
diff --git a/tests/cypress/tests-e2e/drawing.cy.js b/tests/cypress/tests-e2e/drawing.cy.js
index 2ed43c20e..84b8398df 100644
--- a/tests/cypress/tests-e2e/drawing.cy.js
+++ b/tests/cypress/tests-e2e/drawing.cy.js
@@ -588,7 +588,7 @@ describe('Drawing module tests', () => {
                 })
             cy.get('[data-cy="feature-area-information"]')
                 .should('be.visible')
-                .contains('187.22 km')
+                .contains('187.224 km')
 
             // Changing the color of the polygon and checking that the KMl was updated accordingly
             cy.get('[data-cy="drawing-style-line-button"]').click()

From 080cd0b3792b41f1faba4c71cd8b4ac2ca173032 Mon Sep 17 00:00:00 2001
From: Lukas Joss <lukas.joss@swisstopo.ch>
Date: Fri, 12 Jul 2024 15:17:18 +0200
Subject: [PATCH 2/2] PB-792: Update cypress tests to check for area info
 formatting

---
 .../infobox/components/FeatureAreaInfo.vue    |  7 ++--
 tests/cypress/tests-e2e/drawing.cy.js         | 32 +++++++++++++++++--
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/modules/infobox/components/FeatureAreaInfo.vue b/src/modules/infobox/components/FeatureAreaInfo.vue
index dfd077960..38b62cfef 100644
--- a/src/modules/infobox/components/FeatureAreaInfo.vue
+++ b/src/modules/infobox/components/FeatureAreaInfo.vue
@@ -6,7 +6,6 @@ import { useStore } from 'vuex'
 import { useTippyTooltip } from '@/utils/composables/useTippyTooltip'
 import { WGS84 } from '@/utils/coordinates/coordinateSystems'
 import { reprojectGeoJsonData, transformIntoTurfEquivalent } from '@/utils/geoJsonUtils'
-import { round } from '@/utils/numberUtils'
 
 const props = defineProps({
     geometry: {
@@ -40,10 +39,10 @@ const humanReadableArea = computed(() => {
 
         const value = calculatedArea < unitThreshold ? calculatedArea : calculatedArea / divider
         result += parseFloat(value.toPrecision(precision))
-        if (calculatedArea >= unitThreshold) {
-            result += ' km'
-        } else {
+        if (calculatedArea < unitThreshold) {
             result += ' m'
+        } else {
+            result += ' km'
         }
     }
     return result
diff --git a/tests/cypress/tests-e2e/drawing.cy.js b/tests/cypress/tests-e2e/drawing.cy.js
index 84b8398df..52d439f1f 100644
--- a/tests/cypress/tests-e2e/drawing.cy.js
+++ b/tests/cypress/tests-e2e/drawing.cy.js
@@ -586,9 +586,6 @@ describe('Drawing module tests', () => {
                     const [polygonCoordinates] = polygon.getGeometry().getCoordinates()
                     expect(polygonCoordinates).to.be.an('Array').lengthOf(4)
                 })
-            cy.get('[data-cy="feature-area-information"]')
-                .should('be.visible')
-                .contains('187.224 km')
 
             // Changing the color of the polygon and checking that the KMl was updated accordingly
             cy.get('[data-cy="drawing-style-line-button"]').click()
@@ -628,6 +625,35 @@ describe('Drawing module tests', () => {
                     const line = features[1]
                     expect(line.getGeometry().getCoordinates().length).to.eq(2)
                 })
+
+            cy.goToMapView(
+                {
+                    zoom: 6,
+                },
+                false
+            )
+
+            cy.log('Feature Area Info should be in meters below unit threshold')
+            cy.goToDrawing()
+            cy.clickDrawingTool(EditableFeatureTypes.LINEPOLYGON)
+
+            cy.get('[data-cy="ol-map"]').click(100, 200)
+            cy.get('[data-cy="ol-map"]').click(150, 200)
+            cy.get('[data-cy="ol-map"]').click(150, 230)
+            cy.get('[data-cy="ol-map"]').click(100, 200)
+            cy.get('[data-cy="feature-area-information"]').should('be.visible').contains('74802 m2')
+
+            cy.log('Feature Area Info should be in kilometers above unit threshold')
+            cy.clickDrawingTool(EditableFeatureTypes.LINEPOLYGON)
+
+            cy.get('[data-cy="ol-map"]').click(200, 200)
+            cy.get('[data-cy="ol-map"]').click(150, 200)
+            cy.get('[data-cy="ol-map"]').click(150, 300)
+            cy.get('[data-cy="ol-map"]').click(200, 200)
+
+            cy.get('[data-cy="feature-area-information"]')
+                .should('be.visible')
+                .contains('0.24935 km2')
         })
     })
     context('KML management', () => {