style: gauge chart style
MODIFY
src/app/components/charts/gauge-chart/gauge-chart.component.html
src/app/components/charts/gauge-chart/gauge-chart.component.html
-<div class="chart-container">
- <h2>{{ name }}</h2>
- <div class="chart">
+<div class="chart mat-elevation-z2">
+ <h3 class="chart-header primary">{{ name }}</h3>
+ <mat-divider></mat-divider>
+ <div class="ngx-wrapper">
<ngx-charts-gauge
- class="second"
[results]="data"
[legend]="legend"
[max]="limit"
[legendPosition]="legendPosition"
[scheme]="colorScheme"
+ [view]="[380, 256]"
+ [valueFormatting]="disableValueLabel"
>
</ngx-charts-gauge>
</div>
+
+ <div class="info-icon">
+ <mat-icon [inline]="true" color="primary">tune</mat-icon>
+ </div>
+
<div class="infos">
- <h4>Usage ({{ period }})</h4>
- <h2>
- {{ currentValue }} <span class="primary">/ {{ limit }}</span>
- </h2>
- <h3>{{ percentage }}% used</h3>
+ <div class="text2">USAGE ({{ period }})</div>
+ <div class="text-big3 letter-spacing">{{ currentValue }} / <span class="primary">{{ limit }}</span></div>
+ <div class="info-bottom text-big1">
+ <mat-divider></mat-divider>
+ <span>{{ percentage }}% used</span>
+ </div>
</div>
</div>

MODIFY
src/app/components/charts/gauge-chart/gauge-chart.component.scss
src/app/components/charts/gauge-chart/gauge-chart.component.scss
@@ -2,8 +2,54 @@ h2, h3, h4 {
text-align: center;
}
+.chart{
+ display: flex;
+ flex-direction: column;
+ width: 308px;
+ height: 336px;
+}
+
+.mat-divider-horizontal{
+ position: unset;
+}
+
.infos {
position: relative;
- z-index: 50;
- top: -5rem
+ bottom: 147px;
+ display: flex;
+ flex-direction: column;
+ text-align: center;
+}
+
+.info-icon{
+ text-align: center;
+ bottom: 176px;
+ position: relative;
+ font-size: 52px;
+}
+
+.bottom-area{
+ border-bottom-right-radius: 2px;
+ border-bottom-left-radius: 2px;
+}
+
+.chart-header{
+ margin: 8px auto;
+}
+
+.letter-spacing{
+ letter-spacing: 0.08rem;
+}
+
+.info-bottom{
+ display: flex;
+ flex-direction: column;
+}
+
+.ngx-wrapper{
+ display: flex;
+}
+
+::ng-deep .ngx-charts{
+ margin-left: -39px !important;
}

