Skip to content

Convert submission monitor chart to ECharts#3677

Merged
josephsnyder merged 2 commits into
Kitware:masterfrom
williamjallen:monitor-echarts
May 28, 2026
Merged

Convert submission monitor chart to ECharts#3677
josephsnyder merged 2 commits into
Kitware:masterfrom
williamjallen:monitor-echarts

Conversation

@williamjallen
Copy link
Copy Markdown
Collaborator

The TimelinePlot Vue component was originally designed to be the replacement for all other plots across the site, first introduced on the submission monitor page. Since then, we've decided to use Apache ECharts instead of this D3-based approach. This PR completely rewrites TimelinePlot.vue with ECharts. The new plot is functionality equivalent, with a handful of minor UI improvements.

@williamjallen williamjallen added this to the v5.0 milestone Apr 28, 2026
williamjallen added a commit to williamjallen/CDash that referenced this pull request Apr 29, 2026
Part of our ongoing effort to replace D3 with Apache ECharts throughout the site.  In combination with Kitware#3677, D3 is no longer a dependency of the Vue portion of the site.
Copy link
Copy Markdown
Member

@josephsnyder josephsnyder left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something isn't quite right but I'm not sure what is happening:
On page load, the Success/Fail legend seems to be the one receiving the zoom events as it has a scroll bar:

Image

Once the mouse wheel is used to zoom, the scroll bar goes away and background lines appear in the legend:

Image

All the other relevant data from the API call is properly presented on the screen, but there isn't any visible points despite

Image

@williamjallen williamjallen modified the milestones: v5.0, v5.1 May 14, 2026
The TimelinePlot Vue component was originally designed to be the replacement for all other plots across the site, first introduced on the submission monitor page.  Since then, we've decided to use Apache ECharts instead of this D3-based approach.  This PR completely rewrites TimelinePlot.vue with ECharts.  The new plot is functionality equivalent, with a handful of minor UI improvements.
@williamjallen
Copy link
Copy Markdown
Collaborator Author

@josephsnyder Fixed.

Copy link
Copy Markdown
Member

@josephsnyder josephsnyder left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Things look pretty good. I'm happy with the zoom and the legend which will makes hiding a line easy.
I'm a little confused on the click and dblclick, they don't seem to do anything currently.
Are they working as intended for you?

jjomier pushed a commit to jjomier/CDash that referenced this pull request May 26, 2026
Part of our ongoing effort to replace D3 with Apache ECharts throughout
the site. In combination with
Kitware#3677, D3 is no longer a dependency
of the Vue portion of the site.
@williamjallen
Copy link
Copy Markdown
Collaborator Author

@josephsnyder I removed the double click action because it's unnecessary. The click action isn't meant to be used for the monitor plot--there's nothing to link to, so it's an unused feature of the TimelinePlot.

Copy link
Copy Markdown
Member

@josephsnyder josephsnyder left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@josephsnyder josephsnyder added this pull request to the merge queue May 28, 2026
Merged via the queue into Kitware:master with commit 3bae0b3 May 28, 2026
7 checks passed
@williamjallen williamjallen deleted the monitor-echarts branch May 28, 2026 16:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants