add cummulative size percent

components/trade/Orderbook.tsx

@@ -72,6 +72,7 @@ type cumOrderbookSide = {
   cumulativeSize: number
   sizePercent: number
   maxSizePercent: number
+  cumulativeSizePercent: number
 }
 
 const getCumulativeOrderbookSide = (
@@ -79,7 +80,7 @@ const getCumulativeOrderbookSide = (
   totalSize: number,
   maxSize: number,
   depth: number,
-  backwards = false
+  isBids = true
 ): cumOrderbookSide[] => {
   let cumulative = orders
     .slice(0, depth)
@@ -90,13 +91,15 @@ const getCumulativeOrderbookSide = (
         size,
         cumulativeSize,
         sizePercent: Math.round((cumulativeSize / (totalSize || 1)) * 100),
+        cumulativeSizePercent: Math.round((size / (cumulativeSize || 1)) * 100),
         maxSizePercent: Math.round((size / (maxSize || 1)) * 100),
       })
       return cumulative
     }, [])
-  if (backwards) {
-    cumulative = cumulative.reverse()
+  if (!isBids) {
+    console.log('cumulative', cumulative)
   }
+
   return cumulative
 }
 
@@ -245,14 +248,15 @@ const Orderbook = () => {
 
       const sum = (total: number, [, size]: number[], index: number) =>
         index < depth ? total + size : total
-      const totalBidSize = bids.reduce(sum, 0)
-      const totalAskSize = asks.reduce(sum, 0)
-      const maxBidSize = Math.max(
+      const totalSize = bids.reduce(sum, 0) + asks.reduce(sum, 0)
+
+      const maxSize =
+        Math.max(
           ...bids.map((b: number[]) => {
             return b[1]
           })
-      )
-      const maxAskSize = Math.max(
+        ) +
+        Math.max(
           ...asks.map((a: number[]) => {
             return a[1]
           })
@@ -260,15 +264,14 @@ const Orderbook = () => {
 
       const bidsToDisplay = getCumulativeOrderbookSide(
         bids,
-        totalBidSize,
-        maxBidSize,
-        depth,
-        false
+        totalSize,
+        maxSize,
+        depth
       )
       const asksToDisplay = getCumulativeOrderbookSide(
         asks,
-        totalAskSize,
-        maxAskSize,
+        totalSize,
+        maxSize,
         depth,
         false
       )
@@ -444,6 +447,9 @@ const Orderbook = () => {
                       size={orderbookData?.asks[index].size}
                       side="sell"
                       sizePercent={orderbookData?.asks[index].sizePercent}
+                      cumulativeSizePercent={
+                        orderbookData?.asks[index].cumulativeSizePercent
+                      }
                       grouping={grouping}
                     />
                   ) : null}
@@ -480,6 +486,9 @@ const Orderbook = () => {
                     size={orderbookData?.bids[index].size}
                     side="buy"
                     sizePercent={orderbookData?.bids[index].sizePercent}
+                    cumulativeSizePercent={
+                      orderbookData?.bids[index].cumulativeSizePercent
+                    }
                     grouping={grouping}
                   />
                 ) : null}
@@ -499,6 +508,7 @@ const OrderbookRow = ({
   // invert,
   // hasOpenOrder,
   minOrderSize,
+  cumulativeSizePercent,
   tickSize,
   grouping,
 }: {
@@ -506,6 +516,7 @@ const OrderbookRow = ({
   price: number
   size: number
   sizePercent: number
+  cumulativeSizePercent: number
   // hasOpenOrder: boolean
   // invert: boolean
   grouping: number
@@ -573,11 +584,11 @@ const OrderbookRow = ({
       onClick={handlePriceClick}
     >
       <>
-        <div className="flex w-full items-center justify-between hover:bg-th-bkg-2">
+        <div className="flex w-full items-center justify-between text-th-fgd-3 hover:bg-th-bkg-2">
           <div className="flex w-full justify-start pl-2">
             <div
               style={{ fontFeatureSettings: 'zero 1' }}
-              className={`z-10 w-full text-right font-mono text-xs leading-5 md:leading-6 ${
+              className={`z-10 w-full text-right font-mono text-xs ${
                 /*hasOpenOrder*/ false ? 'text-th-primary' : ''
               }`}
               // onClick={handleSizeClick}
@@ -585,18 +596,22 @@ const OrderbookRow = ({
               {formattedSize.toFixed(minOrderSizeDecimals)}
             </div>
           </div>
-          <div
-            className={`z-10 w-full pr-4 text-right font-mono text-xs leading-5 md:leading-6`}
-          >
+          <div className={`z-10 w-full pr-4 text-right font-mono text-xs`}>
             {formattedPrice.toFixed(groupingDecimalCount)}
           </div>
         </div>
 
         <Line
-          className={`absolute left-0 opacity-90 ${
+          className={`absolute left-0 opacity-40 brightness-125 ${
             side === 'buy' ? `bg-th-green-muted` : `bg-th-red-muted`
           }`}
-          data-width={sizePercent + '%'}
+          data-width={Math.max(sizePercent, 0.5) + '%'}
+        />
+        <Line
+          className={`absolute left-0 opacity-70 ${
+            side === 'buy' ? `bg-th-green` : `bg-th-red`
+          }`}
+          data-width={(cumulativeSizePercent / 100) * sizePercent + '%'}
         />
       </>
     </div>