MODIFY
src/app/components/charts/gauge-chart/gauge-chart.component.ts
src/app/components/charts/gauge-chart/gauge-chart.component.ts
@@ -20,6 +20,8 @@ export class GaugeChartComponent implements OnInit {
name: string | undefined;
colorScheme: any | undefined;
+ disableValueLabel = () => '';
+
ngOnInit(): void {
this.getPrimaryColor();
this.setupChart();

MODIFY
src/app/components/marketplace-api-description/marketplace-api-description.component.scss
src/app/components/marketplace-api-description/marketplace-api-description.component.scss
@@ -25,7 +25,7 @@ mat-panel-title {
width: 75%;
#icon {
- margin: 2em 2em 0 2em;
+ margin: 2em 1.4em 0 0;
}
#shortDescription {
@@ -70,5 +70,5 @@ mat-grid-list {
}
.mat-expansion-panel-header.mat-expanded{
- background-color: rgba(0, 0, 0, 0.02) !important;
+ background-color: rgba(0, 0, 0, 0.04) !important;
}

MODIFY
src/app/components/my-apps-manage-api/my-apps-manage-api.component.html
src/app/components/my-apps-manage-api/my-apps-manage-api.component.html
<div class="card-header bg-color-coral">
<p class="card-title">{{ "APPS.DISABLE_THIS_API" | translate }}</p>
</div>
- <p>{{ mockText.substring(1, 120) }}</p>
+ <p class="card-text">{{ mockText.substring(1, 120) }}</p>
<button mat-raised-button class="disable-btn bg-color-coral">
{{ "APPS.DISABLE_API" | translate }}
</button>

MODIFY
src/app/components/my-apps-manage-api/my-apps-manage-api.component.scss
src/app/components/my-apps-manage-api/my-apps-manage-api.component.scss
.mat-divider-horizontal{
position: unset;
}
+
+.card-text{
+ padding: 0 6px;
+}

MODIFY
src/app/components/my-apps-policies/my-apps-policies.component.html
src/app/components/my-apps-policies/my-apps-policies.component.html
<app-policy-card [policy]="policy"></app-policy-card>
</div>
<div class="divider-left">
- <mat-grid-list cols="2" rowHeight="1:1" class="grid">
- <mat-grid-tile colspan="1">
- <app-gauge-chart [gaugeData]="gaugeData"></app-gauge-chart>
- </mat-grid-tile>
- <mat-grid-tile colspan="1">
- <app-gauge-chart [gaugeData]="gaugeData"></app-gauge-chart>
- </mat-grid-tile>
- </mat-grid-list>
+ <div class="policy-charts-grid">
+ <div><app-gauge-chart [gaugeData]="gaugeData"></app-gauge-chart></div>
+ <div><app-gauge-chart [gaugeData]="gaugeData"></app-gauge-chart></div>
+ </div>
</div>
</div>

MODIFY
src/app/components/my-apps-policies/my-apps-policies.component.scss
src/app/components/my-apps-policies/my-apps-policies.component.scss
@@ -18,3 +18,9 @@ h2, h3 {
.grid .divider-left {
margin-bottom: -4rem;
}
+
+.policy-charts-grid{
+ display: flex;
+ justify-content: center;
+ grid-column-gap: 1.8rem;
+}

MODIFY
src/app/components/plan-card-list/plan-card-list.component.html
src/app/components/plan-card-list/plan-card-list.component.html
<ng-container *ngIf="plans.length > 0">
- <h2 class="primary mt-40">Plans</h2>
+ <h2 class="primary mt-rem-3">Plans</h2>
</ng-container>
<div id="plan-grid">
<ng-container *ngFor="let plan of plans">
<mat-card class="plan-card">
<mat-card-header class="card-header">
- <mat-card-title class="card-header-content">{{ plan.planName }}</mat-card-title>
+ <mat-card-title class="card-header-content mb-rem-1">{{ plan.planName }}</mat-card-title>
<mat-card-subtitle class="card-header-content">{{ plan.planDescription }}</mat-card-subtitle>
</mat-card-header>
<mat-card-content [ngSwitch]="plan.planId + ':' + plan.version">

MODIFY
src/app/components/plan-card-list/plan-card-list.component.scss
src/app/components/plan-card-list/plan-card-list.component.scss
#plan-grid {
margin-right: 2%;
display: grid;
- justify-content: space-between;
+ justify-content: center;
align-items: flex-start;
- grid-template-columns: repeat(auto-fit, 420px);
+ grid-template-columns: repeat(auto-fit, 360px);
grid-column-gap: 16px;
grid-row-gap: 32px;
}
@@ -39,7 +39,7 @@ p {
}
.card-header {
- justify-content: center
+ justify-content: center;
}
.card-header-content {
@@ -49,4 +49,3 @@ p {
#sign-up-button {
width: 50%;
}
-

MODIFY
src/styles.scss
src/styles.scss
// CUSTOM SCSS
.primary-bg{
- background: $primary !important;
+ background-color: $primary !important;
}
.warn-bg{
- background: $warn !important;
+ background-color: $warn !important;
}
.accent-bg{
- background: $accent !important;
+ background-color: $accent !important;
}
.active-link{
/** Font **/
$default-font: 'Open Sans', sans-serif;
+// text-classes work the same as h tags do
+.text{
+ font-size: 1rem;
+}
+
+.text2{
+ font-size: 0.8rem;
+}
+
+.text3{
+ font-size: 0.7rem;
+}
+
+// text-big-classes increase the sizes with an increasing index
+.text-big1{
+ font-size: 1.2rem;
+}
+
+.text-big2{
+ font-size: 1.4rem;
+}
+
+.text-big3{
+ font-size: 1.5rem;
+}
+
/** Paddings and Margins **/
$sizes: 5, 8, 10, 15, 20, 25, 30, 35, 40;
@each $size in $sizes {
@@ -97,11 +123,9 @@ $sizes: 5, 8, 10, 15, 20, 25, 30, 35, 40;
.mt-#{$size} {
margin-top: #{$size}px;
}
-
.mr-#{$size} {
margin-right: #{$size}px;
}
-
.mb-#{$size} {
margin-bottom: #{$size}px;
}
@@ -123,6 +147,37 @@ $sizes: 5, 8, 10, 15, 20, 25, 30, 35, 40;
padding-left: #{$size}px;
}
}
+
+$remSizes: 1, 2, 3, 4;
+@each $size in $remSizes {
+ // Margins
+ .mt-rem-#{$size} {
+ margin-top: #{$size}rem;
+ }
+ .mr-rem-#{$size} {
+ margin-right: #{$size}rem;
+ }
+ .mb-rem-#{$size} {
+ margin-bottom: #{$size}rem;
+ }
+ .ml-rem-#{$size} {
+ margin-left: #{$size}rem;
+ }
+
+ // Paddings
+ .pt-rem-#{$size} {
+ padding-top: #{$size}rem;
+ }
+ .pr-rem-#{$size} {
+ padding-right: #{$size}rem;
+ }
+ .pb-rem-#{$size} {
+ padding-bottom: #{$size}rem;
+ }
+ .pl-rem-#{$size} {
+ padding-left: #{$size}rem;
+ }
+}
/***** DevPortal Default Styling *****/
/** Main tags **/
html {

style: gauge chart style