Merge pull request #250 from dod-ccpo/mock-reporting
Add mock reporting data
This commit is contained in:
patricksmithdds
GitHub
@@ -19,24 +19,27 @@
|
||||
<div class='row'>
|
||||
<h2 class='spend-summary__heading col'>Workspace Total Spend</h2>
|
||||
<dl class='spend-summary__budget'>
|
||||
{% set budget = workspace_totals['budget'] %}
|
||||
{% set spent = workspace_totals['spent'] %}
|
||||
{% set remaining = budget - spent %}
|
||||
<div>
|
||||
<dt>Budget </dt>
|
||||
<dd>$100,000,000</dd>
|
||||
<dd>{{ budget | dollars }}</dd>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<dt>Remaining</dt>
|
||||
<dd>$60,000,000</dd>
|
||||
<dd>{{ remaining | dollars }}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<meter value='40000000' min='0' max='100000000' title='$40,000,000 Total spend to date'></meter>
|
||||
<meter value='{{ spent }}' min='0' max='{{ budget }}' title='{{ spent | dollars }} Total spend to date'></meter>
|
||||
|
||||
<dl class='spend-summary__spent'>
|
||||
<dt>Total spend to date</dt>
|
||||
<dd>$40,000,00</dd>
|
||||
<dd>{{ spent | dollars }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
@@ -67,7 +70,7 @@
|
||||
</div>
|
||||
</dl>
|
||||
|
||||
<a href='/' class='icon-link'>
|
||||
<a href='#' class='icon-link'>
|
||||
Manage Task Order
|
||||
</a>
|
||||
</div>
|
||||
@@ -86,110 +89,73 @@
|
||||
|
||||
</div>
|
||||
|
||||
{% set workspace_totals = monthly_totals['workspace'] %}
|
||||
{% set current_month_index = current_month.strftime('%m/%Y') %}
|
||||
{% set prev_month_index = prev_month.strftime('%m/%Y') %}
|
||||
{% set two_months_ago_index = two_months_ago.strftime('%m/%Y') %}
|
||||
|
||||
<div class='spend-table responsive-table-wrapper'>
|
||||
<div class='spend-table__header'>
|
||||
<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='03/2019'>{{ current_month.strftime('%B %Y') }}</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'>{{ two_months_ago.strftime('%B %Y') }}</th>
|
||||
<th scope='col' class='table-cell--align-right previous-month'>{{ prev_month.strftime('%B %Y') }}</th>
|
||||
<th scope='col' class='table-cell--align-right current-month'>{{ current_month.strftime('%B %Y') }}</th>
|
||||
<td class='current-month'></td>
|
||||
</thead>
|
||||
|
||||
<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.get(two_months_ago_index, 0) | dollars }}</td>
|
||||
<td class='table-cell--align-right previous-month'>{{ workspace_totals.get(prev_month_index, 0) | dollars }}</td>
|
||||
<td class='table-cell--align-right current-month'>{{ workspace_totals.get(current_month_index, 0) | dollars }}</td>
|
||||
<td class='table-cell--expand current-month meter-cell'>
|
||||
<meter value='62000' min='0' max='62000'></meter>
|
||||
<meter value='{{ workspace_totals.get(current_month_index, 0) }}' min='0' max='{{ workspace_totals.get(current_month_index, 0) }}'></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_index, 0) | dollars }}</td>
|
||||
<td class='table-cell--align-right previous-month'>{{ project_totals.get(prev_month_index, 0) | dollars }}</td>
|
||||
<td class='table-cell--align-right current-month'>{{ project_totals.get(current_month_index, 0) | dollars }}</td>
|
||||
<td class='table-cell--expand current-month meter-cell'>
|
||||
<span class='spend-table__meter-value'>{{ (100 * (project_totals.get(current_month_index, 0) / workspace_totals.get(current_month_index, 1))) | round | int }}%</span>
|
||||
<meter value='{{ project_totals.get(current_month_index, 0) }}' min='0' max='{{ workspace_totals.get(current_month_index, 0) }}'></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_index, 0) | dollars }}</td>
|
||||
<td class='table-cell--align-right previous-month'>{{ env_totals.get(prev_month_index, 0) | dollars }}</td>
|
||||
<td class='table-cell--align-right current-month'>{{ env_totals.get(current_month_index, 0) | dollars }}</td>
|
||||
<td class='table-cell--expand current-month'></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</template>
|
||||
</tbody>
|
||||
{% endfor %}
|
||||
</table>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user