Merge branch 'dev' of https://github.com/uzh-bf/gbl-uzh into jakob/report-improvements

# Conflicts:
#	apps/demo-game/src/pages/admin/reports/[id].tsx

Author: rschlaefli

apps/demo-game/src/lib/analysis.ts

@@ -1,3 +1,4 @@
+import { standardDeviation } from '@gbl-uzh/platform/dist/lib/util'
 import { PlayerResult } from 'src/graphql/generated/ops'
 import { MONTHS, NUM_MONTHS } from './constants'
 
@@ -28,3 +29,33 @@ export const composeChartData = (dataPerPeriod: any, key: string) => {
   })
   return output
 }
+
+export const computeRiskAndReturnOfPlayer = (
+  segmentEndResultsOfPlayer: PlayerResult[]
+) => {
+  const totalAssetsReturns = segmentEndResultsOfPlayer.flatMap(({ facts }) => {
+    const assetsWithReturns = facts?.assetsWithReturns.slice(1) || []
+    return assetsWithReturns.map(({ totalAssetsReturn }) => totalAssetsReturn)
+  })
+
+  // TODO(JJ): 12 should rather be num_segments * 3 (because a segment is fixed as 3)
+  const bankReturnPA: number =
+    12 * segmentEndResultsOfPlayer?.[0]?.facts.assetsWithReturns[1].bankReturn
+
+  const num = totalAssetsReturns.length
+
+  const numResults = segmentEndResultsOfPlayer.length
+  const lastResult = segmentEndResultsOfPlayer[numResults - 1]
+  const assetsWithReturns = lastResult.facts?.assetsWithReturns
+  const lastAccReturn = assetsWithReturns.slice(-1)[0].accTotalAssetsReturn
+
+  const risk = standardDeviation(totalAssetsReturns) * Math.sqrt(12)
+  const returns = Math.pow(1 + lastAccReturn, 12 / num) - 1
+  const sharpeRatio =
+    risk > 0.0001 ? (returns - bankReturnPA) / risk : undefined
+  return {
+    returns,
+    risk,
+    sharpeRatio,
+  }
+}

apps/demo-game/src/pages/admin/reports/[id].tsx

@@ -41,6 +41,8 @@ import {
   Line,
   LineChart,
   ReferenceLine,
+  Scatter,
+  ScatterChart,
   XAxis,
   YAxis,
 } from 'recharts'
@@ -93,6 +95,20 @@ function ReportGame() {
     fetchPolicy: 'cache-first',
   })
 
+  const {
+    data: periodEndResults,
+    loading: periodEndResultsLoading,
+    error: periodEndResultsError,
+  } = useQuery(SpecificResultsDocument, {
+    variables: {
+      gameId: Number(router.query.id),
+      type: 'PERIOD_END',
+    },
+    // pollInterval: 15000,
+    skip: !router.query.id,
+    fetchPolicy: 'cache-first',
+  })
+
   const memoizedData = useMemo(() => {
     if (
       loading ||
@@ -171,10 +187,11 @@ function ReportGame() {
             decisions[v] = Number(result.facts.decisions[v])
           })
 
-          const totalAssetsTmp = result.facts.assetsWithReturns
+          const assetsWithReturns = result.facts.assetsWithReturns ?? []
+          const totalAssetsTmp = assetsWithReturns
             .filter((_, ix) => ix > 0)
             .map((a) => a.totalAssets)
-          const accTotalAssetsReturnTmp = result.facts.assetsWithReturns
+          const accTotalAssetsReturnTmp = assetsWithReturns
             .filter((_, ix) => ix > 0)
             .map((a) => a.accTotalAssetsReturn)
 
@@ -184,13 +201,22 @@ function ReportGame() {
               name: result.player.name,
               totalAssets: [...totalAssetsTmp],
               accTotalAssetsReturn: [...accTotalAssetsReturnTmp],
+              risk: result.facts.risk,
+              totalAssetsReturnsPA: result.facts.totalAssetsReturnsPA,
             }
           } else {
             dataPerPlayer[result.player.id].decisions.push(decisions)
             dataPerPlayer[result.player.id].totalAssets.push(...totalAssetsTmp)
             dataPerPlayer[result.player.id].accTotalAssetsReturn.push(
               ...accTotalAssetsReturnTmp
             )
+            if (result.facts.risk) {
+              dataPerPlayer[result.player.id].risk = result.facts.risk
+            }
+            if (result.facts.totalAssetsReturnsPA) {
+              dataPerPlayer[result.player.id].totalAssetsReturnsPA =
+                result.facts.totalAssetsReturnsPA
+            }
           }
         })
         output.push(dataPerPlayer)
