Skip to content

Commit cbe42f4

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 (#913)
Co-authored-by: tfsbuild <[email protected]>
1 parent 9345bca commit cbe42f4

File tree

10 files changed

+5553
-898
lines changed

10 files changed

+5553
-898
lines changed

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

Lines changed: 36 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -24,24 +24,26 @@
2424
id="chart"
2525
is-horizontal-zoom-enabled="true"
2626
is-vertical-zoom-enabled="true"
27-
chart-title="Public Debt vs. Population"
28-
subtitle="GDP per Capita">
27+
chart-title="Population vs. Public Debt vs. GDP"
28+
title-top-margin="10"
29+
title-bottom-margin="0">
2930
<igc-numeric-x-axis
3031
name="xAxis"
3132
id="xAxis"
32-
minimum-value="10000"
33+
title="Population"
34+
minimum-value="100"
3335
maximum-value="10000000000"
3436
is-logarithmic="true"
35-
abbreviate-large-numbers="true"
36-
title="Population">
37+
abbreviate-large-numbers="true">
3738
</igc-numeric-x-axis>
3839
<igc-numeric-y-axis
3940
name="yAxis"
4041
id="yAxis"
4142
title="Public Debt per GDP (%)"
42-
title-left-margin="5"
43-
is-logarithmic="false"
44-
maximum-value="120">
43+
title-left-margin="10"
44+
is-logarithmic="true"
45+
abbreviate-large-numbers="true"
46+
maximum-value="1000">
4547
</igc-numeric-y-axis>
4648
<igc-bubble-series
4749
name="bubbleSeries1"
@@ -50,10 +52,36 @@
5052
y-member-path="publicDebt"
5153
radius-member-path="gdpPerPerson"
5254
fill-member-path="gdpPerPerson"
55+
y-member-as-legend-unit="%"
56+
y-member-as-legend-label="Debt"
57+
x-member-as-legend-label="Population"
58+
radius-member-as-legend-label="GDP"
59+
title="Country"
5360
marker-type="Circle"
5461
marker-outline="black"
62+
marker-thickness="1"
5563
show-default-tooltip="true">
5664
</igc-bubble-series>
65+
<igc-data-tool-tip-layer
66+
name="dataToolTipLayer"
67+
id="dataToolTipLayer"
68+
value-row-margin-top="1"
69+
label-text-margin-top="1"
70+
title-text-margin-top="1"
71+
units-text-margin-top="1"
72+
value-row-margin-bottom="1"
73+
label-text-margin-bottom="1"
74+
title-text-margin-bottom="1"
75+
units-text-margin-bottom="1"
76+
units-text-margin-right="5"
77+
value-text-margin-left="10"
78+
label-text-margin-left="1"
79+
grouping-mode="Grouped"
80+
layout-mode="Vertical"
81+
badge-shape="Hidden"
82+
included-columns="X, Y, Radius"
83+
header-row-visible="false">
84+
</igc-data-tool-tip-layer>
5785
</igc-data-chart>
5886
</div>
5987
</div>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { IgcNumberAbbreviatorModule, IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule, IgcDataChartAnnotationModule } from 'igniteui-webcomponents-charts';
22
import { ComponentRenderer, NumberAbbreviatorDescriptionModule, DataChartCoreDescriptionModule, DataChartScatterDescriptionModule, DataChartScatterCoreDescriptionModule, DataChartInteractivityDescriptionModule, DataChartAnnotationDescriptionModule } from 'igniteui-webcomponents-core';
3-
import { IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcBubbleSeriesComponent, IgcSizeScaleComponent, IgcValueBrushScaleComponent } from 'igniteui-webcomponents-charts';
3+
import { IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcBubbleSeriesComponent, IgcSizeScaleComponent, IgcValueBrushScaleComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
44
import { WorldStatsItem, WorldStats } from './WorldStats';
55

66
import { ModuleManager } from 'igniteui-webcomponents-core';
@@ -49,13 +49,15 @@ export class Sample {
4949
}
5050
return this._valueBrushScale1;
5151
}
52+
private dataToolTipLayer: IgcDataToolTipLayerComponent
5253
private _bind: () => void;
5354

5455
constructor() {
5556
var chart = this.chart = document.getElementById('chart') as IgcDataChartComponent;
5657
var xAxis = this.xAxis = document.getElementById('xAxis') as IgcNumericXAxisComponent;
5758
var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
5859
var bubbleSeries1 = this.bubbleSeries1 = document.getElementById('bubbleSeries1') as IgcBubbleSeriesComponent;
60+
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
5961

6062
this._bind = () => {
6163
bubbleSeries1.radiusScale = this.sizeScale1;

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

Lines changed: 30 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -44,21 +44,22 @@
4444
<igc-numeric-y-axis
4545
name="yAxis"
4646
id="yAxis"
47-
title="Public Debt per GDP (%)"
48-
title-left-margin="5"
49-
is-logarithmic="false"
50-
maximum-value="120">
47+
title="GDP per Capita"
48+
maximum-value="1000000"
49+
title-left-margin="10"
50+
is-logarithmic="true"
51+
abbreviate-large-numbers="true">
5152
</igc-numeric-y-axis>
5253
<igc-bubble-series
5354
name="bubbleSeries1"
5455
id="bubbleSeries1"
5556
title="African Countries"
5657
x-member-path="population"
57-
y-member-path="publicDebt"
58-
radius-member-path="gdpPerPerson"
58+
y-member-path="gDP"
59+
radius-member-path="workedHours"
5960
x-member-as-legend-label="Population"
60-
y-member-as-legend-label="Debt"
61-
radius-member-as-legend-label="GDP"
61+
y-member-as-legend-label="GDP"
62+
radius-member-as-legend-label="Work Hours"
6263
marker-type="Circle"
6364
show-default-tooltip="true">
6465
</igc-bubble-series>
@@ -67,14 +68,31 @@
6768
id="bubbleSeries2"
6869
title="European Countries"
6970
x-member-path="population"
70-
y-member-path="publicDebt"
71-
radius-member-path="gdpPerPerson"
71+
y-member-path="gDP"
72+
radius-member-path="workedHours"
7273
x-member-as-legend-label="Population"
73-
y-member-as-legend-label="Debt"
74-
radius-member-as-legend-label="GDP"
74+
y-member-as-legend-label="GDP"
75+
radius-member-as-legend-label="Work Hours"
7576
marker-type="Circle"
7677
show-default-tooltip="true">
7778
</igc-bubble-series>
79+
<igc-data-tool-tip-layer
80+
name="dataToolTipLayer"
81+
id="dataToolTipLayer"
82+
value-row-margin-top="1"
83+
label-text-margin-top="1"
84+
title-text-margin-top="1"
85+
units-text-margin-top="1"
86+
value-row-margin-bottom="1"
87+
label-text-margin-bottom="1"
88+
title-text-margin-bottom="1"
89+
units-text-margin-bottom="1"
90+
units-text-margin-right="5"
91+
value-text-margin-left="10"
92+
label-text-margin-left="1"
93+
grouping-mode="Grouped"
94+
layout-mode="Vertical">
95+
</igc-data-tool-tip-layer>
7896
</igc-data-chart>
7997
</div>
8098
</div>

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { IgcLegendModule, IgcNumberAbbreviatorModule, IgcDataChartCoreModule, IgcDataChartScatterModule, IgcDataChartScatterCoreModule, IgcDataChartInteractivityModule } from 'igniteui-webcomponents-charts';
2-
import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcBubbleSeriesComponent, IgcSizeScaleComponent } from 'igniteui-webcomponents-charts';
2+
import { IgcLegendComponent, IgcDataChartComponent, IgcNumericXAxisComponent, IgcNumericYAxisComponent, IgcBubbleSeriesComponent, IgcSizeScaleComponent, IgcDataToolTipLayerComponent } from 'igniteui-webcomponents-charts';
33
import { CountryStatsAfricaItem, CountryStatsAfrica } from './CountryStatsAfrica';
44
import { CountryStatsEuropeItem, CountryStatsEurope } from './CountryStatsEurope';
55

@@ -50,6 +50,7 @@ export class Sample {
5050
}
5151
return this._sizeScale2;
5252
}
53+
private dataToolTipLayer: IgcDataToolTipLayerComponent
5354
private _bind: () => void;
5455

5556
constructor() {
@@ -59,6 +60,7 @@ export class Sample {
5960
var yAxis = this.yAxis = document.getElementById('yAxis') as IgcNumericYAxisComponent;
6061
var bubbleSeries1 = this.bubbleSeries1 = document.getElementById('bubbleSeries1') as IgcBubbleSeriesComponent;
6162
var bubbleSeries2 = this.bubbleSeries2 = document.getElementById('bubbleSeries2') as IgcBubbleSeriesComponent;
63+
var dataToolTipLayer = this.dataToolTipLayer = document.getElementById('dataToolTipLayer') as IgcDataToolTipLayerComponent;
6264

6365
this._bind = () => {
6466
chart.legend = this.legend;

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

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,45 +18,63 @@
1818

1919
<div class="container sample">
2020

21-
<div class="legend-title">
22-
Total Population of Selected Countries
23-
</div>
24-
2521
<div class="container fill">
2622
<igc-data-chart
2723
name="chart"
28-
id="chart">
24+
id="chart"
25+
chart-title="Population vs. Public Debt vs. GDP"
26+
title-top-margin="10"
27+
title-bottom-margin="0">
2928
<igc-numeric-x-axis
3029
name="xAxis"
3130
id="xAxis"
3231
title="Population"
32+
minimum-value="100"
33+
maximum-value="10000000000"
3334
is-logarithmic="true"
3435
abbreviate-large-numbers="true">
3536
</igc-numeric-x-axis>
3637
<igc-numeric-y-axis
3738
name="yAxis"
3839
id="yAxis"
3940
title="Public Debt per GDP (%)"
40-
title-left-margin="5"
41-
is-logarithmic="false"
42-
maximum-value="120">
41+
title-left-margin="10"
42+
is-logarithmic="true"
43+
abbreviate-large-numbers="true"
44+
maximum-value="1000">
4345
</igc-numeric-y-axis>
4446
<igc-bubble-series
4547
name="bubbleSeries1"
4648
id="bubbleSeries1"
4749
x-member-path="population"
4850
y-member-path="publicDebt"
4951
radius-member-path="gdpPerPerson"
50-
fill-member-path="gdpPerPerson"
51-
x-member-as-legend-label="Population"
52+
title="Country"
53+
y-member-as-legend-unit="%"
5254
y-member-as-legend-label="Debt"
55+
x-member-as-legend-label="Population"
5356
radius-member-as-legend-label="GDP"
5457
marker-type="Circle"
5558
show-default-tooltip="true">
5659
</igc-bubble-series>
5760
<igc-data-tool-tip-layer
5861
name="dataToolTipLayer"
59-
id="dataToolTipLayer">
62+
id="dataToolTipLayer"
63+
value-row-margin-top="1"
64+
label-text-margin-top="1"
65+
title-text-margin-top="1"
66+
units-text-margin-top="1"
67+
value-row-margin-bottom="1"
68+
label-text-margin-bottom="1"
69+
title-text-margin-bottom="1"
70+
units-text-margin-bottom="1"
71+
units-text-margin-right="5"
72+
value-text-margin-left="10"
73+
label-text-margin-left="1"
74+
grouping-mode="Grouped"
75+
layout-mode="Vertical"
76+
badge-shape="Hidden"
77+
header-row-visible="false">
6078
</igc-data-tool-tip-layer>
6179
</igc-data-chart>
6280
</div>

‎samples/charts/data-chart/scatter-bubble-chart-styling/index.html‎

Lines changed: 23 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -18,67 +18,45 @@
1818

1919
<div class="container sample">
2020

21-
<div class="legend-title">
22-
Total Population of Selected Countries
23-
</div>
24-
25-
<div class="legend">
26-
<igc-legend
27-
name="legend"
28-
id="legend"
29-
orientation="Horizontal">
30-
</igc-legend>
31-
</div>
32-
3321
<div class="container fill">
3422
<igc-data-chart
3523
name="chart"
36-
id="chart">
24+
id="chart"
25+
chart-title="Population vs. Public Debt vs. GDP"
26+
title-top-margin="10"
27+
title-bottom-margin="0">
3728
<igc-numeric-x-axis
3829
name="xAxis"
3930
id="xAxis"
4031
title="Population"
32+
minimum-value="100"
33+
maximum-value="10000000000"
4134
is-logarithmic="true"
4235
abbreviate-large-numbers="true">
4336
</igc-numeric-x-axis>
4437
<igc-numeric-y-axis
4538
name="yAxis"
4639
id="yAxis"
47-
title="GDP per Capita"
48-
title-left-margin="5"
40+
title="Public Debt per GDP (%)"
41+
title-left-margin="10"
4942
is-logarithmic="true"
50-
abbreviate-large-numbers="true">
43+
abbreviate-large-numbers="true"
44+
maximum-value="1000">
5145
</igc-numeric-y-axis>
5246
<igc-bubble-series
5347
name="bubbleSeries1"
5448
id="bubbleSeries1"
55-
title="African Countries"
56-
x-member-path="population"
57-
y-member-path="gDP"
58-
radius-member-path="workedHours"
59-
x-member-as-legend-label="Population"
60-
y-member-as-legend-label="GDP"
61-
radius-member-as-legend-label="Worked Hours"
62-
marker-type="Circle"
63-
marker-outline="rgba(2, 158, 30, 1)"
64-
marker-brush="rgba(2, 158, 30, 1)"
65-
marker-fill-opacity="0.5"
66-
marker-thickness="1"
67-
show-default-tooltip="true">
68-
</igc-bubble-series>
69-
<igc-bubble-series
70-
name="bubbleSeries2"
71-
id="bubbleSeries2"
72-
title="European Countries"
49+
title="Country"
7350
x-member-path="population"
74-
y-member-path="gDP"
75-
radius-member-path="workedHours"
51+
y-member-path="publicDebt"
52+
radius-member-path="gdpPerPerson"
53+
y-member-as-legend-unit="%"
54+
y-member-as-legend-label="Debt"
7655
x-member-as-legend-label="Population"
77-
y-member-as-legend-label="GDP"
78-
radius-member-as-legend-label="Worked Hours"
56+
radius-member-as-legend-label="GDP"
7957
marker-type="Circle"
80-
marker-outline="rgba(95, 2, 171, 1)"
81-
marker-brush="rgba(95, 2, 171, 1)"
58+
marker-outline="black"
59+
marker-brush="rgba(67, 162, 250, 1)"
8260
marker-fill-opacity="0.5"
8361
marker-thickness="1"
8462
show-default-tooltip="true">
@@ -96,9 +74,12 @@
9674
units-text-margin-bottom="1"
9775
units-text-margin-right="5"
9876
value-text-margin-left="10"
99-
label-text-margin-left="5"
77+
label-text-margin-left="1"
10078
grouping-mode="Grouped"
101-
layout-mode="Vertical">
79+
layout-mode="Vertical"
80+
badge-shape="Hidden"
81+
included-columns="X, Y, Radius"
82+
header-row-visible="false">
10283
</igc-data-tool-tip-layer>
10384
</igc-data-chart>
10485
</div>

0 commit comments

Comments
 (0)