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

 

To do:

  1. Implement a new line chart with a form on the left containing:
    1. 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.
    2. One input with a date interval filter that should support:
      1. 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.
      2. 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)
      3. 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.
    3. The chart should be at the right of the form.
    4. 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”).
    5. Format the Y-Axis to:
      1. Start from a relevant close value (not zero)
      2. Keep the maximum value close to the highest point of the data.
      3. Display the currency unit (€)
    6. Add additional Metrics below the chart for one or two funds (if a second one is selected):
      1. The first value (with 4 decimal places) of the data set and the respective date (Fv);
      2. The last value (with 4 decimal places) of the data set and the respective date (Lv);
      3. Calculate and show the total variation with 2 decimal places (%): ((Lv-Fv)/Fv)*100
      4. Calculate and show the total variation anuallized with 2 decimal places (%): (Math.pow((Lv / Fv), (365 / (days_between(lastDate, firstDate)))) – 1) * 100;
      5. 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:

  1. 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.
  2. Format the X-axis to display all years individually (e.g., 2021, 2022, 2023, 2024).
  3. Format the Y-axis to:
    1. Start from a relevant close value (not zero).
    2. Keep the maximum value close to the highest point of the data.
    3. Display the currency unit (€) on the Y-axis.
  4. Ensure that on mobile devices:
    1. The chart occupies the full available width.
    2. 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:

  1. Disable the tooltip that appears on hover over each bar (don’t disable the tooltips on the other charts, just on this).
  2. Remove the vertical axis for a cleaner design.
  3. Adjust the scaling to make bars appear taller for better readability.
  4. Ensure bar labels are always outside the bars, never inside.
  5. Add an animation effect so that the bars grow progressively when drawn.

Additional To do’s and requirements:

  1. Rename all the plugin to “OIP Charts” inside all the code, files, folders and shortcodes;
  2. All API calls should be internal, on PHP and not on JS;
  3. Remove all zeros from the dataset if present;
  4. Fix the bug on this page with the duplicated charts.