Data Bars through stylesheet transform? - xslt

Question

i have some data in XML format. For example:
<?xml version="1.0"?>
<TableSizes>
<Table name="AuditLog" rows="13193925" reserved="4896864" data="2522592" indexSize="2373824" unused="448"/>
<Table name="Customers" rows="7021839" reserved="3243392" data="1480640" indexSize="1762640" unused="112"/>
</TableSizes>
i would like that data to be transformed and displayed by the client. So when i feed the User Agent the xml, i supply it a stylesheet:
<?xml version="1.0"?>
<?xml-stylesheet type='text/xsl' href='databaseSize.xslt' media='all'?>
<TableSizes>
<Table name="AuditLog" rows="13193925" reserved="4896864" data="2522592" indexSize="2373824" unused="448"/>
<Table name="Customers" rows="7021839" reserved="3243392" data="1480640" indexSize="1762640" unused="112"/>
</TableSizes>
This causes it to be transformed into some suitable HTML. And that works well enough.
But now i want to add Data Bars:
As it is now, i've been generating the HTML on the server (i.e. the server is deciding how to display content, rather than a stylesheet):
Which requires each table cell to have a custom background style applied, with the computed gradient stops:
<TR>
<TD>AuditLog
<TD style="background: linear-gradient(to right, #658FC6 0%,rgb(255,255,255) 100%,rgb(255,255,255) 100%)">1319,,3925
<TD style="background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) 100%,rgb(255,255,255) 100%)">489,,6864
<TD>252,,2592
<TD>237,,3824
<TD>448
</TR>
<TR>
<TD>Customers
<TD style="background: linear-gradient(to right, #658FC6 0%,rgb(255,255,255) 51%,rgb(255,255,255) 100%)">702,,1839
<TD style="background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) 62%,rgb(255,255,255) 100%)">324,,3392
<TD>148,,0640
<TD>176,,2640
<TD>112
</TR>
Obviously i'd rather have all of this performed in the client by a stylesheet, rather than doing it on the server.
Possible?
Note: If it's not: it's not a problem; just say so.
What XSLT do i have so far?
Essentially, none. The XST i have so far does nothing to add data bars:
<TD><xsl:value-of select="#name"/>
<TD><xsl:value-of select="#rows"/>
<TD><xsl:value-of select="#reserved"/>
<TD><xsl:value-of select="#data"/>
<TD><xsl:value-of select="#indexSize"/>
<TD><xsl:value-of select="#unused"/>
i have add a dummy amount of gradient drawing code:
<TD><xsl:value-of select="#name"/>
<TD style='background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) 50%,rgb(255,255,255) 100%)'><xsl:value-of select="#rows"/>
<TD style='background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) 50%,rgb(255,255,255) 100%)'><xsl:value-of select="#reserved"/>
<TD><xsl:value-of select="#data"/>
<TD><xsl:value-of select="#indexSize"/>
<TD><xsl:value-of select="#unused"/>
Strictly speaking, i don't even have that XSLT. i didn't want to write an entire XSLT when it cannot accomplish what i want. The XSLT i have above i created on-the-fly when someone suggested that the question isn't work answering until i at least pretend to have some XSLT first.

Answer 1

You can do the calculations pretty easily in XSLT and put that into a style attribute.
I created a template for each AuditLog and Customers. And then in the Customers template I just defined a variable for the previous values in AuditLog to use in the calculation. From there I used each to figure out the percent needed for the gradient(along with some quick 'rounding').
<xsl:value-of select="substring(((#rows div $PrevRow) * 100),1,2)"/>
So when you take your XML and transform it with this XSL
<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" indent="yes" />
<xsl:template match="Table[#name='AuditLog']">
<tr>
<td>
<xsl:value-of select="#name"/>
</td>
<td style="background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) 100%,rgb(255,255,255) 100%)">
<xsl:value-of select="#rows"/>
</td>
<td style="background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) 100%,rgb(255,255,255) 100%)">
<xsl:value-of select="#reserved"/>
</td>
<td>
<xsl:value-of select="#data"/>
</td>
<td>
<xsl:value-of select="#indexSize"/>
</td>
<td>
<xsl:value-of select="#unused"/>
</td>
</tr>
</xsl:template>
<xsl:template match="Table[#name='Customers']">
<xsl:variable name="PrevRow" select="preceding-sibling::Table/#rows"/>
<xsl:variable name="PrevReserved" select="preceding-sibling::Table/#reserved"/>
<tr>
<td>
<xsl:value-of select="#name"/>
</td>
<td>
<xsl:attribute name="style">
<xsl:text>background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) </xsl:text>
<xsl:value-of select="substring(((#rows div $PrevRow) * 100),1,2)"/>
<xsl:text>%,rgb(255,255,255) 100%)</xsl:text>
</xsl:attribute>
<xsl:value-of select="#rows"/>
</td>
<td>
<xsl:attribute name="style">
<xsl:text>background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) </xsl:text>
<xsl:value-of select="substring(((#reserved div $PrevReserved) * 100),1,2)"/>
<xsl:text>%,rgb(255,255,255) 100%)</xsl:text>
</xsl:attribute>
<xsl:value-of select="#reserved"/>
<br/>
<xsl:value-of select="$PrevReserved"/>
</td>
<td>
<xsl:value-of select="#data"/>
</td>
<td>
<xsl:value-of select="#indexSize"/>
</td>
<td>
<xsl:value-of select="#unused"/>
</td>
</tr>
</xsl:template>
</xsl:stylesheet>
You get this output:
<tr>
<td>AuditLog</td>
<td style="background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) 100%,rgb(255,255,255) 100%)">13193925</td>
<td style="background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) 100%,rgb(255,255,255) 100%)">4896864</td>
<td>2522592</td>
<td>2373824</td>
<td>448</td>
</tr>
<tr>
<td>Customers</td>
<td style="background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) 53%,rgb(255,255,255) 100%)">7021839</td>
<td style="background: linear-gradient(to right, #FF595E 0%,rgb(255,255,255) 66%,rgb(255,255,255) 100%)">3243392<br/>4896864</td>
<td>1480640</td>
<td>1762640</td>
<td>112</td>
</tr>