Skip to content

refine chart plot instruction #1140

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Aug 28, 2025
Merged

refine chart plot instruction #1140

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 12 additions & 4 deletions .../agents/6745151e-6d46-4a02-8de4-1c4f21c7da95/templates/util-chart-plot_instruction.liquid
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,26 @@
Please take a look at "Plotting Requirement" and generate a javascript code that can be used to render the charts on an html element.


=== Plotting Requirement ===
{{ plotting_requirement }}


***** Important *****
***** Hard Requirements *****
** Your output must be a single <script>...</script> block with everything needed inside.
** You need to import Plotly.js to plot the charts. The script source should be "https://cdn.plot.ly/plotly-3.0.1.min.js".
** You need to add the MODE bar for each chart you plot.
** You must render the charts on the div html element with id {{ chart_element_id }}.
** Add a custom mode bar button named "Fullscreen" that toggles the chart container in and out of fullscreen using the Fullscreen API. Requirements for this button:
* Always call the Fullscreen API on the chart container div itself (document.getElementById("{{ chart_element_id }}")), not on the document or on Plotly’s SVG.
* Use el.requestFullscreen() with fallbacks to el.webkitRequestFullscreen || el.msRequestFullscreen.
* Exit fullscreen with document.exitFullscreen() and vendor fallbacks.
* Listen for fullscreenchange, webkitfullscreenchange, and msfullscreenchange to keep the button working across repeated clicks and ESC exits.
* Ensure the chart fully expands and scales to the entire screen when fullscreen is active.
* Provide a simple inline SVG path icon for the button (no external assets).
* Use Plotly.newPlot(container, data, layout, {displayModeBar:true, modeBarButtonsToAdd:[fullscreenBtn]});
* fullscreenBtn must be a fully-formed object {name, title, icon, click}.
** You must not create any new html element.
** You must not apply any styles on any html element.
** You must generate as less token as possible.
** Keep code compact (few tokens), but fix all errors before returning.
** Please fix any code errors before returning the final response.

*** Response Format ***
You must output the response in the following JSON format:
Expand Down
Loading