Vertical Progress Bar for Revenue Metrics
Design a vertical progress bar with the following features and layout: Key Features: Visual Representation: The progress bar should represent three metrics: All Time High Revenue (ATH): Mark this with a distinct label and color (e.g., blue at the top of the bar). Last Month Revenue: Represent this as a segment in the bar (e.g., orange). Current Month Revenue: Represent this as another segment in the bar (e.g., green), growing dynamically to simulate live updates. Dynamic Behavior: On the first day of the month, when both Current Month Revenue and ATH are zero, display a placeholder or animation for the Current Month Revenue to simulate live data updates. Ensure the bar handles scenarios where the Current Month Revenue exceeds the All Time High Revenue, adjusting the visualization intuitively (e.g., expanding the bar beyond the ATH marker). Design Details: Use a fixed vertical height for the bar while keeping it responsive across devices. Add distinct labels or markers for clarity, such as "ATH" at the top and the actual value for Current Revenue below the bar. Include buttons or filters (e.g., daily, weekly, monthly, yearly) below the bar for switching between timeframes. Responsive and Aesthetic Design: Ensure the bar is fully responsive and adapts seamlessly to various screen sizes. Use clean, modern visuals with appropriate spacing, color contrast, and font styles to enhance readability. Interactivity and Animation: Animate the Current Revenue bar segment to simulate live data updates. Use tooltips or hover effects to display additional details about each metric if needed. Example Layout: Top Marker: "ATH" labeled with a blue dot. Vertical Bar: Divided into colored sections for metrics (e.g., orange for Last Month Revenue and green for Current Month Revenue). Bottom: Display the current revenue value (e.g., "₹1,700") with buttons for different timeframes (e.g., D/W/M/Y). Objective: Create a visually appealing, interactive, and fully responsive vertical progress bar that accurately represents the metrics while handling edge cases gracefully.
