Telerik
/
kendo-angular
зеркало из https://github.com/telerik/kendo-angular.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

chore: update Grid-Charts integration versions

This commit is contained in:
Georgi Slavov 2024-02-27 10:36:31 +02:00 коммит произвёл GitHub
Родитель f967697398
Коммит 4ed3b73980
Не найден ключ, соответствующий данной подписи
Идентификатор ключа GPG: B5690EEEBB952194
53 изменённых файлов: 7352 добавлений и 21038 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

11
.github/workflows/ci.yml поставляемый
Просмотреть файл

@ -47,6 +47,12 @@ jobs:
npm ci
npm run build
- name: Build Grid & Charts integration app
working-directory: ./examples-standalone/grid-charts-integration
run: |
npm ci
# npm run lint
standalone-examples-node14:
runs-on: ubuntu-latest
@ -107,11 +113,6 @@ jobs:
npm ci
npm run build
- name: Build Grid & Charts integration app
working-directory: ./examples-standalone/grid-charts-integration
run: |
npm ci
# npm run lint
- name: Build Grid Live Data app
working-directory: ./examples-standalone/grid-live-data
run: |

12
examples-standalone/grid-charts-integration/.browserslistrc
Просмотреть файл

@ -1,12 +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
# You can see what browsers were selected by your queries by running:
# npx browserslist
> 0.5%
last 2 versions
Firefox ESR
not dead
not IE 9-11 # For IE 9-11 support, remove 'not'.

16
examples-standalone/grid-charts-integration/.editorconfig Normal file
Просмотреть файл

@ -0,0 +1,16 @@
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.ts]
quote_type = single
[*.md]
max_line_length = off
trim_trailing_whitespace = false

26
examples-standalone/grid-charts-integration/.gitignore поставляемый
Просмотреть файл

