31 lines
2.2 KiB
Plaintext
31 lines
2.2 KiB
Plaintext
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 }}
|
||
|
||
***** Hard Requirements *****
|
||
** Your output javascript code must be wrapped in one or multiple <script>...</script> blocks with everything needed inside.
|
||
** You need to import ECharts.js to plot the charts. The script source is "https://cdnjs.cloudflare.com/ajax/libs/echarts/6.0.0/echarts.min.js".
|
||
** You need to add the MODE bar for each chart you plot.
|
||
** You must render the charts under 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.
|
||
** Keep code compact (few tokens), but fix all errors before returning.
|
||
** Do not generate charts with zero height and zero width.
|
||
** Please ensure the code can be executed and the charts are rendered correctly.
|
||
|
||
*** Response Format ***
|
||
You must output the response in the following JSON format:
|
||
{
|
||
"greeting_message": "A short polite message that informs user that the charts have been generated.",
|
||
"js_code": "The javascript code that can generate the charts as requested."
|
||
} |