feat: add Repo Activity Racing Bar #696

andyhuang18 · 2023-06-14T15:35:59Z

Brief Information

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

Related issues (all available keywords):

resolve [Feature] activity-racing-bars #687

Details

I have laid a foundation for this feature, which can be viewed in the option list. But the actual functionality has not yet been implemented. I'll follow up as soon as I have time!

Checklist

I have read the CONTRIBUTING doc
I have signed the CLA

Others

andyhuang18 · 2023-07-09T13:29:25Z

The function of the main body has been initially realized, and the following is a demonstration video. I have not modified the text on the right.

2023-07-09.21-22-46.mp4

tyn1998 · 2023-07-15T03:14:10Z

Hey @andyhuang18, the animation in your demo is very laggy, do you know why?

andyhuang18 · 2023-07-15T03:59:10Z

I changed the updateFrequency to 4000. Maybe updateFrequency should be adjusted to an appropriate value.

andyhuang18 · 2023-07-17T08:44:43Z

I have successfully completed the development of this feature, and the replay function is also available. In the future, other new functions can be added, such as positioning time, etc. 😄

wxharry · 2023-07-18T04:12:07Z

I have successfully completed the development of this feature, and the replay function is also available. In the future, other new functions can be added, such as positioning time, etc. 😄

Nicely done! I just tested your work ant it is amazing! It moves smoothly and looks awesome. Here is some advice on this:

style change. To make style identical, would you mind wrapping up chart with a div container with hypertrons-crx-border like the other two graphs in the perceptor tab.
layout change. The Period: 90 days is meaningless here. I think we could move that replay button to that place and also change the style of the button a little to make it more natural. What do you say?

Again, thanks for your incredible work! 👍

andyhuang18 · 2023-07-18T06:16:20Z

Hi~ @wxharry .Thanks for the great suggestions! I have modified the styles of the chart and replay. Any suggestions for a style like this?
As for the position of replay,I think it would be reasonable to put the replay button below the chart, and maybe add other buttons to manipulate the chart in the future~

tyn1998 · 2023-07-18T16:17:56Z

Hey @andyhuang18, thanks for your hard work!

one

I pulled your code and tested it with my hands, finding that the feature occasionally cannot be displayed with the following error output in the console:

I have not found a way to replicate the bug yet. But I guess it is possibly related to feature loading timing.

two

As for the position of replay,I think it would be reasonable to put the replay button below the chart, and maybe add other buttons to manipulate the chart in the future~

Please give the Replay button a new home:

The displacement of the button may require you to learn and use more skills in HTML, CSS, React. Good luck :)

three

I have not read the code changes yet. I assume they will be reviewed in days.

wxharry · 2023-07-19T03:19:07Z

Hi @andyhuang18, just change the to "feat: add Repo Activity Racing Bar". You are not just implementing this, you are adding the entire feature in this pr. 😄

feat: initial implementation of activity racing bar(need to be modified) feat: initial implementation of activity racing bar(need to be modified v1) feat: initial implementation of activity racing bar(need to be modified v2) feat: implementation of activity racing bar feat: change the style of chart and button

wxharry · 2023-08-12T04:43:13Z

Hi, @andyhuang18 . There are two style changes required for this PR:

add a 15px padding to the border or a 15px margin to the racing bar. This is because some username is long and the name is at the edge
move the replay button to the top-right corner. I understand your concern about adding more features, but we should move the button for now. The top-right corner is a place for user interaction which is used in the insight tab at Github.

Thanks for your contributions and feel free to leave comments or dm me~

andyhuang18 · 2023-08-12T05:05:00Z

OK! Thanks harry for the suggestion! I am modifying my code. Commit can be done today. 😆

andyhuang18 · 2023-08-12T07:29:51Z

Hi~ @tyn1998 @wxharry I've done all the development of this feature so far.
A brief description of the last few updates：

Moved the Replay button to the upper right corner of the interface, and modified the style to match the GitHub button.

Provides i18n support.
Since I am using the webstorm editor, I updated gitignore. In the future, updates in the .idea folder will be ignored by git.

PS: I didn't know enough about the update mode of echart before, so [ECharts] Instance ec_1691746561518 has been disposed will always be prompted in the console of the browser during replay. At present, this problem has been solved, and the reason is: because I achieved the purpose of replay by re-creating the echart instance, the first instance has been dispose after re-creation, and the second hook function is still updating the data of the first instance chart , so an error will be reported. The solution is to first determine whether an instance exists when updating data.

