From 88e9f0ead35c7ca62f8b0844dc09b568a5defcf8 Mon Sep 17 00:00:00 2001
From: Jasper van Merle <jaspervmerle@gmail.com>
Date: Wed, 10 Apr 2024 07:56:19 +0200
Subject: [PATCH] Add observations to timestamp detail in preparation for
 tomorrow

---
 .../ConversionObservationsTable.tsx           | 44 +++++++++++++++++++
 .../PlainValueObservationsTable.tsx           | 23 ++++++++++
 src/pages/visualizer/TimestampDetail.tsx      | 10 +++++
 3 files changed, 77 insertions(+)
 create mode 100644 src/pages/visualizer/ConversionObservationsTable.tsx
 create mode 100644 src/pages/visualizer/PlainValueObservationsTable.tsx

diff --git a/src/pages/visualizer/ConversionObservationsTable.tsx b/src/pages/visualizer/ConversionObservationsTable.tsx
new file mode 100644
index 0000000..03b92f9
--- /dev/null
+++ b/src/pages/visualizer/ConversionObservationsTable.tsx
@@ -0,0 +1,44 @@
+import { Table } from '@mantine/core';
+import { ReactNode } from 'react';
+import { TradingState } from '../../models.ts';
+import { formatNumber } from '../../utils/format.ts';
+import { SimpleTable } from './SimpleTable.tsx';
+
+export interface ConversionObservationsTableProps {
+  conversionObservations: TradingState['observations']['conversionObservations'];
+}
+
+export function ConversionObservationsTable({ conversionObservations }: ConversionObservationsTableProps): ReactNode {
+  const rows: ReactNode[] = [];
+  for (const [product, observation] of Object.entries(conversionObservations)) {
+    rows.push(
+      <Table.Tr key={product}>
+        <Table.Td>{product}</Table.Td>
+        <Table.Td>{formatNumber(observation.bidPrice)}</Table.Td>
+        <Table.Td>{formatNumber(observation.askPrice)}</Table.Td>
+        <Table.Td>{formatNumber(observation.transportFees)}</Table.Td>
+        <Table.Td>{formatNumber(observation.exportTariff)}</Table.Td>
+        <Table.Td>{formatNumber(observation.importTariff)}</Table.Td>
+        <Table.Td>{formatNumber(observation.sunlight)}</Table.Td>
+        <Table.Td>{formatNumber(observation.humidity)}</Table.Td>
+      </Table.Tr>,
+    );
+  }
+
+  return (
+    <SimpleTable
+      label="conversion observations"
+      columns={[
+        'Product',
+        'Bid price',
+        'Ask price',
+        'Transport fees',
+        'Export tariff',
+        'Import tariff',
+        'Sunlight',
+        'Humidity',
+      ]}
+      rows={rows}
+    />
+  );
+}
diff --git a/src/pages/visualizer/PlainValueObservationsTable.tsx b/src/pages/visualizer/PlainValueObservationsTable.tsx
new file mode 100644
index 0000000..3fb1fba
--- /dev/null
+++ b/src/pages/visualizer/PlainValueObservationsTable.tsx
@@ -0,0 +1,23 @@
+import { Table } from '@mantine/core';
+import { ReactNode } from 'react';
+import { TradingState } from '../../models.ts';
+import { formatNumber } from '../../utils/format.ts';
+import { SimpleTable } from './SimpleTable.tsx';
+
+export interface PlainValueObservationsTableProps {
+  plainValueObservations: TradingState['observations']['plainValueObservations'];
+}
+
+export function PlainValueObservationsTable({ plainValueObservations }: PlainValueObservationsTableProps): ReactNode {
+  const rows: ReactNode[] = [];
+  for (const product of Object.keys(plainValueObservations)) {
+    rows.push(
+      <Table.Tr key={product}>
+        <Table.Td>{product}</Table.Td>
+        <Table.Td>{formatNumber(plainValueObservations[product])}</Table.Td>
+      </Table.Tr>,
+    );
+  }
+
+  return <SimpleTable label="plain value observations" columns={['Product', 'Value']} rows={rows} />;
+}
diff --git a/src/pages/visualizer/TimestampDetail.tsx b/src/pages/visualizer/TimestampDetail.tsx
index a8b2c19..fe6b1ac 100644
--- a/src/pages/visualizer/TimestampDetail.tsx
+++ b/src/pages/visualizer/TimestampDetail.tsx
@@ -4,9 +4,11 @@ import { ScrollableCodeHighlight } from '../../components/ScrollableCodeHighligh
 import { AlgorithmDataRow } from '../../models.ts';
 import { useStore } from '../../store.ts';
 import { formatNumber } from '../../utils/format.ts';
+import { ConversionObservationsTable } from './ConversionObservationsTable.tsx';
 import { ListingsTable } from './ListingsTable.tsx';
 import { OrderDepthTable } from './OrderDepthTable.tsx';
 import { OrdersTable } from './OrdersTable.tsx';
+import { PlainValueObservationsTable } from './PlainValueObservationsTable.tsx';
 import { PositionTable } from './PositionTable.tsx';
 import { ProfitLossTable } from './ProfitLossTable.tsx';
 import { TradesTable } from './TradesTable.tsx';
@@ -63,6 +65,14 @@ export function TimestampDetail({
         <Title order={5}>Orders</Title>
         {<OrdersTable orders={orders} />}
       </Grid.Col>
+      <Grid.Col span={{ xs: 12, sm: 4 }}>
+        <Title order={5}>Plain value observations</Title>
+        <PlainValueObservationsTable plainValueObservations={state.observations.plainValueObservations} />
+      </Grid.Col>
+      <Grid.Col span={{ xs: 12, sm: 8 }}>
+        <Title order={5}>Conversion observations</Title>
+        <ConversionObservationsTable conversionObservations={state.observations.conversionObservations} />
+      </Grid.Col>
       <Grid.Col span={{ xs: 12, sm: 6 }}>
         <Title order={5}>Sandbox logs</Title>
         {sandboxLogs ? (