Streamlined [JavaScript?] solution for displaying and modifying several location-specific purchasing and selling rates

Question

Streamlined [JavaScript?] solution for displaying and modifying several location-specific purchasing and selling rates

No, this is not related to interviews or cryptocurrencies! :)
It is for a non-profit personal web application designed to enhance a game.

This question involves both finance and coding.
I am developing this web app using Vue.js, so I prefer a JavaScript solution. However, an abstract approach or pseudo-code would also be helpful as I can translate it into JavaScript.

Here is the scenario:
Multiple locations (referred to as "stores") buy and sell various items at different prices.
Prices fluctuate randomly, possibly due to supply and demand, but that is not crucial to the problem.
There will be around 100-1000 locations and 10-100 different items.
The majority of locations (estimated 80-90%) will only deal with a few items.
Some locations (about 1-10%) will handle many items, if not all.
Around 50% of locations may only buy or sell, not both.

The objective is to display an extensive list of all locations that have a buying price for an item compared to locations that have a selling price for that same item (similar to permutations/combinations, but with expected gaps).
The final output should be a simple list/array of objects (keyed/value pairs).

A worst-case scenario could involve a paginated list of 99 million objects (1000 stores * (1000 - 1) stores * 100 items); however, there are anticipated gaps in the data, so ideally there would be significantly fewer than 1 million objects (ideally under 100,000; they do not all need to be live in memory and could be loaded from storage).

For example (sorted by Item and Buy Location for clarity):


Item     Buy Location   Buy Price Ratio Sell Price   Sell Location
Item A   Location A     4         0.5   2            Location B
Item A   Location A     4         2.0   8            Location C
Item A   Location B     6         0.66  4            Location A
Item A   Location B     6         1.33  8            Location C
Item A   Location C     10        0.4   4            Location A
Item A   Location C     10        0.2   2            Location B
Item B   Location A     3         0.33  1            Location B
Item B   Location A     3         1.33  4            Location C
Item B   Location B     3         0.66  2            Location A
Item B   Location B     3         1.33  4            Location C
Item B   Location C     5         0.4   2            Location A
Item B   Location C     5         0.2   1            Location B

Each column in the list is sortable, with the default being "Ratio" to display the optimal combinations of buying and selling locations. When prices are updated, Vue.js automatically updates and resorts the list.

Currently, I have inefficient ideas on how to tackle this issue, which involve regenerating the entire list whenever a single price changes.
Since the final output must support arbitrary sorting, direct indexing or access to items is not plausible.
If the price for a specific location's item changes, there isn't a method to pinpoint and update that specific row or cell.

I suspect that my approach is lacking efficiency, and I believe this task has been addressed before in scalable ways.
For instance, creating a straightforward buy/sell price chart across multiple exchanges.
While considering exploring open-source cryptocurrency bot code, this seems more like a finance-related challenge that I wish to comprehend rather than a programming one that I intend to replicate.

How would you go about implementing this?
What kind of dataset(s) would you utilize?

Thank you!

javascript vue.js vuetify.js

Answer 1

Answer №1

In my perspective

The 1 million lines of data may overwhelm users if presented all at once.
While a 1 million array size may not be too large for Javascript (~10MB, as demonstrated in your application here), rendering it all to the DOM element could pose significant challenges.

How would you tackle this issue?

In such a scenario, I would opt for pagination or aggregation (e.g., displaying the first 10 highest ratios for each item).

For instance:

computed: {
  displayItems () {
    // This will get updated when rawItems, currentPage, or pageSize change
    return doFilterOrSort(rawItems).slice(currentPage * pageSize, pageSize)
  }
}

This approach addresses the problem of an excessive number of DOM elements (assuming that updating a 1 million array size is fast enough not to become a bottleneck).

If your data changes frequently, like 10 times in a second, consider throttling or debouncing to reduce rendering frequency.

Example of throttling:

watch: {
  rawItems () {
    if (!ticking) {
      requestAnimationFrame(() => {
        displayItems = doFilterOrSort(rawItems).slice(currentPage * pageSize, pageSize)
        ticking = false
      })
      ticking = true
    }
  }
}

If you wish to implement infinite scrolling, recycle out-of-screen DOM elements. Refer to examples in react-virtualized.

