| | |
| | <div class="chart"> |
| | - <svg:svg width="30%" height="30%" viewBox="0 0 {$pie_width} {$pie_height}" version="1.1"> |
| | - <svg:g stroke-width="0" fill="#000" stroke="#000"> |
| | - <xsl:for-each select="data"> |
| | - <xsl:variable name="piece" select="position()" /> |
| | + <div class="graph"> |
| | + <svg:svg width="30%" height="30%" viewBox="0 0 {$pie_width} {$pie_height}" version="1.1"> |
| | + <svg:g stroke-width="0" fill="#000" stroke="#000"> |
| | + <xsl:for-each select="data"> |
| | + <xsl:variable name="piece" select="position()" /> |
| | |
| | - <!-- Calculate pie piece fill colour. --> |
| | - <xsl:variable name="fill"> |
| | - <xsl:call-template name="fill"> |
| | - <xsl:with-param name="piece" select="$piece" /> |
| | - <xsl:with-param name="pieces" select="$pieces" /> |
| | - <xsl:with-param name="colour" select="$base_colour" /> |
| | - </xsl:call-template> |
| | - </xsl:variable> |
| | + <!-- Calculate pie piece fill colour. --> |
| | + <xsl:variable name="fill"> |
| | + <xsl:call-template name="fill"> |
| | + <xsl:with-param name="piece" select="$piece" /> |
| | + <xsl:with-param name="pieces" select="$pieces" /> |
| | + <xsl:with-param name="colour" select="$base_colour" /> |
| | + </xsl:call-template> |
| | + </xsl:variable> |
| | |
| | - <xsl:for-each select="value"> |
| | - <!-- Pie piece item number. --> |
| | - <xsl:variable name="item" select="position()" /> |
| | + <xsl:for-each select="value"> |
| | + <!-- Pie piece item number. --> |
| | + <xsl:variable name="item" select="position()" /> |
| | |
| | - <xsl:variable name="title"><xsl:value-of select="../name" /></xsl:variable> |
| | - <xsl:variable name="percent" select="concat($title,' (',format-number(. div $total, '0.00%'),')')" /> |
| | + <xsl:variable name="title"><xsl:value-of select="../name" /></xsl:variable> |
| | + <xsl:variable name="percent" select="concat($title,' (',format-number(. div $total, '0.00%'),')')" /> |
| | |
| | - <xsl:variable name="x" select="0" /> |
| | - <xsl:variable name="y" select="0" /> |
| | - <xsl:variable name="rx" select="$pie_width * 0.5" /> |
| | - <xsl:variable name="ry" select="$pie_height * 0.5" /> |
| | - |
| | - <svg:rect x="{360 * (1 - sum(//data[position() <= $piece -1]/value[position() = $item]) div $total)}" /> |
| | - |
| | - <xsl:variable name="deg"> |
| | - <xsl:choose> |
| | - <!-- Whole pie. --> |
| | - <xsl:when test="$piece = 1">360</xsl:when> |
| | - <xsl:otherwise> |
| | - <xsl:value-of select="360 * (1 - sum(//data[position() <= $piece -1]/value[position() = $item]) div $total)" /> |
| | - </xsl:otherwise> |
| | - </xsl:choose> |
| | - </xsl:variable> |
| | - <xsl:variable name="c"> |
| | - <xsl:call-template name="sine"> |
| | - <xsl:with-param name="deg" select="$deg" /> |
| | - </xsl:call-template> |
| | - </xsl:variable> |
| | - <xsl:variable name="s"> |
| | - <xsl:call-template name="sine"> |
| | - <xsl:with-param name="deg" select="-$deg - 90" /> |
| | - </xsl:call-template> |
| | - </xsl:variable> |
| | + <xsl:variable name="x" select="0" /> |
| | + <xsl:variable name="y" select="0" /> |
| | + <xsl:variable name="rx" select="$pie_width * 0.5" /> |
| | + <xsl:variable name="ry" select="$pie_height * 0.5" /> |
| | + |
| | + <svg:rect x="{360 * (1 - sum(//data[position() <= $piece -1]/value[position() = $item]) div $total)}" /> |
| | + |
| | + <xsl:variable name="deg"> |
| | + <xsl:choose> |
| | + <!-- Whole pie. --> |
| | + <xsl:when test="$piece = 1">360</xsl:when> |
| | + <xsl:otherwise> |
| | + <xsl:value-of select="360 * (1 - sum(//data[position() <= $piece -1]/value[position() = $item]) div $total)" /> |
| | + </xsl:otherwise> |
| | + </xsl:choose> |
| | + </xsl:variable> |
| | + <xsl:variable name="c"> |
| | + <xsl:call-template name="sin"> |
| | + <xsl:with-param name="degrees" select="$deg" /> |
| | + </xsl:call-template> |
| | + </xsl:variable> |
| | + <xsl:variable name="s"> |
| | + <xsl:call-template name="sin"> |
| | + <xsl:with-param name="degrees" select="-$deg - 90" /> |
| | + </xsl:call-template> |
| | + </xsl:variable> |
| | |
| | - <xsl:variable name="deg2" select="360 * (1 - sum(//data[position() <= $piece]/value[position() = $item]) div $total)" /> |
| | - <xsl:variable name="c2"> |
| | - <xsl:call-template name="sine"> |
| | - <xsl:with-param name="deg" select="$deg2" /> |
| | - </xsl:call-template> |
| | - </xsl:variable> |
| | - <xsl:variable name="s2"> |
| | - <xsl:call-template name="sine"> |
| | - <xsl:with-param name="deg" select="-$deg2 - 90" /> |
| | - </xsl:call-template> |
| | - </xsl:variable> |
| | + <xsl:variable name="deg2" select="360 * (1 - sum(//data[position() <= $piece]/value[position() = $item]) div $total)" /> |
| | + <xsl:variable name="c2"> |
| | + <xsl:call-template name="sin"> |
| | + <xsl:with-param name="degrees" select="$deg2" /> |
| | + </xsl:call-template> |
| | + </xsl:variable> |
| | + <xsl:variable name="s2"> |
| | + <xsl:call-template name="sin"> |
| | + <xsl:with-param name="degrees" select="-$deg2 - 90" /> |
| | + </xsl:call-template> |
| | + </xsl:variable> |
| | |
| | - <xsl:variable name="opt"><xsl:choose><xsl:when test="$deg - $deg2 < 180">0</xsl:when><xsl:otherwise>1</xsl:otherwise></xsl:choose></xsl:variable> |
| | + <xsl:variable name="opt"><xsl:choose><xsl:when test="$deg - $deg2 < 180">0</xsl:when><xsl:otherwise>1</xsl:otherwise></xsl:choose></xsl:variable> |
| | |
| | - <!-- Fill the pie piece. --> |
| | - <svg:path fill="{$fill}" title="{$percent}" stroke="white" stroke-width="0.5" d="{concat('M',$x+$rx,' ',$y+$ry,'L',$x+$rx+$rx*$c2,' ',$y+$ry+$ry*$s2,'A',$rx,' ',$ry,' 0 ',$opt,' 1 ',$x+$rx + $rx * $c,' ',$y+$ry +$ry*$s,'z')}" /> |
| | + <!-- Fill the pie piece. --> |
| | + <svg:path fill="{$fill}" title="{$percent}" stroke="white" stroke-width="0.5" d="{concat('M',$x+$rx,' ',$y+$ry,'L',$x+$rx+$rx*$c2,' ',$y+$ry+$ry*$s2,'A',$rx,' ',$ry,' 0 ',$opt,' 1 ',$x+$rx + $rx * $c,' ',$y+$ry +$ry*$s,'z')}" /> |
| | + </xsl:for-each> |
| | </xsl:for-each> |
| | - </xsl:for-each> |
| | - </svg:g> |
| | - </svg:svg> |
| | + </svg:g> |
| | + </svg:svg> |
| | + </div> |
| | + <div class="legend"> |
| | + <xsl:for-each select="//name"> |
| | + <xsl:variable name="fill"> |
| | + <xsl:call-template name="fill"> |
| | + <xsl:with-param name="piece" select="position()" /> |
| | + <xsl:with-param name="pieces" select="$pieces" /> |
| | + <xsl:with-param name="colour" select="$base_colour" /> |
| | + </xsl:call-template> |
| | + </xsl:variable> |
| | + |
| | + <xsl:variable name="percent" select="concat(.,' (',format-number(../value div $total, '0.00%'),')')" /> |
| | + |
| | + <div class="piece"> |
| | + <div class="bullet" style="background-color:{$fill}" /> |
| | + <xsl:value-of select="$percent" /> |
| | + </div> |
| | + |
| | + </xsl:for-each> |
| | + </div> |
| | </div> |
| | - |
| | - <xsl:variable name="bullet_size" select="5" /> |
| | - <xsl:variable name="font_size" select="6" /> |
| | - <xsl:variable name="line_space" select="2" /> |
| | - <xsl:variable name="legend_width" select="$pie_width" /> |
| | - <xsl:variable name="legend_height" select="($font_size + $line_space) * $pieces + $bullet_size" /> |
| | + </xsl:template> |
| | |
| | - <div class="legend"> |
| | - <svg:svg width="30%" height="30%" viewBox="0 0 {$legend_width + $bullet_size * 2} {$legend_height}" version="1.1"> |
| | + <!-- Select legend colour for corresponding pie piece. |
| | + <xsl:variable name="font_size" select="6" /> |
| | + <xsl:variable name="line_space" select="2" /> |
| | + <xsl:variable name="legend_width" select="$pie_width" /> |
| | + <xsl:variable name="legend_height" select="($font_size + $line_space) * $pieces + $bullet_size" /> |
| | + |
| | + <svg:svg width="{$legend_width}" height="{$legend_height}" viewBox="0 0 {$legend_width + $bullet_size * 2} {$legend_height}" version="1.1"> |
| | <xsl:for-each select="//name"> |
| | |
| | - <!-- Select legend colour for corresponding pie piece. --> |
| | <xsl:variable name="fill"> |
| | <xsl:call-template name="fill"> |
 |
| | <xsl:variable name="percent" select="concat(.,' (',format-number(../value div $total, '0.00%'),')')" /> |
| | |
| | - <svg:rect x="0" y="{$dy - $line_space}" width="{$bullet_size}" height="{$bullet_size}" fill="{$fill}" /> |
| | - <svg:text x="10" y="{$dy + $line_space}" font-size="{$font_size}"><xsl:value-of select="$percent" /></svg:text> |
| | + <svg:g> |
| | + <svg:rect x="0" y="{$dy - $line_space}" width="{$bullet_size}" height="{$bullet_size}" fill="{$fill}" /> |
| | + <svg:text x="10" y="{$dy + $line_space}" font-size="{$font_size}"><xsl:value-of select="$percent" /></svg:text> |
| | + </svg:g> |
| | </xsl:for-each> |
| | </svg:svg> |
| | - </div> |
| | - </xsl:template> |
| | + --> |
| | |
| | + |
| | <!-- http://en.wikipedia.org/wiki/HSL_and_HSV --> |
| | <xsl:template name="fill"> |