Merge pull request #2035 from zeitgeistpm/staging

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 = ({
     </div>
   );
 };
-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<TimeFilter>(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 (
+    <div className="-ml-ztg-25 flex flex-col">
+      <div className="ml-auto">
+        <TimeFilters onClick={handleFilterChange} value={chartFilter} />
+      </div>
+      {chartData && (
+        <TimeSeriesChart
+          data={chartData}
+          series={[series]}
+          yUnits={"Prediction"}
+          yDomain={[lowerBound, upperBound]}
+          isLoading={isLoading}
+        />
+      )}
+    </div>
+  );
+};

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<MarketPageProps> = ({
       poolIdLoading === false) ||
     (market?.scoringRule === ScoringRule.Lmsr && market.neoPool != null);
 
+  const poolCreationDate = new Date(
+    indexedMarket.pool?.createdAt ?? indexedMarket.neoPool?.createdAt ?? "",
+  );
   return (
     <div className="mt-6">
       <div className="relative flex flex-auto gap-12">
@@ -286,23 +292,26 @@ const Market: NextPage<MarketPageProps> = ({
 
           {chartSeries && (indexedMarket?.pool || indexedMarket.neoPool) ? (
             <div className="mt-4">
-              <MarketChart
-                marketId={indexedMarket.marketId}
-                chartSeries={chartSeries}
-                baseAsset={
-                  indexedMarket.pool?.baseAsset ??
-                  indexedMarket.neoPool?.collateral
-                }
-                poolCreationDate={
-                  new Date(
-                    indexedMarket.pool?.createdAt ??
-                      indexedMarket.neoPool?.createdAt ??
-                      "",
-                  )
-                }
-                marketStatus={indexedMarket.status}
-                resolutionDate={new Date(resolutionTimestamp)}
-              />
+              {indexedMarket.scalarType === "number" ? (
+                <ScalarMarketChart
+                  marketId={indexedMarket.marketId}
+                  poolCreationDate={poolCreationDate}
+                  marketStatus={indexedMarket.status}
+                  resolutionDate={new Date(resolutionTimestamp)}
+                />
+              ) : (
+                <CategoricalMarketChart
+                  marketId={indexedMarket.marketId}
+                  chartSeries={chartSeries}
+                  baseAsset={
+                    indexedMarket.pool?.baseAsset ??
+                    indexedMarket.neoPool?.collateral
+                  }
+                  poolCreationDate={poolCreationDate}
+                  marketStatus={indexedMarket.status}
+                  resolutionDate={new Date(resolutionTimestamp)}
+                />
+              )}
             </div>
           ) : (
             <></>