@@ -316,6 +342,7 @@ function ReportGame() {
       dataTotalAssets,
       dataAccTotalAssetsReturn,
       segmentResultPerSegmentAvg,
+      playerConfig,
     }
   }, [
     data,
@@ -326,7 +353,68 @@ function ReportGame() {
     segmentEndResultsError,
   ])
 
-  if (loading || segmentEndResultsLoading || !memoizedData) {
+  const memoizedDataPeriod = useMemo(() => {
+    if (
+      periodEndResultsLoading ||
+      periodEndResultsError ||
+      !periodEndResults?.specificResults
+    ) {
+      return null
+    }
+
+    const previousPeriodResults = periodEndResults.specificResults
+
+    console.log('previousPeriodResults', previousPeriodResults)
+
+    const riskReturnPerPeriod = previousPeriodResults.reduce((acc, result) => {
+      if (!acc[result.period.index]) {
+        acc[result.period.index] = {
+          [result.player.id]: {
+            name: result.player.name,
+            risk: result.facts.risk,
+            totalAssetsReturnsPA: result.facts.totalAssetsReturnsPA,
+          },
+        }
+      } else {
+        acc[result.period.index][result.player.id] = {
+          name: result.player.name,
+          risk: result.facts.risk,
+          totalAssetsReturnsPA: result.facts.totalAssetsReturnsPA,
+        }
+      }
+      return acc
+    }, [])
+
+    const sharpeRatioPerPeriod = previousPeriodResults.reduce((acc, result) => {
+      acc[result.period.index] = {
+        ...acc[result.period.index],
+        period: result.period.index + 1,
+        [result.player.name + '-sharpeRatio']: result.facts.sharpeRatio,
+      }
+      return acc
+    }, [])
+
+    const configSharpeRatio = Object.keys(
+      sharpeRatioPerPeriod?.[0] ?? {}
+    ).reduce((acc, item) => {
+      if (item.endsWith('sharpeRatio')) {
+        acc[item] = {
+          label: item.replace('-sharpeRatio', ''),
+        }
+      }
+      return acc
+    }, {})
+
+    return { riskReturnPerPeriod, sharpeRatioPerPeriod, configSharpeRatio }
+  }, [periodEndResults, periodEndResultsLoading, periodEndResultsError])
+
+  if (
+    loading ||
+    segmentEndResultsLoading ||
+    periodEndResultsLoading ||
+    !memoizedDataPeriod ||
+    !memoizedData
+  ) {
     return <div>loading...</div>
   }
 
@@ -336,6 +424,9 @@ function ReportGame() {
   if (segmentEndResultsError) {
     return <div>{segmentEndResultsError.message}</div>
   }
+  if (periodEndResultsError) {
+    return <div>{periodEndResultsError.message}</div>
+  }
 
   const {
     game,
@@ -346,6 +437,7 @@ function ReportGame() {
     dataTotalAssets,
     dataAccTotalAssetsReturn,
     segmentResultPerSegmentAvg,
+    playerConfig,
   } = memoizedData
 
   const decisionKeys = ['bank', 'bonds', 'stocks']
@@ -361,6 +453,9 @@ function ReportGame() {
     }
   })
 
+  const { riskReturnPerPeriod, sharpeRatioPerPeriod, configSharpeRatio } =
+    memoizedDataPeriod
+
   return (
     <div className="container mx-auto p-4">
       <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-2">
@@ -682,6 +777,115 @@ function ReportGame() {
             </ChartContainer>
           </CardContent>
         </Card>
+
+        <Card className="flex h-full w-full flex-col">
+          <CardHeader>
+            <CardTitle>Risk-Return </CardTitle>
+            <CardDescription>
+              Risk-Return chart of the latest completed period.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex-grow">
+            <ChartContainer config={playerConfig} className="h-[300px] w-full">
+              <ScatterChart>
+                <ChartTooltip
+                  cursor={false}
+                  content={<ChartTooltipContent />}
+                  formatter={(value, name, item) => [
+                    <div
+                      key={name}
+                      className="flex w-full items-center justify-between gap-x-2"
+                    >
+                      <div className="flex items-center gap-x-1">
+                        <div
+                          className="h-[8px] w-[8px] rounded-sm"
+                          style={{ background: item.color }}
+                        />
+                        <span className="text-xs text-gray-600">{name}</span>
+                      </div>
+                      <span className="font-bold text-black">
+                        {(value * 100).toFixed(2)}%
+                      </span>
+                    </div>,
+                  ]}
+                />
+                <CartesianGrid />
+                <XAxis
+                  dataKey="risk"
+                  tickLine={false}
+                  tickMargin={8}
+                  type="number"
+                  name="Risk"
+                  tickFormatter={(v) => `${(v * 100).toFixed(2)}%`}
+                />
+                <YAxis
+                  dataKey="totalAssetsReturnsPA"
+                  type="number"
+                  name="Returns p.a."
+                  tickLine={false}
+                  tickMargin={8}
+                  tickFormatter={(v) => `${(v * 100).toFixed(2)}%`}
+                />
+                {Object.values(
+                  riskReturnPerPeriod?.[riskReturnPerPeriod.length - 1] ?? {}
+                ).map((playerData, ix) => {
+                  return (
+                    <Scatter
+                      key={playerData.name}
+                      name={playerData.name}
+                      data={[playerData]}
+                      fill={colors[ix]}
+                    />
+                  )
+                })}
+                <ChartLegend content={<ChartLegendContent />} />
+              </ScatterChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+
+        <Card className="flex h-full w-full flex-col">
+          <CardHeader>
+            <CardTitle>Sharpe Ratio</CardTitle>
+            {/* <CardDescription>Average decisions over players.</CardDescription> */}
+          </CardHeader>
+          <CardContent className="flex-grow">
+            <ChartContainer
+              config={configSharpeRatio}
+              className="h-[300px] w-full"
+            >
+              <BarChart data={sharpeRatioPerPeriod}>
+                {Object.keys(configSharpeRatio).map((key, ix) => {
+                  return (
+                    <Bar key={key} dataKey={key} fill={colors[ix]} radius={4}>
+                      <LabelList
+                        position="top"
+                        className="fill-foreground"
+                        fontSize={12}
+                        formatter={(v) => `${v.toFixed(2)}`}
+                      />
+                    </Bar>
+                  )
+                })}
+                <CartesianGrid vertical={false} />
+                <XAxis
+                  dataKey="period"
+                  tickLine={false}
+                  axisLine={false}
+                  tickMargin={8}
+                  tickFormatter={(v) => `P${v}`}
+                />
+                <YAxis
+                  tickLine={false}
+                  axisLine={false}
+                  tickMargin={8}
+                  tickFormatter={(v) => `${v.toFixed(2)}`}
+                />
+                <ChartLegend content={<ChartLegendContent />} />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
       </div>
     </div>
   )

apps/demo-game/src/services/PeriodResultService.ts

@@ -5,6 +5,8 @@ import {
 } from '@gbl-uzh/platform'
 import { debugLog } from '@gbl-uzh/platform/dist/lib/util'
 import { produce } from 'immer'
+import { PlayerResult } from 'src/graphql/generated/ops'
+import { computeRiskAndReturnOfPlayer } from '../lib/analysis'
 import { PlayerRole } from '../settings/Constants'
 import { PeriodFacts, PeriodSegmentFacts } from '../types/Period'
 import { OutputResultFacts, ResultFacts, ResultFactsInit } from '../types/facts'
@@ -83,16 +85,31 @@ export function start(
 
 export function end(
   facts: ResultFacts,
-  payload: PayloadPeriodResultEnd<PeriodFacts, PeriodSegmentFacts, PlayerRole>
+  payload: PayloadPeriodResultEnd<
+    PlayerResult[],
+    PeriodFacts,
+    PeriodSegmentFacts,
+    PlayerRole
+  >
 ): OutputResultFacts {
   const baseFacts: OutputResultFacts = {
     resultFacts: facts,
     events: [],
   }
 
+  const {
+    returns: totalAssetsReturnsPA,
+    risk,
+    sharpeRatio,
+  } = computeRiskAndReturnOfPlayer(payload.segmentEndResults)
+
   const resultFacts: OutputResultFacts = produce(
     baseFacts,
-    (draft: OutputResultFacts) => {}
+    (draft: OutputResultFacts) => {
+      draft.resultFacts.totalAssetsReturnsPA = totalAssetsReturnsPA
+      draft.resultFacts.risk = risk
+      draft.resultFacts.sharpeRatio = sharpeRatio
+    }
   )
 
   debugLog('PeriodResultEnd', facts, payload, resultFacts)

apps/demo-game/src/types/facts.ts

@@ -43,6 +43,9 @@ export type ResultFactsInit = {
 export type ResultFacts = ResultFactsInit & {
   returns: Assets
   assetsWithReturns: AssetsWithReturns[]
+  totalAssetsReturnsPA: number
+  risk: number
+  sharpeRatio?: number
 }
 
 export type OutputResultFacts = OutputFacts<ResultFacts, any, any>

packages/platform/src/lib/util.ts

@@ -34,6 +34,14 @@ export function computeScenarioOutcome(
   return trend + (diceRoll - 7) * gap
 }
 
+export function standardDeviation(arr: number[]) {
+  const num = arr.length
+  const mean = arr.reduce((acc, value) => acc + value, 0) / num
+  const variance =
+    arr.reduce((acc, value) => acc + Math.pow(value - mean, 2), 0) / (num - 1)
+  return Math.sqrt(variance)
+}
+
 export function computePercentChange(newValue: number, oldValue: number) {
   return (newValue - oldValue) / oldValue
 }