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 id="graphInfo" class="text-left">
        Dates: {{startTime$}} - {{endTime$}}<br>
        Units: {{unit$}}<br>
        Function: {{function$}}<br>
      </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>
          <!-- <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>
          <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>
            <form style="color:white" action="/action_page.php">
              Start Time: 
              <input #start_time type="date" name="exampleStartTime">
              <br><br>
              End Time: 
              <input #end_time type="date" name="exampleEndTime">
            </form>
            <br>
          <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>
          <a class="btn btn-primary" style="color:white" (click)="resetAndRemakeChart()">Visualize</a>
          <br>
          <br>
        </div>
        <br><br>
      </form>
    </div>
  </div>
</div>