Add mock monthly reporting data

This commit is contained in:
Patrick Smith
2018-09-05 15:59:57 -04:00
parent f33a7b4a9f
commit a9d705daac
3 changed files with 200 additions and 86 deletions

View File

@@ -94,105 +94,67 @@
<h2 class='spend-table__title'>Total spend per month</h2>
<select name='month' id='month' class='spend-table__month-select'>
<option value='06/2018'>June 2018</option>
<option value='05/2019'>May 2019</option>
</select>
</div>
<table>
<thead>
<th scope='col'><span class='usa-sr-only'>Spending scope</span></th>
<th scope='col' class='table-cell--align-right previous-month'>April 2018</th>
<th scope='col' class='table-cell--align-right previous-month'>May 2018</th>
<th scope='col' class='table-cell--align-right current-month'>June 2018</th>
<th scope='col' class='table-cell--align-right previous-month'>March 2019</th>
<th scope='col' class='table-cell--align-right previous-month'>April 2019</th>
<th scope='col' class='table-cell--align-right current-month'>May 2019</th>
<td class='current-month'></td>
</thead>
{% set workspace_totals = monthly_totals['workspace'] %}
{% set current_month = '05/2019' %}
{% set prev_month = '04/2019' %}
{% set two_months_ago = '03/2019' %}
<tbody class='spend-table__workspace'>
<tr>
<th scope='row'>Workspace Total</th>
<td class='table-cell--align-right previous-month'>$58,000</td>
<td class='table-cell--align-right previous-month'>$60,000</td>
<td class='table-cell--align-right current-month'>$62,000</td>
<td class='table-cell--align-right previous-month'>{{ workspace_totals[two_months_ago] | dollars }}</td>
<td class='table-cell--align-right previous-month'>{{ workspace_totals[prev_month] | dollars }}</td>
<td class='table-cell--align-right current-month'>{{ workspace_totals[current_month] | dollars }}</td>
<td class='table-cell--expand current-month meter-cell'>
<meter value='62000' min='0' max='62000'></meter>
<meter value='{{ workspace_totals[current_month] }}' min='0' max='{{ workspace_totals[current_month] }}'></meter>
</td>
</tr>
</tbody>
<tbody is='toggler' class='spend-table__project'>
<template slot-scope='{ isVisible, toggle }'>
<tr>
<th scope='rowgroup'>
<button v-on:click='toggle' class='icon-link icon-link--large spend-table__project__toggler'>
<template v-if='isVisible'>{{ Icon('caret_down') }}</template>
<template v-else>{{ Icon('caret_right') }}</template>
Code.mil
</button>
</th>
<td class='table-cell--align-right previous-month'>$29,000</td>
<td class='table-cell--align-right previous-month'>$30,000</td>
<td class='table-cell--align-right current-month'>$31,000</td>
<td class='table-cell--expand current-month meter-cell'>
<span class='spend-table__meter-value'>50%</span>
<meter value='31000' min='0' max='62000'></meter>
</td>
</tr>
<tr v-show='isVisible'>
<th scope='rowgroup'><a href='/' class='icon-link spend-table__project__env'>{{ Icon('link') }} Production</a></th>
<td class='table-cell--align-right previous-month'>$14,000</td>
<td class='table-cell--align-right previous-month'>$15,000</td>
<td class='table-cell--align-right current-month'>$16,000</td>
<td class='table-cell--expand current-month'></td>
</tr>
<tr v-show='isVisible'>
<th scope='rowgroup'><a href='/' class='icon-link spend-table__project__env'>{{ Icon('link') }} Development</a></th>
<td class='table-cell--align-right previous-month'>$12,000</td>
<td class='table-cell--align-right previous-month'>$13,000</td>
<td class='table-cell--align-right current-month'>$14,000</td>
<td class='table-cell--expand current-month'></td>
</tr>
</template>
</tbody>
<tbody is='toggler' class='spend-table__project'>
<template slot-scope='{ isVisible, toggle }'>
<tr>
<th scope='rowgroup'>
<button v-on:click='toggle' class='icon-link icon-link--large spend-table__project__toggler'>
<template v-if='isVisible'>{{ Icon('caret_down') }}</template>
<template v-else>{{ Icon('caret_right') }}</template>
Digital Dojo
</button>
</th>
<td class='table-cell--align-right previous-month'>$29,000</td>
<td class='table-cell--align-right previous-month'>$30,000</td>
<td class='table-cell--align-right current-month'>$31,000</td>
<td class='table-cell--expand current-month meter-cell'>
<span class='spend-table__meter-value'>50%</span>
<meter value='31000' min='0' max='62000'></meter>
</td>
</tr>
<tr v-show='isVisible'>
<th scope='rowgroup'><a href='/' class='icon-link spend-table__project__env'>{{ Icon('link') }} Production</a></th>
<td class='table-cell--align-right previous-month'>$14,000</td>
<td class='table-cell--align-right previous-month'>$15,000</td>
<td class='table-cell--align-right current-month'>$16,000</td>
<td class='table-cell--expand current-month'></td>
</tr>
<tr v-show='isVisible'>
<th scope='rowgroup'><a href='/' class='icon-link spend-table__project__env'>{{ Icon('link') }} Development</a></th>
<td class='table-cell--align-right previous-month'>$12,000</td>
<td class='table-cell--align-right previous-month'>$13,000</td>
<td class='table-cell--align-right current-month'>$14,000</td>
<td class='table-cell--expand current-month'></td>
</tr>
</template>
</tbody>
{% for project_name, project_totals in monthly_totals['projects'].items() %}
<tbody is='toggler' class='spend-table__project'>
<template slot-scope='{ isVisible, toggle }'>
<tr>
<th scope='rowgroup'>
<button v-on:click='toggle' class='icon-link icon-link--large spend-table__project__toggler'>
<template v-if='isVisible'>{{ Icon('caret_down') }}</template>
<template v-else>{{ Icon('caret_right') }}</template>
{{ project_name }}
</button>
</th>
<td class='table-cell--align-right previous-month'>{{ project_totals.get(two_months_ago, 0) | dollars }}</td>
<td class='table-cell--align-right previous-month'>{{ project_totals.get(prev_month, 0) | dollars }}</td>
<td class='table-cell--align-right current-month'>{{ project_totals.get(current_month, 0) | dollars }}</td>
<td class='table-cell--expand current-month meter-cell'>
<span class='spend-table__meter-value'>{{ (100 * (project_totals.get(current_month) / workspace_totals[current_month])) | round | int }}%</span>
<meter value='{{ project_totals[current_month] }}' min='0' max='{{ workspace_totals[current_month] }}'></meter>
</td>
</tr>
{% for env_name, env_totals in monthly_totals['environments'][project_name].items() %}
<tr v-show='isVisible'>
<th scope='rowgroup'><a href='/' class='icon-link spend-table__project__env'>{{ Icon('link') }} {{ env_name }}</a></th>
<td class='table-cell--align-right previous-month'>{{ env_totals.get(two_months_ago, 0) | dollars }}</td>
<td class='table-cell--align-right previous-month'>{{ env_totals.get(prev_month, 0) | dollars }}</td>
<td class='table-cell--align-right current-month'>{{ env_totals.get(current_month, 0) | dollars }}</td>
<td class='table-cell--expand current-month'></td>
</tr>
{% endfor %}
</template>
</tbody>
{% endfor %}
</table>
</div>