watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-11 16:17:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Added tables to compare screen.

Browse source
This commit is contained in:
Mike Cao 2024-05-25 09:31:38 -07:00
parent 154b559315
commit 13e11ee371
15 changed files with 199 additions and 66 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -14,7 +14,7 @@ export interface ListTableProps {
title?: string;
metric?: string;
className?: string;
renderLabel?: (row: any) => ReactNode;
renderLabel?: (row: any, index: number) => ReactNode;
animate?: boolean;
virtualize?: boolean;
showPercentage?: boolean;
@ -34,13 +34,13 @@ export function ListTable({
}: ListTableProps) {
const { formatMessage, labels } = useMessages();
const getRow = row => {
const getRow = (row: { x: any; y: any; z: any }, index: number) => {
const { x: label, y: value, z: percent } = row;
return (
<AnimatedRow
key={label}
label={renderLabel ? renderLabel(row) : label ?? formatMessage(labels.unknown)}
label={renderLabel ? renderLabel(row, index) : label ?? formatMessage(labels.unknown)}
value={value}
percent={percent}
animate={animate && !virtualize}
@ -50,7 +50,7 @@ export function ListTable({
};
const Row = ({ index, style }) => {
return <div style={style}>{getRow(data[index])}</div>;
return <div style={style}>{getRow(data[index], index)}</div>;
};
return (
@ -71,7 +71,7 @@ export function ListTable({
{Row}
</FixedSizeList>
) : (
data.map(row => getRow(row))
data.map(getRow)
)}
</div>
</div>
@ -97,9 +97,7 @@ const AnimatedRow = ({ label, value = 0, percent, animate, showPercentage = true
{showPercentage && (
<div className={styles.percent}>
<animated.div className={styles.bar} style={{ width: props.width.to(n => `${n}%`) }} />
<animated.span className={styles.percentValue}>
{props.width.to(n => `${n?.toFixed?.(0)}%`)}
</animated.span>
<animated.span>{props.width.to(n => `${n?.toFixed?.(0)}%`)}</animated.span>
</div>
)}
</div>