watson/umami
1
0
Fork 0
mirror of https://github.com/umami-software/umami.git synced 2026-02-06 05:37:20 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

Show percentages in metrics bar.

Browse source
This commit is contained in:
Mike Cao 2024-05-26 21:30:03 -07:00
parent b7a7d4de4d
commit 8b304b7ca2
3 changed files with 24 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,7 +10,7 @@ export interface MetricCardProps {
change?: number;
label?: string;
reverseColors?: boolean;
format?: typeof formatNumber;
formatValue?: typeof formatNumber;
showLabel?: boolean;
showChange?: boolean;
showPrevious?: boolean;
@ -22,32 +22,35 @@ export const MetricCard = ({
change = 0,
label,
reverseColors = false,
format = formatNumber,
formatValue = formatNumber,
showLabel = true,
showChange = false,
showPrevious = false,
className,
}: MetricCardProps) => {
const diff = value - change;
const pct = ((value - diff) / diff) * 100;
const props = useSpring({ x: Number(value) || 0, from: { x: 0 } });
const changeProps = useSpring({ x: Number(change) || 0, from: { x: 0 } });
const prevProps = useSpring({ x: Number(value - change) || 0, from: { x: 0 } });
const changeProps = useSpring({ x: Number(pct) || 0, from: { x: 0 } });
const prevProps = useSpring({ x: Number(diff) || 0, from: { x: 0 } });
return (
<div className={classNames(styles.card, className, showPrevious && styles.compare)}>
{showLabel && <div className={styles.label}>{label}</div>}
<animated.div className={styles.value} title={value.toString()}>
{props?.x?.to(x => format(x))}
<animated.div className={styles.value} title={formatValue(value)}>
{props?.x?.to(x => formatValue(x))}
</animated.div>
{showChange && (
<ChangeLabel className={styles.change} value={change} reverseColors={reverseColors}>
<animated.span title={change.toString()}>
{changeProps?.x?.to(x => format(Math.abs(x)))}
<animated.span title={formatValue(change)}>
{changeProps?.x?.to(x => Math.abs(~~x))}
</animated.span>
%
</ChangeLabel>
)}
{showPrevious && (
<animated.div className={classNames(styles.value, styles.prev)} title={prevProps?.x as any}>
{prevProps?.x?.to(x => format(x))}
<animated.div className={classNames(styles.value, styles.prev)} title={formatValue(diff)}>
{prevProps?.x?.to(x => formatValue(x))}
</animated.div>
)}
</div>

2
src/components/metrics/PageviewsChart.tsx
View file

@ -46,7 +46,7 @@ export function PageviewsChart({ data, unit, isLoading, ...props }: PageviewsCha
? [
{
type: 'line',
label: `${formatMessage(labels.visits)} (${formatMessage(labels.previous)})`,
label: `${formatMessage(labels.views)} (${formatMessage(labels.previous)})`,
data: data.compare.pageviews,
borderWidth: 2,
backgroundColor: '#8601B0',