diff --git a/samples/charts/dashboard-tile/financial-dashboard/.eslintrc.js b/samples/charts/dashboard-tile/financial-dashboard/.eslintrc.js
new file mode 100644
index 0000000000..7168b71441
--- /dev/null
+++ b/samples/charts/dashboard-tile/financial-dashboard/.eslintrc.js
@@ -0,0 +1,78 @@
+// https://www.robertcooper.me/using-eslint-and-prettier-in-a-typescript-project
+module.exports = {
+    parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+    parserOptions: {
+        ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+        sourceType: "module", // Allows for the use of imports
+        ecmaFeatures: {
+            jsx: true // Allows for the parsing of JSX
+        }
+    },
+    settings: {
+        react: {
+            version: "999.999.999" // Tells eslint-plugin-react to automatically detect the version of React to use
+        }
+    },
+    extends: [
+        "eslint:recommended",
+        "plugin:react/recommended", // Uses the recommended rules from @eslint-plugin-react
+        "plugin:@typescript-eslint/recommended" // Uses the recommended rules from @typescript-eslint/eslint-plugin
+    ],
+    rules: {
+      // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+      "default-case": "off",
+      "jsx-a11y/alt-text": "off",
+      "jsx-a11y/iframe-has-title": "off",
+      "no-undef": "off",
+      "no-unused-vars": "off",
+      "no-extend-native": "off",
+      "no-throw-literal": "off",
+      "no-useless-concat": "off",
+      "no-mixed-operators": "off",
+      "no-prototype-builtins": "off",
+      "no-mixed-spaces-and-tabs": 0,
+      "prefer-const": "off",
+      "prefer-rest-params": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-inferrable-types": "off",
+      "@typescript-eslint/no-useless-constructor": "off",
+      "@typescript-eslint/no-use-before-define": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/interface-name-prefix": "off",
+      "@typescript-eslint/prefer-namespace-keyword": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off"
+    },
+    "overrides": [
+      {
+        "files": ["*.ts", "*.tsx"],
+        "rules": {
+            "default-case": "off",
+            "jsx-a11y/alt-text": "off",
+            "jsx-a11y/iframe-has-title": "off",
+            "no-var": "off",
+            "no-undef": "off",
+            "no-unused-vars": "off",
+            "no-extend-native": "off",
+            "no-throw-literal": "off",
+            "no-useless-concat": "off",
+            "no-mixed-operators": "off",
+	    "no-mixed-spaces-and-tabs": 0,
+            "no-prototype-builtins": "off",
+            "prefer-const": "off",
+            "prefer-rest-params": "off",
+            "@typescript-eslint/no-unused-vars": "off",
+            "@typescript-eslint/no-explicit-any": "off",
+            "@typescript-eslint/no-inferrable-types": "off",
+            "@typescript-eslint/no-useless-constructor": "off",
+            "@typescript-eslint/no-use-before-define": "off",
+            "@typescript-eslint/no-non-null-assertion": "off",
+            "@typescript-eslint/interface-name-prefix": "off",
+            "@typescript-eslint/prefer-namespace-keyword": "off",
+            "@typescript-eslint/explicit-function-return-type": "off",
+            "@typescript-eslint/explicit-module-boundary-types": "off"
+        }
+      }
+    ]
+  };
\ No newline at end of file
diff --git a/samples/charts/dashboard-tile/financial-dashboard/package.json b/samples/charts/dashboard-tile/financial-dashboard/package.json
new file mode 100644
index 0000000000..2f5c0e6f4e
--- /dev/null
+++ b/samples/charts/dashboard-tile/financial-dashboard/package.json
@@ -0,0 +1,52 @@
+{
+  "name": "example-ignite-ui-react",
+  "description": "This project provides example of using Ignite UI for React components",
+  "author": "Infragistics",
+  "version": "1.4.0",
+  "license": "",
+  "homepage": ".",
+  "private": true,
+  "scripts": {
+    "start": "set PORT=4200 && react-scripts --max_old_space_size=10240 start",
+    "build": "react-scripts --max_old_space_size=10240 build ",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "lint": "eslint ./src/**/*.{ts,tsx}"
+  },
+  "dependencies": {
+    "igniteui-react": "18.7.4",
+    "igniteui-react-charts": "18.7.5-beta.1",
+    "igniteui-react-core": "18.7.5-beta.1",
+    "igniteui-react-dashboards": "18.7.5-beta.1",
+    "igniteui-react-datasources": "18.7.5-beta.1",
+    "igniteui-react-gauges": "18.7.5-beta.1",
+    "igniteui-react-grids": "18.7.5-beta.1",
+    "igniteui-react-inputs": "18.7.5-beta.1",
+    "igniteui-react-layouts": "18.7.5-beta.1",
+    "igniteui-react-maps": "18.7.5-beta.1",
+    "igniteui-webcomponents": "5.1.2",
+    "lit-html": "^3.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "tslib": "^2.4.0"
+  },
+  "devDependencies": {
+    "@types/jest": "^29.2.0",
+    "@types/node": "^18.11.7",
+    "@types/react": "^18.0.24",
+    "@types/react-dom": "^18.0.8",
+    "eslint": "^8.33.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-plugin-react": "^7.20.0",
+    "react-app-rewired": "^2.2.1",
+    "typescript": "^4.8.4",
+    "worker-loader": "^3.0.8"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/samples/charts/dashboard-tile/financial-dashboard/public/index.html b/samples/charts/dashboard-tile/financial-dashboard/public/index.html
new file mode 100644
index 0000000000..e2d3265576
--- /dev/null
+++ b/samples/charts/dashboard-tile/financial-dashboard/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Sample | Ignite UI | React | infragistics</title>
+    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/react.png" >
+    <link rel="stylesheet"    href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/samples/charts/dashboard-tile/financial-dashboard/sandbox.config.json b/samples/charts/dashboard-tile/financial-dashboard/sandbox.config.json
new file mode 100644
index 0000000000..07f53508eb
--- /dev/null
+++ b/samples/charts/dashboard-tile/financial-dashboard/sandbox.config.json
@@ -0,0 +1,5 @@
+{
+    "infiniteLoopProtection": false,
+    "hardReloadOnChange": false,
+    "view": "browser"
+}
\ No newline at end of file
diff --git a/samples/charts/dashboard-tile/financial-dashboard/src/MultipleStocks.ts b/samples/charts/dashboard-tile/financial-dashboard/src/MultipleStocks.ts
new file mode 100644
index 0000000000..3688676b43
--- /dev/null
+++ b/samples/charts/dashboard-tile/financial-dashboard/src/MultipleStocks.ts
@@ -0,0 +1,107 @@
+//begin async data
+export class MultipleStocks extends Array<Array<StockItem>> {
+    public static async fetch(): Promise<MultipleStocks> {
+        const dataSources: any[] = [
+          //await this.getAmazonStock(),
+          await this.getGoogleStock(),
+          await this.getAmazonStock(),
+          //await this.getTeslaStock()
+        ];
+        return new Promise<MultipleStocks>((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;
+
+  }
+//end async data
\ No newline at end of file
diff --git a/samples/charts/dashboard-tile/financial-dashboard/src/index.css b/samples/charts/dashboard-tile/financial-dashboard/src/index.css
new file mode 100644
index 0000000000..98682b8543
--- /dev/null
+++ b/samples/charts/dashboard-tile/financial-dashboard/src/index.css
@@ -0,0 +1,2 @@
+/* shared styles are loaded from: */
+/* https://static.infragistics.com/xplatform/css/samples */
diff --git a/samples/charts/dashboard-tile/financial-dashboard/src/index.tsx b/samples/charts/dashboard-tile/financial-dashboard/src/index.tsx
new file mode 100644
index 0000000000..3c4096863a
--- /dev/null
+++ b/samples/charts/dashboard-tile/financial-dashboard/src/index.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+
+import { IgrDashboardTileModule, IgrDataChartDashboardTileModule, IgrGeographicMapDashboardTileModule, IgrLinearGaugeDashboardTileModule, IgrPieChartDashboardTileModule, IgrRadialGaugeDashboardTileModule } from 'igniteui-react-dashboards';
+import { IgrDashboardTile } from 'igniteui-react-dashboards';
+import { MultipleStocks } from './MultipleStocks';
+
+const mods: any[] = [
+    IgrDashboardTileModule,
+    IgrDataChartDashboardTileModule,
+    IgrGeographicMapDashboardTileModule,
+    IgrLinearGaugeDashboardTileModule,
+    IgrPieChartDashboardTileModule,
+    IgrRadialGaugeDashboardTileModule
+];
+mods.forEach((m) => m.register());
+
+export default class Sample extends React.Component<any, any> {
+    private dashboard: IgrDashboardTile
+    private dashboardRef(r: IgrDashboardTile) {
+        this.dashboard = r;
+        this.setState({});
+    }
+
+    constructor(props: any) {
+        super(props);
+
+        this.dashboardRef = this.dashboardRef.bind(this);
+    }
+
+    public render(): JSX.Element {
+        return (
+        <div className="container sample">
+
+            <div className="container fill">
+                <IgrDashboardTile
+                    ref={this.dashboardRef}
+                    dataSource={this.multipleStocks}>
+                </IgrDashboardTile>
+            </div>
+        </div>
+        );
+    }
+
+    private _multipleStocks: MultipleStocks = null;
+    private _isFetching: boolean = false;
+    public get multipleStocks(): MultipleStocks {
+        if (this._multipleStocks == null && !this._isFetching)
+        {
+            this._isFetching = true;
+            ( async () => { this._multipleStocks = await (await MultipleStocks.fetch()); this.setState({});  })();
+        }
+        return this._multipleStocks;
+    }
+
+}
+
+// rendering above component in the React DOM
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Sample/>);
\ No newline at end of file
diff --git a/samples/charts/dashboard-tile/financial-dashboard/src/react-app-env.d.ts b/samples/charts/dashboard-tile/financial-dashboard/src/react-app-env.d.ts
new file mode 100644
index 0000000000..6431bc5fc6
--- /dev/null
+++ b/samples/charts/dashboard-tile/financial-dashboard/src/react-app-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="react-scripts" />
diff --git a/samples/charts/dashboard-tile/financial-dashboard/tsconfig.json b/samples/charts/dashboard-tile/financial-dashboard/tsconfig.json
new file mode 100644
index 0000000000..42c6ace1da
--- /dev/null
+++ b/samples/charts/dashboard-tile/financial-dashboard/tsconfig.json
@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "baseUrl": ".",
+    "outDir": "build/dist",
+    "module": "esnext",
+    "target": "es5",
+    "lib": [
+      "es6",
+      "dom"
+    ],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "moduleResolution": "node",
+    "rootDir": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "noUnusedLocals": false,
+    "importHelpers": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "allowSyntheticDefaultImports": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "isolatedModules": true,
+    "noEmit": true
+  },
+  "exclude": [
+    "node_modules",
+    "build",
+    "scripts",
+    "acceptance-tests",
+    "webpack",
+    "jest",
+    "src/setupTests.ts",
+    "**/odatajs-4.0.0.js",
+    "config-overrides.js"
+  ],
+  "include": [
+    "src"
+  ]
+}
diff --git a/samples/charts/toolbar/color-editor-support/src/index.tsx b/samples/charts/toolbar/color-editor-support/src/index.tsx
index fefd379365..59bad996b5 100644
--- a/samples/charts/toolbar/color-editor-support/src/index.tsx
+++ b/samples/charts/toolbar/color-editor-support/src/index.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 
-import { IgrXIconModule } from 'igniteui-react-inputs';
 import { IgrToolbarModule, IgrToolActionComboModule, IgrToolActionColorEditorModule } from 'igniteui-react-layouts';
 import { IgrDataChartToolbarModule, IgrDataLegendModule, IgrNumberAbbreviatorModule, IgrDataChartCategoryModule, IgrDataChartCoreModule, IgrDataChartAnnotationModule, IgrDataChartInteractivityModule } from 'igniteui-react-charts';
 import { IgrToolbar, IgrToolActionColorEditor } from 'igniteui-react-layouts';
@@ -12,7 +11,6 @@ import { IgrToolCommandEventArgs } from 'igniteui-react-layouts';
 import { IgrSeries } from 'igniteui-react-charts';
 
 const mods: any[] = [
-    IgrXIconModule,
     IgrToolbarModule,
     IgrToolActionComboModule,
     IgrToolActionColorEditorModule,
diff --git a/samples/grids/pivot-grid/features/src/index.tsx b/samples/grids/pivot-grid/features/src/index.tsx
index 5c59f9d0c4..8da3538fc5 100644
--- a/samples/grids/pivot-grid/features/src/index.tsx
+++ b/samples/grids/pivot-grid/features/src/index.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 
 import { IgrPivotGridModule } from 'igniteui-react-grids';
-import { IgrPivotGrid, IgrPivotConfiguration, IgrPivotDateDimension, IgrPivotDimension, IgrPivotDateDimensionOptions, SortingDirection, IgrPivotValue, IgrPivotAggregator, PivotAggregationType } from 'igniteui-react-grids';
+import { IgrPivotGrid, IgrPivotConfiguration, IgrPivotDateDimension, IgrPivotDimension, IgrPivotDateDimensionOptions, SortingDirection, IgrPivotValue, IgrPivotAggregator } from 'igniteui-react-grids';
 import { PivotDataFlatItem, PivotDataFlat } from './PivotDataFlat';
 
 import 'igniteui-react-grids/grids/combined';
@@ -66,18 +66,18 @@ export default class Sample extends React.Component<any, any> {
             SumOfSale.key = "SUM";
             SumOfSale.label = "Sum of Sale";
             SumOfSale.aggregator = this.pivotDataFlatAggregateSumSale;
-            SumOfSale.aggregatorName = PivotAggregationType.SUM;
+            SumOfSale.aggregatorName = "SUM";
 
             var MinOfSale = new IgrPivotAggregator();
             MinOfSale.key = "MIN";
             MinOfSale.label = "Minimum of Sale";
             MinOfSale.aggregator = this.pivotDataFlatAggregateMinSale;
-            MinOfSale.aggregatorName = PivotAggregationType.MIN;
+            MinOfSale.aggregatorName = "MIN";
 
             var MaxOfSale = new IgrPivotAggregator();
             MaxOfSale.key = "MAX";
             MaxOfSale.label = "Maximum of Sale";
-            MaxOfSale.aggregatorName = PivotAggregationType.MAX;
+            MaxOfSale.aggregatorName = "MAX";
             MaxOfSale.aggregator = this.pivotDataFlatAggregateMaxSale;
 
             igrPivotValue1.aggregateList = [SumOfSale,MinOfSale,MaxOfSale];
diff --git a/samples/inputs/color-editor/overview/src/index.tsx b/samples/inputs/color-editor/overview/src/index.tsx
index cb5bd3db5a..907002da50 100644
--- a/samples/inputs/color-editor/overview/src/index.tsx
+++ b/samples/inputs/color-editor/overview/src/index.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 
 import { IgrColorEditorModule } from 'igniteui-react-inputs';
-import { IgrColorEditor } from 'igniteui-react-inputs';
+import { IgrColorEditor } from 'igniteui-react-dashboards';
 
 const mods: any[] = [
     IgrColorEditorModule