SHARE
TWEET

Untitled

a guest Dec 6th, 2019 90 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <header>
  2.     <nav class="navbar navbar-expand-lg py-3 header">
  3.         <div class="container d-flex justify-content-between">
  4.             <div>
  5.                 <h1 class="mb-0 header-title">My Stocks Portfolio</h1>
  6.             </div>
  7.             <div class="profile-wrapper d-flex flex-column align-self-center">
  8.                 <div class="profile-image"></div>
  9.                 <div class="text-white-50">Collin Johnson</div>
  10.             </div>
  11.         </div>
  12.     </nav>
  13. </header>
  14.  
  15. <main>
  16.     <h3>
  17.             Select rows and right click the Grid in order to choose the desired Chart
  18.             and generate it.
  19.         </h3>
  20.  
  21.     <kendo-grid #grid [data]="gridData" [selectable]="selectableSettings" [height]="500" [kendoGridSelectBy]="selectBy" [selectedKeys]="selectedStocks" (cellClick)="onCellClick($event)" (selectionChange)="onSelectionChange()">
  22.         <kendo-grid-checkbox-column [showSelectAll]="true" [width]="27"></kendo-grid-checkbox-column>
  23.  
  24.         <kendo-grid-column class="grid-symbol-col" field="symbol" title="Symbol" [width]="80"></kendo-grid-column>
  25.         <kendo-grid-column field="name" title="Name" [width]="140"></kendo-grid-column>
  26.  
  27.         <kendo-grid-column class="price-col" field="price" title="Price" [width]="80">
  28.             <ng-template kendoGridHeaderTemplate let-dataItem>
  29.                 Price
  30.                 <span class="grid-header-subtitle">(Intraday)</span>
  31.             </ng-template>
  32.             <ng-template kendoGridCellTemplate let-dataItem>
  33.                 {{ dataItem.price | currency: 'USD' }}
  34.             </ng-template>
  35.         </kendo-grid-column>
  36.  
  37.         <kendo-grid-column field="day_change" title="Change" media="(min-width: 768px)">
  38.             <ng-template kendoGridCellTemplate let-dataItem>
  39.                 <span [ngClass]="{ 'grid-cell-positive' : dataItem.day_change > 0, 'grid-cell-negative' : dataItem.day_change < 0 }">
  40.                         {{ dataItem.day_change > 0 ? ('+' + dataItem.day_change) : dataItem.day_change }}
  41.                     </span>
  42.             </ng-template>
  43.         </kendo-grid-column>
  44.  
  45.         <kendo-grid-column field="change_pct" title="%Change" media="(min-width: 768px)">
  46.             <ng-template kendoGridCellTemplate let-dataItem>
  47.                 <span [ngClass]="{ 'grid-cell-positive' : dataItem.change_pct > 0, 'grid-cell-negative' : dataItem.change_pct < 0 }">
  48.                         {{ dataItem.change_pct > 0 ? ('+' + dataItem.change_pct) : dataItem.change_pct }}%
  49.                     </span>
  50.             </ng-template>
  51.         </kendo-grid-column>
  52.  
  53.         <kendo-grid-column field="volume" title="Volume" [width]="100" media="(min-width: 768px)">
  54.             <ng-template kendoGridCellTemplate let-dataItem>
  55.                 {{ dataItem.volume | numberFormat }}
  56.             </ng-template>
  57.         </kendo-grid-column>
  58.  
  59.         <kendo-grid-column class="grid-avg-volume-col" field="volume_avg" title="Avg Vol" media="(min-width: 768px)">
  60.             <ng-template kendoGridHeaderTemplate let-dataItem>
  61.                 Avg Vol
  62.                 <span class="grid-header-subtitle">(3 month)</span>
  63.             </ng-template>
  64.  
  65.             <ng-template kendoGridCellTemplate let-dataItem>
  66.                 {{ dataItem.volume_avg | numberFormat }}
  67.             </ng-template>
  68.         </kendo-grid-column>
  69.  
  70.         <kendo-grid-column field="market_cap" title="Market Cap" media="(min-width: 1200px)">
  71.             <ng-template kendoGridCellTemplate let-dataItem>
  72.                 {{dataItem.market_cap | numberFormat}}
  73.             </ng-template>
  74.         </kendo-grid-column>
  75.  
  76.         <app-header></app-header>
  77.  
  78.         <main class="container-fluid px-0">
  79.             <div class="container">
  80.                 <app-stock-list></app-stock-list>
  81.  
  82.                 <kendo-grid-column class="grid-one-day-chart" media="(min-width: 992px)" field="intraday" title="1 Day Chart" [width]="170" [sortable]="false">
  83.                     <ng-template kendoGridCellTemplate let-dataItem>
  84.                         <day-chart [data]="dataItem.intraday" [changePct]="dataItem.change_pct">
  85.                         </day-chart>
  86.                     </ng-template>
  87.                 </kendo-grid-column>
  88.                 <kendo-grid-excel fileName="Stocks.xlsx" [fetchData]="allData">
  89.                     <kendo-excelexport-column field="symbol" title="Symbol"></kendo-excelexport-column>
  90.                     <kendo-excelexport-column field="Name" title="Name"></kendo-excelexport-column>
  91.                     <kendo-excelexport-column field="price_col" title="Price"></kendo-excelexport-column>
  92.                     <kendo-excelexport-column field="day_change" title="Change"></kendo-excelexport-column>
  93.                     <kendo-excelexport-column field="change_pct" title="% Change"></kendo-excelexport-column>
  94.                     <kendo-excelexport-column field="volume" title="Volume"></kendo-excelexport-column>
  95.                     <kendo-excelexport-column field="volume_avg" title="Average Volume"></kendo-excelexport-column>
  96.                     <kendo-excelexport-column field="market_cap" title="Market Capital"></kendo-excelexport-column>
  97.                     <kendo-excelexport-column field="pe" title="PE Ratio"></kendo-excelexport-column>
  98.                 </kendo-grid-excel>
  99.     </kendo-grid>
  100.     <kendo-contextmenu #gridmenu [items]="items" (select)="onSelect($event)" (popupClose)="$event.preventDefault()">
  101.         <ng-template kendoMenuItemTemplate let-item="item">
  102.  
  103.             <span *ngIf="item.text === 'Bar' || item.text === 'Column'" style="width: 25px; ">
  104.                     <svg id="bar" viewBox="0 0 70 70">
  105.                         <path d="M12,60H9V29h3ZM24,36H21V60h3ZM36,20H33V60h3ZM48,33H45V60h3ZM60,21H57V60h3ZM6,36H3V60H6Zm12-3H15V60h3Zm12-4H27V60h3Zm12-3H39V60h3Zm12,2H51V60h3ZM66,15H63V60h3Z"></path>
  106.                     </svg>
  107.                 </span>
  108.  
  109.             <span *ngIf="item.text === 'Area'" style="width: 25px; ">
  110.                     <svg id="area" viewBox="0 0 70 70">
  111.                         <defs>
  112.                             <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
  113.                             <stop offset="0%" stop-color="#ffab09"></stop>
  114.                                 <stop offset="70%" stop-color="#ff6358"></stop>
  115.                                 <stop offset="100%" stop-color="#dd3169"></stop>
  116.                             </linearGradient>
  117.                         </defs>
  118.                         <path d="M53.85,27.68l-13.05-9L28.74,33.72l-12.92-7L3,39.59V60H67V13.44ZM16.18,29.23l13.08,7L41.2,21.35l12.95,9L65,18.56v6L53.81,34.81l-13.06-6-12,13L15.91,36.89,5,43.26V40.41ZM53.73,41l-13-1L28.81,48.89l-12.9-4L5,50.38V45.57l11.09-6.47,13.19,5.07,12-13,12.94,6L65,27.27v6.19Z"></path>
  119.                     </svg>
  120.                 </span>
  121.  
  122.             <span *ngIf="item.text === 'Pie'" style="width: 25px; ">
  123.                     <svg id="pie" viewBox="0 0 70 70">
  124.                         <path d="M39,6.55A25.76,25.76,0,0,1,61,44.3L39,31.57ZM7.53,49.34h0Zm54.95,0c-.31.59-.64,1.17-1,1.74a31,31,0,0,1-53,0c-.35-.57-.68-1.15-1-1.74h0A31,31,0,0,1,35,4l1,0v30Zm-53.21-1L34,34.05V6A29,29,0,0,0,9.26,48.33Zm50.5,1.75L35,35.78,10.24,50.08a29,29,0,0,0,49.52,0Z"></path>
  125.                     </svg>
  126.                 </span>
  127.  
  128.             <span *ngIf="item.text === 'Line'" style="width: 25px; ">
  129.                     <svg id="line" viewBox="0 0 70 70">
  130.                         <path d="M66,10a4,4,0,0,0-4,4,4,4,0,0,0,.62,2.12l-6.71,8.39a3.9,3.9,0,0,0-4.54.5l-6.62-5.67A4,4,0,0,0,45,18a4,4,0,1,0-7,2.67L30.75,33.42a3.88,3.88,0,0,0-3.82.18l-7.14-6.35A4,4,0,0,0,20,26a4,4,0,1,0-7.36,2.16L5.87,37.48A4,4,0,0,0,4,37a4,4,0,1,0,3.35,1.84l6.78-9.32a3.9,3.9,0,0,0,4.55-.57L25.54,35A4,4,0,0,0,25,37a4,4,0,1,0,7.3-2.26l7.41-13A3.85,3.85,0,0,0,43.62,21l6.62,5.67A4,4,0,0,0,50,28a4,4,0,0,0,8,0,4,4,0,0,0-.62-2.12l6.71-8.39A4,4,0,0,0,66,18a4,4,0,0,0,0-8ZM4,43a2,2,0,1,1,2-2A2,2,0,0,1,4,43ZM14,26a2,2,0,1,1,2,2A2,2,0,0,1,14,26ZM29,39a2,2,0,1,1,2-2A2,2,0,0,1,29,39ZM41,20a2,2,0,1,1,2-2A2,2,0,0,1,41,20ZM54,30a2,2,0,1,1,2-2A2,2,0,0,1,54,30ZM66,16a2,2,0,1,1,2-2A2,2,0,0,1,66,16Zm0,27a4,4,0,0,0-2.68,1.05l-5.4-2.31a4,4,0,1,0-7.69.55l-6,3.41A4,4,0,0,0,37,48a4,4,0,0,0,.22,1.25l-5.88,2.52a4,4,0,0,0-5.63,1l-6.1-3A4,4,0,0,0,20,48a4,4,0,0,0-8,0,4,4,0,0,0,.24,1.31L6.17,53.65A4,4,0,1,0,8,57a4,4,0,0,0-.48-1.86L13.35,51a3.94,3.94,0,0,0,4.94.29L25,54.64c0,.12,0,.24,0,.36a4,4,0,1,0,7.65-1.62l5.67-2.43A4,4,0,0,0,45,48a3.91,3.91,0,0,0,0-.4L51.33,44a3.94,3.94,0,0,0,5.73-.42l5.16,2.21A4,4,0,0,0,62,47a4,4,0,1,0,4-4ZM4,59a2,2,0,1,1,2-2A2,2,0,0,1,4,59Zm12-9a2,2,0,1,1,2-2A2,2,0,0,1,16,50Zm13,7a2,2,0,1,1,2-2A2,2,0,0,1,29,57Zm12-7a2,2,0,1,1,2-2A2,2,0,0,1,41,50Zm13-7a2,2,0,1,1,2-2A2,2,0,0,1,54,43Zm12,6a2,2,0,1,1,2-2A2,2,0,0,1,66,49Z"></path>
  131.                     </svg>
  132.                 </span>
  133.  
  134.             <span *ngIf="item.text === 'Radar'" style="width: 25px; ">
  135.                     <svg id="radar" viewBox="0 0 70 70">
  136.                         <path d="M35,2.67,7,18.83V51.17L35,67.33,63,51.17V18.83Zm1,2.89L60,19.41,52,24,36,14.79Zm1.9,32.27L40,39l-2.42,1.4ZM39,36.13l2-1.83v3Zm-1.69,6.79L42,40.2l8,4.62L36,52.87ZM43,38.46v-6l3-2.71,5-2.88V43.08ZM36,17.1l14,8.08-1.92,1.11-11.36.46L36,26.34ZM19,30l7.68,8.6L19,43.08Zm8.53,10.42,3.91,10.95L20,44.82Zm-5.77-16.3L34,17.1v9.24l-.36.21ZM34,5.56v9.24L18.79,23.58l-2.41-.48L10,19.41ZM9,21.14l4.22,2.44L17,27.81V44.24L9,48.86Zm1,29.44L18,46l14.48,8.36L34,58.59v5.85ZM36,64.44V55.21L52,46l8,4.62ZM61,48.86l-8-4.62V25.76l8-4.62Z"></path>
  137.                     </svg>
  138.                 </span>
  139.  
  140.             <span *ngIf="item.text === 'Scatter'" style="width: 25px; ">
  141.                     <svg id="scatter" viewBox="0 0 70 70">
  142.                         <path d="M19,42a4,4,0,1,1,4-4A4,4,0,0,1,19,42Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,19,36Zm8-2a4,4,0,1,1,4-4A4,4,0,0,1,27,34Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,27,28Zm9-3a4,4,0,1,1,4-4A4,4,0,0,1,36,25Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,36,19ZM47,29a4,4,0,1,1,4-4A4,4,0,0,1,47,29Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,47,23ZM27,51a4,4,0,1,1,4-4A4,4,0,0,1,27,51Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,27,45ZM64,21a4,4,0,1,1,4-4A4,4,0,0,1,64,21Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,64,15ZM6,61a4,4,0,1,1,4-4A4,4,0,0,1,6,61Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,6,55Zm11-3a4,4,0,1,1,4-4A4,4,0,0,1,17,52Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,17,46Zm13-3a4,4,0,1,1,4-4A4,4,0,0,1,30,43Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,30,37Zm8-3a4,4,0,1,1,4-4A4,4,0,0,1,38,34Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,38,28ZM49,39a4,4,0,1,1,4-4A4,4,0,0,1,49,39Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,49,33Zm9-2a4,4,0,1,1,4-4A4,4,0,0,1,58,31Zm0-6a2,2,0,1,0,2,2A2,2,0,0,0,58,25Z"></path>
  143.                     </svg>
  144.                 </span>
  145.  
  146.             <span *ngIf="item.text === 'Bubble'" style="width: 25px; ">
  147.                     <svg id="bubble" viewBox="0 0 70 70">
  148.                         <path d="M62.5,28A3.5,3.5,0,1,0,66,31.5,3.5,3.5,0,0,0,62.5,28Zm0,5A1.5,1.5,0,1,1,64,31.5,1.5,1.5,0,0,1,62.5,33ZM18,46a7,7,0,1,0,7,7A7,7,0,0,0,18,46Zm0,12a5,5,0,1,1,5-5A5,5,0,0,1,18,58Zm3-30.5A6.5,6.5,0,1,0,14.5,34,6.5,6.5,0,0,0,21,27.5Zm-11,0A4.5,4.5,0,1,1,14.5,32,4.51,4.51,0,0,1,10,27.5ZM21.5,37A3.5,3.5,0,1,0,25,40.5,3.5,3.5,0,0,0,21.5,37Zm0,5A1.5,1.5,0,1,1,23,40.5,1.5,1.5,0,0,1,21.5,42Zm32-23A4.5,4.5,0,1,0,49,14.5,4.5,4.5,0,0,0,53.5,19Zm0-7A2.5,2.5,0,1,1,51,14.5,2.5,2.5,0,0,1,53.5,12ZM53,31.76c0-.09,0-.17,0-.26A14.5,14.5,0,1,0,30,43.24c0,.09,0,.17,0,.26A14.5,14.5,0,1,0,53,31.76ZM46.5,55A2.5,2.5,0,1,1,49,52.5,2.5,2.5,0,0,1,46.5,55Zm4-.57A4.5,4.5,0,1,0,43.65,56,12.5,12.5,0,0,1,32,44.47a14.46,14.46,0,0,0,20.7-10.34,12.47,12.47,0,0,1-2.2,20.3Z"></path>
  149.                     </svg>
  150.                 </span> {{item.text}}
  151.         </ng-template>
  152.     </kendo-contextmenu>
  153.  
  154.     <kendo-window title="Stock Portfolio Details" *ngIf="opened" (close)="close()" [top]="100" [minWidth]="250" [width]="500" [height]="650">
  155.         <window [data]="selectedStocks" [chartConfiguration]="chartConfiguration"></window>
  156.     </kendo-window>
  157.     </main>
  158.  
  159.     <footer class="container-fluid footer text-center d-flex align-items-center">
  160.         <div class="w-100">
  161.             <span class="footer-copyright text-center">Copyright © 2019 Progress Software Corporation and/or its subsidiaries or affiliates.</span>
  162.             <span class="progress-logo d-inline-flex"></span>
  163.  
  164.             <div class="redirect-buttons">
  165.                 <a href="https://github.com/telerik/kendo-angular" target="_blank" role="button"><span class="k-icon k-i-download"></span>Download on Github</a>
  166.                 <a href="https://www.telerik.com/kendo-angular-ui/components/grid/" target="_blank" role="button"><span class="k-icon k-i-file-txt"></span>Documentation</a>
  167.             </div>
  168.  
  169.         </div>
  170. </main>
  171.  
  172. <app-footer></app-footer>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top