Skip to content

Commit c90ed00

Browse files
azure-pipelines[bot]tfsbuild
azure-pipelines[bot]
and
tfsbuild
authored
Adding changes from build igniteui-xplat-examples-output+PRs_2024.12.18.2 (#709)
Co-authored-by: tfsbuild <tfsbuild@infragistics.com>
1 parent ec3b3a2 commit c90ed00

File tree

7 files changed

+5548
-898
lines changed

7 files changed

+5548
-898
lines changed

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

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client';
33
import './index.css';
44

55
import { IgrNumberAbbreviatorModule, IgrDataChartCoreModule, IgrDataChartScatterModule, IgrDataChartScatterCoreModule, IgrDataChartInteractivityModule, IgrDataChartAnnotationModule } from 'igniteui-react-charts';
6-
import { IgrDataChart, IgrNumericXAxis, IgrNumericYAxis, IgrBubbleSeries, IgrSizeScale, IgrValueBrushScale } from 'igniteui-react-charts';
6+
import { IgrDataChart, IgrNumericXAxis, IgrNumericYAxis, IgrBubbleSeries, IgrSizeScale, IgrValueBrushScale, IgrDataToolTipLayer } from 'igniteui-react-charts';
77
import { ComponentRenderer, NumberAbbreviatorDescriptionModule, DataChartCoreDescriptionModule, DataChartScatterDescriptionModule, DataChartScatterCoreDescriptionModule, DataChartInteractivityDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-react-core';
88
import { WorldStatsItem, WorldStats } from './WorldStats';
99

@@ -53,6 +53,7 @@ export default class Sample extends React.Component<any, any> {
5353
}
5454
return this._valueBrushScale1;
5555
}
56+
private dataToolTipLayer: IgrDataToolTipLayer
5657

5758
constructor(props: any) {
5859
super(props);
@@ -69,22 +70,24 @@ export default class Sample extends React.Component<any, any> {
6970
ref={this.chartRef}
7071
isHorizontalZoomEnabled="true"
7172
isVerticalZoomEnabled="true"
72-
chartTitle="Public Debt vs. Population"
73-
subtitle="GDP per Capita">
73+
chartTitle="Population vs. Public Debt vs. GDP"
74+
titleTopMargin="10"
75+
titleBottomMargin="0">
7476
<IgrNumericXAxis
7577
name="xAxis"
76-
minimumValue="10000"
78+
title="Population"
79+
minimumValue="100"
7780
maximumValue="10000000000"
7881
isLogarithmic="true"
79-
abbreviateLargeNumbers="true"
80-
title="Population">
82+
abbreviateLargeNumbers="true">
8183
</IgrNumericXAxis>
8284
<IgrNumericYAxis
8385
name="yAxis"
8486
title="Public Debt per GDP (%)"
85-
titleLeftMargin="5"
86-
isLogarithmic="false"
87-
maximumValue="120">
87+
titleLeftMargin="10"
88+
isLogarithmic="true"
89+
abbreviateLargeNumbers="true"
90+
maximumValue="1000">
8891
</IgrNumericYAxis>
8992
<IgrBubbleSeries
9093
name="bubbleSeries1"
@@ -93,14 +96,39 @@ export default class Sample extends React.Component<any, any> {
9396
radiusMemberPath="gdpPerPerson"
9497
radiusScale={this.sizeScale1}
9598
fillMemberPath="gdpPerPerson"
99+
yMemberAsLegendUnit="%"
100+
yMemberAsLegendLabel="Debt"
101+
xMemberAsLegendLabel="Population"
102+
radiusMemberAsLegendLabel="GDP"
103+
title="Country"
96104
xAxisName="xAxis"
97105
yAxisName="yAxis"
98106
dataSource={this.worldStats}
99107
markerType="Circle"
100108
markerOutline="black"
109+
markerThickness="1"
101110
showDefaultTooltip="true"
102111
fillScale={this.valueBrushScale1}>
103112
</IgrBubbleSeries>
113+
<IgrDataToolTipLayer
114+
name="dataToolTipLayer"
115+
valueRowMarginTop="1"
116+
labelTextMarginTop="1"
117+
titleTextMarginTop="1"
118+
unitsTextMarginTop="1"
119+
valueRowMarginBottom="1"
120+
labelTextMarginBottom="1"
121+
titleTextMarginBottom="1"
122+
unitsTextMarginBottom="1"
123+
unitsTextMarginRight="5"
124+
valueTextMarginLeft="10"
125+
labelTextMarginLeft="1"
126+
groupingMode="Grouped"
127+
layoutMode="Vertical"
128+
badgeShape="Hidden"
129+
includedColumns={["X", "Y", "Radius"]}
130+
headerRowVisible="false">
131+
</IgrDataToolTipLayer>
104132
</IgrDataChart>
105133
</div>
106134
</div>

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

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client';
33
import './index.css';
44

55
import { IgrLegendModule, IgrNumberAbbreviatorModule, IgrDataChartCoreModule, IgrDataChartScatterModule, IgrDataChartScatterCoreModule, IgrDataChartInteractivityModule } from 'igniteui-react-charts';
6-
import { IgrLegend, IgrDataChart, IgrNumericXAxis, IgrNumericYAxis, IgrBubbleSeries, IgrSizeScale } from 'igniteui-react-charts';
6+
import { IgrLegend, IgrDataChart, IgrNumericXAxis, IgrNumericYAxis, IgrBubbleSeries, IgrSizeScale, IgrDataToolTipLayer } from 'igniteui-react-charts';
77
import { CountryStatsAfricaItem, CountryStatsAfrica } from './CountryStatsAfrica';
88
import { CountryStatsEuropeItem, CountryStatsEurope } from './CountryStatsEurope';
99

@@ -58,6 +58,7 @@ export default class Sample extends React.Component<any, any> {
5858
}
5959
return this._sizeScale2;
6060
}
61+
private dataToolTipLayer: IgrDataToolTipLayer
6162

6263
constructor(props: any) {
6364
super(props);
@@ -93,22 +94,23 @@ export default class Sample extends React.Component<any, any> {
9394
</IgrNumericXAxis>
9495
<IgrNumericYAxis
9596
name="yAxis"
96-
title="Public Debt per GDP (%)"
97-
titleLeftMargin="5"
98-
isLogarithmic="false"
99-
maximumValue="120">
97+
title="GDP per Capita"
98+
maximumValue="1000000"
99+
titleLeftMargin="10"
100+
isLogarithmic="true"
101+
abbreviateLargeNumbers="true">
100102
</IgrNumericYAxis>
101103
<IgrBubbleSeries
102104
name="bubbleSeries1"
103105
title="African Countries"
104106
xAxisName="xAxis"
105107
yAxisName="yAxis"
106108
xMemberPath="population"
107-
yMemberPath="publicDebt"
108-
radiusMemberPath="gdpPerPerson"
109+
yMemberPath="gDP"
110+
radiusMemberPath="workedHours"
109111
xMemberAsLegendLabel="Population"
110-
yMemberAsLegendLabel="Debt"
111-
radiusMemberAsLegendLabel="GDP"
112+
yMemberAsLegendLabel="GDP"
113+
radiusMemberAsLegendLabel="Work Hours"
112114
dataSource={this.countryStatsAfrica}
113115
markerType="Circle"
114116
showDefaultTooltip="true"
@@ -120,16 +122,32 @@ export default class Sample extends React.Component<any, any> {
120122
xAxisName="xAxis"
121123
yAxisName="yAxis"
122124
xMemberPath="population"
123-
yMemberPath="publicDebt"
124-
radiusMemberPath="gdpPerPerson"
125+
yMemberPath="gDP"
126+
radiusMemberPath="workedHours"
125127
xMemberAsLegendLabel="Population"
126-
yMemberAsLegendLabel="Debt"
127-
radiusMemberAsLegendLabel="GDP"
128+
yMemberAsLegendLabel="GDP"
129+
radiusMemberAsLegendLabel="Work Hours"
128130
dataSource={this.countryStatsEurope}
129131
markerType="Circle"
130132
showDefaultTooltip="true"
131133
radiusScale={this.sizeScale2}>
132134
</IgrBubbleSeries>
135+
<IgrDataToolTipLayer
136+
name="dataToolTipLayer"
137+
valueRowMarginTop="1"
138+
labelTextMarginTop="1"
139+
titleTextMarginTop="1"
140+
unitsTextMarginTop="1"
141+
valueRowMarginBottom="1"
142+
labelTextMarginBottom="1"
143+
titleTextMarginBottom="1"
144+
unitsTextMarginBottom="1"
145+
unitsTextMarginRight="5"
146+
valueTextMarginLeft="10"
147+
labelTextMarginLeft="1"
148+
groupingMode="Grouped"
149+
layoutMode="Vertical">
150+
</IgrDataToolTipLayer>
133151
</IgrDataChart>
134152
</div>
135153
</div>

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

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -50,35 +50,38 @@ export default class Sample extends React.Component<any, any> {
5050
return (
5151
<div className="container sample">
5252

53-
<div className="legend-title">
54-
Total Population of Selected Countries
55-
</div>
56-
5753
<div className="container fill">
5854
<IgrDataChart
59-
ref={this.chartRef}>
55+
ref={this.chartRef}
56+
chartTitle="Population vs. Public Debt vs. GDP"
57+
titleTopMargin="10"
58+
titleBottomMargin="0">
6059
<IgrNumericXAxis
6160
name="xAxis"
6261
title="Population"
62+
minimumValue="100"
63+
maximumValue="10000000000"
6364
isLogarithmic="true"
6465
abbreviateLargeNumbers="true">
6566
</IgrNumericXAxis>
6667
<IgrNumericYAxis
6768
name="yAxis"
6869
title="Public Debt per GDP (%)"
69-
titleLeftMargin="5"
70-
isLogarithmic="false"
71-
maximumValue="120">
70+
titleLeftMargin="10"
71+
isLogarithmic="true"
72+
abbreviateLargeNumbers="true"
73+
maximumValue="1000">
7274
</IgrNumericYAxis>
7375
<IgrBubbleSeries
7476
name="bubbleSeries1"
7577
xMemberPath="population"
7678
yMemberPath="publicDebt"
7779
radiusMemberPath="gdpPerPerson"
7880
radiusScale={this.sizeScale1}
79-
fillMemberPath="gdpPerPerson"
80-
xMemberAsLegendLabel="Population"
81+
title="Country"
82+
yMemberAsLegendUnit="%"
8183
yMemberAsLegendLabel="Debt"
84+
xMemberAsLegendLabel="Population"
8285
radiusMemberAsLegendLabel="GDP"
8386
xAxisName="xAxis"
8487
yAxisName="yAxis"
@@ -87,7 +90,22 @@ export default class Sample extends React.Component<any, any> {
8790
showDefaultTooltip="true">
8891
</IgrBubbleSeries>
8992
<IgrDataToolTipLayer
90-
name="dataToolTipLayer">
93+
name="dataToolTipLayer"
94+
valueRowMarginTop="1"
95+
labelTextMarginTop="1"
96+
titleTextMarginTop="1"
97+
unitsTextMarginTop="1"
98+
valueRowMarginBottom="1"
99+
labelTextMarginBottom="1"
100+
titleTextMarginBottom="1"
101+
unitsTextMarginBottom="1"
102+
unitsTextMarginRight="5"
103+
valueTextMarginLeft="10"
104+
labelTextMarginLeft="1"
105+
groupingMode="Grouped"
106+
layoutMode="Vertical"
107+
badgeShape="Hidden"
108+
headerRowVisible="false">
91109
</IgrDataToolTipLayer>
92110
</IgrDataChart>
93111
</div>

0 commit comments

Comments
 (0)