<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<!--
    XSL-Transformationsvorlage zur SVG-Umsetzung von XML-Daten:
    Dr. Thomas Meinike 01/06 - http://svglbc.datenverdrahten.de
-->

<xsl:output
  method="xml"
  version="1.0"
  encoding="ISO-8859-1"
  standalone="no"
  doctype-public="-//W3C//DTD SVG 1.1//EN"
  doctype-system="http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"
  media-type="image/svg+xml"
  indent="yes"/>

<xsl:template match="daten">

<!-- Vorgaben als Variablen -->
<xsl:variable name="xstep" select="85"/>
<xsl:variable name="ystep" select="40"/>
<xsl:variable name="diff" select="20"/>
<xsl:variable name="oo" select="0.8"/>
<xsl:variable name="ov" select="0.6"/>
<xsl:variable name="or" select="0.4"/>
<xsl:variable name="sf" select="count(satz) - 1"/>

<!-- SVG-Grundgerüst mit Wurzelelement, Titel, Beschreibung und Definitionsteil -->
<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     viewBox="0 0 {170 + $xstep * $sf} 500" width="100%" height="100%"
     onload="if(document.implementation.hasFeature('org.w3c.dom.svg','1.0') &amp;&amp; window.XML)InitSMIL(evt)">

<title>Daten als 3D-Balkengrafik</title>
<desc>XSLT-Umsetzung von XML-Daten nach SVG von Dr. Thomas Meinike 2006 - http://svglbc.datenverdrahten.de</desc>

<defs>
  <!-- Nachbildung von Animationselementen für Firefox 1.5 mit SmilScript von Vectoreal.com -->
  <script xlink:href="smilScript.jsz" type="text/javascript"/>
</defs>

<!-- Umgebungsrechteck der gesamten Grafik -->
<rect x="0" y="0" width="{170 + $xstep * $sf}" height="500" fill="#FFF" stroke="none"/>

<!-- Diagrammfläche hinten -->
<polygon points="50,470 70,450 {130 + $xstep * $sf},450 {130 + $xstep * $sf},50 70,50 50,70" fill="#FFF"/>

<!-- Diagrammfläche unten -->
<polygon points="50,470 70,450 {130 + $xstep * $sf},450 {110 + $xstep * $sf},470" fill="#EEE"/>

<!-- Achsen und Teilungen -->
<g fill="none" stroke="#CCC" stroke-width="1.5px">
  <!-- Achse links -->
  <polyline points="50,70 50,470"/>

  <!-- Achse unten -->
  <polyline points="50,470 {110 + $xstep * $sf},470"/>

  <!-- Achse hinten -->
  <polyline points="70,50 70,450"/>

  <!-- Achse rechts -->
  <polyline points="{130 + $xstep * $sf},50 {130 + $xstep * $sf},450 {110 + $xstep * $sf},470"/>

  <!-- Achsenteilung links mit Zwischenteilungen auf dem Hintergrund - Dachlinie und Kopien -->
  <polyline points="45,70 50,70 70,50 {130 + $xstep * $sf},50"/>
  <polyline points="45,70 50,70 70,50 {130 + $xstep * $sf},50" transform="translate(0, 40)"/>
  <polyline points="45,70 50,70 70,50 {130 + $xstep * $sf},50" transform="translate(0, 80)"/>
  <polyline points="45,70 50,70 70,50 {130 + $xstep * $sf},50" transform="translate(0,120)"/>
  <polyline points="45,70 50,70 70,50 {130 + $xstep * $sf},50" transform="translate(0,160)"/>
  <polyline points="45,70 50,70 70,50 {130 + $xstep * $sf},50" transform="translate(0,200)"/>
  <polyline points="45,70 50,70 70,50 {130 + $xstep * $sf},50" transform="translate(0,240)"/>
  <polyline points="45,70 50,70 70,50 {130 + $xstep * $sf},50" transform="translate(0,280)"/>
  <polyline points="45,70 50,70 70,50 {130 + $xstep * $sf},50" transform="translate(0,320)"/>
  <polyline points="45,70 50,70 70,50 {130 + $xstep * $sf},50" transform="translate(0,360)"/>
  <polyline points="45,70 50,70 70,50 {130 + $xstep * $sf},50" transform="translate(0,400)"/>
</g>

<!-- Achsen-Texte links -->
<g fill="#000" font-family="Arial, Helvetica, sans-serif" font-size="12px">
  <text x="25" y="75" transform="translate(20,-20)">  %</text>
  <text x="25" y="75" transform="translate(-5,  0)">100</text>
  <text x="25" y="75" transform="translate( 0, 40)"> 90</text>
  <text x="25" y="75" transform="translate( 0, 80)"> 80</text>
  <text x="25" y="75" transform="translate( 0,120)"> 70</text>
  <text x="25" y="75" transform="translate( 0,160)"> 60</text>
  <text x="25" y="75" transform="translate( 0,200)"> 50</text>
  <text x="25" y="75" transform="translate( 0,240)"> 40</text>
  <text x="25" y="75" transform="translate( 0,280)"> 30</text>
  <text x="25" y="75" transform="translate( 0,320)"> 20</text>
  <text x="25" y="75" transform="translate( 0,360)"> 10</text>
  <text x="25" y="75" transform="translate( 7,400)">  0</text>
</g>

<!-- Inhalt des infotext-Attributes ausgeben, sofern vorhanden -->
<xsl:if test="@infotext">
  <text x="70" y="30" fill="#000" font-family="Arial, Helvetica, sans-serif" font-size="18px">
    <xsl:value-of select="@infotext"/>
  </text>
</xsl:if>

