Interactive Line Chart (Form-Driven)
Updates in real-time based on user input from a form with a select box to choose a stock.
Fill Data To Show Results
Fill Data To Show Results
To do:
- Implement a new line chart with a form on the left containing:
- Include two select boxes for choosing the funds to compare. The second select box can be left empty if the user only wants to display a single fund without comparison.
- One input with a date interval filter that should support:
- Custom Date Range (Start Date & End Date) – if this option is selected we need to show two additional inputs to specify a Start and End date.
- Predefined Time Intervals: All Data, This Year, Last 5 Years, Last 3 Years, Last 2 Years, Last 1 Year, Last 6 Months, Last 3 Months, Last Month, Last 5 Days. If a predefined interval is selected, the system should call an API endpoint that returns the correct start and end dates automatically (Call example for “Last 6 Months” = /api/history/datarange?fund=PTOPZEHM0017&period_value=6&period=month)
- Submit button to update the chart based on the form inputs. When the button is clicked, only the chart section should refresh – the page itself must not reload. Display a loading icon over the chart while the data is being processed.
- The chart should be at the right of the form.
- Format the X-axis to display only the years if there are more than 3 years of data; otherwise, display the year and month (e.g., “2025/04”).
- Format the Y-Axis to:
- Start from a relevant close value (not zero)
- Keep the maximum value close to the highest point of the data.
- Display the currency unit (€)
- Add additional Metrics below the chart for one or two funds (if a second one is selected):
- The first value (with 4 decimal places) of the data set and the respective date (Fv);
- The last value (with 4 decimal places) of the data set and the respective date (Lv);
- Calculate and show the total variation with 2 decimal places (%): ((Lv-Fv)/Fv)*100
- Calculate and show the total variation anuallized with 2 decimal places (%): (Math.pow((Lv / Fv), (365 / (days_between(lastDate, firstDate)))) – 1) * 100;
- Example of metrics:
Valor a 2022-04-22: 10.6740 €
Valor a 2025-04-23: 13.8287 €
Variação:(3.1547 €) 29.55%
Performance anualizada: 9.00%
Static Line Chart (Shortcode-Driven)
Displays a predefined stock chart using a shortcode parameter. stock-chart type=”line” symbol=”LU2215411039″
[stock-chart type=”line” symbol=”LU2215411039″]
To do:
- Fetch all available data directly from the API instead of using a local file (as currently done). Use an API call structure like: /api/history/data/?fund_a=PTOPZEHM0017&fund_b&min_date=1970-01-01&max_date=YYYY-MM-DD, where max_date should always be today’s date dynamically.
- Format the X-axis to display all years individually (e.g., 2021, 2022, 2023, 2024).
- Format the Y-axis to:
- Start from a relevant close value (not zero).
- Keep the maximum value close to the highest point of the data.
- Display the currency unit (€) on the Y-axis.
- Ensure that on mobile devices:
- The chart occupies the full available width.
- The axes remain clearly readable and properly formatted.
Static Bar Chart (Shortcode-Driven)
Functions similarly to the static line chart but in a bar format. stock-chart type=”bar” symbol=”LU2215411039″
[stock-chart type=”bar” symbol=”LU2215411039″]
Note: This chart should continue to get data from a local file, not an API call.
To do:
- Disable the tooltip that appears on hover over each bar (don’t disable the tooltips on the other charts, just on this).
- Remove the vertical axis for a cleaner design.
- Adjust the scaling to make bars appear taller for better readability.
- Ensure bar labels are always outside the bars, never inside.
- Add an animation effect so that the bars grow progressively when drawn.
Additional To do’s and requirements:
- Rename all the plugin to “OIP Charts” inside all the code, files, folders and shortcodes;
- All API calls should be internal, on PHP and not on JS;
- Remove all zeros from the dataset if present;
- Fix the bug on this page with the duplicated charts.