Skip to content

Commit 7a2cc26

Browse files
dreamwaspdreamwasp
committed
more style config tweaks
1 parent 21b7221 commit 7a2cc26

File tree

7 files changed

+154
-159
lines changed

7 files changed

+154
-159
lines changed

‎packages/gamut/src/BarChart/Bar/elements.tsx‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,11 +8,13 @@ export const minBarWidth = 8;
88

99
const baseBarStyles = {
1010
alignItems: 'center',
11-
height: '100%',
11+
border: 1,
12+
borderColor: 'border-primary',
13+
borderRadius: 'inherit',
1214
display: 'flex',
13-
position: 'absolute',
15+
height: '100%',
1416
left: 0,
15-
borderRadius: 'inherit',
17+
position: 'absolute',
1618
} as const;
1719

1820
/**
@@ -21,8 +23,6 @@ const baseBarStyles = {
2123
export const BackgroundBar = styled(motion.create(Box))(
2224
css({
2325
...baseBarStyles,
24-
border: 1,
25-
borderColor: 'border-primary',
2626
})
2727
);
2828

@@ -33,9 +33,6 @@ export const BackgroundBar = styled(motion.create(Box))(
3333
export const ForegroundBar = styled(motion.create(Box))(
3434
css({
3535
...baseBarStyles,
36-
height: 'calc(100% - 2px)',
37-
top: 1,
38-
zIndex: 1,
3936
})
4037
);
4138

@@ -48,6 +45,7 @@ export const BarWrapper = styled(Box)(
4845
overflow: 'hidden',
4946
position: 'relative',
5047
alignItems: 'center',
48+
flex: 1,
5149
height: { _: 12, sm: 20 },
5250
borderRadius: { _: 'md', sm: 'xl' },
5351
width: '100%',

‎packages/gamut/src/BarChart/BarRow.tsx‎

Lines changed: 31 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,16 @@ import { forwardRef, MouseEvent, MutableRefObject } from 'react';
44

55
import { FlexBox } from '../Box';
66
import { Text } from '../Typography';
7-
import { useBarChartContext } from './BarChartProvider';
8-
import { BarProps } from './types';
9-
import { calculateBarWidth } from './utils';
107
import {
118
BackgroundBar,
129
BarWrapper,
1310
ForegroundBar,
1411
minBarWidth,
1512
} from './Bar/elements';
13+
import { useBarChartContext } from './BarChartProvider';
14+
import { BarProps } from './types';
15+
import { calculateBarWidth, getValuesSummary } from './utils';
1616

17-
// Polymorphic row wrapper styles
1817
const rowBaseStyles = css({
1918
display: 'flex',
2019
alignItems: 'center',
@@ -54,31 +53,9 @@ const RowAnchor = styled('a', styledOptions<'a'>())(
5453
);
5554

5655
export interface BarRowProps extends BarProps {
57-
/** Index for animation staggering */
5856
index?: number;
5957
}
6058

61-
/**
62-
* Generates an accessible summary of the bar values
63-
*/
64-
function getValuesSummary({
65-
yLabel,
66-
seriesOneValue,
67-
seriesTwoValue,
68-
unit,
69-
}: {
70-
yLabel: string;
71-
seriesOneValue: number;
72-
seriesTwoValue?: number;
73-
unit: string;
74-
}): string {
75-
if (seriesTwoValue !== undefined) {
76-
const gained = seriesOneValue;
77-
return `${gained} ${unit} gained - now at ${seriesTwoValue} ${unit} in ${yLabel} category`;
78-
}
79-
return `${seriesOneValue} ${unit} in ${yLabel} category`;
80-
}
81-
8259
export const BarRow = forwardRef<
8360
HTMLDivElement | HTMLButtonElement | HTMLAnchorElement,
8461
BarRowProps
@@ -100,7 +77,6 @@ export const BarRow = forwardRef<
10077
const isStacked = seriesTwoValue !== undefined;
10178
const displayValue = isStacked ? seriesTwoValue : seriesOneValue;
10279

103-
// Calculate bar widths as percentages
10480
const backgroundBarWidth = calculateBarWidth({
10581
value: displayValue,
10682
maxRange,
@@ -123,78 +99,64 @@ export const BarRow = forwardRef<
12399
unit,
124100
});
125101

