Skip to content

Commit

Permalink
[APM] Time spent by span type chart rendering problems (elastic#202755
Browse files Browse the repository at this point in the history
)

Closes elastic#202343

## Summary

This PR solves the following issues in `Time spent by span type` chart:
- limits percentages between 0% and 100% (converts negative values to
0%),

before: 
<img width="1134" alt="Screenshot 2024-12-04 at 15 28 18"
src="https://github.com/user-attachments/assets/73285e87-3aef-4b2d-8e2a-7e3ec87680f3">
after:
<img width="1135" alt="Screenshot 2024-12-04 at 15 30 25"
src="https://github.com/user-attachments/assets/ae25cb85-d31a-490a-96c7-d4475952c734">

---

- rounds percentage to 8 decimal points to prevent scientific notation
in charts (poor readability)

before: 
<img width="1132" alt="Screenshot 2024-12-04 at 14 36 54"
src="https://github.com/user-attachments/assets/528cda4b-ae84-4dbd-9d3f-88896e63a369">
after:
<img width="1132" alt="Screenshot 2024-12-04 at 14 35 39"
src="https://github.com/user-attachments/assets/9a0bdce9-6d66-4aaf-a131-18644eab1892">
  • Loading branch information
miloszmarcinkowski authored Dec 5, 2024
1 parent 486bdbf commit ab9de64
Show file tree
Hide file tree
Showing 2 changed files with 155 additions and 149 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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,
};
});
})
Expand Down
Loading

0 comments on commit ab9de64

Please sign in to comment.