src/app/analysispage/analysispage.html

<div class="analyse-container">

<div class="ticker-static">{{result[activeCompany].ticker}}</div>

  <mat-card style="height:30vw;">
    <h1>Overall Score Board</h1>

    <table>
      <thead>
        <tr>
          <th>Company Name</th>
          <th>Ticker</th>
          <th>Overall Signal</th>
          <th (click)="toggleSort('combined_overall_score')"
              [attr.aria-sort]="sort.key==='combined_overall_score' ? (sort.direction==='asc'?'ascending':'descending') : 'none'"
              class="sortable">
            Overall Score
            <span class="arrow" *ngIf="sort.key==='combined_overall_score'">{{ sort.direction==='asc' ? '▲' : '▼' }}</span>
          </th>

          <th (click)="toggleSort('overall_ta_score')"
              [attr.aria-sort]="sort.key==='overall_ta_score' ? (sort.direction==='asc'?'ascending':'descending') : 'none'"
              class="sortable">
            TA Score (80%)
            <span class="arrow" *ngIf="sort.key==='overall_ta_score'">{{ sort.direction==='asc' ? '▲' : '▼' }}</span>
          </th>

          <th (click)="toggleSort('overall_fa_score')"
              [attr.aria-sort]="sort.key==='overall_fa_score' ? (sort.direction==='asc'?'ascending':'descending') : 'none'"
              class="sortable">
            FA Score (15%)
            <span class="arrow" *ngIf="sort.key==='overall_fa_score'">{{ sort.direction==='asc' ? '▲' : '▼' }}</span>
          </th>

          <th (click)="toggleSort('news_overall_score')"
              [attr.aria-sort]="sort.key==='news_overall_score' ? (sort.direction==='asc'?'ascending':'descending') : 'none'"
              class="sortable">
            News Score (5%)
            <span class="arrow" *ngIf="sort.key==='news_overall_score'">{{ sort.direction==='asc' ? '▲' : '▼' }}</span>
          </th>
        </tr>
      </thead>

      <tbody id="resultsTable">
        <tr *ngFor="let scoreboard of pagedResults; let i = index">
          <td style="cursor:pointer"
              (click)="selectCompany(pageIndex * pageSize + i)"
              [ngClass]="{ 'active-td': activeCompany === (pageIndex * pageSize + i) }">
            {{ scoreboard.company_name }}
          </td>
          <td>{{ scoreboard.ticker }}</td>
          <td>
            <div class="dot"
                 [ngClass]="getClass(scoreboard.combined_overall_signal)">
            </div>
          </td>
          <td>{{ scoreboard.combined_overall_score }}</td>
          <td>{{ scoreboard.overall_ta_score }}</td>
          <td>{{ scoreboard.fundamental_analysis?.overall_fa_score }}</td>
          <td>{{ scoreboard.news_overall_score }}</td>
        </tr>
      </tbody>
    </table>


    <mat-paginator [length]="result.length || 0"
                   [pageSize]="5"
                   [pageIndex]="pageIndex"
                   (page)="onPage($event)">
    </mat-paginator>


  </mat-card>

  <mat-card style="text-align:center;">
    <h1>{{result[activeCompany].company_name}}</h1>
    <h3 class="tradeddate">Last Traded Date: {{result[activeCompany].lasttradingdate}}</h3>
    <h3 class="currentdate-info">Report Taken Date and Time: {{result[activeCompany].currentdatetime}}</h3>
    <button class="download-btn"><i class="fas fa-download"></i>&nbsp;Download Reports</button>


  </mat-card>


  <mat-card>
    <h1>
      Candlestick Chart&nbsp;&nbsp;<mat-slide-toggle [checked]="isCandlestick"
                                                     (change)="onModeChange($event.checked)"></mat-slide-toggle>
    </h1>

    <div class="chart-container">
      <div style="width:62.5vw;" *ngIf="isCandlestick">
        <apx-chart [series]="candlestickChartOptions.series"
                   [chart]="candlestickChartOptions.chart"
                   [xaxis]="candlestickChartOptions.xaxis"
                   [yaxis]="candlestickChartOptions.yaxis"
                   [tooltip]="candlestickChartOptions.tooltip"></apx-chart>

      </div>
      <div style="width:62.5vw;" *ngIf="!isCandlestick">
        <apx-chart [series]="closeAreaOptions.series"
                   [chart]="closeAreaOptions.chart"
                   [xaxis]="closeAreaOptions.xaxis"
                   [yaxis]="closeAreaOptions.yaxis"
                   [tooltip]="closeAreaOptions.tooltip">
        </apx-chart>
      </div>
      <div>
        <!-- Include ApexCharts in your HTML file -->
        <apx-chart [series]="overallChart.series"
                   [chart]="overallChart.chart"
                   [labels]="overallChart.labels"
                   [plotOptions]="overallChart.plotOptions"
                   [fill]="overallChart.fill"
                   [tooltip]="overallChart.tooltip"
                   [legend]="overallChart.legend">
        </apx-chart>



      </div>
    </div>


  </mat-card>

  <mat-card>
    <h1>Prediction Chart for next 15 days</h1>

    <div class="chart-content">
      <div class="predict-content">
        <div>
          <p style="color: #22C55E;">Predicted Max High Date:  {{result[activeCompany].ai_predicted_max_high_15_date}}</p>
          <p style="color: #22C55E;">Predicted Max High Date: {{result[activeCompany].ai_predicted_max_high_15}}</p>
        </div>
        <div>
          <p style="color: #EF4444; ">Predicted Min Low Date:  {{result[activeCompany].ai_predicted_min_low_15_date}}</p>
          <p style="color: #EF4444; ">Predicted Min Low:  {{result[activeCompany].ai_predicted_min_low_15}}</p>
        </div>

      </div>
      <apx-chart *ngIf="highLowChartOptions"
                 [series]="highLowChartOptions.series"
                 [chart]="highLowChartOptions.chart"
                 [xaxis]="highLowChartOptions.xaxis"
                 [yaxis]="highLowChartOptions.yaxis"
                 [stroke]="highLowChartOptions.stroke"
                 [markers]="highLowChartOptions.markers"
                 [tooltip]="highLowChartOptions.tooltip"
                 [legend]="highLowChartOptions.legend">
      </apx-chart>
    </div>
  </mat-card>

  <mat-card>
    <h1>Trade Recommendations</h1>

    <ng-container>
      <table>
        <thead>
          <tr>
            <th>Current Price</th>
            <th>Entry Point</th>
            <th>Stop Loss</th>
            <th>Target Price</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <p style="font-size:2vw;">{{result[activeCompany].live_price}}</p>
              <p [ngStyle]="{'color': result[activeCompany].price_change > 0 ? '#22c55e' : (result[activeCompany].price_change < 0 ? '#ef4444' : '#22c55e')}">{{result[activeCompany].price_change}} ({{result[activeCompany].percentage_change}}%)</p>
            </td>
            <td>{{result[activeCompany].tradingInfo.entry_point}}</td>
            <td>{{result[activeCompany].tradingInfo.stop_loss}}</td>
            <td>{{result[activeCompany].tradingInfo.target_price}}</td>

          </tr>
        </tbody>
      </table>
      <br />
      <br />
      <table>
        <thead>
          <tr>
            <th>Pivot Points</th>
            <th>Support</th>
            <th>Resistance</th>
            <th>Remarks</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <div>
                {{result[activeCompany].tradingInfo.pivot_point}}&nbsp;&nbsp;({{result[activeCompany].tradingInfo.p1_pect}}%)
              </div>
            </td>
            <td>
              <div>
                <span><b>S1:</b></span>&nbsp;&nbsp; {{result[activeCompany].tradingInfo.support1}}&nbsp;&nbsp;({{result[activeCompany].tradingInfo.s1_pect}}%)
              </div>
              <div>
                <span><b>S2:</b></span>&nbsp;&nbsp; {{result[activeCompany].tradingInfo.support2}}&nbsp;&nbsp;({{result[activeCompany].tradingInfo.s2_pect}}%)
              </div>
              <div>
                <span><b>S3:</b></span>&nbsp;&nbsp; {{result[activeCompany].tradingInfo.support3}}&nbsp;&nbsp;({{result[activeCompany].tradingInfo.s3_pect}}%)
              </div>
            </td>
            <td>
              <div>
                <span><b>R1:</b></span>&nbsp;&nbsp; {{result[activeCompany].tradingInfo.resistance1}}&nbsp;&nbsp;({{result[activeCompany].tradingInfo.r1_pect}}%)
              </div>
              <div>
                <span><b>R2:</b></span>&nbsp;&nbsp; {{result[activeCompany].tradingInfo.resistance2}}&nbsp;&nbsp;({{result[activeCompany].tradingInfo.r2_pect}}%)
              </div>
              <div>
                <span><b>R3:</b></span>&nbsp;&nbsp; {{result[activeCompany].tradingInfo.resistance3}}&nbsp;&nbsp;({{result[activeCompany].tradingInfo.r3_pect}}%)
              </div>
            </td>

            <td>{{result[activeCompany].tradingInfo.remarks}}</td>
          </tr>
        </tbody>
      </table>


    </ng-container>
  </mat-card>




  <mat-card>
    <h1>Technical Analysis&nbsp;&nbsp;<span class="dot" [ngClass]="getClass(result[activeCompany].overall_ta_signal)"></span>&nbsp;<span style="font-size: 1vw; vertical-align: top;">({{result[activeCompany].overall_ta_score}}%)</span></h1>

    <table>
      <thead>
        <tr>
          <th style="cursor:pointer;"
              *ngFor="let kv of result[activeCompany].final_trade_signal | keyvalue: originalOrder"
              (click)="showStrategies(kv.key)"
              [ngClass]="{ 'active-td': selectedIndicator === kv.key }">
            {{ kv.key }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td *ngFor="let kv of result[activeCompany].final_trade_signal | keyvalue: originalOrder">
            <div class="dot"
                 [ngClass]="getClass(kv.value)"></div>
          </td>
        </tr>
      </tbody>
    </table>
    <br /><br />
    <div class="strategy-chart-container">

      <div class="strategy-fa-container">

        <ng-container *ngFor="let kv of result[activeCompany][selectedIndicator] | keyvalue: originalOrder">
          <div class="strategy">
            <div class="content" style="cursor:pointer;"
                 (click)="loadStrategiesChart(kv.key)"
                 [ngClass]="{ 'active-td': selectedStrategy === kv.key }">{{kv.key}}</div>
            <!--<div class="dot"
               [ngClass]="getClass(kv.value)"></div>-->

            <div class="dot" [ngClass]="getClass(kv.value)"></div>
            <span *ngIf="getClass(kv.value) === 'strategyvalue'">{{ kv.value }}</span>
          </div>

        </ng-container>

      </div>

         <button (click)="previousChart()"
           [disabled]="strategyChartIndex === 0"
           class="nav-button prev-button">
     &lt;
   </button>

   <div class="strategy-chart">
     <apx-chart *ngIf="strategyChart && strategyChart[strategyChartIndex]"
                [series]="strategyChart[strategyChartIndex].series"
                [chart]="strategyChart[strategyChartIndex].chart"
                [xaxis]="strategyChart[strategyChartIndex].xaxis"
                [yaxis]="strategyChart[strategyChartIndex].yaxis"
                [stroke]="strategyChart[strategyChartIndex].stroke"
                [tooltip]="strategyChart[strategyChartIndex].tooltip"
                [annotations]="strategyChart[strategyChartIndex].annotations">
     </apx-chart>
   </div>

   <button (click)="nextChart()"
           [disabled]="strategyChartIndex === strategyChart.length - 1"
           class="nav-button next-button">
     &gt;
   </button>
    </div>


  </mat-card>


  <mat-card>
    <h1>Fundamental Analysis&nbsp;&nbsp;<span class="dot" [ngClass]="getClass(result[activeCompany].overall_fa_signal)"></span>&nbsp;<span style="font-size: 1vw; vertical-align: top;">({{result[activeCompany].overall_fa_score}}%)</span></h1>

    <table>
      <thead>
        <tr>
          <th *ngFor="let kv of result[activeCompany].fundamental_analysis.fa_strategy | keyvalue: originalOrder">
            {{ kv.key }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td *ngFor="let kv of result[activeCompany].fundamental_analysis.fa_strategy | keyvalue: originalOrder">
            <div class="dot"
                 [ngClass]="getClass(kv.value)"></div>
          </td>
        </tr>
      </tbody>
    </table>

    <br /><br />
    <div class="fa-metrics">
      <ng-container *ngFor="let kv of result[activeCompany].fundamental_analysis | keyvalue: originalOrder">
        <div class="strategy-fa-container" *ngIf="kv.key !== 'overall_fa_score'&& kv.key !== 'fa_strategy'">

          <div class="fa-title">{{ kv.key }}</div>

          <div class="fa-content" *ngIf="kv.value && typeof kv.value === 'object'">
            <div class="metrics" *ngFor="let kvalue of kv.value | keyvalue: originalOrder">
              <div>{{ kvalue.key }}</div>
              <div>{{ kvalue.value }}</div>
            </div>
          </div>

        </div>
      </ng-container>
    </div>





  </mat-card>



  <mat-card>
    <h1>Latest News&nbsp;&nbsp;<span class="dot" [ngClass]="getClass(result[activeCompany].overall_news_signal)"></span>&nbsp;<span style="font-size: 1vw; vertical-align: top;">({{result[activeCompany].news_overall_score}}%)</span></h1>
    <div class="news-container">
      <ng-container *ngFor="let news of result[activeCompany].news">
        <a [href]="news.url" target="_blank">
          <div class="strategy-container">
            <div class="dot"
                 [ngClass]="getClass(news.sentiment)"></div>
            <!--<a [href]="news.url">{{news.title}}</a>-->
            <p>{{news.title}}</p>
            <span class="news-date">{{news.published}}</span>
          </div>
        </a>
      </ng-container>
    </div>
  </mat-card>




</div>