show change ratio for profit model calculator

This commit is contained in:
omair saleh
2021-10-26 10:51:06 +08:00
parent ef1759379e
commit 2cb8f9f407
@@ -96,31 +96,22 @@
</div>
<div class="row">
<div class="col">
<div class="card no-border bg-master-lightest widget-loader-bar m-b-10">
<div class="container-xs-height full-height">
<div class="row-xs-height">
<div class="col-xs-height col-top">
<div class="card-header top-left top-right">
<div class="card-title">
<span class="font-montserrat fs-11 all-caps">Projected CBM</span>
</div>
</div>
<div class="widget-9 card no-border no-margin widget-loader-bar" :class="[{'bg-success-light': ((report.projected_cbm - report.total_cbm) / report.total_cbm) >= 0}, {'bg-danger-light': ((report.projected_cbm - report.total_cbm) / report.total_cbm) < 0}]">
<div class="full-height d-flex flex-column">
<div class="card-header ">
<div class="card-title text-black">
<span class="font-montserrat fs-11 all-caps">Projected CBM</span>
</div>
</div>
<div class="row-xs-height">
<div class="col-xs-height col-top">
<div class="p-l-20 p-t-50 p-b-40 p-r-20">
<h3 class="no-margin p-b-5">{{(Math.ceil(report.projected_cbm * 1000) / 1000).toFixed(3)}}</h3>
<span class="small hint-text pull-left">{{((report.projected_cbm / 800) * 100).toFixed(2)}}%</span>
<span class="pull-right small text-primary">Goal: 800 CBM </span>
</div>
</div>
<div class="p-l-20">
<h3 class="no-margin p-b-5 text-white">{{(Math.ceil(report.projected_cbm * 1000) / 1000).toFixed(3)}}</h3>
<span class="small hint-text pull-left">
<span class="label font-montserrat m-r-5"><i class="fa m-r-5" :class="[{'fa-angle-double-up': ((report.projected_cbm - report.total_cbm) / report.total_cbm) >= 0}, {'fa-angle-double-down': ((report.projected_cbm - report.total_cbm) / report.total_cbm) < 0}]"></i>{{(((report.projected_cbm - report.total_cbm) / report.total_cbm) * 100).toFixed(2)}}%</span>
</span>
</div>
<div class="row-xs-height">
<div class="col-xs-height col-bottom">
<div class="progress progress-small m-b-0">
<div class="progress-bar progress-bar-primary" :style="{'width': ((report.projected_cbm / 800) * 100).toFixed(2)+'%'}"></div>
</div>
<div class="mt-auto">
<div class="progress progress-small m-b-20">
<div class="progress-bar progress-bar-white" :style="{'width': ((report.projected_cbm / 800) * 100).toFixed(2)+'%'}"></div>
</div>
</div>
</div>