watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-19 03:55:37 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Prevent unnecessary chart and board component re-renders

Browse source
This commit is contained in:
Mike Cao 2026-02-12 16:30:43 -08:00
parent 1f0de47c01
commit 400a35d7af
4 changed files with 104 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

37
src/app/(main)/boards/[boardId]/BoardColumn.tsx
View file

@ -8,10 +8,11 @@ import {
Tooltip,
TooltipTrigger,
} from '@umami/react-zen';
import { useState } from 'react';
import { useMemo, useState } from 'react';
import { useBoard, useMessages } from '@/components/hooks';
import { Pencil, Plus, X } from '@/components/icons';
import type { BoardComponentConfig } from '@/lib/types';
import styles from './BoardColumn.module.css';
import { BoardComponentRenderer } from './BoardComponentRenderer';
import { BoardComponentSelect } from './BoardComponentSelect';
@ -34,6 +35,13 @@ export function BoardColumn({
const { board } = useBoard();
const { t, labels } = useMessages();
const websiteId = board?.parameters?.websiteId;
const renderedComponent = useMemo(() => {
if (!component || !websiteId) {
return null;
}
return <BoardComponentRenderer config={component} websiteId={websiteId} />;
}, [component, websiteId]);
const handleSelect = (config: BoardComponentConfig) => {
onSetComponent?.(id, config);
@ -50,11 +58,18 @@ export function BoardColumn({
justifyContent="center"
backgroundColor="surface-sunken"
position="relative"
className={styles.column}
>
{editing && canRemove && (
<Box position="absolute" top="10px" right="20px" zIndex={100}>
<Box
className={styles.columnAction}
position="absolute"
top="10px"
right="20px"
zIndex={100}
>
<TooltipTrigger delay={0}>
<Button variant="quiet" onPress={() => onRemove?.(id)}>
<Button variant="outline" onPress={() => onRemove?.(id)}>
<Icon size="sm">
<X />
</Icon>
@ -63,15 +78,21 @@ export function BoardColumn({
</TooltipTrigger>
</Box>
)}
{component && websiteId ? (
{renderedComponent ? (
<>
<Box width="100%" height="100%" overflow="auto">
<BoardComponentRenderer config={component} websiteId={websiteId} />
{renderedComponent}
</Box>
{editing && (
<Box position="absolute" bottom="10px" right="20px" zIndex={100}>
<Box
className={styles.columnAction}
position="absolute"
bottom="10px"
right="20px"
zIndex={100}
>
<TooltipTrigger delay={0}>
<Button variant="quiet" onPress={() => setShowSelect(true)}>
<Button variant="outline" onPress={() => setShowSelect(true)}>
<Icon size="sm">
<Pencil />
</Icon>
@ -94,7 +115,7 @@ export function BoardColumn({
<Dialog
title={t(labels.selectComponent)}
style={{
width: '750px',
width: '1200px',
maxWidth: 'calc(100vw - 40px)',
maxHeight: 'calc(100dvh - 40px)',
padding: '32px',