diff --git a/components/markets/MarketChart.tsx b/components/markets/MarketChart.tsx index e6da40349..9f71adace 100644 --- a/components/markets/MarketChart.tsx +++ b/components/markets/MarketChart.tsx @@ -1,7 +1,9 @@ import { MarketStatus, parseAssetId } from "@zeitgeistpm/sdk"; import TimeFilters, { filters, TimeFilter } from "components/ui/TimeFilters"; import TimeSeriesChart, { ChartSeries } from "components/ui/TimeSeriesChart"; +import { ZTG } from "lib/constants"; import { useAssetMetadata } from "lib/hooks/queries/useAssetMetadata"; +import { useMarket } from "lib/hooks/queries/useMarket"; import { useMarketPriceHistory } from "lib/hooks/queries/useMarketPriceHistory"; import { calcPriceHistoryStartDate } from "lib/util/calc-price-history-start"; import { calcMarketColors } from "lib/util/color-calc"; @@ -17,7 +19,7 @@ const setTimeToNow = (date: Date) => { return date; }; -const MarketChart = ({ +export const CategoricalMarketChart = ({ marketId, chartSeries, baseAsset, @@ -91,4 +93,83 @@ const MarketChart = ({ ); }; -export default MarketChart; + +export const ScalarMarketChart = ({ + marketId, + marketStatus, + resolutionDate, + poolCreationDate, +}: { + marketId: number; + poolCreationDate: Date; + marketStatus: MarketStatus; + resolutionDate: Date; +}) => { + const { data: market } = useMarket({ marketId }); + const [chartFilter, setChartFilter] = useState(filters[1]); + + const startDateISOString = useMemo(() => { + const startDate = calcPriceHistoryStartDate( + marketStatus, + chartFilter, + poolCreationDate, + resolutionDate, + ); + + return setTimeToNow(startDate).toISOString(); + }, [chartFilter.label]); + + const lowerBound = Number(market?.marketType.scalar?.[0]) / ZTG; + const upperBound = Number(market?.marketType.scalar?.[1]) / ZTG; + + const { data: prices, isLoading } = useMarketPriceHistory( + marketId, + chartFilter.intervalUnit, + chartFilter.intervalValue, + //hack to make data end on same time as now + startDateISOString, + ); + + const chartData = prices + ?.filter((data) => data.prices.every((p) => p.price != null)) + .map((price) => { + const time = new Date(price.timestamp).getTime(); + const shortPrice = price.prices[1].price; + const longPrice = price.prices[0].price; + const prediction = + (Number(upperBound) - Number(lowerBound)) * + ((1 - shortPrice + longPrice) / 2) + + lowerBound; + + return { + t: time, + prediction, + }; + }); + + const handleFilterChange = (filter: TimeFilter) => { + setChartFilter(filter); + }; + + const series: ChartSeries = { + accessor: "prediction", + label: "", + color: "#2468e2", + }; + return ( +
+
+ +
+ {chartData && ( + + )} +
+ ); +}; diff --git a/pages/markets/[marketid].tsx b/pages/markets/[marketid].tsx index d92b02a20..000f108ae 100644 --- a/pages/markets/[marketid].tsx +++ b/pages/markets/[marketid].tsx @@ -9,7 +9,10 @@ import { MarketLiquiditySection } from "components/liquidity/MarketLiquiditySect import DisputeResult from "components/markets/DisputeResult"; import { AddressDetails } from "components/markets/MarketAddresses"; import MarketAssetDetails from "components/markets/MarketAssetDetails"; -import MarketChart from "components/markets/MarketChart"; +import { + CategoricalMarketChart, + ScalarMarketChart, +} from "components/markets/MarketChart"; import MarketHeader from "components/markets/MarketHeader"; import PoolDeployer from "components/markets/PoolDeployer"; import ReportResult from "components/markets/ReportResult"; @@ -262,6 +265,9 @@ const Market: NextPage = ({ poolIdLoading === false) || (market?.scoringRule === ScoringRule.Lmsr && market.neoPool != null); + const poolCreationDate = new Date( + indexedMarket.pool?.createdAt ?? indexedMarket.neoPool?.createdAt ?? "", + ); return (
@@ -286,23 +292,26 @@ const Market: NextPage = ({ {chartSeries && (indexedMarket?.pool || indexedMarket.neoPool) ? (
- + {indexedMarket.scalarType === "number" ? ( + + ) : ( + + )}
) : ( <>