@checkstack/ui 0.0.2 → 0.0.3

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @checkstack/ui
 
+## 0.0.3
+
+### Patch Changes
+
+- cb82e4d: Improved `counter` and `pie` auto-chart types to show frequency distributions instead of just the latest value. Both chart types now count occurrences of each unique value across all runs/buckets, making them more intuitive for visualizing data like HTTP status codes.
+
+  Changed HTTP health check chart annotations: `statusCode` now uses `pie` chart (distribution view), `contentType` now uses `counter` chart (frequency count).
+
+  Fixed scrollbar hopping when health check signals update the accordion content. All charts now update silently without layout shift or loading state flicker.
+
+  Refactored health check visualization architecture:
+
+  - `HealthCheckStatusTimeline` and `HealthCheckLatencyChart` now accept `HealthCheckDiagramSlotContext` directly, handling data transformation internally
+  - `HealthCheckDiagram` refactored to accept context from parent, ensuring all visualizations share the same data source and update together on signals
+  - `HealthCheckSystemOverview` simplified to use `useHealthCheckData` hook for consolidated data fetching with automatic signal-driven refresh
+
+  Added `silentRefetch()` method to `usePagination` hook for background data refreshes without showing loading indicators.
+
+  Fixed `useSignal` hook to use a ref pattern internally, preventing stale closure issues. Callbacks now always access the latest values without requiring manual memoization or refs in consumer components.
+
+  Added signal handling to `useHealthCheckData` hook for automatic chart refresh when health check runs complete.
+
 ## 0.0.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/ui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "main": "src/index.ts",
   "dependencies": {

package/src/hooks/usePagination.ts

@@ -76,8 +76,10 @@ export interface PaginationState {
   nextPage: () => void;
   /** Go to previous page */
   prevPage: () => void;
-  /** Refresh current page */
+  /** Refresh current page (shows loading state) */
   refetch: () => void;
+  /** Refresh current page silently (no loading state, prevents UI flicker) */
+  silentRefetch: () => void;
 }
 
 /**
@@ -153,33 +155,38 @@ export function usePagination<TResponse, TItem, TExtraParams = object>({
     [extraParams]
   );
 
-  const fetchData = useCallback(async () => {
-    setLoading(true);
-    setError(undefined);
-
-    try {
-      const offset = (page - 1) * limit;
-      const params = {
-        limit,
-        offset,
-        ...extraParamsRef.current,
-      } as PaginationParams & TExtraParams;
-
-      const response = await fetchFnRef.current(params);
-      setItems(getItemsRef.current(response));
-      setTotal(getTotalRef.current(response));
-    } catch (error_) {
-      setError(error_ instanceof Error ? error_ : new Error(String(error_)));
-      setItems([]);
-    } finally {
-      setLoading(false);
-    }
-  }, [page, limit, extraParamsKey]);
+  const fetchData = useCallback(
+    async (showLoading = true) => {
+      if (showLoading) {
+        setLoading(true);
+      }
+      setError(undefined);
+
+      try {
+        const offset = (page - 1) * limit;
+        const params = {
+          limit,
+          offset,
+          ...extraParamsRef.current,
+        } as PaginationParams & TExtraParams;
+
+        const response = await fetchFnRef.current(params);
+        setItems(getItemsRef.current(response));
+        setTotal(getTotalRef.current(response));
+      } catch (error_) {
+        setError(error_ instanceof Error ? error_ : new Error(String(error_)));
+        setItems([]);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [page, limit, extraParamsKey]
+  );
 
   // Fetch on mount and when dependencies change
   useEffect(() => {
     if (fetchOnMount || page !== defaultPage || limit !== defaultLimit) {
-      void fetchData();
+      void fetchData(true);
     }
   }, [fetchData, fetchOnMount, page, limit, defaultPage, defaultLimit]);
 
@@ -213,6 +220,14 @@ export function usePagination<TResponse, TItem, TExtraParams = object>({
     }
   }, [hasPrev]);
 
+  const refetch = useCallback(() => {
+    void fetchData(true);
+  }, [fetchData]);
+
+  const silentRefetch = useCallback(() => {
+    void fetchData(false);
+  }, [fetchData]);
+
   const pagination: PaginationState = {
     page,
     limit,
@@ -224,7 +239,8 @@ export function usePagination<TResponse, TItem, TExtraParams = object>({
     setLimit,
     nextPage,
     prevPage,
-    refetch: fetchData,
+    refetch,
+    silentRefetch,
   };
 
   return { items, loading, error, pagination };