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

<h2 class="floating-title">{{ title }}</h2>

<div class="main-content">
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12">
        <h4><b>Histórico de tarifa por distribuidora y código </b></h4>
        <div class="card cream-skin bg-gradient-danger card-img-holder">
          <div class="card-body">
            <img
              alt="circle-image"
              class="card-img-absolute"
              src="assets/img/time-is-money.png"
            />

            <div class="row no-gutters">
              <div class="col-sm-12 col-md-6">
                <h3 class="mb-3">
                  Distribuidora:
                  <strong *ngIf="rates['distribuidora']">
                    {{ rates.distribuidora }}
                  </strong>
                </h3>
                <h4>Tarifa actual (USD$/kWh):</h4>
                <div *ngIf="rates['tarifa_actual']['cargo_energia']">
                  Cargo de energia:
                  <strong>
                    {{
                      rates["tarifa_actual"]["cargo_energia"] | number: "1.2-4"
                    }}
                    USD$/kWh
                  </strong>
                </div>
                <div *ngIf="rates.tarifa_actual.cargo_energia_b1">
                  Cargo de energia por bloque 1:
                  <strong>
                    {{ rates.tarifa_actual.cargo_energia_b1 | number: "1.2-4" }}
                    USD$/kWh
                  </strong>
                </div>
                <div *ngIf="rates.tarifa_actual.cargo_energia_b2">
                  Cargo de energia por bloque 2:
                  <strong>
                    {{ rates.tarifa_actual.cargo_energia_b2 | number: "1.2-4" }}
                    USD$/kWh
                  </strong>
                </div>
                <div *ngIf="rates.tarifa_actual.cargo_energia_b3">
                  Cargo de energia por bloque 3:
                  <strong>
                    {{ rates.tarifa_actual.cargo_energia_b3 | number: "1.2-4" }}
                    USD$/kWh
                  </strong>
                </div>
                <div *ngIf="rates.tarifa_actual.cargo_energia_punta">
                  Cargo de energia punta:
                  <strong>
                    {{
                      rates.tarifa_actual.cargo_energia_punta | number: "1.2-4"
                    }}
                    USD$/kWh
                  </strong>
                </div>
                <div *ngIf="rates.tarifa_actual.cargo_energia_resto">
                  Cargo de energia resto:
                  <strong>
                    {{
                      rates.tarifa_actual.cargo_energia_resto | number: "1.2-4"
                    }}
                    USD$/kWh
                  </strong>
                </div>
                <div *ngIf="rates.tarifa_actual.cargo_energia_valle">
                  Cargo de energia valle:
                  <strong>
                    {{
                      rates.tarifa_actual.cargo_energia_valle | number: "1.2-4"
                    }}
                    USD$/kWh
                  </strong>
                </div>
                <br />
              </div>
              <div class="col-sm-12 col-md-6">
                <div>
                  <h3>
                    Vigencia:
                    <strong *ngIf="rates.tarifa_actual.dateMin">
                      {{ rates.tarifa_actual.dateMin | date: "dd/MM/yyyy" }} -
                      {{ rates.tarifa_actual.dateMax | date: "dd/MM/yyyy" }}
                    </strong>
                  </h3>
                </div>
                <h4>Incremento con respecto a tarifa anterior (%)</h4>

                <div *ngIf="rates.incremento_porcentaje.cargo_energia != null">
                  Cargo de energia:
                  <strong>
                    {{
                      rates.incremento_porcentaje.cargo_energia
                        | number: "1.2-4"
                    }}%
                  </strong>
                </div>

                <div
                  *ngIf="rates.incremento_porcentaje.cargo_energia_b1 != null"
                >
                  Cargo de energia por bloque 1:
                  <strong>
                    {{
                      rates.incremento_porcentaje.cargo_energia_b1
                        | number: "1.2-4"
                    }}%
                  </strong>
                </div>
                <div
                  *ngIf="rates.incremento_porcentaje.cargo_energia_b2 != null"
                >
                  Cargo de energia por bloque 2:
                  <strong>
                    {{
                      rates.incremento_porcentaje.cargo_energia_b2
                        | number: "1.2-4"
                    }}%
                  </strong>
                </div>
                <div
                  *ngIf="rates.incremento_porcentaje.cargo_energia_b3 != null"
                >
                  Cargo de energia por bloque 3:
                  <strong>
                    {{
                      rates.incremento_porcentaje.cargo_energia_b3
                        | number: "0.2-4"
                    }}%
                  </strong>
                </div>
                <div
                  *ngIf="
                    rates.incremento_porcentaje.cargo_energia_punta != null
                  "
                >
                  Cargo de energia punta:
                  <strong>
                    {{
                      rates.incremento_porcentaje.cargo_energia_punta
                        | number: "1.2-4"
                    }}%
                  </strong>
                </div>
                <div
                  *ngIf="
                    rates.incremento_porcentaje.cargo_energia_resto != null
                  "
                >
                  Cargo de energia resto:
                  <strong>
                    {{
                      rates.incremento_porcentaje.cargo_energia_resto
                        | number: "1.2-4"
                    }}%
                  </strong>
                </div>
                <div
                  *ngIf="
                    rates.incremento_porcentaje.cargo_energia_valle != null
                  "
                >
                  Cargo de energia valle:
                  <strong>
                    {{
                      rates.incremento_porcentaje.cargo_energia_valle
                        | number: "1.2-4"
                    }}%
                  </strong>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <br />
    <div class="row">
      <div class="col-lg-12">
        <h4><b>Histórico de tarifa por distribuidora y código </b></h4>

        <div class="widget">
          <div class="mini-stats">
            <div class="chart-container" id="chart-wrapper">
              <canvas
                baseChart
                *ngIf="barChartData"
                id="canvas"
                [datasets]="barChartData"
                [labels]="barChartLabels"
                [options]="barChartOptions"
                [chartType]="barChartType"
              ></canvas>
            </div>
          </div>
        </div>
      </div>
    </div>
    <br />
    <br />
    <div class="row">
      <div class="col-lg-12">
        <h4>
          <b>Histórico de tarifas de otras distribuidoras </b>
        </h4>

        <div class="card border-danger">
          <div class="card-body">
            <p>
              Para ver las tarifas de otras distribuidoras, debes de tener una
              cuenta PRO
            </p>
            <a href="#!" class="btn btn-sm btn-warning pull-right"
              >Actualizar a usuario pro</a
            >
          </div>
        </div>
      </div>
    </div>
    <br />
    <div class="row">
      <div class="col-lg-6 col-sm-6">
        <div class="row">
          <div class="col-lg-12 col-sm-12">
            <label for="sel3">Distribuidora</label>
            <select
              class="custom-select"
              (change)="onChangeD($event)"
              name="sel3"
            >
              <option
                *ngFor="let item of distribuidoras"
                [selected]="item.codigo === distribuidoraSel"
                [value]="item.codigo"
              >
                {{ item.nombre }}</option
              >
            </select>
          </div>
        </div>
      </div>

      <div class="col-lg-6 col-sm-6">
        <div class="row">
          <div class="col-lg-12 col-sm-12">
            <label for="sel3">Tipo de tarifa</label>
            <select
              class="custom-select"
              (change)="onChangeT($event)"
              name="sel3"
            >
              <option
                *ngFor="let item of tarifas"
                [selected]="item.codigo === tarifaSel"
                [value]="item.codigo"
              >
                {{ item.nombre }}</option
              >
            </select>
          </div>
        </div>
      </div>
    </div>

    <div class="row">
      <div *ngIf="error; then showAlert"></div>
      <ng-template #showAlert>
        <div class="col-lg-12">
          <div class="card border-danger">
            <div class="card-body">
              Error en el servidor, no se pudo obtener el historico de tarifas
            </div>
          </div>
        </div>
      </ng-template>
    </div>
    <br />
  </div>
  <br />
</div>