@ -1,18 +1,18 @@
# See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
# Compiled output
/dist
/tmp
/out-tsc
/app-builds
main.js
/bazel-out
# dependencies
# Node
/node_modules
npm-debug.log
yarn-error.log
# IDEs and editors
/.idea
.editorconfig
.idea/
.project
.classpath
.c9/
@ -20,27 +20,23 @@ main.js
.settings/
*.sublime-workspace
# IDE - VSCode
# Visual Studio Code
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*
# misc
# Miscellaneous
/.angular/cache
/.sass-cache
.sass-cache/
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
testem.log
/typings
# e2e
/e2e/*.js
/e2e/*.map
# System Files
# System files
.DS_Store
Thumbs.db

2
examples-standalone/grid-charts-integration/README.md
Просмотреть файл

@ -8,4 +8,4 @@ This Kendo UI for Angular sample project demonstrates how to integrate the Grid
1. Enter the project directory by running `cd examples-standalone/grid-charts-integration`.
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.

88
examples-standalone/grid-charts-integration/angular.json
Просмотреть файл

@ -7,11 +7,7 @@
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss",
"skipTests": true
},
"@schematics/angular:service": {
"skipTests": true
"style": "scss"
}
},
"root": "",
@ -19,13 +15,16 @@
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": "dist/grid-charts-integration",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"browser": "src/main.ts",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
@ -33,63 +32,70 @@
"styles": [
"src/styles/_main.scss"
],
"scripts": [],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "8mb",
"maximumError": "10mb"
"maximumWarning": "500kb",
"maximumError": "1mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
"maximumWarning": "2kb",
"maximumError": "4kb"
}
]
],
"outputHashing": "all"
},
"development": {
"optimization": false,
"extractLicenses": false,
"sourceMap": true
}
},
"defaultConfiguration": ""
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "grid-charts-integration:build"
},
"configurations": {
"production": {
"browserTarget": "grid-charts-integration:build:production"
"buildTarget": "grid-charts-integration:build:production"
},
"development": {
"buildTarget": "grid-charts-integration:build:development"
}
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "grid-charts-integration:build"
"buildTarget": "grid-charts-integration:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"polyfills": [
"zone.js",
"zone.js/testing"
],
"tsConfig": "tsconfig.spec.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
},
"defaultProject": "grid-charts-integration"
}
}

32
examples-standalone/grid-charts-integration/karma.conf.js
Просмотреть файл

@ -1,32 +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-istanbul-reporter'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
coverageIstanbulReporter: {
dir: require('path').join(__dirname, './coverage/grid-charts-integration'),
reports: ['html', 'lcovonly', 'text-summary'],
fixWebpackSourcePaths: true
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};

25806
examples-standalone/grid-charts-integration/package-lock.json сгенерированный
Просмотреть файл

Разница между файлами не показана из-за своего большого размера Загрузить разницу

112
examples-standalone/grid-charts-integration/package.json
Просмотреть файл

@ -5,71 +5,65 @@
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
"watch": "ng build --watch --configuration development",
"test": "ng test"
},
"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.4.1",
"@progress/kendo-angular-charts": "^5.3.2",
"@progress/kendo-angular-common": "^2.0.2",
"@progress/kendo-angular-dateinputs": "^5.3.0",
"@progress/kendo-angular-dialog": "^5.2.1",
"@progress/kendo-angular-dropdowns": "^5.5.0",
"@progress/kendo-angular-excel-export": "^4.0.2",
"@progress/kendo-angular-grid": "^5.4.3",
"@progress/kendo-angular-inputs": "^7.5.1",
"@progress/kendo-angular-intl": "^3.1.2",
"@progress/kendo-angular-l10n": "^3.0.3",
"@progress/kendo-angular-label": "^3.1.1",
"@progress/kendo-angular-layout": "^6.3.5",
"@progress/kendo-angular-menu": "^3.0.3",
"@progress/kendo-angular-notification": "^3.0.3",
"@progress/kendo-angular-pdf-export": "^3.0.2",
"@progress/kendo-angular-popup": "^4.0.2",
"@progress/kendo-angular-progressbar": "^2.0.2",
"@progress/kendo-angular-tooltip": "^3.0.3",
"@progress/kendo-angular-treeview": "^5.4.2",
"@progress/kendo-data-query": "^1.5.5",
"@progress/kendo-drawing": "^1.15.0",
"@progress/kendo-file-saver": "^1.1.0",
"@progress/kendo-licensing": "^1.2.1",
"@progress/kendo-theme-bootstrap": "^4.42.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/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-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-menu": "^15.0.1",
"@progress/kendo-angular-navigation": "^15.0.1",
"@progress/kendo-angular-notification": "^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.7.0",
"@progress/kendo-drawing": "^1.19.0",
"@progress/kendo-file-saver": "^1.1.1",
"@progress/kendo-licensing": "^1.3.5",
"@progress/kendo-theme-bootstrap": "^7.2.0",
"bootstrap": "^4.4.1",
"hammerjs": "^2.0.0",
"rxjs": "~7.4.0",
"hammerjs": "^2.0.8",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.11.4"
"zone.js": "~0.14.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~13.0.1",
"@angular/cli": "~13.0.1",
"@angular/compiler-cli": "~13.0.0",
"@angular/language-service": "~13.0.0",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~6.0.0",
"jasmine-core": "~3.10.1",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.3.7",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~3.3.0",
"karma-jasmine-html-reporter": "^1.7.0",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "~6.1.0",
"typescript": "~4.4.4"
"@angular-devkit/build-angular": "^17.0.10",
"@angular/cli": "^17.0.10",
"@angular/compiler-cli": "^17.0.0",
"@angular/localize": "^17.2.1",
"@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"
}
}

10
examples-standalone/grid-charts-integration/src/app/app.component.html Normal file
Просмотреть файл

@ -0,0 +1,10 @@
<app-header></app-header>
<main class='container-fluid px-0'>
<div class='container'>
<app-stock-list></app-stock-list>
<app-action-buttons></app-action-buttons>
</div>
</main>
<app-footer></app-footer>

29
examples-standalone/grid-charts-integration/src/app/app.component.spec.ts Normal file
Просмотреть файл

@ -0,0 +1,29 @@
import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [AppComponent],
}).compileComponents();
});
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
it(`should have the 'grid-charts-integration' title`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app.title).toEqual('grid-charts-integration');
});
it('should render title', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.nativeElement as HTMLElement;
expect(compiled.querySelector('h1')?.textContent).toContain('Hello, grid-charts-integration');
});
});

35
examples-standalone/grid-charts-integration/src/app/app.component.ts
Просмотреть файл

@ -1,18 +1,17 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
template: `
<app-header></app-header>
<main class='container-fluid px-0'>
<div class='container'>
<app-stock-list></app-stock-list>
<app-action-buttons></app-action-buttons>
</div>
</main>
<app-footer></app-footer>
`
})
export class AppComponent {}
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { StockListComponent } from './components/stock-list/stock-list.component';
import { ActionButtonsComponent } from './components/action-buttons/action-buttons.component';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule, RouterOutlet, HeaderComponent, FooterComponent, StockListComponent, ActionButtonsComponent],
templateUrl: './app.component.html'
})
export class AppComponent {
title = 'grid-charts-integration';
}

9
examples-standalone/grid-charts-integration/src/app/app.config.ts Normal file
Просмотреть файл

@ -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])]
};

74
examples-standalone/grid-charts-integration/src/app/app.module.ts
Просмотреть файл

@ -1,74 +0,0 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { GridModule, ExcelModule } from '@progress/kendo-angular-grid';
import { ChartsModule } from '@progress/kendo-angular-charts';
import { WindowModule } from '@progress/kendo-angular-dialog';
import { PopupModule } from '@progress/kendo-angular-popup';
import { ContextMenuModule } from '@progress/kendo-angular-menu';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { TooltipModule } from '@progress/kendo-angular-tooltip';
import { ScatterBubbleChartComponent } from './components/charts/scatter-bubble/scatter-bubble-chart.component';
import { PieDonutStockComponent } from './components/charts/pie-donut/pie-donut-chart.component';
import { AppComponent } from './app.component';
import { HeaderComponent } from './components/header/header.component';
import { FooterComponent } from './components/footer/footer.component';
import { StockListComponent } from './components/stock-list/stock-list.component';
import { StocksChartComponent } from './components/charts/common/stocks-chart.component';
import { DayChartComponent } from './components/charts/day/day-chart.component';
import { WindowComponent } from './components/common/window/window.component';
import { SelectSeriesComponent } from './components/common/select-series/select-series.component';
import { SelectChartTypeComponent } from './components/common/select-chart-type/select-chart-type.component';
import { ActionButtonsComponent } from './components/action-buttons/action-buttons.component';
import { NumberFormatPipe } from './pipes/number-format.pipe';
import 'hammerjs';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
GridModule,
ChartsModule,
WindowModule,
DropDownsModule,
PopupModule,
ContextMenuModule,
InputsModule,
ButtonsModule,
ExcelModule,
LayoutModule,
TooltipModule
],
declarations: [
AppComponent,
HeaderComponent,
FooterComponent,
StocksChartComponent,
PieDonutStockComponent,
ScatterBubbleChartComponent,
DayChartComponent,
WindowComponent,
SelectSeriesComponent,
SelectChartTypeComponent,
NumberFormatPipe,
StockListComponent,
ActionButtonsComponent
],
entryComponents: [
StocksChartComponent,
PieDonutStockComponent,
ScatterBubbleChartComponent
],
bootstrap: [AppComponent]
})
export class AppModule { }

3
examples-standalone/grid-charts-integration/src/app/app.routes.ts Normal file
Просмотреть файл

@ -0,0 +1,3 @@
import { Routes } from '@angular/router';
export const routes: Routes = [];

8
examples-standalone/grid-charts-integration/src/app/components/action-buttons/action-buttons.component.html
Просмотреть файл

@ -1,6 +1,6 @@
<div class="action-buttons">
<a class="k-button k-flat k-text-left" href="https://github.com/telerik/kendo-angular/tree/master/examples-standalone/grid-charts-integration" target="_blank"
role="button"><span class="k-icon k-i-download"></span>Download on Github</a>
<a class="k-button k-flat k-text-left" href="https://www.telerik.com/kendo-angular-ui/components/grid/how-to/grid-charts-integration/" target="_blank"
role="button"><span class="k-icon k-i-file-txt"></span>Documentation</a>
<a class="k-button k-button-clear-base k-button-clear" href="https://github.com/telerik/kendo-angular/tree/master/examples-standalone/grid-charts-integration" target="_blank"
role="button"><kendo-svgicon [icon]="iconDownload"></kendo-svgicon>Download on Github</a>
<a class="k-button k-button-clear-base k-button-clear" href="https://www.telerik.com/kendo-angular-ui/components/grid/how-to/grid-charts-integration/" target="_blank"
role="button"><kendo-svgicon [icon]="iconFileTxt"></kendo-svgicon>Documentation</a>
</div>

16
examples-standalone/grid-charts-integration/src/app/components/action-buttons/action-buttons.component.ts
Просмотреть файл

@ -1,8 +1,16 @@
import { Component } from '@angular/core';
import { ButtonsModule } from "@progress/kendo-angular-buttons";
import { IconsModule } from '@progress/kendo-angular-icons';
import { SVGIcon, downloadIcon, fileTxtIcon } from '@progress/kendo-svg-icons';
@Component({
selector: 'app-action-buttons',
templateUrl: './action-buttons.component.html',
styleUrls: ['./action-buttons.component.scss']
selector: 'app-action-buttons',
standalone: true,
imports: [ButtonsModule, IconsModule],
templateUrl: './action-buttons.component.html',
styleUrl: './action-buttons.component.scss'
})
export class ActionButtonsComponent {}
export class ActionButtonsComponent {
public iconDownload: SVGIcon = downloadIcon;
public iconFileTxt: SVGIcon = fileTxtIcon;
}

15
examples-standalone/grid-charts-integration/src/app/components/charts/common/stocks-chart.template.html → examples-standalone/grid-charts-integration/src/app/components/charts/common/stocks-chart.component.html
Просмотреть файл

@ -2,7 +2,8 @@
<kendo-drawer #drawer [mode]="'push'" position="end" [(expanded)]="expanded">
<ng-template kendoDrawerTemplate>
<h3> Configuration</h3>
<select-chart-type [data]="seriesTypes" [chartName]="chartConfiguration.chartName" (valueChange)="onValueChange($event)"></select-chart-type>
<select-chart-type [data]="seriesTypes" [chartName]="chartConfiguration.chartName"
(valueChange)="onValueChange($event)"></select-chart-type>
<select-series [data]="series" (valueChange)="selectedSeries = $event"></select-series>
</ng-template>
</kendo-drawer>
@ -12,9 +13,10 @@
<kendo-chart #chart>
<kendo-chart-title text="Details per Stock"></kendo-chart-title>
<kendo-chart-series>
<kendo-chart-series-item *ngFor="let series of selectedSeries" [type]="chartConfiguration.seriesType"
[stack]="chartConfiguration.stack" [gap]="2" [spacing]="0.25" [data]="data" [field]="series"
[name]="getTitle(series)" [categoryField]="'symbol'">
<kendo-chart-series-item *ngFor="let series of selectedSeries"
[type]="chartConfiguration.seriesType" [stack]="chartConfiguration.stack" [gap]="2"
[spacing]="0.25" [data]="data" [field]="series" [name]="getTitle(series)"
[categoryField]="'symbol'">
<kendo-chart-series-item-tooltip>
<ng-template let-value="value">
{{getTitle(series)}}: {{value}}
@ -37,8 +39,9 @@
</kendo-chart>
<div kendoTooltip class="window-icon-buttons" [offset]="1">
<button kendoButton [iconClass]="'k-i-download k-icon'" title="Export as PNG" (click)="exportChart(chart)"></button>
<button kendoButton [iconClass]="'k-i-gear k-icon'" title="Configuration" (click)="drawer.toggle()"></button>
<button kendoButton [svgIcon]="iconDownload" title="Export as PNG"
(click)="exportChart(chart)"></button>
<button kendoButton [svgIcon]="iconGear" title="Configuration" (click)="drawer.toggle()"></button>
</div>
</div>
</kendo-drawer-content>

22
examples-standalone/grid-charts-integration/src/app/components/charts/common/stocks-chart.component.ts
Просмотреть файл

@ -1,18 +1,30 @@
import { Component, Input } from '@angular/core';
import { ChartConfig, Stock } from '../../../model';
import { series, seriesTypes } from '../../../data';
import { Stock, ChartConfig } from '../../../model';
import { getChartStack, getTitle, getChartType } from '../../../utils';
import { getChartStack, getChartType, getTitle } from '../../../utils';
import { ChartComponent, ChartsModule, SeriesType } from '@progress/kendo-angular-charts';
import { saveAs } from '@progress/kendo-file-saver';
import { ChartComponent, Series, SeriesType } from '@progress/kendo-angular-charts';
import { SVGIcon, gearIcon, downloadIcon } from '@progress/kendo-svg-icons';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { SelectSeriesComponent } from '../../common/select-series/select-series.component';
import { SelectChartTypeComponent } from '../../common/select-chart-type/select-chart-type.component';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { TooltipsModule } from '@progress/kendo-angular-tooltip';
import { CommonModule } from '@angular/common';
@Component({
selector: 'stocks-component',
templateUrl: './stocks-chart.template.html'
selector: 'stocks-component',
standalone: true,
imports: [LayoutModule, ChartsModule, SelectSeriesComponent, SelectChartTypeComponent, ButtonsModule, TooltipsModule, CommonModule],
templateUrl: './stocks-chart.component.html'
})
export class StocksChartComponent {
@Input() public data: Stock[] = [];
@Input() public chartConfiguration: ChartConfig = { seriesType: 'line', stack: false };
public iconDownload: SVGIcon = downloadIcon;
public iconGear: SVGIcon = gearIcon;
public series: object[] = series;
public selectedSeries: string[] = ['price', 'pe'];
public seriesTypes: string[] = seriesTypes.simpleSeries;

10
examples-standalone/grid-charts-integration/src/app/components/charts/day/day-chart.component.ts
Просмотреть файл

@ -1,10 +0,0 @@
import { Component, Input } from '@angular/core';
@Component({
selector: 'day-chart',
templateUrl: './day-chart.template.html'
})
export class DayChartComponent {
@Input() public data: number[] = [];
@Input() public changePct: number = 0;
}

7
examples-standalone/grid-charts-integration/src/app/components/charts/day/day-chart.template.html → examples-standalone/grid-charts-integration/src/app/components/charts/day/day.component.html
Просмотреть файл

@ -8,10 +8,11 @@
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>
<kendo-chart-series>
<kendo-chart-series-item [type]="'line'" [data]="data" [markers]="{ visible: false }" [color]="changePct > 0 ? 'green' : 'red'">
<kendo-chart-series-item [type]="'line'" [data]="data" [markers]="{ visible: false }"
[color]="changePct > 0 ? 'green' : 'red'">
</kendo-chart-series-item>
<kendo-chart-series-item [type]="'area'" [data]="data" [markers]="{ visible: false }" [color]="changePct > 0 ? 'green' : 'red'"
[opacity]="0.2">
<kendo-chart-series-item [type]="'area'" [data]="data" [markers]="{ visible: false }"
[color]="changePct > 0 ? 'green' : 'red'" [opacity]="0.2">
</kendo-chart-series-item>
</kendo-chart-series>
<kendo-chart-tooltip></kendo-chart-tooltip>

0
examples-standalone/grid-charts-integration/src/app/components/charts/day/day.component.scss Normal file
Просмотреть файл

14
examples-standalone/grid-charts-integration/src/app/components/charts/day/day.component.ts Normal file
Просмотреть файл

@ -0,0 +1,14 @@
import { Component, Input } from '@angular/core';
import { ChartsModule } from '@progress/kendo-angular-charts';
@Component({
selector: 'day-chart',
standalone: true,
imports: [ChartsModule],
templateUrl: './day.component.html',
styleUrl: './day.component.scss'
})
export class DayChartComponent {
@Input() public data: number[] = [];
@Input() public changePct: number = 0;
}

31
examples-standalone/grid-charts-integration/src/app/components/charts/pie-donut/pie-donut-chart.component.ts
Просмотреть файл

@ -1,31 +0,0 @@
import { Component, Input } from '@angular/core';
import { Stock, ChartConfig } from '../../../model';
import { series, seriesTypes } from '../../../data';
import { getTitle, getChartType } from '../../../utils';
import { saveAs } from '@progress/kendo-file-saver';
import { ChartComponent, Series, SeriesType } from '@progress/kendo-angular-charts';
@Component({
selector: 'pie-donut-stocks',
templateUrl: './pie-donut-chart.template.html'
})
export class PieDonutStockComponent {
@Input() public data: Stock[] = [];
@Input() public chartConfiguration: ChartConfig = { seriesType: 'pie', stack: false };
public expanded = false;
public selectedSeries = 'price';
public series: object[] = series;
public seriesTypes: string[] = seriesTypes.circularSeries;
public getTitle = getTitle;
public onValueChange(chartName: string) {
this.chartConfiguration.seriesType = getChartType(chartName) as SeriesType;
}
public exportChart(chart: ChartComponent): void {
chart.exportImage().then((data) => {
saveAs(data, 'chart.png');
});
}
}

16
examples-standalone/grid-charts-integration/src/app/components/charts/pie-donut/pie-donut-chart.template.html → examples-standalone/grid-charts-integration/src/app/components/charts/pie-donut/pie-donut.component.html
Просмотреть файл

@ -2,7 +2,8 @@
<kendo-drawer #drawer [mode]="'push'" position="end" [(expanded)]="expanded">
<ng-template kendoDrawerTemplate>
<h3> Configuration</h3>
<select-chart-type [data]="seriesTypes" [chartName]="chartConfiguration.chartName" (valueChange)="onValueChange($event)"></select-chart-type>
<select-chart-type [data]="seriesTypes" [chartName]="chartConfiguration.chartName"
(valueChange)="onValueChange($event)"></select-chart-type>
<label>Series:
<kendo-dropdownlist [data]="series" [valuePrimitive]="true" [textField]="'title'" [valueField]="'field'"
[(value)]="selectedSeries">
@ -16,8 +17,8 @@
<kendo-chart #chart>
<kendo-chart-title [text]="getTitle(selectedSeries) + ' per stock'"></kendo-chart-title>
<kendo-chart-series>
<kendo-chart-series-item [type]="chartConfiguration.seriesType" [data]="data" [field]="selectedSeries"
[name]="selectedSeries" [categoryField]="'symbol'">
<kendo-chart-series-item [type]="chartConfiguration.seriesType" [data]="data"
[field]="selectedSeries" [name]="selectedSeries" [categoryField]="'symbol'">
<kendo-chart-series-item-tooltip>
<ng-template let-dataItem="dataItem" let-value="value">
{{dataItem.symbol}} {{getTitle(selectedSeries)}}: {{value}}
@ -30,14 +31,15 @@
</kendo-chart>
<div class="window-icon-buttons">
<button kendoButton [iconClass]="'k-i-download k-icon'" title="Export as PNG" (click)="exportChart(chart)"></button>
<button kendoButton [iconClass]="'k-i-gear k-icon'" title="Configuration" (click)="drawer.toggle()"></button>
<button kendoButton [svgIcon]="iconDownload" title="Export as PNG"
(click)="exportChart(chart)"></button>
<button kendoButton [svgIcon]="iconGear" title="Configuration" (click)="drawer.toggle()"></button>
</div>
</div>
<div kendoTooltip class="window-icon-buttons" [offset]="1">
<button kendoButton [iconClass]="'k-i-download k-icon'" title="Export as PNG" (click)="exportChart(chart)"></button>
<button kendoButton [iconClass]="'k-i-gear k-icon'" title="Configuration" (click)="drawer.toggle()"></button>
<button kendoButton [svgIcon]="iconDownload" title="Export as PNG" (click)="exportChart(chart)"></button>
<button kendoButton [svgIcon]="iconGear" title="Configuration" (click)="drawer.toggle()"></button>
</div>
</kendo-drawer-content>
</kendo-drawer-container>

42
examples-standalone/grid-charts-integration/src/app/components/charts/pie-donut/pie-donut.component.ts Normal file
Просмотреть файл

@ -0,0 +1,42 @@
import { Component, Input } from '@angular/core';
import { ChartComponent, ChartsModule, SeriesType } from '@progress/kendo-angular-charts';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { SelectChartTypeComponent } from '../../common/select-chart-type/select-chart-type.component';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { ChartConfig, Stock } from '../../../model';
import { SVGIcon, downloadIcon, gearIcon } from '@progress/kendo-svg-icons';
import { series, seriesTypes } from '../../../data';
import { getChartType, getTitle } from '../../../utils';
import { saveAs } from '@progress/kendo-file-saver';
import { TooltipsModule } from '@progress/kendo-angular-tooltip';
@Component({
selector: 'pie-donut-stocks',
standalone: true,
imports: [LayoutModule, DropDownsModule, ChartsModule, SelectChartTypeComponent, ButtonsModule, TooltipsModule],
templateUrl: './pie-donut.component.html',
})
export class PieDonutComponent {
@Input() public data: Stock[] = [];
@Input() public chartConfiguration: ChartConfig = { seriesType: 'pie', stack: false };
public expanded = false;
public iconDownload: SVGIcon = downloadIcon;
public iconGear: SVGIcon = gearIcon;
public selectedSeries = 'price';
public series: object[] = series;
public seriesTypes: string[] = seriesTypes.circularSeries;
public getTitle = getTitle;
public onValueChange(chartName: string) {
this.chartConfiguration.seriesType = getChartType(chartName) as SeriesType;
}
public exportChart(chart: ChartComponent): void {
chart.exportImage().then((data) => {
saveAs(data, 'chart.png');
});
}
}

21
examples-standalone/grid-charts-integration/src/app/components/charts/scatter-bubble/scatter-bubble.template.html → examples-standalone/grid-charts-integration/src/app/components/charts/scatter-bubble/scatter-bubble.component.html
Просмотреть файл

@ -2,7 +2,8 @@
<kendo-drawer #drawer [mode]="'push'" position="end" [(expanded)]="expanded">
<ng-template kendoDrawerTemplate>
<h3> Configuration</h3>
<select-chart-type [data]="seriesTypes" [chartName]="chartConfiguration.chartName" (valueChange)="onValueChange($event)"></select-chart-type>
<select-chart-type [data]="seriesTypes" [chartName]="chartConfiguration.chartName"
(valueChange)="onValueChange($event)"></select-chart-type>
<select-series [data]="series" (valueChange)="selectedSeries = $event;"></select-series>
</ng-template>
</kendo-drawer>
@ -12,13 +13,14 @@
<kendo-chart #chart>
<kendo-chart-title text="Details per Stock"></kendo-chart-title>
<kendo-chart-x-axis>
<kendo-chart-x-axis-item [max]="stockData.length - 1" [majorUnit]="1" [labels]="{ content: labelContent, rotation: 'auto' }">
<kendo-chart-x-axis-item [max]="stockData.length - 1" [majorUnit]="1"
[labels]="{ content: labelContent, rotation: 'auto' }">
</kendo-chart-x-axis-item>
</kendo-chart-x-axis>
<kendo-chart-series>
<kendo-chart-series-item *ngFor="let series of selectedSeries" [data]="stockData" [type]="chartConfiguration.seriesType"
[xField]="'index'" [yField]="series" [name]="getTitle(series)" [sizeField]="series"
[negativeValues]="{ visible: true }">
<kendo-chart-series-item *ngFor="let series of selectedSeries" [data]="stockData"
[type]="chartConfiguration.seriesType" [xField]="'index'" [yField]="series"
[name]="getTitle(series)" [sizeField]="series" [negativeValues]="{ visible: true }">
<kendo-chart-series-item-tooltip>
<ng-template let-dataItem="dataItem" let-value="value">
{{dataItem.symbol}} {{getTitle(series)}}: {{dataItem[series]}}
@ -31,14 +33,15 @@
</kendo-chart>
<div class="window-icon-buttons">
<button kendoButton [iconClass]="'k-i-download k-icon'" title="Export as PNG" (click)="exportChart(chart)"></button>
<button kendoButton [iconClass]="'k-i-gear k-icon'" title="Configuration" (click)="drawer.toggle()"></button>
<button kendoButton [svgIcon]="iconDownload" title="Export as PNG"
(click)="exportChart(chart)"></button>
<button kendoButton [svgIcon]="iconGear" title="Configuration" (click)="drawer.toggle()"></button>
</div>
</div>
<div kendoTooltip class="window-icon-buttons" [offset]="1">
<button kendoButton [iconClass]="'k-i-download k-icon'" title="Export as PNG" (click)="exportChart(chart)"></button>
<button kendoButton [iconClass]="'k-i-gear k-icon'" title="Configuration" (click)="drawer.toggle()"></button>
<button kendoButton [svgIcon]="iconDownload" title="Export as PNG" (click)="exportChart(chart)"></button>
<button kendoButton [svgIcon]="iconGear" title="Configuration" (click)="drawer.toggle()"></button>
</div>
</kendo-drawer-content>
</kendo-drawer-container>

24
examples-standalone/grid-charts-integration/src/app/components/charts/scatter-bubble/scatter-bubble-chart.component.ts → examples-standalone/grid-charts-integration/src/app/components/charts/scatter-bubble/scatter-bubble.component.ts
Просмотреть файл

@ -1,15 +1,24 @@
import { Component, Input } from '@angular/core';
import { Stock, ChartConfig } from '../../../model';
import { ChartConfig, Stock } from '../../../model';
import { series, seriesTypes } from '../../../data';
import { getTitle, getChartType } from '../../../utils';
import { getChartType, getTitle } from '../../../utils';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { ChartComponent, ChartsModule, SeriesType } from '@progress/kendo-angular-charts';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { saveAs } from '@progress/kendo-file-saver';
import { ChartComponent, SeriesType } from '@progress/kendo-angular-charts';
import { SVGIcon, gearIcon, downloadIcon } from '@progress/kendo-svg-icons';
import { SelectChartTypeComponent } from '../../common/select-chart-type/select-chart-type.component';
import { SelectSeriesComponent } from '../../common/select-series/select-series.component';
import { TooltipsModule } from '@progress/kendo-angular-tooltip';
import { CommonModule } from '@angular/common';
@Component({
selector: 'scatter-bubble-charts',
templateUrl: './scatter-bubble.template.html'
selector: 'scatter-bubble-charts',
standalone: true,
imports: [LayoutModule, ChartsModule, ButtonsModule, SelectChartTypeComponent, SelectSeriesComponent, TooltipsModule, CommonModule],
templateUrl: './scatter-bubble.component.html',
})
export class ScatterBubbleChartComponent {
export class ScatterBubbleComponent {
@Input() public chartConfiguration: ChartConfig = { seriesType: 'pie', stack: false };
@Input() public set data(value: Stock[]) {
this.stockData = value.map((item, index) => {
@ -18,6 +27,9 @@ export class ScatterBubbleChartComponent {
});
}
public iconDownload: SVGIcon = downloadIcon;
public iconGear: SVGIcon = gearIcon;
public stockData: Stock[] = [];
public series: object[] = series;
public selectedSeries: string[] = ['price', 'pe'];

9
examples-standalone/grid-charts-integration/src/app/components/common/select-chart-type/select-chart-type.component.ts
Просмотреть файл

@ -1,8 +1,11 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
@Component({
selector: 'select-chart-type',
templateUrl: './select-chart-type.component.html'
selector: 'select-chart-type',
standalone: true,
imports: [DropDownsModule],
templateUrl: './select-chart-type.component.html',
})
export class SelectChartTypeComponent {
@Input() public data?: any[];

4
examples-standalone/grid-charts-integration/src/app/components/common/select-series/select-series.component.html
Просмотреть файл

@ -1,8 +1,8 @@
<label>
Series:
<kendo-multiselect kendoMultiSelectSummaryTag [clearButton]="false" [autoClose]="false" [data]="data"
[valuePrimitive]="true" [textField]="'title'" [valueField]="'field'" [value]="selectedSeries" (valueChange)="onChange($event)"
[placeholder]="'Select the desired series'">
[valuePrimitive]="true" [textField]="'title'" [valueField]="'field'" [value]="selectedSeries"
(valueChange)="onChange($event)" [placeholder]="'Select the desired series'">
<ng-template kendoMultiSelectGroupTagTemplate let-dataItems>
<span class="k-icon k-i-arrow-s"></span>
{{ dataItems.length }} series selected

9
examples-standalone/grid-charts-integration/src/app/components/common/select-series/select-series.component.ts
Просмотреть файл

@ -1,8 +1,11 @@
import { Component, Input, Output, EventEmitter } from '@angular/core';
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
@Component({
selector: 'select-series',
templateUrl: './select-series.component.html'
selector: 'select-series',
standalone: true,
imports: [DropDownsModule],
templateUrl: './select-series.component.html',
})
export class SelectSeriesComponent {
@Input() public data: object[] = [];

39
examples-standalone/grid-charts-integration/src/app/components/common/window/window.component.ts
Просмотреть файл

@ -1,25 +1,44 @@
import { Component, Input } from '@angular/core';
import { Stock, ChartConfig } from '../../../model';
import { ChartConfig, Stock } from '../../../model';
import { ScatterBubbleComponent } from '../../charts/scatter-bubble/scatter-bubble.component';
import { PieDonutComponent } from '../../charts/pie-donut/pie-donut.component';
import { StocksChartComponent } from '../../charts/common/stocks-chart.component';
import 'hammerjs';
import { CommonModule } from '@angular/common';
@Component({
selector: 'window-component',
templateUrl: './window.component.html'
selector: 'window-component',
standalone: true,
imports: [ScatterBubbleComponent, PieDonutComponent, StocksChartComponent, CommonModule],
templateUrl: './window.component.html',
})
export class WindowComponent {
@Input() public data: Stock[] = [];
@Input() public chartConfiguration: ChartConfig = { seriesType: 'line', stack: false };
;
@Input() public chartConfiguration: ChartConfig = {
seriesType: 'line',
stack: false,
};
public isBubbleOrSeriesChart(): boolean {
return this.chartConfiguration.seriesType === 'scatter' || this.chartConfiguration.seriesType === 'bubble';
return (
this.chartConfiguration.seriesType === 'scatter' ||
this.chartConfiguration.seriesType === 'bubble'
);
}
public isCircularChart(): boolean {
return this.chartConfiguration.seriesType === 'pie' || this.chartConfiguration.seriesType === 'donut';
return (
this.chartConfiguration.seriesType === 'pie' ||
this.chartConfiguration.seriesType === 'donut'
);
}
public isSimpleChart(): boolean {
return this.chartConfiguration.seriesType !== 'pie' && this.chartConfiguration.seriesType !== 'donut' &&
this.chartConfiguration.seriesType !== 'scatter' && this.chartConfiguration.seriesType !== 'bubble';
return (
this.chartConfiguration.seriesType !== 'pie' &&
this.chartConfiguration.seriesType !== 'donut' &&
this.chartConfiguration.seriesType !== 'scatter' &&
this.chartConfiguration.seriesType !== 'bubble'
);
}
}

5
examples-standalone/grid-charts-integration/src/app/components/footer/footer.component.html
Просмотреть файл

@ -1,6 +1,7 @@
<footer class="container-fluid footer text-center d-flex align-items-center">
<div class="w-100">
<span class="footer-copyright text-center">Copyright © {{ currentYear }} Progress Software Corporation and/or its subsidiaries or affiliates.</span>
<span class="footer-copyright text-center">Copyright © {{ currentYear }} Progress Software Corporation and/or
its subsidiaries or affiliates.</span>
<span class="progress-logo d-inline-flex"></span>
</div>
</footer>
</footer>

8
examples-standalone/grid-charts-integration/src/app/components/footer/footer.component.ts
Просмотреть файл

@ -1,9 +1,11 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-footer',
templateUrl: './footer.component.html',
styleUrls: ['./footer.component.scss'],
selector: 'app-footer',
standalone: true,
imports: [],
templateUrl: './footer.component.html',
styleUrl: './footer.component.scss'
})
export class FooterComponent {
public currentYear: number = new Date().getFullYear();

12
examples-standalone/grid-charts-integration/src/app/components/header/header.component.ts
Просмотреть файл

@ -1,8 +1,12 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss'],
selector: 'app-header',
standalone: true,
imports: [],
templateUrl: './header.component.html',
styleUrl: './header.component.scss'
})
export class HeaderComponent {}
export class HeaderComponent {
}

12
examples-standalone/grid-charts-integration/src/app/components/stock-list/stock-list.component.html
Просмотреть файл

@ -1,7 +1,7 @@
<div class="k-custom-notification">
<div class="k-widget k-notification k-notification-info">
<div class="k-notification-wrap">
<span class="k-icon k-i-info"></span>
<kendo-svgicon [icon]="infoIcon"></kendo-svgicon>
<div class="k-notification-content">Select rows and right click the Grid in order to choose the desired
Chart and generate it.</div>
</div>
@ -27,7 +27,8 @@
<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 }">
<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>
@ -35,7 +36,8 @@
<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 }">
<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>
@ -98,7 +100,7 @@
</ng-template>
</kendo-contextmenu>
<kendo-window title="Stock Portfolio Details" *ngIf="opened" (close)="close()" [top]="150" [minWidth]="250" [width]="700"
[height]="550">
<kendo-window title="Stock Portfolio Details" *ngIf="opened" (close)="close()" [top]="150" [minWidth]="250"
[width]="700" [height]="550">
<window-component [data]="mySelection" [chartConfiguration]="chartConfiguration"></window-component>
</kendo-window>

6
examples-standalone/grid-charts-integration/src/app/components/stock-list/stock-list.component.scss
Просмотреть файл

@ -68,6 +68,12 @@
margin: $notification-margin 0;
}
.k-notification-wrap{
display: flex;
align-items: center;
gap: 3px;
}
.menu-item {
margin-left: 10px;
}

42
examples-standalone/grid-charts-integration/src/app/components/stock-list/stock-list.component.ts
Просмотреть файл

@ -1,30 +1,34 @@
import {
Component,
ViewChild,
ViewEncapsulation
} from '@angular/core';
import { ContextMenuSelectEvent } from '@progress/kendo-angular-menu';
import { Stock, ChartConfig } from '../../model';
import { stocksInPortfolio } from '../../data';
import { ContextMenuComponent } from '@progress/kendo-angular-menu';
import { SelectableSettings, CellClickEvent, GridComponent } from '@progress/kendo-angular-grid';
import { menuItems } from '../../data';
import { getChartStack, getChartType } from '../../utils';
import { Component, ViewChild, ViewEncapsulation } from '@angular/core';
import { ContextMenuComponent, ContextMenuSelectEvent, MenusModule } from "@progress/kendo-angular-menu";
import { CellClickEvent, ExcelModule, GridComponent, GridModule, SelectableSettings } from "@progress/kendo-angular-grid";
import { IconsModule } from '@progress/kendo-angular-icons';
import { SVGIcon, infoCircleIcon } from '@progress/kendo-svg-icons';
import { ChartConfig, Stock } from '../../model';
import { menuItems, stocksInPortfolio } from '../../data';
import { SeriesType } from '@progress/kendo-angular-charts';
import { getChartStack, getChartType } from '../../utils';
import { NumberFormatPipe } from '../../pipes/number-format.pipe';
import { DialogsModule } from '@progress/kendo-angular-dialog';
import { WindowComponent } from '../common/window/window.component';
import { DayChartComponent } from '../charts/day/day.component';
import 'hammerjs';
import { CommonModule } from '@angular/common';
@Component({
selector: 'app-stock-list',
templateUrl: './stock-list.component.html',
styleUrls: ['./stock-list.component.scss'],
encapsulation: ViewEncapsulation.None
selector: 'app-stock-list',
standalone: true,
imports: [MenusModule, GridModule, IconsModule, NumberFormatPipe, DialogsModule, ExcelModule, WindowComponent, DayChartComponent, WindowComponent, CommonModule],
templateUrl: './stock-list.component.html',
styleUrl: './stock-list.component.scss',
encapsulation: ViewEncapsulation.None
})
export class StockListComponent {
@ViewChild('gridmenu') public gridContextMenu: ContextMenuComponent | undefined;
@ViewChild('grid') public grid: GridComponent | undefined;
public infoIcon: SVGIcon = infoCircleIcon;
public items: object[] = menuItems;
public opened = false;
public chartConfiguration: ChartConfig = { seriesType: 'line', stack: false };

1242
examples-standalone/grid-charts-integration/src/app/data.ts
Просмотреть файл

Разница между файлами не показана из-за своего большого размера Загрузить разницу

42
examples-standalone/grid-charts-integration/src/app/model.ts
Просмотреть файл

@ -1,21 +1,21 @@
import { SeriesStack, SeriesType } from '@progress/kendo-angular-charts';
export interface Stock {
symbol: string;
name: string;
price: number;
day_change: number;
change_pct: number;
volume: number;
volume_avg: number;
market_cap: number;
pe: number | null;
intraday: number[];
index?: number;
}
export interface ChartConfig {
seriesType: SeriesType;
chartName?: string;
stack: string | boolean | SeriesStack;
}
import { SeriesStack, SeriesType } from '@progress/kendo-angular-charts';
export interface Stock {
symbol: string;
name: string;
price: number;
day_change: number;
change_pct: number;
volume: number;
volume_avg: number;
market_cap: number;
pe: number | null;
intraday: number[];
index?: number;
}
export interface ChartConfig {
seriesType: SeriesType;
chartName?: string;
stack: string | boolean | SeriesStack;
}

4
examples-standalone/grid-charts-integration/src/app/pipes/number-format.pipe.ts
Просмотреть файл

@ -2,10 +2,10 @@ import { Pipe, PipeTransform } from '@angular/core';
import { formatCurrency } from './helpers';
@Pipe({
name: 'numberFormat'
name: 'numberFormat',
standalone: true
})
export class NumberFormatPipe implements PipeTransform {
transform(value: number): any {
return formatCurrency(value);
}

100
examples-standalone/grid-charts-integration/src/app/utils.ts
Просмотреть файл

@ -1,50 +1,50 @@
import { series } from './data';
import { SeriesStack } from '@progress/kendo-angular-charts';
export function getTitle(fieldName: string): string {
let foundItem = series.find((item: any) => item.field === fieldName);
if (foundItem) {
return foundItem.title;
}
return '';
}
export function getChartStack(chartTitle: string): boolean | SeriesStack {
switch (chartTitle) {
case 'Stack Area':
return { type: 'normal' };
case '100% Stack Area':
return { type: '100%' };
case 'Stack Bar':
return { type: 'normal' };
case '100% Stack Bar':
return { type: '100%' };
case 'Stack Column':
return { type: 'normal' };
case '100% Stack Column':
return { type: '100%' };
default:
return false;
}
}
export function getChartType(chartTitle: string): string {
switch (chartTitle) {
case 'Stack Area':
return 'area';
case '100% Stack Area':
return 'area';
case 'Stack Bar':
return 'bar';
case '100% Stack Bar':
return 'bar';
case 'Stack Column':
return 'column';
case '100% Stack Column':
return 'column';
case 'Radar':
return 'radarLine';
default:
return chartTitle.toLowerCase();
}
}
import { series } from './data';
import { SeriesStack } from '@progress/kendo-angular-charts';
export function getTitle(fieldName: string): string {
let foundItem = series.find((item: any) => item.field === fieldName);
if (foundItem) {
return foundItem.title;
}
return '';
}
export function getChartStack(chartTitle: string): boolean | SeriesStack {
switch (chartTitle) {
case 'Stack Area':
return { type: 'normal' };
case '100% Stack Area':
return { type: '100%' };
case 'Stack Bar':
return { type: 'normal' };
case '100% Stack Bar':
return { type: '100%' };
case 'Stack Column':
return { type: 'normal' };
case '100% Stack Column':
return { type: '100%' };
default:
return false;
}
}
export function getChartType(chartTitle: string): string {
switch (chartTitle) {
case 'Stack Area':
return 'area';
case '100% Stack Area':
return 'area';
case 'Stack Bar':
return 'bar';
case '100% Stack Bar':
return 'bar';
case 'Stack Column':
return 'column';
case '100% Stack Column':
return 'column';
case 'Radar':
return 'radarLine';
default:
return chartTitle.toLowerCase();
}
}

Двоичные данные
examples-standalone/grid-charts-integration/src/favicon.ico
Просмотреть файл

Двоичный файл не отображается.
Режим "рядом" Свайп Оверлей

До

Ширина:  |  Высота:  |  Размер: 5.3 KiB

После

Ширина:  |  Высота:  |  Размер: 15 KiB

1
examples-standalone/grid-charts-integration/src/index.html
Просмотреть файл

@ -4,7 +4,6 @@
<meta charset="utf-8">
<title>GridChartsIntegration</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Ubuntu&display=swap" rel="stylesheet">

16
examples-standalone/grid-charts-integration/src/main.ts
Просмотреть файл

@ -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));

57
examples-standalone/grid-charts-integration/src/polyfills.ts
Просмотреть файл

@ -1,57 +0,0 @@
/**
* 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 Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 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.ts';
*
* 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.
/***************************************************************************************************
* Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
*/
import '@angular/localize/init';
/***************************************************************************************************
* APPLICATION IMPORTS
*/

