<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
	version="1.0">

<xsl:output indent="yes"/>

<!-- Tamaño de la ventana -->

<xsl:variable name="xVentana">500</xsl:variable>
<xsl:variable name="yVentana">400</xsl:variable>

<!-- Margenes entre la ventana y la gráfica -->

<xsl:variable name="yMargenTop">50</xsl:variable>
<xsl:variable name="yMargenBottom">100</xsl:variable>
<xsl:variable name="xMarginLeft">50</xsl:variable>
<xsl:variable name="xMarginRight">50</xsl:variable>	

<!-- Altura del gráfico -->

<xsl:variable name="yGrafica">
	<xsl:value-of select="$yVentana - $yMargenTop - $yMargenBottom"/>
</xsl:variable>

<!-- Posición Y en la que empieza el gráfico -->

<xsl:variable name="posyGrafica">
	<xsl:value-of select="$yVentana - $yMargenBottom"/>
</xsl:variable>

<!-- Anchura del gráfico -->

<xsl:variable name="xGrafica">
	<xsl:value-of select="$xVentana - $xMarginLeft -  $xMarginRight"/>
</xsl:variable>

<!-- Número de columnas que tendra el gráfico -->

<xsl:variable name="nColumnas">
	<xsl:value-of select="count(//item)"/>
</xsl:variable>

<!-- Anchura que ocupara cada una de las columnas -->

<xsl:variable name="xEspacio">
	<xsl:value-of select="$xGrafica div ($nColumnas *2 + 1)"/>
</xsl:variable>

<!-- Valor máximo en el eje de las Y -->

<xsl:variable name="valorMaximo">
	<xsl:value-of select="/resultados/@valormaximo"/>
</xsl:variable>

<!-- Valor del intervalo en el eje de las Y -->

<xsl:variable name="valorIntervalo">
	<xsl:value-of select="/resultados/@intervalo"/>
</xsl:variable>


<xsl:template match="resultados">
	
	<svg width="{$xVentana}" height="{$yVentana}">

		<!-- Pintamos el rectangulo que contendra la gráfica -->

		<rect x="{$xMarginLeft}" 
          y="{$yMargenTop - 20}" 
          width="{$xGrafica}" 
          height="{$yGrafica + 20}" 
          style="fill:#E3DFCC;"/>

		<!-- Pintamos las lineas verticales -->

		<xsl:call-template name="plvertical"/>

		<!-- Pintamos las lineas horizontales y el texto que las acompaña -->

		<xsl:call-template name="plhorizontales"/> 

		<!-- Procesamos el elemento item para pintar las columnas -->
		
		<xsl:apply-templates select="item"/>
		
	</svg>
</xsl:template>


<!-- Para cada elemento item vamos pintando el rectangulo y el texto que le corresponde -->

<xsl:template match="item">

	<xsl:call-template name="pintarRectangulo">
    <xsl:with-param name="numColumna">
		<xsl:number count="*"/>
		</xsl:with-param>
  </xsl:call-template>    
	

	<g style="fill:#000000; font-size:12; font-family:Arial">
		<xsl:call-template name="ptextox">
    	<xsl:with-param name="numColumna">
			<xsl:number count="*"/>
			</xsl:with-param>
  	</xsl:call-template>
	</g>

	
</xsl:template>



<xsl:template name="pintarRectangulo">
	<xsl:param name="numColumna"></xsl:param>
	<xsl:variable name="altRectangulo">
		<xsl:value-of select="."/>
	</xsl:variable>
	<xsl:variable name="altRectanguloG">
		<xsl:value-of select="$altRectangulo * $yGrafica div $valorMaximo"/>
	</xsl:variable>	
	<rect x="{$xMarginLeft + $xEspacio +($xEspacio * 2 *($numColumna - 1))}" 
        y="{$posyGrafica - $altRectanguloG}" 
        style="fill:red; stroke:black; stroke-width:0.5" width="{$xEspacio}"         height="{$altRectanguloG}"/>
</xsl:template>



<!-- ************************************************************

     En esta regla de construcción pintamos el eje de la Y.

     ************************************************************ -->

