Refactor code and improve legends

coder · BrunoQuaresma · Oct 23, 2024 · Sep 19, 2024 · Sep 19, 2024 · Sep 19, 2024
commit 49d3a72af572962895c9618cd20370015a6dd6d4
diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx
@@ -1,94 +1,65 @@
-import { css } from "@emotion/css";
-import { useTheme, type Interpolation, type Theme } from "@emotion/react";
-import Tooltip from "@mui/material/Tooltip";
-import { forwardRef, type HTMLProps, type ReactNode } from "react";
+import type { Interpolation, Theme } from "@emotion/react";
+import { type ButtonHTMLAttributes, forwardRef, type HTMLProps } from "react";
 
-export type BarColor = {
-	border: string;
+export type BarColors = {
+	stroke: string;
 	fill: string;
 };
 
-type BarProps = Omit<HTMLProps<HTMLDivElement>, "size" | "color"> & {
-	width: number;
-	children?: ReactNode;
+type BaseBarProps<T> = Omit<T, "size" | "color"> & {
 	/**
-	 * Color scheme for the bar. If not passed the default gray color will be
-	 * used.
-	 */
-	color?: BarColor;
-	/**
-	 * Label to be displayed adjacent to the bar component.
+	 * The width of the bar component.
 	 */
-	afterLabel?: ReactNode;
+	size: number;
 	/**
 	 * The X position of the bar component.
 	 */
-	x?: number;
+	offset: number;
 	/**
-	 * The tooltip content for the bar.
+	 * Color scheme for the bar. If not passed the default gray color will be
+	 * used.
 	 */
-	tooltip?: ReactNode;
+	colors?: BarColors;
 };
 
+type BarProps = BaseBarProps<HTMLProps<HTMLDivElement>>;
+
 export const Bar = forwardRef<HTMLDivElement, BarProps>(
-	({ color, width, afterLabel, children, x, tooltip, ...htmlProps }, ref) => {
-		const theme = useTheme();
-		const row = (
-			<div
-				ref={ref}
-				css={[styles.row, { transform: `translateX(${x}px)` }]}
-				{...htmlProps}
-			>
-				<button
-					type="button"
-					css={[
-						styles.bar,
-						{
-							width,
-							backgroundColor: color?.fill,
-							borderColor: color?.border,
-						},
-					]}
-					disabled={htmlProps.disabled}
-					aria-labelledby={htmlProps["aria-labelledby"]}
-				>
-					{children}
-				</button>
-				{afterLabel}
-			</div>
+	({ colors, size, children, offset, ...htmlProps }, ref) => {
+		return (
+			<div css={barCss({ colors, size, offset })} {...htmlProps} ref={ref} />
 		);
+	},
+);
 
-		if (tooltip) {
-			return (
-				<Tooltip
-					placement="top-start"
-					classes={{
-						tooltip: css({
-							backgroundColor: theme.palette.background.default,
-							border: `1px solid ${theme.palette.divider}`,
-							width: 220,
-						}),
-					}}
-					title={tooltip}
-				>
-					{row}
-				</Tooltip>
-			);
-		}
+type ClickableBarProps = BaseBarProps<ButtonHTMLAttributes<HTMLButtonElement>>;
 
-		return row;
+export const ClickableBar = forwardRef<HTMLButtonElement, ClickableBarProps>(
+	({ colors, size, offset, ...htmlProps }, ref) => {
+		return (
+			<button
+				type="button"
+				css={[...barCss({ colors, size, offset }), styles.clickable]}
+				{...htmlProps}
+				ref={ref}
+			/>
+		);
 	},
 );
 
+export const barCss = ({ size, colors, offset }: BaseBarProps<unknown>) => {
+	return [
+		styles.bar,
+		{
+			width: size,
+			backgroundColor: colors?.fill,
+			borderColor: colors?.stroke,
+			marginLeft: offset,
+		},
+	];
+};
+
 const styles = {
-	row: {
-		// Stack children horizontally for adjacent labels
-		display: "flex",
-		alignItems: "center",
-		width: "fit-content",
-		gap: 8,
-		cursor: "pointer",
-	},
 	bar: (theme) => ({
 		border: "1px solid",
 		borderColor: theme.palette.divider,
@@ -98,14 +69,13 @@ const styles = {
 		display: "flex",
 		padding: 0,
 		minWidth: 8,
+	}),
+	clickable: {
+		cursor: "pointer",
 
-		"&:not(:disabled)": {
-			cursor: "pointer",
-
-			"&:focus, &:hover, &:active": {
-				outline: "none",
-				borderColor: "#38BDF8",
-			},
+		"&:focus, &:hover, &:active": {
+			outline: "none",
+			borderColor: "#38BDF8",
 		},
-	}),
+	},
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/...es/WorkspaceTiming/Chart/TimingBlocks.tsx → ...paces/WorkspaceTiming/Chart/BarBlocks.tsx b/...es/WorkspaceTiming/Chart/TimingBlocks.tsx → ...paces/WorkspaceTiming/Chart/BarBlocks.tsx
@@ -7,14 +7,14 @@ const spaceBetweenBlocks = 4;
 const moreIconSize = 18;
 const blockSize = 20;
 
-type TimingBlocksProps = {
+type BarBlocksProps = {
 	count: number;
-	size: number;
+	barSize: number;
 };
 
-export const TimingBlocks: FC<TimingBlocksProps> = ({ count, size }) => {
+export const BarBlocks: FC<BarBlocksProps> = ({ count, barSize }) => {
 	const totalSpaceBetweenBlocks = (count - 1) * spaceBetweenBlocks;
-	const freeSize = size - sidePadding * 2;
+	const freeSize = barSize - sidePadding * 2;
 	const necessarySize = blockSize * count + totalSpaceBetweenBlocks;
 	const hasSpacing = necessarySize <= freeSize;
 	const nOfPossibleBlocks = Math.floor(