adding market depth chart to limit orders popup (#1565)

* adding market depth chart to limit orders popup

* removing unused code

* unpacking props at beginning of component

---------

Co-authored-by: James Grugett <jahooma@gmail.com>

Author: RomanHauksson

web/components/bet/depth-chart.tsx

@@ -0,0 +1,145 @@
+import {
+  VictoryChart,
+  VictoryGroup,
+  VictoryArea,
+  VictoryLine,
+  VictoryAxis,
+  VictoryLabel,
+} from 'victory'
+import { LimitBet } from 'common/bet'
+import { CPMMBinaryContract, PseudoNumericContract } from 'common/contract'
+import { getDisplayProbability } from 'common/calculate'
+
+interface DepthChartProps {
+  contract: CPMMBinaryContract | PseudoNumericContract
+  yesBets: LimitBet[]
+  noBets: LimitBet[]
+}
+
+export function DepthChart(props: DepthChartProps) {
+  const { contract, yesBets, noBets } = props
+
+  // Won't display a depth chart for numeric contracts, only binary contracts right now
+  if (contract.outcomeType === 'PSEUDO_NUMERIC') {
+    return <div className="depth-chart" />
+  }
+
+  const yesData = cumulative(yesBets)
+  const noData = cumulative(noBets)
+  const maxAmount = Math.max(
+    yesData[yesData.length - 1].y,
+    noData[noData.length - 1].y
+  )
+  let minX = yesData[yesData.length - 1].x
+  let maxX = noData[noData.length - 1].x
+  const xRange = maxX - minX
+  minX -= xRange * 0.1
+  if (minX < 0) {
+    minX = 0
+  }
+  maxX += xRange * 0.1
+  if (maxX > 1) {
+    maxX = 1
+  }
+  yesData.unshift({ x: minX, y: yesData[0].y })
+  noData.push({ x: maxX, y: noData[noData.length - 1].y })
+
+  const currentValue = getDisplayProbability(contract)
+
+  return (
+    <div className="depth-chart">
+      <h2>Market depth chart</h2>
+      <VictoryChart
+        minDomain={{ x: minX, y: 0 }}
+        maxDomain={{ x: maxX, y: maxAmount }}
+        padding={{ top: 50, bottom: 50, left: 100, right: 50 }}
+        domainPadding={30}
+      >
+        <VictoryAxis
+          tickFormat={(t) => `${Math.round(t * 100)}%`}
+          tickCount={10}
+          label="Chance"
+          axisLabelComponent={<VictoryLabel dy={10} />}
+        />
+        <VictoryAxis
+          tickFormat={(t) => `${Math.round(t)}` + 'M'}
+          tickCount={6}
+          dependentAxis={true}
+          axisLabelComponent={<VictoryLabel dy={-30} />}
+          label={'Amount'}
+        />
+        <VictoryGroup
+          style={{
+            data: { strokeWidth: 1, fillOpacity: 0.4 },
+          }}
+        >
+          {/* // Line that shows the current value */}
+          <VictoryLine
+            style={{
+              data: { stroke: 'gray' },
+            }}
+            data={[
+              { x: currentValue, y: 0 },
+              { x: currentValue, y: maxAmount },
+            ]}
+          />
+          {/* First vertical line of the "yes" bets */}
+          <VictoryLine
+            style={{
+              data: { stroke: '#059669' },
+            }}
+            data={[
+              { x: yesData[yesData.length - 1].x, y: 0 },
+              {
+                x: yesData[yesData.length - 1].x,
+                y: yesData[yesData.length - 1].y,
+              },
+            ]}
+          />
+          {/* First vertical line of the "no" bets */}
+          <VictoryLine
+            style={{
+              data: { stroke: 'red' },
+            }}
+            data={[
+              { x: noData[0].x, y: 0 },
+              { x: noData[0].x, y: noData[0].y },
+            ]}
+          />
+          {/* // Area that shows the yes bets */}
+          <VictoryArea
+            style={{
+              data: { fill: '#6EE7B7', stroke: '#059669' },
+            }}
+            data={yesData}
+            interpolation="stepBefore"
+          />
+          {/* // Area that shows the no bets */}
+          <VictoryArea
+            style={{
+              data: { fill: 'red', stroke: 'red' },
+            }}
+            data={noData}
+            interpolation="stepAfter"
+          />
+        </VictoryGroup>
+      </VictoryChart>
+    </div>
+  )
+}
+
+type Coordinate = { x: number; y: number }
+
+// Converts a list of LimitBets into a list of coordinates to render into a depth chart.
+// Going in order of probability, the y value accumulates each order's amount.
+function cumulative(bets: LimitBet[]): Coordinate[] {
+  const result: Coordinate[] = []
+  let totalAmount = 0
+
+  for (let i = 0; i < bets.length; i++) {
+    totalAmount += bets[i].orderAmount
+    result.push({ x: bets[i].limitProb, y: totalAmount })
+  }
+
+  return result
+}

web/components/bet/limit-bets.tsx

@@ -23,6 +23,7 @@ import { Table } from '../widgets/table'
 import { Title } from '../widgets/title'
 import { Tooltip } from '../widgets/tooltip'
 import { InfoTooltip } from '../widgets/info-tooltip'
+import { DepthChart } from './depth-chart'
 
 export function YourOrders(props: {
   contract: CPMMBinaryContract | PseudoNumericContract
@@ -206,6 +207,7 @@ export function OrderBookButton(props: {
       <Button
         className={className}
         onClick={() => setOpen(true)}
+        disabled={limitBets.length === 0}
         size="xs"
         color="indigo"
       >
@@ -221,7 +223,8 @@ export function OrderBookButton(props: {
               className="ml-1 self-center"
             />
           </Title>
-          <Row className="items-start justify-around gap-2">
+          <DepthChart contract={contract} yesBets={yesBets} noBets={noBets} />
+          <Row className="mt-2 items-start justify-around gap-2">
             <OrderTable
               limitBets={yesBets}
               contract={contract}

web/package.json

@@ -53,6 +53,8 @@
     "d3-scale": "4.0.2",
     "d3-selection": "3.0.0",
     "d3-shape": "3.1.0",
+    "d3-timer": "3.0.1",
+    "d3-transition": "3.0.1",
     "dayjs": "1.10.7",
     "firebase": "9.13.0",
     "gridjs": "5.1.0",
@@ -77,7 +79,8 @@
     "stability-client": "1.6.1",
     "string-similarity": "^4.0.4",
     "tippy.js": "6.3.7",
-    "typewriter-effect": "2.19.0"
+    "typewriter-effect": "2.19.0",
+    "victory": "36.6.8"
   },
   "devDependencies": {
     "@tailwindcss/forms": "0.4.0",