visualize-all.component.html

<div class="container ">
  <div class="row">
    <div class="col-md-12 mx-auto mt-4">
      <h4 class="text-center mb-3">Visualization</h4>
      <p class="text-center">{{laymanDataVal$}} Graph</p>
      <canvas id="canvas">{{chart}}</canvas>

      <p class="text-center">Units: {{unit$}}</p>
      <form id="visToolbar">
        <h4 class="text-center mb3" style="color:red" *ngIf="signal">Invalid Entry</h4>
        <div class="text-center mb3" style="background-color: black;">
          <br>
          <p id="visMessage">Ctrl/Comm+Click to select multiple generators <br> Please select a maximum of 5 generators
          </p>
          <select id="gen_select" name="generatorSelect" multiple>
            <option *ngFor="let generator of generators$" value="{{generator.gen_id}},{{generator.gen_name}}">{{generator.gen_name}}</option>
          </select>
          <br><br>
          <select id="func_select" name="functionSelect">
            <option value="" disabled selected>Select Function</option>
            <option value="sum">Summation</option>
            <option value="min">Minimum</option>
            <option value="avg">Average</option>
            <option value="max">Maximum</option>
            <option value="count">Count</option>
            <option value="dev">Deviation</option>
          </select>
          <br><br>
          <select id="data_select" name="dataSelect">
            <option value="" disabled selected>Select Data</option>
            <option *ngFor="let names of dataNames$" value="{{names}}">{{names}}</option>
          </select>
          <br><br>
          <select id="time_type_select" name="timeTypeSelect">
            <option value="" disabled selected>Select Time Type</option>
            <option value="year">Years</option>
            <option value="day">Days</option>
            <option value="hour">Hours</option>
            <option value="minute">Minutes</option>
          </select>
          <br><br>
          <div id="time-span-select">
            <input #time_span type="number" id="exampleInputTimeSpan" placeholder="Select Time Span">
          </div>
          <br>
          <a class="btn btn-primary" style="color:white" (click)="resetAndRemakeChart()">Visualize</a>
          <br>
          <br>
        </div>
      </form>
    </div>
  </div>
</div>