Merge pull request #103 from ryck/feature/improve-humanize-duration

pull/104/head
Jason Kulatunga 4 years ago committed by GitHub
commit 77971edf5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -1922,6 +1922,11 @@
"integrity": "sha512-pGF/zvYOACZ/gLGWdQH8zSwteQS1epp68yRcVLJMgUck/MjEn/FBYmPub9pXT8C1e4a8YZfHo1CKyV8q1vKUnQ==", "integrity": "sha512-pGF/zvYOACZ/gLGWdQH8zSwteQS1epp68yRcVLJMgUck/MjEn/FBYmPub9pXT8C1e4a8YZfHo1CKyV8q1vKUnQ==",
"dev": true "dev": true
}, },
"@types/humanize-duration": {
"version": "3.18.1",
"resolved": "https://registry.npmjs.org/@types/humanize-duration/-/humanize-duration-3.18.1.tgz",
"integrity": "sha512-MUgbY3CF7hg/a/jogixmAufLjJBQT7WEf8Q+kYJkOc47ytngg1IuZobCngdTjAgY83JWEogippge5O5fplaQlw=="
},
"@types/jasmine": { "@types/jasmine": {
"version": "3.5.10", "version": "3.5.10",
"resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.5.10.tgz", "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-3.5.10.tgz",
@ -6064,6 +6069,11 @@
} }
} }
}, },
"humanize-duration": {
"version": "3.24.0",
"resolved": "https://registry.npmjs.org/humanize-duration/-/humanize-duration-3.24.0.tgz",
"integrity": "sha512-B3udnqisaDeRsvUSb+5n2hjxhABI9jotB+i1IEhgHhguTeM5LxIUKoVIu7UpeyaPOygr/Fnv7UhOi45kYYG+tg=="
},
"humanize-ms": { "humanize-ms": {
"version": "1.2.1", "version": "1.2.1",
"resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz", "resolved": "https://registry.npmjs.org/humanize-ms/-/humanize-ms-1.2.1.tgz",

@ -39,9 +39,11 @@
"@fullcalendar/moment": "4.4.0", "@fullcalendar/moment": "4.4.0",
"@fullcalendar/rrule": "4.4.0", "@fullcalendar/rrule": "4.4.0",
"@fullcalendar/timegrid": "4.4.0", "@fullcalendar/timegrid": "4.4.0",
"@types/humanize-duration": "^3.18.1",
"apexcharts": "3.19.0", "apexcharts": "3.19.0",
"crypto-js": "3.3.0", "crypto-js": "3.3.0",
"highlight.js": "10.0.1", "highlight.js": "10.0.1",
"humanize-duration": "^3.24.0",
"lodash": "4.17.15", "lodash": "4.17.15",
"moment": "2.24.0", "moment": "2.24.0",
"ng-apexcharts": "1.2.3", "ng-apexcharts": "1.2.3",

@ -105,7 +105,8 @@
</div> </div>
<div class="flex flex-col mx-6 my-3 xs:w-full"> <div class="flex flex-col mx-6 my-3 xs:w-full">
<div class="font-semibold text-xs text-hint uppercase tracking-wider leading-none">Powered On</div> <div class="font-semibold text-xs text-hint uppercase tracking-wider leading-none">Powered On</div>
<div class="mt-2 font-medium text-3xl leading-none">{{ humanizeHours(disk.smart_results[0]?.power_on_hours) }}</div> <div class="mt-2 font-medium text-3xl leading-none" *ngIf="disk.smart_results[0]?.power_on_hours; else unknownPoweredOn">{{ humanizeDuration(disk.smart_results[0]?.power_on_hours * 60 * 60 * 1000, { round: true, largest: 1, units: ['y', 'd', 'h'] }) }}</div>
<ng-template #unknownPoweredOn><div class="mt-2 font-medium text-3xl leading-none">--</div></ng-template>
</div> </div>
</div> </div>
</div> </div>

@ -8,6 +8,7 @@ import { DashboardService } from 'app/modules/dashboard/dashboard.service';
import * as moment from "moment"; import * as moment from "moment";
import {MatDialog} from '@angular/material/dialog'; import {MatDialog} from '@angular/material/dialog';
import { DashboardSettingsComponent } from 'app/layout/common/dashboard-settings/dashboard-settings.component'; import { DashboardSettingsComponent } from 'app/layout/common/dashboard-settings/dashboard-settings.component';
import humanizeDuration from 'humanize-duration'
@Component({ @Component({
selector : 'example', selector : 'example',
@ -184,23 +185,6 @@ export class DashboardComponent implements OnInit, AfterViewInit, OnDestroy
return item.id || index; return item.id || index;
} }
humanizeHours(hours: number): string { readonly humanizeDuration = humanizeDuration;
if(!hours){
return '--'
}
var value: number
let unit = ""
if(hours > (24*365)){ //more than a year
value = Math.round((hours/(24*365)) * 10)/10
unit = "years"
} else if (hours > 24){
value = Math.round((hours/24) *10 )/10
unit = "days"
} else{
value = hours
unit = "hours"
}
return `${value} ${unit}`
}
} }

@ -96,8 +96,8 @@
<div>{{data.data.smart_results[0]?.power_cycle_count}}</div> <div>{{data.data.smart_results[0]?.power_cycle_count}}</div>
<div class="text-secondary text-md">Power Cycle Count</div> <div class="text-secondary text-md">Power Cycle Count</div>
</div> </div>
<div class="my-2 col-span-2 lt-md:col-span-1"> <div *ngIf="data.data.smart_results[0]?.power_on_hours" class="my-2 col-span-2 lt-md:col-span-1">
<div matTooltip="{{data.data.smart_results[0]?.power_on_hours}} hours">{{humanizeHours(data.data.smart_results[0]?.power_on_hours)}}</div> <div matTooltip="{{humanizeDuration(data.data.smart_results[0]?.power_on_hours * 60 * 60 * 1000, { conjunction: ' and ', serialComma: false })}}">{{humanizeDuration(data.data.smart_results[0]?.power_on_hours *60 * 60 * 1000, { round: true, largest: 1, units: ['y', 'd', 'h'] })}}</div>
<div class="text-secondary text-md">Powered On</div> <div class="text-secondary text-md">Powered On</div>
</div> </div>
<div class="my-2 col-span-2 lt-md:col-span-1"> <div class="my-2 col-span-2 lt-md:col-span-1">

@ -8,6 +8,7 @@ import {takeUntil} from "rxjs/operators";
import {fadeOut} from "../../../@treo/animations/fade"; import {fadeOut} from "../../../@treo/animations/fade";
import {DetailSettingsComponent} from "app/layout/common/detail-settings/detail-settings.component"; import {DetailSettingsComponent} from "app/layout/common/detail-settings/detail-settings.component";
import {MatDialog} from "@angular/material/dialog"; import {MatDialog} from "@angular/material/dialog";
import humanizeDuration from 'humanize-duration';
@Component({ @Component({
selector: 'detail', selector: 'detail',
@ -320,23 +321,6 @@ export class DetailComponent implements OnInit, AfterViewInit, OnDestroy {
// return item.id || index; // return item.id || index;
} }
humanizeHours(hours: number): string { readonly humanizeDuration = humanizeDuration;
if(!hours){
return '--'
}
var value: number
let unit = ""
if(hours > (24*365)){ //more than a year
value = Math.round((hours/(24*365)) * 10)/10
unit = "years"
} else if (hours > 24){
value = Math.round((hours/24) *10 )/10
unit = "days"
} else{
value = hours
unit = "hours"
}
return `${value} ${unit}`
}
} }

Loading…
Cancel
Save