1
0
Fork 0
mirror of synced 2024-07-03 13:41:01 +12:00

chart title and description

This commit is contained in:
Damodar Lohani 2021-11-12 11:23:46 +05:45
parent 57f0de5fdd
commit 35dffe9d8e

View file

@ -155,67 +155,72 @@
data-service="storage.getUsage"
data-event="load"
data-name="usage">
<div class="box dashboard">
<div class="row responsive">
<div class="col span-12">
<div class="margin-top-negative-small margin-end-negative-large">
<div class="chart pull-end">
<input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Total Files=filesCount,Total Buckets=bucketsCount"/>
</div>
<div class="chart-metric">
<div class="value margin-bottom-small margin-top-small">
<span class="sum" data-ls-bind="{{usage.filesStorage|statsGetLast|humanFileSize}}">0</span>
<span class="sum" data-ls-bind="{{usage.filesStorage|statsGetLast|statsTotal|humanFileUnit}}"></span>
</div>
<div class="unit margin-start-no margin-bottom-small">Storage</div>
</div>
</div>
<ul class="chart-notes margin-top-small">
<li>Total Files <span data-ls-bind="({{usage.filesCount|statsGetLast|statsTotal}})"></span></li>
<li>Total Buckets <span data-ls-bind="({{usage.bucketsCount|statsGetLast|statsTotal}})"></span></li>
</ul>
<h3 class="margin-bottom-no">Objects</h3>
<p class="small">Count of buckets, files and total storage used over time</p>
<div class="box">
<div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
<div class="chart margin-bottom-no">
<input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Total Files=filesCount,Total Buckets=bucketsCount, Total storage=filesStorage"/>
</div>
</div>
</div>
<div class="box dashboard">
<ul class="chart-notes margin-top-small margin-bottom-large">
<li>Total Files <span data-ls-bind="({{usage.filesCount|statsGetLast|statsTotal}})"></span></li>
<li>Total Buckets <span data-ls-bind="({{usage.bucketsCount|statsGetLast|statsTotal}})"></span></li>
<li>Total Storage <span data-ls-bind="({{usage.filesStorage|statsGetLast|statsTotal}})"></span></li>
</ul>
<!-- <div class="box dashboard">
<div class="row responsive">
<div class="col span-6">
<div class="col span-4">
<div class="value"><span class="sum" data-ls-bind="{{usage.filesStorage|statsGetLast|humanFileSize}}">0</span>
<span class="sum" data-ls-bind="{{usage.filesStorage|statsGetLast|statsTotal|humanFileUnit}}"></span></div>
<div class="margin-top-small"><b class="text-size-small unit">Storage</b></div>
</div>
<div class="col span-4">
<div class="value"><span class="sum" data-ls-bind="{{usage.bucketsCount|statsGetLast|statsTotal}}" data-default="0">0</span></div>
<div class="margin-top-small"><b class="text-size-small unit">Buckets</b></div>
</div>
<div class="col span-6">
<div class="col span-4">
<div class="value"><span class="sum" data-ls-bind="{{usage.filesCount|statsGetLast}}" data-default="0">0</span></div>
<div class="margin-top-small"><b class="text-size-small unit">Files</b></div>
</div>
</div>
</div>
<div class="box margin-bottom-small margin-top-large">
<div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
<div class="chart margin-bottom-no">
<input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Buckets read=bucketsRead" data-height="140" />
</div>
</div>
</div>
<ul class="chart-notes margin-bottom-large">
<li>Buckets read</li>
</ul>
</div> -->
<!-- CRUDS class for graph fixed colors, use color codes from Docs for CRUD operations -->
<h3 class="margin-bottom-no">Buckets</h3>
<p>Count of bucket create, read, update and delete operations over time</p>
<div class="box margin-bottom-small">
<div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
<div class="chart margin-bottom-no">
<input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Buckets create=bucketsCreate,Buckets update=bucketsUpdate,Buckets delete=bucketsDelete" data-height="140" />
<div class="chart crud margin-bottom-no">
<input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Buckets create=bucketsCreate,Buckets read=bucketsRead,Buckets update=bucketsUpdate,Buckets delete=bucketsDelete" data-colors="create,read,update,delete" data-height="140" />
</div>
</div>
</div>
<ul class="chart-notes margin-bottom-large">
<ul class="chart-notes crud margin-bottom-large">
<li>Buckets create</li>
<li>Buckets read</li>
<li>Buckets update</li>
<li>Buckets delete</li>
</ul>
<h3 class="margin-bottom-no">Files</h3>
<p>Count of file create, read, update and delete operations over time</p>
<div class="box margin-bottom-small">
<div class="margin-start-negative-small margin-end-negative-small margin-top-negative-small margin-bottom-negative-small">
<div class="chart crud margin-bottom-no">
<input type="hidden" data-ls-bind="{{usage}}" data-forms-chart="Files create=filesCreate,Files read=filesRead,Files update=filesUpdate,Files delete=filesDelete" data-colors="create,read,update,delete" data-height="140" />
</div>
</div>
</div>
<ul class="chart-notes crud margin-bottom-large">
<li>Files create</li>
<li>Files read</li>
<li>Files update</li>
<li>Files delete</li>
</ul>
</div>
</li>
</ul>