Add relative performance

empower-ai · Sep 26, 2023 · 5ac1101 · 5ac1101
1 parent a550725
commit 5ac1101
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 1 deletion.
diff --git a/frontend/src/components/main-dashboard/TopDimensionSlicesTable.tsx b/frontend/src/components/main-dashboard/TopDimensionSlicesTable.tsx
@@ -195,6 +195,12 @@ export default function TopDimensionSlicesTable({
                 <TooltipIcon text="Absolute contribution of the segment to the overall metric movement." />
               </Flex>
             </TableHeaderCell>
+            <TableHeaderCell>
+              <Flex justifyContent="start" className="gap-2">
+                Relative Performance
+                <TooltipIcon text="Performance of the segment compared with overall change: change_of_segment - overall_change" />
+              </Flex>
+            </TableHeaderCell>
             <TableHeaderCell>
               <Flex justifyContent="start" className="gap-2">
                 Segment Size
@@ -223,6 +229,7 @@ export default function TopDimensionSlicesTable({
                 aggregationMethod={metric.aggregationMethod}
                 onReRunOnSegment={onReRunOnSegment}
                 key={Md5.hashStr(dimensionSlice.serializedKey)}
+                metric={metric}
               />
             );
           })}

diff --git a/frontend/src/components/main-dashboard/TopDimensionSlicesTableRow.tsx b/frontend/src/components/main-dashboard/TopDimensionSlicesTableRow.tsx
@@ -17,7 +17,11 @@ import { useDispatch, useSelector } from "react-redux";
 import { Md5 } from "ts-md5";
 import { Tooltip } from "../../common/Tooltip";
 import getSettings from "../../common/server-data/settings";
-import { DimensionSliceInfo, DimensionSliceKey } from "../../common/types";
+import {
+  DimensionSliceInfo,
+  DimensionSliceKey,
+  InsightMetric,
+} from "../../common/types";
 import {
   formatDimensionSliceKeyForRendering,
   formatMetricValue,
@@ -41,6 +45,7 @@ type Props = {
   targetDirection: TargetDirection;
   aggregationMethod: string;
   onReRunOnSegment: (key: DimensionSliceKey) => void;
+  metric: InsightMetric;
 };
 
 function getChangePercentage(num1: number, num2: number): ReactNode {
@@ -53,6 +58,49 @@ function getChangePercentage(num1: number, num2: number): ReactNode {
   );
 }
 
+function getRelativePerformance(
+  num1: number,
+  num2: number,
+  overallChange: number,
+  targetDirection: TargetDirection
+): ReactNode {
+  if (num1 === 0) {
+    return (
+      <Badge size="xs" color="gray" className="ml-1">
+        N/A
+      </Badge>
+    );
+  }
+
+  const change = (num2 - num1) / num1;
+  const relativeChange = (change - overallChange) * 100.0;
+
+  if (relativeChange > 0) {
+    return (
+      <BadgeDelta
+        deltaType="increase"
+        isIncreasePositive={targetDirection === "increasing"}
+      >
+        +{formatNumber(relativeChange)}%
+      </BadgeDelta>
+    );
+  } else if (relativeChange === 0) {
+    return (
+      <BadgeDelta deltaType="unchanged">
+        {formatNumber(relativeChange)}%
+      </BadgeDelta>
+    );
+  }
+  return (
+    <BadgeDelta
+      deltaType="decrease"
+      isIncreasePositive={targetDirection === "increasing"}
+    >
+      {formatNumber(relativeChange)}%
+    </BadgeDelta>
+  );
+}
+
 function absoluteContribution(
   change: number,
   targetDirection: TargetDirection,
@@ -96,6 +144,7 @@ export default function TopDimensionSlicesTableRow({
   targetDirection,
   aggregationMethod,
   onReRunOnSegment,
+  metric,
 }: Props) {
   const allDimensionSliceInfo = useSelector(
     (state: RootState) =>
@@ -116,6 +165,7 @@ export default function TopDimensionSlicesTableRow({
           targetDirection={targetDirection}
           aggregationMethod={aggregationMethod}
           onReRunOnSegment={onReRunOnSegment}
+          metric={metric}
           key={`${Md5.hashStr(serializedKey)}-${Md5.hashStr(
             dimensionSliceInfo.serializedKey
           )}`}
@@ -220,6 +270,15 @@ export default function TopDimensionSlicesTableRow({
                 (n) => formatNumber(n)
               )}
         </TableCell>
+        <TableCell>
+          {getRelativePerformance(
+            dimensionSlice?.baselineValue.sliceValue ?? 0,
+            dimensionSlice?.comparisonValue.sliceValue ?? 0,
+            (metric.comparisonValue - metric.baselineValue) /
+              metric.baselineValue,
+            targetDirection
+          )}
+        </TableCell>
         <TableCell>
           <Flex>
             <Text>