Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: show type badge in DataGrid header #144

Merged
merged 5 commits into from
Oct 17, 2024
Merged

feat: show type badge in DataGrid header #144

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c43b670
feat: show type badge in DataGrid header
keita-determined Oct 14, 2024
bf73b9b
chore: feedback
keita-determined Oct 15, 2024
5d3d18d
fix: minor fix
keita-determined Oct 16, 2024
8f49089
fix: feedback
keita-determined Oct 16, 2024
1ff4cba
fix: text color
keita-determined Oct 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 6 additions & 3 deletions src/kit/DataGrid/DataGrid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@ import {
LinkCell,
LOADING_CELL,
} from './custom-renderers';
import { drawTypeBadge } from './custom-renderers/utils';
import css from './DataGrid.module.scss';
import { getHeaderIcons } from './icons';
import { HeaderMenu, HeaderMenuProps } from './menu';
Expand Down Expand Up @@ -489,7 +490,7 @@ export function DataGrid<T, ContextAction = void | string, ContextActionData = v
}, [sorts]);

const drawHeader: DrawHeaderCallback = useCallback(
({ ctx, column, rect, theme, spriteManager }) => {
({ ctx, column, columnIndex, rect, theme, spriteManager }) => {
const sortDirection = column.id && sortMap[column.id];
if (sortDirection) {
const arrowDirection = sortDirection === 'asc' ? 'up' : 'down';
Expand Down Expand Up @@ -520,10 +521,12 @@ export function DataGrid<T, ContextAction = void | string, ContextActionData = v
const y = rect.y + rect.height / 2 + middleCenterBias;
const maxWidth = rect.width - (sortDirection ? 12 : 0) - 2 * theme.cellHorizontalPadding;
ctx.fillStyle = theme.textHeader;
drawTextWithEllipsis(ctx, column.title, x, y, maxWidth);
const textMetrics = drawTextWithEllipsis(ctx, column.title, x, y, maxWidth);
const typeName = columns[columnIndex].type;
drawTypeBadge(ctx, typeName ?? 'unspecified', x + textMetrics.width + 10, y);
}
},
[sortMap],
[columns, sortMap],
);

useImperativeHandle(
Expand Down
7 changes: 6 additions & 1 deletion src/kit/DataGrid/columns.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export const MULTISELECT = 'selected';

export type ColumnDef<T> = SizedGridColumn & {
id: string;
isNumerical?: boolean;
type?: 'number' | 'text' | 'date' | 'array' | 'unspecified';
renderer: (record: T, idx: number) => GridCell;
tooltip: (record: T) => string | undefined;
};
Expand Down Expand Up @@ -52,6 +52,7 @@ export function defaultTextColumn<T extends RawJson>(
},
title: columnTitle,
tooltip: () => undefined,
type: 'text',
width: columnWidth ?? DEFAULT_COLUMN_WIDTH,
};
}
Expand Down Expand Up @@ -103,6 +104,7 @@ export function defaultNumberColumn<T extends RawJson>(
},
title: columnTitle,
tooltip: () => undefined,
type: 'number',
width: columnWidth ?? DEFAULT_COLUMN_WIDTH,
};
}
Expand All @@ -127,6 +129,7 @@ export function defaultSelectionColumn<T>(
themeOverride: { cellHorizontalPadding: 10 },
title: '',
tooltip: () => undefined,
type: 'unspecified',
width: 40,
};
}
Expand All @@ -151,6 +154,7 @@ export function defaultDateColumn<T extends RawJson>(
},
title: columnTitle,
tooltip: () => undefined,
type: 'date',
width: columnWidth ?? DEFAULT_COLUMN_WIDTH,
};
}
Expand All @@ -175,6 +179,7 @@ export function defaultArrayColumn<T extends RawJson>(
},
title: columnTitle,
tooltip: () => undefined,
type: 'array',
width: columnWidth ?? DEFAULT_COLUMN_WIDTH,
};
}
27 changes: 26 additions & 1 deletion src/kit/DataGrid/custom-renderers/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { getMiddleCenterBias, measureTextCached } from '@glideapps/glide-data-grid';

interface CornerRadius {
tl: number;
tr: number;
Expand Down Expand Up @@ -105,7 +107,30 @@ export function drawTextWithEllipsis(
x: number,
y: number,
maxWidth: number,
): void {
): TextMetrics {
const ellipsisText = truncate(ctx, text, x, maxWidth);
ctx.fillText(ellipsisText, x, y);
return ctx.measureText(ellipsisText);
}

export function drawTypeBadge(
ctx: CanvasRenderingContext2D,
typeName: 'number' | 'text' | 'date' | 'array' | 'unspecified',
x: number,
y: number,
): void {
const tagFont = '400 8px';
const backgroundColor = '#13569c';

ctx.beginPath();
ctx.font = tagFont;
ctx.fillStyle = backgroundColor;
ctx.strokeStyle = backgroundColor;
ctx.lineWidth = 1;
roundedRect(ctx, x, y - 10, measureTextCached(typeName, ctx, tagFont).width + 16, 18, 4);
ctx.stroke();
ctx.fill();
ctx.fillStyle = '#fff';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we use the data grid theme here? the colors should probably respond to the overall theme. i see in the theme there's a textBubble and bgBubble theme that we could use here source.

Copy link
Contributor Author

@keita-determined keita-determined Oct 15, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixed it.

light mode

image

dark mode

image

what do you think? I think it's hard to look at the type badge. Also, should badge color be the same or similar to hew badge color? (default badge).

image

Copy link
Contributor

@ashtonG ashtonG Oct 16, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree -- looking at the theme it appears we use the textBubble theme variable as the border of the tags for the tag cell. That said, the badge background color does change with the theme -- could we reproduce the logic from the badge component here?

in addition, note that the badge font weight is bold. that's definitely something we want to retain.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Dark Mode

image

Light Mode

image

ctx.fillText(typeName.toUpperCase(), x + 4, y - 10 + 18 / 2 + getMiddleCenterBias(ctx, tagFont));
ctx.closePath();
}