What type of dataset(s) should you use?

Without details on the data format retrieved (initially and with updates), it's challenging to provide a precise answer.

Assuming a fixed number of stores and items with updates per item, I suggest using three arrays:

1. The first array stores buy/sell values for each item in every store. Updates here are easily done in O(1) time complexity.

2. The second array holds ratio objects for combinations of store-item pairs. Updating this incurs O(n⋅n) operations, e.g., updating 'ab' and 'ba' for a set of 3 stores and 1 item.

3. The third array extends the previous one by incorporating sorting or grouping, costing O((n⋅n⋅m) log (n⋅n⋋m)) (a potential bottleneck requiring careful attention based on array structure).

In case these solutions are insufficient, consider aggregating data on the server before transmitting it via web sockets instead of sending everything to the client side.

Answer 2

In my perspective

The 1 million lines of data may overwhelm users if presented all at once.
While a 1 million array size may not be too large for Javascript (~10MB, as demonstrated in your application here), rendering it all to the DOM element could pose significant challenges.

How would you tackle this issue?

In such a scenario, I would opt for pagination or aggregation (e.g., displaying the first 10 highest ratios for each item).

For instance:

computed: {
  displayItems () {
    // This will get updated when rawItems, currentPage, or pageSize change
    return doFilterOrSort(rawItems).slice(currentPage * pageSize, pageSize)
  }
}

This approach addresses the problem of an excessive number of DOM elements (assuming that updating a 1 million array size is fast enough not to become a bottleneck).

If your data changes frequently, like 10 times in a second, consider throttling or debouncing to reduce rendering frequency.

Example of throttling:

watch: {
  rawItems () {
    if (!ticking) {
      requestAnimationFrame(() => {
        displayItems = doFilterOrSort(rawItems).slice(currentPage * pageSize, pageSize)
        ticking = false
      })
      ticking = true
    }
  }
}

If you wish to implement infinite scrolling, recycle out-of-screen DOM elements. Refer to examples in react-virtualized.

What type of dataset(s) should you use?

Without details on the data format retrieved (initially and with updates), it's challenging to provide a precise answer.

Assuming a fixed number of stores and items with updates per item, I suggest using three arrays:

1. The first array stores buy/sell values for each item in every store. Updates here are easily done in O(1) time complexity.

2. The second array holds ratio objects for combinations of store-item pairs. Updating this incurs O(n⋅n) operations, e.g., updating 'ab' and 'ba' for a set of 3 stores and 1 item.

3. The third array extends the previous one by incorporating sorting or grouping, costing O((n⋅n⋅m) log (n⋅n⋋m)) (a potential bottleneck requiring careful attention based on array structure).

In case these solutions are insufficient, consider aggregating data on the server before transmitting it via web sockets instead of sending everything to the client side.

Streamlined [JavaScript?] solution for displaying and modifying several location-specific purchasing and selling rates

Answer №1

Similar questions

Retrieving data in [slug].js using Reactjs

identifying which specific button was clicked using JavaScript/jQuery

Troubleshooting Problems with Deploying Next Js on Firebase

After manipulating the array, Vue fails to render the input fields generated by the v-for directive

The continuous firing of the postback event of the Asp.Net Button is

The Bootstrap modal stubbornly refuses to close even after resetting the HTML body

Understanding how to retrieve a particular list item in JQuery without having the index in advance

Javascript encountering issues with recognizing 'self.function' within an onclick event

Encountered difficulty accessing the controller ActionResult from JavaScript代码

Mobile-responsive iFrame content is designed to adjust and fit appropriately on

What is the best way to eliminate duplicate values from an Array in ReactJS?

Uploading directly to AWS S3: SignatureDoesNotMatch error specifically for Internet Explorer users

The controller in ng-controller returns an undefined error when loaded using RequireJs

Having difficulty with a script not functioning properly within an onclick button

What steps should I take to address the issue of fixing the classname rather than using the

Ensuring maximum length validation on input

How come my date computed property does not update reactively when changes occur?

Customizing the placeholder font size in Material UI Autocomplete using ReactJS

How to transfer data from an HTML form to PHP using AJAX

Converting JSON data into clickable URL links and retrieving information upon clicking