From 14f55a0ff4af6d570953bd6c074c8ef8c7acfa27 Mon Sep 17 00:00:00 2001 From: Milosz Marcinkowski <38698566+miloszmarcinkowski@users.noreply.github.com> Date: Thu, 5 Dec 2024 11:08:05 +0100 Subject: [PATCH] [APM] `Time spent by span type` chart rendering problems (#202755) Closes #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: Screenshot 2024-12-04 at 15 28 18 after: Screenshot 2024-12-04 at 15 30 25 --- - rounds percentage to 8 decimal points to prevent scientific notation in charts (poor readability) before: Screenshot 2024-12-04 at 14 36 54 after: Screenshot 2024-12-04 at 14 35 39 (cherry picked from commit ab9de649fe32b22b4f847d190be73fbf229a1ac8) --- .../routes/transactions/breakdown/index.ts | 10 +- .../__snapshots__/breakdown.spec.snap | 294 +++++++++--------- 2 files changed, 155 insertions(+), 149 deletions(-) diff --git a/x-pack/plugins/observability_solution/apm/server/routes/transactions/breakdown/index.ts b/x-pack/plugins/observability_solution/apm/server/routes/transactions/breakdown/index.ts index 73da84fe4e98e..a57d437b242aa 100644 --- a/x-pack/plugins/observability_solution/apm/server/routes/transactions/breakdown/index.ts +++ b/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, }; }); }) diff --git a/x-pack/test/apm_api_integration/tests/transactions/__snapshots__/breakdown.spec.snap b/x-pack/test/apm_api_integration/tests/transactions/__snapshots__/breakdown.spec.snap index d8e3d13525cc9..68495907b3c7f 100644 --- a/x-pack/test/apm_api_integration/tests/transactions/__snapshots__/breakdown.spec.snap +++ b/x-pack/test/apm_api_integration/tests/transactions/__snapshots__/breakdown.spec.snap @@ -20,39 +20,39 @@ Object { }, Object { "x": 1627973490000, - "y": 0.0833333333333333, + "y": 0.08333333, }, Object { "x": 1627973520000, - "y": 0.628571428571429, + "y": 0.62857143, }, Object { "x": 1627973550000, - "y": 0.733333333333333, + "y": 0.73333333, }, Object { "x": 1627973580000, - "y": 0.490909090909091, + "y": 0.49090909, }, Object { "x": 1627973610000, - "y": 0.135593220338983, + "y": 0.13559322, }, Object { "x": 1627973640000, - "y": 0.692307692307692, + "y": 0.69230769, }, Object { "x": 1627973670000, - "y": 0.097165991902834, + "y": 0.09716599, }, Object { "x": 1627973700000, - "y": 0.303030303030303, + "y": 0.3030303, }, Object { "x": 1627973730000, - "y": 0.153846153846154, + "y": 0.15384615, }, Object { "x": 1627973760000, @@ -60,11 +60,11 @@ Object { }, Object { "x": 1627973790000, - "y": 0.0857142857142857, + "y": 0.08571429, }, Object { "x": 1627973820000, - "y": 0.155172413793103, + "y": 0.15517241, }, Object { "x": 1627973850000, @@ -76,31 +76,31 @@ Object { }, Object { "x": 1627973910000, - "y": 0.142857142857143, + "y": 0.14285714, }, Object { "x": 1627973940000, - "y": 0.0810810810810811, + "y": 0.08108108, }, Object { "x": 1627973970000, - "y": 0.473684210526316, + "y": 0.47368421, }, Object { "x": 1627974000000, - "y": 0.633333333333333, + "y": 0.63333333, }, Object { "x": 1627974030000, - "y": 0.111111111111111, + "y": 0.11111111, }, Object { "x": 1627974060000, - "y": 0.467741935483871, + "y": 0.46774194, }, Object { "x": 1627974090000, - "y": 0.129496402877698, + "y": 0.1294964, }, Object { "x": 1627974120000, @@ -108,19 +108,19 @@ Object { }, Object { "x": 1627974150000, - "y": 0.30188679245283, + "y": 0.30188679, }, Object { "x": 1627974180000, - "y": 0.464285714285714, + "y": 0.46428571, }, Object { "x": 1627974210000, - "y": 0.123674911660777, + "y": 0.12367491, }, Object { "x": 1627974240000, - "y": 0.384615384615385, + "y": 0.38461538, }, Object { "x": 1627974270000, @@ -128,19 +128,19 @@ Object { }, Object { "x": 1627974300000, - "y": 0.222222222222222, + "y": 0.22222222, }, Object { "x": 1627974330000, - "y": 0.00248447204968944, + "y": 0.00248447, }, Object { "x": 1627974360000, - "y": 0.0645161290322581, + "y": 0.06451613, }, Object { "x": 1627974390000, - "y": 0.569444444444444, + "y": 0.56944444, }, Object { "x": 1627974420000, @@ -152,19 +152,19 @@ Object { }, Object { "x": 1627974480000, - "y": 0.143646408839779, + "y": 0.14364641, }, Object { "x": 1627974510000, - "y": 0.298850574712644, + "y": 0.29885057, }, Object { "x": 1627974540000, - "y": 0.111111111111111, + "y": 0.11111111, }, Object { "x": 1627974570000, - "y": 0.267857142857143, + "y": 0.26785714, }, Object { "x": 1627974600000, @@ -172,11 +172,11 @@ Object { }, Object { "x": 1627974630000, - "y": 0.185185185185185, + "y": 0.18518519, }, Object { "x": 1627974660000, - "y": 0.0973451327433628, + "y": 0.09734513, }, Object { "x": 1627974690000, @@ -184,15 +184,15 @@ Object { }, Object { "x": 1627974720000, - "y": 0.480769230769231, + "y": 0.48076923, }, Object { "x": 1627974750000, - "y": 0.383458646616541, + "y": 0.38345865, }, Object { "x": 1627974780000, - "y": 0.153061224489796, + "y": 0.15306122, }, Object { "x": 1627974810000, @@ -200,23 +200,23 @@ Object { }, Object { "x": 1627974840000, - "y": 0.739130434782609, + "y": 0.73913043, }, Object { "x": 1627974870000, - "y": 0.260869565217391, + "y": 0.26086957, }, Object { "x": 1627974900000, - "y": 0.605633802816901, + "y": 0.6056338, }, Object { "x": 1627974930000, - "y": 0.326923076923077, + "y": 0.32692308, }, Object { "x": 1627974960000, - "y": 0.103448275862069, + "y": 0.10344828, }, Object { "x": 1627974990000, @@ -228,19 +228,19 @@ Object { }, Object { "x": 1627975050000, - "y": 0.114285714285714, + "y": 0.11428571, }, Object { "x": 1627975080000, - "y": 0.238636363636364, + "y": 0.23863636, }, Object { "x": 1627975110000, - "y": 0.684210526315789, + "y": 0.68421053, }, Object { "x": 1627975140000, - "y": 0.368421052631579, + "y": 0.36842105, }, Object { "x": 1627975170000, @@ -248,7 +248,7 @@ Object { }, Object { "x": 1627975200000, - "y": 0.235294117647059, + "y": 0.23529412, }, ], "hideLegend": false, @@ -265,7 +265,7 @@ Object { }, Object { "x": 1627973430000, - "y": 0.790322580645161, + "y": 0.79032258, }, Object { "x": 1627973460000, @@ -273,11 +273,11 @@ Object { }, Object { "x": 1627973490000, - "y": 0.876543209876543, + "y": 0.87654321, }, Object { "x": 1627973520000, - "y": 0.114285714285714, + "y": 0.11428571, }, Object { "x": 1627973550000, @@ -285,11 +285,11 @@ Object { }, Object { "x": 1627973580000, - "y": 0.309090909090909, + "y": 0.30909091, }, Object { "x": 1627973610000, - "y": 0.864406779661017, + "y": 0.86440678, }, Object { "x": 1627973640000, @@ -297,15 +297,15 @@ Object { }, Object { "x": 1627973670000, - "y": 0.862348178137652, + "y": 0.86234818, }, Object { "x": 1627973700000, - "y": 0.636363636363636, + "y": 0.63636364, }, Object { "x": 1627973730000, - "y": 0.846153846153846, + "y": 0.84615385, }, Object { "x": 1627973760000, @@ -313,11 +313,11 @@ Object { }, Object { "x": 1627973790000, - "y": 0.914285714285714, + "y": 0.91428571, }, Object { "x": 1627973820000, - "y": 0.844827586206897, + "y": 0.84482759, }, Object { "x": 1627973850000, @@ -329,11 +329,11 @@ Object { }, Object { "x": 1627973910000, - "y": 0.857142857142857, + "y": 0.85714286, }, Object { "x": 1627973940000, - "y": 0.918918918918919, + "y": 0.91891892, }, Object { "x": 1627973970000, @@ -345,15 +345,15 @@ Object { }, Object { "x": 1627974030000, - "y": 0.872222222222222, + "y": 0.87222222, }, Object { "x": 1627974060000, - "y": 0.290322580645161, + "y": 0.29032258, }, Object { "x": 1627974090000, - "y": 0.848920863309353, + "y": 0.84892086, }, Object { "x": 1627974120000, @@ -361,19 +361,19 @@ Object { }, Object { "x": 1627974150000, - "y": 0.613207547169811, + "y": 0.61320755, }, Object { "x": 1627974180000, - "y": 0.339285714285714, + "y": 0.33928571, }, Object { "x": 1627974210000, - "y": 0.787985865724382, + "y": 0.78798587, }, Object { "x": 1627974240000, - "y": 0.557692307692308, + "y": 0.55769231, }, Object { "x": 1627974270000, @@ -381,15 +381,15 @@ Object { }, Object { "x": 1627974300000, - "y": 0.685990338164251, + "y": 0.68599034, }, Object { "x": 1627974330000, - "y": 0.995807453416149, + "y": 0.99580745, }, Object { "x": 1627974360000, - "y": 0.935483870967742, + "y": 0.93548387, }, Object { "x": 1627974390000, @@ -405,15 +405,15 @@ Object { }, Object { "x": 1627974480000, - "y": 0.831491712707182, + "y": 0.83149171, }, Object { "x": 1627974510000, - "y": 0.505747126436782, + "y": 0.50574713, }, Object { "x": 1627974540000, - "y": 0.888888888888889, + "y": 0.88888889, }, Object { "x": 1627974570000, @@ -425,11 +425,11 @@ Object { }, Object { "x": 1627974630000, - "y": 0.71957671957672, + "y": 0.71957672, }, Object { "x": 1627974660000, - "y": 0.867256637168142, + "y": 0.86725664, }, Object { "x": 1627974690000, @@ -437,15 +437,15 @@ Object { }, Object { "x": 1627974720000, - "y": 0.288461538461538, + "y": 0.28846154, }, Object { "x": 1627974750000, - "y": 0.406015037593985, + "y": 0.40601504, }, Object { "x": 1627974780000, - "y": 0.775510204081633, + "y": 0.7755102, }, Object { "x": 1627974810000, @@ -457,7 +457,7 @@ Object { }, Object { "x": 1627974870000, - "y": 0.623188405797101, + "y": 0.62318841, }, Object { "x": 1627974900000, @@ -465,11 +465,11 @@ Object { }, Object { "x": 1627974930000, - "y": 0.423076923076923, + "y": 0.42307692, }, Object { "x": 1627974960000, - "y": 0.896551724137931, + "y": 0.89655172, }, Object { "x": 1627974990000, @@ -481,11 +481,11 @@ Object { }, Object { "x": 1627975050000, - "y": 0.885714285714286, + "y": 0.88571429, }, Object { "x": 1627975080000, - "y": 0.681818181818182, + "y": 0.68181818, }, Object { "x": 1627975110000, @@ -493,7 +493,7 @@ Object { }, Object { "x": 1627975140000, - "y": 0.456140350877193, + "y": 0.45614035, }, Object { "x": 1627975170000, @@ -501,7 +501,7 @@ Object { }, Object { "x": 1627975200000, - "y": 0.541176470588235, + "y": 0.54117647, }, ], "hideLegend": false, @@ -518,7 +518,7 @@ Object { }, Object { "x": 1627973430000, - "y": 0.0806451612903226, + "y": 0.08064516, }, Object { "x": 1627973460000, @@ -526,19 +526,19 @@ Object { }, Object { "x": 1627973490000, - "y": 0.0277777777777778, + "y": 0.02777778, }, Object { "x": 1627973520000, - "y": 0.171428571428571, + "y": 0.17142857, }, Object { "x": 1627973550000, - "y": 0.266666666666667, + "y": 0.26666667, }, Object { "x": 1627973580000, - "y": 0.181818181818182, + "y": 0.18181818, }, Object { "x": 1627973610000, @@ -546,15 +546,15 @@ Object { }, Object { "x": 1627973640000, - "y": 0.307692307692308, + "y": 0.30769231, }, Object { "x": 1627973670000, - "y": 0.0364372469635627, + "y": 0.03643725, }, Object { "x": 1627973700000, - "y": 0.0454545454545455, + "y": 0.04545455, }, Object { "x": 1627973730000, @@ -562,7 +562,7 @@ Object { }, Object { "x": 1627973760000, - "y": 0.0416666666666667, + "y": 0.04166667, }, Object { "x": 1627973790000, @@ -590,7 +590,7 @@ Object { }, Object { "x": 1627973970000, - "y": 0.526315789473684, + "y": 0.52631579, }, Object { "x": 1627974000000, @@ -598,15 +598,15 @@ Object { }, Object { "x": 1627974030000, - "y": 0.0166666666666667, + "y": 0.01666667, }, Object { "x": 1627974060000, - "y": 0.129032258064516, + "y": 0.12903226, }, Object { "x": 1627974090000, - "y": 0.0143884892086331, + "y": 0.01438849, }, Object { "x": 1627974120000, @@ -614,19 +614,19 @@ Object { }, Object { "x": 1627974150000, - "y": 0.0471698113207547, + "y": 0.04716981, }, Object { "x": 1627974180000, - "y": 0.160714285714286, + "y": 0.16071429, }, Object { "x": 1627974210000, - "y": 0.0565371024734982, + "y": 0.0565371, }, Object { "x": 1627974240000, - "y": 0.0384615384615385, + "y": 0.03846154, }, Object { "x": 1627974270000, @@ -634,11 +634,11 @@ Object { }, Object { "x": 1627974300000, - "y": 0.0579710144927536, + "y": 0.05797101, }, Object { "x": 1627974330000, - "y": 0.00108695652173913, + "y": 0.00108696, }, Object { "x": 1627974360000, @@ -646,7 +646,7 @@ Object { }, Object { "x": 1627974390000, - "y": 0.263888888888889, + "y": 0.26388889, }, Object { "x": 1627974420000, @@ -658,11 +658,11 @@ Object { }, Object { "x": 1627974480000, - "y": 0.0193370165745856, + "y": 0.01933702, }, Object { "x": 1627974510000, - "y": 0.183908045977011, + "y": 0.18390805, }, Object { "x": 1627974540000, @@ -670,7 +670,7 @@ Object { }, Object { "x": 1627974570000, - "y": 0.0357142857142857, + "y": 0.03571429, }, Object { "x": 1627974600000, @@ -678,11 +678,11 @@ Object { }, Object { "x": 1627974630000, - "y": 0.0793650793650794, + "y": 0.07936508, }, Object { "x": 1627974660000, - "y": 0.0265486725663717, + "y": 0.02654867, }, Object { "x": 1627974690000, @@ -690,15 +690,15 @@ Object { }, Object { "x": 1627974720000, - "y": 0.192307692307692, + "y": 0.19230769, }, Object { "x": 1627974750000, - "y": 0.150375939849624, + "y": 0.15037594, }, Object { "x": 1627974780000, - "y": 0.0561224489795918, + "y": 0.05612245, }, Object { "x": 1627974810000, @@ -706,15 +706,15 @@ Object { }, Object { "x": 1627974840000, - "y": 0.217391304347826, + "y": 0.2173913, }, Object { "x": 1627974870000, - "y": 0.115942028985507, + "y": 0.11594203, }, Object { "x": 1627974900000, - "y": 0.380281690140845, + "y": 0.38028169, }, Object { "x": 1627974930000, @@ -738,15 +738,15 @@ Object { }, Object { "x": 1627975080000, - "y": 0.0738636363636364, + "y": 0.07386364, }, Object { "x": 1627975110000, - "y": 0.157894736842105, + "y": 0.15789474, }, Object { "x": 1627975140000, - "y": 0.175438596491228, + "y": 0.1754386, }, Object { "x": 1627975170000, @@ -754,7 +754,7 @@ Object { }, Object { "x": 1627975200000, - "y": 0.211764705882353, + "y": 0.21176471, }, ], "hideLegend": false, @@ -771,7 +771,7 @@ Object { }, Object { "x": 1627973430000, - "y": 0.00403225806451613, + "y": 0.00403226, }, Object { "x": 1627973460000, @@ -779,11 +779,11 @@ Object { }, Object { "x": 1627973490000, - "y": 0.0123456790123457, + "y": 0.01234568, }, Object { "x": 1627973520000, - "y": 0.0857142857142857, + "y": 0.08571429, }, Object { "x": 1627973550000, @@ -791,7 +791,7 @@ Object { }, Object { "x": 1627973580000, - "y": 0.0181818181818182, + "y": 0.01818182, }, Object { "x": 1627973610000, @@ -803,11 +803,11 @@ Object { }, Object { "x": 1627973670000, - "y": 0.00404858299595142, + "y": 0.00404858, }, Object { "x": 1627973700000, - "y": 0.0151515151515152, + "y": 0.01515152, }, Object { "x": 1627973730000, @@ -815,7 +815,7 @@ Object { }, Object { "x": 1627973760000, - "y": 0.00520833333333333, + "y": 0.00520833, }, Object { "x": 1627973790000, @@ -847,7 +847,7 @@ Object { }, Object { "x": 1627974000000, - "y": 0.0166666666666667, + "y": 0.01666667, }, Object { "x": 1627974030000, @@ -855,11 +855,11 @@ Object { }, Object { "x": 1627974060000, - "y": 0.112903225806452, + "y": 0.11290323, }, Object { "x": 1627974090000, - "y": 0.00719424460431655, + "y": 0.00719424, }, Object { "x": 1627974120000, @@ -867,19 +867,19 @@ Object { }, Object { "x": 1627974150000, - "y": 0.0377358490566038, + "y": 0.03773585, }, Object { "x": 1627974180000, - "y": 0.0357142857142857, + "y": 0.03571429, }, Object { "x": 1627974210000, - "y": 0.0318021201413428, + "y": 0.03180212, }, Object { "x": 1627974240000, - "y": 0.0192307692307692, + "y": 0.01923077, }, Object { "x": 1627974270000, @@ -887,11 +887,11 @@ Object { }, Object { "x": 1627974300000, - "y": 0.0338164251207729, + "y": 0.03381643, }, Object { "x": 1627974330000, - "y": 0.00062111801242236, + "y": 0.00062112, }, Object { "x": 1627974360000, @@ -899,7 +899,7 @@ Object { }, Object { "x": 1627974390000, - "y": 0.0416666666666667, + "y": 0.04166667, }, Object { "x": 1627974420000, @@ -911,11 +911,11 @@ Object { }, Object { "x": 1627974480000, - "y": 0.00552486187845304, + "y": 0.00552486, }, Object { "x": 1627974510000, - "y": 0.0114942528735632, + "y": 0.01149425, }, Object { "x": 1627974540000, @@ -923,7 +923,7 @@ Object { }, Object { "x": 1627974570000, - "y": 0.0714285714285714, + "y": 0.07142857, }, Object { "x": 1627974600000, @@ -931,11 +931,11 @@ Object { }, Object { "x": 1627974630000, - "y": 0.0158730158730159, + "y": 0.01587302, }, Object { "x": 1627974660000, - "y": 0.00884955752212389, + "y": 0.00884956, }, Object { "x": 1627974690000, @@ -943,15 +943,15 @@ Object { }, Object { "x": 1627974720000, - "y": 0.0384615384615385, + "y": 0.03846154, }, Object { "x": 1627974750000, - "y": 0.0601503759398496, + "y": 0.06015038, }, Object { "x": 1627974780000, - "y": 0.0153061224489796, + "y": 0.01530612, }, Object { "x": 1627974810000, @@ -959,7 +959,7 @@ Object { }, Object { "x": 1627974840000, - "y": 0.0434782608695652, + "y": 0.04347826, }, Object { "x": 1627974870000, @@ -967,7 +967,7 @@ Object { }, Object { "x": 1627974900000, - "y": 0.0140845070422535, + "y": 0.01408451, }, Object { "x": 1627974930000, @@ -991,11 +991,11 @@ Object { }, Object { "x": 1627975080000, - "y": 0.00568181818181818, + "y": 0.00568182, }, Object { "x": 1627975110000, - "y": 0.157894736842105, + "y": 0.15789474, }, Object { "x": 1627975140000, @@ -1007,7 +1007,7 @@ Object { }, Object { "x": 1627975200000, - "y": 0.0117647058823529, + "y": 0.01176471, }, ], "hideLegend": false,