refactor frontend <> backend metric column data format, make it easy …

…to define a new metric format
empower-ai · Sep 3, 2023 · 8476dd2 · 8476dd2
1 parent 8234a5e
commit 8476dd2
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 43 deletions.
diff --git a/frontend/src/components/main-dashboard/MainDashboard.tsx b/frontend/src/components/main-dashboard/MainDashboard.tsx
@@ -55,6 +55,8 @@ export default function MainDashboard() {
     baseDateRange,
     comparisonDateRange,
     selectedColumns,
+    metricColumn,
+    supportingMetricColumn,
     dateColumn,
     groupByColumns,
     dataSourceType,
@@ -89,6 +91,8 @@ export default function MainDashboard() {
             comparisonDateRange,
             selectedColumns,
             dateColumn,
+            metricColumn,
+            supportingMetricColumn,
             groupByColumns,
           }),
           headers: {

diff --git a/frontend/src/components/uploader/report-config/BigqueryBasedReportConfig.tsx b/frontend/src/components/uploader/report-config/BigqueryBasedReportConfig.tsx
@@ -3,6 +3,7 @@ import { BigquerySchema } from "../../../types/data-source";
 import {
   ColumnConfig,
   DateRangeConfig,
+  MetricColumn,
   TargetDirection,
 } from "../../../types/report-config";
 import ReportConfig from "./ReportConfig";
@@ -23,6 +24,8 @@ export default function BigqueryBasedReportConfig({ schema }: Props) {
       [key: string]: ColumnConfig;
     },
     dateColumn: string,
+    metricColumn: MetricColumn,
+    supportingMetricColumn: MetricColumn[],
     groupByColumns: string[],
     baseDateRange: DateRangeConfig,
     comparisonDateRange: DateRangeConfig,
@@ -32,6 +35,8 @@ export default function BigqueryBasedReportConfig({ schema }: Props) {
       state: {
         tableName: name,
         dataSourceType: "bigquery",
+        metricColumn,
+        supportingMetricColumn,
         dateColumn,
         groupByColumns,
         selectedColumns,

diff --git a/frontend/src/components/uploader/report-config/CSVBasedReportConfig.tsx b/frontend/src/components/uploader/report-config/CSVBasedReportConfig.tsx
@@ -6,6 +6,7 @@ import { CSVSchema } from "../../../types/data-source";
 import {
   ColumnConfig,
   DateRangeConfig,
+  MetricColumn,
   PrefillConfig,
   RowCountByDateAndColumn,
   TargetDirection,
@@ -111,6 +112,8 @@ export default function CSVBasedReportConfig({
       [key: string]: ColumnConfig;
     },
     dateColumn: string,
+    metricColumn: MetricColumn,
+    supportingMetricColumn: MetricColumn[],
     groupByColumns: string[],
     baseDateRange: DateRangeConfig,
     comparisonDateRange: DateRangeConfig,
@@ -139,6 +142,8 @@ export default function CSVBasedReportConfig({
         dateColumn,
         groupByColumns,
         selectedColumns,
+        metricColumn,
+        supportingMetricColumn,
         baseDateRange,
         comparisonDateRange,
         targetDirection,

diff --git a/frontend/src/components/uploader/report-config/MetricConfig.tsx b/frontend/src/components/uploader/report-config/MetricConfig.tsx
@@ -6,6 +6,7 @@ import { useEffect, useState } from "react";
 import {
   AggregationType,
   ColumnType,
+  MetricColumn,
   TargetDirection
 } from "../../../types/report-config";
 import SingleSelector from "../SingleSelector";
@@ -14,7 +15,7 @@ type Props = {
   getValidMetricColumns: () => string[];
   selectedColumns: { [key: string]: { type: string } };
   onSelectMetrics: (metrics: string[], type: ColumnType) => void;
-  onSelectMetricAggregationOption: (metric: string, option: AggregationType) => void;
+  onSelectMetricAggregationOption: (metricColumn: MetricColumn, supportingMetric: boolean) => void;
   targetDirection: TargetDirection;
   setTargetDirection: (direction: TargetDirection) => void;
 }
@@ -23,30 +24,19 @@ type Props = {
 const MetricConfig = (props: Props) => {
   const { getValidMetricColumns, selectedColumns, onSelectMetrics, onSelectMetricAggregationOption, targetDirection, setTargetDirection } = props;
   const [metricType, setMetricType] = useState<AggregationType>("sum");
-  const [metricColumn, setMetricColumn] = useState<string>("");
+  const [metricColumns, setMetricColumns] = useState<string[]>([]);
 
   useEffect(() => {
-    if (metricColumn !== "") {
-      onSelectMetricAggregationOption(metricColumn, metricType);
+    if (metricColumns.length > 0) {
+      onSelectMetricAggregationOption({
+        columnNames: metricColumns,
+        aggregationOption: metricType,
+      } as MetricColumn, false);
     }
-  }, [metricColumn, metricType, onSelectMetricAggregationOption]);
-
-  return (
-    <>
-      <SingleSelector
-        title={
-          <Text className="pr-4 text-black">
-            Select the metric type
-          </Text>
-        }
-        labels={["Sum", "Count", "Count Distinct", "Ratio"]}
-        values={["sum", "count", "count_distinct", "ratio"]}
-        selectedValue={metricType}
-        onValueChange={(metric) => {
-          setMetricType(metric as AggregationType);
-        }}
-      />
+  }, [metricColumns, metricType, onSelectMetricAggregationOption]);
 
+  const singularMetrics = () => {
+    return (
       <SingleSelector
         title={
           <Text className="pr-4 text-black">
@@ -65,10 +55,38 @@ const MetricConfig = (props: Props) => {
             : ""
         }
         onValueChange={(metric) => {
-          setMetricColumn(metric);
+          setMetricColumns([metric]);
           onSelectMetrics([metric], "metric");
         }}
+    />);
+  };
+
+  const complexMetrics = () => {
+    return (
+      <>
+
+      </>
+    );
+  };
+
+  return (
+    <>
+      <SingleSelector
+        title={
+          <Text className="pr-4 text-black">
+            Select the metric type
+          </Text>
+        }
+        labels={["Sum", "Count", "Count Distinct", "Ratio"]}
+        values={["sum", "count", "count_distinct", "ratio"]}
+        selectedValue={metricType}
+        onValueChange={(metric) => {
+          setMetricType(metric as AggregationType);
+        }}
       />
+
+      {metricType === "ratio" ? complexMetrics() : singularMetrics()}
+
       <SingleSelector
         title={
           <Text className="pr-4 text-black">Target metric direction</Text>

diff --git a/frontend/src/components/uploader/report-config/ReportConfig.tsx b/frontend/src/components/uploader/report-config/ReportConfig.tsx
@@ -43,6 +43,8 @@ type Props = {
       [key: string]: ColumnConfig;
     },
     dateColumn: string,
+    metricColumn: MetricColumn,
+    supportingMetricColumn: MetricColumn[],
     groupByColumns: string[],
     baseDateRange: DateRangeConfig,
     comparisonDateRange: DateRangeConfig,
@@ -64,7 +66,7 @@ function ReportConfig({
   const [dateColumn, setDateColumn] = useState<string>("");
   const [groupByColumns, setGroupByColumns] = useState<string[]>([]);
   const [metricColumn, setMetricColumn] = useState<MetricColumn | undefined>(undefined);
-  const [relevantMetricColumns, setRelevantMetricColumns] = useState<string[]>([]);
+  const [relevantMetricColumns, setRelevantMetricColumns] = useState<MetricColumn[]>([]);
 
 
   const [selectedColumns, setSelectedColumns] = useState<{
@@ -114,21 +116,12 @@ function ReportConfig({
     setSelectedColumns(selectedColumnsClone);
   };
 
-  const onSelectMetricAggregationOption = (
-    metric: string,
-    aggregationOption: AggregationType
-  ) => {
-    const selectedColumnsClone = Object.assign({}, selectedColumns);
-    if (
-      selectedColumnsClone[metric]["type"] !== "metric" &&
-      selectedColumnsClone[metric]["type"] !== "supporting_metric"
-    ) {
-      throw new Error(
-        "Invalid aggregation option update on non-metric columns."
-      );
+  const onSelectMetricAggregationOption = (metricColumn: MetricColumn, supportingMetric = false) => {
+    if (supportingMetric) {
+      setRelevantMetricColumns([...relevantMetricColumns, metricColumn]);
+    } else {
+      setMetricColumn(metricColumn);
     }
-    selectedColumnsClone[metric]["aggregationOption"] = aggregationOption;
-    setSelectedColumns(selectedColumnsClone);
   };
 
   const onSelectMetricExpectedChange = (
@@ -232,10 +225,7 @@ function ReportConfig({
   }
 
   function canSubmit() {
-    const hasMetricColumn =
-      Object.values(selectedColumns).filter(
-        (column) => column.type === "metric"
-      ).length > 0;
+    const hasMetricColumn = metricColumn !== undefined && metricColumn.columnNames.length > 0;
 
     const hasDimensionColumn = groupByColumns.length > 0;
 
@@ -280,6 +270,8 @@ function ReportConfig({
               selectedColumns[h]["type"] === "date")
           )
       )
+      .filter((h) => !metricColumn || metricColumn.columnNames.indexOf(h) === -1)
+      .filter((h) => dateColumn !== h)
       .filter((h) => {
         if (Object.keys(rowCountByColumn).length === 0) {
           return true;
@@ -463,7 +455,10 @@ function ReportConfig({
                   values={["sum", "count", "distinct"]}
                   selectedValue={selectedColumns[m]["aggregationOption"]!}
                   onValueChange={(v) =>
-                    onSelectMetricAggregationOption(m, v as AggregationType)
+                    onSelectMetricAggregationOption({
+                      columnNames: [m],
+                      aggregationOption: v as AggregationType,
+                    } as MetricColumn, true)
                   }
                   key={m}
                   instruction={<Text>How to aggregation the metric.</Text>}
@@ -489,10 +484,16 @@ function ReportConfig({
         <Divider />
         <Button
           onClick={async () => {
+            if (!metricColumn) {
+              return;
+            }
+
             trackSubmit();
             await onSubmit(
               selectedColumns,
               dateColumn,
+              metricColumn,
+              relevantMetricColumns,
               groupByColumns,
               baseDateRangeData.range,
               comparisonDateRangeData.range,

diff --git a/frontend/src/types/report-config.ts b/frontend/src/types/report-config.ts
@@ -6,7 +6,7 @@ export type AggregationType = "sum" | "count" | "distinct" | "ratio";
 export type TargetDirection = "increasing" | "decreasing";
 
 export interface MetricColumn {
-  columnName: string;
+  columnNames: string[];
   aggregationOption: AggregationType;
   expectedValue?: number;
 }