1
examples-standalone/grid-charts-integration/src/styles.scss Normal file
Просмотреть файл

@ -0,0 +1 @@
/* You can add global styles to this file, and also import other style files */

12
examples-standalone/grid-charts-integration/src/styles/_bootstrap.scss
Просмотреть файл

@ -1,10 +1,10 @@
$font-family-base: "Roboto", Helvetica, Arial, sans-serif;
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/utilities";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/reboot";
@import "bootstrap/scss/utilities";
$grid-columns: 12;
$grid-gutter-width: 32px;
@ -25,4 +25,4 @@ $container-max-widths: (
xl: 1200px
);
@import "~bootstrap/scss/grid";
@import "bootstrap/scss/grid";

22
examples-standalone/grid-charts-integration/src/styles/_kendo.scss
Просмотреть файл

@ -14,15 +14,15 @@ $grid-header-bg: #ECEEEF;
$grid-header-text: #55595C;
$grid-sorting-index-font-size: 20px;
@import "~@progress/kendo-theme-bootstrap/scss/button";
@import "~@progress/kendo-theme-bootstrap/scss/grid";
@import "~@progress/kendo-theme-bootstrap/scss/menu";
@import "~@progress/kendo-theme-bootstrap/scss/checkbox";
@import "~@progress/kendo-theme-bootstrap/scss/dropdownlist";
@import "~@progress/kendo-theme-bootstrap/scss/multiselect";
@import "~@progress/kendo-theme-bootstrap/scss/dataviz";
@import "~@progress/kendo-theme-bootstrap/scss/window";
@import "~@progress/kendo-theme-bootstrap/scss/drawer";
@import "~@progress/kendo-theme-bootstrap/scss/notification";
@import "~@progress/kendo-theme-bootstrap/scss/tooltip";
@import "@progress/kendo-theme-bootstrap/scss/button";
@import "@progress/kendo-theme-bootstrap/scss/grid";
@import "@progress/kendo-theme-bootstrap/scss/menu";
@import "@progress/kendo-theme-bootstrap/scss/checkbox";
@import "@progress/kendo-theme-bootstrap/scss/dropdownlist";
@import "@progress/kendo-theme-bootstrap/scss/multiselect";
@import "@progress/kendo-theme-bootstrap/scss/dataviz";
@import "@progress/kendo-theme-bootstrap/scss/window";
@import "@progress/kendo-theme-bootstrap/scss/drawer";
@import "@progress/kendo-theme-bootstrap/scss/notification";
@import "@progress/kendo-theme-bootstrap/scss/tooltip";

