[8.16] [APM] Time spent by span type chart rendering problems (#202755

) (#203075)

# Backport

This will backport the following commits from `main` to `8.16`:
- [[APM] `Time spent by span type` chart rendering problems
(#202755)](#202755)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Milosz
Marcinkowski","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-12-05T10:08:05Z","message":"[APM]
`Time spent by span type` chart rendering problems (#202755)\n\nCloses
#202343\r\n\r\n## Summary\r\n\r\nThis PR solves the following issues in
`Time spent by span type` chart:\r\n- limits percentages between 0% and
100% (converts negative values to\r\n0%),\r\n\r\nbefore: \r\n<img
width=\"1134\" alt=\"Screenshot 2024-12-04 at 15 28
18\"\r\nsrc=\"https://github.com/user-attachments/assets/73285e87-3aef-4b2d-8e2a-7e3ec87680f3\">\r\nafter:\r\n<img
width=\"1135\" alt=\"Screenshot 2024-12-04 at 15 30
25\"\r\nsrc=\"https://github.com/user-attachments/assets/ae25cb85-d31a-490a-96c7-d4475952c734\">\r\n\r\n---\r\n\r\n-
rounds percentage to 8 decimal points to prevent scientific
notation\r\nin charts (poor readability)\r\n\r\nbefore: \r\n<img
width=\"1132\" alt=\"Screenshot 2024-12-04 at 14 36
54\"\r\nsrc=\"https://github.com/user-attachments/assets/528cda4b-ae84-4dbd-9d3f-88896e63a369\">\r\nafter:\r\n<img
width=\"1132\" alt=\"Screenshot 2024-12-04 at 14 35
39\"\r\nsrc=\"https://github.com/user-attachments/assets/9a0bdce9-6d66-4aaf-a131-18644eab1892\">","sha":"ab9de649fe32b22b4f847d190be73fbf229a1ac8","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor","ci:project-deploy-observability","Team:obs-ux-infra_services"],"number":202755,"url":"https://github.com/elastic/kibana/pull/202755","mergeCommit":{"message":"[APM]
`Time spent by span type` chart rendering problems (#202755)\n\nCloses
#202343\r\n\r\n## Summary\r\n\r\nThis PR solves the following issues in
`Time spent by span type` chart:\r\n- limits percentages between 0% and
100% (converts negative values to\r\n0%),\r\n\r\nbefore: \r\n<img
width=\"1134\" alt=\"Screenshot 2024-12-04 at 15 28
18\"\r\nsrc=\"https://github.com/user-attachments/assets/73285e87-3aef-4b2d-8e2a-7e3ec87680f3\">\r\nafter:\r\n<img
width=\"1135\" alt=\"Screenshot 2024-12-04 at 15 30
25\"\r\nsrc=\"https://github.com/user-attachments/assets/ae25cb85-d31a-490a-96c7-d4475952c734\">\r\n\r\n---\r\n\r\n-
rounds percentage to 8 decimal points to prevent scientific
notation\r\nin charts (poor readability)\r\n\r\nbefore: \r\n<img
width=\"1132\" alt=\"Screenshot 2024-12-04 at 14 36
54\"\r\nsrc=\"https://github.com/user-attachments/assets/528cda4b-ae84-4dbd-9d3f-88896e63a369\">\r\nafter:\r\n<img
width=\"1132\" alt=\"Screenshot 2024-12-04 at 14 35
39\"\r\nsrc=\"https://github.com/user-attachments/assets/9a0bdce9-6d66-4aaf-a131-18644eab1892\">","sha":"ab9de649fe32b22b4f847d190be73fbf229a1ac8"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/202755","number":202755,"mergeCommit":{"message":"[APM]
`Time spent by span type` chart rendering problems (#202755)\n\nCloses
#202343\r\n\r\n## Summary\r\n\r\nThis PR solves the following issues in
`Time spent by span type` chart:\r\n- limits percentages between 0% and
100% (converts negative values to\r\n0%),\r\n\r\nbefore: \r\n<img
width=\"1134\" alt=\"Screenshot 2024-12-04 at 15 28
18\"\r\nsrc=\"https://github.com/user-attachments/assets/73285e87-3aef-4b2d-8e2a-7e3ec87680f3\">\r\nafter:\r\n<img
width=\"1135\" alt=\"Screenshot 2024-12-04 at 15 30
25\"\r\nsrc=\"https://github.com/user-attachments/assets/ae25cb85-d31a-490a-96c7-d4475952c734\">\r\n\r\n---\r\n\r\n-
rounds percentage to 8 decimal points to prevent scientific
notation\r\nin charts (poor readability)\r\n\r\nbefore: \r\n<img
width=\"1132\" alt=\"Screenshot 2024-12-04 at 14 36
54\"\r\nsrc=\"https://github.com/user-attachments/assets/528cda4b-ae84-4dbd-9d3f-88896e63a369\">\r\nafter:\r\n<img
width=\"1132\" alt=\"Screenshot 2024-12-04 at 14 35
39\"\r\nsrc=\"https://github.com/user-attachments/assets/9a0bdce9-6d66-4aaf-a131-18644eab1892\">","sha":"ab9de649fe32b22b4f847d190be73fbf229a1ac8"}},{"url":"https://github.com/elastic/kibana/pull/203066","number":203066,"branch":"8.x","state":"OPEN"}]}]
BACKPORT-->

x-pack/plugins/observability_solution/apm/server/routes/transactions/breakdown/index.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { flatten, orderBy, last } from 'lodash';
+import { flatten, orderBy, last, clamp, round } from 'lodash';
 import { rangeQuery, kqlQuery } from '@kbn/observability-plugin/server';
 import { ProcessorEvent } from '@kbn/observability-plugin/common';
 import { asPercent } from '../../../../common/utils/formatters';
@@ -145,9 +145,15 @@ export async function getTransactionBreakdown({
         const type = bucket.key as string;
 
         return bucket.subtypes.buckets.map((subBucket) => {
+          const percentageRaw =
+            (subBucket.total_self_time_per_subtype.value || 0) / sumAllSelfTimes;
+          // limit percentage from 0% to 100% and
+          // round to 8 decimal points (results in 6 decimal points after converting to percentages) to prevent displaying scientific notation in charts
+          const percentage = round(clamp(percentageRaw, 0, 1), 8);
+
           return {
             name: (subBucket.key as string) || type,
-            percentage: (subBucket.total_self_time_per_subtype.value || 0) / sumAllSelfTimes,
+            percentage,
           };
         });
       })