From e76265b21279afd4e1c4a862d752074a7d55d2df Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Mon, 27 Nov 2023 16:37:39 +0100
Subject: [PATCH 1/3] add scalar market chart

---
 components/markets/MarketChart.tsx | 85 +++++++++++++++++++++++++++++-
 pages/markets/[marketid].tsx       | 49 ++++++++++-------
 2 files changed, 112 insertions(+), 22 deletions(-)

diff --git a/components/markets/MarketChart.tsx b/components/markets/MarketChart.tsx
index e6da40349..42b77bab7 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 = ({
     </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 pos =
+        (Number(upperBound) - Number(lowerBound)) *
+          ((1 - shortPrice + longPrice) / 2) +
+        lowerBound;
+
+      return {
+        t: time,
+        prediction: pos,
+      };
+    });
+
+  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>
+  );
+};
diff --git a/pages/markets/[marketid].tsx b/pages/markets/[marketid].tsx
index abd879171..e4a0e613f 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<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,30 +292,33 @@ 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.marketType.scalar ? (
+                <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>
           ) : (
             <></>
           )}
           {marketHasPool === false && (
-            <div className="flex h-ztg-22 items-center bg-vermilion-light text-vermilion p-ztg-20 rounded-ztg-5">
-              <div className="w-ztg-20 h-ztg-20">
+            <div className="flex h-ztg-22 items-center rounded-ztg-5 bg-vermilion-light p-ztg-20 text-vermilion">
+              <div className="h-ztg-20 w-ztg-20">
                 <AlertTriangle size={20} />
               </div>
               <div

From 9b7e40d3dac3992af44dc201297575803c22bf83 Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Mon, 27 Nov 2023 16:38:58 +0100
Subject: [PATCH 2/3] name change

---
 components/markets/MarketChart.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/markets/MarketChart.tsx b/components/markets/MarketChart.tsx
index 42b77bab7..9f71adace 100644
--- a/components/markets/MarketChart.tsx
+++ b/components/markets/MarketChart.tsx
@@ -136,14 +136,14 @@ export const ScalarMarketChart = ({
       const time = new Date(price.timestamp).getTime();
       const shortPrice = price.prices[1].price;
       const longPrice = price.prices[0].price;
-      const pos =
+      const prediction =
         (Number(upperBound) - Number(lowerBound)) *
           ((1 - shortPrice + longPrice) / 2) +
         lowerBound;
 
       return {
         t: time,
-        prediction: pos,
+        prediction,
       };
     });
 

From b55e11ed932003803df0278ae0fa66fc95e5f417 Mon Sep 17 00:00:00 2001
From: Tom Robiquet <tom-robiquet@hotmail.co.uk>
Date: Tue, 28 Nov 2023 10:56:36 +0100
Subject: [PATCH 3/3] just display for number markets

---
 pages/markets/[marketid].tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/pages/markets/[marketid].tsx b/pages/markets/[marketid].tsx
index e4a0e613f..a14c27e15 100644
--- a/pages/markets/[marketid].tsx
+++ b/pages/markets/[marketid].tsx
@@ -292,7 +292,7 @@ const Market: NextPage<MarketPageProps> = ({
 
           {chartSeries && (indexedMarket?.pool || indexedMarket.neoPool) ? (
             <div className="mt-4">
-              {indexedMarket.marketType.scalar ? (
+              {indexedMarket.scalarType === "number" ? (
                 <ScalarMarketChart
                   marketId={indexedMarket.marketId}
                   poolCreationDate={poolCreationDate}