Sep 19, 2024 · Sep 19, 2024 · Sep 19, 2024 · Sep 20, 2024 · Sep 23, 2024 · Sep 23, 2024
diff --git a/site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx b/site/src/modules/workspaces/WorkspaceTiming/Chart/Bar.tsx
 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
 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>>;
Original file line number	Diff line number	Diff line change
		@@ -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>>;
Original file line number	Diff line number	Diff line change
		@@ -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>>;