Add plain value observation charts

src/pages/visualizer/PlainValueObservationChart.tsx

@@ -0,0 +1,34 @@
+import Highcharts from 'highcharts';
+import { ReactNode } from 'react';
+import { ProsperitySymbol } from '../../models.ts';
+import { useStore } from '../../store.ts';
+import { Chart } from './Chart.tsx';
+
+export interface PlainValueObservationChartProps {
+  symbol: ProsperitySymbol;
+}
+
+export function PlainValueObservationChart({ symbol }: PlainValueObservationChartProps): ReactNode {
+  const algorithm = useStore(state => state.algorithm)!;
+
+  const values = [];
+
+  for (const row of algorithm.data) {
+    const observation = row.state.observations.plainValueObservations[symbol];
+    if (observation === undefined) {
+      continue;
+    }
+
+    values.push([row.state.timestamp, observation]);
+  }
+
+  const options: Highcharts.Options = {
+    yAxis: {
+      allowDecimals: true,
+    },
+  };
+
+  const series: Highcharts.SeriesOptionsType[] = [{ type: 'line', name: 'Value', data: values }];
+
+  return <Chart title={`${symbol} - Plain value observation`} options={options} series={series} />;
+}

src/pages/visualizer/VisualizerPage.tsx

@@ -6,6 +6,7 @@ import { formatNumber } from '../../utils/format.ts';
 import { AlgorithmSummaryCard } from './AlgorithmSummaryCard.tsx';
 import { ConversionPriceChart } from './ConversionPriceChart.tsx';
 import { EnvironmentChart } from './EnvironmentChart.tsx';
+import { PlainValueObservationChart } from './PlainValueObservationChart.tsx';
 import { PositionChart } from './PositionChart.tsx';
 import { ProductPriceChart } from './ProductPriceChart.tsx';
 import { ProfitLossChart } from './ProfitLossChart.tsx';
@@ -77,6 +78,16 @@ export function VisualizerPage(): ReactNode {
       symbolColumns.push(<Grid.Col key={`${symbol} - environment`} span={{ xs: 12, sm: 6 }} />);
     });
 
+  Object.keys(algorithm.data[0].state.observations.plainValueObservations)
+    .sort((a, b) => a.localeCompare(b))
+    .forEach(symbol => {
+      symbolColumns.push(
+        <Grid.Col key={`${symbol} - plain value observation`} span={{ xs: 12, sm: 6 }}>
+          <PlainValueObservationChart symbol={symbol} />
+        </Grid.Col>,
+      );
+    });
+
   return (
     <Container fluid>
       <Grid>