mirror of
https://github.com/goharbor/harbor.git
synced 2024-11-26 12:15:20 +01:00
refactor gauge component using angular way,remove jquery
Signed-off-by: Meina Zhou <meinaz@vmware.com>
This commit is contained in:
Meina Zhou
parent
d1981d23b1
commit
081921cf89
6
src/portal/package-lock.json
generated
6
src/portal/package-lock.json
generated
@ -7728,12 +7728,6 @@
|
||||
"integrity": "sha1-43zwsX8ZnM4jvqcbIDk5Uka07E4=",
|
||||
"dev": true
|
||||
},
|
||||
"jquery": {
|
||||
"version": "3.3.1",
|
||||
"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz",
|
||||
"integrity": "sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg==",
|
||||
"dev": true
|
||||
},
|
||||
"js-base64": {
|
||||
"version": "2.4.8",
|
||||
"resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.8.tgz",
|
||||
|
||||
@ -15,7 +15,8 @@
|
||||
"build_lib": "ng build --prod lib",
|
||||
"npm_pack": "cd lib/dist && npm pack",
|
||||
"package": "npm run build_lib && npm run npm_pack",
|
||||
"link_lib": "cd lib/dist && npm link && cd ../../ && npm link @harbor/ui"
|
||||
"link_lib": "cd lib/dist && npm link && cd ../../ && npm link @harbor/ui",
|
||||
"build_all":"npm run build_lib && npm run link_lib && npm run build"
|
||||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
@ -63,7 +64,6 @@
|
||||
"enhanced-resolve": "^3.0.0",
|
||||
"jasmine-core": "~2.99.1",
|
||||
"jasmine-spec-reporter": "~4.2.1",
|
||||
"jquery": "^3.3.1",
|
||||
"karma": "~1.7.1",
|
||||
"karma-chrome-launcher": "~2.2.0",
|
||||
"karma-cli": "^1.0.1",
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<div class="{{sizeClass}}">
|
||||
<div class="esxc-gauge-container esxc-gauge">
|
||||
<div class="esxc-gauge-circle-bg"></div>
|
||||
<div #barOne class="esxc-gauge-circle-fill esxc-gauge-bar-one"></div>
|
||||
<div #barTwo class="esxc-gauge-circle-fill esxc-gauge-bar-two"></div>
|
||||
<div #barOne [style.transform]="'rotate(' + posOne + 'deg)'" [style.background-color]="_colorOne" [style.transition]="transition" class="esxc-gauge-circle-fill esxc-gauge-bar-one"></div>
|
||||
<div #barTwo [style.transform]="'rotate(' + posTwo + 'deg)'" [style.background-color]="_colorTwo" [style.transition]="transition" class="esxc-gauge-circle-fill esxc-gauge-bar-two"></div>
|
||||
<div class="esxc-gauge-circle-inner" [ngStyle]="{'background-color': backgroundColor}">
|
||||
<div class="esxc-gauge-circle-caption">
|
||||
<span class="esxc-value">{{used}}</span>
|
||||
|
||||
@ -52,239 +52,245 @@
|
||||
* Small size gauge sizing
|
||||
*/
|
||||
|
||||
.esxc-gauge-small .esxc-gauge-container {
|
||||
.esxc-gauge-small {
|
||||
.esxc-gauge-container {
|
||||
width: 60px;
|
||||
height: 30px;
|
||||
top: -8px;
|
||||
left: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-small .esxc-gauge-circle-fill {
|
||||
.esxc-gauge-circle-fill {
|
||||
height: 60px;
|
||||
border-radius: 30px;
|
||||
clip: rect(30px, 60px, 60px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-small .esxc-gauge-circle-bg {
|
||||
.esxc-gauge-circle-bg {
|
||||
height: 60px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-small .esxc-gauge-circle-inner {
|
||||
.esxc-gauge-circle-inner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 25px;
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-small .esxc-gauge-circle-caption {
|
||||
.esxc-gauge-circle-caption {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Medium size gauge sizing
|
||||
*/
|
||||
/*Small size*/
|
||||
|
||||
.esxc-gauge-medium .esxc-gauge-container {
|
||||
width: 130px;
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
.esxc-gauge-medium .esxc-gauge-circle-fill {
|
||||
height: 130px;
|
||||
border-radius: 130px;
|
||||
clip: rect(65px, 130px, 130px, 0);
|
||||
}
|
||||
|
||||
.esxc-gauge-medium .esxc-gauge-circle-bg {
|
||||
height: 130px;
|
||||
border-radius: 65px;
|
||||
}
|
||||
|
||||
.esxc-gauge-medium .esxc-gauge-circle-inner {
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
border-radius: 60px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
/*
|
||||
* Large size gauge sizing
|
||||
*/
|
||||
|
||||
.esxc-gauge-large .esxc-gauge-container {
|
||||
width: 260px;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.esxc-gauge-large .esxc-gauge-circle-fill {
|
||||
height: 260px;
|
||||
border-radius: 130px;
|
||||
clip: rect(130px, 260px, 260px, 0);
|
||||
}
|
||||
|
||||
.esxc-gauge-large .esxc-gauge-circle-bg {
|
||||
height: 260px;
|
||||
border-radius: 130px;
|
||||
}
|
||||
|
||||
.esxc-gauge-large .esxc-gauge-circle-inner {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
border-radius: 120px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.esxc-gauge-large .esxc-gauge-circle-caption {
|
||||
margin-top: 95px;
|
||||
}
|
||||
|
||||
/*Sall size*/
|
||||
|
||||
.esxc-gauge-small .esxc-gauge-circle-caption .esxc-value {
|
||||
.esxc-gauge-circle-caption .esxc-value {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-small .esxc-gauge-circle-caption .esxc-unit {
|
||||
.esxc-gauge-circle-caption .esxc-unit {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-small .esxc-gauge-circle-caption .esxc-loading {
|
||||
.esxc-gauge-circle-caption .esxc-loading {
|
||||
font-size: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-small .esxc-title {
|
||||
.esxc-title {
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
margin-top: 3px;
|
||||
position: relative;
|
||||
bottom: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-small .esxc-title .esxc-bar-title {
|
||||
.esxc-title .esxc-bar-title {
|
||||
float: left;
|
||||
text-align: right;
|
||||
width: 70px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-small .esxc-limit {
|
||||
.esxc-limit {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
top: -8px;
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-small .esxc-limit .esxc-value {
|
||||
.esxc-limit .esxc-value {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-small .esxc-limit .esxc-unit {
|
||||
.esxc-limit .esxc-unit {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-small .esxc-limit .esxc-label {
|
||||
.esxc-limit .esxc-label {
|
||||
font-size: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-small .esxc-limit .esxc-bar-limit {
|
||||
.esxc-limit .esxc-bar-limit {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
/*medium size*/
|
||||
|
||||
.esxc-gauge-medium .esxc-gauge-circle-caption {
|
||||
/*
|
||||
* Medium size gauge sizing
|
||||
*/
|
||||
.esxc-gauge-medium {
|
||||
.esxc-gauge-container {
|
||||
width: 130px;
|
||||
height: 65px;
|
||||
}
|
||||
|
||||
.esxc-gauge-circle-fill {
|
||||
height: 130px;
|
||||
border-radius: 130px;
|
||||
clip: rect(65px, 130px, 130px, 0);
|
||||
}
|
||||
|
||||
.esxc-gauge-circle-bg {
|
||||
height: 130px;
|
||||
border-radius: 65px;
|
||||
}
|
||||
|
||||
.esxc-gauge-circle-inner {
|
||||
height: 120px;
|
||||
width: 120px;
|
||||
border-radius: 60px;
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
/*medium size*/
|
||||
|
||||
.esxc-gauge-circle-caption {
|
||||
margin-top: 40px;
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-medium .esxc-gauge-circle-caption .esxc-value {
|
||||
.esxc-gauge-circle-caption .esxc-value {
|
||||
font-size: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-medium .esxc-gauge-circle-caption .esxc-unit {
|
||||
.esxc-gauge-circle-caption .esxc-unit {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-medium .esxc-gauge-circle-caption .esxc-loading {
|
||||
.esxc-gauge-circle-caption .esxc-loading {
|
||||
font-size: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-medium .esxc-limit {
|
||||
.esxc-limit {
|
||||
text-align: center;
|
||||
color: #565656;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-medium .esxc-limit .esxc-value {
|
||||
.esxc-limit .esxc-value {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-medium .esxc-limit .esxc-unit {
|
||||
.esxc-limit .esxc-unit {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-medium .esxc-limit .esxc-label {
|
||||
.esxc-limit .esxc-label {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-medium .esxc-title {
|
||||
.esxc-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #565656;
|
||||
text-align: center;
|
||||
margin-top: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*large size*/
|
||||
|
||||
.esxc-gauge-large .esxc-gauge-circle-caption .esxc-value {
|
||||
/*
|
||||
* Large size gauge sizing
|
||||
*/
|
||||
|
||||
.esxc-gauge-large {
|
||||
.esxc-gauge-container {
|
||||
width: 260px;
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.esxc-gauge-circle-fill {
|
||||
height: 260px;
|
||||
border-radius: 130px;
|
||||
clip: rect(130px, 260px, 260px, 0);
|
||||
}
|
||||
|
||||
.esxc-gauge-circle-bg {
|
||||
height: 260px;
|
||||
border-radius: 130px;
|
||||
}
|
||||
|
||||
.esxc-gauge-circle-inner {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
border-radius: 120px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.esxc-gauge-circle-caption {
|
||||
margin-top: 95px;
|
||||
}
|
||||
|
||||
/*large size*/
|
||||
|
||||
.esxc-gauge-circle-caption .esxc-value {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-large .esxc-gauge-circle-caption .esxc-unit {
|
||||
.esxc-gauge-circle-caption .esxc-unit {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-large .esxc-gauge-circle-caption .esxc-loading {
|
||||
.esxc-gauge-circle-caption .esxc-loading {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-large .esxc-limit {
|
||||
.esxc-limit {
|
||||
text-align: center;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-large .esxc-limit .esxc-value {
|
||||
.esxc-limit .esxc-value {
|
||||
font-size: 14px;
|
||||
color: #565656;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-large .esxc-limit .esxc-unit {
|
||||
.esxc-limit .esxc-unit {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-large .esxc-limit .esxc-label {
|
||||
.esxc-limit .esxc-label {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-large .esxc-limit .esxc-bar-limit {
|
||||
.esxc-limit .esxc-bar-limit {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.esxc-gauge-large .esxc-title {
|
||||
.esxc-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #565656;
|
||||
line-height: 18px;
|
||||
text-align: center;
|
||||
margin-top: -2px;
|
||||
}
|
||||
|
||||
.esxc-gauge-large .esxc-title .esxc-bar-title {
|
||||
.esxc-bar-title {
|
||||
float: left;
|
||||
text-align: right;
|
||||
width: 70px;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -19,8 +19,6 @@ import {
|
||||
ElementRef
|
||||
} from '@angular/core';
|
||||
|
||||
import * as $ from 'jquery';
|
||||
|
||||
const RESOURCE_COLOR_GREEN_NORMAL: string = '#5DB700';
|
||||
const RESOURCE_COLOR_ORANGE_NORMAL: string = '#FBBF00';
|
||||
const RESOURCE_COLOR_RED_NORMAL: string = '#EA400D';
|
||||
@ -43,6 +41,9 @@ export class GaugeComponent implements AfterViewInit {
|
||||
_title: string = "UNKNOWN"; // Lang key
|
||||
_free: number = 0;
|
||||
_threasHold: number = 0;
|
||||
posOne = 0;
|
||||
posTwo = 0;
|
||||
transition = '';
|
||||
|
||||
/**
|
||||
* Background color of the component. Default is white.
|
||||
@ -195,7 +196,6 @@ export class GaugeComponent implements AfterViewInit {
|
||||
|
||||
this._positionOne = percent;
|
||||
this.setBars();
|
||||
this.setColors();
|
||||
this.setAnimate();
|
||||
}
|
||||
|
||||
@ -204,58 +204,12 @@ export class GaugeComponent implements AfterViewInit {
|
||||
return;
|
||||
}
|
||||
|
||||
let barOne = $(this.barOne.nativeElement);
|
||||
let barTwo = $(this.barTwo.nativeElement);
|
||||
|
||||
if (!barOne || !barTwo) {
|
||||
return;
|
||||
}
|
||||
|
||||
let posOne, posTwo;
|
||||
|
||||
if (isNaN(this.positionOne)) {
|
||||
posOne = posTwo = 0;
|
||||
this.posOne = this.posTwo = 0;
|
||||
} else {
|
||||
posOne = (this.positionOne / 100) * 180;
|
||||
posTwo = (this.positionTwo / 100) * 180;
|
||||
this.posOne = (this.positionOne / 100) * 180;
|
||||
this.posTwo = (this.positionTwo / 100) * 180;
|
||||
}
|
||||
|
||||
barOne.css({
|
||||
'-webkit-transform': 'rotate(' + posOne + 'deg)',
|
||||
'-moz-transform': 'rotate(' + posOne + 'deg)',
|
||||
'-ms-transform': 'rotate(' + posOne + 'deg)',
|
||||
'-o-transform': 'rotate(' + posOne + 'deg)',
|
||||
'transform': 'rotate(' + posOne + 'deg)'
|
||||
});
|
||||
|
||||
barTwo.css({
|
||||
'-webkit-transform': 'rotate(' + posTwo + 'deg)',
|
||||
'-moz-transform': 'rotate(' + posTwo + 'deg)',
|
||||
'-ms-transform': 'rotate(' + posTwo + 'deg)',
|
||||
'-o-transform': 'rotate(' + posTwo + 'deg)',
|
||||
'transform': 'rotate(' + posTwo + 'deg)'
|
||||
});
|
||||
}
|
||||
|
||||
setColors() {
|
||||
if (!this.barOne || !this.barTwo) {
|
||||
return;
|
||||
}
|
||||
|
||||
let barOne = $(this.barOne.nativeElement);
|
||||
let barTwo = $(this.barTwo.nativeElement);
|
||||
|
||||
if (!barOne || !barTwo) {
|
||||
return;
|
||||
}
|
||||
|
||||
barOne.css({
|
||||
'background-color': this._colorOne
|
||||
});
|
||||
|
||||
barTwo.css({
|
||||
'background-color': this._colorTwo
|
||||
});
|
||||
}
|
||||
|
||||
setAnimate() {
|
||||
@ -263,29 +217,11 @@ export class GaugeComponent implements AfterViewInit {
|
||||
return;
|
||||
}
|
||||
|
||||
let barOne = $(this.barOne.nativeElement);
|
||||
let barTwo = $(this.barTwo.nativeElement);
|
||||
|
||||
if (!barOne || !barTwo) {
|
||||
return;
|
||||
}
|
||||
|
||||
let transition = 'transform 1s ease';
|
||||
let prefixes = ['webkit', 'moz', 'ms', 'o'];
|
||||
let css = {
|
||||
'transition': transition
|
||||
};
|
||||
|
||||
if (!this._animate) {
|
||||
transition = 'none';
|
||||
this.transition = 'none';
|
||||
} else {
|
||||
this.transition = 'transform 1s ease';
|
||||
}
|
||||
|
||||
for (let prefix of prefixes) {
|
||||
css['-' + prefix + '-transition'] = transition;
|
||||
}
|
||||
|
||||
barOne.css(css);
|
||||
barTwo.css(css);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user