25
examples-standalone/grid-charts-integration/tsconfig.app.json
Просмотреть файл

@ -1,15 +1,16 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [
"@angular/localize"
]
}
},
"files": [
"src/main.ts"
],
"include": [
"src/**/*.d.ts"
]
}

49
examples-standalone/grid-charts-integration/tsconfig.json
Просмотреть файл

@ -2,31 +2,32 @@
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2017",
"module": "es2020",
"lib": [
"es2020",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"skipLibCheck": true,
"esModuleInterop": true,
"sourceMap": true,
"declaration": false,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "ES2022",
"module": "ES2022",
"useDefineForClassFields": false,
"lib": [
"ES2022",
"dom"
]
]
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}
}

27
examples-standalone/grid-charts-integration/tsconfig.spec.json
Просмотреть файл

@ -1,18 +1,15 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine"
]
},
"files": [
"src/test.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine",
"@angular/localize"
]
}
},
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}

155
examples-standalone/grid-charts-integration/tslint.json
Просмотреть файл

@ -1,155 +0,0 @@
{
"extends": "tslint:recommended",
"rules": {
"align": {
"options": [
"parameters",
"statements"
]
},
"array-type": false,
"arrow-parens": false,
"arrow-return-shorthand": true,
"curly": true,
"deprecation": {
"severity": "warning"
},
"component-class-suffix": true,
"contextual-lifecycle": true,
"directive-class-suffix": true,
"directive-selector": [
true,
"attribute",
"app",
"camelCase"
],
"component-selector": [
true,
"element",
"app",
"kebab-case"
],
"eofline": true,
"import-blacklist": [
true,
"rxjs/Rx"
],
"import-spacing": true,
"indent": {
"options": [
"spaces"
]
},
"interface-name": false,
"max-classes-per-file": false,
"max-line-length": [
true,
140
],
"member-access": false,
"member-ordering": [
true,
{
"order": [
"static-field",
"instance-field",
"static-method",
"instance-method"
]
}
],
"no-consecutive-blank-lines": false,
"no-console": [
true,
"debug",
"info",
"time",
"timeEnd",
"trace"
],
"no-empty": false,
"no-inferrable-types": [
true,
"ignore-params"
],
"no-non-null-assertion": true,
"no-redundant-jsdoc": true,
"no-switch-case-fall-through": true,
"no-var-requires": false,
"object-literal-key-quotes": [
true,
"as-needed"
],
"object-literal-sort-keys": false,
"ordered-imports": false,
"quotemark": [
true,
"single"
],
"semicolon": {
"options": [
"always"
]
},
"space-before-function-paren": {
"options": {
"anonymous": "never",
"asyncArrow": "always",
"constructor": "never",
"method": "never",
"named": "never"
}
},
"trailing-comma": false,
"no-conflicting-lifecycle": true,
"no-host-metadata-property": true,
"no-input-rename": true,
"no-inputs-metadata-property": true,
"no-output-native": true,
"no-output-on-prefix": true,
"no-output-rename": true,
"no-outputs-metadata-property": true,
"template-banana-in-box": true,
"template-no-negated-async": true,
"typedef-whitespace": {
"options": [
{
"call-signature": "nospace",
"index-signature": "nospace",
"parameter": "nospace",
"property-declaration": "nospace",
"variable-declaration": "nospace"
},
{
"call-signature": "onespace",
"index-signature": "onespace",
"parameter": "onespace",
"property-declaration": "onespace",
"variable-declaration": "onespace"
}
]
},
"use-lifecycle-interface": true,
"use-pipe-transform-interface": true
, "variable-name": {
"options": [
"ban-keywords",
"check-format",
"allow-pascal-case"
]
},
"whitespace": {
"options": [
"check-branch",
"check-decl",
"check-operator",
"check-separator",
"check-type",
"check-typecast"
]
}
},
"rulesDirectory": [
"codelyzer"
]
}