add 30 min active user histogram

apps/web/src/hooks/useVisibleSeries.ts

@@ -1,6 +1,6 @@
 'use client';
 
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import type { IChartData } from '@/app/_trpc/client';
 
 export type IVisibleSeries = ReturnType<typeof useVisibleSeries>['series'];
@@ -10,6 +10,12 @@ export function useVisibleSeries(data: IChartData, limit?: number | undefined) {
     data?.series?.slice(0, max).map((serie) => serie.name) ?? []
   );
 
+  useEffect(() => {
+    setVisibleSeries(
+      data?.series?.slice(0, max).map((serie) => serie.name) ?? []
+    );
+  }, [data, max]);
+
   return useMemo(() => {
     return {
       series: data.series