Skip to content

Instantly share code, notes, and snippets.

@alyssamichelle
Last active April 21, 2020 18:40
Show Gist options
  • Save alyssamichelle/d62f308295d06db34f3f6cbf72bf9a3a to your computer and use it in GitHub Desktop.
Save alyssamichelle/d62f308295d06db34f3f6cbf72bf9a3a to your computer and use it in GitHub Desktop.
<kendo-grid-column field="day_change" title="Change" media="(min-width: 768px)">
<ng-template kendoGridCellTemplate let-dataItem>
<span [ngClass]="{ 'grid-cell-positive' : dataItem.day_change > 0, 'grid-cell-negative' : dataItem.day_change < 0 }">
{{ dataItem.day_change > 0 ? ('+' + dataItem.day_change) : dataItem.day_change }}
</span>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="change_pct" title="%Change" media="(min-width: 768px)">
<ng-template kendoGridCellTemplate let-dataItem>
<span [ngClass]="{ 'grid-cell-positive' : dataItem.change_pct > 0, 'grid-cell-negative' : dataItem.change_pct < 0 }">
{{ dataItem.change_pct > 0 ? ('+' + dataItem.change_pct) : dataItem.change_pct }}%
</span>
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="volume" title="Volume" [width]="100" media="(min-width: 768px)">
<ng-template kendoGridCellTemplate let-dataItem>
{{ dataItem.volume | numberFormat }}
</ng-template>
</kendo-grid-column>
<kendo-grid-column class="grid-avg-volume-col" field="volume_avg" title="Avg Vol" media="(min-width: 768px)">
<ng-template kendoGridHeaderTemplate let-dataItem>
Avg Vol
<span class="grid-header-subtitle">(3 month)</span>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem>
{{ dataItem.volume_avg | numberFormat }}
</ng-template>
</kendo-grid-column>
<kendo-grid-column field="market_cap" title="Market Cap" media="(min-width: 1200px)">
<ng-template kendoGridCellTemplate let-dataItem>
{{dataItem.market_cap | numberFormat}}
</ng-template>
</kendo-grid-column>
<kendo-grid-column class="grid-pe-ratio-col" media="(min-width: 1200px)" field="pe" title="PE Ratio">
<ng-template kendoGridHeaderTemplate let-dataItem>
PE Ratio
<span class="grid-header-subtitle">(TTM)</span>
</ng-template>
</kendo-grid-column>
<kendo-grid-column class="grid-one-day-chart" media="(min-width: 992px)" field="intraday" title="1 Day Chart"
[width]="170" [sortable]="false">
<ng-template kendoGridCellTemplate let-dataItem>
<day-chart [data]="dataItem.intraday" [changePct]="dataItem.change_pct">
</day-chart>
</ng-template>
</kendo-grid-column>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment