Feature 228 dashboard #244
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 8 commits
July 14, 2023 15:08
Is a widget that displays the ongoing rules (up to 20 of them) in a stacked bar chart. The input is an array of `Ongoingrule` objects, which contain the rulename as well as the number of locks in each state. Internal logic parses these numbers and returns a stacked bar chart using percentages. The colours correspond to those used in the light mode `LockStateTag`. Added `test/fixtures/widget-fixtures.ts`, since widget fixtures are distinct from tables. For the same reason, added `lib/infrastructure/data/view-model/widgets.d.ts` to take widget datatypes.
Will show 6 (3 on small viewports) panels for RSEs in a grid layout. The used and free space are shown in a pie chart. Also shows a table with relevant and formatted information about the quota. Information shown: * RSE Name * Space used * Quota -> this is not directly shown in the chart. The chart shows *free* space, which is `quota - space used` * Total space -> this is not shown in the chart, only in table, it is additional information * May exceed quota (boolean, shown in a `BoolTag`) -> only in table On small screens, the widget shows one column of three panels with only the RSE name and the chart (no legend). The legend and the table appear on wider screens. Components using `chart.js` will not be fully responsive, i.e. increasing the screen width will lead to weird behaviour as shrunk components will not resize to the larger screen. In practice, this should not be an issue for now. *Should deal with later, though*
Added sorting to the widget! Used the tanstack table backend to feed into the widgets, generalised this. Using tanstack means that we can use a framework that is already known to us in order to implement sorting, filtering, etc. When creating a new widget, bear in mind to use `ChartJS` only for very specific purposes (i.e. the chart itself) and implement other UI elements, such as sorting and filtering using either custom components or those taken from the `StreamedTable`.
as part of the rebase to master, in which the new `Heading` and `Body` have just been implemented.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Added a dashboard component, which has space for two basic widgets:
Used
ChartJS(in itsreactimplementation) in order to plot the charts. The reasoning is that it is one of the most widely used plotting modules (much more widely used than the tanstack equivalent), and that it implements pie charts and other fun plotting methods. The "fun" is necessary in order to break up the visual monotony of a dashboard that only consists of x/y data (as discussed with @bari12, @mlassnig, etc). ChartJS is also preferable to D3 since it is easier to learn and the required complexity and interactivity of the dashboard components is not high enough as to warrant using a more complex library.The "Locks of ongoing rules" chart uses tanstack table in the back (with some added generic typing and helper functions) to enable interactivity in sorting and filtering the data. Chart data is first piped into a tanstack table and UI elements for sorting and filtering can connect to this table, among other possible manipulations. The table data is then reformatted and passed to the charting module.
Components taken from
StreamedTablewere used to implement the UI elements. Note that when designing new widgets, it makes sense to useChartJSfor very specific elements, such as the actual chart, and implement the widget layout and interactive elements by yourself.The component does not fully implement dark mode yet. It is fully responsive. Note that due to a peculiarity of
ChartJS, a chart will not grow after having shrunk from a resizing. In practice, this should not be an issue, since users will have fixed window sizes most of the time.