From 8d716be89c488e4032836956e6e9375ebc018b7b Mon Sep 17 00:00:00 2001 From: agoldenbaum Date: Tue, 19 Sep 2023 15:57:59 -0400 Subject: [PATCH 1/3] Custom chart samples for Angular --- .../custom-drawing-annotations/.stackblitzrc | 1 + .../custom-drawing-annotations/ReadMe.md | 50 ++++ .../custom-drawing-annotations/angular.json | 106 ++++++++ .../custom-drawing-annotations/package.json | 46 ++++ .../sandbox.config.json | 5 + .../src/app/StocksHistory.ts | 111 +++++++++ .../src/app/app.component.html | 59 +++++ .../src/app/app.component.scss | 3 + .../src/app/app.component.ts | 226 ++++++++++++++++++ .../src/app/app.module.ts | 39 +++ .../src/config/tsconfig-es5.app.json | 6 + .../src/config/tsconfig.app.json | 12 + .../src/config/tsconfig.base.json | 21 ++ .../src/config/tsconfig.spec.json | 19 ++ .../src/config/tsconfig.worker.json | 14 ++ .../src/environments/environment.prod.ts | 3 + .../src/environments/environment.ts | 16 ++ .../custom-drawing-annotations/src/index.html | 22 ++ .../custom-drawing-annotations/src/main.ts | 15 ++ .../src/polyfills.ts | 65 +++++ .../src/styles.scss | 9 + .../src/typings.d.ts | 5 + .../custom-drawing-annotations/tsconfig.json | 20 ++ .../custom-editing-data/.stackblitzrc | 1 + .../data-chart/custom-editing-data/ReadMe.md | 50 ++++ .../custom-editing-data/angular.json | 106 ++++++++ .../custom-editing-data/package.json | 44 ++++ .../custom-editing-data/sandbox.config.json | 5 + .../src/app/EditableDataSource.ts | 48 ++++ .../src/app/app.component.html | 49 ++++ .../src/app/app.component.scss | 3 + .../src/app/app.component.ts | 150 ++++++++++++ .../custom-editing-data/src/app/app.module.ts | 35 +++ .../src/config/tsconfig-es5.app.json | 6 + .../src/config/tsconfig.app.json | 12 + .../src/config/tsconfig.base.json | 21 ++ .../src/config/tsconfig.spec.json | 19 ++ .../src/config/tsconfig.worker.json | 14 ++ .../src/environments/environment.prod.ts | 3 + .../src/environments/environment.ts | 16 ++ .../custom-editing-data/src/index.html | 22 ++ .../custom-editing-data/src/main.ts | 15 ++ .../custom-editing-data/src/polyfills.ts | 65 +++++ .../custom-editing-data/src/styles.scss | 9 + .../custom-editing-data/src/typings.d.ts | 5 + .../custom-editing-data/tsconfig.json | 20 ++ 46 files changed, 1591 insertions(+) create mode 100644 samples/charts/data-chart/custom-drawing-annotations/.stackblitzrc create mode 100644 samples/charts/data-chart/custom-drawing-annotations/ReadMe.md create mode 100644 samples/charts/data-chart/custom-drawing-annotations/angular.json create mode 100644 samples/charts/data-chart/custom-drawing-annotations/package.json create mode 100644 samples/charts/data-chart/custom-drawing-annotations/sandbox.config.json create mode 100644 samples/charts/data-chart/custom-drawing-annotations/src/app/StocksHistory.ts create mode 100644 samples/charts/data-chart/custom-drawing-annotations/src/app/app.component.html create mode 100644 samples/charts/data-chart/custom-drawing-annotations/src/app/app.component.scss create mode 100644 samples/charts/data-chart/custom-drawing-annotations/src/app/app.component.ts create mode 100644 samples/charts/data-chart/custom-drawing-annotations/src/app/app.module.ts create mode 100644 samples/charts/data-chart/custom-drawing-annotations/src/config/tsconfig-es5.app.json create mode 100644 samples/charts/data-chart/custom-drawing-annotations/src/config/tsconfig.app.json create mode 100644 samples/charts/data-chart/custom-drawing-annotations/src/config/tsconfig.base.json create mode 100644 samples/charts/data-chart/custom-drawing-annotations/src/config/tsconfig.spec.json create mode 100644 samples/charts/data-chart/custom-drawing-annotations/src/config/tsconfig.worker.json create mode 100644 samples/charts/data-chart/custom-drawing-annotations/src/environments/environment.prod.ts create mode 100644 samples/charts/data-chart/custom-drawing-annotations/src/environments/environment.ts create mode 100644 samples/charts/data-chart/custom-drawing-annotations/src/index.html create mode 100644 samples/charts/data-chart/custom-drawing-annotations/src/main.ts create mode 100644 samples/charts/data-chart/custom-drawing-annotations/src/polyfills.ts create mode 100644 samples/charts/data-chart/custom-drawing-annotations/src/styles.scss create mode 100644 samples/charts/data-chart/custom-drawing-annotations/src/typings.d.ts create mode 100644 samples/charts/data-chart/custom-drawing-annotations/tsconfig.json create mode 100644 samples/charts/data-chart/custom-editing-data/.stackblitzrc create mode 100644 samples/charts/data-chart/custom-editing-data/ReadMe.md create mode 100644 samples/charts/data-chart/custom-editing-data/angular.json create mode 100644 samples/charts/data-chart/custom-editing-data/package.json create mode 100644 samples/charts/data-chart/custom-editing-data/sandbox.config.json create mode 100644 samples/charts/data-chart/custom-editing-data/src/app/EditableDataSource.ts create mode 100644 samples/charts/data-chart/custom-editing-data/src/app/app.component.html create mode 100644 samples/charts/data-chart/custom-editing-data/src/app/app.component.scss create mode 100644 samples/charts/data-chart/custom-editing-data/src/app/app.component.ts create mode 100644 samples/charts/data-chart/custom-editing-data/src/app/app.module.ts create mode 100644 samples/charts/data-chart/custom-editing-data/src/config/tsconfig-es5.app.json create mode 100644 samples/charts/data-chart/custom-editing-data/src/config/tsconfig.app.json create mode 100644 samples/charts/data-chart/custom-editing-data/src/config/tsconfig.base.json create mode 100644 samples/charts/data-chart/custom-editing-data/src/config/tsconfig.spec.json create mode 100644 samples/charts/data-chart/custom-editing-data/src/config/tsconfig.worker.json create mode 100644 samples/charts/data-chart/custom-editing-data/src/environments/environment.prod.ts create mode 100644 samples/charts/data-chart/custom-editing-data/src/environments/environment.ts create mode 100644 samples/charts/data-chart/custom-editing-data/src/index.html create mode 100644 samples/charts/data-chart/custom-editing-data/src/main.ts create mode 100644 samples/charts/data-chart/custom-editing-data/src/polyfills.ts create mode 100644 samples/charts/data-chart/custom-editing-data/src/styles.scss create mode 100644 samples/charts/data-chart/custom-editing-data/src/typings.d.ts create mode 100644 samples/charts/data-chart/custom-editing-data/tsconfig.json diff --git a/samples/charts/data-chart/custom-drawing-annotations/.stackblitzrc b/samples/charts/data-chart/custom-drawing-annotations/.stackblitzrc new file mode 100644 index 000000000..65efbb4fd --- /dev/null +++ b/samples/charts/data-chart/custom-drawing-annotations/.stackblitzrc @@ -0,0 +1 @@ +{"installDependencies":true,"startCommand":"turbo start","env":{"ENABLE_CJS_IMPORTS":true}} \ No newline at end of file diff --git a/samples/charts/data-chart/custom-drawing-annotations/ReadMe.md b/samples/charts/data-chart/custom-drawing-annotations/ReadMe.md new file mode 100644 index 000000000..56b39fb14 --- /dev/null +++ b/samples/charts/data-chart/custom-drawing-annotations/ReadMe.md @@ -0,0 +1,50 @@ + + + +This folder contains Angular application with example of Chart Overview feature using [DataChart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-angular-examples.git +cd ./igniteui-angular-examples +cd ../samples/charts/data-chart/chart-overview +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Angular** components, check out the [Angular documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html). diff --git a/samples/charts/data-chart/custom-drawing-annotations/angular.json b/samples/charts/data-chart/custom-drawing-annotations/angular.json new file mode 100644 index 000000000..ea31d8779 --- /dev/null +++ b/samples/charts/data-chart/custom-drawing-annotations/angular.json @@ -0,0 +1,106 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/config/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "src/styles.scss" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/config/tsconfig.spec.json", + "karmaConfig": "src/config/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/config/tsconfig.app.json", + "src/config/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "schematics": { + "@schematics/angular:component": { + "prefix": "app", + "styleext": "scss" + }, + "@schematics/angular:directive": { + "prefix": "app" + } + }, + "cli": { + "analytics": false + } +} diff --git a/samples/charts/data-chart/custom-drawing-annotations/package.json b/samples/charts/data-chart/custom-drawing-annotations/package.json new file mode 100644 index 000000000..c4415679f --- /dev/null +++ b/samples/charts/data-chart/custom-drawing-annotations/package.json @@ -0,0 +1,46 @@ +{ + "scripts": { + "ng": "ng", + "update": "ng update", + "start": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng serve -o", + "build": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng build --configuration production", + "lint": "ng lint" + }, + "dependencies": { + "@angular/animations": "16.0.1", + "@angular/common": "16.0.1", + "@angular/compiler": "16.0.1", + "@angular/core": "16.0.1", + "@angular/forms": "16.0.1", + "@angular/platform-browser": "16.0.1", + "@angular/platform-browser-dynamic": "16.0.1", + "@types/hammerjs": "2.0.39", + "classlist.js": "1.1.20150312", + "core-js": "2.6.2", + "hammerjs": "2.0.8", + "igniteui-angular-layouts": "16.1.0", + "igniteui-angular-inputs": "16.1.0", + "igniteui-angular-charts": "16.1.0", + "igniteui-angular-core": "16.1.0", + "intl": "1.2.5", + "jszip": "3.7.1", + "rxjs": "6.6.7", + "tslib": "2.3.1", + "web-animations-js": "2.3.2", + "zone.js": "0.13.0" + }, + "devDependencies": { + "@angular-devkit/build-angular": "16.0.1", + "@angular/cli": "16.0.1", + "@angular/compiler-cli": "16.0.1", + "@angular/language-service": "16.0.1", + "@types/node": "14.14.28", + "codelyzer": "6.0.2", + "jasmine-core": "3.7.1", + "jasmine-spec-reporter": "~4.2.1", + "sass.js": "0.11.1", + "ts-node": "9.1.1", + "tslint": "~6.1.3", + "typescript": "5.0.4" + } +} diff --git a/samples/charts/data-chart/custom-drawing-annotations/sandbox.config.json b/samples/charts/data-chart/custom-drawing-annotations/sandbox.config.json new file mode 100644 index 000000000..00acba0c1 --- /dev/null +++ b/samples/charts/data-chart/custom-drawing-annotations/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/charts/data-chart/custom-drawing-annotations/src/app/StocksHistory.ts b/samples/charts/data-chart/custom-drawing-annotations/src/app/StocksHistory.ts new file mode 100644 index 000000000..f04723d9b --- /dev/null +++ b/samples/charts/data-chart/custom-drawing-annotations/src/app/StocksHistory.ts @@ -0,0 +1,111 @@ + + +export class StocksHistory { + /** gets stock OHLC prices for multiple stocks */ + + public static async getMultipleStocks(): Promise { + // getting prices of multiples stocks asynchronously + const dataSources: any[] = [ + //await this.getAmazonStock(), + await this.getGoogleStock(), + await this.getMicrosoftStock(), + //await this.getTeslaStock() + ]; + + return new Promise((resolve, reject) => { + resolve(dataSources); + }); + } + + /** gets Amazon stock OHLC prices from a .JSON file */ + public static async getAmazonStock(): Promise { + let url = "https://static.infragistics.com/xplatform/data/stocks/stockAmazon.json"; + let response = await fetch(url); + let jsonData = await response.json(); + let stockData = this.convertData(jsonData); + // setting data intent for Series Title, e.g. FinancialChart usage + (stockData as any).__dataIntents = { + close: ["SeriesTitle/Amazon"] + }; + // console.log("fetchAmazonStock: ", stockData.length); + + return new Promise((resolve, reject) => { + resolve(stockData); + }); + } + + /** gets Tesla stock OHLC prices from a .JSON file */ + public static async getTeslaStock(): Promise { + let url = "https://static.infragistics.com/xplatform/data/stocks/stockTesla.json"; + let response = await fetch(url); + let jsonData = await response.json(); + let stockData = this.convertData(jsonData); + // setting data intent for Series Title, e.g. FinancialChart usage + (stockData as any).__dataIntents = { + close: ["SeriesTitle/Tesla"] + }; + return new Promise((resolve, reject) => { + resolve(stockData); + }); + } + + /** gets Microsoft stock OHLC prices from a .JSON file */ + public static async getMicrosoftStock(): Promise { + let url = "https://static.infragistics.com/xplatform/data/stocks/stockMicrosoft.json"; + let response = await fetch(url); + let jsonData = await response.json(); + let stockData = this.convertData(jsonData); + // setting data intent for Series Title, e.g. FinancialChart usage + (stockData as any).__dataIntents = { + close: ["SeriesTitle/Microsoft"] + }; + return new Promise((resolve, reject) => { + resolve(stockData); + }); + } + + /** gets Google stock OHLC prices from a .JSON file */ + public static async getGoogleStock(): Promise { + let url = "https://static.infragistics.com/xplatform/data/stocks/stockGoogle.json"; + let response = await fetch(url); + let jsonData = await response.json(); + let stockData = this.convertData(jsonData); + // setting data intent for Series Title, e.g. FinancialChart usage + (stockData as any).__dataIntents = { + close: ["SeriesTitle/Google"] + }; + return new Promise((resolve, reject) => { + resolve(stockData); + }); + } + + public static convertData(jsonData: any[]): StockItem[] { + let stockItems: StockItem[] = []; + + for (let json of jsonData) { + let parts = json.date.split("-"); // "2020-01-01" + let item = new StockItem(); + item.date = new Date(parts[0], parts[1], parts[2]); + item.open = json.open; + item.high = json.high; + item.low = json.low; + item.close = json.close; + item.volume = json.volume; + stockItems.push(item); + + } + + return stockItems; + } +} + +export class StockItem { + public open?: number; + public close?: number; + public high?: number; + public low?: number; + public volume?: number; + + public date?: Date; + +} diff --git a/samples/charts/data-chart/custom-drawing-annotations/src/app/app.component.html b/samples/charts/data-chart/custom-drawing-annotations/src/app/app.component.html new file mode 100644 index 000000000..484c2fa2c --- /dev/null +++ b/samples/charts/data-chart/custom-drawing-annotations/src/app/app.component.html @@ -0,0 +1,59 @@ +
+
+ Chart with Custom Drawing Annotations +
+
+ +
+
+ + + + + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
diff --git a/samples/charts/data-chart/custom-drawing-annotations/src/app/app.component.scss b/samples/charts/data-chart/custom-drawing-annotations/src/app/app.component.scss new file mode 100644 index 000000000..cbff781da --- /dev/null +++ b/samples/charts/data-chart/custom-drawing-annotations/src/app/app.component.scss @@ -0,0 +1,3 @@ +/* styles are loaded the Shared CSS file located at: +https://static.infragistics.com/xplatform/css/samples/ +*/ diff --git a/samples/charts/data-chart/custom-drawing-annotations/src/app/app.component.ts b/samples/charts/data-chart/custom-drawing-annotations/src/app/app.component.ts new file mode 100644 index 000000000..bb7372737 --- /dev/null +++ b/samples/charts/data-chart/custom-drawing-annotations/src/app/app.component.ts @@ -0,0 +1,226 @@ +import { Component, ViewChild } from "@angular/core"; +import { IgxDataChartComponent, IgxLegendComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxPlotAreaMouseButtonEventArgs, IgxPlotAreaMouseEventArgs } from "igniteui-angular-charts"; +import { IgPoint } from "igniteui-angular-core"; +import { StocksHistory } from "./StocksHistory"; +import { IgxToolCommandEventArgs, IgxToolActionLabelComponent } from "igniteui-angular-layouts"; + +@Component({ + providers: [ StocksHistory ], + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + + @ViewChild("chart", { static: true }) + public chart: IgxDataChartComponent; + @ViewChild("legend", { static: true }) + public legend: IgxLegendComponent; + @ViewChild("xAxis", { static: true }) + public xAxis: IgxNumericXAxisComponent; + @ViewChild("yAxis", { static: true }) + public yAxis: IgxNumericYAxisComponent; + @ViewChild("drawRangeAreaToolAction", { static: true}) + public drawRangeAreaToolAction: IgxToolActionLabelComponent; + @ViewChild("drawSlopeLineToolAction", { static: true}) + public drawSlopeLineToolAction: IgxToolActionLabelComponent; + @ViewChild("drawHorizontalLineToolAction", { static: true}) + public drawHorizontalLineToolAction: IgxToolActionLabelComponent; + + public data: any[]; + public horizontalLineData: any[]; + public slopeLineData: any[]; + public rangeAreaData: any[]; + + private axisMinValue: number; + private axisMaxValue: number; + + private chartMouseDownLocation: IgPoint; + private chartMouseMoveLocation: IgPoint; + + private drawMode: string; + + private isAxisRangeInitialized: boolean; + private isDrawingHorizontalLine: boolean; + private isDrawingRangeArea: boolean; + private isDrawingSlopeLine: boolean; + + constructor() { + + StocksHistory.getMicrosoftStock().then((stocks: any[]) => { + this.data = stocks; + this.plotHorizontalLine(38, true); + this.plotRangeArea(50, 60, true); + this.plotSlopeLine({x: 0, y:45}, {x: this.data.length - 1, y: 80}, true); + }); + + this.onChartMouseLeftButtonDown = this.onChartMouseLeftButtonDown.bind(this); + this.onChartMouseLeftButtonUp = this.onChartMouseLeftButtonUp.bind(this); + this.onChartMouseOver = this.onChartMouseOver.bind(this); + this.onToolbarCommandChanged = this.onToolbarCommandChanged.bind(this); + this.initializeAxisRange = this.initializeAxisRange.bind(this); + } + + public onChartMouseLeftButtonDown(e: IgxPlotAreaMouseButtonEventArgs){ + this.initializeAxisRange(); + if (!this.isAxisRangeInitialized) return; + + if (this.drawMode == "DrawHorizontalLine") this.isDrawingHorizontalLine = true; + if (this.drawMode == "DrawSlopeLine") this.isDrawingSlopeLine = true; + if (this.drawMode == "DrawRangeArea") this.isDrawingRangeArea = true; + + this.chartMouseDownLocation = this.getDataLocation(e.plotAreaPosition); + this.chartMouseMoveLocation = this.getDataLocation(e.plotAreaPosition); + + this.plotRangeArea(this.chartMouseDownLocation.y, this.chartMouseMoveLocation.y, false); + this.plotSlopeLine(this.chartMouseDownLocation, this.chartMouseMoveLocation, false); + this.plotHorizontalLine(this.chartMouseMoveLocation.y, false); + } + + public onChartMouseOver(e: IgxPlotAreaMouseEventArgs){ + if (!this.isAxisRangeInitialized) return; + + this.chartMouseMoveLocation = this.getDataLocation(e.plotAreaPosition); + + this.plotRangeArea(this.chartMouseDownLocation.y, this.chartMouseMoveLocation.y, false); + this.plotSlopeLine(this.chartMouseDownLocation, this.chartMouseMoveLocation, false); + this.plotHorizontalLine(this.chartMouseMoveLocation.y, false); + } + + public onChartMouseLeftButtonUp(e: IgxPlotAreaMouseButtonEventArgs){ + this.isDrawingSlopeLine = false; + this.isDrawingRangeArea = false; + this.isDrawingHorizontalLine = false; + } + + public initializeAxisRange(){ + if (this.isAxisRangeInitialized) return; + this.isAxisRangeInitialized = true; + + this.axisMaxValue = this.yAxis.actualMaximumValue; + this.axisMinValue = this.yAxis.actualMinimumValue; + + this.yAxis.maximumValue = this.axisMaxValue; + this.yAxis.minimumValue = this.axisMinValue; + } + + public getDataLocation(chartPixel: IgPoint): IgPoint + { + var x = this.xAxis.unscaleValue(chartPixel.x); + var y = this.yAxis.unscaleValue(chartPixel.y); + + return {x: x, y: y}; + } + + public plotHorizontalLine(value: number, forceRender: boolean){ + if(!forceRender){ + if(!this.isAxisRangeInitialized) return; + if(!this.isDrawingHorizontalLine) return; + } + + let dataPoints: any[] = []; + + for(let i=0; i 0.01){ + slope = (end.y - start.y) / (end.x - start.x); + offset = end.y - (end.x * slope); + } + + let dataPoints: any[] = []; + + for(let i=0; i + + + + + IgniteUI for Angular | Example | infragistics + + + + + + + + + + + + + + + + diff --git a/samples/charts/data-chart/custom-drawing-annotations/src/main.ts b/samples/charts/data-chart/custom-drawing-annotations/src/main.ts new file mode 100644 index 000000000..8b0ce4164 --- /dev/null +++ b/samples/charts/data-chart/custom-drawing-annotations/src/main.ts @@ -0,0 +1,15 @@ +// tslint:disable:no-string-literal +import "./polyfills"; +import { enableProdMode } from "@angular/core"; +import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; +import { AppModule } from "./app/app.module"; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // ensure Angular destroys itself on hot reloads. + if (window["ngRef"]) { + window["ngRef"].destroy(); + } + window["ngRef"] = ref; + + // otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/samples/charts/data-chart/custom-drawing-annotations/src/polyfills.ts b/samples/charts/data-chart/custom-drawing-annotations/src/polyfills.ts new file mode 100644 index 000000000..4b0aeb31a --- /dev/null +++ b/samples/charts/data-chart/custom-drawing-annotations/src/polyfills.ts @@ -0,0 +1,65 @@ +/** + * 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 +*/ + +// import "core-js/es7/object"; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +import "classlist.js"; // run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +//import "core-js/es6/reflect"; + +/* Evergreen browsers require these. */ +// used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. +//import "core-js/es7/reflect"; + +/* + * Required to support Web Animations `@angular/platform-browser/animations`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + */ +import "web-animations-js"; // run `npm install --save web-animations-js`. + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import "hammerjs/hammer"; +import "zone.js/dist/zone"; // included with Angular CLI. + +/*************************************************************************************************** + * @angular/animations polyfill + */ +if (!Element.prototype.matches) { + Element.prototype.matches = (Element.prototype as any).msMatchesSelector; +} + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import "intl"; // Run `npm install --save intl`. +// import "intl/locale-data/jsonp/de"; +/** + * Need to import at least one locale-data with intl. + */ +// import "intl/locale-data/jsonp/en"; diff --git a/samples/charts/data-chart/custom-drawing-annotations/src/styles.scss b/samples/charts/data-chart/custom-drawing-annotations/src/styles.scss new file mode 100644 index 000000000..9b431e92d --- /dev/null +++ b/samples/charts/data-chart/custom-drawing-annotations/src/styles.scss @@ -0,0 +1,9 @@ +/* autoprefixer grid: on */ +html, +body { + height: 100%; + width: 100%; + overflow: hidden; + margin: 0; + box-sizing: border-box; +} diff --git a/samples/charts/data-chart/custom-drawing-annotations/src/typings.d.ts b/samples/charts/data-chart/custom-drawing-annotations/src/typings.d.ts new file mode 100644 index 000000000..ef5c7bd62 --- /dev/null +++ b/samples/charts/data-chart/custom-drawing-annotations/src/typings.d.ts @@ -0,0 +1,5 @@ +/* SystemJS module definition */ +declare var module: NodeModule; +interface NodeModule { + id: string; +} diff --git a/samples/charts/data-chart/custom-drawing-annotations/tsconfig.json b/samples/charts/data-chart/custom-drawing-annotations/tsconfig.json new file mode 100644 index 000000000..6a01bab30 --- /dev/null +++ b/samples/charts/data-chart/custom-drawing-annotations/tsconfig.json @@ -0,0 +1,20 @@ +/* + This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience. + It is not intended to be used to perform a compilation. + + To learn more about this file see: https://angular.io/config/solution-tsconfig. +*/ +{ + "files": [], + "references": [ + { + "path": "./src/config/tsconfig.app.json" + }, + { + "path": "./src/config/tsconfig.worker.json" + }, + { + "path": "./src/config/tsconfig.spec.json" + } + ] +} \ No newline at end of file diff --git a/samples/charts/data-chart/custom-editing-data/.stackblitzrc b/samples/charts/data-chart/custom-editing-data/.stackblitzrc new file mode 100644 index 000000000..65efbb4fd --- /dev/null +++ b/samples/charts/data-chart/custom-editing-data/.stackblitzrc @@ -0,0 +1 @@ +{"installDependencies":true,"startCommand":"turbo start","env":{"ENABLE_CJS_IMPORTS":true}} \ No newline at end of file diff --git a/samples/charts/data-chart/custom-editing-data/ReadMe.md b/samples/charts/data-chart/custom-editing-data/ReadMe.md new file mode 100644 index 000000000..56b39fb14 --- /dev/null +++ b/samples/charts/data-chart/custom-editing-data/ReadMe.md @@ -0,0 +1,50 @@ + + + +This folder contains Angular application with example of Chart Overview feature using [DataChart](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html) component. + + + + + + View Docs + + + View Code + + + Run Sample + + + Run Sample + + + + +## Instructions + +To set up this project locally, execute these commands: + +``` +git clone https://github.com/IgniteUI/igniteui-angular-examples.git +cd ./igniteui-angular-examples +cd ../samples/charts/data-chart/chart-overview +``` + +open above folder in VS Code or type: +``` +code . +``` + +In terminal window, run: +``` +npm install +npm run-script start +``` + +Then open http://localhost:4200/ in your browser + + +## Learn More + +To learn more about **Ignite UI for Angular** components, check out the [Angular documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html). diff --git a/samples/charts/data-chart/custom-editing-data/angular.json b/samples/charts/data-chart/custom-editing-data/angular.json new file mode 100644 index 000000000..ea31d8779 --- /dev/null +++ b/samples/charts/data-chart/custom-editing-data/angular.json @@ -0,0 +1,106 @@ +{ + "$schema": "./node_modules/@angular/cli/lib/config/schema.json", + "version": 1, + "newProjectRoot": "projects", + "projects": { + "demo": { + "root": "", + "sourceRoot": "src", + "projectType": "application", + "architect": { + "build": { + "builder": "@angular-devkit/build-angular:browser", + "options": { + "outputPath": "dist/demo", + "index": "src/index.html", + "main": "src/main.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/config/tsconfig.app.json", + "assets": [ + "src/assets" + ], + "styles": [ + "src/styles.scss" + ], + "scripts": [] + }, + "configurations": { + "production": { + "fileReplacements": [ + { + "replace": "src/environments/environment.ts", + "with": "src/environments/environment.prod.ts" + } + ], + "optimization": true, + "outputHashing": "all", + "sourceMap": false, + "namedChunks": false, + "aot": true, + "extractLicenses": true, + "vendorChunk": false, + "buildOptimizer": true + } + } + }, + "serve": { + "builder": "@angular-devkit/build-angular:dev-server", + "options": { + "browserTarget": "demo:build" + }, + "configurations": { + "production": { + "browserTarget": "demo:build:production" + } + } + }, + "extract-i18n": { + "builder": "@angular-devkit/build-angular:extract-i18n", + "options": { + "browserTarget": "demo:build" + } + }, + "test": { + "builder": "@angular-devkit/build-angular:karma", + "options": { + "main": "src/test.ts", + "polyfills": "src/polyfills.ts", + "tsConfig": "src/config/tsconfig.spec.json", + "karmaConfig": "src/config/karma.conf.js", + "styles": [ + "styles.css" + ], + "scripts": [], + "assets": [ + "src/assets" + ] + } + }, + "lint": { + "builder": "@angular-devkit/build-angular:tslint", + "options": { + "tsConfig": [ + "src/config/tsconfig.app.json", + "src/config/tsconfig.spec.json" + ], + "exclude": [ + "**/node_modules/**" + ] + } + } + } + } + }, + "schematics": { + "@schematics/angular:component": { + "prefix": "app", + "styleext": "scss" + }, + "@schematics/angular:directive": { + "prefix": "app" + } + }, + "cli": { + "analytics": false + } +} diff --git a/samples/charts/data-chart/custom-editing-data/package.json b/samples/charts/data-chart/custom-editing-data/package.json new file mode 100644 index 000000000..8f8254a17 --- /dev/null +++ b/samples/charts/data-chart/custom-editing-data/package.json @@ -0,0 +1,44 @@ +{ + "scripts": { + "ng": "ng", + "update": "ng update", + "start": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng serve -o", + "build": "node --max_old_space_size=12192 node_modules/@angular/cli/bin/ng build --configuration production", + "lint": "ng lint" + }, + "dependencies": { + "@angular/animations": "16.0.1", + "@angular/common": "16.0.1", + "@angular/compiler": "16.0.1", + "@angular/core": "16.0.1", + "@angular/forms": "16.0.1", + "@angular/platform-browser": "16.0.1", + "@angular/platform-browser-dynamic": "16.0.1", + "@types/hammerjs": "2.0.39", + "classlist.js": "1.1.20150312", + "core-js": "2.6.2", + "hammerjs": "2.0.8", + "igniteui-angular-charts": "16.1.0", + "igniteui-angular-core": "16.1.0", + "intl": "1.2.5", + "jszip": "3.7.1", + "rxjs": "6.6.7", + "tslib": "2.3.1", + "web-animations-js": "2.3.2", + "zone.js": "0.13.0" + }, + "devDependencies": { + "@angular-devkit/build-angular": "16.0.1", + "@angular/cli": "16.0.1", + "@angular/compiler-cli": "16.0.1", + "@angular/language-service": "16.0.1", + "@types/node": "14.14.28", + "codelyzer": "6.0.2", + "jasmine-core": "3.7.1", + "jasmine-spec-reporter": "~4.2.1", + "sass.js": "0.11.1", + "ts-node": "9.1.1", + "tslint": "~6.1.3", + "typescript": "5.0.4" + } +} diff --git a/samples/charts/data-chart/custom-editing-data/sandbox.config.json b/samples/charts/data-chart/custom-editing-data/sandbox.config.json new file mode 100644 index 000000000..00acba0c1 --- /dev/null +++ b/samples/charts/data-chart/custom-editing-data/sandbox.config.json @@ -0,0 +1,5 @@ +{ + "infiniteLoopProtection": false, + "hardReloadOnChange": false, + "view": "browser" +} \ No newline at end of file diff --git a/samples/charts/data-chart/custom-editing-data/src/app/EditableDataSource.ts b/samples/charts/data-chart/custom-editing-data/src/app/EditableDataSource.ts new file mode 100644 index 000000000..ea002db96 --- /dev/null +++ b/samples/charts/data-chart/custom-editing-data/src/app/EditableDataSource.ts @@ -0,0 +1,48 @@ +export class EditableDataSource{ + public static getLineData(): any[]{ + var lineData: any[] = [ + { Category: "2010", DataValue: 20, EditingValue: null }, + { Category: "2011", DataValue: 40, EditingValue: null }, + { Category: "2012", DataValue: 30, EditingValue: null }, + { Category: "2013", DataValue: 50, EditingValue: null }, + { Category: "2014", DataValue: 40, EditingValue: null }, + { Category: "2015", DataValue: 60, EditingValue: null }, + { Category: "2016", DataValue: 30, EditingValue: null }, + { Category: "2017", DataValue: 50, EditingValue: null }, + { Category: "2018", DataValue: 40, EditingValue: null }, + { Category: "2019", DataValue: 70, EditingValue: null }, + { Category: "2020", DataValue: 40, EditingValue: null }, + { Category: "2021", DataValue: 60, EditingValue: null }, + { Category: "2022", DataValue: 50, EditingValue: null }, + { Category: "2023", DataValue: 70, EditingValue: null }, + { Category: "2024", DataValue: 60, EditingValue: null }, + { Category: "2025", DataValue: 80, EditingValue: null }, + { Category: "2026", DataValue: 70, EditingValue: null } + ]; + + return lineData; + } + + public static getScatterData(): any[] { + var scatterData: any[] = [ + { X: 10, Y: 20, EditingX: null, EditingY: null }, + { X: 11, Y: 40, EditingX: null, EditingY: null }, + { X: 12, Y: 30, EditingX: null, EditingY: null }, + { X: 13, Y: 50, EditingX: null, EditingY: null }, + { X: 14, Y: 40, EditingX: null, EditingY: null }, + { X: 15, Y: 60, EditingX: null, EditingY: null }, + { X: 16, Y: 30, EditingX: null, EditingY: null }, + { X: 17, Y: 50, EditingX: null, EditingY: null }, + { X: 18, Y: 40, EditingX: null, EditingY: null }, + { X: 19, Y: 70, EditingX: null, EditingY: null }, + { X: 20, Y: 40, EditingX: null, EditingY: null }, + { X: 21, Y: 60, EditingX: null, EditingY: null }, + { X: 22, Y: 50, EditingX: null, EditingY: null }, + { X: 23, Y: 70, EditingX: null, EditingY: null }, + { X: 24, Y: 60, EditingX: null, EditingY: null }, + { X: 25, Y: 80, EditingX: null, EditingY: null }, + { X: 26, Y: 70, EditingX: null, EditingY: null } + ]; + return scatterData; + } +} \ No newline at end of file diff --git a/samples/charts/data-chart/custom-editing-data/src/app/app.component.html b/samples/charts/data-chart/custom-editing-data/src/app/app.component.html new file mode 100644 index 000000000..e99d517b1 --- /dev/null +++ b/samples/charts/data-chart/custom-editing-data/src/app/app.component.html @@ -0,0 +1,49 @@ +
+
+
+ Line Chart with Editable Values by Dragging Markers Up/Down Directions +
+ + + + + + + + + + + + + + + + +
+ Scatter Chart with Editable Values by Dragging Markers In All Directions +
+ + + + + + + + + + + + + + + +
+
\ No newline at end of file diff --git a/samples/charts/data-chart/custom-editing-data/src/app/app.component.scss b/samples/charts/data-chart/custom-editing-data/src/app/app.component.scss new file mode 100644 index 000000000..cbff781da --- /dev/null +++ b/samples/charts/data-chart/custom-editing-data/src/app/app.component.scss @@ -0,0 +1,3 @@ +/* styles are loaded the Shared CSS file located at: +https://static.infragistics.com/xplatform/css/samples/ +*/ diff --git a/samples/charts/data-chart/custom-editing-data/src/app/app.component.ts b/samples/charts/data-chart/custom-editing-data/src/app/app.component.ts new file mode 100644 index 000000000..45231821a --- /dev/null +++ b/samples/charts/data-chart/custom-editing-data/src/app/app.component.ts @@ -0,0 +1,150 @@ +import { Component, ViewChild } from "@angular/core"; +import { IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxLegendComponent, IgxDataChartMouseButtonEventArgs, IgxPlotAreaMouseButtonEventArgs, IgxPlotAreaMouseEventArgs } from "igniteui-angular-charts"; +import { EditableDataSource } from "./EditableDataSource"; + +@Component({ + providers: [ EditableDataSource ], + selector: "app-root", + styleUrls: ["./app.component.scss"], + templateUrl: "./app.component.html" +}) +export class AppComponent { + + @ViewChild("lineChart", { static: true }) + public lineChart: IgxDataChartComponent; + @ViewChild("scatterChart", { static: true }) + public scatterChart: IgxDataChartComponent; + @ViewChild("legend", { static: true }) + public legend: IgxLegendComponent; + @ViewChild("lineXAxis", { static: true }) + public lineXAxis: IgxNumericXAxisComponent; + @ViewChild("lineYAxis", { static: true }) + public lineYAxis: IgxNumericYAxisComponent; + @ViewChild("scatterXAxis", { static: true }) + public scatterXAxis: IgxNumericXAxisComponent; + @ViewChild("scatterYAxis", { static: true }) + public scatterYAxis: IgxNumericYAxisComponent; + + public lineData: any[]; + public scatterData: any[]; + + private lineSeriesEditingActive = false; + private lineSeriesEditingIndex = -1; + + private scatterLineEditingActive = false; + private scatterLineEditingIndex = -1; + + constructor() { + this.lineData = EditableDataSource.getLineData(); + this.scatterData = EditableDataSource.getScatterData(); + } + + public onLineChartMouseDown(e: IgxDataChartMouseButtonEventArgs){ + this.lineSeriesEditingActive = true; + this.lineSeriesEditingIndex = -1; + + var itemData = e.item; + + for(var i=0; i + + + + + IgniteUI for Angular | Example | infragistics + + + + + + + + + + + + + + + + diff --git a/samples/charts/data-chart/custom-editing-data/src/main.ts b/samples/charts/data-chart/custom-editing-data/src/main.ts new file mode 100644 index 000000000..8b0ce4164 --- /dev/null +++ b/samples/charts/data-chart/custom-editing-data/src/main.ts @@ -0,0 +1,15 @@ +// tslint:disable:no-string-literal +import "./polyfills"; +import { enableProdMode } from "@angular/core"; +import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; +import { AppModule } from "./app/app.module"; + +platformBrowserDynamic().bootstrapModule(AppModule).then(ref => { + // ensure Angular destroys itself on hot reloads. + if (window["ngRef"]) { + window["ngRef"].destroy(); + } + window["ngRef"] = ref; + + // otherwise, log the boot error +}).catch(err => console.error(err)); diff --git a/samples/charts/data-chart/custom-editing-data/src/polyfills.ts b/samples/charts/data-chart/custom-editing-data/src/polyfills.ts new file mode 100644 index 000000000..4b0aeb31a --- /dev/null +++ b/samples/charts/data-chart/custom-editing-data/src/polyfills.ts @@ -0,0 +1,65 @@ +/** + * 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 +*/ + +// import "core-js/es7/object"; + +/** IE10 and IE11 requires the following for NgClass support on SVG elements */ +import "classlist.js"; // run `npm install --save classlist.js`. + +/** IE10 and IE11 requires the following for the Reflect API. */ +//import "core-js/es6/reflect"; + +/* Evergreen browsers require these. */ +// used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. +//import "core-js/es7/reflect"; + +/* + * Required to support Web Animations `@angular/platform-browser/animations`. + * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation + */ +import "web-animations-js"; // run `npm install --save web-animations-js`. + +/*************************************************************************************************** + * Zone JS is required by Angular itself. + */ +import "hammerjs/hammer"; +import "zone.js/dist/zone"; // included with Angular CLI. + +/*************************************************************************************************** + * @angular/animations polyfill + */ +if (!Element.prototype.matches) { + Element.prototype.matches = (Element.prototype as any).msMatchesSelector; +} + +/*************************************************************************************************** + * APPLICATION IMPORTS + */ + +/** + * Date, currency, decimal and percent pipes. + * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 + */ +// import "intl"; // Run `npm install --save intl`. +// import "intl/locale-data/jsonp/de"; +/** + * Need to import at least one locale-data with intl. + */ +// import "intl/locale-data/jsonp/en"; diff --git a/samples/charts/data-chart/custom-editing-data/src/styles.scss b/samples/charts/data-chart/custom-editing-data/src/styles.scss new file mode 100644 index 000000000..9b431e92d --- /dev/null +++ b/samples/charts/data-chart/custom-editing-data/src/styles.scss @@ -0,0 +1,9 @@ +/* autoprefixer grid: on */ +html, +body { + height: 100%; + width: 100%; + overflow: hidden; + margin: 0; + box-sizing: border-box; +} diff --git a/samples/charts/data-chart/custom-editing-data/src/typings.d.ts b/samples/charts/data-chart/custom-editing-data/src/typings.d.ts new file mode 100644 index 000000000..ef5c7bd62 --- /dev/null +++ b/samples/charts/data-chart/custom-editing-data/src/typings.d.ts @@ -0,0 +1,5 @@ +/* SystemJS module definition */ +declare var module: NodeModule; +interface NodeModule { + id: string; +} diff --git a/samples/charts/data-chart/custom-editing-data/tsconfig.json b/samples/charts/data-chart/custom-editing-data/tsconfig.json new file mode 100644 index 000000000..6a01bab30 --- /dev/null +++ b/samples/charts/data-chart/custom-editing-data/tsconfig.json @@ -0,0 +1,20 @@ +/* + This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience. + It is not intended to be used to perform a compilation. + + To learn more about this file see: https://angular.io/config/solution-tsconfig. +*/ +{ + "files": [], + "references": [ + { + "path": "./src/config/tsconfig.app.json" + }, + { + "path": "./src/config/tsconfig.worker.json" + }, + { + "path": "./src/config/tsconfig.spec.json" + } + ] +} \ No newline at end of file From ba9eb5bf6eea86d620198a437e7d51c9f367abb8 Mon Sep 17 00:00:00 2001 From: "HUSSAR-mtrela (Martin Trela)" Date: Thu, 21 Sep 2023 15:14:56 -0400 Subject: [PATCH 2/3] Update package.json --- .../data-chart/custom-drawing-annotations/package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/samples/charts/data-chart/custom-drawing-annotations/package.json b/samples/charts/data-chart/custom-drawing-annotations/package.json index c4415679f..806b3d2a2 100644 --- a/samples/charts/data-chart/custom-drawing-annotations/package.json +++ b/samples/charts/data-chart/custom-drawing-annotations/package.json @@ -18,10 +18,10 @@ "classlist.js": "1.1.20150312", "core-js": "2.6.2", "hammerjs": "2.0.8", - "igniteui-angular-layouts": "16.1.0", - "igniteui-angular-inputs": "16.1.0", - "igniteui-angular-charts": "16.1.0", - "igniteui-angular-core": "16.1.0", + "@infragistics/igniteui-angular-core": "23.2.18", + "@infragistics/igniteui-angular-charts": "23.2.18", + "@infragistics/igniteui-angular-inputs": "23.2.18", + "@infragistics/igniteui-angular-layouts": "23.2.18", "intl": "1.2.5", "jszip": "3.7.1", "rxjs": "6.6.7", From 9c02547e5e0c76f334a2092154e12710d508a7d4 Mon Sep 17 00:00:00 2001 From: "HUSSAR-mtrela (Martin Trela)" Date: Thu, 21 Sep 2023 15:15:33 -0400 Subject: [PATCH 3/3] Update package.json --- samples/charts/data-chart/custom-editing-data/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/samples/charts/data-chart/custom-editing-data/package.json b/samples/charts/data-chart/custom-editing-data/package.json index 8f8254a17..fb81a9f87 100644 --- a/samples/charts/data-chart/custom-editing-data/package.json +++ b/samples/charts/data-chart/custom-editing-data/package.json @@ -18,8 +18,8 @@ "classlist.js": "1.1.20150312", "core-js": "2.6.2", "hammerjs": "2.0.8", - "igniteui-angular-charts": "16.1.0", - "igniteui-angular-core": "16.1.0", + "@infragistics/igniteui-angular-core": "23.2.18", + "@infragistics/igniteui-angular-charts": "23.2.18", "intl": "1.2.5", "jszip": "3.7.1", "rxjs": "6.6.7",