soma-frontend/src/app/components/assets/assets.component.html

<h2 class="floating-title">{{title}}</h2>
<div class="main-content">
  <div class="row align-container">
    <div class="col-12">    
      <label for="sel3">Plantas</label>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-6 col-sm-4">
      <div class="align-container">
        <select class="custom-select"(onChange)="onChangeObj($event)" name="sel3">
          <option *ngFor="let item of listAssets" [selected]="item._id===organizationId" [value]="item._id" >{{item.name}}</option>
        </select>
      </div>
      <br>
    </div>

    <!-- Weather card -->
    <div class="col-lg-6 col-sm-8">
      <div class="row align-container">
        <div class="col-lg-12">
          <app-weather-card></app-weather-card>
        </div>
      </div>
    </div>

  </div>

  <!-- Basic stats cards -->
  <div class="row align-container" style="padding: 0 25px;">

    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 p-1">
      <div class="widget energy-stats">
        <div class="mini-stats ">
          <span class="sky-skin"><i class="fa fa-bolt"></i></span>
          <h3 *ngIf="listEnergyProduced">
            {{listEnergyProduced.today.total_energy_kWh}}
            <small>kW</small>
          </h3>
          <p>Ultimo dia</p>
        </div>
      </div>
    </div>
    
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 p-1">
      <div class="widget energy-stats">
        <div class="mini-stats ">
          <span class="dark-yellow-skin"><i class="fa fa-bolt"></i></span>
          <h3 *ngIf="listEnergyProduced">
            {{listEnergyProduced.thisWeek.total_energy_kWh/1000 | number}}
            <small>MWh</small>
          </h3>
          <p>Ultima semana</p>
        </div>
      </div>
    </div>
    
    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 p-1">
      <div class="widget energy-stats">
        <div class="mini-stats ">
          <span class="yellow-skin"><i class="fa fa-bolt"></i></span>
          <h3 *ngIf="listEnergyProduced">
            {{listEnergyProduced.thisMonth.total_energy_kWh/1000 | number}}
            <small>MWh</small>
          </h3>
          <p>Ultimos 30 días</p>
        </div>
      </div>
    </div>

    <div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 p-1">
      <div class="widget energy-stats">
        <div class="mini-stats ">
          <span class="dark-yellow-skin"><i class="fa fa-bolt"></i></span>
          <h3 *ngIf="listEnergyProduced">
            {{listEnergyProduced.lifeTime.total_energy_kWh/1000 | number}}
            <small>MWh</small>
          </h3>
          <p>Total</p>
        </div>
      </div>
    </div>

  </div>

  <!-- Chartjs potency generation graphic -->
  <div class="row align-container">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <div class="widget">
        <div class="mini-stats">
          <!--
          <div class="chart-container" style="display:none;">
            <canvas baseChart #baseChart="base-chart" [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions"
              [legend]="barChartLegend" [chartType]="barChartType"></canvas>
          </div>
          -->

          <div class="chart-container" >
            <canvas id="canvas">{{ chart1 }}</canvas>
          </div>

          <p>Seleccione un rango de visualización</p>

          <button class="btn" [class.btn-success]='isActive[0]' (click)="onMeasureClickDay()">Día</button>
          <button class="btn" [class.btn-success]='isActive[1]' (click)="onMeasureClickWeek()">Semana</button>
          <button class="btn" [class.btn-success]='isActive[2]' (click)="onMeasureClickMonth()">Mes</button>
          <button class="btn" [class.btn-success]='isActive[3]' (click)="onMeasureYear()">Año</button>

        </div>
      </div>
    </div>
  </div>
  
  <!-- Enviromental cool stats cards -->
  <div class="row align-container">

    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6">
      <div class="widget">
        <div class="enviroment-stats">
          <div class="enviromental-icon">
            <img src="assets/img/tv-icon.png" alt="">
          </div>
          <div class="enviromental-text">
            La energía para operar un televisor durante
            <span>1,847,140</span>
            horas
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6">
      <div class="widget">
        <div class="enviroment-stats">
          <div class="enviromental-icon">
            <img src="assets/img/car-icon.png" alt="">
          </div>
          <div class="enviromental-text">
            Los gases de efecto invernadero que emiten 
            <span>57</span>
            usuarios de vehiculos en 1 año
          </div>
        </div>
      </div>
    </div>
    
    <div class="col-xl-4 col-lg-6 col-md-6 col-sm-6">
      <div class="widget">
        <div class="enviroment-stats">
          <div class="enviromental-icon">
            <img src="assets/img/desktop-pc-icon.png" alt="">
          </div>
          <div class="enviromental-text">
            La energía para alimentar 
            <span>2044</span>
            computadoras por 1 año
          </div>
           
        </div>
      </div>
    </div>

  </div>

  <br>
  <br>

</div>