Time Traveler: A Vue Component for Temporal Data Manipulation

This challenge asks you to build a Vue component that simulates time travel through a dataset. Imagine you're visualizing historical data (e.g., stock prices, website traffic, sensor readings) and need to allow users to jump to different points in time to analyze trends. The component should display data for a selected time and provide controls to navigate through the data.

Problem Description

You need to create a Vue component called TimeTravelView that displays a dataset of historical data and allows users to navigate through it using "previous" and "next" buttons. The component should:

1. Accept a Dataset: The component should receive a dataset as a prop. This dataset will be an array of objects, where each object represents a data point with a timestamp (a number representing the time) and a value (any data type).
2. Display Current Data: The component should display the value of the data point corresponding to the currently selected timestamp.
3. Time Navigation: The component should have "Previous" and "Next" buttons. Clicking "Previous" should move to the previous data point in the dataset (based on timestamp). Clicking "Next" should move to the next data point.
4. Boundary Handling: When the user reaches the first data point, clicking "Previous" should do nothing. When the user reaches the last data point, clicking "Next" should do nothing.
5. Initial Time: The component should start with the first data point in the dataset as the initial time.
6. Reactive Updates: The displayed value should update reactively whenever the selected timestamp changes.

Examples

Example 1:

Input: dataset = [{ timestamp: 1678886400, value: 10 }, { timestamp: 1678972800, value: 15 }, { timestamp: 1679059200, value: 20 }]
Output: Displays "10" initially.
Explanation: The component starts with the first data point (timestamp 1678886400, value 10).

Example 2:

Input: dataset = [{ timestamp: 1678886400, value: 10 }, { timestamp: 1678972800, value: 15 }, { timestamp: 1679059200, value: 20 }]
User clicks "Next"
Output: Displays "15"
Explanation: The component moves to the second data point (timestamp 1678972800, value 15).

Example 3:

Input: dataset = [{ timestamp: 1678886400, value: 10 }, { timestamp: 1678972800, value: 15 }, { timestamp: 1679059200, value: 20 }]
User clicks "Previous" after clicking "Next" once.
Output: Displays "10"
Explanation: The component moves back to the first data point (timestamp 1678886400, value 10).

Example 4: (Edge Case)

Input: dataset = [{ timestamp: 1678886400, value: 10 }]
User clicks "Previous"
Output: Displays "10" (no change)
Explanation: The component is already at the first data point, so clicking "Previous" has no effect.

Constraints

• The dataset will always be an array of at least one object.
• Each object in the dataset will have a timestamp (number) and a value (any data type).
• Timestamps will be unique and in ascending order.
• The component should be implemented using Vue 3 and TypeScript.
• The component should be reasonably performant; avoid unnecessary re-renders.

Notes

• Consider using Vue's reactivity system (ref or reactive) to manage the selected timestamp and trigger updates when it changes.
• Think about how to efficiently find the data point corresponding to the selected timestamp. A simple linear search is acceptable for smaller datasets, but consider more efficient approaches if performance becomes a concern.
• Focus on creating a clean and well-structured component. Error handling (e.g., what to do if the dataset is invalid) is not required for this challenge.
• You can use any CSS styling you prefer. The visual appearance of the component is not the primary focus. The core functionality of time travel is.