Improve Orchids support

src/pages/visualizer/Chart.tsx

@@ -41,15 +41,16 @@ function getThemeOptions(theme: (highcharts: typeof Highcharts) => void): Highch
 
 interface ChartProps {
   title: string;
+  options?: Highcharts.Options;
   series: Highcharts.SeriesOptionsType[];
   min?: number;
   max?: number;
 }
 
-export function Chart({ title, series, min, max }: ChartProps): ReactNode {
+export function Chart({ title, options, series, min, max }: ChartProps): ReactNode {
   const colorScheme = useActualColorScheme();
 
-  const options = useMemo((): Highcharts.Options => {
+  const fullOptions = useMemo((): Highcharts.Options => {
     const themeOptions = colorScheme === 'light' ? {} : getThemeOptions(HighchartsHighContrastDarkTheme);
 
     const chartOptions: Highcharts.Options = {
@@ -148,14 +149,15 @@ export function Chart({ title, series, min, max }: ChartProps): ReactNode {
         enabled: false,
       },
       series,
+      ...options,
     };
 
     return merge(themeOptions, chartOptions);
-  }, [colorScheme, title, series, min, max]);
+  }, [colorScheme, title, options, series, min, max]);
 
   return (
     <VisualizerCard p={0}>
-      <HighchartsReact highcharts={Highcharts} constructorType={'stockChart'} options={options} immutable />
+      <HighchartsReact highcharts={Highcharts} constructorType={'stockChart'} options={fullOptions} immutable />
     </VisualizerCard>
   );
 }

src/pages/visualizer/ConversionObservationsTable.tsx

@@ -14,13 +14,13 @@ export function ConversionObservationsTable({ conversionObservations }: Conversi
     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.Td>{formatNumber(observation.bidPrice, 2)}</Table.Td>
+        <Table.Td>{formatNumber(observation.askPrice, 2)}</Table.Td>
+        <Table.Td>{formatNumber(observation.transportFees, 2)}</Table.Td>
+        <Table.Td>{formatNumber(observation.exportTariff, 2)}</Table.Td>
+        <Table.Td>{formatNumber(observation.importTariff, 2)}</Table.Td>
+        <Table.Td>{formatNumber(observation.sunlight, 2)}</Table.Td>
+        <Table.Td>{formatNumber(observation.humidity, 2)}</Table.Td>
       </Table.Tr>,
     );
   }

src/pages/visualizer/ConversionPriceChart.tsx

@@ -0,0 +1,41 @@
+import Highcharts from 'highcharts';
+import { ReactNode } from 'react';
+import { ProsperitySymbol } from '../../models.ts';
+import { useStore } from '../../store.ts';
+import { getAskColor, getBidColor } from '../../utils/colors.ts';
+import { Chart } from './Chart.tsx';
+
+export interface ConversionPriceChartProps {
+  symbol: ProsperitySymbol;
+}
+
+export function ConversionPriceChart({ symbol }: ConversionPriceChartProps): ReactNode {
+  const algorithm = useStore(state => state.algorithm)!;
+
+  const bidPriceData = [];
+  const askPriceData = [];
+
+  for (const row of algorithm.data) {
+    const observation = row.state.observations.conversionObservations[symbol];
+    if (observation === undefined) {
+      continue;
+    }
+
+    bidPriceData.push([row.state.timestamp, observation.bidPrice]);
+    askPriceData.push([row.state.timestamp, observation.askPrice]);
+  }
+
+  const options: Highcharts.Options = {
+    yAxis: {
+      opposite: true,
+      allowDecimals: true,
+    },
+  };
+
+  const series: Highcharts.SeriesOptionsType[] = [
+    { type: 'line', name: 'Bid', color: getBidColor(1.0), marker: { symbol: 'triangle' }, data: bidPriceData },
+    { type: 'line', name: 'Ask', color: getAskColor(1.0), marker: { symbol: 'triangle-down' }, data: askPriceData },
+  ];
+
+  return <Chart title={`${symbol} - Conversion price`} options={options} series={series} />;
+}

src/pages/visualizer/EnvironmentChart.tsx

@@ -0,0 +1,37 @@
+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 EnvironmentChartProps {
+  symbol: ProsperitySymbol;
+}
+
+export function EnvironmentChart({ symbol }: EnvironmentChartProps): ReactNode {
+  const algorithm = useStore(state => state.algorithm)!;
+
+  const sunlightData = [];
+  const humidityData = [];
+
+  for (const row of algorithm.data) {
+    const observation = row.state.observations.conversionObservations[symbol];
+    if (observation === undefined) {
+      continue;
+    }
+
+    sunlightData.push([row.state.timestamp, observation.sunlight]);
+    humidityData.push([row.state.timestamp, observation.humidity]);
+  }
+
+  const series: Highcharts.SeriesOptionsType[] = [
+    { type: 'line', name: 'Sunlight', marker: { symbol: 'square' }, yAxis: 0, data: sunlightData },
+    { type: 'line', name: 'Humidity', marker: { symbol: 'circle' }, yAxis: 1, data: humidityData },
+  ];
+
+  const options: Highcharts.Options = {
+    yAxis: [{}, { opposite: true }],
+  };
+
+  return <Chart title={`${symbol} - Environment`} options={options} series={series} />;
+}

src/pages/visualizer/PositionChart.tsx

