| Author | Dave Jarvis <email> |
|---|---|
| Date | 2014-09-18 17:45:53 GMT-0700 |
| Commit | edb5f048837ff4cb2209067a24624344168da3ec |
| Parent | 8e8dc7f |
| Delta | 112 lines added, 59 lines removed, 53-line increase |
|---|
| <xsl:variable name="height" select="$width"/> | ||
| +<xsl:template match="resources"> | ||
| + <xsl:apply-templates mode="piechart"/> | ||
| +</xsl:template> | ||
| + | ||
| <!-- Convert XML data into a pie chart. --> | ||
| <xsl:template match="dataset" mode="piechart"> | ||
| </svg> | ||
| </div> | ||
| + | ||
| <!-- SVG 1.1 has no text flow abilities. --> | ||
| - <div class="legend"> | ||
| + <table class="legend" id="legend" name="legend"> | ||
| + <thead> | ||
| + <tr> | ||
| + <th colspan="2">Expense</th> | ||
| + <th>Amount</th> | ||
| + <th></th> | ||
| + </tr> | ||
| + </thead> | ||
| + <tbody> | ||
| <xsl:for-each select="data//name"> | ||
| <xsl:variable name="colour"> | ||
| <xsl:call-template name="fill"> | ||
| <xsl:with-param name="wedge" select="position()"/> | ||
| <xsl:with-param name="wedges" select="$wedges"/> | ||
| <xsl:with-param name="colour" select="$base_colour"/> | ||
| </xsl:call-template> | ||
| </xsl:variable> | ||
| - <xsl:variable name="percent"> | ||
| - <xsl:value-of select="."/> | ||
| - <xsl:text> (</xsl:text> | ||
| - <xsl:value-of | ||
| - select="format-number(../value div $total, '0.00%')"/> | ||
| - <xsl:text>)</xsl:text> | ||
| - </xsl:variable> | ||
| - | ||
| - <div class="piece"> | ||
| - <div class="bullet" style="background-color:{$colour}"/> | ||
| - <xsl:value-of select="$percent"/> | ||
| - </div> | ||
| + <xsl:variable name="amount" | ||
| + select="format-number(../value, '###,###')"/> | ||
| + | ||
| + <xsl:variable name="percent" | ||
| + select="format-number(../value div $total, '0.00%')"/> | ||
| + | ||
| + <tr class="wedge"> | ||
| + <td class="bullet"> | ||
| + <div class="bullet" style="background-color:{$colour}"/> | ||
| + </td> | ||
| + <td class="category"><xsl:value-of select="." /></td> | ||
| + <td class="amount"><xsl:value-of select="$amount" /></td> | ||
| + <td class="percent"><xsl:value-of select="$percent" /></td> | ||
| + </tr> | ||
| </xsl:for-each> | ||
| + </tbody> | ||
| + <tfoot> | ||
| + <tr> | ||
| + <td></td> | ||
| + <td class="total">Total</td> | ||
| + <td class="footer"> | ||
| + <xsl:value-of select="format-number(footer/value, '###,###')"/> | ||
| + </td> | ||
| + </tr> | ||
| + </tfoot> | ||
| + </table> | ||
| + <div class="legend"> | ||
| </div> | ||
| </div> | ||
| transform="translate({$radius},{$radius})" | ||
| d="M 0 0 L {$x1r} {$y1r} A {$r} {$r} 0 {$sweep} 0 {$x2r} {$y2r} Z"/> | ||
| +</xsl:template> | ||
| + | ||
| +<xsl:template match="title" mode="piechart"> | ||
| </xsl:template> | ||
| @import url( "xref.css" ); | ||
| @import url( "parts.css" ); | ||
| +@import url( "table.css" ); | ||
| .policy { | ||
| padding-bottom: 0.5em; | ||
| border-bottom: 1px solid black; | ||
| + margin-bottom: 0.5em; | ||
| } | ||
| .summary > .title { | ||
| border-bottom: 1px solid black; | ||
| + margin-bottom: 0.5em; | ||
| } | ||
| -.expenses { | ||
| +.chart { | ||
| display: flex; | ||
| flex-direction: row; | ||
| -} | ||
| - | ||
| -.resources > .title { | ||
| - margin-top: 0.5em; | ||
| - margin-bottom: 0.5em; | ||
| - font-size: 1.2em; | ||
| - border-bottom: none; | ||
| } | ||
| -.paragraph, .legend { | ||
| +.paragraph { | ||
| line-height: 120%; | ||
| margin-top: 0.5em; | ||
| height:1ex; | ||
| display: inline-block; | ||
| -} | ||
| - | ||
| -.dataset { | ||
| - display: table; | ||
| - line-height: 150%; | ||
| -} | ||
| - | ||
| -.header { | ||
| - background-color: black; | ||
| - color: white; | ||
| - display: table-row; | ||
| - font-weight: bold; | ||
| -} | ||
| - | ||
| -.footer { | ||
| - border-top: 3px double; | ||
| -} | ||
| - | ||
| -.data, .data:nth-child(odd) { | ||
| - display: table-row; | ||
| -} | ||
| - | ||
| -.data:nth-child(odd) { | ||
| - background-color: #EEE; | ||
| -} | ||
| - | ||
| -.name { | ||
| - display: table-cell; | ||
| - float: left; | ||
| - margin-right: 2em; | ||
| - padding-left: 0.25em; | ||
| -} | ||
| - | ||
| -.value { | ||
| - display: table-cell; | ||
| - float: right; | ||
| - padding-right: 0.25em; | ||
| } | ||
| </content> | ||
| </section> | ||
| + <section> | ||
| + <title>Asset Amortization</title> | ||
| + <content> | ||
| + <paragraph> | ||
| + The following items (purchased via loans) will be repaid in | ||
| + full within two years, contributing to further reductions in | ||
| + operating expenses: computing devices, peripherals, and | ||
| + software; office furniture; and vehicles. | ||
| + </paragraph> | ||
| + </content> | ||
| + </section> | ||
| + <section> | ||
| + <title>Rentals</title> | ||
| + <content> | ||
| + <paragraph> | ||
| + Office space is currently being rented near the downtown | ||
| + core. These costs can be reduced by moving the office into | ||
| + urban areas, making use of home offices, and sub-leasing | ||
| + unused areas. | ||
| + </paragraph> | ||
| + </content> | ||
| + </section> | ||
| </sections> | ||
| </part> |
| +/** | ||
| + * Decorates the tabular data for the pie chart values. | ||
| + */ | ||
| +table.legend { | ||
| + margin-left: 2em; | ||
| + | ||
| + border: 1px solid #eee; | ||
| +} | ||
| + | ||
| +th, td { | ||
| + padding: 4px; | ||
| +} | ||
| + | ||
| +th { | ||
| + padding-bottom: 8px; | ||
| +} | ||
| + | ||
| +td.amount, td.percent { | ||
| + text-align: right; | ||
| +} | ||
| + | ||
| +td.amount { | ||
| + border-right: 1px solid #eee; | ||
| +} | ||
| + | ||
| +tr:nth-child(even) { | ||
| + background-color: #eee; | ||
| +} | ||
| + | ||
| +table.legend > thead > tr > * { | ||
| + color: white; | ||
| + background-color: black; | ||
| +} | ||
| + | ||
| +table.legend > tfoot { | ||
| + border-top: 3px double black; | ||
| +} | ||
| + | ||
| +table.legend > tfoot > tr > td.footer { | ||
| + text-align: right; | ||
| +} | ||
| + | ||