watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2025-12-06 01:18:00 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

add isMobile truncation logic to ListTable
Some checks failed
Create docker images (cloud) / Build, push, and deploy (push) Has been cancelled
Details
Node.js CI / build (postgresql, 18.18, 10) (push) Has been cancelled
Details

Browse source
This commit is contained in:
Francis Cao 2025-10-27 13:18:26 -07:00
parent 2ffde37f5b
commit 74972bccb1
1 changed files with 5 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/components/metrics/ListTable.tsx
View file

@ -4,7 +4,7 @@ import { useSpring, config } from '@react-spring/web';
import { Grid, Row, Column, Text } from '@umami/react-zen'; import { Grid, Row, Column, Text } from '@umami/react-zen';
import { AnimatedDiv } from '@/components/common/AnimatedDiv'; import { AnimatedDiv } from '@/components/common/AnimatedDiv';
import { Empty } from '@/components/common/Empty'; import { Empty } from '@/components/common/Empty';
import { useMessages } from '@/components/hooks'; import { useMessages, useMobile } from '@/components/hooks';
import { formatLongCurrency, formatLongNumber } from '@/lib/format'; import { formatLongCurrency, formatLongNumber } from '@/lib/format';
const ITEM_SIZE = 30; const ITEM_SIZE = 30;
@ -42,6 +42,7 @@ export function ListTable({
currency, currency,
}: ListTableProps) { }: ListTableProps) {
const { formatMessage, labels } = useMessages(); const { formatMessage, labels } = useMessages();
const { isMobile } = useMobile();
const getRow = (row: ListData, index: number) => { const getRow = (row: ListData, index: number) => {
const { label, count, percent } = row; const { label, count, percent } = row;
@ -56,6 +57,7 @@ export function ListTable({
showPercentage={showPercentage} showPercentage={showPercentage}
change={renderChange ? renderChange(row, index) : null} change={renderChange ? renderChange(row, index) : null}
currency={currency} currency={currency}
isMobile={isMobile}
/> />
); );
}; };
@ -99,6 +101,7 @@ const AnimatedRow = ({
animate, animate,
showPercentage = true, showPercentage = true,
currency, currency,
isMobile,
}) => { }) => {
const props = useSpring({ const props = useSpring({
width: percent, width: percent,
@ -117,7 +120,7 @@ const AnimatedRow = ({
gap gap
> >
<Row alignItems="center"> <Row alignItems="center">
<Text truncate={true} style={{ maxWidth: '400px' }}> <Text truncate={true} style={{ maxWidth: isMobile ? '200px' : '400px' }}>
{label} {label}
</Text> </Text>
</Row> </Row>