@@ -8,6 +8,7 @@ function getLimit(algorithm: Algorithm, symbol: ProsperitySymbol): number {
   const knownLimits: Record<string, number> = {
     AMETHYSTS: 20,
     STARFRUIT: 20,
+    ORCHIDS: 100,
   };
 
   if (knownLimits[symbol] !== undefined) {

src/pages/visualizer/PriceChart.tsx → src/pages/visualizer/ProductPriceChart.tsx

@@ -5,11 +5,11 @@ import { useStore } from '../../store.ts';
 import { getAskColor, getBidColor } from '../../utils/colors.ts';
 import { Chart } from './Chart.tsx';
 
-export interface PriceChartProps {
+export interface ProductPriceChartProps {
   symbol: ProsperitySymbol;
 }
 
-export function PriceChart({ symbol }: PriceChartProps): ReactNode {
+export function ProductPriceChart({ symbol }: ProductPriceChartProps): ReactNode {
   const algorithm = useStore(state => state.algorithm)!;
 
   const series: Highcharts.SeriesOptionsType[] = [

src/pages/visualizer/TransportChart.tsx

@@ -0,0 +1,36 @@
+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 TransportChartProps {
+  symbol: ProsperitySymbol;
+}
+
+export function TransportChart({ symbol }: TransportChartProps): ReactNode {
+  const algorithm = useStore(state => state.algorithm)!;
+
+  const transportFeesData = [];
+  const importTariffData = [];
+  const exportTariffData = [];
+
+  for (const row of algorithm.data) {
+    const observation = row.state.observations.conversionObservations[symbol];
+    if (observation === undefined) {
+      continue;
+    }
+
+    transportFeesData.push([row.state.timestamp, observation.transportFees]);
+    importTariffData.push([row.state.timestamp, observation.importTariff]);
+    exportTariffData.push([row.state.timestamp, observation.exportTariff]);
+  }
+
+  const series: Highcharts.SeriesOptionsType[] = [
+    { type: 'line', name: 'Transport fees', data: transportFeesData },
+    { type: 'line', name: 'Import tariff', marker: { symbol: 'triangle' }, data: importTariffData },
+    { type: 'line', name: 'Export tariff', marker: { symbol: 'triangle-down' }, data: exportTariffData },
+  ];
+
+  return <Chart title={`${symbol} - Transport`} series={series} />;
+}

src/pages/visualizer/VisualizerPage.tsx

@@ -4,12 +4,15 @@ import { Navigate, useLocation } from 'react-router-dom';
 import { useStore } from '../../store.ts';
 import { formatNumber } from '../../utils/format.ts';
 import { AlgorithmSummaryCard } from './AlgorithmSummaryCard.tsx';
+import { EnvironmentChart } from './EnvironmentChart.tsx';
 import { PositionChart } from './PositionChart.tsx';
-import { PriceChart } from './PriceChart.tsx';
+import { ProductPriceChart } from './ProductPriceChart.tsx';
 import { ProfitLossChart } from './ProfitLossChart.tsx';
 import { TimestampsCard } from './TimestampsCard.tsx';
+import { TransportChart } from './TransportChart.tsx';
 import { VisualizerCard } from './VisualizerCard.tsx';
 import { VolumeChart } from './VolumeChart.tsx';
+import { ConversionPriceChart } from './ConversionPriceChart.tsx';
 
 export function VisualizerPage(): ReactNode {
   const algorithm = useStore(state => state.algorithm);
@@ -20,6 +23,13 @@ export function VisualizerPage(): ReactNode {
     return <Navigate to={`/${search}`} />;
   }
 
+  const conversionProducts = new Set();
+  for (const row of algorithm.data) {
+    for (const product of Object.keys(row.state.observations.conversionObservations)) {
+      conversionProducts.add(product);
+    }
+  }
+
   let profitLoss = 0;
   const lastTimestamp = algorithm.activityLogs[algorithm.activityLogs.length - 1].timestamp;
   for (let i = algorithm.activityLogs.length - 1; i >= 0 && algorithm.activityLogs[i].timestamp == lastTimestamp; i--) {
@@ -29,18 +39,42 @@ export function VisualizerPage(): ReactNode {
   const symbolColumns: ReactNode[] = [];
   Object.keys(algorithm.data[0].state.listings)
     .sort((a, b) => a.localeCompare(b))
-    .forEach((symbol, i) => {
+    .forEach(symbol => {
       symbolColumns.push(
-        <Grid.Col key={i * 2} span={{ xs: 12, sm: 6 }}>
-          <PriceChart symbol={symbol} />
+        <Grid.Col key={`${symbol} - product price`} span={{ xs: 12, sm: 6 }}>
+          <ProductPriceChart symbol={symbol} />
         </Grid.Col>,
       );
 
       symbolColumns.push(
-        <Grid.Col key={i * 2 + 1} span={{ xs: 12, sm: 6 }}>
+        <Grid.Col key={`${symbol} - symbol`} span={{ xs: 12, sm: 6 }}>
           <VolumeChart symbol={symbol} />
         </Grid.Col>,
       );
+
+      if (!conversionProducts.has(symbol)) {
+        return;
+      }
+
+      symbolColumns.push(
+        <Grid.Col key={`${symbol} - conversion price`} span={{ xs: 12, sm: 6 }}>
+          <ConversionPriceChart symbol={symbol} />
+        </Grid.Col>,
+      );
+
+      symbolColumns.push(
+        <Grid.Col key={`${symbol} - transport`} span={{ xs: 12, sm: 6 }}>
+          <TransportChart symbol={symbol} />
+        </Grid.Col>,
+      );
+
+      symbolColumns.push(
+        <Grid.Col key={`${symbol} - environment`} span={{ xs: 12, sm: 6 }}>
+          <EnvironmentChart symbol={symbol} />
+        </Grid.Col>,
+      );
+
+      symbolColumns.push(<Grid.Col key={`${symbol} - environment`} span={{ xs: 12, sm: 6 }} />);
     });
 
   return (