<!-- Inhalt des infourl-Attributes ausgeben, sofern vorhanden -->
<xsl:if test="@infourl">
  <a xlink:href="{@infourl}">
    <text x="70" y="45" fill="#999" font-family="Arial, Helvetica, sans-serif" font-size="10px">[Datenquelle]
      <set attributeName="fill" attributeType="XML" to="#F00" begin="mouseover"/>
      <set attributeName="fill" attributeType="XML" to="#999" begin="mouseout"/>
    </text>
  </a>
</xsl:if>

<a xlink:href="http://svglbc.datenverdrahten.de">
  <text x="10" y="490" fill="#999" font-family="Arial, Helvetica, sans-serif" font-size="8px">&lt;TM 2006/&gt;</text>
</a>

<!-- Beginn der eigentlichen XML-Datenauswertung -->
<xsl:for-each select="satz">

  <xsl:sort select="wert" data-type="number" order="descending"/>   

  <xsl:variable name="i" select="position() - 1"/>
  <xsl:variable name="wert" select="wert"/>

  <!-- Gruppe mit den Inhalten der einzelnen Balken -->
  <g id="b{$i + 1}" fill="{farbe}" stroke="none">

    <!-- Polygon hinten zum Überdecken der Linien -->
    <polygon fill="#FFF" visibility="hidden" points="{70 + $i * $xstep},470 {70 + $i * $xstep},{70 + ((100 - $wert) div 10 - 0.5) * $ystep + $diff} {90 + $i * $xstep},{50 + ((100 - $wert) div 10 - 0.5) * $ystep + $diff} {130 + $i * $xstep},{50 + ((100 - $wert) div 10 - 0.5) * $ystep + $diff} {130 + $i * $xstep},450 {110 + $i * $xstep},470">
      <set attributeName="visibility" attributeType="XML" to="visible" begin="pv{$i + 1}.begin"/>
    </polygon>

    <!-- Polygon vorn -->
    <polygon opacity="{$ov}" visibility="hidden" points="{70 + $i * $xstep},470 {70 + $i * $xstep},{70 + ((100 - $wert) div 10 - 0.5) * $ystep + $diff} {110 + $i * $xstep},{70 + ((100 - $wert) div 10 - 0.5) * $ystep + $diff} {110 + $i * $xstep},470">
      <set attributeName="opacity" attributeType="XML" to="0" begin="0s"/>
      <set attributeName="visibility" attributeType="XML" to="visible" begin="{1 + $i * 3}s"/>
      <animate id="pv{$i + 1}" attributeName="opacity" attributeType="XML" from="0" to="{$ov}" begin="{1 + $i * 3}s" dur="2s" fill="freeze"/>
    </polygon>

    <!-- Polygon rechts -->
    <polygon opacity="{$or}" visibility="hidden" points="{110 + $i * $xstep},{70 + ((100 - $wert) div 10 - 0.5) * $ystep + $diff} {130 + $i * $xstep},{50 + ((100 - $wert) div 10 - 0.5) * $ystep + $diff} {130 + $i * $xstep},450 {110 + $i * $xstep},470">
      <set attributeName="opacity" attributeType="XML" to="0" begin="0s"/>
      <set attributeName="visibility" attributeType="XML" to="visible" begin="{1 + $i * 3}s"/>
      <animate attributeName="opacity" attributeType="XML" from="0" to="{$or}" begin="{1 + $i * 3}s" dur="2s" fill="freeze"/>
    </polygon>

    <!-- Polygon oben -->
    <polygon opacity="{$oo}" visibility="hidden" points="{70 + $i * $xstep},{70 + ((100 - $wert) div 10 - 0.5) * $ystep + $diff} {90 + $i * $xstep},{50 + ((100 - $wert) div 10 - 0.5) * $ystep + $diff} {130 + $i * $xstep},{50 + ((100 - $wert) div 10 - 0.5) * $ystep + $diff} {110 + $i * $xstep},{70 + ((100 - $wert) div 10 - 0.5) * $ystep + $diff}">
      <set attributeName="opacity" attributeType="XML" to="0" begin="0s"/>
      <set attributeName="visibility" attributeType="XML" to="visible" begin="{1 + $i * 3}s"/>
      <animate attributeName="opacity" attributeType="XML" from="0" to="{$oo}" begin="{1 + $i * 3}s" dur="2s" fill="freeze"/>
    </polygon>

    <!-- Achsenteilung unten -->
    <polyline points="{70 + $i * $xstep},470 {70 + $i * $xstep},475" fill="none" stroke="#CCC" stroke-width="1.5px"/>

    <!-- Achsentext unten -->
    <text x="{70 + $i * $xstep}" y="490" fill="#000" font-family="Arial, Helvetica, sans-serif" font-size="12px">
      <xsl:value-of select="text"/>
    </text>

    <!-- Wertausgabe als Text auf Rechteck zur Überdeckung von Hintergrundlinien -->
    <g visibility="hidden">
      <rect x="{90 + $i * $xstep}" y="{36 + ((100 - $wert) div 10 - 0.5) * $ystep + $diff}" width="35" height="10px" fill="#FFF"/>
      <text x="{90 + $i * $xstep}" y="{45 + ((100 - $wert) div 10 - 0.5) * $ystep + $diff}" fill="#000" font-family="Arial, Helvetica, sans-serif" font-size="10px">
        <xsl:value-of select="$wert"/><xsl:text>&#160;%&#160;</xsl:text>
      </text>
      <set attributeName="visibility" attributeType="XML" to="visible" begin="{3 + $i * 3}s"/>
    </g>

  </g>

</xsl:for-each>

</svg>

</xsl:template>

</xsl:stylesheet>

