Wrong bar chart scaling, misleading summary

[ygoe]

Installed product versions

• Visual Studio: 2022 Community
• This extension: 1.1.218

Description

The bar charts have the wrong scaling.

Steps to recreate

1. Run a unit test
2. View the summary results
3. Measure the bar charts with their displayed percentage numbers

Current behavior

The bar chart for the high percentage data (but less than 100%) suggests a much lower coverage than the number next to it.

Expected behavior

The bar chart should visualise the results accurately.

[tonyhallett]

From your image which row has line or branch coverage bar with a much lower coverage than the number next to it ? With my eyes they look like they reflect ( to the nearest percent ) the percentage to the left.

[ygoe]

If you believe it looks correct, then please go measure. Open the bitmap in a bitmap editor (I recommend paint.net) and count the pixels. I measured the 97.6% bar and it was actually ~84%. 98% should be almost completely green, barely any red. But it has well too much of red.

Here is my result after completing my test coverage:

It has even more and higher values and still as much red.

[tonyhallett]

The html file displayed is within a directory in the Debug directory. It is named something like index-processed.html. Please upload it and I will have a look. I have begun writing a new WPF UI that will replace the html as soon as I get the opportunity to complete it.

[ygoe]

Interesting. I've already suspected that this is HTML. That file is extremely inefficient, it contains large parts of apparently unused cryptic JavaScript. Here's my file.

index-processed.zip

Now with proper web developer tools, I see the issue. There are tables used for graphics layout. It's almost bound to fail. We all did this 25 years ago… I'm surprised to see it today.

The <td> elements have a decent width, but an extra horizontal padding that destroys everything. The red area cannot shrink under 20px. This design is only ever correct for the value of 50%. Everything else will be distorted towards 50%.

Disabling the styles with padding-left: 10px and padding-right: 10px gives the expected display.

A WPF UI is very much appreciated. I hope it solves many of the existing problems.

[ygoe]

And here's the wrong file: https://github.com/FortuneN/FineCodeCoverage/blob/d19b46695736ba96573d2b3fdff93c293e3a84aa/SharedProject/Core/ReportGenerator/ReportGeneratorUtil.cs#L1191

Those padding rules need to be removed. that should help for now.

[tonyhallett]

That file is extremely inefficient, it contains large parts of apparently unused cryptic JavaScript

There are tables used for graphics layout. It's almost bound to fail. We all did this 25 years ago… I'm surprised to see it today.

The file is produced by Report Generator using AngularJS ( fixed at an earlier version to support the WebBrowser control ) and has been hacked to supply visual studio colouring and other functionality from C# which probably explains some of the cryptic JavaScript. More than aware of how poor it is. I did successfully create a branch with react code that used the coverage data without Report Generator but this still communicated across to the js. The WPF solution is the sensible way to go and of course how it should have been implemented in the first place.

I'll remove the padding and hopefully I will be able to resume the WPF in a couple of weeks.

[tonyhallett]

Fixed and available on marketplace. Thanks for reporting.