Commit 950fa968 authored by Michail Tzanatos's avatar Michail Tzanatos
Browse files

chart skeleton fixes

parent 8e4af021

src/app/landing/metrics/doughnutchart/doughnutchart.component.html

+7 −7
Original line number Diff line number Diff line 
<div class="chart-container">

    

    <div class="service-chart">

        <div *ngIf="isLoading" class="pie-chart">

        <div *ngIf="isLoading || isNaN(totalChartData)" class="pie-chart">

            <skeleton [height]="'100%'" [width]="'100%'" [borderRadius]="'50%'"></skeleton>

        </div>

        <div *ngIf="totalChartData==0 && !isLoading" class="no-data-found">

        <div *ngIf="totalChartData==0 && !isLoading && !isNaN(totalChartData)" class="no-data-found">

            {{noDataMessage}}

        </div>

        <canvas *ngIf="totalChartData!=0 && !isLoading" baseChart [data]="chartData" [type]="'doughnut'"

        <canvas *ngIf="totalChartData!=0 && !isLoading && !isNaN(totalChartData)" baseChart [data]="chartData" [type]="'doughnut'"

        [options]="chartOptions" [plugins]="plugins">

        </canvas>  

    </div>

    <div class="chart-info">

        <div *ngIf="isLoading" style="height: 20%; width: 65%; margin-bottom: 0.5rem">

        <div *ngIf="isLoading || isNaN(totalChartData)" style="height: 20%; width: 65%; margin-bottom: 0.5rem">

            <skeleton [height]="'100%'" [width]="'100%'"></skeleton>

        </div>

        <div class="chart-title" *ngIf="!isLoading"> 

        <div class="chart-title" *ngIf="!isLoading && !isNaN(totalChartData)"> 

            {{chartTitle}}

        </div> 

        <div *ngIf="isLoading" style="height: 50%; width: 50%">

        <div *ngIf="isLoading || isNaN(totalChartData)" style="height: 50%; width: 50%">

            <skeleton [height]="'100%'" [width]="'100%'"></skeleton>

        </div>

        <div class="chart-legend" *ngIf="!isLoading">

        <div class="chart-legend" *ngIf="!isLoading && !isNaN(totalChartData)">

            <ul style="padding: 0; margin-bottom: 0;">

                <li style="display: flex; align-items: center; padding-right: 20px" *ngFor="let label of chartData.labels; index as i">

                    <span [ngStyle]="{

src/app/landing/metrics/doughnutchart/doughnutchart.component.ts

+4 −0
Original line number Diff line number Diff line
@@ -26,4 +26,8 @@ export class DoughnutchartComponent implements OnInit { 


    }



    isNaN(value: any): boolean {

      return isNaN(value);

    }



}
 
 No newline at end of file

src/app/landing/metrics/metrics.component.html

+2 −2
Original line number Diff line number Diff line
@@ -69,7 +69,7 @@ 
				<div class="card" style="height: calc(40vh + 10px); max-height: 370px; min-height: 230px;">

					<div class="card-body">

						<div class="card-title bar-chart-title">Service Orders Last 15 Days</div>

						<div *ngIf="isLoading">

						<div *ngIf="isLoading || isNaN(serviceOrdersTotal15days)">

							<skeleton [height] = "'calc(40vh - 3.25rem)'" [width]="'100%'" [maxHeight]="'calc(370px - 3.25rem)'" [minHeight] = "'calc(230px - 3.25rem)'">



							</skeleton>
@@ -78,7 +78,7 @@ 
							<div *ngIf="serviceOrdersTotal15days==0" class="no-data-found" style="display: flex; align-items: center; text-align: center;">

								No Service Orders found for the last 15 days

							</div>

							<canvas *ngIf="serviceOrdersTotal15days!=0" baseChart [data]="barchartData" [type]="'bar'"

							<canvas *ngIf="serviceOrdersTotal15days!=0 && !isNaN(serviceOrdersTotal15days)" baseChart [data]="barchartData" [type]="'bar'"

								[options]="barChartOptions" [plugins]="doughnutChartPlugins">

							</canvas>

						</div>

src/app/landing/metrics/metrics.component.ts

+22 −17
Original line number Diff line number Diff line
@@ -37,23 +37,23 @@ export class MetricsComponent implements OnInit { 
  config: IAppConfig

  loggedIn: boolean

  

  registeredUsers = 9999;

  activeServices = 9999;

  registeredNSDs = 9999;

  registeredVNFs = 9999;

  registeredMANO = 9999;

  registeredResourceSpecs = 9999;

  publishedServiceSpecs = 9999;

  availableResources = 9999;

  activeServiceOrders = 9999;

  publishedProductOfferings = 9999;

  totalCreatedServices = 9999;

  totalCompletedOrders = 9999;

  totalResources = 9999;

  serviceOrdersTotal15days = 9999;

  serviceOrdersTotalMonth = 9999;

  servicesTotalMonth = 9999;

  resourcesTotalMonth = 9999;

  registeredUsers = NaN;

  activeServices = NaN;

  registeredNSDs = NaN;

  registeredVNFs = NaN;

  registeredMANO = NaN;

  registeredResourceSpecs = NaN;

  publishedServiceSpecs = NaN;

  availableResources = NaN;

  activeServiceOrders = NaN;

  publishedProductOfferings = NaN;

  totalCreatedServices = NaN;

  totalCompletedOrders = NaN;

  totalResources = NaN;

  serviceOrdersTotal15days = NaN;

  serviceOrdersTotalMonth = NaN;

  servicesTotalMonth = NaN;

  resourcesTotalMonth = NaN;



  serviceOrdersByState = [];

  servicesByState: ServicesGroupByStateItem[];
@@ -344,6 +344,8 @@ export class MetricsComponent implements OnInit { 
      this.resourcesTotalMonth = results.resourcesTotalMonth.resources.total;

      



      console.log(this.serviceOrdersTotal15days);



      this.serviceOrdersByDay = results.serviceOrdersGroupedByDay.serviceOrders.aggregations.groupByDay;

      this.barchartData.labels = this.serviceOrdersByDay.map(data =>

        new Date(data.key).toLocaleDateString('en-GB', { day: 'numeric', month: 'numeric' })
@@ -373,6 +375,9 @@ export class MetricsComponent implements OnInit { 
    this.authService.login()

  }

  

  isNaN(value: any): boolean {

    return isNaN(value);

  }

  

  chartOptions: ChartConfiguration<'doughnut'>['options'] = {

    responsive: true,