If you have any additional suggestions, please let me know, thank you~

wxharry · 2023-08-12T19:13:04Z

Hi~ @tyn1998 @wxharry I've done all the development of this feature so far. A brief description of the last few updates：
...
If you have any additional suggestions, please let me know, thank you~

Hey! Thanks again for your contributions. This feature is really awesome! I have reviewed your code and left a comment. It won't take long to resolve and I think this feature is ready to merge. I am so excited to see the racing bar released.

andyhuang18 · 2023-08-13T12:52:32Z

Hi~ @tyn1998 @wxharry I've done all the development of this feature so far. A brief description of the last few updates：
...
If you have any additional suggestions, please let me know, thank you~

Hey! Thanks again for your contributions. This feature is really awesome! I have reviewed your code and left a comment. It won't take long to resolve and I think this feature is ready to merge. I am so excited to see the racing bar released.

Hi @wxharry. Where is the problem? Seems like I didn't see your comment. 🤔

tyn1998

Hi @andyhuang18, I have pushed several commits to improve the code.

Your contribution is great, thank you very much!

tyn1998 · 2023-08-13T14:31:59Z

src/pages/ContentScripts/features/repo-activity-racing-bar/RacingBar.tsx

+      // clear timer if user replay the chart before it finishes
+      if (timer) {
+        clearTimeout(timer);
+      }


Timer should be cleared.

tyn1998 · 2023-08-13T14:32:37Z

src/pages/ContentScripts/features/repo-activity-racing-bar/RacingBar.tsx

+  const playNext = () => {
+    updateMonth(instance, data, months[i]);
+    i++;
+    if (i < months.length) {
+      timer = setTimeout(playNext, updateFrequency);
+    }
+  };
+
+  playNext();


another way to play

tyn1998 · 2023-08-13T14:33:38Z

src/pages/ContentScripts/features/repo-activity-racing-bar/RacingBar.tsx

+  // @ts-ignore
+  option.yAxis.axisLabel.rich = rich;
+  // @ts-ignore
+  option.series[0].data = data[month];
+  // @ts-ignore
+  option.graphic.elements[0].style.text = month;


// @ts-ignore is like xxx: any, we should fix them all one day :D

tyn1998 · 2023-08-13T14:36:37Z

src/pages/ContentScripts/features/repo-activity-racing-bar/RacingBar.tsx

+  // it seems that hidden bars are also rendered, so when each setOption merge more data into the chart,
+  // the fps goes down. So we use notMerge to avoid merging data. But this disables the xAxis animation.
+  // Hope we can find a better solution.
+  instance.setOption(option, {
+    notMerge: true,
+  });
+};


microsoft/vscode has a lot of contributors, which slows down the animation when played at ~2018 or so.

notMerge: true is the best resolution I can give for now.

tyn1998 · 2023-08-13T14:39:27Z

Hi @wxharry, please take some time to review my recent commits to this branch. If you think the PR is ready to go, just /approve it :)

tyn1998 · 2023-08-13T14:41:01Z

Seems like I didn't see your comment. 🤔

+1

wxharry · 2023-08-12T19:04:46Z

src/pages/ContentScripts/features/repo-activity-racing-bar/RacingBar.tsx

+      })(i);
+    }
+
+    // @ts-ignore


I noticed there are many directive in this part, I think it would be better if we could remove some of these. The @ts-ignore could be convenient but there are too many of them which may ignore type errors. Please confirm they are necessary. Thanks

Yeah, @ts-ignore and any should be avoided with best effort. In my commits, I removed some of them, but still left some others. My time is limited🤣 .

We can have Andy fixing this later as a patch. I will merge this feature anyway but you can still improve your work. @andyhuang18 What do you say?

wxharry · 2023-08-13T16:10:15Z

There is an inconsistence when open perceptor tab in different repos. For our repo, the racing bar is the first section, but in repos like vscode, it is the last one. It is not strongly related to this feature, so I will create a new issue. This feature looks good to me. Thanks @andyhuang18 @tyn1998 for your contributions!

/approve

menbotics bot added the kind/feature Category issues or prs related to feature request. label Jun 14, 2023

