feat: show weighted average in trade feed #402

CHANGELOG.md

@@ -2,9 +2,14 @@
 
 All notable changes to this project will be documented here.
 
-## [3.6.1] - 2024-08-14
+## [3.6.2] - 2024-09-29
 
 - Fix Dockerfile and startup instructions
+- Show weighted average price in trade feed (instead of last price)
+
+## [3.6.1] - 2024-09-27
+
+- Fix Binance Futures wicks of death
 
 ## [3.6.0-hotfix.0] - 2024-08-22
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aggr",
-  "version": "3.6.1",
+  "version": "3.6.2",
   "private": true,
   "type": "module",
   "scripts": {

src/components/framework/editor/references/README.md

@@ -0,0 +1,29 @@
+```ts
+area(
+  value: number | { 
+    value: number, 
+    time: number 
+  },
+  [options]
+)
+```
+
+Renders an area series for the current bar using the specified value and optional styling parameters. This function adapts the `addAreaSeries` method from Lightweight Charts for individual bar rendering.
+
+## Parameters
+
+- `value`: The value for the current bar, either a number or an object with `value` and `time` properties.
+- `options` (optional): A set of styling options for the area series. Options include:
+  - `lineColor`: The color of the line in the area series (e.g., `lineColor=yellow`).
+  - `topColor`: The color at the top of the area series (e.g., `topColor='#2962FF'`).
+  - `bottomColor`: The color at the bottom of the area series (e.g., `bottomColor='rgba(41, 98, 255, 0.28)'`).
+
+## Returns
+
+- This function does not return a value. It renders the area series on the chart for the current bar.
+
+## Summary
+
+The `area` function is designed for real-time, bar-by-bar rendering of area series in charts. It accepts a value for the current bar and a series of optional styling parameters, allowing for customization of the series appearance. The parameters follow a key=value format, making it flexible and intuitive to specify various options. This function is ideal for applications requiring dynamic and visually distinct data visualization, particularly in financial or data-intensive contexts.
+
+*Note: All options are optional. The function can be used with just the `value` parameter (e.g., `area(1)`), in which case default styles will be applied. The styling parameters must be valid CSS color values for the function to render the series correctly.*

src/components/prices/Prices.vue

@@ -672,7 +672,7 @@ export default class Prices extends Mixins(PaneMixin) {
     &__exchange {
       padding: 0;
       background-repeat: no-repeat;
-      background-size: 1em;
+      background-size: 1em 1em;
       width: 1rem;
       align-self: stretch;
       flex-shrink: 0;

src/components/trades/Trades.vue

@@ -241,6 +241,7 @@ export default class Trades extends Mixins(PaneMixin) {
         exchange,
         pair,
         price,
+        avgPrice: price,
         amount,
         size,
         side

src/components/trades/TradesLite.vue

@@ -183,6 +183,7 @@ export default class TradesLite extends Mixins(PaneMixin) {
   private addedVolumeBySide: { buy: number; sell: number }
   private offset: number
   private maxCount: number
+  private showAvgPrice: boolean
   private limit: number
   private batchSize = 1
 
@@ -344,7 +345,7 @@ export default class TradesLite extends Mixins(PaneMixin) {
         pair: trades[i].pair,
         amount: trades[i].amount,
         count: trades[i].count,
-        price: trades[i].price,
+        price: this.showAvgPrice ? trades[i].avgPrice : trades[i].price,
         side: trades[i].side,
         time: null
       }
@@ -723,6 +724,7 @@ export default class TradesLite extends Mixins(PaneMixin) {
     this.maxHistory = pane.maxRows
     this.showHistograms = pane.showHistograms
     this.showPairs = pane.showPairs
+    this.showAvgPrice = pane.showAvgPrice
     this.renderTrades =
       !pane.showHistograms || this.height > window.innerHeight / 24
     this.showPrices = pane.showPrices

src/components/trades/TradesSettings.vue

@@ -222,7 +222,7 @@
       </button>
     </ToggableSection>
 
-    <ToggableSection title="Preferences" id="trades-display" inset>
+    <ToggableSection title="Preferences" id="trades-preferences" inset>
       <div
         class="form-group column mb8"
         title="Number of trades rendered"
@@ -241,86 +241,6 @@
         />
       </div>
 
-      <div
-        v-if="isLegacy"
-        class="form-group column mb8"
-        @click.stop="$store.commit(paneId + '/TOGGLE_PREFERENCE', 'showLogos')"
-      >
-        <label class="-fill -center -inline">Show logos</label>
-        <div
-          class="checkbox-control checkbox-control-input -unshrinkable"
-          title="Exchange's logos + style"
-          v-tippy
-          @click.stop
-        >
-          <input type="checkbox" class="form-control" :checked="showLogos" />
-          <div
-            @click="$store.commit(paneId + '/TOGGLE_PREFERENCE', 'showLogos')"
-          />
-        </div>
-      </div>
-
-      <div
-        v-if="showLogos && isLegacy"
-        class="form-group column mb8"
-        @click.stop="
-          $store.commit(paneId + '/TOGGLE_PREFERENCE', 'monochromeLogos')
-        "
-      >
-        <label class="-fill -center -inline">Monochrome logos</label>
-        <div
-          class="checkbox-control checkbox-control-input -unshrinkable"
-          title="Exchange's logos + style"
-          v-tippy
-          @click.stop
-        >
-          <input
-            type="checkbox"
-            class="form-control"
-            :checked="monochromeLogos"
-          />
-          <div
-            @click="
-              $store.commit(paneId + '/TOGGLE_PREFERENCE', 'monochromeLogos')
-            "
-          />
-        </div>
-      </div>
-
-      <div
-        class="form-group column mb8"
-        @click.stop="$store.commit(paneId + '/TOGGLE_PREFERENCE', 'showPairs')"
-      >
-        <label class="-fill -center -inline">Show pairs</label>
-        <div
-          class="checkbox-control checkbox-control-input -unshrinkable"
-          title="Show symbol's names<br>(ex: BTC-USD)"
-          v-tippy
-          @click.stop
-        >
-          <input type="checkbox" class="form-control" :checked="showPairs" />
-          <div
-            @click="$store.commit(paneId + '/TOGGLE_PREFERENCE', 'showPairs')"
-          ></div>
-        </div>
-      </div>
-
-      <div
-        class="form-group column mb8"
-        @click.stop="$store.commit(paneId + '/TOGGLE_PREFERENCE', 'showPrices')"
-      >
-        <label class="-fill -center -inline">Show prices</label>
-        <div
-          class="checkbox-control checkbox-control-input -unshrinkable"
-          @click.stop
-        >
-          <input type="checkbox" class="form-control" :checked="showPrices" />
-          <div
-            @click="$store.commit(paneId + '/TOGGLE_PREFERENCE', 'showPrices')"
-          />
-        </div>
-      </div>
-
       <div
         v-if="isLegacy"
         class="form-group column"
@@ -366,6 +286,81 @@
         </div>
       </div>
     </ToggableSection>
+
+    <ToggableSection title="Formats" id="trades-columns" inset>
+      <div class="form-group mb8">
+        <label class="checkbox-control -small">
+          <input
+            type="checkbox"
+            class="form-control"
+            :checked="showPairs"
+            @change="$store.commit(paneId + '/TOGGLE_PREFERENCE', 'showPairs')"
+          />
+          <div></div>
+          <span>
+            Show pairs
+            <i
+              class="icon-info"
+              v-tippy
+              title="Show symbol's names<br>(ex: BTC-USD)"
+            ></i>
+          </span>
+        </label>
+      </div>
+
+      <toggable-group
+        class="mb8 mt16"
+        :value="showPrices"
+        label="Show prices"
+        @change="$store.commit(paneId + '/TOGGLE_PREFERENCE', 'showPrices')"
+        small
+      >
+        <div class="form-group">
+          <label class="checkbox-control -small">
+            <input
+              type="checkbox"
+              class="form-control"
+              :checked="showAvgPrice"
+              @change="
+                $store.commit(paneId + '/TOGGLE_PREFERENCE', 'showAvgPrice')
+              "
+            />
+            <div></div>
+            <span>
+              Weighted average
+              <i
+                class="icon-info"
+                v-tippy
+                title="Show the weighted average price instead of the last price for aggregated trade results"
+              ></i>
+            </span>
+          </label>
+        </div>
+      </toggable-group>
+      <toggable-group
+        v-if="isLegacy"
+        class="mb8 mt16"
+        :value="showLogos"
+        label="Show logos"
+        @change="$store.commit(paneId + '/TOGGLE_PREFERENCE', 'showLogos')"
+        small
+      >
+        <div class="form-group">
+          <label class="checkbox-control -small">
+            <input
+              type="checkbox"
+              class="form-control"
+              :checked="monochromeLogos"
+              @change="
+                $store.commit(paneId + '/TOGGLE_PREFERENCE', 'monochromeLogos')
+              "
+            />
+            <div></div>
+            <span> Monochrome logos </span>
+          </label>
+        </div>
+      </toggable-group>
+    </ToggableSection>
     <ToggableSection
       v-if="isLegacy"
       :title="`THRESHOLD MULTIPLIER (${mutipliersCount})`"
@@ -411,6 +406,7 @@ import ToggableSection from '@/components/framework/ToggableSection.vue'
 import ColorPickerControl from '@/components/framework/picker/ColorPickerControl.vue'
 import ThresholdColor from '@/components/trades/ThresholdColor.vue'
 import MarketMultiplier from '@/components/trades/MarketMultiplier.vue'
+import ToggableGroup from '@/components/framework/ToggableGroup.vue'
 
 @Component({
   components: {
@@ -419,7 +415,8 @@ import MarketMultiplier from '@/components/trades/MarketMultiplier.vue'
     ThresholdColor,
     ToggableSection,
     MarketMultiplier,
-    ColorPickerControl
+    ColorPickerControl,
+    ToggableGroup
   },
   name: 'TradesSettings',
   props: {
@@ -476,6 +473,10 @@ export default class TradesSettings extends Vue {
     return (this.$store.state[this.paneId] as TradesPaneState).showTimeAgo
   }
 
+  get showAvgPrice() {
+    return (this.$store.state[this.paneId] as TradesPaneState).showAvgPrice
+  }
+
   get showPrices() {
     return (this.$store.state[this.paneId] as TradesPaneState).showPrices
   }

src/components/trades/tradesFeed.ts

@@ -49,6 +49,7 @@ export default class TradesFeed {
   private showLogos: boolean
   private showPairs: boolean
   private showPrices: boolean
+  private showAvgPrice: boolean
   private showTimeAgo: boolean
   private slippageMode: SlippageMode
   private paneMarkets: { [identifier: string]: boolean }
@@ -320,17 +321,17 @@ export default class TradesFeed {
     ${pairName}
     ${
       this.showPrices
-        ? `<div class="trade__price">${priceSlippage}${formatMarketPrice(
-            trade.price,
+        ? `<div class="trade__price">${priceSlippage}<span>${formatMarketPrice(
+            this.showAvgPrice ? trade.avgPrice : trade.price,
             marketKey
-          )}</div>`
+          )}</span></div>`
         : ''
     }
     <div class="trade__amount">
     <span class="trade__amount__quote">
         ${' '}
         <span class="icon-quote"></span>
-        <span>${formatAmount(trade.size * trade.price)}</span>
+        <span>${formatAmount(trade.size * trade.avgPrice)}</span>
         ${' '}
       </span>
       <span class="trade__amount__base">
@@ -522,6 +523,7 @@ export default class TradesFeed {
     this.showLogos = store.state[this.paneId].showLogos
     this.showPairs = store.state[this.paneId].showPairs
     this.showPrices = store.state[this.paneId].showPrices
+    this.showAvgPrice = store.state[this.paneId].showAvgPrice
     this.showTimeAgo = store.state[this.paneId].showTimeAgo
 
     if (this.showTimeAgo && !this.timeUpdateInterval) {

src/services/aggregatorService.ts

@@ -82,6 +82,7 @@ class AggregatorService extends EventEmitter {
       marketDecimals[market] = countDecimals(
         price < 0.000001 ? price + 1 : price
       )
+
       if (!this.normalizeDecimalsQueue) {
         this.normalizeDecimalsQueue = {
           markets: []
@@ -264,4 +265,4 @@ class AggregatorService extends EventEmitter {
   }
 }
 
-export default new AggregatorService()
+export default new AggregatorService()

src/store/panesSettings/trades.ts

@@ -40,6 +40,7 @@ export interface TradesPaneState {
   monochromeLogos: boolean
   multipliers: { [identifier: string]: number }
   thresholdsMultipler: number
+  showAvgPrice: boolean
 }
 
 const getters = {
@@ -75,7 +76,8 @@ const state = {
   showTimeAgo: true,
   showPrices: true,
   showHistograms: true,
-  thresholdsMultipler: 1
+  thresholdsMultipler: 1,
+  showAvgPrice: true
 } as TradesPaneState
 
 const actions = {