merging vnext into master

browser/package.json

@@ -42,6 +42,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-loadable": "5.5.0",
+    "react-icons": "^5.3.0",
     "react-router": "4.3.1",
     "react-router-dom": "^5.2.0",
     "react-transition-group": "4.4.2",

samples/charts/data-chart/data-legend/src/index.tsx

@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 
 import { IgrLegendModule, IgrNumberAbbreviatorModule, IgrDataChartCoreModule, IgrDataChartScatterModule, IgrDataChartScatterCoreModule, IgrDataChartInteractivityModule, IgrDataLegendModule, IgrDataChartAnnotationModule } from 'igniteui-react-charts';
-import { IgrDataLegend, IgrDataChart, IgrNumericXAxis, IgrNumericYAxis, IgrBubbleSeries, IgrSizeScale, IgrCrosshairLayer } from 'igniteui-react-charts';
+import { IgrDataLegend, IgrDataChart, IgrNumericYAxis, IgrNumericXAxis, IgrBubbleSeries, IgrSizeScale, IgrCrosshairLayer } from 'igniteui-react-charts';
 import { CountryDemographicAfricanItem, CountryDemographicAfrican } from './CountryDemographicAfrican';
 import { CountryDemographicEuropeItem, CountryDemographicEurope } from './CountryDemographicEurope';
 
@@ -30,8 +30,8 @@ export default class Sample extends React.Component<any, any> {
         this.chart = r;
         this.setState({});
     }
-    private xAxis: IgrNumericXAxis
     private yAxis: IgrNumericYAxis
+    private xAxis: IgrNumericXAxis
     private bubbleSeries1: IgrBubbleSeries
     private  _sizeScale1: IgrSizeScale | null = null;
     public get sizeScale1(): IgrSizeScale {
@@ -80,27 +80,29 @@ export default class Sample extends React.Component<any, any> {
             <div className="legend">
                 <IgrDataLegend
                     ref={this.legendRef}
-                    target={this.chart}>
+                    target={this.chart}
+                    unitsText="%"
+                    includedColumns={["BirthRate", "DeathRate"]}>
                 </IgrDataLegend>
             </div>
 
             <div className="container fill">
                 <IgrDataChart
                     ref={this.chartRef}>
-                    <IgrNumericXAxis
-                        name="xAxis"
-                        title="Death Rate"
-                        interval="1"
-                        minimumValue="4"
-                        maximumValue="16">
-                    </IgrNumericXAxis>
                     <IgrNumericYAxis
                         name="yAxis"
                         title="Birth Rate"
                         interval="10"
                         minimumValue="0"
                         maximumValue="60">
                     </IgrNumericYAxis>
+                    <IgrNumericXAxis
+                        name="xAxis"
+                        title="Death Rate"
+                        interval="1"
+                        minimumValue="4"
+                        maximumValue="16">
+                    </IgrNumericXAxis>
                     <IgrBubbleSeries
                         name="bubbleSeries1"
                         xAxisName="xAxis"