Merge branch 'dev' into boards

fix: skip realtime chart animation when data unchanged

README.md

@@ -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

src/components/metrics/RealtimeChart.tsx

@@ -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