You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@airavata.apache.org by ma...@apache.org on 2021/09/28 19:45:30 UTC
[airavata-django-portal] branch develop updated: AIRAVATA-3515 Fix
overflow/wrapping of large statistics numbers
This is an automated email from the ASF dual-hosted git repository.
machristie pushed a commit to branch develop
in repository https://gitbox.apache.org/repos/asf/airavata-django-portal.git
The following commit(s) were added to refs/heads/develop by this push:
new 4eb3445 AIRAVATA-3515 Fix overflow/wrapping of large statistics numbers
4eb3445 is described below
commit 4eb344558f07517ad160784205555f6d3b19ba4c
Author: Marcus Christie <ma...@apache.org>
AuthorDate: Tue Sep 28 15:45:01 2021 -0400
AIRAVATA-3515 Fix overflow/wrapping of large statistics numbers
---
.../statistics/ExperimentStatisticsCard.vue | 22 ++++++++++++++++++++--
.../statistics/ExperimentStatisticsContainer.vue | 12 ++++++------
2 files changed, 26 insertions(+), 8 deletions(-)
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsCard.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsCard.vue
index 85eb9ae..1403332 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsCard.vue
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsCard.vue
@@ -6,7 +6,9 @@
class="statistics-card"
>
<div slot="header" class="text-right">
- <div class="statistic-count">{{ count }}</div>
+ <div class="statistic-count text-nowrap">
+ <abbr :title="count">{{ displayedCount }}</abbr>
+ </div>
<div>{{ title }}</div>
</div>
<b-link
@@ -49,14 +51,30 @@ export default {
default: () => [],
},
},
+ computed: {
+ displayedCount() {
+ // Round large numbers and display m for 10^6 and k for 10^3
+ if (this.count >= Math.pow(10, 6)) {
+ return (this.count / Math.pow(10, 6)).toFixed(0) + "m";
+ } else if (this.count >= Math.pow(10, 3)) {
+ return (this.count / Math.pow(10, 3)).toFixed(0) + "k";
+ } else {
+ return this.count;
+ }
+ },
+ },
};
</script>
<style scoped>
.statistic-count {
- font-size: 3rem;
+ font-size: 2.8rem;
+ overflow: hidden;
}
.statistics-card {
height: calc(100% - 30px);
}
+abbr {
+ text-decoration: none;
+}
</style>
diff --git a/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsContainer.vue b/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsContainer.vue
index 13987e6..6f6a4b6 100644
--- a/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsContainer.vue
+++ b/django_airavata/apps/admin/static/django_airavata_admin/src/components/statistics/ExperimentStatisticsContainer.vue
@@ -145,7 +145,7 @@
</div>
</div>
<div class="row">
- <div class="col-lg-2 col-md-4">
+ <div class="col-xl-2 col-md-4">
<experiment-statistics-card
bg-variant="primary"
header-text-variant="white"
@@ -156,7 +156,7 @@
<span slot="link-text">All</span>
</experiment-statistics-card>
</div>
- <div class="col-lg-2 col-md-4">
+ <div class="col-xl-2 col-md-4">
<experiment-statistics-card
bg-variant="light"
:count="experimentStatistics.createdExperimentCount || 0"
@@ -166,7 +166,7 @@
>
</experiment-statistics-card>
</div>
- <div class="col-lg-2 col-md-4">
+ <div class="col-xl-2 col-md-4">
<experiment-statistics-card
bg-variant="light"
header-text-variant="success"
@@ -177,7 +177,7 @@
>
</experiment-statistics-card>
</div>
- <div class="col-lg-2 col-md-4">
+ <div class="col-xl-2 col-md-4">
<experiment-statistics-card
bg-variant="success"
header-text-variant="white"
@@ -189,7 +189,7 @@
>
</experiment-statistics-card>
</div>
- <div class="col-lg-2 col-md-4">
+ <div class="col-xl-2 col-md-4">
<experiment-statistics-card
bg-variant="warning"
header-text-variant="white"
@@ -201,7 +201,7 @@
>
</experiment-statistics-card>
</div>
- <div class="col-lg-2 col-md-4">
+ <div class="col-xl-2 col-md-4">
<experiment-statistics-card
bg-variant="danger"
header-text-variant="white"