Display repsonse rate in sandbox

Vizzuality · Dec 3, 2024 · ae07ebc · ae07ebc
1 parent 57243c7
commit ae07ebc
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 3 deletions.
diff --git a/client/src/containers/sandbox/index.tsx b/client/src/containers/sandbox/index.tsx
@@ -38,6 +38,7 @@ const Sandbox: FC = () => {
       <Widget
         breakdown={breakdown || undefined}
         indicator={widget.indicator}
+        responseRate={widget.responseRate}
         question={widget.question}
         visualization={visualization || widget.defaultVisualization}
         data={widget.data}

diff --git a/client/src/containers/sandbox/user-sandbox/index.tsx b/client/src/containers/sandbox/user-sandbox/index.tsx
@@ -4,6 +4,7 @@ import { FC, useEffect } from "react";
 import { useAtom } from "jotai";
 import { useSession } from "next-auth/react";
 
+import { getResponseRate } from "@/lib/normalize-widget-data";
 import { client } from "@/lib/queryClient";
 import { queryKeys } from "@/lib/queryKeys";
 
@@ -53,7 +54,10 @@ const Sandbox: FC<SandboxProps> = ({ customWidgetId }) => {
     },
     {
       enabled: !!indicator,
-      select: (res) => res.body.data,
+      select: (res) => ({
+        ...res.body.data,
+        responseRate: getResponseRate(res.body.data.data),
+      }),
     },
   );
 
@@ -76,6 +80,7 @@ const Sandbox: FC<SandboxProps> = ({ customWidgetId }) => {
       {widget && (
         <Widget
           indicator={widget.indicator}
+          responseRate={widget.responseRate}
           question={widget.question}
           visualization={visualization || widget.defaultVisualization}
           data={widget.data}

diff --git a/client/src/containers/widget/widget-header/index.tsx b/client/src/containers/widget/widget-header/index.tsx
@@ -6,7 +6,7 @@ import Title from "@/components/ui/title";
 
 interface WidgetHeaderProps {
   indicator: string;
-  responseRate: number;
+  responseRate?: number;
   question?: string;
   menu?: React.ReactNode;
   className?: string;

diff --git a/client/src/hooks/use-sandbox-widget.ts b/client/src/hooks/use-sandbox-widget.ts
@@ -4,7 +4,10 @@ import {
 } from "@shared/dto/widgets/widget-visualizations.constants";
 import { parseAsStringEnum, useQueryState } from "nuqs";
 
-import { normalizeWidgetData } from "@/lib/normalize-widget-data";
+import {
+  getResponseRate,
+  normalizeWidgetData,
+} from "@/lib/normalize-widget-data";
 import { client } from "@/lib/queryClient";
 import { queryKeys } from "@/lib/queryKeys";
 
@@ -37,6 +40,7 @@ function useSandboxWidget() {
       select: (res) => ({
         ...res.body.data,
         data: normalizeWidgetData(res.body.data.data),
+        responseRate: getResponseRate(res.body.data.data),
       }),
     },
   );