Spaces:
Running
Running
File size: 10,484 Bytes
832826c 12ec337 832826c 12ec337 730bef4 12ec337 832826c 730bef4 12ec337 730bef4 12ec337 730bef4 12ec337 832826c 730bef4 832826c 730bef4 832826c 730bef4 832826c 730bef4 832826c 730bef4 832826c 730bef4 832826c 730bef4 12ec337 730bef4 832826c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 |
<div class="wrap">
<!-- Market Overview ticker (right-to-left auto scroll) -->
<div class="section market-overview" id="section-market-overview">
<div class="mo-header" style="display:flex; justify-content:space-between; align-items:flex-start;">
<h2>Market Overview</h2>
<div class="tag" style="font-size:0.85rem; opacity:0.9;">Last updated: {{ lastUpdated }}</div>
</div>
<div class="ticker" aria-hidden="false">
<div class="ticker-track" #tickerTrack>
<div class="mcard" *ngFor="let m of marketCardsRepeat">
<h3>{{ m.title }}</h3>
<div class="mval">{{ m.value }} <span class="chg" [ngClass]="{ up: m.dir === 'up', down: m.dir === 'down', neutral: m.dir === 'neutral' }">({{ m.chg }})</span></div>
</div>
</div>
</div>
</div>
<!-- Header bar: show country pills here (removed 'Market / Dashboard' text) -->
<div class="header">
<div class="country-row" style="padding:10px 12px; display:flex; align-items:center; gap:8px;">
<div class="country-list">
<ng-container *ngFor="let country of countries">
<button class="tab" *ngIf="country !== 'All'" [class.active]="(selectedCountry || '').toLowerCase() === (country || '').toLowerCase()" (click)="selectCountry(country)">
{{ country }}
</button>
</ng-container>
</div>
</div>
</div>
<!-- 1) Important Indices -->
<div class="section" id="section-indices">
<h2>Global Market Indices (Live)</h2>
<div>
<!-- Country filter moved to header; removed duplicate here -->
</div>
<!-- Cards grid for indices of selected country -->
<div class="indices-grid" style="margin-top:12px;">
<!-- When India selected, show nine simple index cards (name + placeholder price) -->
<ng-container *ngIf="(selectedCountry || '').toLowerCase() === 'india'; else otherIndices">
<ng-container *ngFor="let g of displayIndices">
<div class="index-card">
<div class="ic-header">
<div class="ic-name">{{ formatIndexName(g.name) }}</div>
<div class="ic-price">{{ g.price | number:'1.2-2' }}</div>
</div>
<div class="ic-row">
<div class="ic-change" [ngClass]="{ up: g.isUp, down: !g.isUp }">
{{ g.changePct !== null && g.changePct !== undefined ? (g.changePct >= 0 ? '+' : '') + (g.changePct | number:'1.2-2') + '%' : (g.change !== null && g.change !== undefined ? (g.change >= 0 ? '+' : '') + (g.change | number:'1.2-2') : '—') }}
</div>
</div>
<svg *ngIf="g.miniPath" preserveAspectRatio="none" viewBox="0 0 240 28" aria-hidden="true" class="ic-spark">
<path [attr.d]="g.miniPath" fill="none" [attr.stroke]="g.isUp ? 'var(--up)' : 'var(--down)'" stroke-width="2"></path>
</svg>
</div>
</ng-container>
</ng-container>
<ng-template #otherIndices>
<ng-container *ngFor="let g of displayIndices">
<div class="index-card">
<div class="ic-header">
<div class="ic-name">{{ formatIndexName(g.name) }}</div>
<div class="ic-price">{{ g.price | number:'1.2-2' }}</div>
</div>
<div class="ic-row">
<div class="ic-change" [ngClass]="{ up: g.isUp, down: !g.isUp }">
{{ g.changePct !== null && g.changePct !== undefined ? (g.changePct >= 0 ? '+' : '') + (g.changePct | number:'1.2-2') + '%' : (g.change !== null && g.change !== undefined ? (g.change >= 0 ? '+' : '') + (g.change | number:'1.2-2') : '—') }}
</div>
</div>
<svg *ngIf="g.miniPath" preserveAspectRatio="none" viewBox="0 0 240 28" aria-hidden="true" class="ic-spark">
<path [attr.d]="g.miniPath" fill="none" [attr.stroke]="g.isUp ? 'var(--up)' : 'var(--down)'" stroke-width="2"></path>
</svg>
</div>
</ng-container>
</ng-template>
</div>
</div>
<!-- 2) Companies under each Index (with Buy/Sell) + 3) Today Chart -->
<div class="section">
<h2>Companies by Index (Live Price & Actions)</h2>
<div class="tabs">
<button class="tab"
*ngFor="let code of indexCodes"
[class.active]="code === activeIndex"
(click)="setActiveIndex(code)">
{{ code }}
</button>
</div>
<div class="cols">
<div>
<div class="table-wrap" style="position:relative">
<div *ngIf="quotesLoading" style="position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.45); z-index:5; border-radius:8px;">
<svg width="48" height="48" viewBox="0 0 50 50" aria-hidden="true">
<circle cx="25" cy="25" r="20" stroke="#ffffff" stroke-width="4" fill="none" stroke-linecap="round" stroke-dasharray="31.4 31.4">
<animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="1s" repeatCount="indefinite" />
</circle>
</svg>
</div>
<!-- New: scrollable companies list -->
<div class="companies-scroll" style="max-height:360px; overflow:auto; padding-right:8px;">
<table aria-label="Companies">
<thead>
<tr>
<th>Company</th>
<th>LTP</th>
<th>% Chg</th>
<th>High</th>
<th>Low</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let c of companiesByIndex[activeIndex]; let i = index" [class.selected]="c.sym === selectedCompany" (click)="onCompanyClick($event, c)">
<td>
<button class="co" type="button" (click)="onCompanyClick($event, c)">{{ c.sym }}</button>
</td>
<td>{{ fmt(c.ltp) }}</td>
<td [class.uptext]="c.chg >= 0" [class.downtext]="c.chg < 0">
{{ c.chg >= 0 ? '+' : '' }}{{ c.chg.toFixed(2) }}%
</td>
<td>{{ fmt(c.high) }}</td>
<td>{{ fmt(c.low) }}</td>
</tr>
</tbody>
</table>
</div>
<!-- Removed load-all button and helper text as requested -->
</div>
</div>
<div>
<div class="chart-card">
<div class="chart-header">
<div class="chart-title">Today Chart: {{ chartSymbol || '—' }}</div>
<div class="legend">1-minute simulated intraday</div>
</div>
<div #chartContainer class="chart-svg" aria-label="Intraday chart" role="img"></div>
</div>
<div class="note">Click a company to update the chart.</div>
</div>
</div>
</div>
<!-- 4) Sector-based important companies -->
<div class="section">
<h2>Sector-based Important Companies</h2>
<div class="sector-grid">
<div class="sector" *ngFor="let s of sectors">
<h3>{{ s.name }}</h3>
<span class="pill"
*ngFor="let co of s.picks"
[title]="'Open ' + co + ' chart'"
(click)="drawTodayChart(co, 100 + random() * 2000)">
{{ co }}
</span>
</div>
</div>
</div>
<!-- 5) Today Toppers & Losers -->
<div class="section">
<h2>Today Toppers & Today Losers</h2>
<div class="dual">
<div>
<h3 class="uptext">Today Toppers</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Company</th>
<th>LTP</th>
<th>% Chg</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let g of gainers" (click)="drawTodayChart(g.sym, g.ltp)">
<td>{{ g.sym }}</td>
<td>{{ fmt(g.ltp) }}</td>
<td class="uptext">+{{ g.chg.toFixed(2) }}%</td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<h3 class="downtext">Today Losers</h3>
<div class="table-wrap">
<table>
<thead>
<tr>
<th>Company</th>
<th>LTP</th>
<th>% Chg</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let l of losers" (click)="drawTodayChart(l.sym, l.ltp)">
<td>{{ l.sym }}</td>
<td>{{ fmt(l.ltp) }}</td>
<td class="downtext">{{ l.chg.toFixed(2) }}%</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
|