Add filters to report settings

empower-ai · Oct 2, 2023 · a33bd8c · a33bd8c
1 parent 6d15857
commit a33bd8c
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 7 deletions.
diff --git a/frontend/src/components/common/FiltersDropdown.tsx b/frontend/src/components/common/FiltersDropdown.tsx
@@ -205,7 +205,10 @@ export const FiltersDropDown = forwardRef(function FiltersDropDown(
                       disabled={!filter.column}
                     />
                   ) : (
-                    <Flex justifyContent="center">
+                    <Flex
+                      justifyContent="center"
+                      className="w-full min-w-[10rem]"
+                    >
                       <Text>N/A</Text>
                     </Flex>
                   )}

diff --git a/frontend/src/components/uploader/report-config/BigqueryBasedReportConfig.tsx b/frontend/src/components/uploader/report-config/BigqueryBasedReportConfig.tsx
@@ -1,4 +1,5 @@
 import { useNavigate } from "react-router-dom";
+import { Filter } from "../../../common/types";
 import { BigquerySchema } from "../../../types/data-source";
 import {
   DateRangeRelatedData,
@@ -26,7 +27,8 @@ export default function BigqueryBasedReportConfig({ schema }: Props) {
     dateRangeData: DateRangeRelatedData,
     targetDirection: TargetDirection,
     expectedValue: number,
-    maxNumDimensions: number
+    maxNumDimensions: number,
+    filters: Filter[]
   ) => {
     navigate("/dashboard", {
       state: {
@@ -41,7 +43,7 @@ export default function BigqueryBasedReportConfig({ schema }: Props) {
         dateRangeData,
         targetDirection,
         expectedValue,
-        filters: [],
+        filters,
         maxNumDimensions,
       },
     });

diff --git a/frontend/src/components/uploader/report-config/CSVBasedReportConfig.tsx b/frontend/src/components/uploader/report-config/CSVBasedReportConfig.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { Filter } from "../../../common/types";
 import { createNewDateWithBrowserTimeZone } from "../../../common/utils";
 import { CSVSchema, DateField } from "../../../types/data-source";
 import {
@@ -189,7 +190,8 @@ export default function CSVBasedReportConfig({
     dateRangeData: DateRangeRelatedData,
     targetDirection: TargetDirection,
     expectedValue: number,
-    maxNumDimensions: number
+    maxNumDimensions: number,
+    filters: Filter[]
   ) => {
     navigate("/dashboard", {
       state: {
@@ -204,7 +206,7 @@ export default function CSVBasedReportConfig({
         dateRangeData,
         targetDirection,
         expectedValue,
-        filters: [],
+        filters,
         maxNumDimensions,
       },
     });

diff --git a/frontend/src/components/uploader/report-config/ReportConfig.tsx b/frontend/src/components/uploader/report-config/ReportConfig.tsx
@@ -5,14 +5,17 @@ import {
   Bold,
   Button,
   Card,
+  Col,
   Divider,
   Flex,
+  Grid,
   Text,
   Title,
 } from "@tremor/react";
 import { useEffect, useState } from "react";
 import { getServerData } from "../../../common/server-data/server-data-loader";
 import { useTracking } from "../../../common/tracking";
+import { Filter } from "../../../common/types";
 import { DataSourceType, Schema } from "../../../types/data-source";
 import {
   DateRangeRelatedData,
@@ -22,6 +25,7 @@ import {
   RowCountByDateAndColumn,
   TargetDirection,
 } from "../../../types/report-config";
+import { FiltersDropDown } from "../../common/FiltersDropdown";
 import DatePicker, { DateRangeData } from "../DatePicker";
 import { ExpectedChangeInput } from "../ExpectedChangeInput";
 import MultiSelector from "../MultiSelector";
@@ -43,7 +47,8 @@ type Props = {
     dateRangeData: DateRangeRelatedData,
     targetDirection: TargetDirection,
     expectedValue: number,
-    maxNumDimensions: number
+    maxNumDimensions: number,
+    filters: Filter[]
   ) => Promise<void>;
 };
 
@@ -64,6 +69,8 @@ function ReportConfig({
   const [metricColumn, setMetricColumn] = useState<MetricColumn>();
   const [expectedValue, setExpectedValue] = useState<number>();
   const [maxNumDimensions, setMaxNumDimensions] = useState<number>(3);
+  const [filters, setFilters] = useState<Filter[]>([]);
+
   const debugMode = getServerData().settings.showDebugInfo;
 
   const [comparisonDateRangeData, setComparisonDateRangeData] =
@@ -334,6 +341,23 @@ function ReportConfig({
             </Text>
           }
         />
+        <Grid numItems={5}>
+          <Col className="flex items-center justify-end" numColSpan={2}>
+            <Text className="pr-4 text-black">
+              Select filters <Bold>[optional]</Bold>
+            </Text>
+          </Col>
+          <Col className="flex items-center" numColSpan={3}>
+            <FiltersDropDown
+              filters={filters}
+              dimensions={getValidDimensionColumns()}
+              schema={schema}
+              onFiltersChanged={(selectedFilters) =>
+                setFilters(selectedFilters)
+              }
+            />
+          </Col>
+        </Grid>
         <Divider className="my-2" />
         <Accordion className="border-0">
           <AccordionHeader>
@@ -391,7 +415,8 @@ function ReportConfig({
               },
               targetDirection,
               expectedValue ?? 0,
-              maxNumDimensions
+              maxNumDimensions,
+              filters
             );
           }}
           disabled={!canSubmit()}