As someone who is relatively new to Svelte and frontend development (with primary experience in Rust/C++/Python), I hope you can forgive me for asking what might seem like a basic question.
My goal is to showcase different kinds of time-indexed data, with a user-editable "timestamp" variable. I aim to exhibit the relevant item from each dataset based on the provided timestamp.
For instance, let's consider temperature and rainfall readings as my datasets:
interface Temperature {
temperature: number
}
interface Rainfall {
rainfall: number
}
A = [{"timestamp" : 0, "temperature": 20}, {"timestamp": 1, "temperature": 25}, {"timestamp" : 2, "temperature": 28}]
B = [{"timestamp" : 0, "rainfall": 200}, {"timestamp" :1, "rainfall": 210}, {"timestamp": 2, "rainfall": 220}]
I have created Svelte components for Temperature and Rainfall that align with the respective Typescript interfaces. However, I am unsure how to abstract the fact that each data type has a timestamp and a unique way of displaying itself as a Svelte component. In an object-oriented language, I would typically use an abstract class with a display() method to return the appropriate Svelte component.
Is there a method within Svelte or JavaScript to craft universal code that selects the relevant datum from a list based on the timestamp and then showcases it using the corresponding Svelte component?
Thank you for your assistance.