Adding changes from build igniteui-xplat-examples-output+PRs_2024.12.18.1 (#708)

Co-authored-by: tfsbuild <[email protected]>

Author: azure-pipelines[bot]

samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/index.tsx

@@ -46,8 +46,8 @@ export default class Sample extends React.Component<any, any> {
             var valueBrushScale1 = new IgrValueBrushScale({});
             valueBrushScale1.isLogarithmic = false;
             valueBrushScale1.minimumValue = 0;
-            valueBrushScale1.maximumValue = 100000;
-            valueBrushScale1.brushes = ["rgba(26, 161, 226, 1)", "rgba(24, 154, 217, 1)", "rgba(22, 146, 206, 1)", "rgba(19, 133, 188, 1)", "rgba(15, 121, 171, 1)", "rgba(12, 107, 153, 1)", "rgba(9, 94, 136, 1)", "rgba(5, 82, 119, 1)", "rgba(2, 70, 105, 1)", "rgba(0, 63, 94, 1)"];
+            valueBrushScale1.maximumValue = 260000;
+            valueBrushScale1.brushes = ["rgba(137, 181, 250, 1)", "rgba(20, 108, 247, 1)", "rgba(82, 144, 242, 1)"];
 
             this._valueBrushScale1 = valueBrushScale1;
         }
@@ -81,9 +81,10 @@ export default class Sample extends React.Component<any, any> {
                     </IgrNumericXAxis>
                     <IgrNumericYAxis
                         name="yAxis"
-                        isLogarithmic="true"
-                        logarithmBase="10"
-                        title="Public Debt per GDP">
+                        title="Public Debt per GDP (%)"
+                        titleLeftMargin="5"
+                        isLogarithmic="false"
+                        maximumValue="120">
                     </IgrNumericYAxis>
                     <IgrBubbleSeries
                         name="bubbleSeries1"

samples/charts/data-chart/scatter-bubble-chart-multiple-sources/src/index.tsx

@@ -93,18 +93,22 @@ export default class Sample extends React.Component<any, any> {
                     </IgrNumericXAxis>
                     <IgrNumericYAxis
                         name="yAxis"
-                        title="GDP per Capita"
-                        isLogarithmic="true"
-                        abbreviateLargeNumbers="true">
+                        title="Public Debt per GDP (%)"
+                        titleLeftMargin="5"
+                        isLogarithmic="false"
+                        maximumValue="120">
                     </IgrNumericYAxis>
                     <IgrBubbleSeries
                         name="bubbleSeries1"
                         title="African Countries"
                         xAxisName="xAxis"
                         yAxisName="yAxis"
                         xMemberPath="population"
-                        yMemberPath="gDP"
-                        radiusMemberPath="population"
+                        yMemberPath="publicDebt"
+                        radiusMemberPath="gdpPerPerson"
+                        xMemberAsLegendLabel="Population"
+                        yMemberAsLegendLabel="Debt"
+                        radiusMemberAsLegendLabel="GDP"
                         dataSource={this.countryStatsAfrica}
                         markerType="Circle"
                         showDefaultTooltip="true"
@@ -116,8 +120,11 @@ export default class Sample extends React.Component<any, any> {
                         xAxisName="xAxis"
                         yAxisName="yAxis"
                         xMemberPath="population"
-                        yMemberPath="gDP"
-                        radiusMemberPath="population"
+                        yMemberPath="publicDebt"
+                        radiusMemberPath="gdpPerPerson"
+                        xMemberAsLegendLabel="Population"
+                        yMemberAsLegendLabel="Debt"
+                        radiusMemberAsLegendLabel="GDP"
                         dataSource={this.countryStatsEurope}
                         markerType="Circle"
                         showDefaultTooltip="true"

samples/charts/data-chart/scatter-bubble-chart-single-source/src/index.tsx

@@ -65,9 +65,9 @@ export default class Sample extends React.Component<any, any> {
                     </IgrNumericXAxis>
                     <IgrNumericYAxis
                         name="yAxis"
-                        title="Public Debt"
+                        title="Public Debt per GDP (%)"
+                        titleLeftMargin="5"
                         isLogarithmic="false"
-                        abbreviateLargeNumbers="true"
                         maximumValue="120">
                     </IgrNumericYAxis>
                     <IgrBubbleSeries
@@ -77,6 +77,9 @@ export default class Sample extends React.Component<any, any> {
                         radiusMemberPath="gdpPerPerson"
                         radiusScale={this.sizeScale1}
                         fillMemberPath="gdpPerPerson"
+                        xMemberAsLegendLabel="Population"
+                        yMemberAsLegendLabel="Debt"
+                        radiusMemberAsLegendLabel="GDP"
                         xAxisName="xAxis"
                         yAxisName="yAxis"
                         dataSource={this.worldStats}

samples/charts/data-chart/scatter-bubble-chart-styling/src/index.tsx

@@ -96,6 +96,7 @@ export default class Sample extends React.Component<any, any> {
                     <IgrNumericYAxis
                         name="yAxis"
                         title="GDP per Capita"
+                        titleLeftMargin="5"
                         isLogarithmic="true"
                         abbreviateLargeNumbers="true">
                     </IgrNumericYAxis>
@@ -106,13 +107,16 @@ export default class Sample extends React.Component<any, any> {
                         yAxisName="yAxis"
                         xMemberPath="population"
                         yMemberPath="gDP"
-                        radiusMemberPath="population"
+                        radiusMemberPath="workedHours"
+                        xMemberAsLegendLabel="Population"
+                        yMemberAsLegendLabel="GDP"
+                        radiusMemberAsLegendLabel="Worked Hours"
                         dataSource={this.countryStatsAfrica}
                         markerType="Circle"
-                        markerOutline="rgba(62, 202, 62, 1)"
-                        markerBrush="rgba(69, 179, 224, 1)"
+                        markerOutline="rgba(2, 158, 30, 1)"
+                        markerBrush="rgba(2, 158, 30, 1)"
                         markerFillOpacity="0.5"
-                        markerThickness="2"
+                        markerThickness="1"
                         showDefaultTooltip="true"
                         radiusScale={this.sizeScale1}>
                     </IgrBubbleSeries>
@@ -123,18 +127,34 @@ export default class Sample extends React.Component<any, any> {
                         yAxisName="yAxis"
                         xMemberPath="population"
                         yMemberPath="gDP"
-                        radiusMemberPath="population"
+                        radiusMemberPath="workedHours"
+                        xMemberAsLegendLabel="Population"
+                        yMemberAsLegendLabel="GDP"
+                        radiusMemberAsLegendLabel="Worked Hours"
                         dataSource={this.countryStatsEurope}
                         markerType="Circle"
-                        markerOutline="rgba(171, 6, 221, 1)"
-                        markerBrush="rgba(135, 156, 235, 1)"
+                        markerOutline="rgba(95, 2, 171, 1)"
+                        markerBrush="rgba(95, 2, 171, 1)"
                         markerFillOpacity="0.5"
-                        markerThickness="2"
+                        markerThickness="1"
                         showDefaultTooltip="true"
                         radiusScale={this.sizeScale2}>
                     </IgrBubbleSeries>
                     <IgrDataToolTipLayer
-                        name="dataToolTipLayer">
+                        name="dataToolTipLayer"
+                        valueRowMarginTop="1"
+                        labelTextMarginTop="1"
+                        titleTextMarginTop="1"
+                        unitsTextMarginTop="1"
+                        valueRowMarginBottom="1"
+                        labelTextMarginBottom="1"
+                        titleTextMarginBottom="1"
+                        unitsTextMarginBottom="1"
+                        unitsTextMarginRight="5"
+                        valueTextMarginLeft="10"
+                        labelTextMarginLeft="5"
+                        groupingMode="Grouped"
+                        layoutMode="Vertical">
                     </IgrDataToolTipLayer>
                 </IgrDataChart>
             </div>

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];