Merge pull request #310 from dod-ccpo/report-empty-states
Report empty states
This commit is contained in:
andrewdds
GitHub
commit
4f26768fe4
@ -2,6 +2,7 @@
|
|||||||
|
|
||||||
{% from "components/alert.html" import Alert %}
|
{% from "components/alert.html" import Alert %}
|
||||||
{% from "components/icon.html" import Icon %}
|
{% from "components/icon.html" import Icon %}
|
||||||
|
{% from "components/empty_state.html" import EmptyState %}
|
||||||
|
|
||||||
{% block workspace_content %}
|
{% block workspace_content %}
|
||||||
|
|
||||||
@ -102,341 +103,327 @@
|
|||||||
{% set two_months_ago_index = two_months_ago.strftime('%m/%Y') %}
|
{% set two_months_ago_index = two_months_ago.strftime('%m/%Y') %}
|
||||||
{% set reports_url = url_for("workspaces.workspace_reports", workspace_id=workspace.id) %}
|
{% set reports_url = url_for("workspaces.workspace_reports", workspace_id=workspace.id) %}
|
||||||
|
|
||||||
<budget-chart
|
{% if not monthly_totals['environments'] %}
|
||||||
budget={{ budget }}
|
|
||||||
current-month='{{ current_month_index }}'
|
|
||||||
expiration-date='{{ expiration_date }}'
|
|
||||||
v-bind:months='{{ cumulative_budget.months | tojson }}'
|
|
||||||
inline-template>
|
|
||||||
<div class='budget-chart panel' ref='panel'>
|
|
||||||
<header class='budget-chart__header panel__heading panel__heading--tight'>
|
|
||||||
<h2 class='h3'>Cumulative Budget</h2>
|
|
||||||
|
|
||||||
<div class='budget-chart__legend'>
|
{% set can_create_projects = user_can(permissions.ADD_APPLICATION_IN_WORKSPACE) %}
|
||||||
<dl class='budget-chart__legend__spend'>
|
{% set message = 'This Workspace has no Cloud Environments setup, hence there is no spending data to report. Create a Project with some Cloud Environments to get started.'
|
||||||
<div>
|
if can_create_projects
|
||||||
<dt>Monthly Spend</dt>
|
else 'This Workspace has no Cloud Environments setup, hence there is no spending data to report. Contact the Workspace Owner to set up some Cloud Environments.'
|
||||||
<dd class='budget-chart__legend__dot monthly'><span class='usa-sr-only'>Monthly spend visual key</span></dd>
|
%}
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
{{ EmptyState(
|
||||||
<dt>Accumulated Spend</dt>
|
'Nothing to report',
|
||||||
<dd class='budget-chart__legend__dot accumulated'><span class='usa-sr-only'>Accumulated spend visual key</span></dd>
|
action_label='Add a New Project' if can_create_projects else None,
|
||||||
</div>
|
action_href=url_for('workspaces.new_project', workspace_id=workspace.id) if can_create_projects else None,
|
||||||
</dl>
|
icon='chart',
|
||||||
<dl class='budget-chart__legend__projected'>
|
sub_message=message
|
||||||
<div>
|
) }}
|
||||||
<dt>Projected</dt>
|
{% else %}
|
||||||
<dd>
|
|
||||||
<div class='budget-chart__legend__line spend'><span class='usa-sr-only'>Projected monthly spend visual key</span></div>
|
|
||||||
<div class='budget-chart__legend__line accumulated'><span class='usa-sr-only'>Projected accumulated spend visual key</span></div>
|
|
||||||
</dd>
|
|
||||||
</div>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<svg v-bind:height='height' v-bind:width='width'>
|
<budget-chart
|
||||||
|
budget={{ budget }}
|
||||||
<defs>
|
current-month='{{ current_month_index }}'
|
||||||
<filter x="-0.04" y="0" width="1.08" height="1" class='filter__text-background' id="text-background">
|
expiration-date='{{ expiration_date }}'
|
||||||
<feFlood/>
|
v-bind:months='{{ cumulative_budget.months | tojson }}'
|
||||||
<feComposite in="SourceGraphic"/>
|
|
||||||
</filter>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
{# spend/projected budget path lines #}
|
|
||||||
<path class='budget-chart__projected-path' v-bind:d='projectedPath'></path>
|
|
||||||
<path class='budget-chart__spend-path' v-bind:d='spendPath'></path>
|
|
||||||
|
|
||||||
{# max budget line #}
|
|
||||||
<line
|
|
||||||
class='budget-chart__budget-line'
|
|
||||||
x1='0'
|
|
||||||
v-bind:x2='width'
|
|
||||||
v-bind:y1='budgetHeight'
|
|
||||||
v-bind:y2='budgetHeight'></line>
|
|
||||||
|
|
||||||
<g v-for='month in displayedMonths' >
|
|
||||||
|
|
||||||
{# make this clickable to focus on that month #}
|
|
||||||
<a v-bind:href='"{{ reports_url }}?month=" + month.date.monthIndex + "&year=" + month.date.year'>
|
|
||||||
|
|
||||||
<defs>
|
|
||||||
<filter
|
|
||||||
x="-0.04"
|
|
||||||
y="0"
|
|
||||||
width="1.08"
|
|
||||||
height="1"
|
|
||||||
class='filter__text-background'
|
|
||||||
v-bind:class='{ "filter__text-background--highlighted": month.isHighlighted }'
|
|
||||||
v-bind:id="'text-background__' +month.date.month + month.date.year">
|
|
||||||
<feFlood/>
|
|
||||||
<feComposite in="SourceGraphic"/>
|
|
||||||
</filter>
|
|
||||||
</defs>
|
|
||||||
|
|
||||||
<title>
|
|
||||||
<span v-html='month.date.month + " " + month.date.year'></span> | <!--
|
|
||||||
--><template v-if='month.cumulativeTotal'><!--
|
|
||||||
--><template v-if='month.budget && month.budget.spend'>Spend:</template><!--
|
|
||||||
--><template v-else>Projected Spend:</template><!--
|
|
||||||
--><span v-html='month.spendAmount'></span><!--
|
|
||||||
--> | <!--
|
|
||||||
--><template v-if='month.budget'>Total:</template><!--
|
|
||||||
--><template v-else>Projected Total:</template><!--
|
|
||||||
--><span v-html='month.cumulativeAmount'></span><!--
|
|
||||||
--></template><!--
|
|
||||||
|
|
||||||
--><template v-else>No spend for this month</template>
|
|
||||||
</title>
|
|
||||||
|
|
||||||
{# container block #}
|
|
||||||
<rect
|
|
||||||
class='budget-chart__block'
|
|
||||||
v-bind:class='{ "budget-chart__block--highlighted": month.isHighlighted, "budget-chart__block-is-expiration": month.isExpirationMonth }'
|
|
||||||
v-bind:width='month.metrics.blockWidth'
|
|
||||||
v-bind:x='month.metrics.blockX'
|
|
||||||
v-bind:height='height'></rect>
|
|
||||||
|
|
||||||
{# budget bar #}
|
|
||||||
<rect
|
|
||||||
v-if='month.budget'
|
|
||||||
class='budget-chart__bar'
|
|
||||||
v-bind:class='{ "budget-chart__bar--projected": month.budget.projected }'
|
|
||||||
v-bind:width='month.metrics.barWidth'
|
|
||||||
v-bind:height='month.metrics.barHeight'
|
|
||||||
v-bind:x='month.metrics.barX'
|
|
||||||
v-bind:y='month.metrics.barY'></rect>
|
|
||||||
|
|
||||||
{# projected budget bar #}
|
|
||||||
<rect
|
|
||||||
v-if='!month.budget'
|
|
||||||
class='budget-chart__bar budget-chart__bar--projected'
|
|
||||||
v-bind:width='month.metrics.barWidth'
|
|
||||||
v-bind:height='month.metrics.barHeight'
|
|
||||||
v-bind:x='month.metrics.barX'
|
|
||||||
v-bind:y='month.metrics.barY'></rect>
|
|
||||||
|
|
||||||
{# task order expiration line #}
|
|
||||||
<line
|
|
||||||
v-if='month.isExpirationMonth'
|
|
||||||
class='budget-chart__expiration-line'
|
|
||||||
v-bind:x1='month.metrics.cumulativeX'
|
|
||||||
v-bind:x2='month.metrics.cumulativeX'
|
|
||||||
y1='0'
|
|
||||||
v-bind:y2='baseHeight'></line>
|
|
||||||
|
|
||||||
{# task order expiration label #}
|
|
||||||
<text
|
|
||||||
v-bind:filter="'url(#text-background__' + month.date.month + month.date.year + ')'"
|
|
||||||
v-if='month.isExpirationMonth'
|
|
||||||
text-anchor='middle'
|
|
||||||
v-bind:x='month.metrics.cumulativeX'
|
|
||||||
v-bind:y='budgetHeight + 20'
|
|
||||||
class='budget-chart__label'>T.O. Expires</text>
|
|
||||||
|
|
||||||
{# cumulative dot #}
|
|
||||||
<circle
|
|
||||||
v-if='month.cumulativeTotal'
|
|
||||||
class='budget-chart__cumulative__dot'
|
|
||||||
v-bind:r='month.metrics.cumulativeR'
|
|
||||||
v-bind:cx='month.metrics.cumulativeX'
|
|
||||||
v-bind:cy='month.metrics.cumulativeY'></circle>
|
|
||||||
|
|
||||||
{# abbreviated cumulative label #}
|
|
||||||
<text
|
|
||||||
v-bind:filter="'url(#text-background__' + month.date.month + month.date.year + ')'"
|
|
||||||
v-if='month.cumulativeTotal'
|
|
||||||
v-bind:x='month.metrics.cumulativeX'
|
|
||||||
v-bind:y='month.metrics.cumulativeY - 10'
|
|
||||||
text-anchor='middle'
|
|
||||||
class='budget-chart__label'
|
|
||||||
v-html='month.abbreviatedCumulative'></text>
|
|
||||||
|
|
||||||
{# abbreviated spend label #}
|
|
||||||
<text
|
|
||||||
v-bind:filter="'url(#text-background__' + month.date.month + month.date.year + ')'"
|
|
||||||
v-bind:x='month.metrics.cumulativeX'
|
|
||||||
v-bind:y='baseHeight + 20'
|
|
||||||
text-anchor='middle'
|
|
||||||
class='budget-chart__label'
|
|
||||||
v-html='"+" + month.abbreviatedSpend'></text>
|
|
||||||
|
|
||||||
{# month label #}
|
|
||||||
<text
|
|
||||||
v-bind:filter="'url(#text-background__' + month.date.month + month.date.year + ')'"
|
|
||||||
v-bind:x='month.metrics.cumulativeX'
|
|
||||||
v-bind:y='baseHeight + 40'
|
|
||||||
text-anchor='middle'
|
|
||||||
class='budget-chart__label budget-chart__label--strong'
|
|
||||||
v-html='month.date.month'></text>
|
|
||||||
|
|
||||||
{# year label #}
|
|
||||||
<text
|
|
||||||
v-bind:filter="'url(#text-background__' + month.date.month + month.date.year + ')'"
|
|
||||||
v-if='month.showYear'
|
|
||||||
v-bind:x='month.metrics.cumulativeX'
|
|
||||||
v-bind:y='baseHeight + 55'
|
|
||||||
text-anchor='middle'
|
|
||||||
class='budget-chart__label budget-chart__label--strong'
|
|
||||||
v-html='month.date.year'></text>
|
|
||||||
</g>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<text
|
|
||||||
x='20'
|
|
||||||
v-bind:y='budgetHeight + 20'
|
|
||||||
class='budget-chart__label'>Total Budget</text>
|
|
||||||
<text
|
|
||||||
x='20'
|
|
||||||
v-bind:y='budgetHeight + 40'
|
|
||||||
class='budget-chart__label'
|
|
||||||
v-html='displayBudget'></text>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</budget-chart>
|
|
||||||
|
|
||||||
<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' onchange='location = this.value' class='spend-table__month-select'>
|
|
||||||
{% for m in cumulative_budget["months"] %}
|
|
||||||
{% set month = m | dateFromString %}
|
|
||||||
<option
|
|
||||||
{% if month.month == current_month.month and month.year == current_month.year %}
|
|
||||||
selected='selected'
|
|
||||||
{% endif %}
|
|
||||||
value='{{ url_for("workspaces.workspace_reports",
|
|
||||||
workspace_id=workspace.id,
|
|
||||||
month=month.month,
|
|
||||||
year=month.year) }}'
|
|
||||||
>
|
|
||||||
{{ month.strftime('%B %Y') }}
|
|
||||||
</option>
|
|
||||||
{% endfor %}
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<spend-table
|
|
||||||
v-bind:projects='{{ monthly_totals['projects'] | tojson }}'
|
|
||||||
v-bind:workspace='{{ workspace_totals | tojson }}'
|
|
||||||
v-bind:environments='{{ monthly_totals['environments'] | tojson }}'
|
|
||||||
current-month-index='{{ current_month_index }}'
|
|
||||||
prev-month-index='{{ prev_month_index }}'
|
|
||||||
two-months-ago-index='{{ two_months_ago_index }}'
|
|
||||||
inline-template>
|
inline-template>
|
||||||
<table>
|
<div class='budget-chart panel' ref='panel'>
|
||||||
<thead>
|
<header class='budget-chart__header panel__heading panel__heading--tight'>
|
||||||
<th scope='col'><span class='usa-sr-only'>Spending scope</span></th>
|
<h2 class='h3'>Cumulative Budget</h2>
|
||||||
<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'>
|
<div class='budget-chart__legend'>
|
||||||
<tr>
|
<dl class='budget-chart__legend__spend'>
|
||||||
<th scope='row'>Workspace Total</th>
|
<div>
|
||||||
<td class='table-cell--align-right previous-month'>{{ workspace_totals.get(two_months_ago_index, 0) | dollars }}</td>
|
<dt>Monthly Spend</dt>
|
||||||
<td class='table-cell--align-right previous-month'>{{ workspace_totals.get(prev_month_index, 0) | dollars }}</td>
|
<dd class='budget-chart__legend__dot monthly'><span class='usa-sr-only'>Monthly spend visual key</span></dd>
|
||||||
<td class='table-cell--align-right current-month'>{{ workspace_totals.get(current_month_index, 0) | dollars }}</td>
|
</div>
|
||||||
<td class='table-cell--expand current-month meter-cell'>
|
|
||||||
<meter value='{{ workspace_totals.get(current_month_index, 0) }}' min='0' max='{{ workspace_totals.get(current_month_index, 0) }}'></meter>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
|
|
||||||
<tbody v-for='(project, name) in projectsState' class='spend-table__project'>
|
<div>
|
||||||
<tr>
|
<dt>Accumulated Spend</dt>
|
||||||
<th scope='rowgroup'>
|
<dd class='budget-chart__legend__dot accumulated'><span class='usa-sr-only'>Accumulated spend visual key</span></dd>
|
||||||
<button v-on:click='toggle($event, name)' class='icon-link icon-link--large spend-table__project__toggler'>
|
</div>
|
||||||
<template v-if='project.isVisible'>{{ Icon('caret_down') }}</template>
|
</dl>
|
||||||
<template v-else>{{ Icon('caret_right') }}</template>
|
<dl class='budget-chart__legend__projected'>
|
||||||
<span v-html='name'></span>
|
<div>
|
||||||
</button>
|
<dt>Projected</dt>
|
||||||
</th>
|
<dd>
|
||||||
<td class='table-cell--align-right previous-month'>
|
<div class='budget-chart__legend__line spend'><span class='usa-sr-only'>Projected monthly spend visual key</span></div>
|
||||||
<span v-html='formatDollars(project[twoMonthsAgoIndex] || 0)'></span>
|
<div class='budget-chart__legend__line accumulated'><span class='usa-sr-only'>Projected accumulated spend visual key</span></div>
|
||||||
</td>
|
</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
<td class='table-cell--align-right previous-month'>
|
<svg v-bind:height='height' v-bind:width='width'>
|
||||||
<span v-html='formatDollars(project[prevMonthIndex] || 0)'></span>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td class='table-cell--align-right current-month'>
|
<defs>
|
||||||
<span v-html='formatDollars(project[currentMonthIndex] || 0)'></span>
|
<filter x="-0.04" y="0" width="1.08" height="1" class='filter__text-background' id="text-background">
|
||||||
</td>
|
<feFlood/>
|
||||||
|
<feComposite in="SourceGraphic"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
<td class='table-cell--expand current-month meter-cell'>
|
{# spend/projected budget path lines #}
|
||||||
<span class='spend-table__meter-value'>
|
<path class='budget-chart__projected-path' v-bind:d='projectedPath'></path>
|
||||||
<span v-html='round( 100 * ((project[currentMonthIndex] || 0) / (workspace[currentMonthIndex] || 1) )) + "%"'></span>
|
<path class='budget-chart__spend-path' v-bind:d='spendPath'></path>
|
||||||
</span>
|
|
||||||
<meter v-bind:value='project[currentMonthIndex] || 0' min='0' v-bind:max='workspace[currentMonthIndex] || 1'>
|
|
||||||
<div class='meter__fallback' v-bind:style='"width:" + round( 100 * ((project[currentMonthIndex] || 0) / (workspace[currentMonthIndex] || 1) )) + "%;"'></div>
|
|
||||||
</meter>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
|
|
||||||
<tr v-for='(environment, envName) in environments[name]' v-show='project.isVisible' class='spend-table__project__env'>
|
{# max budget line #}
|
||||||
<th scope='rowgroup'>
|
<line
|
||||||
<a href='#' class='icon-link spend-table__project__env'>
|
class='budget-chart__budget-line'
|
||||||
{{ Icon('link') }}
|
x1='0'
|
||||||
<span v-html='envName'></span>
|
v-bind:x2='width'
|
||||||
</a>
|
v-bind:y1='budgetHeight'
|
||||||
</th>
|
v-bind:y2='budgetHeight'></line>
|
||||||
|
|
||||||
<td class='table-cell--align-right previous-month'>
|
<g v-for='month in displayedMonths' >
|
||||||
<span v-html='formatDollars(environment[twoMonthsAgoIndex] || 0)'></span>
|
|
||||||
</td>
|
|
||||||
|
|
||||||
<td class='table-cell--align-right previous-month'>
|
{# make this clickable to focus on that month #}
|
||||||
<span v-html='formatDollars(environment[prevMonthIndex] || 0)'></span>
|
<a v-bind:href='"{{ reports_url }}?month=" + month.date.monthIndex + "&year=" + month.date.year'>
|
||||||
</td>
|
|
||||||
|
|
||||||
<td class='table-cell--align-right current-month'>
|
<defs>
|
||||||
<span v-html='formatDollars(environment[currentMonthIndex] || 0)'></span>
|
<filter
|
||||||
</td>
|
x="-0.04"
|
||||||
|
y="0"
|
||||||
|
width="1.08"
|
||||||
|
height="1"
|
||||||
|
class='filter__text-background'
|
||||||
|
v-bind:class='{ "filter__text-background--highlighted": month.isHighlighted }'
|
||||||
|
v-bind:id="'text-background__' +month.date.month + month.date.year">
|
||||||
|
<feFlood/>
|
||||||
|
<feComposite in="SourceGraphic"/>
|
||||||
|
</filter>
|
||||||
|
</defs>
|
||||||
|
|
||||||
<td class='table-cell--expand current-month'></td>
|
<title>
|
||||||
</tr>
|
<span v-html='month.date.month + " " + month.date.year'></span> | <!--
|
||||||
</tbody>
|
--><template v-if='month.cumulativeTotal'><!--
|
||||||
|
--><template v-if='month.budget && month.budget.spend'>Spend:</template><!--
|
||||||
|
--><template v-else>Projected Spend:</template><!--
|
||||||
|
--><span v-html='month.spendAmount'></span><!--
|
||||||
|
--> | <!--
|
||||||
|
--><template v-if='month.budget'>Total:</template><!--
|
||||||
|
--><template v-else>Projected Total:</template><!--
|
||||||
|
--><span v-html='month.cumulativeAmount'></span><!--
|
||||||
|
--></template><!--
|
||||||
|
|
||||||
{# {% for project_name, project_totals in monthly_totals['projects'].items() %}
|
--><template v-else>No spend for this month</template>
|
||||||
<tbody is='tbody-toggler' class='spend-table__project'>
|
</title>
|
||||||
|
|
||||||
|
{# container block #}
|
||||||
|
<rect
|
||||||
|
class='budget-chart__block'
|
||||||
|
v-bind:class='{ "budget-chart__block--highlighted": month.isHighlighted, "budget-chart__block-is-expiration": month.isExpirationMonth }'
|
||||||
|
v-bind:width='month.metrics.blockWidth'
|
||||||
|
v-bind:x='month.metrics.blockX'
|
||||||
|
v-bind:height='height'></rect>
|
||||||
|
|
||||||
|
{# budget bar #}
|
||||||
|
<rect
|
||||||
|
v-if='month.budget'
|
||||||
|
class='budget-chart__bar'
|
||||||
|
v-bind:class='{ "budget-chart__bar--projected": month.budget.projected }'
|
||||||
|
v-bind:width='month.metrics.barWidth'
|
||||||
|
v-bind:height='month.metrics.barHeight'
|
||||||
|
v-bind:x='month.metrics.barX'
|
||||||
|
v-bind:y='month.metrics.barY'></rect>
|
||||||
|
|
||||||
|
{# projected budget bar #}
|
||||||
|
<rect
|
||||||
|
v-if='!month.budget'
|
||||||
|
class='budget-chart__bar budget-chart__bar--projected'
|
||||||
|
v-bind:width='month.metrics.barWidth'
|
||||||
|
v-bind:height='month.metrics.barHeight'
|
||||||
|
v-bind:x='month.metrics.barX'
|
||||||
|
v-bind:y='month.metrics.barY'></rect>
|
||||||
|
|
||||||
|
{# task order expiration line #}
|
||||||
|
<line
|
||||||
|
v-if='month.isExpirationMonth'
|
||||||
|
class='budget-chart__expiration-line'
|
||||||
|
v-bind:x1='month.metrics.cumulativeX'
|
||||||
|
v-bind:x2='month.metrics.cumulativeX'
|
||||||
|
y1='0'
|
||||||
|
v-bind:y2='baseHeight'></line>
|
||||||
|
|
||||||
|
{# task order expiration label #}
|
||||||
|
<text
|
||||||
|
v-bind:filter="'url(#text-background__' + month.date.month + month.date.year + ')'"
|
||||||
|
v-if='month.isExpirationMonth'
|
||||||
|
text-anchor='middle'
|
||||||
|
v-bind:x='month.metrics.cumulativeX'
|
||||||
|
v-bind:y='budgetHeight + 20'
|
||||||
|
class='budget-chart__label'>T.O. Expires</text>
|
||||||
|
|
||||||
|
{# cumulative dot #}
|
||||||
|
<circle
|
||||||
|
v-if='month.cumulativeTotal'
|
||||||
|
class='budget-chart__cumulative__dot'
|
||||||
|
v-bind:r='month.metrics.cumulativeR'
|
||||||
|
v-bind:cx='month.metrics.cumulativeX'
|
||||||
|
v-bind:cy='month.metrics.cumulativeY'></circle>
|
||||||
|
|
||||||
|
{# abbreviated cumulative label #}
|
||||||
|
<text
|
||||||
|
v-bind:filter="'url(#text-background__' + month.date.month + month.date.year + ')'"
|
||||||
|
v-if='month.cumulativeTotal'
|
||||||
|
v-bind:x='month.metrics.cumulativeX'
|
||||||
|
v-bind:y='month.metrics.cumulativeY - 10'
|
||||||
|
text-anchor='middle'
|
||||||
|
class='budget-chart__label'
|
||||||
|
v-html='month.abbreviatedCumulative'></text>
|
||||||
|
|
||||||
|
{# abbreviated spend label #}
|
||||||
|
<text
|
||||||
|
v-bind:filter="'url(#text-background__' + month.date.month + month.date.year + ')'"
|
||||||
|
v-bind:x='month.metrics.cumulativeX'
|
||||||
|
v-bind:y='baseHeight + 20'
|
||||||
|
text-anchor='middle'
|
||||||
|
class='budget-chart__label'
|
||||||
|
v-html='"+" + month.abbreviatedSpend'></text>
|
||||||
|
|
||||||
|
{# month label #}
|
||||||
|
<text
|
||||||
|
v-bind:filter="'url(#text-background__' + month.date.month + month.date.year + ')'"
|
||||||
|
v-bind:x='month.metrics.cumulativeX'
|
||||||
|
v-bind:y='baseHeight + 40'
|
||||||
|
text-anchor='middle'
|
||||||
|
class='budget-chart__label budget-chart__label--strong'
|
||||||
|
v-html='month.date.month'></text>
|
||||||
|
|
||||||
|
{# year label #}
|
||||||
|
<text
|
||||||
|
v-bind:filter="'url(#text-background__' + month.date.month + month.date.year + ')'"
|
||||||
|
v-if='month.showYear'
|
||||||
|
v-bind:x='month.metrics.cumulativeX'
|
||||||
|
v-bind:y='baseHeight + 55'
|
||||||
|
text-anchor='middle'
|
||||||
|
class='budget-chart__label budget-chart__label--strong'
|
||||||
|
v-html='month.date.year'></text>
|
||||||
|
</g>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<text
|
||||||
|
x='20'
|
||||||
|
v-bind:y='budgetHeight + 20'
|
||||||
|
class='budget-chart__label'>Total Budget</text>
|
||||||
|
<text
|
||||||
|
x='20'
|
||||||
|
v-bind:y='budgetHeight + 40'
|
||||||
|
class='budget-chart__label'
|
||||||
|
v-html='displayBudget'></text>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</budget-chart>
|
||||||
|
|
||||||
|
<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' onchange='location = this.value' class='spend-table__month-select'>
|
||||||
|
{% for m in cumulative_budget["months"] %}
|
||||||
|
{% set month = m | dateFromString %}
|
||||||
|
<option
|
||||||
|
{% if month.month == current_month.month and month.year == current_month.year %}
|
||||||
|
selected='selected'
|
||||||
|
{% endif %}
|
||||||
|
value='{{ url_for("workspaces.workspace_reports",
|
||||||
|
workspace_id=workspace.id,
|
||||||
|
month=month.month,
|
||||||
|
year=month.year) }}'
|
||||||
|
>
|
||||||
|
{{ month.strftime('%B %Y') }}
|
||||||
|
</option>
|
||||||
|
{% endfor %}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<spend-table
|
||||||
|
v-bind:projects='{{ monthly_totals['projects'] | tojson }}'
|
||||||
|
v-bind:workspace='{{ workspace_totals | tojson }}'
|
||||||
|
v-bind:environments='{{ monthly_totals['environments'] | tojson }}'
|
||||||
|
current-month-index='{{ current_month_index }}'
|
||||||
|
prev-month-index='{{ prev_month_index }}'
|
||||||
|
two-months-ago-index='{{ two_months_ago_index }}'
|
||||||
|
inline-template>
|
||||||
|
<table>
|
||||||
|
<thead>
|
||||||
|
<th scope='col'><span class='usa-sr-only'>Spending scope</span></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'>{{ 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='{{ workspace_totals.get(current_month_index, 0) }}' min='0' max='{{ workspace_totals.get(current_month_index, 0) }}'></meter>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
|
||||||
|
<tbody v-for='(project, name) in projectsState' class='spend-table__project'>
|
||||||
<tr>
|
<tr>
|
||||||
<th scope='rowgroup'>
|
<th scope='rowgroup'>
|
||||||
<button v-on:click='props.toggle' class='icon-link icon-link--large spend-table__project__toggler'>
|
<button v-on:click='toggle($event, name)' class='icon-link icon-link--large spend-table__project__toggler'>
|
||||||
<template v-if='props.isVisible'>{{ Icon('caret_down') }}</template>
|
<template v-if='project.isVisible'>{{ Icon('caret_down') }}</template>
|
||||||
<template v-else>{{ Icon('caret_right') }}</template>
|
<template v-else>{{ Icon('caret_right') }}</template>
|
||||||
{{ project_name }}
|
<span v-html='name'></span>
|
||||||
</button>
|
</button>
|
||||||
</th>
|
</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'>
|
||||||
<td class='table-cell--align-right previous-month'>{{ project_totals.get(prev_month_index, 0) | dollars }}</td>
|
<span v-html='formatDollars(project[twoMonthsAgoIndex] || 0)'></span>
|
||||||
<td class='table-cell--align-right current-month'>{{ project_totals.get(current_month_index, 0) | dollars }}</td>
|
</td>
|
||||||
|
|
||||||
|
<td class='table-cell--align-right previous-month'>
|
||||||
|
<span v-html='formatDollars(project[prevMonthIndex] || 0)'></span>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class='table-cell--align-right current-month'>
|
||||||
|
<span v-html='formatDollars(project[currentMonthIndex] || 0)'></span>
|
||||||
|
</td>
|
||||||
|
|
||||||
<td class='table-cell--expand current-month meter-cell'>
|
<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>
|
<span class='spend-table__meter-value'>
|
||||||
<meter value='{{ project_totals.get(current_month_index, 0) }}' min='0' max='{{ workspace_totals.get(current_month_index, 0) }}'></meter>
|
<span v-html='round( 100 * ((project[currentMonthIndex] || 0) / (workspace[currentMonthIndex] || 1) )) + "%"'></span>
|
||||||
|
</span>
|
||||||
|
<meter v-bind:value='project[currentMonthIndex] || 0' min='0' v-bind:max='workspace[currentMonthIndex] || 1'>
|
||||||
|
<div class='meter__fallback' v-bind:style='"width:" + round( 100 * ((project[currentMonthIndex] || 0) / (workspace[currentMonthIndex] || 1) )) + "%;"'></div>
|
||||||
|
</meter>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
||||||
{% for env_name, env_totals in monthly_totals['environments'][project_name].items() %}
|
<tr v-for='(environment, envName) in environments[name]' v-show='project.isVisible' class='spend-table__project__env'>
|
||||||
<tr v-show='props.isVisible'>
|
<th scope='rowgroup'>
|
||||||
<th scope='rowgroup'><a href='#' class='icon-link spend-table__project__env'>{{ Icon('link') }} {{ env_name }}</a></th>
|
<a href='#' class='icon-link spend-table__project__env'>
|
||||||
<td class='table-cell--align-right previous-month'>{{ env_totals.get(two_months_ago_index, 0) | dollars }}</td>
|
{{ Icon('link') }}
|
||||||
<td class='table-cell--align-right previous-month'>{{ env_totals.get(prev_month_index, 0) | dollars }}</td>
|
<span v-html='envName'></span>
|
||||||
<td class='table-cell--align-right current-month'>{{ env_totals.get(current_month_index, 0) | dollars }}</td>
|
</a>
|
||||||
<td class='table-cell--expand current-month'></td>
|
</th>
|
||||||
</tr>
|
|
||||||
{% endfor %}
|
|
||||||
|
|
||||||
</template>
|
<td class='table-cell--align-right previous-month'>
|
||||||
</tbody>
|
<span v-html='formatDollars(environment[twoMonthsAgoIndex] || 0)'></span>
|
||||||
{% endfor %} #}
|
</td>
|
||||||
</table>
|
|
||||||
</spend-table>
|
<td class='table-cell--align-right previous-month'>
|
||||||
</div>
|
<span v-html='formatDollars(environment[prevMonthIndex] || 0)'></span>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class='table-cell--align-right current-month'>
|
||||||
|
<span v-html='formatDollars(environment[currentMonthIndex] || 0)'></span>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
<td class='table-cell--expand current-month'></td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</spend-table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% endif %}
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user