linkHow To: Time Progress and Goal Progress Bar
This documentation will guide you through the functionality, inputs, and behavior of the "Time Progress and Goals Progress Bar" system implemented in JavaScript and HTML.
linkOverview
The system allows tracking the progress of time for the current day and for multiple long-term goals (such as monthly, quarterly, or yearly). It dynamically updates the progress bars in real-time and displays the percentage completion for each.
linkComponents
Today's Time Progress: A progress bar that visually represents how much of the current day has passed, based on a custom start and end time.
Goal Progress Bars: Multiple progress bars track the completion of defined goals (like a month, quarter, or year) with their respective start and end dates.
linkCode Breakdown
link1. noteOption Function
This function creates or retrieves a specific note that shows the time and goals progress bar. It also handles the display settings like "Peek Viewer".
linkInputs:
app: The application instance, which provides the context for creating or retrieving notes and settings.
linkKey Actions:
New Note Creation: If a note with the UUID for the time/goal progress bar doesn't exist, it creates a new one.
Peek Viewer Handling: Based on the user’s settings, it decides whether to display the progress bar in the sidebar or as a standalone note.
link2. renderEmbed Function
This is the core function that generates the HTML, CSS, and JavaScript code for embedding the time and goal progress bars.
linkInputs:
app: The application instance, used for dynamic data fetching or interactions.
args: Additional parameters passed for custom configurations (optional).
linkHTML and CSS Structure
linkHTML Overview:
Container Elements: There are two main sections:
Today's Time Progress: Displays a progress bar representing the passage of time for the current day.
Goal Days Progress: Displays progress bars for the defined goals (monthly, quarterly, yearly).
linkCSS Styling:
The CSS uses a flexbox layout for alignment, making the content responsive and scrollable.
Progress bars are styled with rounded corners, gradients, and smooth animations for a modern look.
linkJavaScript Logic
link1. Time Progress (for Today)
The current day's progress is calculated based on custom start and end times.
linkInputs:
customDayTime.start: The time when the progress bar starts (e.g., "06:00" for 6 AM).
customDayTime.end: The time when the progress bar ends (e.g., "21:00" for 9 PM).
linkBehavior:
The function calculates the percentage of time that has passed between the start and end times and updates the progress bar accordingly.
The progress is updated every minute using setInterval.
link2. Goal Progress Bars
Multiple goals (e.g., for a month, quarter, or year) are defined with their respective start and end dates.
linkInputs:
goals[]: An array of goal objects, where each object contains:
name: The label for the goal (e.g., "September 2024").
startDate: The start date of the goal (e.g., "2024-09-01").
endDate: The end date of the goal (e.g., "2024-09-30").
linkBehavior:
For each goal, the progress percentage is calculated based on how much time has passed between the start and end dates.
Each progress bar is dynamically created and updated every minute to reflect real-time progress.
linkExample of Inputs and Outputs
link1. Custom Time Progress
Effect: The progress bar will show how much of the time between 6 AM and 9 PM has passed, updating every minute.
link2. Goal Definition
Effect: Three progress bars will be created, each representing the progress for the month of September, Q3 of 2024, and the entire year of 2024.
linkHow to Customize
link1. Change Time Settings
Modify customDayTime.start and customDayTime.end to change the time window for today's progress.
link2. Add New Goals
Add new objects to the goals[] array with custom startDate, endDate, and name properties to track additional goals.
link3. Style Adjustments
Customize the progress-container, progress-bar, and other CSS classes to change the appearance of the progress bars (e.g., colors, size, animations).
linkOutput
A responsive, dynamically updating webpage that displays the progress for today and multiple long-term goals. It’s designed for easy integration into Amplenote or other apps with similar APIs for note creation and embedding content.
linkExample Screenshot:
The output will be a webpage where:
Today's Time Progress: Shows "0%–100%" based on the time passed in the day.
Goal Days Progress: Shows multiple goals with real-time updates.
This guide should help you implement, customize, and extend the Time and Goal Progress bar functionality.