alyssamichelle

<kendo-buttongroup [selection]="'single'">
    <button kendoButton routerLink="/stocks" routerLinkActive="k-state-active">
        Result List
    </button>
    <button kendoButton routerLink="/heatmap" routerLinkActive="k-state-active">
        Heatmap View
    </button>
    <button kendoButton routerLink="/real-time" routerLinkActive="k-state-active">
        Data Virtualization
    </button>

alyssamichelle

<kendo-dropdownlist
    class="dropdown-list-selection interval"
    [style.width.px]="135"
    [style.marginRight.px]="8"
    [data]="intervals"
    [iconClass]="'k-i-arrow-chevron-down'"
    [textField]="'name'"
    [valueField]="'interval'"
    [(value)]="selectedInterval"
    [itemDisabled]="disableIncompatibleIntervals">

alyssamichelle

<kendo-daterange>
  <kendo-dateinput
      kendoDateRangeStartInput
      [autoCorrectOn]="'change'"
      [min]="calendarMin"
      [max]="calendarMax"
      [(ngModel)]="range.start"
      (valueChange)="handleRangeChange($event, range.end)">
  </kendo-dateinput>
  <kendo-dateinput

alyssamichelle

<kendo-stockchart
    class="stock-chart"
    [transitions]="true"
    [renderAs]="'svg'"
    (navigatorFilter)="configureVolumeValueAxisHeight()"
>
    <kendo-chart-category-axis>
        <kendo-chart-category-axis-item
            [crosshair]="{ visible: true }"
            [maxDivisions]="20"

alyssamichelle

<div class="container">
    <div class="row py-4 d-flex justify-content-between align-items-center">
        <div class="col col-4 d-flex daterange-input-wrap">
            <kendo-daterange>
                <kendo-dateinput
                    kendoDateRangeStartInput
                    [autoCorrectOn]="'change'"
                    [min]="calendarMin"
                    [max]="calendarMax"
                    [(ngModel)]="range.start"

alyssamichelle

    <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>

alyssamichelle

MouseEvent {
  isTrusted: true,
  screenX: 431,
  screenY: 443,
  clientX: 431,
  clientY: 309,
  ctrlKey: false,
  shiftKey: false,
  altKey: false,
  metaKey: false,

alyssamichelle

alyssamichelle

alyssamichelle

Katie

A Pen by Alyssa Nicoll on CodePen.

License.