chore: update grid live data project versions (#4225)
This commit is contained in:
Georgi Slavov
GitHub
Родитель
3084e62bbd
Коммит
360d638db6
|
|
@ -53,6 +53,12 @@ jobs:
|
|||
npm ci
|
||||
# npm run lint
|
||||
|
||||
- name: Build Grid Live Data app
|
||||
working-directory: ./examples-standalone/grid-live-data
|
||||
run: |
|
||||
npm ci
|
||||
npm run build
|
||||
|
||||
standalone-examples-node14:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
|
|
@ -113,11 +119,5 @@ jobs:
|
|||
npm ci
|
||||
npm run build
|
||||
|
||||
- name: Build Grid Live Data app
|
||||
working-directory: ./examples-standalone/grid-live-data
|
||||
run: |
|
||||
npm ci
|
||||
npm run build
|
||||
|
||||
- name: Cleanup
|
||||
run: git clean -xdf
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
|
||||
# For additional information regarding the format and rule options, please see:
|
||||
# https://github.com/browserslist/browserslist#queries
|
||||
|
||||
# For the full list of supported browsers by the Angular framework, please see:
|
||||
# https://angular.io/guide/browser-support
|
||||
|
||||
# You can see what browsers were selected by your queries by running:
|
||||
# npx browserslist
|
||||
|
||||
last 1 Chrome version
|
||||
last 1 Firefox version
|
||||
last 2 Edge major versions
|
||||
last 2 Safari major versions
|
||||
last 2 iOS major versions
|
||||
Firefox ESR
|
||||
|
|
@ -17,4 +17,4 @@ Used Kendo UI for Angular Components:
|
|||
1. Enter the project directory by running `cd examples-standalone/grid-live-data`.
|
||||
1. Install the node modules with `npm install`.
|
||||
1. Run the project with `ng serve`.
|
||||
1. Open http://localhost:4200.
|
||||
1. Open http://localhost:4200.
|
||||
|
|
@ -5,22 +5,20 @@
|
|||
"projects": {
|
||||
"grid-live-data": {
|
||||
"projectType": "application",
|
||||
"schematics": {
|
||||
"@schematics/angular:application": {
|
||||
"strict": true
|
||||
}
|
||||
},
|
||||
"schematics": {},
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "app",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:browser",
|
||||
"builder": "@angular-devkit/build-angular:application",
|
||||
"options": {
|
||||
"outputPath": "dist/grid-live-data",
|
||||
"index": "src/index.html",
|
||||
"main": "src/main.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"browser": "src/main.ts",
|
||||
"polyfills": [
|
||||
"zone.js"
|
||||
],
|
||||
"tsConfig": "tsconfig.app.json",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
|
|
@ -44,24 +42,16 @@
|
|||
},
|
||||
{
|
||||
"type": "anyComponentStyle",
|
||||
"maximumWarning": "6kb"
|
||||
}
|
||||
],
|
||||
"fileReplacements": [
|
||||
{
|
||||
"replace": "src/environments/environment.ts",
|
||||
"with": "src/environments/environment.prod.ts"
|
||||
"maximumWarning": "2kb",
|
||||
"maximumError": "4kb"
|
||||
}
|
||||
],
|
||||
"outputHashing": "all"
|
||||
},
|
||||
"development": {
|
||||
"buildOptimizer": false,
|
||||
"optimization": false,
|
||||
"vendorChunk": true,
|
||||
"extractLicenses": false,
|
||||
"sourceMap": true,
|
||||
"namedChunks": true
|
||||
"sourceMap": true
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "production"
|
||||
|
|
@ -70,10 +60,10 @@
|
|||
"builder": "@angular-devkit/build-angular:dev-server",
|
||||
"configurations": {
|
||||
"production": {
|
||||
"browserTarget": "grid-live-data:build:production"
|
||||
"buildTarget": "grid-live-data:build:production"
|
||||
},
|
||||
"development": {
|
||||
"browserTarget": "grid-live-data:build:development"
|
||||
"buildTarget": "grid-live-data:build:development"
|
||||
}
|
||||
},
|
||||
"defaultConfiguration": "development"
|
||||
|
|
@ -81,16 +71,17 @@
|
|||
"extract-i18n": {
|
||||
"builder": "@angular-devkit/build-angular:extract-i18n",
|
||||
"options": {
|
||||
"browserTarget": "grid-live-data:build"
|
||||
"buildTarget": "grid-live-data:build"
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "src/test.ts",
|
||||
"polyfills": "src/polyfills.ts",
|
||||
"polyfills": [
|
||||
"zone.js",
|
||||
"zone.js/testing"
|
||||
],
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"karmaConfig": "karma.conf.js",
|
||||
"assets": [
|
||||
"src/favicon.ico",
|
||||
"src/assets"
|
||||
|
|
@ -106,6 +97,5 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"defaultProject": "grid-live-data"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,44 +0,0 @@
|
|||
// Karma configuration file, see link for more information
|
||||
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
||||
|
||||
module.exports = function (config) {
|
||||
config.set({
|
||||
basePath: '',
|
||||
frameworks: ['jasmine', '@angular-devkit/build-angular'],
|
||||
plugins: [
|
||||
require('karma-jasmine'),
|
||||
require('karma-chrome-launcher'),
|
||||
require('karma-jasmine-html-reporter'),
|
||||
require('karma-coverage'),
|
||||
require('@angular-devkit/build-angular/plugins/karma')
|
||||
],
|
||||
client: {
|
||||
jasmine: {
|
||||
// you can add configuration options for Jasmine here
|
||||
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
|
||||
// for example, you can disable the random execution with `random: false`
|
||||
// or set a specific seed with `seed: 4321`
|
||||
},
|
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
},
|
||||
jasmineHtmlReporter: {
|
||||
suppressAll: true // removes the duplicated traces
|
||||
},
|
||||
coverageReporter: {
|
||||
dir: require('path').join(__dirname, './coverage/grid-live-data'),
|
||||
subdir: '.',
|
||||
reporters: [
|
||||
{ type: 'html' },
|
||||
{ type: 'text-summary' }
|
||||
]
|
||||
},
|
||||
reporters: ['progress', 'kjhtml'],
|
||||
port: 9876,
|
||||
colors: true,
|
||||
logLevel: config.LOG_INFO,
|
||||
autoWatch: true,
|
||||
browsers: ['Chrome'],
|
||||
singleRun: false,
|
||||
restartOnFileChange: true
|
||||
});
|
||||
};
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -10,57 +10,58 @@
|
|||
},
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@angular/animations": "~13.0.0",
|
||||
"@angular/common": "~13.0.0",
|
||||
"@angular/compiler": "~13.0.0",
|
||||
"@angular/core": "~13.0.0",
|
||||
"@angular/forms": "~13.0.0",
|
||||
"@angular/localize": "~13.0.0",
|
||||
"@angular/platform-browser": "~13.0.0",
|
||||
"@angular/platform-browser-dynamic": "~13.0.0",
|
||||
"@angular/router": "~13.0.0",
|
||||
"@progress/kendo-angular-buttons": "^6.0.0",
|
||||
"@progress/kendo-angular-charts": "^5.4.0",
|
||||
"@progress/kendo-angular-common": "^2.0.0",
|
||||
"@progress/kendo-angular-dateinputs": "^5.0.0",
|
||||
"@progress/kendo-angular-dropdowns": "^5.0.0",
|
||||
"@progress/kendo-angular-excel-export": "^4.0.0",
|
||||
"@progress/kendo-angular-grid": "^5.5.0",
|
||||
"@progress/kendo-angular-icons": "^0.4.4",
|
||||
"@progress/kendo-angular-indicators": "^1.1.1",
|
||||
"@progress/kendo-angular-inputs": "^7.0.0",
|
||||
"@progress/kendo-angular-intl": "^3.1.2",
|
||||
"@progress/kendo-angular-l10n": "^3.0.0",
|
||||
"@progress/kendo-angular-label": "^3.0.0",
|
||||
"@progress/kendo-angular-layout": "^6.3.6",
|
||||
"@progress/kendo-angular-navigation": "^1.1.2",
|
||||
"@progress/kendo-angular-pdf-export": "^3.0.0",
|
||||
"@progress/kendo-angular-popup": "^4.0.0",
|
||||
"@progress/kendo-angular-progressbar": "^2.0.0",
|
||||
"@progress/kendo-angular-tooltip": "^3.1.3",
|
||||
"@progress/kendo-angular-treeview": "^5.0.0",
|
||||
"@angular/animations": "^17.0.0",
|
||||
"@angular/common": "^17.0.0",
|
||||
"@angular/compiler": "^17.0.0",
|
||||
"@angular/core": "^17.0.0",
|
||||
"@angular/forms": "^17.0.0",
|
||||
"@angular/localize": "^17.0.0",
|
||||
"@angular/platform-browser": "^17.0.0",
|
||||
"@angular/platform-browser-dynamic": "^17.0.0",
|
||||
"@angular/router": "^17.0.0",
|
||||
"@progress/kendo-angular-buttons": "15.0.1",
|
||||
"@progress/kendo-angular-charts": "^15.0.1",
|
||||
"@progress/kendo-angular-common": "15.0.1",
|
||||
"@progress/kendo-angular-dateinputs": "15.0.1",
|
||||
"@progress/kendo-angular-dialog": "15.0.1",
|
||||
"@progress/kendo-angular-dropdowns": "15.0.1",
|
||||
"@progress/kendo-angular-excel-export": "15.0.1",
|
||||
"@progress/kendo-angular-grid": "^15.0.1",
|
||||
"@progress/kendo-angular-icons": "15.0.1",
|
||||
"@progress/kendo-angular-indicators": "^15.0.1",
|
||||
"@progress/kendo-angular-inputs": "15.0.1",
|
||||
"@progress/kendo-angular-intl": "15.0.1",
|
||||
"@progress/kendo-angular-l10n": "15.0.1",
|
||||
"@progress/kendo-angular-label": "15.0.1",
|
||||
"@progress/kendo-angular-layout": "15.0.1",
|
||||
"@progress/kendo-angular-pdf-export": "15.0.1",
|
||||
"@progress/kendo-angular-popup": "15.0.1",
|
||||
"@progress/kendo-angular-progressbar": "15.0.1",
|
||||
"@progress/kendo-angular-tooltip": "^15.0.1",
|
||||
"@progress/kendo-angular-treeview": "15.0.1",
|
||||
"@progress/kendo-angular-utils": "15.0.1",
|
||||
"@progress/kendo-data-query": "^1.0.0",
|
||||
"@progress/kendo-drawing": "^1.1.2",
|
||||
"@progress/kendo-drawing": "^1.19.0",
|
||||
"@progress/kendo-licensing": "^1.0.2",
|
||||
"@progress/kendo-svg-icons": "^0.1.2",
|
||||
"@progress/kendo-theme-default": "latest",
|
||||
"hammerjs": "^2.0.0",
|
||||
"rxjs": "~7.4.0",
|
||||
"@progress/kendo-svg-icons": "^2.0.0",
|
||||
"@progress/kendo-theme-default": "^7.2.0",
|
||||
"rxjs": "~7.8.0",
|
||||
"tslib": "^2.3.0",
|
||||
"zone.js": "~0.11.4"
|
||||
"zone.js": "~0.14.2",
|
||||
"@progress/kendo-angular-navigation": "15.0.1",
|
||||
"hammerjs": "^2.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~13.0.3",
|
||||
"@angular/cli": "~13.0.3",
|
||||
"@angular/compiler-cli": "~13.0.0",
|
||||
"@types/jasmine": "~3.10.0",
|
||||
"@types/node": "^12.11.1",
|
||||
"jasmine-core": "~3.10.0",
|
||||
"karma": "~6.3.0",
|
||||
"karma-chrome-launcher": "~3.1.0",
|
||||
"karma-coverage": "~2.0.3",
|
||||
"karma-jasmine": "~4.0.0",
|
||||
"karma-jasmine-html-reporter": "~1.7.0",
|
||||
"typescript": "~4.4.3"
|
||||
"@angular-devkit/build-angular": "^17.0.10",
|
||||
"@angular/cli": "^17.0.10",
|
||||
"@angular/compiler-cli": "^17.0.0",
|
||||
"@types/jasmine": "~5.1.0",
|
||||
"jasmine-core": "~5.1.0",
|
||||
"karma": "~6.4.0",
|
||||
"karma-chrome-launcher": "~3.2.0",
|
||||
"karma-coverage": "~2.2.0",
|
||||
"karma-jasmine": "~5.1.0",
|
||||
"karma-jasmine-html-reporter": "~2.1.0",
|
||||
"typescript": "~5.2.2"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,4 +6,4 @@
|
|||
<grid></grid>
|
||||
</div>
|
||||
<main-panel></main-panel>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,7 +1,19 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { RouterOutlet } from '@angular/router';
|
||||
import { GridComponent } from './grid/grid.component';
|
||||
import { HeaderComponent } from './header/header.component';
|
||||
import { MainPanelComponent } from './main-panel/main-panel.component';
|
||||
import { MyPortfolioComponent } from './my-portfolio/my-portfolio.component';
|
||||
import { TotalPortfolioComponent } from './total-portfolio/total-portfolio.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
selector: 'app-root',
|
||||
standalone: true,
|
||||
imports: [CommonModule, RouterOutlet, GridComponent, HeaderComponent, MainPanelComponent, MyPortfolioComponent, TotalPortfolioComponent],
|
||||
templateUrl: './app.component.html',
|
||||
styleUrl: './app.component.css'
|
||||
})
|
||||
export class AppComponent {}
|
||||
export class AppComponent {
|
||||
title = 'grid-live-data';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,9 @@
|
|||
import { ApplicationConfig, importProvidersFrom } from '@angular/core';
|
||||
import { provideRouter } from '@angular/router';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
|
||||
import { routes } from './app.routes';
|
||||
|
||||
export const appConfig: ApplicationConfig = {
|
||||
providers: [provideRouter(routes), importProvidersFrom([BrowserAnimationsModule])]
|
||||
};
|
||||
|
|
@ -1,54 +0,0 @@
|
|||
import { NgModule } from '@angular/core';
|
||||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
|
||||
import { GridModule } from '@progress/kendo-angular-grid';
|
||||
import { NavigationModule } from '@progress/kendo-angular-navigation';
|
||||
import { IndicatorsModule } from '@progress/kendo-angular-indicators';
|
||||
import { IconsModule } from '@progress/kendo-angular-icons';
|
||||
import { LayoutModule } from '@progress/kendo-angular-layout';
|
||||
import { ChartsModule } from '@progress/kendo-angular-charts';
|
||||
import { ButtonsModule } from '@progress/kendo-angular-buttons';
|
||||
import { TooltipsModule } from '@progress/kendo-angular-tooltip';
|
||||
import 'hammerjs';
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
import { HeaderComponent } from './header/header.component';
|
||||
import { TotalPortfolioComponent } from './total-portfolio/total-portfolio.component';
|
||||
import { MyPortfolioComponent } from './my-portfolio/my-portfolio.component';
|
||||
import { MainPanelComponent } from './main-panel/main-panel.component';
|
||||
import { GridComponent } from './grid/grid.component';
|
||||
import { BalanceComponent } from './main-panel/balance/balance.component';
|
||||
import { TransactionsComponent } from './main-panel/transactions/transactions.component';
|
||||
import { NewsComponent } from './main-panel/news/news.component';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
AppComponent,
|
||||
HeaderComponent,
|
||||
MyPortfolioComponent,
|
||||
MainPanelComponent,
|
||||
GridComponent,
|
||||
TotalPortfolioComponent,
|
||||
BalanceComponent,
|
||||
TransactionsComponent,
|
||||
NewsComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
HttpClientModule,
|
||||
GridModule,
|
||||
BrowserAnimationsModule,
|
||||
NavigationModule,
|
||||
IndicatorsModule,
|
||||
IconsModule,
|
||||
LayoutModule,
|
||||
ButtonsModule,
|
||||
ChartsModule,
|
||||
TooltipsModule,
|
||||
],
|
||||
providers: [],
|
||||
bootstrap: [AppComponent]
|
||||
})
|
||||
export class AppModule { }
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import { Routes } from '@angular/router';
|
||||
|
||||
export const routes: Routes = [];
|
||||
|
|
@ -24,8 +24,8 @@
|
|||
<kendo-grid-column class="priceColumn" field="change_24h" title="24h%">
|
||||
<ng-template kendoGridCellTemplate let-dataItem>
|
||||
<span> {{ dataItem.change_24h | number }}% </span>
|
||||
<span class="k-icon k-i-arrow-60-down arrow-down" *ngIf="dataItem.change_24h < prevDataItem.change_24h"></span>
|
||||
<span class="k-icon k-i-arrow-60-up arrow-up" *ngIf="dataItem.change_24h > prevDataItem.change_24h"></span>
|
||||
<kendo-svg-icon [icon]="downArrowIcon" *ngIf="dataItem.change_24h < prevDataItem.change_24h"></kendo-svg-icon>
|
||||
<kendo-svg-icon [icon]="upArrowIcon" *ngIf="dataItem.change_24h > prevDataItem.change_24h"></kendo-svg-icon>
|
||||
</ng-template>
|
||||
</kendo-grid-column>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,21 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { RowClassArgs } from '@progress/kendo-angular-grid';
|
||||
import { GridModule, RowClassArgs } from '@progress/kendo-angular-grid';
|
||||
import { Observable } from 'rxjs';
|
||||
import { trigger, style, animate, transition, keyframes } from '@angular/animations';
|
||||
import { Stock, StocksService } from '../services/stocks.service';
|
||||
|
||||
import { SVGIcon, caretAltDownIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
|
||||
import { Stock, StocksService } from '../../services/stocks.service';
|
||||
import { IconsModule } from '@progress/kendo-angular-icons';
|
||||
import { HttpClientModule } from '@angular/common/http';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'grid',
|
||||
templateUrl: './grid.component.html',
|
||||
standalone: true,
|
||||
styleUrls: ['./grid.component.css'],
|
||||
imports: [GridModule, IconsModule, HttpClientModule],
|
||||
providers: [StocksService],
|
||||
animations: [
|
||||
trigger('positiveState', [
|
||||
transition('void => *', []),
|
||||
|
|
@ -29,6 +37,9 @@ export class GridComponent {
|
|||
public gridData: Observable<Stock[]>;
|
||||
public prevDataItem!: Stock;
|
||||
|
||||
public downArrowIcon: SVGIcon = caretAltDownIcon;
|
||||
public upArrowIcon: SVGIcon = caretAltUpIcon;
|
||||
|
||||
constructor(private stockService: StocksService) {
|
||||
this.gridData = this.stockService.getDataObservable();
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,5 +23,6 @@
|
|||
|
||||
.docs-icon{
|
||||
color: white;
|
||||
font-size: 25px;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,28 +6,19 @@
|
|||
<kendo-appbar-spacer></kendo-appbar-spacer>
|
||||
|
||||
<kendo-appbar-section class="actions">
|
||||
<div kendoTooltip [offset]="4">
|
||||
<a
|
||||
class="k-button k-flat k-text-right"
|
||||
href="https://github.com/telerik/kendo-angular/tree/master/examples-standalone/grid-live-data"
|
||||
target="_blank"
|
||||
role="button"
|
||||
title="Download on GitHub"
|
||||
><img src="assets/github-icon.svg" alt="github icon" [style.width.px]="25"
|
||||
/></a>
|
||||
<a
|
||||
class="k-button k-flat k-text-right"
|
||||
href="https://www.telerik.com/kendo-angular-ui/components/"
|
||||
target="_blank"
|
||||
role="button"
|
||||
title="Documentation"
|
||||
><span class="k-icon k-i-file-txt docs-icon"></span
|
||||
></a>
|
||||
</div>
|
||||
<div kendoTooltip [offset]="4">
|
||||
<a class="k-button k-button-flat k-text-right"
|
||||
href="https://github.com/telerik/kendo-angular/tree/master/examples-standalone/grid-live-data"
|
||||
target="_blank" role="button" title="Download on GitHub"><img src="assets/github-icon.svg"
|
||||
alt="github icon" [style.width.px]="25" /></a>
|
||||
<a class="k-button k-button-flat k-text-right" href="https://www.telerik.com/kendo-angular-ui/components/"
|
||||
target="_blank" role="button" title="Documentation"><kendo-svg-icon class="docs-icon"
|
||||
[icon]="fileIcon"></kendo-svg-icon></a>
|
||||
</div>
|
||||
<span class="k-appbar-separator"></span>
|
||||
<kendo-badge-container>
|
||||
<button class="k-button k-button-clear">
|
||||
<kendo-icon themeColor="light" name="bell"></kendo-icon>
|
||||
<kendo-svg-icon themeColor="light" [icon]="bellIcon"></kendo-svg-icon>
|
||||
</button>
|
||||
<kendo-badge class="badge" shape="dot" size="medium" position="inside"></kendo-badge>
|
||||
</kendo-badge-container>
|
||||
|
|
@ -36,4 +27,4 @@
|
|||
<kendo-appbar-section>
|
||||
<kendo-avatar [imageSrc]="kendokaAvatar" shape="circle" width="26px" height="26px"></kendo-avatar>
|
||||
</kendo-appbar-section>
|
||||
</kendo-appbar>
|
||||
</kendo-appbar>
|
||||
|
|
@ -1,10 +1,21 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { SVGIcon, bellIcon, fileTxtIcon } from '@progress/kendo-svg-icons';
|
||||
import { NavigationModule } from "@progress/kendo-angular-navigation";
|
||||
import { TooltipsModule } from '@progress/kendo-angular-tooltip';
|
||||
import { IconsModule } from '@progress/kendo-angular-icons';
|
||||
import { IndicatorsModule } from '@progress/kendo-angular-indicators';
|
||||
import { LayoutModule } from '@progress/kendo-angular-layout';
|
||||
|
||||
@Component({
|
||||
selector: 'header',
|
||||
templateUrl: './header.component.html',
|
||||
styleUrls: ['./header.component.css']
|
||||
selector: 'header',
|
||||
standalone: true,
|
||||
imports: [NavigationModule, TooltipsModule, IconsModule, IndicatorsModule, LayoutModule],
|
||||
templateUrl: './header.component.html',
|
||||
styleUrl: './header.component.css'
|
||||
})
|
||||
export class HeaderComponent {
|
||||
public kendokaAvatar = 'https://www.telerik.com/kendo-angular-ui-develop/components/navigation/appbar/assets/kendoka-angular.png';
|
||||
|
||||
public fileIcon: SVGIcon = fileTxtIcon;
|
||||
public bellIcon: SVGIcon = bellIcon;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<kendo-card-body>
|
||||
<p class="card-profit-text">Monthly profit</p>
|
||||
<p class="card-profit-currency">$12,649</p>
|
||||
<kendo-chip class="chip" label="+10%" icon="arrow-60-up"> </kendo-chip>
|
||||
<kendo-chip class="chip" label="+10%" [svgIcon]="upArrowIcon"> </kendo-chip>
|
||||
</kendo-card-body>
|
||||
</kendo-card>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,15 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { ButtonsModule } from '@progress/kendo-angular-buttons';
|
||||
import { LayoutModule } from '@progress/kendo-angular-layout';
|
||||
import { SVGIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
|
||||
|
||||
@Component({
|
||||
selector: 'balance',
|
||||
templateUrl: './balance.component.html',
|
||||
styleUrls: ['./balance.component.css']
|
||||
selector: 'balance',
|
||||
standalone: true,
|
||||
imports: [LayoutModule, ButtonsModule],
|
||||
templateUrl: './balance.component.html',
|
||||
styleUrl: './balance.component.css'
|
||||
})
|
||||
export class BalanceComponent {}
|
||||
export class BalanceComponent {
|
||||
public upArrowIcon: SVGIcon = caretAltUpIcon;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,14 @@
|
|||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { NewsComponent } from './news/news.component';
|
||||
import { BalanceComponent } from './balance/balance.component';
|
||||
import { TransactionsComponent } from './transactions/transactions.component';
|
||||
|
||||
@Component({
|
||||
selector: 'main-panel',
|
||||
templateUrl: './main-panel.component.html',
|
||||
styleUrls: ['./main-panel.component.css'],
|
||||
imports: [BalanceComponent, NewsComponent, TransactionsComponent],
|
||||
standalone: true,
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class MainPanelComponent {}
|
||||
export class MainPanelComponent {}
|
||||
|
|
@ -8,4 +8,4 @@
|
|||
|
||||
.news-img {
|
||||
border-radius: 10px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,15 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { News } from 'src/app/models/news.model';
|
||||
import { LayoutModule } from '@progress/kendo-angular-layout';
|
||||
import { News } from '../../models/news.model';
|
||||
import { newsFeed } from '../transaction-data/news-data';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'news',
|
||||
templateUrl: './news.component.html',
|
||||
styleUrls: ['./news.component.css']
|
||||
selector: 'news',
|
||||
standalone: true,
|
||||
imports: [LayoutModule, CommonModule],
|
||||
templateUrl: './news.component.html',
|
||||
styleUrl: './news.component.css'
|
||||
})
|
||||
export class NewsComponent {
|
||||
public newsFeedData: News[] = newsFeed;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,15 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { Transactions } from 'src/app/models/transaction.model';
|
||||
import { Transactions } from '../../models/transaction.model';
|
||||
import { accountTransactions } from '../transaction-data/transactions';
|
||||
import { LayoutModule } from '@progress/kendo-angular-layout';
|
||||
import { CommonModule } from '@angular/common';
|
||||
|
||||
@Component({
|
||||
selector: 'transactions',
|
||||
templateUrl: './transactions.component.html',
|
||||
styleUrls: ['./transactions.component.css']
|
||||
selector: 'transactions',
|
||||
standalone: true,
|
||||
imports: [LayoutModule, CommonModule],
|
||||
templateUrl: './transactions.component.html',
|
||||
styleUrl: './transactions.component.css'
|
||||
})
|
||||
export class TransactionsComponent {
|
||||
public transactionCards: Transactions[] = accountTransactions;
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
<p kendoCardSubtitle class="card-subtitle">
|
||||
{{ card.currency }}
|
||||
<span class="price" [ngClass]="{ 'negative': card.change_24h < 0, 'positive': card.change_24h > 0 }">
|
||||
<span class="k-icon k-i-arrow-60-down arrow-down" *ngIf="card.change_24h < 0"></span>
|
||||
<span class="k-icon k-i-arrow-60-up arrow-up" *ngIf="card.change_24h > 0"></span>
|
||||
<kendo-svg-icon [icon]="downArrowIcon" *ngIf="card.change_24h < 0"></kendo-svg-icon>
|
||||
<kendo-svg-icon [icon]="upArrowIcon" *ngIf="card.change_24h > 0"></kendo-svg-icon>
|
||||
<span>
|
||||
{{getPriceChange(card) | currency: "USD"}} ({{card.change_24h}}%)
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -1,18 +1,26 @@
|
|||
import { Component, Input, ViewEncapsulation } from '@angular/core';
|
||||
import { SVGIcon, caretAltDownIcon, caretAltUpIcon } from '@progress/kendo-svg-icons';
|
||||
import { cards } from './card-data';
|
||||
import { Stock } from '../../services/stocks.service';
|
||||
import { IntlService } from '@progress/kendo-angular-intl';
|
||||
import { Observable } from 'rxjs';
|
||||
import { Stock } from '../services/stocks.service';
|
||||
import { cards } from './cards-data';
|
||||
import { IconsModule } from '@progress/kendo-angular-icons';
|
||||
import { LayoutModule } from '@progress/kendo-angular-layout';
|
||||
|
||||
@Component({
|
||||
selector: 'my-portfolio',
|
||||
templateUrl: './my-portfolio.component.html',
|
||||
styleUrls: ['./my-portfolio.component.css'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
selector: 'my-portfolio',
|
||||
standalone: true,
|
||||
imports: [IconsModule, LayoutModule],
|
||||
templateUrl: './my-portfolio.component.html',
|
||||
styleUrl: './my-portfolio.component.css',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class MyPortfolioComponent {
|
||||
@Input() data!: Observable<Stock[]>;
|
||||
|
||||
public upArrowIcon: SVGIcon = caretAltUpIcon;
|
||||
public downArrowIcon: SVGIcon = caretAltDownIcon;
|
||||
|
||||
public cryptoCards: Stock[] = cards;
|
||||
|
||||
constructor(public intl: IntlService) {}
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
.total-portfolio-title {
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
color: #626880
|
||||
}
|
||||
|
|
@ -1,11 +1,14 @@
|
|||
import { Component, ViewEncapsulation } from '@angular/core';
|
||||
import { CategoryAxisLabels, SeriesLine, ValueAxisLabels } from '@progress/kendo-angular-charts';
|
||||
import { CategoryAxisLabels, ChartsModule, SeriesLine, ValueAxisLabels } from '@progress/kendo-angular-charts';
|
||||
import 'hammerjs';
|
||||
|
||||
@Component({
|
||||
selector: 'total-portfolio',
|
||||
templateUrl: './total-portfolio.component.html',
|
||||
styleUrls: ['./total-portfolio.component.css'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
selector: 'total-portfolio',
|
||||
standalone: true,
|
||||
imports: [ChartsModule],
|
||||
templateUrl: './total-portfolio.component.html',
|
||||
styleUrl: './total-portfolio.component.css',
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class TotalPortfolioComponent {
|
||||
public categories: Array<string> = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
export const environment = {
|
||||
production: true
|
||||
};
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
// This file can be replaced during build by using the `fileReplacements` array.
|
||||
// `ng build` replaces `environment.ts` with `environment.prod.ts`.
|
||||
// The list of file replacements can be found in `angular.json`.
|
||||
|
||||
export const environment = {
|
||||
production: false
|
||||
};
|
||||
|
||||
/*
|
||||
* For easier debugging in development mode, you can import the following file
|
||||
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
|
||||
*
|
||||
* This import should be commented out in production mode because it will have a negative impact
|
||||
* on performance if an error is thrown.
|
||||
*/
|
||||
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
|
||||
Двоичные данные
examples-standalone/grid-live-data/src/favicon.ico
Двоичные данные
examples-standalone/grid-live-data/src/favicon.ico
Двоичный файл не отображается.
|
До Ширина: | Высота: | Размер: 5.3 KiB После Ширина: | Высота: | Размер: 15 KiB |
|
|
@ -2,7 +2,7 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Grid Live Data</title>
|
||||
<title>GridLiveData</title>
|
||||
<base href="/">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
||||
|
|
|
|||
|
|
@ -1,12 +1,8 @@
|
|||
import { enableProdMode } from '@angular/core';
|
||||
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
|
||||
/// <reference types="@angular/localize" />
|
||||
|
||||
import { AppModule } from './app/app.module';
|
||||
import { environment } from './environments/environment';
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { appConfig } from './app/app.config';
|
||||
import { AppComponent } from './app/app.component';
|
||||
|
||||
if (environment.production) {
|
||||
enableProdMode();
|
||||
}
|
||||
|
||||
platformBrowserDynamic().bootstrapModule(AppModule)
|
||||
.catch(err => console.error(err));
|
||||
bootstrapApplication(AppComponent, appConfig)
|
||||
.catch((err) => console.error(err));
|
||||
|
|
|
|||
|
|
@ -1,57 +0,0 @@
|
|||
/***************************************************************************************************
|
||||
* Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
|
||||
*/
|
||||
import '@angular/localize/init';
|
||||
/**
|
||||
* This file includes polyfills needed by Angular and is loaded before the app.
|
||||
* You can add your own extra polyfills to this file.
|
||||
*
|
||||
* This file is divided into 2 sections:
|
||||
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
|
||||
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
|
||||
* file.
|
||||
*
|
||||
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
|
||||
* automatically update themselves. This includes recent versions of Safari, Chrome (including
|
||||
* Opera), Edge on the desktop, and iOS and Chrome on mobile.
|
||||
*
|
||||
* Learn more in https://angular.io/guide/browser-support
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* BROWSER POLYFILLS
|
||||
*/
|
||||
|
||||
/**
|
||||
* By default, zone.js will patch all possible macroTask and DomEvents
|
||||
* user can disable parts of macroTask/DomEvents patch by setting following flags
|
||||
* because those flags need to be set before `zone.js` being loaded, and webpack
|
||||
* will put import in the top of bundle, so user need to create a separate file
|
||||
* in this directory (for example: zone-flags.ts), and put the following flags
|
||||
* into that file, and then add the following code before importing zone.js.
|
||||
* import './zone-flags';
|
||||
*
|
||||
* The flags allowed in zone-flags.ts are listed here.
|
||||
*
|
||||
* The following flags will work for all browsers.
|
||||
*
|
||||
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
|
||||
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
|
||||
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
|
||||
*
|
||||
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
|
||||
* with the following flag, it will bypass `zone.js` patch for IE/Edge
|
||||
*
|
||||
* (window as any).__Zone_enable_cross_context_check = true;
|
||||
*
|
||||
*/
|
||||
|
||||
/***************************************************************************************************
|
||||
* Zone JS is required by default for Angular itself.
|
||||
*/
|
||||
import 'zone.js'; // Included with Angular CLI.
|
||||
|
||||
|
||||
/***************************************************************************************************
|
||||
* APPLICATION IMPORTS
|
||||
*/
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
/* You can add global styles to this file, and also import other style files */
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
|
||||
|
||||
import 'zone.js/testing';
|
||||
import { getTestBed } from '@angular/core/testing';
|
||||
import {
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting
|
||||
} from '@angular/platform-browser-dynamic/testing';
|
||||
|
||||
declare const require: {
|
||||
context(path: string, deep?: boolean, filter?: RegExp): {
|
||||
keys(): string[];
|
||||
<T>(id: string): T;
|
||||
};
|
||||
};
|
||||
|
||||
// First, initialize the Angular testing environment.
|
||||
getTestBed().initTestEnvironment(
|
||||
BrowserDynamicTestingModule,
|
||||
platformBrowserDynamicTesting(),
|
||||
);
|
||||
|
||||
// Then we find all the tests.
|
||||
const context = require.context('./', true, /\.spec\.ts$/);
|
||||
// And load the modules.
|
||||
context.keys().map(context);
|
||||
|
|
@ -3,11 +3,12 @@
|
|||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/app",
|
||||
"types": []
|
||||
"types": [
|
||||
"@angular/localize"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"src/main.ts",
|
||||
"src/polyfills.ts"
|
||||
"src/main.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.d.ts"
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
{
|
||||
"compileOnSave": false,
|
||||
"compilerOptions": {
|
||||
"baseUrl": "./",
|
||||
"outDir": "./dist/out-tsc",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"strict": true,
|
||||
|
|
@ -10,16 +9,18 @@
|
|||
"noPropertyAccessFromIndexSignature": true,
|
||||
"noImplicitReturns": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"sourceMap": true,
|
||||
"declaration": false,
|
||||
"downlevelIteration": true,
|
||||
"experimentalDecorators": true,
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
"target": "es2017",
|
||||
"module": "es2020",
|
||||
"target": "ES2022",
|
||||
"module": "ES2022",
|
||||
"useDefineForClassFields": false,
|
||||
"lib": [
|
||||
"es2020",
|
||||
"ES2022",
|
||||
"dom"
|
||||
]
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,13 +4,10 @@
|
|||
"compilerOptions": {
|
||||
"outDir": "./out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine"
|
||||
"jasmine",
|
||||
"@angular/localize"
|
||||
]
|
||||
},
|
||||
"files": [
|
||||
"src/test.ts",
|
||||
"src/polyfills.ts"
|
||||
],
|
||||
"include": [
|
||||
"src/**/*.spec.ts",
|
||||
"src/**/*.d.ts"
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче