Scoller Infinite Wheel Implementation

Hey Elod,

I have some implementaion query for infinte wheel.

Below is my OLD implementaion which I have to convert NEW implementaion.
See below code, Created data from getAmountWheelData() method

How to handle below things in infinite ‘data’ in function.

  • START VALUE of WHEEL ?? - User Defined

  • STEP OF WHEEL ? - User Define

  • WHEEL VALUE SHOULD DESCENDING - [100-99-98-97…]

  • NEGATIVE VALUE NOT REQUIRED.

      wheels: [
      		[{
      			//OLD IMPLEMENTATION
      			data: this.getAmountWheelData(),
      			label: 'OLD Amount',
      		},{ 
      			// An infinite wheel
      			// How can I make my requirement here?
                  label: 'NEW Amount',
                  data: function (i) {
      				value: i,
                      display: i.toString(),
                  },
                  getIndex: function (value) {
      				return value;
                  }
      		}]
      	
      getAmountWheelData() {
      	// This is currunt implementation which need to change.
      	let amountArray :Array<{display: string, value: any}>;
      	
      	let amountMinimum = 0; // Will get from API response
      	let amountMaximum = 1000000; // This is not needed, Since have to implement infinite wheel
      	let step = 100; // Will get from API reponse
      
      	amountArray = [];
      	for (let i =  amountMinimum; i <= amountMaximum; i+= step) {
      	  amountArray.push({display:i.toString(), value:i});
      	}
      	
      	return amountArray.reverse();
    }
    

// Might be my question is not clear to you… Can we discuss over chat/call if not understood.

Hi @CNB_Procurement :wave:

I have some questions to better understand this use-case:

  1. What exactly should be the functionality of this wheel?
  2. What type of values ​​does the wheel contain and which values ​​do you want to disable?
  3. What exactly do you want to validate?
  4. Do you want to use an infinite wheel or a circular wheel? For the infinite wheel, the values ​​go to infinity - / +. In the case of a circular wheel, the values ​​are repeated circularly: when the wheel reaches the last value, it continues with the first.

Hello @Elod_Mihaly,

Please see my #Answer below according to my project requirement.

1. What exactly should be the functionality of this wheel?

#Answer :
So there will be 2 wheel
Wheel A - Labelled as ‘TotalAmount’
Wheel B - Labelled as ‘MinimumAmount’

Both Wheel display Amount value on wheel
.

2a.What type of values ​​does the wheel contain?

#Answer :
So both wheel value start from ‘startValue’ [API driven : Integer] to infinite, Interval of ‘step’ [API driven : Integer]

Eg.
startValue = 100 //Received some value from API
step = 10 //Received some value from API
So wheel value should be => 100 110 120 130 … up to infinite

Eg 2.
startValue = 500
step = 1
So wheel value should be => 500 501 502 503 … up to infinite
.

2b. Which values ​​do you want to disable?
3. What exactly do you want to validate?

#Answer :
$Validation
Validation only on Wheel B (MinimumAmount)

Wheel B (MinimumAmount) should not be greater than Wheel A (TotalAmount)

All greater values of Wheel B (MinimumAmount) should be disabled - User can’t select those value - If user try to select disabled value it should bounce back to last valid value.

//Lets understand the validation Use case

pre-requisite: Assume Both the Wheel has Values => 100 200 300 400 500 … up to infinite

case :
You open the page and see Wheel A (TotalAmount) is selected to 700 & Wheel B (MinimumAmount) is selected 500.

Now user scrolled Wheel A (TotalAmount) to 300

Then Because of $Validation - Wheel B (MinimumAmount) automatically gets selected to 300
.
4. Do you want to use an infinite wheel or a circular wheel? For the infinite wheel, the values ​​go to infinity - / +. In the case of a circular wheel, the values ​​are repeated circularly: when the wheel reaches the last value, it continues with the first.

#Answer :
Wheel should be infinite, as I said above its depend on start value (startValue) up to infinite (Positive numbers only). So this will never be circular.

##I hope it’s clear to you, If you still have doubt please let me know.