How to customize colors in report files (XSLT)

Best practices, code snippets for common functionality, examples, and guidelines.
xeronar
Posts: 28
Joined: Mon May 22, 2017 8:19 pm

How to customize colors in report files (XSLT)

Post by xeronar » Fri Sep 08, 2017 11:37 am

Hi everyone,

I want to customize my report (custom template) files by changing the colors of the piechart. I am not familiar with XSLT, but I can not manage to change the default colors of the chart at all. In the RanorexReport.xsl, I've found the lines

Code: Select all

<xsl:if test="(@result='Success' or (@result='Failed' or @result='Active')) and $max > 0">
          <xsl:variable name="maxWidth" select="150" />
          <xsl:variable name="widthSuccess">
            <xsl:value-of select="round(($success div $max) * $maxWidth)" />
          </xsl:variable>
          <xsl:variable name="widthFailed">
            <xsl:value-of select="round(($failed div $max) * $maxWidth)" />
          </xsl:variable>
          <xsl:if test="$widthSuccess < $maxWidth and $widthFailed < $maxWidth">
            <div id="chart{@rid}" style="position: absolute; display:block; font-size:0; width:{$maxWidth}px; margin-top: 5px; right:60px;  height: 8px; background-color:#777; border:1px #979797 solid; overflow: hidden; top: 6px; ">
              <div style="position: absolute; width:{$widthSuccess}px; height: 8px; background-color:#42af6f;" ></div>
              <div style="position: absolute; margin-left:{$widthSuccess}px;  width:{$widthFailed}px; height: 8px; background-color:#e10000; " ></div>
            </div>
          </xsl:if>
        </xsl:if>
        <span class="duration">
          <xsl:value-of select="./@duration" />
        </span>
but when I've changed the colors, nothing happened. I guess I have to change something in this section:

Code: Select all

<!-- PIECHART -->
                <xsl:if test="not(@testentry-activity-type = 'testmodule')">
                  <h3 id="testCasesHeader">Test case result summary</h3>
                  <div id="testCasesPie">
                    <xsl:attribute name="totalsuccesstestcasecount">
                      <xsl:value-of select="@totalsuccesstestcasecount" />
                    </xsl:attribute>
                    <xsl:attribute name="totalfailedtestcasecount">
                      <xsl:value-of select="@totalfailedtestcasecount" />
                    </xsl:attribute>
                    <xsl:attribute name="totalblockedtestcasecount">
                      <xsl:value-of select="@totalblockedtestcasecount" />
                    </xsl:attribute>
                  </div>
                </xsl:if>
              </div>
Any XSL expert here to share your knowledge with us? :D

User avatar
RobinHood42
Posts: 240
Joined: Fri Jan 09, 2015 3:24 pm

Re: How to customize colors in report files (XSLT)

Post by RobinHood42 » Tue Sep 12, 2017 11:32 am

Hi xeronar,

I'm afraid that's not possible to change the color of the pie chart, since it's "drawn" within a canvas element.

Cheers,
Robin

xeronar
Posts: 28
Joined: Mon May 22, 2017 8:19 pm

Re: How to customize colors in report files (XSLT)

Post by xeronar » Wed Sep 13, 2017 4:37 pm

Hi Robin,

thanks for answering my question. That's actually sad to hear. But I figured out that it's not completely impossible :D if you're opening an .rxlog file with a text editor, you will see this:

Code: Select all

...

function ShowChart()
	{
		try
		{
			var success = parseInt($("#testCasesPie").attr('totalsuccesstestcasecount'));
			var failed  = parseInt($("#testCasesPie").attr('totalfailedtestcasecount'));
			var ignored = parseInt($("#testCasesPie").attr('totalblockedtestcasecount'));

			line1 = [];
			colors = [];

			if (success > 0)
			{
				line1.push([success + 'x Success', success]);
				colors.push("#42AF6F");
			}

			if (failed > 0)
			{
				line1.push([failed + 'x Failed', failed]);
				colors.push("#e10000");
			}

			if (ignored > 0)
			{
				line1.push([ignored + 'x Blocked', ignored]);
				colors.push("#777");
			}
...
So I changed the colors triggered by the push() methods, and the piechart had different colors! But sadly, this is just working for a single report file. So either there is a better way to do this or I have to write some kind of automation script that changes all the piechart colors via string replace methods :D

User avatar
RobinHood42
Posts: 240
Joined: Fri Jan 09, 2015 3:24 pm

Re: How to customize colors in report files (XSLT)

Post by RobinHood42 » Thu Sep 14, 2017 10:04 am

Hi,

Great, didn't thought of changing Java script calls !

Cheers,
Robin :mrgreen: