IgniteUI · HUSSAR-mtrela · Sep 21, 2023 · Sep 19, 2023 · Sep 21, 2023 · Sep 21, 2023
diff --git a/samples/charts/data-chart/custom-drawing-annotations/.stackblitzrc b/samples/charts/data-chart/custom-drawing-annotations/.stackblitzrc
@@ -0,0 +1 @@
+{"installDependencies":true,"startCommand":"turbo start","env":{"ENABLE_CJS_IMPORTS":true}}
diff --git a/samples/charts/data-chart/custom-drawing-annotations/ReadMe.md b/samples/charts/data-chart/custom-drawing-annotations/ReadMe.md
@@ -0,0 +1,50 @@
+<!-- NOTE: do not change this file because it's auto re-generated from template: -->
+<!-- https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext/samples/templates/ReadMe.md -->
+
+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.
+
+
+<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
+    <body>
+        <a target="_blank" href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem" alt="View Docs" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-docs.png"/>
+        </a>
+        <a target="_blank" href="./src/app/app.component.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-code.png"/>
+        </a>
+        <a target="_blank" href="https://infragistics.com/angular-demos-dv/samples/charts/data-chart-chart-overview" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-run.png"/>
+        </a>
+        <a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-angular-examples/tree/master/samples/charts/data-chart/chart-overview?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/app.component.html" rel="noopener noreferrer">
+            <img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://github.com/IgniteUI/igniteui-blazor-examples/raw/vnext/templates/sample/images/button-sandbox.png"/>
+        </a>
+    </body>
+</html>
+
+## 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
@@ -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
@@ -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",
+    "@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",
+    "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
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+} 
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
@@ -0,0 +1,111 @@
+
+
+export class StocksHistory {
+  /** gets stock OHLC prices for multiple stocks */
+
+  public static async getMultipleStocks(): Promise<any[]> {
+    // getting prices of multiples stocks asynchronously
+    const dataSources: any[] = [
+      //await this.getAmazonStock(),
+      await this.getGoogleStock(),
+      await this.getMicrosoftStock(),
+      //await this.getTeslaStock()
+    ];
+
+    return new Promise<any[]>((resolve, reject) => {
+      resolve(dataSources);
+    });
+  }
+
+  /** gets Amazon stock OHLC prices from a .JSON file */
+  public static async getAmazonStock(): Promise<StockItem[]> {
+    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<StockItem[]>((resolve, reject) => {
+      resolve(stockData);
+    });
+  }
+
+  /** gets Tesla stock OHLC prices from a .JSON file */
+  public static async getTeslaStock(): Promise<StockItem[]> {
+    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<StockItem[]>((resolve, reject) => {
+      resolve(stockData);
+    });
+  }
+
+  /** gets Microsoft stock OHLC prices from a .JSON file */
+  public static async getMicrosoftStock(): Promise<StockItem[]> {
+    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<StockItem[]>((resolve, reject) => {
+      resolve(stockData);
+    });
+  }
+
+  /** gets Google stock OHLC prices from a .JSON file */
+  public static async getGoogleStock(): Promise<StockItem[]> {
+    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<StockItem[]>((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
@@ -0,0 +1,59 @@
+<div class="container vertical">
+    <div class="legend-title">
+        Chart with Custom Drawing Annotations
+    </div>
+    <div class="legend">
+        <igx-legend id="legend" name="Legend" orientation="Horizontal"></igx-legend>
+    </div>
+    <div>
+        <igx-toolbar id="toolbar" name="Toolbar" (onCommand)="onToolbarCommandChanged($event.args)">
+            <igx-tool-action-label name="Draw" beforeId="ZoomReset" title="Draw Modes:"></igx-tool-action-label>
+            <igx-tool-action-label #drawRangeAreaToolAction name="DrawRangeAreaToolAction" beforeId="ZoomReset"
+                                   title="Range Area" commandId="DrawRangeArea">
+            </igx-tool-action-label>                    
+            <igx-tool-action-label #drawSlopeLineToolAction name="DrawSlopeLineToolAction" title="Slope Line"
+                                   beforeId="ZoomReset" commandId="DrawSlopeLine">
+            </igx-tool-action-label>
+            <igx-tool-action-label #drawHorizontalLineToolAction name="DrawHorizontalLineToolAction"
+                                   title="Horizontal Line" beforeId="ZoomReset" commandId="DrawHorizontalLine">
+            </igx-tool-action-label>
+        </igx-toolbar>
+    </div>
+
+    <igx-data-chart #chart height="100%" width="100%" name="Chart" defaultInteraction="None"
+                    isWindowSyncedToVisibleRange="true" isHorizontalZoomEnabled="true" isVerticalZoomEnabled="false"
+                    (plotAreaMouseOver)="onChartMouseOver($event.args)" (plotAreaMouseLeftButtonDown)="onChartMouseLeftButtonDown($event.args)"
+                    (plotAreaMouseLeftButtonUp)="onChartMouseLeftButtonUp($event.args)">
+
+        <igx-category-x-axis #xAxis name="xAxis" label="date" gap="0.25" useClusteringMode="true" [dataSource]="data"
+                             labelAngle="45" [formatLabel]="onFormatXAxisLabel">
+        </igx-category-x-axis>
+
+        <igx-numeric-y-axis #yAxis name="yAxis" labelExtent="70" labelHorizontalAlignment="Left"
+                            labelLocation="OutsideRight" title="Stock Price ($)">
+        </igx-numeric-y-axis>
+
+        <igx-financial-price-series id="financialSeries" [xAxis]="xAxis" [yAxis]="yAxis" [dataSource]="data"
+                                    displayType="Candlestick" highMemberPath="high" lowMemberPath="low" closeMemberPath="close"
+                                    openMemberPath="open" volumeMemberPath="volume" showDefaultTooltip="true" title="Stock Price">
+        </igx-financial-price-series>
+
+        <igx-range-area-series id="rangeAreaSeries" [xAxis]="xAxis" [yAxis]="yAxis" title="Range Area" [dataSource]="rangeAreaData"
+                               areaFillOpacity="0.25" lowMemberPath="low" highMemberPath="high" showDefaultTooltip="false"
+                               dashArray="5 5">
+        </igx-range-area-series>
+
+        <igx-line-series id="slopeLine" [xAxis]="xAxis" [yAxis]="yAxis" markerType="None" title="Slope Line" [dataSource]="slopeLineData"
+                         valueMemberPath="y" thickness="4" dashArray="5, 5">
+        </igx-line-series>
+
+        <igx-line-series id="horizontalLine" [xAxis]="xAxis" [yAxis]="yAxis" title="Horizontal Line" [dataSource]="horizontalLineData"
+                         markerType="None" valueMemberPath="y" thickness="4" brush="red" dashArray="5 5">
+        </igx-line-series>
+
+        <igx-final-value-layer axisAnnotationInterpolatedValuePrecision="0"></igx-final-value-layer>
+
+        <igx-data-tool-tip-layer valueFormatMaxFractions="1"></igx-data-tool-tip-layer>
+    </igx-data-chart>
+
+</div>
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
@@ -0,0 +1,3 @@
+/* styles are loaded the Shared CSS file located at:
+https://static.infragistics.com/xplatform/css/samples/
+*/
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"installDependencies":true,"startCommand":"turbo start","env":{"ENABLE_CJS_IMPORTS":true}}