+
+
+
+
-
-
+ -->
-
-
+ -->
-
-
+ -->
+
-
+ -->
+
+
+
+
+
diff --git a/samples/charts/data-chart/data-annotation-multiple-with-stocks/package.json b/samples/charts/data-chart/data-annotation-multiple-with-stocks/package.json
index 19455663a..d47d131ca 100644
--- a/samples/charts/data-chart/data-annotation-multiple-with-stocks/package.json
+++ b/samples/charts/data-chart/data-annotation-multiple-with-stocks/package.json
@@ -23,8 +23,8 @@
},
"dependencies": {
"babel-runtime": "^6.26.0",
- "igniteui-webcomponents-charts": "6.0.2-beta.0",
- "igniteui-webcomponents-core": "6.0.2-beta.0",
+ "igniteui-webcomponents-charts": "6.0.2-beta.4",
+ "igniteui-webcomponents-core": "6.0.2-beta.4",
"lit-html": "^3.3.1",
"tslib": "^2.8.1"
},
@@ -41,8 +41,11 @@
"babel-plugin-transform-custom-element-classes": "^0.1.0",
"css-loader": "^7.1.2",
"csv-loader": "^3.0.5",
+ "del": "^6.0.0",
"file-loader": "^6.2.0",
"fork-ts-checker-webpack-plugin": "^9.1.0",
+ "gulp": "^4.0.2",
+ "gulp-flatten": "^0.4.0",
"html-webpack-plugin": "^5.6.4",
"parcel-bundler": "^1.12.5",
"source-map": "^0.7.6",
diff --git a/samples/charts/data-chart/data-annotation-multiple-with-stocks/package.sample.txt b/samples/charts/data-chart/data-annotation-multiple-with-stocks/package.sample.txt
new file mode 100644
index 000000000..033b0b78b
--- /dev/null
+++ b/samples/charts/data-chart/data-annotation-multiple-with-stocks/package.sample.txt
@@ -0,0 +1,58 @@
+{
+ "name": "example-ignite-ui-web-components",
+ "description": "This project provides example of using Ignite UI for Web Components",
+ "author": "Infragistics",
+ "version": "1.0.0",
+ "license": "",
+ "private": true,
+ "homepage": ".",
+ "main": "src/index.ts",
+ "scripts": {
+ "build": "npm run build:prod",
+ "build:dev": "webpack --mode development --config ./webpack.config.js --progress --color --display-error-details",
+ "build:prod": "webpack --env.NODE_ENV=production --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
+ "serve:dev": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --mode development --config ./webpack.config.js --hot --progress --open",
+ "serve:prod": "webpack-dev-server --env.NODE_ENV=production --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+ "start": "npm run serve:dev",
+ "build:legacy": "npm run build:prod:legacy",
+ "build:dev:legacy": "webpack --env.legacy=true --mode development --config ./webpack.config.js --progress --color --display-error-details",
+ "build:prod:legacy": "webpack --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --progress --color --display-error-details --bail",
+ "serve:dev:legacy": "node --max-old-space-size=8192 node_modules/webpack-dev-server/bin/webpack-dev-server.js --env.legacy=true --mode development --config ./webpack.config.js --hot --progress --open",
+ "serve:prod:legacy": "webpack-dev-server --env.NODE_ENV=production --env.legacy=true --mode production --config ./webpack.config.js --port 3000 --host 0.0.0.0 --hot --progress --open --content-base dist/",
+ "start:legacy": "npm run serve:dev:legacy"
+ },
+ "dependencies": {
+ "babel-runtime": "^6.26.0",
+ "igniteui-webcomponents-charts": "6.0.2-beta.4",
+ "igniteui-webcomponents-core": "6.0.2-beta.4",
+ "lit-html": "^3.3.1",
+ "tslib": "^2.8.1"
+ },
+ "devDependencies": {
+ "@babel/cli": "^7.28.3",
+ "@babel/core": "^7.28.4",
+ "@babel/plugin-transform-class-properties": "^7.27.1",
+ "@babel/plugin-transform-class-static-block": "^7.28.3",
+ "@babel/plugin-transform-runtime": "^7.28.3",
+ "@babel/preset-env": "^7.28.3",
+ "@babel/preset-typescript": "^7.27.1",
+ "@types/source-map": "^0.5.7",
+ "babel-loader": "^10.0.0",
+ "babel-plugin-transform-custom-element-classes": "^0.1.0",
+ "css-loader": "^7.1.2",
+ "csv-loader": "^3.0.5",
+ "file-loader": "^6.2.0",
+ "fork-ts-checker-webpack-plugin": "^9.1.0",
+ "html-webpack-plugin": "^5.6.4",
+ "parcel-bundler": "^1.12.5",
+ "source-map": "^0.7.6",
+ "style-loader": "^4.0.0",
+ "tsconfig-paths-webpack-plugin": "^4.2.0",
+ "typescript": "^5.9.2",
+ "webpack": "^5.101.3",
+ "webpack-cli": "^6.0.1",
+ "webpack-dev-server": "^5.2.2",
+ "worker-loader": "^3.0.8",
+ "xml-loader": "^1.2.1"
+ }
+}
diff --git a/samples/charts/data-chart/data-annotation-multiple-with-stocks/src/index.ts b/samples/charts/data-chart/data-annotation-multiple-with-stocks/src/index.ts
index 506eb2f94..1154e7f0e 100644
--- a/samples/charts/data-chart/data-annotation-multiple-with-stocks/src/index.ts
+++ b/samples/charts/data-chart/data-annotation-multiple-with-stocks/src/index.ts
@@ -1,16 +1,71 @@
-import { IgcDataChartCoreModule, IgcDataChartCategoryModule, IgcDataChartCategoryCoreModule, IgcDataChartFinancialCoreModule, IgcDataChartFinancialModule, IgcDataChartFinancialOverlaysModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule, IgcDataAnnotationStripLayerModule, IgcDataAnnotationSliceLayerModule, IgcDataAnnotationLineLayerModule, IgcNumberAbbreviatorModule, IgcAnnotationLayerProxyModule } from 'igniteui-webcomponents-charts';
-import { IgcDataChartComponent, IgcCategoryXAxisComponent, IgcNumericYAxisComponent, IgcFinancialPriceSeriesComponent, IgcDataToolTipLayerComponent, IgcDataAnnotationStripLayerComponent, IgcDataAnnotationLineLayerComponent, IgcDataAnnotationSliceLayerComponent } from 'igniteui-webcomponents-charts';
+
+// samples
+import {
+ IgcDataChartCoreModule,
+ IgcDataChartCategoryModule,
+ IgcDataChartCategoryCoreModule,
+
+ IgcDataChartFinancialCoreModule,
+ IgcDataChartFinancialModule,
+ IgcDataChartFinancialOverlaysModule,
+
+ IgcDataChartInteractivityModule,
+ IgcDataChartAnnotationModule,
+ // IgcDataAnnotationStripLayerModule,
+ // IgcDataAnnotationSliceLayerModule,
+ // IgcDataAnnotationLineLayerModule,
+ IgcNumberAbbreviatorModule,
+ IgcDataLegendModule,
+ IgcDataLegendComponent,
+ IgcAnnotationLayerProxyModule
+} from 'igniteui-webcomponents-charts';
+import {
+ IgcDataChartComponent,
+ IgcCategoryXAxisComponent,
+ IgcNumericYAxisComponent,
+ IgcFinancialPriceSeriesComponent,
+ IgcDataToolTipLayerComponent,
+ // IgcDataAnnotationStripLayerComponent,
+ // IgcDataAnnotationLineLayerComponent,
+ // IgcDataAnnotationSliceLayerComponent
+} from 'igniteui-webcomponents-charts';
+
+// dev
+// import { IgcDataLegendModule } from 'igniteui-charts/igc-data-legend-module';
+// import { IgcDataLegendComponent } from 'igniteui-charts/igc-data-legend-component';
+
+// import { IgcDataChartCoreModule } from 'igniteui-charts/igc-data-chart-core-module';
+// import { IgcDataChartCategoryModule } from 'igniteui-charts/igc-data-chart-category-module';
+// import { IgcDataChartCategoryCoreModule } from 'igniteui-charts/igc-data-chart-category-core-module';
+// import { IgcDataChartFinancialCoreModule } from 'igniteui-charts/igc-data-chart-financial-core-module';
+// import { IgcDataChartFinancialModule } from 'igniteui-charts/igc-data-chart-financial-module';
+// import { IgcDataChartFinancialOverlaysModule } from 'igniteui-charts/igc-data-chart-financial-overlays-module';
+// import { IgcDataChartInteractivityModule } from 'igniteui-charts/igc-data-chart-interactivity-module';
+// import { IgcDataChartAnnotationModule } from 'igniteui-charts/igc-data-chart-annotation-module';
+// import { IgcNumberAbbreviatorModule } from 'igniteui-charts/igc-number-abbreviator-module';
+// import { IgcAnnotationLayerProxyModule } from 'igniteui-charts/igc-annotation-layer-proxy-module';
+// import { IgcDataToolTipLayerComponent } from 'igniteui-charts/igc-data-tool-tip-layer-component';
+// import { IgcFinancialPriceSeriesComponent } from 'igniteui-charts/igc-financial-price-series-component';
+// import { IgcCategoryXAxisComponent } from 'igniteui-charts/igc-category-x-axis-component';
+// import { IgcNumericYAxisComponent } from 'igniteui-charts/igc-numeric-y-axis-component';
+// import { IgcDataChartComponent } from 'igniteui-charts/igc-data-chart-component';
+// import { IgcDataLegendComponent } from 'igniteui-charts/igc-data-legend-component';
+// import { IgcDataLegendModule } from 'igniteui-charts/igc-data-legend-module';
+
+
+
+
import { StockTeslaItem, StockTesla } from './StockTesla';
-import { AnnotationStripDataItem, AnnotationStripData } from './AnnotationStripData';
-import { AnnotationLineData1Item, AnnotationLineData1 } from './AnnotationLineData1';
-import { AnnotationLineData2Item, AnnotationLineData2 } from './AnnotationLineData2';
-import { AnnotationSliceStockSplitDataItem, AnnotationSliceStockSplitData } from './AnnotationSliceStockSplitData';
-import { AnnotationSliceEarningsMissDataItem, AnnotationSliceEarningsMissData } from './AnnotationSliceEarningsMissData';
-import { AnnotationSliceEarningsBeatDataItem, AnnotationSliceEarningsBeatData } from './AnnotationSliceEarningsBeatData';
+// import { AnnotationStripDataItem, AnnotationStripData } from './AnnotationStripData';
+// import { AnnotationLineData1Item, AnnotationLineData1 } from './AnnotationLineData1';
+// import { AnnotationLineData2Item, AnnotationLineData2 } from './AnnotationLineData2';
+// import { AnnotationSliceStockSplitDataItem, AnnotationSliceStockSplitData } from './AnnotationSliceStockSplitData';
+// import { AnnotationSliceEarningsMissDataItem, AnnotationSliceEarningsMissData } from './AnnotationSliceEarningsMissData';
+// import { AnnotationSliceEarningsBeatDataItem, AnnotationSliceEarningsBeatData } from './AnnotationSliceEarningsBeatData';
import { ModuleManager } from 'igniteui-webcomponents-core';
-import "./index.css";
+// import "./index.css";
ModuleManager.register(
IgcDataChartCoreModule,
@@ -21,9 +76,10 @@ ModuleManager.register(
IgcDataChartFinancialOverlaysModule,
IgcDataChartInteractivityModule,
IgcDataChartAnnotationModule,
- IgcDataAnnotationStripLayerModule,
- IgcDataAnnotationSliceLayerModule,
- IgcDataAnnotationLineLayerModule,
+ IgcDataLegendModule,
+ // IgcDataAnnotationStripLayerModule,
+ // IgcDataAnnotationSliceLayerModule,
+ // IgcDataAnnotationLineLayerModule,
IgcNumberAbbreviatorModule,
IgcAnnotationLayerProxyModule
);
@@ -31,56 +87,64 @@ ModuleManager.register(
export class Sample {
private chart: IgcDataChartComponent
- private xAxisBottom: IgcCategoryXAxisComponent
+ // private xAxisBottom: IgcCategoryXAxisComponent
private xAxis: IgcCategoryXAxisComponent
- private xAxisTop: IgcCategoryXAxisComponent
+ // private xAxisTop: IgcCategoryXAxisComponent
private yAxisLeft: IgcNumericYAxisComponent
- private yAxisRight: IgcNumericYAxisComponent
+ // private yAxisRight: IgcNumericYAxisComponent
private series1: IgcFinancialPriceSeriesComponent
- private tooltip: IgcDataToolTipLayerComponent
- private stripLayer: IgcDataAnnotationStripLayerComponent
- private lineLayer52WeekRange: IgcDataAnnotationLineLayerComponent
- private lineLayerGrowthAndDecline: IgcDataAnnotationLineLayerComponent
- private sliceLayerStockSplit: IgcDataAnnotationSliceLayerComponent
- private sliceLayerEarningsMissAnnotations: IgcDataAnnotationSliceLayerComponent
- private sliceLayerEarningsBeatAnnotations: IgcDataAnnotationSliceLayerComponent
+ private series2: IgcFinancialPriceSeriesComponent
+ // private tooltip: IgcDataToolTipLayerComponent
+ // private stripLayer: IgcDataAnnotationStripLayerComponent
+ // private lineLayer52WeekRange: IgcDataAnnotationLineLayerComponent
+ // private lineLayerGrowthAndDecline: IgcDataAnnotationLineLayerComponent
+ // private sliceLayerStockSplit: IgcDataAnnotationSliceLayerComponent
+ // private sliceLayerEarningsMissAnnotations: IgcDataAnnotationSliceLayerComponent
+ // private sliceLayerEarningsBeatAnnotations: IgcDataAnnotationSliceLayerComponent
private _bind: () => void;
constructor() {
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
- var xAxisBottom = this.xAxisBottom = document.getElementById('xAxisBottom') as IgcCategoryXAxisComponent;
+ // var xAxisBottom = this.xAxisBottom = document.getElementById('xAxisBottom') as IgcCategoryXAxisComponent;
var xAxis = this.xAxis = document.getElementById('xAxis') as IgcCategoryXAxisComponent;
- var xAxisTop = this.xAxisTop = document.getElementById('xAxisTop') as IgcCategoryXAxisComponent;
+ // var xAxisTop = this.xAxisTop = document.getElementById('xAxisTop') as IgcCategoryXAxisComponent;
var yAxisLeft = this.yAxisLeft = document.getElementById('yAxisLeft') as IgcNumericYAxisComponent;
- var yAxisRight = this.yAxisRight = document.getElementById('yAxisRight') as IgcNumericYAxisComponent;
+ // var yAxisRight = this.yAxisRight = document.getElementById('yAxisRight') as IgcNumericYAxisComponent;
var series1 = this.series1 = document.getElementById('series1') as IgcFinancialPriceSeriesComponent;
- var tooltip = this.tooltip = document.getElementById('Tooltip') as IgcDataToolTipLayerComponent;
- var stripLayer = this.stripLayer = document.getElementById('StripLayer') as IgcDataAnnotationStripLayerComponent;
- var lineLayer52WeekRange = this.lineLayer52WeekRange = document.getElementById('LineLayer52WeekRange') as IgcDataAnnotationLineLayerComponent;
- var lineLayerGrowthAndDecline = this.lineLayerGrowthAndDecline = document.getElementById('LineLayerGrowthAndDecline') as IgcDataAnnotationLineLayerComponent;
- var sliceLayerStockSplit = this.sliceLayerStockSplit = document.getElementById('SliceLayerStockSplit') as IgcDataAnnotationSliceLayerComponent;
- var sliceLayerEarningsMissAnnotations = this.sliceLayerEarningsMissAnnotations = document.getElementById('SliceLayerEarningsMissAnnotations') as IgcDataAnnotationSliceLayerComponent;
- var sliceLayerEarningsBeatAnnotations = this.sliceLayerEarningsBeatAnnotations = document.getElementById('SliceLayerEarningsBeatAnnotations') as IgcDataAnnotationSliceLayerComponent;
-
+ var series2 = this.series2 = document.getElementById('series2') as IgcFinancialPriceSeriesComponent;
+ // var tooltip = this.tooltip = document.getElementById('Tooltip') as IgcDataToolTipLayerComponent;
+ // var stripLayer = this.stripLayer = document.getElementById('StripLayer') as IgcDataAnnotationStripLayerComponent;
+ // var lineLayer52WeekRange = this.lineLayer52WeekRange = document.getElementById('LineLayer52WeekRange') as IgcDataAnnotationLineLayerComponent;
+ // var lineLayerGrowthAndDecline = this.lineLayerGrowthAndDecline = document.getElementById('LineLayerGrowthAndDecline') as IgcDataAnnotationLineLayerComponent;
+ // var sliceLayerStockSplit = this.sliceLayerStockSplit = document.getElementById('SliceLayerStockSplit') as IgcDataAnnotationSliceLayerComponent;
+ // var sliceLayerEarningsMissAnnotations = this.sliceLayerEarningsMissAnnotations = document.getElementById('SliceLayerEarningsMissAnnotations') as IgcDataAnnotationSliceLayerComponent;
+ // var sliceLayerEarningsBeatAnnotations = this.sliceLayerEarningsBeatAnnotations = document.getElementById('SliceLayerEarningsBeatAnnotations') as IgcDataAnnotationSliceLayerComponent;
+
+let legend = document.getElementById("legend") as IgcDataLegendComponent;
this._bind = () => {
- xAxisBottom.dataSource = this.stockTesla;
+legend.target = chart;
+ // xAxisBottom.dataSource = this.stockTesla;
xAxis.dataSource = this.stockTesla;
- xAxisTop.dataSource = this.stockTesla;
+ // xAxisTop.dataSource = this.stockTesla;
series1.xAxis = this.xAxis;
series1.yAxis = this.yAxisLeft;
series1.dataSource = this.stockTesla;
- stripLayer.dataSource = this.annotationStripData;
- stripLayer.targetAxis = this.xAxisTop;
- lineLayer52WeekRange.dataSource = this.annotationLineData1;
- lineLayer52WeekRange.targetAxis = this.yAxisRight;
- lineLayerGrowthAndDecline.dataSource = this.annotationLineData2;
- lineLayerGrowthAndDecline.targetAxis = this.xAxis;
- sliceLayerStockSplit.dataSource = this.annotationSliceStockSplitData;
- sliceLayerStockSplit.targetAxis = this.xAxisBottom;
- sliceLayerEarningsMissAnnotations.dataSource = this.annotationSliceEarningsMissData;
- sliceLayerEarningsMissAnnotations.targetAxis = this.xAxisBottom;
- sliceLayerEarningsBeatAnnotations.dataSource = this.annotationSliceEarningsBeatData;
- sliceLayerEarningsBeatAnnotations.targetAxis = this.xAxisBottom;
+
+ // series2.xAxis = this.xAxis;
+ // series2.yAxis = this.yAxisLeft;
+ // series2.dataSource = this.stockTesla;
+ // stripLayer.dataSource = this.annotationStripData;
+ // stripLayer.targetAxis = this.xAxisTop;
+ // lineLayer52WeekRange.dataSource = this.annotationLineData1;
+ // lineLayer52WeekRange.targetAxis = this.yAxisRight;
+ // lineLayerGrowthAndDecline.dataSource = this.annotationLineData2;
+ // lineLayerGrowthAndDecline.targetAxis = this.xAxis;
+ // sliceLayerStockSplit.dataSource = this.annotationSliceStockSplitData;
+ // sliceLayerStockSplit.targetAxis = this.xAxisBottom;
+ // sliceLayerEarningsMissAnnotations.dataSource = this.annotationSliceEarningsMissData;
+ // sliceLayerEarningsMissAnnotations.targetAxis = this.xAxisBottom;
+ // sliceLayerEarningsBeatAnnotations.dataSource = this.annotationSliceEarningsBeatData;
+ // sliceLayerEarningsBeatAnnotations.targetAxis = this.xAxisBottom;
}
this._bind();
@@ -95,59 +159,59 @@ export class Sample {
return this._stockTesla;
}
- private _annotationStripData: AnnotationStripData = null;
- public get annotationStripData(): AnnotationStripData {
- if (this._annotationStripData == null)
- {
- this._annotationStripData = new AnnotationStripData();
- }
- return this._annotationStripData;
- }
-
- private _annotationLineData1: AnnotationLineData1 = null;
- public get annotationLineData1(): AnnotationLineData1 {
- if (this._annotationLineData1 == null)
- {
- this._annotationLineData1 = new AnnotationLineData1();
- }
- return this._annotationLineData1;
- }
-
- private _annotationLineData2: AnnotationLineData2 = null;
- public get annotationLineData2(): AnnotationLineData2 {
- if (this._annotationLineData2 == null)
- {
- this._annotationLineData2 = new AnnotationLineData2();
- }
- return this._annotationLineData2;
- }
-
- private _annotationSliceStockSplitData: AnnotationSliceStockSplitData = null;
- public get annotationSliceStockSplitData(): AnnotationSliceStockSplitData {
- if (this._annotationSliceStockSplitData == null)
- {
- this._annotationSliceStockSplitData = new AnnotationSliceStockSplitData();
- }
- return this._annotationSliceStockSplitData;
- }
-
- private _annotationSliceEarningsMissData: AnnotationSliceEarningsMissData = null;
- public get annotationSliceEarningsMissData(): AnnotationSliceEarningsMissData {
- if (this._annotationSliceEarningsMissData == null)
- {
- this._annotationSliceEarningsMissData = new AnnotationSliceEarningsMissData();
- }
- return this._annotationSliceEarningsMissData;
- }
-
- private _annotationSliceEarningsBeatData: AnnotationSliceEarningsBeatData = null;
- public get annotationSliceEarningsBeatData(): AnnotationSliceEarningsBeatData {
- if (this._annotationSliceEarningsBeatData == null)
- {
- this._annotationSliceEarningsBeatData = new AnnotationSliceEarningsBeatData();
- }
- return this._annotationSliceEarningsBeatData;
- }
+ // private _annotationStripData: AnnotationStripData = null;
+ // public get annotationStripData(): AnnotationStripData {
+ // if (this._annotationStripData == null)
+ // {
+ // this._annotationStripData = new AnnotationStripData();
+ // }
+ // return this._annotationStripData;
+ // }
+
+ // private _annotationLineData1: AnnotationLineData1 = null;
+ // public get annotationLineData1(): AnnotationLineData1 {
+ // if (this._annotationLineData1 == null)
+ // {
+ // this._annotationLineData1 = new AnnotationLineData1();
+ // }
+ // return this._annotationLineData1;
+ // }
+
+ // private _annotationLineData2: AnnotationLineData2 = null;
+ // public get annotationLineData2(): AnnotationLineData2 {
+ // if (this._annotationLineData2 == null)
+ // {
+ // this._annotationLineData2 = new AnnotationLineData2();
+ // }
+ // return this._annotationLineData2;
+ // }
+
+ // private _annotationSliceStockSplitData: AnnotationSliceStockSplitData = null;
+ // public get annotationSliceStockSplitData(): AnnotationSliceStockSplitData {
+ // if (this._annotationSliceStockSplitData == null)
+ // {
+ // this._annotationSliceStockSplitData = new AnnotationSliceStockSplitData();
+ // }
+ // return this._annotationSliceStockSplitData;
+ // }
+
+ // private _annotationSliceEarningsMissData: AnnotationSliceEarningsMissData = null;
+ // public get annotationSliceEarningsMissData(): AnnotationSliceEarningsMissData {
+ // if (this._annotationSliceEarningsMissData == null)
+ // {
+ // this._annotationSliceEarningsMissData = new AnnotationSliceEarningsMissData();
+ // }
+ // return this._annotationSliceEarningsMissData;
+ // }
+
+ // private _annotationSliceEarningsBeatData: AnnotationSliceEarningsBeatData = null;
+ // public get annotationSliceEarningsBeatData(): AnnotationSliceEarningsBeatData {
+ // if (this._annotationSliceEarningsBeatData == null)
+ // {
+ // this._annotationSliceEarningsBeatData = new AnnotationSliceEarningsBeatData();
+ // }
+ // return this._annotationSliceEarningsBeatData;
+ // }
}
diff --git a/samples/charts/data-chart/data-annotation-multiple-with-stocks/tsconfig.json b/samples/charts/data-chart/data-annotation-multiple-with-stocks/tsconfig.json
index e7c370def..e92bb76b2 100644
--- a/samples/charts/data-chart/data-annotation-multiple-with-stocks/tsconfig.json
+++ b/samples/charts/data-chart/data-annotation-multiple-with-stocks/tsconfig.json
@@ -1,35 +1,32 @@
{
"compilerOptions": {
- "noImplicitReturns": true,
- "esModuleInterop": true,
- "resolveJsonModule": true,
- "noImplicitAny": true,
- "declarationDir": "dist/types",
- "moduleResolution": "node",
- "declaration": true,
- "target": "es2015",
- "module": "es2015",
- "strict": true,
+ "sourceMap": true,
+ "downlevelIteration": true,
+ "preserveConstEnums": false,
+ "noImplicitThis": false,
+ "noUnusedLocals": false,
+
+ "noImplicitReturns": true,
+ "esModuleInterop": true,
+ "resolveJsonModule": true,
+
+ "noImplicitAny": false,
+ "declarationDir": "dist/types",
+ "moduleResolution": "node",
+ "declaration": true,
+ "target": "es2015",
+ "module": "es2015",
+
+
"strictNullChecks": false,
"baseUrl": ".",
"paths": {
- "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
- "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
- "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
- "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
- "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
- "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
- "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
- "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
- "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
- "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
- "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
- "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
- "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
- "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
- "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ],
- "igniteui-webcomponents-dashboards": [ "node_modules/igniteui-webcomponents-dashboards", "node_modules/@infragistics/igniteui-webcomponents-dashboards" ]
- }
+ "igniteui-core/*": ["src/ig/igniteui-core/*"],
+ "igniteui-charts/*": ["src/ig/igniteui-charts/*"],
+ "igniteui-gauges/*": ["src/ig/igniteui-gauges/*"],
+ "igniteui-maps/*": ["src/ig/igniteui-maps/*"],
+ "igniteui-layouts/*": ["src/ig/igniteui-layouts/*"]
+ }
},
"include": [
"src/**/*"
diff --git a/samples/charts/data-chart/data-annotation-multiple-with-stocks/tsconfig.sample.txt b/samples/charts/data-chart/data-annotation-multiple-with-stocks/tsconfig.sample.txt
new file mode 100644
index 000000000..ffe4e5d5d
--- /dev/null
+++ b/samples/charts/data-chart/data-annotation-multiple-with-stocks/tsconfig.sample.txt
@@ -0,0 +1,45 @@
+{
+ "compilerOptions": {
+
+ "noImplicitReturns": true,
+ "esModuleInterop": true,
+ "resolveJsonModule": true,
+
+ "noImplicitAny": true,
+ "declarationDir": "dist/types",
+ "moduleResolution": "node",
+ "declaration": true,
+ "target": "es2015",
+ "module": "es2015",
+
+ "strict": true,
+
+ "strictNullChecks": false,
+ "baseUrl": ".",
+ "paths": {
+ "igniteui-webcomponents-core": [ "node_modules/igniteui-webcomponents-core", "node_modules/@infragistics/igniteui-webcomponents-core" ],
+ "igniteui-webcomponents-charts": [ "node_modules/igniteui-webcomponents-charts", "node_modules/@infragistics/igniteui-webcomponents-charts" ],
+ "igniteui-webcomponents-gauges": [ "node_modules/igniteui-webcomponents-gauges", "node_modules/@infragistics/igniteui-webcomponents-gauges" ],
+ "igniteui-webcomponents-datasources": [ "node_modules/igniteui-webcomponents-datasources", "node_modules/@infragistics/igniteui-webcomponents-datasources" ],
+ "igniteui-webcomponents-excel": [ "node_modules/igniteui-webcomponents-excel", "node_modules/@infragistics/igniteui-webcomponents-excel" ],
+ "igniteui-webcomponents-inputs": [ "node_modules/igniteui-webcomponents-inputs", "node_modules/@infragistics/igniteui-webcomponents-inputs" ],
+ "igniteui-webcomponents-grids": [ "node_modules/igniteui-webcomponents-grids", "node_modules/@infragistics/igniteui-webcomponents-grids" ],
+ "igniteui-webcomponents-maps": [ "node_modules/igniteui-webcomponents-maps", "node_modules/@infragistics/igniteui-webcomponents-maps" ],
+ "igniteui-webcomponents-spreadsheet": [ "node_modules/igniteui-webcomponents-spreadsheet", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet" ],
+ "igniteui-webcomponents-spreadsheet-chart-adapter": [ "node_modules/igniteui-webcomponents-spreadsheet-chart-adapter", "node_modules/@infragistics/igniteui-webcomponents-spreadsheet-chart-adapter" ],
+ "igniteui-webcomponents-grids/*": [ "node_modules/igniteui-webcomponents-grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/*" ],
+ "igniteui-webcomponents-grids/grids": [ "node_modules/igniteui-webcomponents-grids/grids", "node_modules/@infragistics/igniteui-webcomponents-grids/grids" ],
+ "igniteui-webcomponents-grids/grids/*": [ "node_modules/igniteui-webcomponents-grids/grids/*", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/*" ],
+ "igniteui-webcomponents-grids/grids/combined": [ "node_modules/igniteui-webcomponents-grids/grids/combined", "node_modules/@infragistics/igniteui-webcomponents-grids/grids/combined" ],
+ "igniteui-webcomponents-layouts": [ "node_modules/igniteui-webcomponents-layouts", "node_modules/@infragistics/igniteui-webcomponents-layouts" ],
+ "igniteui-webcomponents-dashboards": [ "node_modules/igniteui-webcomponents-dashboards", "node_modules/@infragistics/igniteui-webcomponents-dashboards" ]
+ }
+ },
+ "include": [
+ "src/**/*"
+ ],
+ "exclude": [
+ "node_modules",
+ "dist"
+ ]
+}
\ No newline at end of file
+ 
+
+
+ 
+
+
+ 
+
+
+
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
+## Instructions
+
+To set up this project locally, execute these commands:
+
+```
+git clone https://github.com/IgniteUI/igniteui-wc-examples.git
+git checkout master
+cd ./igniteui-wc-examples
+cd ./samples/charts/data-chart/data-annotation-multiple-with-stocks
+```
+
+open above folder in VS Code or type:
+```
+code .
+```
+
+In terminal window, run:
+
+```
+npm install
+npm run start
+```
+
+Then open http://localhost:4200/ in your browser
+
+
+## Learn More
+
+To learn more about **Ignite UI for Web Components**, check out the [Web Components documentation](https://infragistics.com/webcomponentssite/components/general-getting-started.html).
diff --git a/samples/charts/data-chart/_bug-data-legend-layout-dev/gulpfile.js b/samples/charts/data-chart/_bug-data-legend-layout-dev/gulpfile.js
new file mode 100644
index 000000000..57397e7fa
--- /dev/null
+++ b/samples/charts/data-chart/_bug-data-legend-layout-dev/gulpfile.js
@@ -0,0 +1,68 @@
+var gulp = require('gulp');
+var del = require('del');
+var flatten = require('gulp-flatten');
+var fileRoot = 'C:/work/dev-tools/XPlatform/Main/'
+var platformStatic = "WCCore";
+var platformFolder = "WebComponents";
+function clean(cb) {
+ del.sync("src/ig/**/*.*");
+ del.sync("src/ig");
+ cb();
+}
+function copyStatic() {
+ return gulp.src([
+ fileRoot + 'Source/TSCore/*.ts',
+ fileRoot + `Source/${platformStatic}/*.ts`,
+ fileRoot + 'Source/TSCore/*.tsx',
+ fileRoot + `Source/${platformStatic}/*.tsx`
+ ])
+ .pipe(gulp.dest("src/ig/igniteui-core"))
+}
+function copy() {
+ return gulp.src([
+ fileRoot + 'Source/Translator/bin/build/TS/**/*.ts',
+ fileRoot + `Source/Translator/bin/build/${platformFolder}/**/*.ts`,
+ fileRoot + 'Source/*.JS/**/bin/**/TS/**/*.ts',
+ fileRoot + `Source/*.JS/**/bin/**/${platformFolder}/**/*.ts`,
+
+ // "!" + fileRoot + 'Source/Gauges.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/Dashboards.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/GeographicMap.JS/**/bin/**/*.*',
+
+ "!" + fileRoot + 'Source/Barcode.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/CheckboxList.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/DataAdapters.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/DockManager.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/Documents.Core.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/Excel.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/Encoding.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/Gantt.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/Grid.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/Inputs.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/Layouts.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/PropertyEditor.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/Spreadsheet.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/Spreadsheet.ChartAdapter.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/Schedule.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/RadialMenu.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/WebInputs.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/Toolbar.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/Treemap.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/Undo.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/WebGrids.JS/**/bin/**/*.*',
+ "!" + fileRoot + 'Source/WCBuild/**/',
+ "!" + fileRoot + 'Source/NGBuild/**/',
+ "!" + fileRoot + 'Source/RBuild/**/',
+ "!" + fileRoot + 'Source/RevealBundler/**/',
+ "!" + fileRoot + 'Source/**/igniteui-testframework/**/*.*',
+ "!" + fileRoot + 'Source/**/public_api.*.*',
+ ])
+ .pipe(flatten({ includeParents: -1 }))
+ .pipe(gulp.dest("src/ig"))
+}
+exports.default = gulp.series(
+ clean,
+ gulp.parallel(
+ copyStatic,
+ copy)
+);
\ No newline at end of file
diff --git a/samples/charts/data-chart/_bug-data-legend-layout-dev/index.html b/samples/charts/data-chart/_bug-data-legend-layout-dev/index.html
new file mode 100644
index 000000000..4dfb50da4
--- /dev/null
+++ b/samples/charts/data-chart/_bug-data-legend-layout-dev/index.html
@@ -0,0 +1,231 @@
+
+
+
+