Skip to content

Commit a8ebb89

Browse files
bert-ebert-e
committed
Merge branch 'improvement/barchar-tick-format' into q/1.0
2 parents 6e351c1 + 35cccf3 commit a8ebb89

File tree

4 files changed

+92
-59
lines changed

4 files changed

+92
-59
lines changed

‎src/lib/components/barchartv2/Barchart.component.test.tsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -362,7 +362,7 @@ describe('Barchart', () => {
362362
expect(categories[2]).toHaveTextContent('category1'); // 10 (lowest)
363363
});
364364

365-
it('should render header with title, secondary title, right title and help tooltip', async () => {
365+
it('should render header with title, secondary title, right title and helpIcon', async () => {
366366
const { Wrapper } = getWrapper();
367367
render(
368368
<Wrapper>
@@ -382,8 +382,6 @@ describe('Barchart', () => {
382382
expect(screen.getByText('Test Title')).toBeInTheDocument();
383383
expect(screen.getByText('Test Secondary Title')).toBeInTheDocument();
384384
expect(screen.getByText('Test Right Title')).toBeInTheDocument();
385-
await waitFor(() => {
386-
expect(screen.getByLabelText('Test Help Tooltip')).toBeInTheDocument();
387-
});
385+
expect(screen.getByLabelText('Info')).toBeInTheDocument();
388386
});
389387
});

‎src/lib/components/barchartv2/Barchart.component.tsx‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,12 @@ import { ConstrainedText } from '../constrainedtext/Constrainedtext.component';
1818
import { IconHelp } from '../iconhelper/IconHelper';
1919
import { Loader } from '../loader/Loader.component';
2020
import { Text } from '../text/Text.component';
21-
import { renderTooltipContent, UnitRange, useChartData } from './utils';
21+
import {
22+
formatDate,
23+
renderTooltipContent,
24+
UnitRange,
25+
useChartData,
26+
} from './utils';
2227
import { useChartLegend } from '../chartlegend/ChartLegendWrapper';
2328

2429
const CHART_CONSTANTS = {
@@ -74,7 +79,7 @@ export type BarchartProps<T extends BarchartBars> = {
7479
tooltip?: BarchartTooltipFn<T>;
7580
defaultSort?: BarchartSortFn<T>;
7681
unitRange?: UnitRange;
77-
helpTooltip?: string;
82+
helpTooltip?: React.ReactNode;
7883
stacked?: boolean;
7984
/**
8085
* Sort the bars by default or by legend order
@@ -99,6 +104,7 @@ interface CustomTickProps {
99104
};
100105
visibleTicksCount: number;
101106
width: number;
107+
type: TimeType;
102108
}
103109

104110
/* ---------------------------------- COMPONENTS ---------------------------------- */
@@ -109,6 +115,7 @@ const CustomTick = ({
109115
payload,
110116
visibleTicksCount,
111117
width,
118+
type,
112119
}: CustomTickProps) => {
113120
const theme = useTheme();
114121
const tickWidth =
@@ -126,7 +133,9 @@ const CustomTick = ({
126133
<ConstrainedText
127134
text={
128135
<Text variant="Smaller" color="textSecondary">
129-
{String(payload.value)}
136+
{type.type === 'time'
137+
? formatDate(new Date(payload.value), type.timeRange.interval)
138+
: String(payload.value)}
130139
</Text>
131140
}
132141
centered
@@ -157,16 +166,14 @@ const ChartHeader = ({
157166
}: {
158167
title?: string;
159168
secondaryTitle?: string;
160-
helpTooltip?: string;
169+
helpTooltip?: React.ReactNode;
161170
rightTitle?: React.ReactNode;
162171
}) => {
163172
return (
164173
<Wrap>
165174
<Stack gap="r4">
166175
<Text variant="ChartTitle">{title}</Text>
167-
{helpTooltip && (
168-
<IconHelp tooltipMessage={helpTooltip} title={helpTooltip} />
169-
)}
176+
{helpTooltip && <IconHelp tooltipMessage={helpTooltip} />}
170177

171178
{secondaryTitle && (
172179
<Text
@@ -330,7 +337,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
330337
/>
331338
<XAxis
332339
dataKey="category"
333-
tick={(props) => <CustomTick {...props} />}
340+
tick={(props) => <CustomTick {...props} type={type} />}
334341
type="category"
335342
interval={0}
336343
allowDataOverflow={true}

‎src/lib/components/barchartv2/utils.test.ts‎

Lines changed: 72 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,21 @@ import {
1313
UnitRange,
1414
} from './utils';
1515

16+
// Test date constants to avoid repetition
17+
const TEST_DATES = {
18+
JULY_5_2024: new Date('2024-07-05T00:00:00'),
19+
JULY_6_2024: new Date('2024-07-06T00:00:00'),
20+
JULY_7_2024: new Date('2024-07-07T00:00:00'),
21+
JULY_5_10AM: new Date('2024-07-05T10:00:00'),
22+
JULY_5_11AM: new Date('2024-07-05T11:00:00'),
23+
JULY_5_8_30AM: new Date('2024-07-05T08:30:00'),
24+
JULY_5_2_45PM: new Date('2024-07-05T14:45:00'),
25+
JULY_6_9_15AM: new Date('2024-07-06T09:15:00'),
26+
JULY_5_8AM: new Date('2024-07-05T08:00:00'),
27+
JULY_6_2PM: new Date('2024-07-06T14:00:00'),
28+
JULY_7_10AM: new Date('2024-07-07T10:00:00'),
29+
} as const;
30+
1631
// Mock theme object for tests
1732
const mockTheme = {
1833
statusHealthy: '#00D100',
@@ -46,17 +61,17 @@ describe('transformTimeData', () => {
4661
{
4762
label: 'Success',
4863
data: [
49-
[new Date('2024-07-05T00:00:00'), 10],
50-
[new Date('2024-07-06T00:00:00'), 20],
64+
[TEST_DATES.JULY_5_2024, 10],
65+
[TEST_DATES.JULY_6_2024, 20],
5166
] as [Date, number][],
5267
},
5368
];
5469

5570
const type = {
5671
type: 'time' as const,
5772
timeRange: {
58-
startDate: new Date('2024-07-05T00:00:00'),
59-
endDate: new Date('2024-07-06T00:00:00'),
73+
startDate: TEST_DATES.JULY_5_2024,
74+
endDate: TEST_DATES.JULY_6_2024,
6075
interval: 24 * 60 * 60 * 1000, // 1 day
6176
},
6277
};
@@ -66,8 +81,8 @@ describe('transformTimeData', () => {
6681
const result = transformTimeData(bars, type, barDataKeys);
6782

6883
expect(result).toEqual([
69-
{ category: 'Fri05Jul', Success: 10 },
70-
{ category: 'Sat06Jul', Success: 20 },
84+
{ category: TEST_DATES.JULY_5_2024.valueOf(), Success: 10 },
85+
{ category: TEST_DATES.JULY_6_2024.valueOf(), Success: 20 },
7186
]);
7287
});
7388

@@ -76,18 +91,18 @@ describe('transformTimeData', () => {
7691
{
7792
label: 'Success',
7893
data: [
79-
[new Date('2024-07-05T00:00:00'), 10],
94+
[TEST_DATES.JULY_5_2024, 10],
8095
// Missing July 6th
81-
[new Date('2024-07-07T00:00:00'), 30],
96+
[TEST_DATES.JULY_7_2024, 30],
8297
] as [Date, number][],
8398
},
8499
];
85100

86101
const type = {
87102
type: 'time' as const,
88103
timeRange: {
89-
startDate: new Date('2024-07-05T00:00:00'),
90-
endDate: new Date('2024-07-07T00:00:00'),
104+
startDate: TEST_DATES.JULY_5_2024,
105+
endDate: TEST_DATES.JULY_7_2024,
91106
interval: 24 * 60 * 60 * 1000, // 1 day
92107
},
93108
};
@@ -97,9 +112,9 @@ describe('transformTimeData', () => {
97112
const result = transformTimeData(bars, type, barDataKeys);
98113

99114
expect(result).toEqual([
100-
{ category: 'Fri05Jul', Success: 10 },
101-
{ category: 'Sat06Jul', Success: 0 }, // Missing data filled with 0
102-
{ category: 'Sun07Jul', Success: 30 },
115+
{ category: TEST_DATES.JULY_5_2024.valueOf(), Success: 10 },
116+
{ category: TEST_DATES.JULY_6_2024.valueOf(), Success: 0 }, // Missing data filled with 0
117+
{ category: TEST_DATES.JULY_7_2024.valueOf(), Success: 30 },
103118
]);
104119
});
105120

@@ -108,17 +123,17 @@ describe('transformTimeData', () => {
108123
{
109124
label: 'Success',
110125
data: [
111-
[new Date('2024-07-05T10:00:00'), 10],
112-
[new Date('2024-07-05T11:00:00'), 20],
126+
[TEST_DATES.JULY_5_10AM, 10],
127+
[TEST_DATES.JULY_5_11AM, 20],
113128
] as [Date, number][],
114129
},
115130
];
116131

117132
const type = {
118133
type: 'time' as const,
119134
timeRange: {
120-
startDate: new Date('2024-07-05T10:00:00'),
121-
endDate: new Date('2024-07-05T11:00:00'),
135+
startDate: TEST_DATES.JULY_5_10AM,
136+
endDate: TEST_DATES.JULY_5_11AM,
122137
interval: 60 * 60 * 1000, // 1 hour
123138
},
124139
};
@@ -128,8 +143,8 @@ describe('transformTimeData', () => {
128143
const result = transformTimeData(bars, type, barDataKeys);
129144

130145
expect(result).toEqual([
131-
{ category: '10:00', Success: 10 },
132-
{ category: '11:00', Success: 20 },
146+
{ category: TEST_DATES.JULY_5_10AM.valueOf(), Success: 10 },
147+
{ category: TEST_DATES.JULY_5_11AM.valueOf(), Success: 20 },
133148
]);
134149
});
135150

@@ -138,18 +153,18 @@ describe('transformTimeData', () => {
138153
{
139154
label: 'Success',
140155
data: [
141-
[new Date('2024-07-05T08:30:00'), 10], // 8:30 AM
142-
[new Date('2024-07-05T14:45:00'), 25], // 2:45 PM (should overwrite 8:30 AM)
143-
[new Date('2024-07-06T09:15:00'), 15], // Next day
156+
[TEST_DATES.JULY_5_8_30AM, 10], // 8:30 AM
157+
[TEST_DATES.JULY_5_2_45PM, 25], // 2:45 PM (should overwrite 8:30 AM)
158+
[TEST_DATES.JULY_6_9_15AM, 15], // Next day
144159
] as [Date, number][],
145160
},
146161
];
147162

148163
const type = {
149164
type: 'time' as const,
150165
timeRange: {
151-
startDate: new Date('2024-07-05T00:00:00'),
152-
endDate: new Date('2024-07-06T00:00:00'),
166+
startDate: TEST_DATES.JULY_5_2024,
167+
endDate: TEST_DATES.JULY_6_2024,
153168
interval: 24 * 60 * 60 * 1000, // 1 day
154169
},
155170
};
@@ -159,8 +174,8 @@ describe('transformTimeData', () => {
159174
const result = transformTimeData(bars, type, barDataKeys);
160175

161176
expect(result).toEqual([
162-
{ category: 'Fri05Jul', Success: 25 }, // Last value for July 5th
163-
{ category: 'Sat06Jul', Success: 15 }, // July 6th value
177+
{ category: TEST_DATES.JULY_5_2024.valueOf(), Success: 25 }, // Last value for July 5th
178+
{ category: TEST_DATES.JULY_6_2024.valueOf(), Success: 15 }, // July 6th value
164179
]);
165180
});
166181

@@ -169,18 +184,18 @@ describe('transformTimeData', () => {
169184
{
170185
label: 'Success',
171186
data: [
172-
[new Date('2024-07-07T10:00:00'), 30], // July 7th (latest)
173-
[new Date('2024-07-05T08:00:00'), 10], // July 5th (earliest)
174-
[new Date('2024-07-06T14:00:00'), 20], // July 6th (middle)
187+
[TEST_DATES.JULY_7_10AM, 30], // July 7th (latest)
188+
[TEST_DATES.JULY_5_8AM, 10], // July 5th (earliest)
189+
[TEST_DATES.JULY_6_2PM, 20], // July 6th (middle)
175190
] as [Date, number][],
176191
},
177192
];
178193

179194
const type = {
180195
type: 'time' as const,
181196
timeRange: {
182-
startDate: new Date('2024-07-05T00:00:00'),
183-
endDate: new Date('2024-07-07T00:00:00'),
197+
startDate: TEST_DATES.JULY_5_2024,
198+
endDate: TEST_DATES.JULY_7_2024,
184199
interval: 24 * 60 * 60 * 1000, // 1 day
185200
},
186201
};
@@ -191,29 +206,29 @@ describe('transformTimeData', () => {
191206

192207
// Should be in chronological order regardless of input order
193208
expect(result).toEqual([
194-
{ category: 'Fri05Jul', Success: 10 },
195-
{ category: 'Sat06Jul', Success: 20 },
196-
{ category: 'Sun07Jul', Success: 30 },
209+
{ category: TEST_DATES.JULY_5_2024.valueOf(), Success: 10 },
210+
{ category: TEST_DATES.JULY_6_2024.valueOf(), Success: 20 },
211+
{ category: TEST_DATES.JULY_7_2024.valueOf(), Success: 30 },
197212
]);
198213
});
199214

200215
it('should display multiple metrics with different time coverage', () => {
201216
const bars = [
202217
{
203218
label: 'Success',
204-
data: [[new Date('2024-07-05T00:00:00'), 10]] as [Date, number][],
219+
data: [[TEST_DATES.JULY_5_2024, 10]] as [Date, number][],
205220
},
206221
{
207222
label: 'Failed',
208-
data: [[new Date('2024-07-06T00:00:00'), 5]] as [Date, number][],
223+
data: [[TEST_DATES.JULY_6_2024, 5]] as [Date, number][],
209224
},
210225
];
211226

212227
const type = {
213228
type: 'time' as const,
214229
timeRange: {
215-
startDate: new Date('2024-07-05T00:00:00'),
216-
endDate: new Date('2024-07-06T00:00:00'),
230+
startDate: TEST_DATES.JULY_5_2024,
231+
endDate: TEST_DATES.JULY_6_2024,
217232
interval: 24 * 60 * 60 * 1000, // 1 day
218233
},
219234
};
@@ -223,8 +238,16 @@ describe('transformTimeData', () => {
223238
const result = transformTimeData(bars, type, barDataKeys);
224239

225240
expect(result).toEqual([
226-
{ category: 'Fri05Jul', Success: 10, Failed: 0 },
227-
{ category: 'Sat06Jul', Success: 0, Failed: 5 },
241+
{
242+
category: TEST_DATES.JULY_5_2024.valueOf(),
243+
Success: 10,
244+
Failed: 0,
245+
},
246+
{
247+
category: TEST_DATES.JULY_6_2024.valueOf(),
248+
Success: 0,
249+
Failed: 5,
250+
},
228251
]);
229252
});
230253
});
@@ -570,11 +593,11 @@ describe('formatPrometheusDataToRechartsDataAndBars', () => {
570593
const bars = [
571594
{
572595
label: 'Success Count',
573-
data: [[new Date('2024-07-05T00:00:00'), 10]] as [Date, number][],
596+
data: [[TEST_DATES.JULY_5_2024, 10]] as [Date, number][],
574597
},
575598
{
576599
label: 'Failed Count',
577-
data: [[new Date('2024-07-05T00:00:00'), 5]] as [Date, number][],
600+
data: [[TEST_DATES.JULY_5_2024, 5]] as [Date, number][],
578601
},
579602
];
580603

@@ -583,8 +606,8 @@ describe('formatPrometheusDataToRechartsDataAndBars', () => {
583606
{
584607
type: 'time',
585608
timeRange: {
586-
startDate: new Date('2024-07-05T00:00:00'),
587-
endDate: new Date('2024-07-05T00:00:00'),
609+
startDate: TEST_DATES.JULY_5_2024,
610+
endDate: TEST_DATES.JULY_5_2024,
588611
interval: 24 * 60 * 60 * 1000,
589612
},
590613
},
@@ -598,7 +621,11 @@ describe('formatPrometheusDataToRechartsDataAndBars', () => {
598621

599622
// Should integrate: time transformation + status color assignment
600623
expect(result.data).toEqual([
601-
{ category: 'Fri05Jul', 'Success Count': 10, 'Failed Count': 5 },
624+
{
625+
category: TEST_DATES.JULY_5_2024.valueOf(),
626+
'Success Count': 10,
627+
'Failed Count': 5,
628+
},
602629
]);
603630
expect(result.rechartsBars).toEqual([
604631
{ dataKey: 'Success Count', fill: '#4BE4E2' }, // lineColor3

‎src/lib/components/barchartv2/utils.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@ const generateTimeRanges = (
9090
* @param interval - Interval in milliseconds
9191
* @returns Formatted string
9292
*/
93-
const formatDate = (date: Date, interval: number): string => {
93+
export const formatDate = (date: Date, interval: number): string => {
9494
if (interval > 24 * 60 * 60 * 1000) {
9595
return (
9696
DAY_MONTH_FORMATER.format(date).replace(/[ ,]/g, '') +
@@ -156,7 +156,8 @@ export const transformTimeData = <T extends BarchartBars>(
156156

157157
// Initialize all ranges with zeros
158158
timeRanges.forEach((range) => {
159-
const categoryDisplay = formatDate(range.start, type.timeRange.interval);
159+
// const categoryDisplay = formatDate(range.start, type.timeRange.interval);
160+
const categoryDisplay = range.start.getTime();
160161
const initialData: { [key: string]: string | number } = {
161162
category: categoryDisplay,
162163
};

0 commit comments

Comments
 (0)