andyhuang18 marked this pull request as ready for review July 17, 2023 08:42

l1tok mentioned this pull request Jul 18, 2023

[Meeting] Hypercrx Biweekly Meeting: 2023-07-19 #707

Closed

andyhuang18 changed the title ~~feat: added feature to option list but didn't implement it~~ feat: implement Repo Activity Racing Bar Jul 19, 2023

andyhuang18 changed the title ~~feat: implement Repo Activity Racing Bar~~ feat: add Repo Activity Racing Bar Jul 19, 2023

andyhuang18 force-pushed the feat/activity-racing-bar branch from 804e2a7 to 7aedbc3 Compare August 10, 2023 07:22

andyhuang18 added 3 commits August 12, 2023 15:06

feat: change chart width and put button to corner

278957f

feat: support for i18n

99a681d

feat: update .gitignore for .idea files

ee48dd9

andyhuang18 and others added 2 commits August 13, 2023 19:51

style: better style makes it look better

c5e1c87

chore: let and const has their own scope

55d740c

tyn1998 added 4 commits August 13, 2023 21:08

chore: better way to play and replay the racing bar

967d3ec

chore: update messages

36ec44f

feat: variable bar number according to contributors number

35dd841

fix: fix performance issue

2228868

tyn1998 approved these changes Aug 13, 2023

View reviewed changes

wxharry reviewed Aug 13, 2023

View reviewed changes

menbotics bot added the pull/approved If a pull is approved, it will be automatically merged label Aug 13, 2023

menbotics bot merged commit 2e5abf4 into hypertrons:master Aug 13, 2023

menbotics bot mentioned this pull request Aug 14, 2023

[WeeklyReport] Weekly report for hypertrons-crx 8/7/2023 to 8/14/2023 #719

Closed

l1tok mentioned this pull request Aug 30, 2023

[Meeting] Hypercrx Biweekly Meeting: 2023-08-30 #732

Closed

wxharry mentioned this pull request Oct 19, 2023

[Feature] A place to show the repo's history most active contributors #263

Closed

7 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add Repo Activity Racing Bar #696

feat: add Repo Activity Racing Bar #696

andyhuang18 commented Jun 14, 2023

andyhuang18 commented Jul 9, 2023

tyn1998 commented Jul 15, 2023

andyhuang18 commented Jul 15, 2023

andyhuang18 commented Jul 17, 2023

wxharry commented Jul 18, 2023

andyhuang18 commented Jul 18, 2023

tyn1998 commented Jul 18, 2023 •

edited

Loading

wxharry commented Jul 19, 2023

wxharry commented Aug 12, 2023

andyhuang18 commented Aug 12, 2023

andyhuang18 commented Aug 12, 2023

wxharry commented Aug 12, 2023

andyhuang18 commented Aug 13, 2023

tyn1998 left a comment

tyn1998 Aug 13, 2023

tyn1998 Aug 13, 2023

tyn1998 Aug 13, 2023

tyn1998 Aug 13, 2023

tyn1998 commented Aug 13, 2023

tyn1998 commented Aug 13, 2023

wxharry Aug 12, 2023

tyn1998 Aug 13, 2023

wxharry Aug 13, 2023

andyhuang18 Aug 14, 2023

wxharry commented Aug 13, 2023

feat: add Repo Activity Racing Bar #696

feat: add Repo Activity Racing Bar #696

Conversation

andyhuang18 commented Jun 14, 2023

Brief Information

Details

Checklist

Others

andyhuang18 commented Jul 9, 2023

tyn1998 commented Jul 15, 2023

andyhuang18 commented Jul 15, 2023

andyhuang18 commented Jul 17, 2023

wxharry commented Jul 18, 2023

andyhuang18 commented Jul 18, 2023

tyn1998 commented Jul 18, 2023 • edited Loading

one

two

three

wxharry commented Jul 19, 2023

wxharry commented Aug 12, 2023

andyhuang18 commented Aug 12, 2023

andyhuang18 commented Aug 12, 2023

wxharry commented Aug 12, 2023

andyhuang18 commented Aug 13, 2023

tyn1998 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tyn1998 commented Aug 13, 2023

tyn1998 commented Aug 13, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wxharry commented Aug 13, 2023

tyn1998 commented Jul 18, 2023 •

edited

Loading