126-
// Animation delay for staggered bar entrance
127102
const animationDelay = animate ? index * 0.1 : 0;
128103

129104
const rowContent = (
130105
<>
131-
{/* Y-axis label with optional icon */}
132106
<FlexBox
133107
alignItems="center"
134-
gap={8}
135-
minWidth={{ _: 80, sm: 120 }}
108+
color={styleConfig.textColor}
136109
flexShrink={0}
110+
gap={8}
111+
minWidth="200px"
137112
>
138-
{Icon && <Icon size={16} color={styleConfig.textColor} />}
139-
<Text
140-
variant="p-small"
141-
color={styleConfig.textColor}
142-
truncate="ellipsis"
143-
truncateLines={1}
144-
>
113+
{Icon && <Icon size={16} />}
114+
<Text fontWeight='bold' truncate="ellipsis" truncateLines={1}>
145115
{yLabel}
146116
</Text>
147117
</FlexBox>
148118

149-
{/* Bar container */}
150-
<FlexBox flex={1} alignItems="center" position="relative">
151-
<BarWrapper>
152-
{/* Background bar (total value in stacked, or single value in non-stacked) */}
153-
<BackgroundBar
154-
bg={styleConfig.backgroundBarColor}
119+
<BarWrapper>
120+
<BackgroundBar
121+
animate={animate ? { width: bgWidthStr } : undefined}
122+
bg={styleConfig.backgroundBarColor}
123+
data-testid="background-bar"
124+
initial={animate ? { width: '0%' } : undefined}
125+
transition={{ duration: 0.5, delay: animationDelay }}
126+
width={!animate ? bgWidthStr : undefined}
127+
/>
128+
{isStacked && (
129+
<ForegroundBar
130+
animate={animate ? { width: fgWidthStr } : undefined}
131+
bg={styleConfig.foregroundBarColor}
132+
data-testid="foreground-bar"
155133
initial={animate ? { width: '0%' } : undefined}
156-
animate={animate ? { width: bgWidthStr } : undefined}
157-
style={!animate ? { width: bgWidthStr } : undefined}
158-
transition={{ duration: 0.5, delay: animationDelay }}
159-
data-testid="background-bar"
134+
transition={{ duration: 0.5, delay: animationDelay + 0.25 }}
135+
width={!animate ? fgWidthStr : undefined}
160136
/>
137+
)}
138+
</BarWrapper>
161139

162-
{/* Foreground bar (progress value in stacked mode only) */}
163-
{isStacked && (
164-
<ForegroundBar
165-
bg={styleConfig.foregroundBarColor}
166-
initial={animate ? { width: '0%' } : undefined}
167-
animate={animate ? { width: fgWidthStr } : undefined}
168-
style={!animate ? { width: fgWidthStr } : undefined}
169-
transition={{ duration: 0.5, delay: animationDelay + 0.25 }}
170-
data-testid="foreground-bar"
171-
/>
172-
)}
173-
</BarWrapper>
174-
</FlexBox>
175-
176-
{/* Value display */}
177140
<FlexBox
178141
alignItems="center"
142+
flexShrink={0}
179143
justifyContent="flex-end"
180144
minWidth={{ _: 40, sm: 60 }}
181-
flexShrink={0}
182145
>
183-
<Text variant="p-small" color={styleConfig.textColor}>
146+
<Text color={styleConfig.textColor} variant="p-small">
184147
{displayValue.toLocaleString()}
185148
{unit && ` ${unit}`}
186149
</Text>
187150
</FlexBox>
188151
</>
189152
);
190153

191-
// Polymorphic rendering based on interactivity
192154
if (href) {
193155
return (
194156
<li>
195157
<RowAnchor
196-
href={href}
197158
aria-label={valuesSummary}
159+
href={href}
198160
ref={ref as MutableRefObject<HTMLAnchorElement>}
199161
>
200162
{rowContent}
@@ -207,15 +169,15 @@ export const BarRow = forwardRef<
207169
return (
208170
<li>
209171
<RowButton
172+
aria-label={valuesSummary}
173+
ref={ref as MutableRefObject<HTMLButtonElement>}
210174
type="button"
211175
onClick={onClick}
212176
onKeyDown={(e) => {
213177
if (e.key === 'Enter') {
214178
onClick(e as unknown as MouseEvent<HTMLButtonElement>);
215179
}
216180
}}
217-
aria-label={valuesSummary}
218-
ref={ref as MutableRefObject<HTMLButtonElement>}
219181
>
220182
{rowContent}
221183
</RowButton>
@@ -235,5 +197,3 @@ export const BarRow = forwardRef<
235197
);
236198
}
237199
);
238-
239-
BarRow.displayName = 'BarRow';

