mirror of
https://github.com/grafana/grafana.git
synced 2025-08-01 02:31:50 +08:00
TableNG: Reduce how often we re-measure row height (#107604)
This commit is contained in:
@ -64,7 +64,7 @@ export function TableNG(props: TableNGProps) {
|
|||||||
const {
|
const {
|
||||||
cellHeight,
|
cellHeight,
|
||||||
data,
|
data,
|
||||||
enablePagination,
|
enablePagination = false,
|
||||||
enableSharedCrosshair = false,
|
enableSharedCrosshair = false,
|
||||||
enableVirtualization,
|
enableVirtualization,
|
||||||
footerOptions,
|
footerOptions,
|
||||||
@ -265,6 +265,9 @@ export function TableNG(props: TableNGProps) {
|
|||||||
cellRootRenderers: {},
|
cellRootRenderers: {},
|
||||||
};
|
};
|
||||||
|
|
||||||
|
let lastRowIdx = -1;
|
||||||
|
let _rowHeight = 0;
|
||||||
|
|
||||||
f.forEach((field, i) => {
|
f.forEach((field, i) => {
|
||||||
const justifyContent = getTextAlign(field);
|
const justifyContent = getTextAlign(field);
|
||||||
const footerStyles = getFooterStyles(justifyContent);
|
const footerStyles = getFooterStyles(justifyContent);
|
||||||
@ -292,9 +295,6 @@ export function TableNG(props: TableNGProps) {
|
|||||||
const shouldOverflow = shouldTextOverflow(field);
|
const shouldOverflow = shouldTextOverflow(field);
|
||||||
const shouldWrap = shouldTextWrap(field);
|
const shouldWrap = shouldTextWrap(field);
|
||||||
|
|
||||||
let lastRowIdx = -1;
|
|
||||||
let _rowHeight = 0;
|
|
||||||
|
|
||||||
// this fires first
|
// this fires first
|
||||||
const renderCellRoot = (key: Key, props: CellRendererProps<TableRow, TableSummaryRow>): ReactNode => {
|
const renderCellRoot = (key: Key, props: CellRendererProps<TableRow, TableSummaryRow>): ReactNode => {
|
||||||
const rowIdx = props.row.__index;
|
const rowIdx = props.row.__index;
|
||||||
|
@ -140,7 +140,7 @@ export interface PaginatedRowsOptions {
|
|||||||
headerHeight: number;
|
headerHeight: number;
|
||||||
footerHeight: number;
|
footerHeight: number;
|
||||||
paginationHeight?: number;
|
paginationHeight?: number;
|
||||||
enabled?: boolean;
|
enabled: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface PaginatedRowsResult {
|
export interface PaginatedRowsResult {
|
||||||
@ -167,11 +167,17 @@ export function usePaginatedRows(
|
|||||||
|
|
||||||
// calculate average row height if row height is variable.
|
// calculate average row height if row height is variable.
|
||||||
const avgRowHeight = useMemo(() => {
|
const avgRowHeight = useMemo(() => {
|
||||||
|
if (!enabled) {
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
if (typeof rowHeight === 'number') {
|
if (typeof rowHeight === 'number') {
|
||||||
return rowHeight;
|
return rowHeight;
|
||||||
}
|
}
|
||||||
return rows.reduce((avg, row, _, { length }) => avg + rowHeight(row) / length, 0);
|
|
||||||
}, [rows, rowHeight]);
|
// we'll just measure 100 rows to estimate
|
||||||
|
return rows.slice(0, 100).reduce((avg, row, _, { length }) => avg + rowHeight(row) / length, 0);
|
||||||
|
}, [rows, rowHeight, enabled]);
|
||||||
|
|
||||||
// using dimensions of the panel, calculate pagination parameters
|
// using dimensions of the panel, calculate pagination parameters
|
||||||
const { numPages, rowsPerPage, pageRangeStart, pageRangeEnd, smallPagination } = useMemo((): {
|
const { numPages, rowsPerPage, pageRangeStart, pageRangeEnd, smallPagination } = useMemo((): {
|
||||||
@ -325,6 +331,7 @@ export function useTypographyCtx(): TypographyCtx {
|
|||||||
const txtWidth = ctx.measureText(txt).width;
|
const txtWidth = ctx.measureText(txt).width;
|
||||||
const avgCharWidth = txtWidth / txt.length + letterSpacing;
|
const avgCharWidth = txtWidth / txt.length + letterSpacing;
|
||||||
const { count } = varPreLine(ctx);
|
const { count } = varPreLine(ctx);
|
||||||
|
|
||||||
const calcRowHeight = (text: string, cellWidth: number, defaultHeight: number) => {
|
const calcRowHeight = (text: string, cellWidth: number, defaultHeight: number) => {
|
||||||
if (text === '') {
|
if (text === '') {
|
||||||
return defaultHeight;
|
return defaultHeight;
|
||||||
|
Reference in New Issue
Block a user