coder · BrunoQuaresma · Sep 19, 2024 · Sep 19, 2024 · Sep 19, 2024 · Sep 20, 2024
diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx
@@ -0,0 +1,92 @@
+import type { Interpolation, Theme } from "@emotion/react";
+import { type ButtonHTMLAttributes, type HTMLProps, forwardRef } from "react";
+import { CSSVars } from "./constants";
+
+export type BarColors = {
+	stroke: string;
+	fill: string;
+};
+
+type BaseBarProps<T> = Omit<T, "size" | "color"> & {
+	/**
+	 * Scale used to determine the width based on the given value.
+	 */
+	scale: number;
+	value: number;
+	/**
+	 * The X position of the bar component.
+	 */
+	offset: number;
+	/**
+	 * Color scheme for the bar. If not passed the default gray color will be
+	 * used.
+	 */
+	colors?: BarColors;
+};
+
+type BarProps = BaseBarProps<HTMLProps<HTMLDivElement>>;
+
+export const Bar = forwardRef<HTMLDivElement, BarProps>(
+	({ colors, scale, value, offset, ...htmlProps }, ref) => {
+		return (
+			<div
+				css={barCss({ colors, scale, value, offset })}
+				{...htmlProps}
+				ref={ref}
+			/>
+		);
+	},
+);
+
+type ClickableBarProps = BaseBarProps<ButtonHTMLAttributes<HTMLButtonElement>>;
+
+export const ClickableBar = forwardRef<HTMLButtonElement, ClickableBarProps>(
+	({ colors, scale, value, offset, ...htmlProps }, ref) => {
+		return (
+			<button
+				type="button"
+				css={[...barCss({ colors, scale, value, offset }), styles.clickable]}
+				{...htmlProps}
+				ref={ref}
+			/>
+		);
+	},
+);
+
+export const barCss = ({
+	scale,
+	value,
+	colors,
+	offset,
+}: BaseBarProps<unknown>) => {
+	return [
+		styles.bar,
+		{
+			width: `calc((var(${CSSVars.xAxisWidth}) * ${value}) / ${scale})`,
+			backgroundColor: colors?.fill,
+			borderColor: colors?.stroke,
+			marginLeft: `calc((var(${CSSVars.xAxisWidth}) * ${offset}) / ${scale})`,
+		},
+	];
+};
+
+const styles = {
+	bar: (theme) => ({
+		border: "1px solid",
+		borderColor: theme.palette.divider,
+		backgroundColor: theme.palette.background.default,
+		borderRadius: 8,
+		height: 32,
+		display: "flex",
+		padding: 0,
+		minWidth: 8,
+	}),
+	clickable: {
+		cursor: "pointer",
+
+		"&:focus, &:hover, &:active": {
+			outline: "none",
+			borderColor: "#38BDF8",
+		},
+	},
+} satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/BarBlocks.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/BarBlocks.tsx
@@ -0,0 +1,77 @@
+import type { Interpolation, Theme } from "@emotion/react";
+import MoreHorizOutlined from "@mui/icons-material/MoreHorizOutlined";
+import { type FC, useEffect, useRef, useState } from "react";
+
+const sidePadding = 8;
+const spaceBetweenBlocks = 4;
+const moreIconSize = 18;
+const blockSize = 20;
+
+type BarBlocksProps = {
+	count: number;
+};
+
+export const BarBlocks: FC<BarBlocksProps> = ({ count }) => {
+	const [parentWidth, setParentWidth] = useState<number>();
+	const blocksRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		if (!blocksRef.current || parentWidth) {
+			return;
+		}
+		const parentEl = blocksRef.current.parentElement;
+		if (!parentEl) {
+			throw new Error("BarBlocks must be a child of a Bar");
+		}
+		setParentWidth(parentEl.clientWidth);
+	}, [parentWidth]);
+
+	const totalSpaceBetweenBlocks = (count - 1) * spaceBetweenBlocks;
+	const freeSize = parentWidth ? parentWidth - sidePadding * 2 : 0;
+	const necessarySize = blockSize * count + totalSpaceBetweenBlocks;
+	const hasSpacing = necessarySize <= freeSize;
+	const nOfPossibleBlocks = Math.floor(
+		(freeSize - moreIconSize) / (blockSize + spaceBetweenBlocks),
+	);
+	const nOfBlocks = hasSpacing ? count : nOfPossibleBlocks;
+
+	return (
+		<div ref={blocksRef} css={styles.blocks}>
+			{Array.from({ length: nOfBlocks }, (_, i) => i + 1).map((n) => (
+				<div key={n} css={styles.block} style={{ minWidth: blockSize }} />
+			))}
+			{!hasSpacing && (
+				<div css={styles.extraBlock}>
+					<MoreHorizOutlined />
+				</div>
+			)}
+		</div>
+	);
+};
+
+const styles = {
+	blocks: {
+		display: "flex",
+		width: "100%",
+		height: "100%",
+		padding: sidePadding,
+		gap: spaceBetweenBlocks,
+		alignItems: "center",
+	},
+	block: {
+		borderRadius: 4,
+		height: 16,
+		backgroundColor: "#082F49",
+		border: "1px solid #38BDF8",
+		flexShrink: 0,
+	},
+	extraBlock: {
+		color: "#38BDF8",
+		lineHeight: 0,
+		flexShrink: 0,
+
+		"& svg": {
+			fontSize: moreIconSize,
+		},
+	},
+} satisfies Record<string, Interpolation<Theme>>;