Skip to content

Commit 62ac69c

Browse files
JeanMarcMilletScalityJeanMarcMilletScality
committed
Update Barchart to create histogram type barchart
1 parent dcd6d64 commit 62ac69c

File tree

5 files changed

+82
-27
lines changed

5 files changed

+82
-27
lines changed

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

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ describe('Barchart', () => {
6060
render(
6161
<Wrapper>
6262
<ChartLegendWrapper colorSet={testColorSet}>
63-
<Barchart type="category" bars={testBars} />
63+
<Barchart type={{ type: 'category' }} bars={testBars} />
6464
</ChartLegendWrapper>
6565
</Wrapper>,
6666
);
@@ -98,7 +98,7 @@ describe('Barchart', () => {
9898
render(
9999
<Wrapper>
100100
<ChartLegendWrapper colorSet={testColorSet}>
101-
<Barchart type="category" bars={[]} isError />
101+
<Barchart type={{ type: 'category' }} bars={[]} isError />
102102
</ChartLegendWrapper>
103103
</Wrapper>,
104104
);
@@ -111,7 +111,7 @@ describe('Barchart', () => {
111111
render(
112112
<Wrapper>
113113
<ChartLegendWrapper colorSet={testColorSet}>
114-
<Barchart type="category" bars={[]} isLoading />
114+
<Barchart type={{ type: 'category' }} bars={[]} isLoading />
115115
</ChartLegendWrapper>
116116
</Wrapper>,
117117
);
@@ -122,7 +122,7 @@ describe('Barchart', () => {
122122
render(
123123
<Wrapper>
124124
<ChartLegendWrapper colorSet={testColorSet}>
125-
<Barchart type="category" bars={undefined} />
125+
<Barchart type={{ type: 'category' }} bars={undefined} />
126126
</ChartLegendWrapper>
127127
</Wrapper>,
128128
);
@@ -316,7 +316,11 @@ describe('Barchart', () => {
316316
render(
317317
<Wrapper>
318318
<ChartLegendWrapper colorSet={{ ...testColorSet, Failed: 'red' }}>
319-
<Barchart type="category" bars={testStackedBars} stacked={true} />
319+
<Barchart
320+
type={{ type: 'category' }}
321+
bars={testStackedBars}
322+
stacked={true}
323+
/>
320324
</ChartLegendWrapper>
321325
</Wrapper>,
322326
);
@@ -344,7 +348,7 @@ describe('Barchart', () => {
344348
<Wrapper>
345349
<ChartLegendWrapper colorSet={testColorSet}>
346350
<Barchart
347-
type="category"
351+
type={{ type: 'category' }}
348352
bars={testBars}
349353
defaultSort={(pointA, pointB) => {
350354
const valueA = pointA.Success;
@@ -369,7 +373,7 @@ describe('Barchart', () => {
369373
<Wrapper>
370374
<ChartLegendWrapper colorSet={testColorSet}>
371375
<Barchart
372-
type="category"
376+
type={{ type: 'category' }}
373377
bars={[]}
374378
title="Test Title"
375379
secondaryTitle="Test Secondary Title"

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

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,11 @@ export type TimeType = {
4545
interval: number;
4646
};
4747
};
48+
49+
export type CategoryType = {
50+
type: 'category';
51+
gap?: number;
52+
};
4853
export type Point = {
4954
key: string | number;
5055
values: { label: string; value: number }[];
@@ -70,7 +75,7 @@ export type BarchartSortFn<T extends BarchartBars> = (
7075
) => 1 | -1 | 0;
7176

7277
export type BarchartProps<T extends BarchartBars> = {
73-
type: 'category' | TimeType;
78+
type: CategoryType | TimeType;
7479
bars?: T;
7580
tooltip?: BarchartTooltipFn<T>;
7681
defaultSort?: BarchartSortFn<T>;
@@ -260,7 +265,7 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
260265
const {
261266
height = CHART_CONSTANTS.DEFAULT_HEIGHT,
262267
bars,
263-
type = 'category',
268+
type = { type: 'category' },
264269
unitRange,
265270
stacked,
266271
stackedBarSort = 'default',
@@ -314,9 +319,16 @@ export const Barchart = <T extends BarchartBars>(props: BarchartProps<T>) => {
314319
<BarChart
315320
data={rechartsData}
316321
accessibilityLayer
317-
barSize={CHART_CONSTANTS.BAR_SIZE}
322+
barSize={
323+
type.type === 'category'
324+
? type.gap === 0
325+
? undefined
326+
: CHART_CONSTANTS.BAR_SIZE
327+
: CHART_CONSTANTS.BAR_SIZE
328+
}
318329
height={height}
319330
margin={CHART_CONSTANTS.CHART_MARGIN}
331+
barCategoryGap={type.type === 'category' ? type.gap : undefined}
320332
>
321333
<CartesianGrid
322334
vertical={false}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -570,7 +570,7 @@ describe('formatPrometheusDataToRechartsDataAndBars', () => {
570570

571571
const result = formatPrometheusDataToRechartsDataAndBars(
572572
bars,
573-
'category',
573+
{ type: 'category' },
574574
{
575575
Success: coreUIAvailableThemes.darkRebrand.statusHealthy,
576576
Failed: coreUIAvailableThemes.darkRebrand.statusCritical,
@@ -647,7 +647,7 @@ describe('formatPrometheusDataToRechartsDataAndBars', () => {
647647

648648
const result = formatPrometheusDataToRechartsDataAndBars(
649649
bars,
650-
'category',
650+
{ type: 'category' },
651651
mockTheme,
652652
false,
653653
(pointA, pointB) => {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -271,11 +271,11 @@ export const formatPrometheusDataToRechartsDataAndBars = <
271271
);
272272

273273
let data =
274-
type !== 'category' && type.type === 'time'
274+
type.type !== 'category' && type.type === 'time'
275275
? transformTimeData(bars, type, barDataKeys)
276276
: transformCategoryData(bars, barDataKeys);
277277

278-
if (type === 'category' && defaultSort) {
278+
if (type.type === 'category' && defaultSort) {
279279
data = applySortingToData(data, barDataKeys, defaultSort);
280280
}
281281

‎stories/BarChart/barchart.stories.tsx‎

Lines changed: 52 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ export const Playground: Story = {
6161
}}
6262
>
6363
<Stack direction="vertical" gap="r16">
64-
<Barchart type="category" bars={exampleData} />
64+
<Barchart type={{ type: 'category' }} bars={exampleData} />
6565
<ChartLegend shape="rectangle" direction="horizontal" />
6666
</Stack>
6767
</ChartLegendWrapper>
@@ -332,7 +332,7 @@ export const CapacityWithUnitRange: Story = {
332332
}}
333333
>
334334
<Barchart
335-
type="category"
335+
type={{ type: 'category' }}
336336
bars={capacityDataWithUnitRange}
337337
unitRange={[
338338
{
@@ -402,7 +402,7 @@ export const Stacked: Story = {
402402
}}
403403
>
404404
<Stack direction="vertical" gap="r16">
405-
<Barchart type="category" bars={stackedData} stacked />
405+
<Barchart type={{ type: 'category' }} bars={stackedData} stacked />
406406
<ChartLegend shape="rectangle" />
407407
</Stack>
408408
</ChartLegendWrapper>
@@ -453,7 +453,7 @@ export const DefaultSort: Story = {
453453
}}
454454
>
455455
<Barchart
456-
type="category"
456+
type={{ type: 'category' }}
457457
stacked
458458
bars={defaultSortData}
459459
defaultSort={customSort}
@@ -531,7 +531,7 @@ export const WithCustomTooltip: Story = {
531531
>
532532
<Stack direction="vertical" gap="r16">
533533
<Barchart
534-
type="category"
534+
type={{ type: 'category' }}
535535
bars={exampleData}
536536
tooltip={customTooltip}
537537
height={300}
@@ -602,7 +602,7 @@ export const StatusColors: Story = {
602602
>
603603
<Stack direction="vertical" gap="r16">
604604
<Barchart
605-
type="category"
605+
type={{ type: 'category' }}
606606
bars={statusData}
607607
stacked
608608
title="System Health Metrics"
@@ -656,7 +656,7 @@ export const LegendShapes: Story = {
656656
>
657657
<Stack direction="vertical" gap="r16">
658658
<Barchart
659-
type="category"
659+
type={{ type: 'category' }}
660660
bars={exampleData}
661661
height={200}
662662
title="Horizontal Rectangle Legend"
@@ -673,7 +673,7 @@ export const LegendShapes: Story = {
673673
>
674674
<Stack direction="vertical" gap="r16">
675675
<Barchart
676-
type="category"
676+
type={{ type: 'category' }}
677677
bars={exampleData}
678678
height={200}
679679
title="Vertical Line Legend"
@@ -727,14 +727,14 @@ export const BarchartsWithSingleLegend: Story = {
727727
}}
728728
>
729729
<Barchart
730-
type="category"
730+
type={{ type: 'category' }}
731731
bars={exampleData}
732732
height={200}
733733
title="Barchart 1"
734734
/>
735735

736736
<Barchart
737-
type="category"
737+
type={{ type: 'category' }}
738738
bars={exampleData}
739739
height={200}
740740
title="Barchart 2"
@@ -757,7 +757,7 @@ export const ErrorState: Story = {
757757
}}
758758
>
759759
<Barchart
760-
type="category"
760+
type={{ type: 'category' }}
761761
bars={[]}
762762
isError
763763
title="Error State"
@@ -808,7 +808,7 @@ export const StackedBarSort: Story = {
808808
}}
809809
>
810810
<Barchart
811-
type="category"
811+
type={{ type: 'category' }}
812812
bars={statusesData}
813813
stacked
814814
stackedBarSort={sort}
@@ -883,7 +883,7 @@ export const CompleteExample: Story = {
883883
}}
884884
>
885885
<Barchart
886-
type="category"
886+
type={{ type: 'category' }}
887887
title="Loading BarChart"
888888
helpTooltip="Click on the button to load or unload data"
889889
secondaryTitle={isLoading ? 'Loading...' : 'Loaded data'}
@@ -911,3 +911,42 @@ export const CompleteExample: Story = {
911911
);
912912
},
913913
};
914+
915+
export const Histogram: Story = {
916+
render: () => {
917+
const histogramData = [
918+
{
919+
label: 'Success',
920+
data: [
921+
['0-10', 1],
922+
['10-20', 5],
923+
['20-30', 15],
924+
['30-40', 40],
925+
['40-50', 45],
926+
['50-60', 50],
927+
['60-70', 40],
928+
['70-80', 15],
929+
['80-90', 5],
930+
['90-100', 1],
931+
],
932+
},
933+
] as const;
934+
const theme = useTheme() as CoreUITheme;
935+
return (
936+
<div style={{ width: '50%', padding: spacing.r16 }}>
937+
<ChartLegendWrapper
938+
colorSet={{
939+
Success: theme.statusHealthy,
940+
Failed: theme.statusCritical,
941+
}}
942+
>
943+
<Barchart
944+
type={{ type: 'category', gap: 0 }}
945+
bars={histogramData}
946+
title="Histogram"
947+
/>
948+
</ChartLegendWrapper>
949+
</div>
950+
);
951+
},
952+
};

0 commit comments

Comments
 (0)