Changes from igniteui-xplat-examples-output+PRs_2024.12.18.2

samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/app.component.html

@@ -5,24 +5,26 @@
       #chart
       isHorizontalZoomEnabled="true"
       isVerticalZoomEnabled="true"
-      chartTitle="Public Debt vs. Population"
-      subtitle="GDP per Capita">
+      chartTitle="Population vs. Public Debt vs. GDP"
+      titleTopMargin="10"
+      titleBottomMargin="0">
           <igx-numeric-x-axis
           name="xAxis"
           #xAxis
-          minimumValue="10000"
+          title="Population"
+          minimumValue="100"
           maximumValue="10000000000"
           isLogarithmic="true"
-          abbreviateLargeNumbers="true"
-          title="Population">
+          abbreviateLargeNumbers="true">
           </igx-numeric-x-axis>
           <igx-numeric-y-axis
           name="yAxis"
           #yAxis
           title="Public Debt per GDP (%)"
-          titleLeftMargin="5"
-          isLogarithmic="false"
-          maximumValue="120">
+          titleLeftMargin="10"
+          isLogarithmic="true"
+          abbreviateLargeNumbers="true"
+          maximumValue="1000">
           </igx-numeric-y-axis>
           <igx-bubble-series
           name="bubbleSeries1"
@@ -32,14 +34,40 @@
           radiusMemberPath="gdpPerPerson"
           [radiusScale]="sizeScale1"
           fillMemberPath="gdpPerPerson"
+          yMemberAsLegendUnit="%"
+          yMemberAsLegendLabel="Debt"
+          xMemberAsLegendLabel="Population"
+          radiusMemberAsLegendLabel="GDP"
+          title="Country"
           [xAxis]="xAxis"
           [yAxis]="yAxis"
           [dataSource]="worldStats"
           markerType="Circle"
           markerOutline="black"
+          markerThickness="1"
           showDefaultTooltip="true"
           [fillScale]="valueBrushScale1">
           </igx-bubble-series>
+          <igx-data-tool-tip-layer
+          name="dataToolTipLayer"
+          #dataToolTipLayer
+          valueRowMarginTop="1"
+          labelTextMarginTop="1"
+          titleTextMarginTop="1"
+          unitsTextMarginTop="1"
+          valueRowMarginBottom="1"
+          labelTextMarginBottom="1"
+          titleTextMarginBottom="1"
+          unitsTextMarginBottom="1"
+          unitsTextMarginRight="5"
+          valueTextMarginLeft="10"
+          labelTextMarginLeft="1"
+          groupingMode="Grouped"
+          layoutMode="Vertical"
+          badgeShape="Hidden"
+          includedColumns="X, Y, Radius"
+          headerRowVisible="false">
+          </igx-data-tool-tip-layer>
       </igx-data-chart>
   </div>
 </div>

samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/app.component.ts

