watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-10 23:57:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Updated change labels.

Browse source
This commit is contained in:
Mike Cao 2024-05-27 21:23:06 -07:00
parent 3e51a569f3
commit 1c8ae90457
3 changed files with 16 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/metrics/ChangeLabel.module.css
View file

@ -24,8 +24,3 @@
color: var(--base700); color: var(--base700);
background: var(--base100); background: var(--base100);
} }
.new {
color: var(--blue900);
background: var(--blue100);
}

13
src/components/metrics/ChangeLabel.tsx
View file

@ -6,12 +6,14 @@ import styles from './ChangeLabel.module.css';
export function ChangeLabel({ export function ChangeLabel({
value, value,
size, size,
title,
reverseColors, reverseColors,
className, className,
children, children,
}: { }: {
value: number; value: number;
size?: 'xs' | 'sm' | 'md' | 'lg'; size?: 'xs' | 'sm' | 'md' | 'lg';
title?: string;
reverseColors?: boolean; reverseColors?: boolean;
showPercentage?: boolean; showPercentage?: boolean;
className?: string; className?: string;
@ -19,20 +21,19 @@ export function ChangeLabel({
}) { }) {
const positive = value * (reverseColors ? -1 : 1) >= 0; const positive = value * (reverseColors ? -1 : 1) >= 0;
const negative = value * (reverseColors ? -1 : 1) < 0; const negative = value * (reverseColors ? -1 : 1) < 0;
const isNew = isNaN(value); const neutral = value === 0 || isNaN(value);
return ( return (
<div <div
className={classNames(styles.label, className, { className={classNames(styles.label, className, {
[styles.positive]: positive, [styles.positive]: positive,
[styles.negative]: negative, [styles.negative]: negative,
[styles.neutral]: value === 0, [styles.neutral]: neutral,
[styles.new]: isNew,
})} })}
title={value.toString()} title={title}
> >
{!isNew && ( {!neutral && (
<Icon rotate={value === 0 ? 0 : positive || reverseColors ? -45 : 45} size={size}> <Icon rotate={value === 0 ? 0 : positive || reverseColors ? -90 : 90} size={size}>
<Icons.ArrowRight /> <Icons.ArrowRight />
</Icon> </Icon>
)} )}

16
src/components/metrics/MetricCard.tsx
View file

@ -37,19 +37,21 @@ export const MetricCard = ({
return ( return (
<div className={classNames(styles.card, className, showPrevious && styles.compare)}> <div className={classNames(styles.card, className, showPrevious && styles.compare)}>
{showLabel && <div className={styles.label}>{label}</div>} {showLabel && <div className={styles.label}>{label}</div>}
<animated.div className={styles.value} title={formatValue(value)}> <animated.div className={styles.value} title={value.toString()}>
{props?.x?.to(x => formatValue(x))} {props?.x?.to(x => formatValue(x))}
</animated.div> </animated.div>
{showChange && ( {showChange && (
<ChangeLabel className={styles.change} value={change} reverseColors={reverseColors}> <ChangeLabel
<animated.span title={formatValue(change)}> className={styles.change}
{changeProps?.x?.to(x => Math.abs(~~x))} value={change}
</animated.span> title={formatValue(change)}
% reverseColors={reverseColors}
>
<animated.span>{changeProps?.x?.to(x => `${Math.abs(~~x)}%`)}</animated.span>
</ChangeLabel> </ChangeLabel>
)} )}
{showPrevious && ( {showPrevious && (
<animated.div className={classNames(styles.value, styles.prev)} title={formatValue(diff)}> <animated.div className={classNames(styles.value, styles.prev)} title={diff.toString()}>
{prevProps?.x?.to(x => formatValue(x))} {prevProps?.x?.to(x => formatValue(x))}
</animated.div> </animated.div>
)} )}