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

Merge pull request #3801 from Lokimorty/skip-realtime-anim
Some checks failed
Node.js CI / build (postgresql, 18.18, 10) (push) Has been cancelled
Details

Browse source 
fix: skip realtime chart animation when data unchanged
This commit is contained in:
Mike Cao 2025-11-29 23:31:36 -08:00 • committed by GitHub
commit 875c03bca1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 19 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

32
README.md
View file

@ -9,18 +9,10 @@
</p>
<p align="center">
<a href="https://github.com/umami-software/umami/releases">
<img src="https://img.shields.io/github/release/umami-software/umami.svg" alt="GitHub Release" />
</a>
<a href="https://github.com/umami-software/umami/blob/master/LICENSE">
<img src="https://img.shields.io/github/license/umami-software/umami.svg" alt="MIT License" />
</a>
<a href="https://github.com/umami-software/umami/actions">
<img src="https://img.shields.io/github/actions/workflow/status/umami-software/umami/ci.yml" alt="Build Status" />
</a>
<a href="https://analytics.umami.is/share/LGazGOecbDtaIwDr/umami.is" style="text-decoration: none;">
<img src="https://img.shields.io/badge/Try%20Demo%20Now-Click%20Here-brightgreen" alt="Umami Demo" />
</a>
<a href="https://github.com/umami-software/umami/releases"><img src="https://img.shields.io/github/release/umami-software/umami.svg" alt="GitHub Release" /></a>
<a href="https://github.com/umami-software/umami/blob/master/LICENSE"><img src="https://img.shields.io/github/license/umami-software/umami.svg" alt="MIT License" /></a>
<a href="https://github.com/umami-software/umami/actions"><img src="https://img.shields.io/github/actions/workflow/status/umami-software/umami/ci.yml" alt="Build Status" /></a>
<a href="https://analytics.umami.is/share/LGazGOecbDtaIwDr/umami.is" style="text-decoration: none;"><img src="https://img.shields.io/badge/Try%20Demo%20Now-Click%20Here-brightgreen" alt="Umami Demo" /></a>
</p>
---
@ -119,18 +111,10 @@ docker compose up --force-recreate -d
## 🛟 Support
<p align="center">
<a href="https://github.com/umami-software/umami">
<img src="https://img.shields.io/badge/GitHub--blue?style=social&logo=github" alt="GitHub" />
</a>
<a href="https://twitter.com/umami_software">
<img src="https://img.shields.io/badge/Twitter--blue?style=social&logo=twitter" alt="Twitter" />
</a>
<a href="https://linkedin.com/company/umami-software">
<img src="https://img.shields.io/badge/LinkedIn--blue?style=social&logo=linkedin" alt="LinkedIn" />
</a>
<a href="https://umami.is/discord">
<img src="https://img.shields.io/badge/Discord--blue?style=social&logo=discord" alt="Discord" />
</a>
<a href="https://github.com/umami-software/umami"><img src="https://img.shields.io/badge/GitHub--blue?style=social&logo=github" alt="GitHub" /></a>
<a href="https://twitter.com/umami_software"><img src="https://img.shields.io/badge/Twitter--blue?style=social&logo=twitter" alt="Twitter" /></a>
<a href="https://linkedin.com/company/umami-software"><img src="https://img.shields.io/badge/LinkedIn--blue?style=social&logo=linkedin" alt="LinkedIn" /></a>
<a href="https://umami.is/discord"><img src="https://img.shields.io/badge/Discord--blue?style=social&logo=discord" alt="Discord" /></a>
</p>
[release-shield]: https://img.shields.io/github/release/umami-software/umami.svg

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

@ -16,6 +16,7 @@ export function RealtimeChart({ data, unit, ...props }: RealtimeChartProps) {
const endDate = startOfMinute(new Date());
const startDate = subMinutes(endDate, REALTIME_RANGE);
const prevEndDate = useRef(endDate);
const prevData = useRef<string | null>(null);
const chartData = useMemo(() => {
if (!data) {
@ -28,14 +29,22 @@ export function RealtimeChart({ data, unit, ...props }: RealtimeChartProps) {
};
}, [data, startDate, endDate, unit]);
// Don't animate the bars shifting over because it looks weird
const animationDuration = useMemo(() => {
// Don't animate the bars shifting over because it looks weird
if (isBefore(prevEndDate.current, endDate)) {
prevEndDate.current = endDate;
return 0;
}
// Don't animate when data hasn't changed
const serialized = JSON.stringify(chartData);
if (prevData.current === serialized) {
return 0;
}
prevData.current = serialized;
return DEFAULT_ANIMATION_DURATION;
}, [endDate]);
}, [endDate, chartData]);
return (
<PageviewsChart