Skip to content

Commit b3ee0ef

Browse files
AlbertCarrerasAlbertCarreras
authored
ChartGraph: padding adjusments + example fixes (#4030)
1 parent f2faede commit b3ee0ef

File tree

6 files changed

+267
-41
lines changed

6 files changed

+267
-41
lines changed

‎docs/examples/chartgraph/doColor.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,15 @@ export default function Example() {
3939
xAxisBottom: ['auto', 'auto'],
4040
}}
4141
tickFormatter={{
42+
xAxisBottom: (date, index) => {
43+
if (index % 2 === 0) {
44+
return `${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(
45+
date,
46+
)}-${new Intl.DateTimeFormat('en-US', { day: '2-digit' }).format(date)}`;
47+
}
48+
return '';
49+
},
50+
4251
timeseries: (date) =>
4352
`${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(
4453
date,

‎docs/examples/chartgraph/doLimit.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ export default function Example() {
1717
{ name: new Date(2023, 8, 8).getTime(), 'Paid': 400, 'Organic': 400 },
1818
{ name: new Date(2023, 9, 8).getTime(), 'Paid': 1005, 'Organic': 500 },
1919
{ name: new Date(2023, 10, 8).getTime(), 'Paid': 400, 'Organic': 550 },
20-
{ name: new Date(2023, 11, 8).getTime(), 'Paid': 300, 'Organic': 700 },
2120
];
2221

2322
return (
@@ -39,6 +38,14 @@ export default function Example() {
3938
}}
4039
tickFormatter={{
4140
yAxisLeft: (value) => `${value / 1000}K`,
41+
xAxisBottom: (date, index) => {
42+
if (index % 2 === 0) {
43+
return `${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(
44+
date,
45+
)}-${new Intl.DateTimeFormat('en-US', { day: '2-digit' }).format(date)}`;
46+
}
47+
return '';
48+
},
4249
timeseries: (date) =>
4350
`${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(
4451
date,

‎docs/examples/chartgraph/doSameColor.tsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,14 @@ export default function Example() {
3939
xAxisBottom: ['auto', 'auto'],
4040
}}
4141
tickFormatter={{
42+
xAxisBottom: (date, index) => {
43+
if (index % 2 === 0) {
44+
return `${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(
45+
date,
46+
)}-${new Intl.DateTimeFormat('en-US', { day: '2-digit' }).format(date)}`;
47+
}
48+
return '';
49+
},
4250
yAxisLeft: (value) => `${value / 1000}K`,
4351
timeseries: (date) =>
4452
`${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(

‎docs/examples/chartgraph/dontLimit.tsx‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -83,13 +83,6 @@ export default function Example() {
8383
'Earned': 100000,
8484
'Converted': 7000000,
8585
},
86-
{
87-
name: new Date(2023, 11, 8).getTime(),
88-
'Paid 10% per click on average': 3000000,
89-
'Organic': 7000000,
90-
'Earned': 200000,
91-
'Converted': 3000000,
92-
},
9386
];
9487

9588
return (
@@ -113,6 +106,15 @@ export default function Example() {
113106
xAxisBottom: ['auto', 'auto'],
114107
}}
115108
tickFormatter={{
109+
xAxisBottom: (date, index) => {
110+
if (index % 2 === 0) {
111+
return `${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(
112+
date,
113+
)}-${new Intl.DateTimeFormat('en-US', { day: '2-digit' }).format(date)}`;
114+
}
115+
return '';
116+
},
117+
116118
timeseries: (date) =>
117119
`${new Intl.DateTimeFormat('en-US', { dateStyle: 'long' }).format(date)}`,
118120
}}

‎docs/examples/chartgraph/main.tsx‎

Lines changed: 233 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,51 +3,252 @@ import { ChartGraph } from 'gestalt-charts';
33

44
export default function Example() {
55
const data = [
6-
{ name: new Date(2023, 0, 1).getTime(), 'Clicks': 0.01, 'Conversions': 0.02 },
7-
{ name: new Date(2023, 1, 2).getTime(), 'Clicks': 0.02, 'Conversions': 0.023 },
8-
{ name: new Date(2023, 2, 3).getTime(), 'Clicks': 0.03, 'Conversions': 0.05 },
9-
{ name: new Date(2023, 3, 4).getTime(), 'Clicks': 0.025, 'Conversions': 0.03 },
10-
{ name: new Date(2023, 4, 5).getTime(), 'Clicks': 0.04, 'Conversions': 0.04 },
11-
{ name: new Date(2023, 5, 6).getTime(), 'Clicks': 0.045, 'Conversions': 0.07 },
12-
{ name: new Date(2023, 6, 7).getTime(), 'Clicks': 0.05, 'Conversions': 0.06 },
13-
{ name: new Date(2023, 7, 8).getTime(), 'Clicks': 0.06, 'Conversions': 0.02 },
14-
{ name: new Date(2023, 8, 8).getTime(), 'Clicks': 0.04, 'Conversions': 0.04 },
15-
{ name: new Date(2023, 9, 8).getTime(), 'Clicks': 0.075, 'Conversions': 0.05 },
16-
{ name: new Date(2023, 10, 8).getTime(), 'Clicks': 0.04, 'Conversions': 0.055 },
17-
{ name: new Date(2023, 11, 8).getTime(), 'Clicks': 0.03, 'Conversions': 0.07 },
6+
{
7+
'name': 0,
8+
'totalSpend': 483.031257,
9+
'formattedDate': 'Mar 4',
10+
'formattedDateShort': 'Mar 4, 12:00 AM (UTC)',
11+
'date': '2025-03-04T00:00:00.000Z',
12+
'showIntervalOnXAxis': true,
13+
'totalSpendFormatted': '$483',
14+
},
15+
{
16+
'name': 1,
17+
'totalSpend': 512.685398,
18+
'formattedDate': '1:00 AM',
19+
'formattedDateShort': 'Mar 4, 1:00 AM (UTC)',
20+
'date': '2025-03-04T01:00:00.000Z',
21+
'showIntervalOnXAxis': false,
22+
'totalSpendFormatted': '$513',
23+
},
24+
{
25+
'name': 2,
26+
'totalSpend': 600.981313,
27+
'formattedDate': '2:00 AM',
28+
'formattedDateShort': 'Mar 4, 2:00 AM (UTC)',
29+
'date': '2025-03-04T02:00:00.000Z',
30+
'showIntervalOnXAxis': false,
31+
'totalSpendFormatted': '$601',
32+
},
33+
{
34+
'name': 3,
35+
'totalSpend': 547.214005,
36+
'formattedDate': '3:00 AM',
37+
'formattedDateShort': 'Mar 4, 3:00 AM (UTC)',
38+
'date': '2025-03-04T03:00:00.000Z',
39+
'showIntervalOnXAxis': false,
40+
'totalSpendFormatted': '$547',
41+
},
42+
{
43+
'name': 4,
44+
'totalSpend': 489.703595,
45+
'formattedDate': '4:00 AM',
46+
'formattedDateShort': 'Mar 4, 4:00 AM (UTC)',
47+
'date': '2025-03-04T04:00:00.000Z',
48+
'showIntervalOnXAxis': true,
49+
'totalSpendFormatted': '$490',
50+
},
51+
{
52+
'name': 5,
53+
'totalSpend': 420.505765,
54+
'formattedDate': '5:00 AM',
55+
'formattedDateShort': 'Mar 4, 5:00 AM (UTC)',
56+
'date': '2025-03-04T05:00:00.000Z',
57+
'showIntervalOnXAxis': false,
58+
'totalSpendFormatted': '$421',
59+
},
60+
{
61+
'name': 6,
62+
'totalSpend': 288.634428,
63+
'formattedDate': '6:00 AM',
64+
'formattedDateShort': 'Mar 4, 6:00 AM (UTC)',
65+
'date': '2025-03-04T06:00:00.000Z',
66+
'showIntervalOnXAxis': false,
67+
'totalSpendFormatted': '$289',
68+
},
69+
{
70+
'name': 7,
71+
'totalSpend': 189.011683,
72+
'formattedDate': '7:00 AM',
73+
'formattedDateShort': 'Mar 4, 7:00 AM (UTC)',
74+
'date': '2025-03-04T07:00:00.000Z',
75+
'showIntervalOnXAxis': false,
76+
'totalSpendFormatted': '$189',
77+
},
78+
{
79+
'name': 8,
80+
'totalSpend': 121.201872,
81+
'formattedDate': '8:00 AM',
82+
'formattedDateShort': 'Mar 4, 8:00 AM (UTC)',
83+
'date': '2025-03-04T08:00:00.000Z',
84+
'showIntervalOnXAxis': true,
85+
'totalSpendFormatted': '$121',
86+
},
87+
{
88+
'name': 9,
89+
'totalSpend': 103.858721,
90+
'formattedDate': '9:00 AM',
91+
'formattedDateShort': 'Mar 4, 9:00 AM (UTC)',
92+
'date': '2025-03-04T09:00:00.000Z',
93+
'showIntervalOnXAxis': false,
94+
'totalSpendFormatted': '$104',
95+
},
96+
{
97+
'name': 10,
98+
'totalSpend': 115.262585,
99+
'formattedDate': '10:00 AM',
100+
'formattedDateShort': 'Mar 4, 10:00 AM (UTC)',
101+
'date': '2025-03-04T10:00:00.000Z',
102+
'showIntervalOnXAxis': false,
103+
'totalSpendFormatted': '$115',
104+
},
105+
{
106+
'name': 11,
107+
'totalSpend': 182.740537,
108+
'formattedDate': '11:00 AM',
109+
'formattedDateShort': 'Mar 4, 11:00 AM (UTC)',
110+
'date': '2025-03-04T11:00:00.000Z',
111+
'showIntervalOnXAxis': false,
112+
'totalSpendFormatted': '$183',
113+
},
114+
{
115+
'name': 12,
116+
'totalSpend': 284.727574,
117+
'formattedDate': '12:00 PM',
118+
'formattedDateShort': 'Mar 4, 12:00 PM (UTC)',
119+
'date': '2025-03-04T12:00:00.000Z',
120+
'showIntervalOnXAxis': true,
121+
'totalSpendFormatted': '$285',
122+
},
123+
{
124+
'name': 13,
125+
'totalSpend': 336.484758,
126+
'formattedDate': '1:00 PM',
127+
'formattedDateShort': 'Mar 4, 1:00 PM (UTC)',
128+
'date': '2025-03-04T13:00:00.000Z',
129+
'showIntervalOnXAxis': false,
130+
'totalSpendFormatted': '$336',
131+
},
132+
{
133+
'name': 14,
134+
'totalSpend': 394.073601,
135+
'formattedDate': '2:00 PM',
136+
'formattedDateShort': 'Mar 4, 2:00 PM (UTC)',
137+
'date': '2025-03-04T14:00:00.000Z',
138+
'showIntervalOnXAxis': false,
139+
'totalSpendFormatted': '$394',
140+
},
141+
{
142+
'name': 15,
143+
'totalSpend': 453.56102,
144+
'formattedDate': '3:00 PM',
145+
'formattedDateShort': 'Mar 4, 3:00 PM (UTC)',
146+
'date': '2025-03-04T15:00:00.000Z',
147+
'showIntervalOnXAxis': false,
148+
'totalSpendFormatted': '$454',
149+
},
150+
{
151+
'name': 16,
152+
'totalSpend': 418.084545,
153+
'formattedDate': '4:00 PM',
154+
'formattedDateShort': 'Mar 4, 4:00 PM (UTC)',
155+
'date': '2025-03-04T16:00:00.000Z',
156+
'showIntervalOnXAxis': true,
157+
'totalSpendFormatted': '$418',
158+
},
159+
{
160+
'name': 17,
161+
'totalSpend': 454.60126,
162+
'formattedDate': '5:00 PM',
163+
'formattedDateShort': 'Mar 4, 5:00 PM (UTC)',
164+
'date': '2025-03-04T17:00:00.000Z',
165+
'showIntervalOnXAxis': false,
166+
'totalSpendFormatted': '$455',
167+
},
168+
{
169+
'name': 18,
170+
'totalSpend': 460.926791,
171+
'formattedDate': '6:00 PM',
172+
'formattedDateShort': 'Mar 4, 6:00 PM (UTC)',
173+
'date': '2025-03-04T18:00:00.000Z',
174+
'showIntervalOnXAxis': false,
175+
'totalSpendFormatted': '$461',
176+
},
177+
{
178+
'name': 19,
179+
'totalSpend': 504.717764,
180+
'formattedDate': '7:00 PM',
181+
'formattedDateShort': 'Mar 4, 7:00 PM (UTC)',
182+
'date': '2025-03-04T19:00:00.000Z',
183+
'showIntervalOnXAxis': false,
184+
'totalSpendFormatted': '$505',
185+
},
186+
{
187+
'name': 20,
188+
'totalSpend': 704.432954,
189+
'formattedDate': '8:00 PM',
190+
'formattedDateShort': 'Mar 4, 8:00 PM (UTC)',
191+
'date': '2025-03-04T20:00:00.000Z',
192+
'showIntervalOnXAxis': true,
193+
'totalSpendFormatted': '$704',
194+
},
195+
{
196+
'name': 21,
197+
'totalSpend': 811.798855,
198+
'formattedDate': '9:00 PM',
199+
'formattedDateShort': 'Mar 4, 9:00 PM (UTC)',
200+
'date': '2025-03-04T21:00:00.000Z',
201+
'showIntervalOnXAxis': false,
202+
'totalSpendFormatted': '$812',
203+
},
204+
{
205+
'name': 22,
206+
'totalSpend': 846.303174,
207+
'formattedDate': '10:00 PM',
208+
'formattedDateShort': 'Mar 4, 10:00 PM (UTC)',
209+
'date': '2025-03-04T22:00:00.000Z',
210+
'showIntervalOnXAxis': false,
211+
'totalSpendFormatted': '$846',
212+
},
213+
{
214+
'name': 23,
215+
'totalSpend': 826.89691,
216+
'formattedDate': '11:00 PM',
217+
'formattedDateShort': 'Mar 4, 11:00 PM (UTC)',
218+
'date': '2025-03-04T23:00:00.000Z',
219+
'showIntervalOnXAxis': false,
220+
'totalSpendFormatted': '$827',
221+
},
18222
];
19223

224+
const chartData = data.map(({ name, totalSpend }) => ({ name, totalSpend }));
225+
226+
const axisData = {};
227+
228+
data.forEach(({ name, totalSpend, formattedDate, showIntervalOnXAxis }) => {
229+
// @ts-expect-error - TS7053
230+
axisData[name] = { totalSpend, formattedDate, showIntervalOnXAxis };
231+
});
232+
20233
return (
21234
<ChartGraph
22235
accessibilityLabel="Clicks compared to conversions (example)"
23-
data={data}
24-
elements={[
25-
{ type: 'bar', id: 'Clicks', axis: 'left' },
26-
{ type: 'line', id: 'Conversions', axis: 'right' },
27-
]}
28-
layout="verticalBiaxial"
236+
data={chartData}
237+
elements={[{ type: 'line', id: 'totalSpend', axis: 'left' }]}
238+
layout="vertical"
29239
modalZIndex={new FixedZIndex(11)}
30240
onVisualPatternChange={() => {}}
31241
range={{
32242
xAxisBottom: ['auto', 'auto'],
33243
}}
34244
tickFormatter={{
35-
timeseries: (date) =>
36-
`${new Intl.DateTimeFormat('en-US', { month: 'short' }).format(
37-
date,
38-
)}-${new Intl.DateTimeFormat('en-US', { day: '2-digit' }).format(date)}`,
39-
yAxisLeft: (value) => `${value}%`,
40-
yAxisRight: (value) => `${value}%`,
41-
xAxisBottom: (date, index) => {
42-
if (index === 0) return 'Quarter 1';
43-
if (index === 3) return 'Quarter 2';
44-
if (index === 6) return 'Quarter 3';
45-
if (index === 9) return 'Quarter 4';
46-
return '';
47-
},
245+
timeseries: (idx) => idx,
246+
xAxisBottom: (idx) =>
247+
// @ts-expect-error - TS7053
248+
axisData[idx].showIntervalOnXAxis ? axisData[idx].formattedDate : '',
48249
}}
49250
title="Clicks compared to conversions"
50-
type="combo"
251+
type="line"
51252
visualPatternSelected="disabled"
52253
/>
53254
);

‎packages/gestalt-charts/src/ChartGraph/renderAxis.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,6 @@ export default function renderAxis({
8484
domain={isTimeSeries ? !Array.isArray(range) && range?.xAxisBottom : undefined}
8585
interval={0}
8686
orientation="bottom"
87-
padding="no-gap"
8887
reversed={isRtl}
8988
scale={isTimeSeries ? 'time' : undefined}
9089
// @ts-expect-error - TS2322

0 commit comments

Comments
 (0)