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

[tyn1998]

Description

Related to #487. Should be started after v1.9.0 is merged into master.

Repo Collections is a place to present aggregated data for a set of repos. Aggregated data could be:

• Total Activity, OpenRank, Star Increment by month
• OpenRank(or other metrics) comparison among repos in one collection
• ...

This project requires a good understanding of OpenDigger metrics and indices for repos. You are asked to design several variable charts and implement them as React functional components, then these components can be integrated into Repo Collections later.

What is a variable chart? Variable charts is a concept similar to iOS widgets, so each variable chart is expected to provide at least one size for users to choose from. You are encouraged to provide multiple sizes for one variable chart, but it is ok to provide only one size for a certain variable chart.

Output Requirements

• Design >=8 variable charts and put/link your prototypes here as an issue comment
• Implement them as React functional components

Technical Requirements

• ECharts
• HTML, CSS, TS
• React, React Hooks
• Comprehension of OpenDigger metrics and indices (use those data to make the charts)
• Git, GitHub

Difficulty

Advance

Mentor

@zhicheng-ning

[wj23027]

I am very interested in this project, and I really hope to get the chance to participate in this project on OSPP.

[andyhuang18]

This is a great idea! I have relevant experience with Hypercrx and Opendigger metrics. I have a high interest in this project and hope to contribute my efforts. ^ ^

[andyhuang18]

Is the variable chart here similar to the echart chart that pops up when we hover over the Fork, Starred, etc. buttons?
As I have shown in the screenshot below.

[tyn1998]

Not really. I think the variable charts are charts like those in DataEase Dashboard but with different sizes, which makes them like widgets.

[andyhuang18]

Not really. I think the variable charts are charts like those in DataEase Dashboard but with different sizes, which makes them like widgets.

OK~

[pranavshuklaa]

Hi there! My name is Pranav and I'm interested in contributing to this project. I have forked and set up the project locally, and I've been looking into OpenDigger metrics and indices. I'm wondering if there are any good first issues or tasks in those areas that I can work on to get a better understanding of the project.

Additionally, I'm planning to work on a chart prototype as mentioned in the Output requirements. I'd like ask if there are any specific requirements or suggestions for the chart prototype.

I look forward to hearing back from you soon! :)

[pranavshuklaa]

Hi! For the past few days, I have been reading about the aims of Project 2 and I also came across Issue #487 , which discusses the conversation about displaying aggregated data for a group of projects. Additionally, I have checked out Project 1 and its related issues. The idea behind this project is quite promising :)

I had few questions regarding the project:

1. In relation to the expected output of Project 2, which involves designing variable charts, I would like to know what my prototype should include before sharing it with all of you.

-> Should I create a separate slide that replicates the image mentioned in Project 2, but with more details and specifications? For instance, I can show a chart depicting the total activity, a pie chart showcasing individual contributions, and other similar charts. I would also provide information on my approach to building these charts into a React component, demonstrating my best approach to displaying the aggregated data.
Or do you have different expectations?

2. Considering the prototype and the discussion in Issue # 653, I understand that Project 1 involves implementing the "Collections" button. Therefore, I assumed that the "Comparison" and "Settings" buttons fall within the scope of Project 2. Could you please confirm this?"

[tyn1998]

Hi @pranavshuklaa, the detailed description of your understanding on this project is much appreciated. Your two questioins are answered as follows:

1. you are welcomed to give 1-2 prototypes (no need to implement them actually) of variable charts here(better provide charts in different sizes if the kind of chart support variable sizes in your design), and depict their meanings and strengths.
2. Only charts does this project focus on. "Comparison" and "Settings" are plans for future :)

[wj23027]

hi, I have designed several prototypes of the charts and welcome suggestions:

• Line chart: Displays the openRank of multiple Repos over time. You can compare Repos over time based on this chart. This chart style can also be used to display metrics such as activity, number of stars, number of issues, and so on.
• Donut chart: It clearly shows the proportion of stars in each repo.
• Bar chart: You can easily see and compare the percentage of programming languages used in different Repos.
• Sankey diagram: Used to display the contribution relationship between the repo and the contributor. You can clearly see the contribution distribution of each contributor, as well as the relationship between the repository and the contributor.

In addition, taking line charts as an example, several charts can be designed in "1 x 1" and "1 x 2" sizes for users to choose from.

[tyn1998]

@wj23027 Good prototypes! While something I want to point out:

1. The two versions(sizes) of line charts are actually the same except for their widths. For two lines crossing a time span of 12 months, they look both fine. But how about 10 lines crossing a time span of 5 years? Then the small chart could be too crowded. A series of variable charts can only differ in sizes as your two line charts, yet variable charts differing in design are more preferred.
2. The sankey chart showing distribution of contributions impresses me. But I have a question: which data exported by OpenDigger you plan to use to count as contribution? With my understanding, there is no such data can support this sankey chart.

