feat: Design and implement several variable charts

[wj23027]

Brief Information

This pull request is in the type of (more info about types):

• build
• ci
• docs
• feat
• fix
• perf
• refactor
• test

Related issues (all available keywords):

• resolve [OSPP 2023] Project 2: Design and implement several variable charts(i.e. multiple sizes) for the "Repo Collections" feature #654

Details

I have implemented a basic grid layout for the charts, allowing different-sized charts to be added to the layout.

In the next steps, I will need to add logic to allow users to add charts of specific sizes and types to specific positions, and optimize the styling of the layout.

Next Steps:

• Adjust the visual presentation of the charts.
• Implement Additional Chart Styles
• optimize the styling of the layout
• add logic to allow users to add charts of specific sizes and types to specific positions
• i18n
• Integrate the feature into 'Repo Collections' feature

Checklist

• I have read the CONTRIBUTING doc
• I have signed the CLA

Others

[andyhuang18]

Great! Wish you have a good time in your trip. 😄

[wxharry]

Hi, @wj23027 . I have changed this base branch to feat/repo-collection since you and Andy is working on one feature. I have implmented a modal view for testing new charts. It helps to focus on developing the component itself. Since this branch highly depends on the work from Andy, my suggestion is that you can work on new charts first, wait til Andy implements the modal.

[tyn1998]

Hi @wj23027, I found that the GridLayout is not imported by any file so I guess the screenshot you provided in the PR description is just for preview. Since @wxharry provided a way to test your charts, you can import GridLayout there.

Besides, please comment the code in English and hurry up :D

[wj23027]

Hi, @wj23027 . I have changed this base branch to feat/repo-collection since you and Andy is working on one feature. I have implmented a modal view for testing new charts. It helps to focus on developing the component itself. Since this branch highly depends on the work from Andy, my suggestion is that you can work on new charts first, wait til Andy implements the modal.

@wxharry , thank you for your suggestions and the method you provided for testing the new charts! I have now developed some of the charts(as shown below). Next, I will continue to work on the boxplot and Sankey chart with Andy~

[wj23027]

This update introduces two new charts: boxplot chart and a Sankey chart . The box plot is used to illustrate the approximate distribution of issue response times, while the Sankey chart showcases user activity across different repositories.

boxplot chart :

Sankey chart：

[wj23027]

In addition, a simple grid layout component has been implemented to display the charts separately in both the modal and option pages.

Furthermore, clicking on menu items can highlight data for corresponding repositories in certain charts.

Next Tasks :

• Implement highlighting for other charts.
• Fine-tune chart styles.
• Merge Andy's code contributions.

[tyn1998]

@wj23027 The Sankey chart is really good.

There are only two repos in the demo collection, could you add more repos into it? Please bare in mind that these charts should be scalable for any given collection of different size.

[tyn1998]

@wj23027 The Sankey chart is really good.

There are only two repos in the demo collection, could you add more repos into it? Please bare in mind that these charts should be scalable for any given collection of different size.

Hello @wj23027, could you add more repos into your mock data? Since in my view, these two charts are not a good choice for those collections with 3+ repos.

[tyn1998]

Hi @wj23027, thanks for your time and effort contributed to this OSPP project. Here are some suggestions for you and I will give more of them in the following days.

[wj23027]

In this update, I added numerical display panels.I tried increasing the number of repositories in the collection and noticed that after the increase, the code additions and deletions chart as well as the multi-dimensional bar chart didn't look very aesthetically pleasing. So, I made the following adjustments:

1. Changed the code additions and deletions chart to an area chart,
2. Limited the display range of the multi-dimensional bar chart to the last 6 months,
3. Added stacked bar chart.

[wj23027]

Here is a screenshot of the updated charts:

[wj23027]

Additionally, I've noticed that when the collection contains too many developers, there are some issues with the Sankey chart's display. Therefore, I've increased the size of the Sankey chart, but it still works best for collections containing no more than 150 developers (ideally, fewer than 100).

[wj23027]

I have an issue to address: in the stacked bar chart, the data from different series isn't stacking as intended, but I haven't found the reason yet.

[andyhuang18]

Here is a screenshot of the updated charts:

Looks good!

[wxharry]

Additionally, I've noticed that when the collection contains too many developers, there are some issues with the Sankey chart's display. Therefore, I've increased the size of the Sankey chart, but it still works best for collections containing no more than 150 developers (ideally, fewer than 100).

Great! I am glad you tested it. Then we should add a warning or notice like when users are trying to add a sankey chart. I prefer adding it anyway since this is a very cool chart. What do you think @tyn1998 ?

I have an issue to address: in the stacked bar chart, the data from different series isn't stacking as intended, but I haven't found the reason yet.

It is because the two data arraies have different lengths.

I simply sliced the data arraies to the latest 37 elements and it works.

I think we need additional functions to fill up what's missing to 0.

[wxharry]

Also, please pay attention to the style below. The charts are not supposed to be outside of their containers. I hope it's a small fix, but if it's not, a temporary workaround is acceptable.

[zhicheng-ning]

Some suggestions：

• The dimensions of the chart need to be adapted. For example：change it from150000 to 150k
• The maximum value of the chart is adapted,it will be more beautiful. For example：change maximun value from 120 to 20（The maximum value among all existing values）.

Also, please pay attention to the style below. The charts are not supposed to be outside of their containers. I hope it's a small fix, but if it's not, a temporary workaround is acceptable.

[wj23027]

Hi, I merged the collection contents(including the repolist and dashboard) into the Collection Modal~

[tyn1998]

Great job @wj23027 !

Your work LGTM, thank you for your contributions!