Add option to use average of all payout items as final payout

Author: vivtsai

frontend/src/components/stages/payout_editor.ts

@@ -50,7 +50,7 @@ export class PayoutEditor extends MobxLitElement {
     );
 
     return html`
-      ${this.renderPayoutCurrency()}
+      ${this.renderPayoutCurrency()} ${this.renderPayoutAverage()}
       <pr-menu
         name="Add stage payout"
         ?disabled=${!this.experimentEditor.canEditStages}
@@ -67,6 +67,31 @@ export class PayoutEditor extends MobxLitElement {
     `;
   }
 
+  renderPayoutAverage() {
+    if (!this.stage) return nothing;
+
+    const updateAverage = () => {
+      if (!this.stage) return;
+      this.experimentEditor.updateStage({
+        ...this.stage,
+        averageAllPayoutItems: !this.stage.averageAllPayoutItems,
+      });
+    };
+
+    return html`
+      <div class="checkbox-wrapper">
+        <md-checkbox
+          touch-target="wrapper"
+          ?checked=${this.stage.averageAllPayoutItems}
+          ?disabled=${!this.experimentEditor.canEditStages}
+          @click=${updateAverage}
+        >
+        </md-checkbox>
+        <div>Use the average of all stage payouts as the final payout</div>
+      </div>
+    `;
+  }
+
   addPayout(stage: StageConfig) {
     if (!this.stage) return;
 

frontend/src/components/stages/payout_summary_view.ts

@@ -69,10 +69,11 @@ export class PayoutView extends MobxLitElement {
 
   private renderTotalPayout(resultConfig: PayoutResultConfig) {
     const total = calculatePayoutTotal(resultConfig);
+    const averageNote = resultConfig.averageAllPayoutItems ? ' (average)' : '';
 
     return html`
       <div class="scoring-bundle row">
-        <h2>Final payout</h2>
+        <h2>Final payout${averageNote}</h2>
         <div class="chip primary">
           ${this.renderCurrency(total, resultConfig.currency)}
         </div>

utils/src/stages/payout_stage.ts

@@ -26,6 +26,7 @@ export interface PayoutStageConfig extends BaseStageConfig {
   kind: StageKind.PAYOUT;
   currency: PayoutCurrency;
   payoutItems: PayoutItem[];
+  averageAllPayoutItems: boolean;
 }
 
 export enum PayoutCurrency {
@@ -93,6 +94,7 @@ export interface PayoutResultConfig {
   id: string; // stage ID of the original payout config
   currency: PayoutCurrency;
   results: PayoutItemResult[];
+  averageAllPayoutItems: boolean;
 }
 
 export type PayoutItemResult =
@@ -157,6 +159,7 @@ export function createPayoutStage(
     progress: config.progress ?? createStageProgressConfig(),
     currency: config.currency ?? PayoutCurrency.USD,
     payoutItems: config.payoutItems ?? [],
+    averageAllPayoutItems: config.averageAllPayoutItems ?? false,
   };
 }
 
@@ -292,6 +295,7 @@ export function calculatePayoutResult(
     id: payoutConfig.id,
     currency: payoutConfig.currency,
     results,
+    averageAllPayoutItems: payoutConfig.averageAllPayoutItems,
   };
   return resultConfig;
 }
@@ -316,6 +320,12 @@ export function calculatePayoutTotal(resultConfig: PayoutResultConfig) {
       total += Math.max(0, chipTotal - initialChipTotal);
     }
   });
+
+  // If average all items, divide total by number of results
+  if (resultConfig.averageAllPayoutItems) {
+    return Math.ceil((total / resultConfig.results.length) * 100) / 100;
+  }
+
   return Math.ceil(total * 100) / 100;
 }
 

utils/src/stages/payout_stage.validation.ts

@@ -85,6 +85,7 @@ export const PayoutStageConfigData = Type.Object(
     progress: StageProgressConfigSchema,
     currency: PayoutCurrencySchema,
     payoutItems: Type.Array(PayoutItemData),
+    averageAllPayoutItems: Type.Boolean(),
   },
   strict,
 );