[wj23027]

1. The two versions(sizes) of line charts are actually the same except for their widths. For two lines crossing a time span of 12 months, they look both fine. But how about 10 lines crossing a time span of 5 years? Then the small chart could be too crowded. A series of variable charts can only differ in sizes as your two line charts, yet variable charts differing in design are more preferred.
2. The sankey chart showing distribution of contributions impresses me. But I have a question: which data exported by OpenDigger you plan to use to count as contribution? With my understanding, there is no such data can support this sankey chart.

Thanks for your reply!

1. I understand what you mean. We can use different sizes to show charts with different data amounts, is that right? Next I will adjust the chart prototype for this.
2. I'm sorry that I haven't thought about the data, and I just think the chart style is quite suitable. Maybe we can use a Collaboration Network instead to show the relationship between developers.

[stealth-bombeer]

Hey @tyn1998, now I have good understanding of the the Project-1 and will continue making updates in it, parallelly I'm elated with Project-2 also I'll be sharing my solution based on my research in coming days and I'm also interested in writing proposal for this project too 😄

[pranavshuklaa]

Hey! I have created some prototypes of E-charts that represent aggregated data.

These charts showcase the activity, stars, forks, and OpenRank of multiple repositories. To give you a better idea, I have edited my charts in the form of widgets based on the prototype created by @tyn1998

Activity Chart: It demonstrates the activity of five different repositories each month.
Chart used: Stacked Horizontal Bar

Stars Chart: Total stars received by the repositories over the years.
Chart used: Mixed Line and Bar

Forks Chart: Total forks of the repositories each month.
Chart used: Mixed Line and Bar

OpenRank Chart: The OpenRank of the repositories each month.
Chart used: Mixed Line and Bar

These charts can be easily represented as widgets, and for these four charts, we can have two size options: 2x3 or 4x6. The size of the widgets can be adjusted once we finalize all eight charts. Currently, I have created prototypes for four variable charts. After receiving everyone's suggestions and recommendations, I will create the remaining four charts and include them in my proposal.
While there were numerous available charts to choose from, I carefully selected the charts mentioned above. Although there are additional options like the Stacked Bar Chart on Polar (Radial), I opted for the stacked horizontal bar because I believe it would have a stunning appearance when implemented as a React component.

Here's how I edited the prototype:

Same widgets/charts in Dark mode for all the dark mode users :)

Things i want to discuss:

1. It is important to address the issue raised by @frank-zsy regarding the visual clarity and aesthetics when plotting charts for users with 10+ favorite repositories. One possible solution is to implement limits for different charts on the collections page. For instance, we can set a range of 5 to 10 repositories for the stacked horizontal bar chart, while limiting the other charts to 5 repositories. By doing so, only the top 5 favorite repositories will be displayed using the echarts. Another solution is; Instead of setting fixed limits for all charts, introduce a dynamic filtering mechanism that allows users to select the repositories they want to visualize on each chart. This way, users can individually choose their top 5 or preferred repositories for each chart, ensuring clarity and relevance based on their preferences. I am currently conducting further research to explore even better solutions for this problem.
2. I would also like to discuss what other data can be represented for the rest 4 charts ? pls do suggest.
3. Pls share your views and suggestions about my representation of this project :)

Checkout individual charts :
(1)(2)
(3)(4)
(5) (6)
(7)(8)

[pranavshuklaa]

Hi! Could you please provide me with your suggestions and views on the charts I shared earlier? Your input would greatly assist me in deciding my next steps for addressing this project.

[tyn1998]

Hi @pranavshuklaa, your demenstration is so detailed 👍

As you pointed out, the 4 charts you proposed are not well scalable to collections with more repos. So these kinds of bar charts are not proper for presentation. "Aggregated data", as it is so called, should be much more understood in this way:

Repo A has 5 stars, repo B has 3 stars, repo C has 2 stars. A collection of the three has a total stars whose number is 10. The "10" is aggregated data.

Yet comparison among repos also counts as aggregated data.

I would also like to discuss what other data can be represented for the rest 4 charts ? pls do suggest.

Understanding data exported by OpenDigger is also a big important task in this project. I may ask you to figure them yourself :D

[tyn1998]

@wj23027 @pranavshuklaa @stealth-bombeer Guys since you are interested in this project, may I have your resumes? You can email me or leave a link to your online resume here :)

[wj23027]

After discussing with @tyn1998 and @andyhuang18, here is the part of the updated 'repo collection' feature that I am responsible for:

1. When users click to enter the collection page on the GitHub repository,the list of repos in this collection, as well as the charts, will be displayed through a modal, with the current repo highlighted.

2. When users enter the collection page through the plugin's popup, the collection information will be displayed using the options page.