@@ -1,7 +1,7 @@
 import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { ComponentRenderer, NumberAbbreviatorDescriptionModule, DataChartCoreDescriptionModule, DataChartScatterDescriptionModule, DataChartScatterCoreDescriptionModule, DataChartInteractivityDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-angular-core';
 import { WorldStatsItem, WorldStats } from './WorldStats';
-import { IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxBubbleSeriesComponent, IgxSizeScaleComponent, IgxValueBrushScaleComponent } from 'igniteui-angular-charts';
+import { IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxBubbleSeriesComponent, IgxSizeScaleComponent, IgxValueBrushScaleComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts';
 
 @Component({
     standalone: false,
@@ -49,6 +49,8 @@ export class AppComponent implements AfterViewInit
 	    }
 	    return this._valueBrushScale1;
 	}
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _worldStats: WorldStats = null;
     public get worldStats(): WorldStats {
         if (this._worldStats == null)

samples/charts/data-chart/scatter-bubble-chart-multiple-sources/src/app.component.html

@@ -24,10 +24,11 @@
           <igx-numeric-y-axis
           name="yAxis"
           #yAxis
-          title="Public Debt per GDP (%)"
-          titleLeftMargin="5"
-          isLogarithmic="false"
-          maximumValue="120">
+          title="GDP per Capita"
+          maximumValue="1000000"
+          titleLeftMargin="10"
+          isLogarithmic="true"
+          abbreviateLargeNumbers="true">
           </igx-numeric-y-axis>
           <igx-bubble-series
           name="bubbleSeries1"
@@ -36,11 +37,11 @@
           [xAxis]="xAxis"
           [yAxis]="yAxis"
           xMemberPath="population"
-          yMemberPath="publicDebt"
-          radiusMemberPath="gdpPerPerson"
+          yMemberPath="gDP"
+          radiusMemberPath="workedHours"
           xMemberAsLegendLabel="Population"
-          yMemberAsLegendLabel="Debt"
-          radiusMemberAsLegendLabel="GDP"
+          yMemberAsLegendLabel="GDP"
+          radiusMemberAsLegendLabel="Work Hours"
           [dataSource]="countryStatsAfrica"
           markerType="Circle"
           showDefaultTooltip="true"
@@ -53,16 +54,33 @@
           [xAxis]="xAxis"
           [yAxis]="yAxis"
           xMemberPath="population"
-          yMemberPath="publicDebt"
-          radiusMemberPath="gdpPerPerson"
+          yMemberPath="gDP"
+          radiusMemberPath="workedHours"
           xMemberAsLegendLabel="Population"
-          yMemberAsLegendLabel="Debt"
-          radiusMemberAsLegendLabel="GDP"
+          yMemberAsLegendLabel="GDP"
+          radiusMemberAsLegendLabel="Work Hours"
           [dataSource]="countryStatsEurope"
           markerType="Circle"
           showDefaultTooltip="true"
           [radiusScale]="sizeScale2">
           </igx-bubble-series>
+          <igx-data-tool-tip-layer
+          name="dataToolTipLayer"
+          #dataToolTipLayer
+          valueRowMarginTop="1"
+          labelTextMarginTop="1"
+          titleTextMarginTop="1"
+          unitsTextMarginTop="1"
+          valueRowMarginBottom="1"
+          labelTextMarginBottom="1"
+          titleTextMarginBottom="1"
+          unitsTextMarginBottom="1"
+          unitsTextMarginRight="5"
+          valueTextMarginLeft="10"
+          labelTextMarginLeft="1"
+          groupingMode="Grouped"
+          layoutMode="Vertical">
+          </igx-data-tool-tip-layer>
       </igx-data-chart>
   </div>
 </div>

samples/charts/data-chart/scatter-bubble-chart-multiple-sources/src/app.component.ts

@@ -1,7 +1,7 @@
 import { AfterViewInit, Component, ViewChild, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
 import { CountryStatsAfricaItem, CountryStatsAfrica } from './CountryStatsAfrica';
 import { CountryStatsEuropeItem, CountryStatsEurope } from './CountryStatsEurope';
-import { IgxLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxBubbleSeriesComponent, IgxSizeScaleComponent } from 'igniteui-angular-charts';
+import { IgxLegendComponent, IgxDataChartComponent, IgxNumericXAxisComponent, IgxNumericYAxisComponent, IgxBubbleSeriesComponent, IgxSizeScaleComponent, IgxDataToolTipLayerComponent } from 'igniteui-angular-charts';
 
 @Component({
     standalone: false,
@@ -52,6 +52,8 @@ export class AppComponent implements AfterViewInit
 	    }
 	    return this._sizeScale2;
 	}
+	@ViewChild("dataToolTipLayer", { static: true } )
+	private dataToolTipLayer: IgxDataToolTipLayerComponent
     private _countryStatsAfrica: CountryStatsAfrica = null;
     public get countryStatsAfrica(): CountryStatsAfrica {
         if (this._countryStatsAfrica == null)

samples/charts/data-chart/scatter-bubble-chart-single-source/src/app.component.html

@@ -1,25 +1,28 @@
 <div class="container vertical sample">
-  <div class="legend-title">
-      Total Population of Selected Countries
-  </div>
   <div class="container fill">
       <igx-data-chart
       name="chart"
-      #chart>
+      #chart
+      chartTitle="Population vs. Public Debt vs. GDP"
+      titleTopMargin="10"
+      titleBottomMargin="0">
           <igx-numeric-x-axis
           name="xAxis"
           #xAxis
           title="Population"
+          minimumValue="100"
+          maximumValue="10000000000"
           isLogarithmic="true"
           abbreviateLargeNumbers="true">
           </igx-numeric-x-axis>
           <igx-numeric-y-axis
           name="yAxis"
           #yAxis
           title="Public Debt per GDP (%)"
-          titleLeftMargin="5"
-          isLogarithmic="false"
-          maximumValue="120">
+          titleLeftMargin="10"
+          isLogarithmic="true"
+          abbreviateLargeNumbers="true"
+          maximumValue="1000">
           </igx-numeric-y-axis>
           <igx-bubble-series
           name="bubbleSeries1"
@@ -28,9 +31,10 @@
           yMemberPath="publicDebt"
           radiusMemberPath="gdpPerPerson"
           [radiusScale]="sizeScale1"
-          fillMemberPath="gdpPerPerson"
-          xMemberAsLegendLabel="Population"
+          title="Country"
+          yMemberAsLegendUnit="%"
           yMemberAsLegendLabel="Debt"
+          xMemberAsLegendLabel="Population"
           radiusMemberAsLegendLabel="GDP"
           [xAxis]="xAxis"
           [yAxis]="yAxis"
@@ -40,7 +44,22 @@
           </igx-bubble-series>
           <igx-data-tool-tip-layer
           name="dataToolTipLayer"
-          #dataToolTipLayer>
+          #dataToolTipLayer
+          valueRowMarginTop="1"
+          labelTextMarginTop="1"
+          titleTextMarginTop="1"
+          unitsTextMarginTop="1"
+          valueRowMarginBottom="1"
+          labelTextMarginBottom="1"
+          titleTextMarginBottom="1"
+          unitsTextMarginBottom="1"
+          unitsTextMarginRight="5"
+          valueTextMarginLeft="10"
+          labelTextMarginLeft="1"
+          groupingMode="Grouped"
+          layoutMode="Vertical"
+          badgeShape="Hidden"
+          headerRowVisible="false">
           </igx-data-tool-tip-layer>
       </igx-data-chart>
   </div>