Initial graph filtering

CLIMB-TRE · Nov 11, 2024 · 632bba8 · 632bba8
1 parent 7da91a8
commit 632bba8
Show file tree

Hide file tree

Showing 2 changed files with 97 additions and 6 deletions.
diff --git a/lib/components/Graphs.tsx b/lib/components/Graphs.tsx
@@ -23,6 +23,8 @@ interface BaseGraphProps {
 
 interface GraphProps extends StatsProps {
   field: string;
+  filterField: string;
+  filterValue: string;
 }
 
 interface GroupedGraphProps extends GraphProps {
@@ -32,10 +34,21 @@ interface GroupedGraphProps extends GraphProps {
 
 const useSummaryQuery = (props: GraphProps) => {
   return useQuery({
-    queryKey: ["results", props.project, props.field],
+    queryKey: [
+      "results",
+      props.project,
+      props.field,
+      props.filterField,
+      props.filterValue,
+    ],
     queryFn: async () => {
+      const search = new URLSearchParams(`summarise=${props.field}`);
+
+      if (props.filterField && props.filterValue)
+        search.set(props.filterField, props.filterValue);
+
       return props
-        .httpPathHandler(`projects/${props.project}/?summarise=${props.field}`)
+        .httpPathHandler(`projects/${props.project}/?${search.toString()}`)
         .then((response) => response.json())
         .then((data) => {
           const field_data = data.data.map((record: ResultType) => {
@@ -61,12 +74,24 @@ const useSummaryQuery = (props: GraphProps) => {
 
 const useGroupedSummaryQuery = (props: GroupedGraphProps) => {
   return useQuery({
-    queryKey: ["results", props.project, props.field, props.groupBy],
+    queryKey: [
+      "results",
+      props.project,
+      props.field,
+      props.groupBy,
+      props.filterField,
+      props.filterValue,
+    ],
     queryFn: async () => {
+      const search = new URLSearchParams(
+        `summarise=${props.field}&summarise=${props.groupBy}`
+      );
+
+      if (props.filterField && props.filterValue)
+        search.set(props.filterField, props.filterValue);
+
       return props
-        .httpPathHandler(
-          `projects/${props.project}/?summarise=${props.field}&summarise=${props.groupBy}`
-        )
+        .httpPathHandler(`projects/${props.project}/?${search.toString()}`)
         .then((response) => response.json())
         .then((data) => {
           const groupedData = new Map<
@@ -169,6 +194,9 @@ function BaseGraph(props: BaseGraphProps) {
           t: 50,
           pad: 4,
         },
+        font: {
+          size: 11,
+        },
         height: 330,
         template: props.darkMode ? (graphStyles as Template) : undefined,
         xaxis: { title: props.xTitle },

diff --git a/lib/pages/Stats.tsx b/lib/pages/Stats.tsx
@@ -19,17 +19,23 @@ import {
 } from "../components/Graphs";
 import { StatsProps } from "../interfaces";
 import generateKey from "../utils/generateKey";
+import { Input } from "../components/Inputs";
 
 interface GraphPanelProps extends StatsProps {
   type: string;
   field: string;
   groupBy: string;
   groupMode: string;
+  filterField: string;
+  filterValue: string;
   graphFieldOptions: string[];
+  filterFieldOptions: string[];
   handleGraphConfigTypeChange: React.ChangeEventHandler<HTMLSelectElement>;
   handleGraphConfigFieldChange: React.ChangeEventHandler<HTMLSelectElement>;
   handleGraphConfigGroupByChange: React.ChangeEventHandler<HTMLSelectElement>;
   handleGraphConfigGroupModeChange: React.ChangeEventHandler<HTMLSelectElement>;
+  handleGraphConfigFilterFieldChange: React.ChangeEventHandler<HTMLSelectElement>;
+  handleGraphConfigFilterValueChange: React.ChangeEventHandler<HTMLInputElement>;
   handleGraphConfigAdd: () => void;
   handleGraphConfigRemove: () => void;
 }
@@ -40,6 +46,8 @@ type GraphConfig = {
   field: string;
   groupBy: string;
   groupMode: string;
+  filterField: string;
+  filterValue: string;
 };
 
 function GraphPanelGraph(props: GraphPanelProps) {
@@ -159,6 +167,29 @@ function GraphPanelOptions(props: GraphPanelProps) {
           />
         </Form.Group>
       )}
+      {props.type && (
+        <Form.Group className="mb-3">
+          <Form.Label>Filter</Form.Label>
+          <Row>
+            <Col>
+              <Dropdown
+                isClearable
+                options={props.filterFieldOptions}
+                value={props.filterField}
+                placeholder="Select field..."
+                onChange={props.handleGraphConfigFilterFieldChange}
+              />
+            </Col>
+            <Col>
+              <Input
+                value={props.filterValue}
+                placeholder="Select value..."
+                onChange={props.handleGraphConfigFilterValueChange}
+              />
+            </Col>
+          </Row>
+        </Form.Group>
+      )}
     </Form>
   );
 }
@@ -238,6 +269,9 @@ function Stats(props: StatsProps) {
 
   const [viewMode, setViewMode] = useState("wide");
   const [graphConfigList, setGraphConfigList] = useState(defaultGraphConfig());
+  const filterFieldOptions = Array.from(props.projectFields.entries())
+    .filter(([, projectField]) => projectField.actions.includes("filter"))
+    .map(([field]) => field);
   const listFieldOptions = Array.from(props.projectFields.entries())
     .filter(([, projectField]) => projectField.actions.includes("list"))
     .map(([field]) => field);
@@ -292,6 +326,24 @@ function Stats(props: StatsProps) {
     setGraphConfigList(list);
   };
 
+  const handleGraphConfigFilterFieldChange = (
+    e: React.ChangeEvent<HTMLSelectElement>,
+    index: number
+  ) => {
+    const list = [...graphConfigList];
+    list[index].filterField = e.target.value;
+    setGraphConfigList(list);
+  };
+
+  const handleGraphConfigFilterValueChange = (
+    e: React.ChangeEvent<HTMLInputElement>,
+    index: number
+  ) => {
+    const list = [...graphConfigList];
+    list[index].filterValue = e.target.value;
+    setGraphConfigList(list);
+  };
+
   const handleGraphConfigAdd = (index: number) => {
     setGraphConfigList([
       ...graphConfigList.slice(0, index),
@@ -301,6 +353,8 @@ function Stats(props: StatsProps) {
         field: "",
         groupBy: "",
         groupMode: "",
+        filterField: "",
+        filterValue: "",
       },
       ...graphConfigList.slice(index),
     ]);
@@ -361,7 +415,10 @@ function Stats(props: StatsProps) {
                   field={graphConfig.field}
                   groupBy={graphConfig.groupBy}
                   groupMode={graphConfig.groupMode}
+                  filterField={graphConfig.filterField}
+                  filterValue={graphConfig.filterValue}
                   graphFieldOptions={listFieldOptions}
+                  filterFieldOptions={filterFieldOptions}
                   handleGraphConfigTypeChange={(e) =>
                     handleGraphConfigTypeChange(e, index)
                   }
@@ -374,6 +431,12 @@ function Stats(props: StatsProps) {
                   handleGraphConfigGroupModeChange={(e) =>
                     handleGraphConfigGroupModeChange(e, index)
                   }
+                  handleGraphConfigFilterFieldChange={(e) =>
+                    handleGraphConfigFilterFieldChange(e, index)
+                  }
+                  handleGraphConfigFilterValueChange={(e) =>
+                    handleGraphConfigFilterValueChange(e, index)
+                  }
                   handleGraphConfigAdd={() => handleGraphConfigAdd(index + 1)}
                   handleGraphConfigRemove={() => handleGraphConfigRemove(index)}
                 />