Skip to content

Commit 49d3a72

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Refactor code and improve legends
1 parent 0b4747e commit 49d3a72

File tree

11 files changed

+906
-738
lines changed

11 files changed

+906
-738
lines changed

‎site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx

Lines changed: 48 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,94 +1,65 @@
1-
import { css } from "@emotion/css";
2-
import { useTheme, type Interpolation, type Theme } from "@emotion/react";
3-
import Tooltip from "@mui/material/Tooltip";
4-
import { forwardRef, type HTMLProps, type ReactNode } from "react";
1+
import type { Interpolation, Theme } from "@emotion/react";
2+
import { type ButtonHTMLAttributes, forwardRef, type HTMLProps } from "react";
53

6-
export type BarColor = {
7-
border: string;
4+
export type BarColors = {
5+
stroke: string;
86
fill: string;
97
};
108

11-
type BarProps = Omit<HTMLProps<HTMLDivElement>, "size" | "color"> & {
12-
width: number;
13-
children?: ReactNode;
9+
type BaseBarProps<T> = Omit<T, "size" | "color"> & {
1410
/**
15-
* Color scheme for the bar. If not passed the default gray color will be
16-
* used.
17-
*/
18-
color?: BarColor;
19-
/**
20-
* Label to be displayed adjacent to the bar component.
11+
* The width of the bar component.
2112
*/
22-
afterLabel?: ReactNode;
13+
size: number;
2314
/**
2415
* The X position of the bar component.
2516
*/
26-
x?: number;
17+
offset: number;
2718
/**
28-
* The tooltip content for the bar.
19+
* Color scheme for the bar. If not passed the default gray color will be
20+
* used.
2921
*/
30-
tooltip?: ReactNode;
22+
colors?: BarColors;
3123
};
3224

25+
type BarProps = BaseBarProps<HTMLProps<HTMLDivElement>>;
26+
3327
export const Bar = forwardRef<HTMLDivElement, BarProps>(
34-
({ color, width, afterLabel, children, x, tooltip, ...htmlProps }, ref) => {
35-
const theme = useTheme();
36-
const row = (
37-
<div
38-
ref={ref}
39-
css={[styles.row, { transform: `translateX(${x}px)` }]}
40-
{...htmlProps}
41-
>
42-
<button
43-
type="button"
44-
css={[
45-
styles.bar,
46-
{
47-
width,
48-
backgroundColor: color?.fill,
49-
borderColor: color?.border,
50-
},
51-
]}
52-
disabled={htmlProps.disabled}
53-
aria-labelledby={htmlProps["aria-labelledby"]}
54-
>
55-
{children}
56-
</button>
57-
{afterLabel}
58-
</div>
28+
({ colors, size, children, offset, ...htmlProps }, ref) => {
29+
return (
30+
<div css={barCss({ colors, size, offset })} {...htmlProps} ref={ref} />
5931
);
32+
},
33+
);
6034

61-
if (tooltip) {
62-
return (
63-
<Tooltip
64-
placement="top-start"
65-
classes={{
66-
tooltip: css({
67-
backgroundColor: theme.palette.background.default,
68-
border: `1px solid ${theme.palette.divider}`,
69-
width: 220,
70-
}),
71-
}}
72-
title={tooltip}
73-
>
74-
{row}
75-
</Tooltip>
76-
);
77-
}
35+
type ClickableBarProps = BaseBarProps<ButtonHTMLAttributes<HTMLButtonElement>>;
7836

79-
return row;
37+
export const ClickableBar = forwardRef<HTMLButtonElement, ClickableBarProps>(
38+
({ colors, size, offset, ...htmlProps }, ref) => {
39+
return (
40+
<button
41+
type="button"
42+
css={[...barCss({ colors, size, offset }), styles.clickable]}
43+
{...htmlProps}
44+
ref={ref}
45+
/>
46+
);
8047
},
8148
);
8249

50+
export const barCss = ({ size, colors, offset }: BaseBarProps<unknown>) => {
51+
return [
52+
styles.bar,
53+
{
54+
width: size,
55+
backgroundColor: colors?.fill,
56+
borderColor: colors?.stroke,
57+
marginLeft: offset,
58+
},
59+
];
60+
};
61+
8362
const styles = {
84-
row: {
85-
// Stack children horizontally for adjacent labels
86-
display: "flex",
87-
alignItems: "center",
88-
width: "fit-content",
89-
gap: 8,
90-
cursor: "pointer",
91-
},
9263
bar: (theme) => ({
9364
border: "1px solid",
9465
borderColor: theme.palette.divider,
@@ -98,14 +69,13 @@ const styles = {
9869
display: "flex",
9970
padding: 0,
10071
minWidth: 8,
72+
}),
73+
clickable: {
74+
cursor: "pointer",
10175

102-
"&:not(:disabled)": {
103-
cursor: "pointer",
104-
105-
"&:focus, &:hover, &:active": {
106-
outline: "none",
107-
borderColor: "#38BDF8",
108-
},
76+
"&:focus, &:hover, &:active": {
77+
outline: "none",
78+
borderColor: "#38BDF8",
10979
},
110-
}),
80+
},
11181
} satisfies Record<string, Interpolation<Theme>>;

‎site/src/modules/workspaces/WorkspaceTiming/Chart/TimingBlocks.tsx renamed to ‎site/src/modules/workspaces/WorkspaceTiming/Chart/BarBlocks.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@ const spaceBetweenBlocks = 4;
77
const moreIconSize = 18;
88
const blockSize = 20;
99

10-
type TimingBlocksProps = {
10+
type BarBlocksProps = {
1111
count: number;
12-
size: number;
12+
barSize: number;
1313
};
1414

15-
export const TimingBlocks: FC<TimingBlocksProps> = ({ count, size }) => {
15+
export const BarBlocks: FC<BarBlocksProps> = ({ count, barSize }) => {
1616
const totalSpaceBetweenBlocks = (count - 1) * spaceBetweenBlocks;
17-
const freeSize = size - sidePadding * 2;
17+
const freeSize = barSize - sidePadding * 2;
1818
const necessarySize = blockSize * count + totalSpaceBetweenBlocks;
1919
const hasSpacing = necessarySize <= freeSize;
2020
const nOfPossibleBlocks = Math.floor(

0 commit comments

Comments
 (0)