‎packages/gamut/src/BarChart/GridLines.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const GridLineContainer = styled(Box)(
1919
const GridLine = styled(Box)(
2020
css({
2121
borderLeft: 1,
22-
borderColorLeft: 'border-tertiary',
22+
borderColorLeft: 'background-disabled',
2323
height: '100%',
2424
flex: 1,
2525
'&:first-of-type': {
@@ -29,14 +29,13 @@ const GridLine = styled(Box)(
2929
);
3030

3131
export interface GridLinesProps {
32-
/** Number of grid lines to render */
3332
tickCount: number;
3433
}
3534

3635
export const GridLines: React.FC<GridLinesProps> = ({ tickCount }) => {
3736
const lines = Array.from({ length: tickCount }, (_, i) => (
38-
<GridLine key={i} aria-hidden="true" />
37+
<GridLine aria-hidden key={i} />
3938
));
4039

41-
return <GridLineContainer aria-hidden="true">{lines}</GridLineContainer>;
40+
return <GridLineContainer aria-hidden>{lines}</GridLineContainer>;
4241
};

‎packages/gamut/src/BarChart/ScaleChartHeader.tsx‎

Lines changed: 13 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import styled from '@emotion/styled';
33

44
import { FlexBox } from '../Box';
55
import { Text } from '../Typography';
6-
import { formatNumberUSCompact } from './utils';
6+
import { useBarChartContext } from './BarChartProvider';
7+
import { formatNumberUSCompact, getLabel } from './utils';
78

89
export interface ScaleChartHeaderProps {
910
/** Minimum value on the scale */
@@ -20,47 +21,35 @@ const StyledLabelText = styled(Text)(
2021
})
2122
);
2223

23-
/**
24-
* Calculates the value for a given label position
25-
*/
26-
export const getLabel = (
27-
labelCount: number,
28-
labelIndex: number,
29-
max: number
30-
): number => {
31-
if (labelCount <= 1) return max;
32-
const incrementalDecimal = labelIndex / (labelCount - 1);
33-
return Math.floor(incrementalDecimal * max);
34-
};
35-
36-
/**
37-
* Header component showing the x-axis scale labels
38-
*/
3924
export const ScaleChartHeader: React.FC<ScaleChartHeaderProps> = ({
4025
labelCount,
4126
max,
4227
}) => {
28+
const { styleConfig } = useBarChartContext();
29+
4330
const scaleLabels = Array.from({ length: labelCount }, (_, i) => (
4431
<StyledLabelText
32+
data-testid="chart-header-label"
4533
key={i}
34+
textAlign="center"
35+
textColor={styleConfig.textColor}
4636
variant="p-small"
47-
textColor="text-secondary"
48-
data-testid="chart-header-label"
49-
textAlign={i === 0 ? 'left' : i === labelCount - 1 ? 'right' : 'center'}
5037
>
51-
{formatNumberUSCompact(getLabel(labelCount, i, max))}
38+
{formatNumberUSCompact({
39+
num: getLabel({ labelCount, labelIndex: i, max }),
40+
})}
5241
</StyledLabelText>
5342
));
5443

5544
return (
5645
<FlexBox
57-
width="100%"
46+
aria-hidden="true"
47+
display={{ _: 'none', sm: 'flex' }}
5848
justifyContent="space-between"
5949
mb={8}
6050
pl={{ _: 64, sm: 96 }}
6151
pr={{ _: 40, sm: 64 }}
62-
display={{ _: 'none', sm: 'flex' }}
63-
aria-hidden="true"
52+
width="100%"
6453
>
6554
{scaleLabels}
6655
</FlexBox>

0 commit comments

Comments
 (0)