Adding changes from build igniteui-xplat-examples-output+PRs_2024.12.…

…18.2 (#709) Co-authored-by: tfsbuild <[email protected]>
IgniteUI · Dec 18, 2024 · c90ed00 · c90ed00
1 parent ec3b3a2
commit c90ed00
Show file tree

Hide file tree

Showing 7 changed files with 5,548 additions and 898 deletions.
diff --git a/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/index.tsx b/samples/charts/data-chart/scatter-bubble-chart-fill-scale/src/index.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 
 import { IgrNumberAbbreviatorModule, IgrDataChartCoreModule, IgrDataChartScatterModule, IgrDataChartScatterCoreModule, IgrDataChartInteractivityModule, IgrDataChartAnnotationModule } from 'igniteui-react-charts';
-import { IgrDataChart, IgrNumericXAxis, IgrNumericYAxis, IgrBubbleSeries, IgrSizeScale, IgrValueBrushScale } from 'igniteui-react-charts';
+import { IgrDataChart, IgrNumericXAxis, IgrNumericYAxis, IgrBubbleSeries, IgrSizeScale, IgrValueBrushScale, IgrDataToolTipLayer } from 'igniteui-react-charts';
 import { ComponentRenderer, NumberAbbreviatorDescriptionModule, DataChartCoreDescriptionModule, DataChartScatterDescriptionModule, DataChartScatterCoreDescriptionModule, DataChartInteractivityDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-react-core';
 import { WorldStatsItem, WorldStats } from './WorldStats';
 
@@ -53,6 +53,7 @@ export default class Sample extends React.Component<any, any> {
         }
         return this._valueBrushScale1;
     }
+    private dataToolTipLayer: IgrDataToolTipLayer
 
     constructor(props: any) {
         super(props);
@@ -69,22 +70,24 @@ export default class Sample extends React.Component<any, any> {
                     ref={this.chartRef}
                     isHorizontalZoomEnabled="true"
                     isVerticalZoomEnabled="true"
-                    chartTitle="Public Debt vs. Population"
-                    subtitle="GDP per Capita">
+                    chartTitle="Population vs. Public Debt vs. GDP"
+                    titleTopMargin="10"
+                    titleBottomMargin="0">
                     <IgrNumericXAxis
                         name="xAxis"
-                        minimumValue="10000"
+                        title="Population"
+                        minimumValue="100"
                         maximumValue="10000000000"
                         isLogarithmic="true"
-                        abbreviateLargeNumbers="true"
-                        title="Population">
+                        abbreviateLargeNumbers="true">
                     </IgrNumericXAxis>
                     <IgrNumericYAxis
                         name="yAxis"
                         title="Public Debt per GDP (%)"
-                        titleLeftMargin="5"
-                        isLogarithmic="false"
-                        maximumValue="120">
+                        titleLeftMargin="10"
+                        isLogarithmic="true"
+                        abbreviateLargeNumbers="true"
+                        maximumValue="1000">
                     </IgrNumericYAxis>
                     <IgrBubbleSeries
                         name="bubbleSeries1"
@@ -93,14 +96,39 @@ export default class Sample extends React.Component<any, any> {
                         radiusMemberPath="gdpPerPerson"
                         radiusScale={this.sizeScale1}
                         fillMemberPath="gdpPerPerson"
+                        yMemberAsLegendUnit="%"
+                        yMemberAsLegendLabel="Debt"
+                        xMemberAsLegendLabel="Population"
+                        radiusMemberAsLegendLabel="GDP"
+                        title="Country"
                         xAxisName="xAxis"
                         yAxisName="yAxis"
                         dataSource={this.worldStats}
                         markerType="Circle"
                         markerOutline="black"
+                        markerThickness="1"
                         showDefaultTooltip="true"
                         fillScale={this.valueBrushScale1}>
                     </IgrBubbleSeries>
+                    <IgrDataToolTipLayer
+                        name="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">
+                    </IgrDataToolTipLayer>
                 </IgrDataChart>
             </div>
         </div>

diff --git a/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/src/index.tsx b/samples/charts/data-chart/scatter-bubble-chart-multiple-sources/src/index.tsx
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 
 import { IgrLegendModule, IgrNumberAbbreviatorModule, IgrDataChartCoreModule, IgrDataChartScatterModule, IgrDataChartScatterCoreModule, IgrDataChartInteractivityModule } from 'igniteui-react-charts';
-import { IgrLegend, IgrDataChart, IgrNumericXAxis, IgrNumericYAxis, IgrBubbleSeries, IgrSizeScale } from 'igniteui-react-charts';
+import { IgrLegend, IgrDataChart, IgrNumericXAxis, IgrNumericYAxis, IgrBubbleSeries, IgrSizeScale, IgrDataToolTipLayer } from 'igniteui-react-charts';
 import { CountryStatsAfricaItem, CountryStatsAfrica } from './CountryStatsAfrica';
 import { CountryStatsEuropeItem, CountryStatsEurope } from './CountryStatsEurope';
 
@@ -58,6 +58,7 @@ export default class Sample extends React.Component<any, any> {
         }
         return this._sizeScale2;
     }
+    private dataToolTipLayer: IgrDataToolTipLayer
 
     constructor(props: any) {
         super(props);
@@ -93,22 +94,23 @@ export default class Sample extends React.Component<any, any> {
                     </IgrNumericXAxis>
                     <IgrNumericYAxis
                         name="yAxis"
-                        title="Public Debt per GDP (%)"
-                        titleLeftMargin="5"
-                        isLogarithmic="false"
-                        maximumValue="120">
+                        title="GDP per Capita"
+                        maximumValue="1000000"
+                        titleLeftMargin="10"
+                        isLogarithmic="true"
+                        abbreviateLargeNumbers="true">
                     </IgrNumericYAxis>
                     <IgrBubbleSeries
                         name="bubbleSeries1"
                         title="African Countries"
                         xAxisName="xAxis"
                         yAxisName="yAxis"
                         xMemberPath="population"
-                        yMemberPath="publicDebt"
-                        radiusMemberPath="gdpPerPerson"
+                        yMemberPath="gDP"
+                        radiusMemberPath="workedHours"
                         xMemberAsLegendLabel="Population"
-                        yMemberAsLegendLabel="Debt"
-                        radiusMemberAsLegendLabel="GDP"
+                        yMemberAsLegendLabel="GDP"
+                        radiusMemberAsLegendLabel="Work Hours"
                         dataSource={this.countryStatsAfrica}
                         markerType="Circle"
                         showDefaultTooltip="true"
@@ -120,16 +122,32 @@ export default class Sample extends React.Component<any, any> {
                         xAxisName="xAxis"
                         yAxisName="yAxis"
                         xMemberPath="population"
-                        yMemberPath="publicDebt"
-                        radiusMemberPath="gdpPerPerson"
+                        yMemberPath="gDP"
+                        radiusMemberPath="workedHours"
                         xMemberAsLegendLabel="Population"
-                        yMemberAsLegendLabel="Debt"
-                        radiusMemberAsLegendLabel="GDP"
+                        yMemberAsLegendLabel="GDP"
+                        radiusMemberAsLegendLabel="Work Hours"
                         dataSource={this.countryStatsEurope}
                         markerType="Circle"
                         showDefaultTooltip="true"
                         radiusScale={this.sizeScale2}>
                     </IgrBubbleSeries>
+                    <IgrDataToolTipLayer
+                        name="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">
+                    </IgrDataToolTipLayer>
                 </IgrDataChart>
             </div>
         </div>

diff --git a/samples/charts/data-chart/scatter-bubble-chart-single-source/src/index.tsx b/samples/charts/data-chart/scatter-bubble-chart-single-source/src/index.tsx
@@ -50,35 +50,38 @@ export default class Sample extends React.Component<any, any> {
         return (
         <div className="container sample">
 
-            <div className="legend-title">
-                Total Population of Selected Countries
-            </div>
-
             <div className="container fill">
                 <IgrDataChart
-                    ref={this.chartRef}>
+                    ref={this.chartRef}
+                    chartTitle="Population vs. Public Debt vs. GDP"
+                    titleTopMargin="10"
+                    titleBottomMargin="0">
                     <IgrNumericXAxis
                         name="xAxis"
                         title="Population"
+                        minimumValue="100"
+                        maximumValue="10000000000"
                         isLogarithmic="true"
                         abbreviateLargeNumbers="true">
                     </IgrNumericXAxis>
                     <IgrNumericYAxis
                         name="yAxis"
                         title="Public Debt per GDP (%)"
-                        titleLeftMargin="5"
-                        isLogarithmic="false"
-                        maximumValue="120">
+                        titleLeftMargin="10"
+                        isLogarithmic="true"
+                        abbreviateLargeNumbers="true"
+                        maximumValue="1000">
                     </IgrNumericYAxis>
                     <IgrBubbleSeries
                         name="bubbleSeries1"
                         xMemberPath="population"
                         yMemberPath="publicDebt"
                         radiusMemberPath="gdpPerPerson"
                         radiusScale={this.sizeScale1}
-                        fillMemberPath="gdpPerPerson"
-                        xMemberAsLegendLabel="Population"
+                        title="Country"
+                        yMemberAsLegendUnit="%"
                         yMemberAsLegendLabel="Debt"
+                        xMemberAsLegendLabel="Population"
                         radiusMemberAsLegendLabel="GDP"
                         xAxisName="xAxis"
                         yAxisName="yAxis"
@@ -87,7 +90,22 @@ export default class Sample extends React.Component<any, any> {
                         showDefaultTooltip="true">
                     </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="1"
+                        groupingMode="Grouped"
+                        layoutMode="Vertical"
+                        badgeShape="Hidden"
+                        headerRowVisible="false">
                     </IgrDataToolTipLayer>
                 </IgrDataChart>
             </div>