<xsl:template name="plvertical">
	<line x1="{$xMarginLeft}" 
        y1="{$yMargenTop - 20}" 
        x2="{$xMarginLeft}" 
        y2="{$posyGrafica}" 
        style="stroke:#000000; stroke-width:0.1" />
</xsl:template> 

<!-- ************************************************************

     En las reglas de construcción:

       -plhorizontales
       -plhorizontales1
       -plhorizontales2

     pintamos el eje de las X y el resto de lineas horizontales.
     También aprovechamos para pintar el texto del eje de las Y.

       -ptextoy
	
     ************************************************************ -->

<xsl:template name="plhorizontales">
	<xsl:variable name="numLineas">
		<xsl:value-of select="$valorMaximo div $valorIntervalo"/>
	</xsl:variable>
	
	<xsl:call-template name="plhorizontales1">
		<xsl:with-param name="numLineas">
			<xsl:value-of select="$numLineas"/>
		</xsl:with-param>
	</xsl:call-template>
</xsl:template>

<xsl:template name="plhorizontales1">
	<xsl:param name="numLineas"></xsl:param>
	<xsl:param name="conNumLineas">0</xsl:param>
	<xsl:variable name="espLineas">
		<xsl:value-of select="$yGrafica div $numLineas"/>
	</xsl:variable>
	
	<xsl:if test="$numLineas + 1>$conNumLineas">

		<!-- Pintamos el texto en el eje de las Y -->

		<g style="fill:#000000; font-size:12; font-family:Arial">
		<xsl:call-template name="ptextoy">
			<xsl:with-param name="Texto">
				<xsl:value-of select="$conNumLineas * $valorIntervalo"/>
			</xsl:with-param>
			<xsl:with-param name="yLinea">
				<xsl:value-of select="$posyGrafica - $espLineas * $conNumLineas"/>
			</xsl:with-param>
		</xsl:call-template>
		</g>

		<!-- Pintamos las lineas horizontales -->

		<xsl:call-template name="plhorizontales2">
			<xsl:with-param name="yLinea">
				<xsl:value-of select="$posyGrafica - $espLineas * $conNumLineas"/>
			</xsl:with-param>
		</xsl:call-template> 
		<xsl:call-template name="plhorizontales1">
			<xsl:with-param name="numLineas">
				<xsl:value-of select="$numLineas"/>
			</xsl:with-param>
			<xsl:with-param name="conNumLineas">
				<xsl:value-of select="$conNumLineas + 1"/>
			</xsl:with-param>
		</xsl:call-template>
	</xsl:if>
</xsl:template>


<xsl:template name="plhorizontales2">
	<xsl:param name="yLinea"></xsl:param>
	<line x1="{$xMarginLeft}" 
        y1="{$yLinea}" 
        x2="{$xMarginLeft + $xGrafica}" 
        y2="{$yLinea}" 
        style="stroke:#000000; stroke-width:0.1" />	
</xsl:template>


<xsl:template name="ptextoy">
	<xsl:param name="Texto"></xsl:param>
	<xsl:param name="yLinea"></xsl:param>
	<text x="{$xMarginLeft - 30}" 
        y="{$yLinea}">
        <xsl:value-of select="$Texto"/>
  </text>
</xsl:template>

<!-- ************************************************************

     En esta regla de construcción pintamos el texto que se 
     visualiza en el eje de las X. Fijaros como lo giramos 90 
     grados para que se visualize en vertical.

     ************************************************************ -->

<xsl:template name="ptextox">
	<xsl:param name="numColumna"></xsl:param>
	<xsl:variable name="xTexto">
		<xsl:value-of select="$xMarginLeft + $xEspacio +($xEspacio * 2 *($numColumna - 1))"/>
	</xsl:variable>
	<xsl:variable name="yTexto">
		<xsl:value-of select="$yGrafica + 60"/>
	</xsl:variable>

		<text x="{$xTexto}" 
          y="{$yTexto}" 
          transform="translate({$xTexto},{$yTexto}) rotate(90) translate(-{$xTexto},-{$yTexto})">
          <xsl:value-of select="@nombre"/>
    </text>
	

</xsl:template>






</xsl:stylesheet>




