Skip to content

Commit 3222835

Browse files
alantreadwayalantreadway
committed
AG-15641 - Reviewed spruced example updates.
1 parent e591cdf commit 3222835

File tree

17 files changed

+48
-209
lines changed

17 files changed

+48
-209
lines changed

‎packages/ag-charts-website/src/content/gallery/_examples/100--stacked-area/main.ts‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,10 @@ const options: AgCartesianChartOptions = {
99
data: getData(),
1010
title: {
1111
text: 'UK Energy Sources',
12-
spacing: 25,
1312
},
1413
footnote: {
1514
text: 'Source: Department for Business, Energy & Industrial Strategy',
1615
fontStyle: 'italic',
17-
spacing: 10,
1816
},
1917
theme: {
2018
overrides: {
@@ -132,14 +130,13 @@ const options: AgCartesianChartOptions = {
132130
],
133131
legend: {
134132
position: 'bottom',
135-
spacing: 25,
136133
item: {
134+
showSeriesStroke: false,
137135
paddingX: 10,
138136
paddingY: 8,
139137
},
140138
},
141139
tooltip: {
142-
mode: 'shared',
143140
position: {
144141
placement: ['right', 'left', 'top', 'bottom'],
145142
},
@@ -150,14 +147,6 @@ const options: AgCartesianChartOptions = {
150147
enabled: true,
151148
duration: 800,
152149
},
153-
seriesArea: {
154-
padding: {
155-
top: 20,
156-
right: 25,
157-
bottom: 15,
158-
left: 15,
159-
},
160-
},
161150
formatter: (params) => {
162151
const { value, type } = params;
163152

‎packages/ag-charts-website/src/content/gallery/_examples/area-with-labels/main.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,14 @@ const options: AgChartOptions<DataType> = {
2929
label: {
3030
enabled: true,
3131
},
32+
fill: {
33+
type: 'gradient',
34+
colorStops: [
35+
{ color: '#ffffff', stop: 0 },
36+
{ color: '#7da9e8', stop: 0.75 },
37+
{ color: '#2c6ed5', stop: 1 },
38+
],
39+
},
3240
},
3341
],
3442
axes: [

‎packages/ag-charts-website/src/content/gallery/_examples/area-with-negative-values/main.ts‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -85,9 +85,6 @@ const options: AgCartesianChartOptions = {
8585
keys: ['quarter'],
8686
paddingInner: 0,
8787
groupPaddingInner: 0,
88-
bandHighlight: {
89-
enabled: true,
90-
},
9188
gridLine: {
9289
style: [
9390
{
@@ -107,7 +104,7 @@ const options: AgCartesianChartOptions = {
107104
['2022', 'Q1'],
108105
['2022', 'Q3'],
109106
],
110-
fillOpacity: 0.08,
107+
fillOpacity: 0,
111108
label: {
112109
text: 'Launch Phase',
113110
position: 'inside-bottom',
@@ -119,7 +116,7 @@ const options: AgCartesianChartOptions = {
119116
['2022', 'Q4'],
120117
['2023', 'Q1'],
121118
],
122-
fillOpacity: 0.08,
119+
fillOpacity: 0,
123120
label: {
124121
text: 'Product-Market Fit',
125122
position: 'inside-bottom',
@@ -131,7 +128,7 @@ const options: AgCartesianChartOptions = {
131128
['2023', 'Q2'],
132129
['2023', 'Q3'],
133130
],
134-
fillOpacity: 0.08,
131+
fillOpacity: 0,
135132
label: {
136133
text: 'Funding &\nDownturn',
137134
position: 'inside-bottom',
@@ -143,7 +140,7 @@ const options: AgCartesianChartOptions = {
143140
['2023', 'Q4'],
144141
['2024', 'Q4'],
145142
],
146-
fillOpacity: 0.08,
143+
fillOpacity: 0,
147144
label: {
148145
text: 'Scale & Profitability',
149146
position: 'inside-bottom',

‎packages/ag-charts-website/src/content/gallery/_examples/multiple-bubble-series/main.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -132,8 +132,8 @@ const options: AgChartOptions = {
132132
position: 'bottom',
133133
type: 'number',
134134
nice: false,
135-
min: -1000,
136-
max: 32000,
135+
min: -6000,
136+
max: 50000,
137137
title: {
138138
text: 'Number of Franchises',
139139
},
@@ -164,7 +164,7 @@ const options: AgChartOptions = {
164164
label: {
165165
text: 'Market Threshold',
166166
position: 'top',
167-
padding: 5,
167+
padding: 10,
168168
},
169169
},
170170
],

‎packages/ag-charts-website/src/content/gallery/_examples/multiple-donuts/main.ts‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -96,18 +96,7 @@ const options: AgPolarChartOptions = {
9696
angle: '#{,.0f}L',
9797
},
9898
legend: {
99-
position: 'bottom',
100-
item: {
101-
label: {
102-
formatter: ({ value }) => {
103-
const isContinent = ['Europe', 'Asia'].includes(value);
104-
if (isContinent) {
105-
return `${value} (Total)`;
106-
}
107-
return value;
108-
},
109-
},
110-
},
99+
enabled: false,
111100
},
112101
animation: {
113102
enabled: true,

‎packages/ag-charts-website/src/content/gallery/_examples/multiple-line-series-large-data/main.ts‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ const options: AgCartesianChartOptions = {
1313
data: getData(),
1414
tooltip: {
1515
enabled: true,
16-
mode: 'shared',
1716
position: {
1817
placement: ['right', 'left', 'top', 'bottom'],
1918
},
@@ -140,7 +139,7 @@ const options: AgCartesianChartOptions = {
140139
},
141140
],
142141
legend: {
143-
position: 'right',
142+
position: 'bottom',
144143
item: {
145144
paddingX: 16,
146145
paddingY: 8,
@@ -175,13 +174,6 @@ const options: AgCartesianChartOptions = {
175174
: `${piValue.toFixed(2)}π`;
176175
return formatted;
177176
},
178-
y(params) {
179-
const value = params.value as number;
180-
if (Math.abs(value) > 100) {
181-
return value > 0 ? '∞' : '-∞';
182-
}
183-
return value.toFixed(3);
184-
},
185177
},
186178
};
187179

‎packages/ag-charts-website/src/content/gallery/_examples/multiple-scatter-series/main.ts‎

Lines changed: 8 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -157,6 +157,7 @@ const options: AgChartOptions = {
157157
nice: false,
158158
title: {
159159
text: 'GDP per Capita (USD)',
160+
spacing: 10,
160161
},
161162
label: {
162163
formatter: ({ value }) => {
@@ -175,27 +176,14 @@ const options: AgChartOptions = {
175176
],
176177
},
177178
crossLines: [
178-
{
179-
type: 'line',
180-
value: 12000,
181-
strokeWidth: 1,
182-
strokeOpacity: 0.5,
183-
lineDash: [6, 3],
184-
label: {
185-
text: 'World Median GDP',
186-
position: 'top',
187-
fontStyle: 'italic',
188-
padding: 5,
189-
},
190-
},
191179
{
192180
type: 'range',
193181
range: [0, 10000],
194182
fill: '#ff6b6b',
195183
fillOpacity: 0.2,
196184
label: {
197-
text: 'Low Income',
198-
position: 'bottom',
185+
text: 'Low',
186+
position: 'inside-bottom-right',
199187
fontStyle: 'italic',
200188
padding: 5,
201189
},
@@ -206,8 +194,8 @@ const options: AgChartOptions = {
206194
fill: '#feca57',
207195
fillOpacity: 0.2,
208196
label: {
209-
text: 'Middle Income',
210-
position: 'bottom',
197+
text: 'Middle',
198+
position: 'inside-bottom-right',
211199
fontStyle: 'italic',
212200
padding: 5,
213201
},
@@ -218,8 +206,8 @@ const options: AgChartOptions = {
218206
fill: '#48dbfb',
219207
fillOpacity: 0.2,
220208
label: {
221-
text: 'High Income',
222-
position: 'bottom',
209+
text: 'High',
210+
position: 'inside-bottom-right',
223211
fontStyle: 'italic',
224212
padding: 5,
225213
},
@@ -263,23 +251,15 @@ const options: AgChartOptions = {
263251
],
264252
},
265253
],
266-
seriesArea: {
267-
padding: {
268-
bottom: 20,
269-
},
270-
},
271254
legend: {
272255
position: 'bottom',
273256
orientation: 'horizontal',
274-
spacing: 40,
257+
spacing: 10,
275258
item: {
276259
marker: {
277260
size: 10,
278261
strokeWidth: 2,
279262
},
280-
label: {},
281-
paddingX: 16,
282-
paddingY: 8,
283263
},
284264
},
285265
zoom: {

‎packages/ag-charts-website/src/content/gallery/_examples/pie-in-a-donut/main.ts‎

Lines changed: 6 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,11 @@ const numFormatter = new Intl.NumberFormat('en-US', {
77
maximumFractionDigits: 0,
88
});
99

10-
const customColors = [
11-
'#4285F4', // Chrome - Google blue
12-
'#0078D4', // Edge - Microsoft blue
13-
'#FF9500', // Safari - Apple orange
14-
'#FF6611', // Firefox - Mozilla orange
15-
'#7B7B8E', // Other - neutral gray
16-
];
17-
1810
const sharedSeriesOptions: AgPolarSeriesOptions = {
1911
type: 'pie',
2012
sectorLabelKey: 'share',
2113
angleKey: 'share',
2214
legendItemKey: 'browser',
23-
fills: customColors,
24-
strokes: customColors,
2515
fillOpacity: 0.9,
2616
strokeWidth: 2,
2717
strokeOpacity: 1,
@@ -31,16 +21,16 @@ const sharedSeriesOptions: AgPolarSeriesOptions = {
3121
strokeWidth: 3,
3222
},
3323
},
24+
sectorLabel: {
25+
formatter: ({ value }) => {
26+
return value >= 0.1 ? `${(value * 100).toFixed(0)}%` : '';
27+
},
28+
},
3429
};
3530

3631
const options: AgPolarChartOptions = {
32+
// Investigate missing sectorLabels.
3733
container: document.getElementById('myChart'),
38-
theme: {
39-
palette: {
40-
fills: customColors,
41-
strokes: customColors,
42-
},
43-
},
4434
title: {
4535
text: 'Desktop Browser Market Share Evolution',
4636
},
@@ -56,9 +46,6 @@ const options: AgPolarChartOptions = {
5646
title: {
5747
text: '2020',
5848
},
59-
sectorLabel: {
60-
enabled: false,
61-
},
6249
tooltip: {
6350
renderer: (params: any) => {
6451
const value = params.datum.share * 100;
@@ -77,23 +64,13 @@ const options: AgPolarChartOptions = {
7764
text: '2022',
7865
},
7966
calloutLabelKey: 'browser',
80-
calloutLabel: {
81-
minAngle: 20,
82-
},
83-
sectorLabel: {
84-
positionOffset: -20,
85-
formatter: ({ value }) => {
86-
return value >= 0.1 ? `${(value * 100).toFixed(0)}%` : '';
87-
},
88-
},
8967
tooltip: {
9068
renderer: (params) => {
9169
const { datum } = params;
9270
const value2022 = datum.share * 100;
9371
const data2020 = getData2020().find((d) => d.browser === datum.browser);
9472
const value2020 = data2020 ? data2020.share * 100 : 0;
9573
const change = value2022 - value2020;
96-
const changeColor = change > 0 ? '#10B981' : change < 0 ? '#EF4444' : '#6B7280';
9774
const changeIcon = change > 0 ? '↑' : change < 0 ? '↓' : '–';
9875

9976
return {
@@ -117,14 +94,6 @@ const options: AgPolarChartOptions = {
11794
strokeWidth: 2,
11895
padding: 8,
11996
},
120-
label: {
121-
formatter: ({ value, datum }) => {
122-
if (!datum) return value;
123-
const data2022 = getData2022().find((d) => d.browser === value);
124-
const share = data2022 ? (data2022.share * 100).toFixed(1) : '0.0';
125-
return `${value} (${share}%)`;
126-
},
127-
},
12897
paddingX: 16,
12998
paddingY: 8,
13099
},

‎packages/ag-charts-website/src/content/gallery/_examples/pie-with-variable-radius/main.ts‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const options: AgChartOptions<DataType> = {
2020
text: 'Baltic States Economic Comparison',
2121
},
2222
subtitle: {
23-
text: 'Slice size: Population • Radius: GDP per Capita',
23+
text: 'Angle: Population • Radius: GDP per Capita',
2424
},
2525
series: [
2626
{
@@ -64,10 +64,7 @@ const options: AgChartOptions<DataType> = {
6464
return {
6565
title: datum.country,
6666
data: [
67-
{ label: 'Total GDP', value: usdFullFormatter.format(gdp) },
68-
{ label: 'Share of Baltic GDP', value: `${percentage}%` },
6967
{ label: 'GDP Per Capita', value: usdFullFormatter.format(datum.gdpPerCapita) },
70-
{ label: 'Per Capita Rank', value: `#${gdpPerCapitaRank} of 3` },
7168
{ label: 'Population', value: datum.population.toLocaleString('en-US') },
7269
],
7370
};

0 commit comments

Comments
 (0)