feat: add repo Activity & OpenRank Trends

src/helpers/get-gitee-repo-info.ts

@@ -12,7 +12,9 @@ export function getRepoName() {
 export function getRepoNameByUrl() {
   return pageDetect.utils.getRepositoryInfo(window.location)!.nameWithOwner;
 }
-
+export async function isRepoRoot() {
+  return pageDetect.isRepoRoot();
+}
 export function hasRepoContainerHeader() {
   const headerElement = $('#git-project-header-details');
   return headerElement && !headerElement.attr('hidden');

src/pages/ContentScripts/features/repo-activity-openrank-trends/gitee-index.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import $ from 'jquery';
+import { createRoot } from 'react-dom/client';
+import features from '../../../../feature-manager';
+import { getRepoName, isPublicRepoWithMeta, isRepoRoot } from '../../../../helpers/get-gitee-repo-info';
+import { getActivity, getOpenrank } from '../../../../api/repo';
+import { RepoMeta, metaStore } from '../../../../api/common';
+import View from './view';
+import { getPlatform } from '../../../../helpers/get-platform';
+import isGitee from '../../../../helpers/is-gitee';
+const featureId = features.getFeatureID(import.meta.url);
+let repoName: string;
+let activity: any;
+let openrank: any;
+let meta: RepoMeta;
+let platform: string;
+const getData = async () => {
+  activity = await getActivity(platform, repoName);
+  openrank = await getOpenrank(platform, repoName);
+  meta = (await metaStore.get(platform, repoName)) as RepoMeta;
+};
+
+const renderTo = (container: any) => {
+  createRoot(container).render(<View repoName={repoName} activity={activity} openrank={openrank} meta={meta} />);
+};
+
+const init = async (): Promise<void> => {
+  platform = getPlatform();
+  repoName = getRepoName();
+  await getData();
+
+  // create container
+  const newBorderGridRow = document.createElement('div');
+  newBorderGridRow.id = featureId;
+  newBorderGridRow.className = 'side-item trend';
+  newBorderGridRow.style.marginBottom = '0';
+  newBorderGridRow.style.fontWeight = '600';
+  newBorderGridRow.style.fontSize = '16px';
+  renderTo(newBorderGridRow);
+  const borderGridRows = $('div.side-item.contrib');
+  borderGridRows.after(newBorderGridRow);
+};
+
+const restore = async () => {
+  // Clicking another repo link in one repo will trigger a turbo:visit,
+  // so in a restoration visit we should be careful of the current repo.
+  if (repoName !== getRepoName()) {
+    repoName = getRepoName();
+    await getData();
+  }
+  // rerender the chart or it will be empty
+  renderTo($(`#${featureId}`).children('.BorderGrid-cell')[0]);
+};
+
+features.add(featureId, {
+  asLongAs: [isGitee, isPublicRepoWithMeta, isRepoRoot],
+  awaitDomReady: true,
+  init,
+  restore,
+});

src/pages/ContentScripts/features/repo-activity-openrank-trends/view.tsx

@@ -6,7 +6,8 @@ import Bars from '../../../../components/Bars';
 import { RepoMeta } from '../../../../api/common';
 import { useTranslation } from 'react-i18next';
 import '../../../../helpers/i18n';
-const githubTheme = getGithubTheme();
+import isGithub from '../../../../helpers/is-github';
+const theme = isGithub() ? getGithubTheme() : 'light';
 
 const generateBarsData = (activity: any, openrank: any, updatedAt: number) => {
   return {
@@ -47,21 +48,30 @@ const View = ({ repoName, activity, openrank, meta }: Props): JSX.Element | null
       window.open(`/${repoName}/issues?q=updated:${year}-${month} sort:updated-asc`);
     }
   };
-
-  return (
+  const BarsComponent = (
+    <Bars
+      theme={theme as 'light' | 'dark'}
+      height={350}
+      legend1={t('component_repoActORTrend_legend1')}
+      legend2={t('component_repoActORTrend_legend2')}
+      yName1={t('component_repoActORTrend_yName1')}
+      yName2={t('component_repoActORTrend_yName2')}
+      data1={barsData.data1}
+      data2={barsData.data2}
+      onClick={onClick}
+    />
+  );
+  return isGithub() ? (
     <div>
       <h2 className="h4 mb-3">{t('component_repoActORTrend_title')}</h2>
-      <Bars
-        theme={githubTheme as 'light' | 'dark'}
-        height={350}
-        legend1={t('component_repoActORTrend_legend1')}
-        legend2={t('component_repoActORTrend_legend2')}
-        yName1={t('component_repoActORTrend_yName1')}
-        yName2={t('component_repoActORTrend_yName2')}
-        data1={barsData.data1}
-        data2={barsData.data2}
-        onClick={onClick}
-      />
+      {BarsComponent}
+    </div>
+  ) : (
+    <div>
+      <div className="header">{t('component_repoActORTrend_title')}</div>
+      <div className="content" id="repo-activity-racing-bar">
+        {BarsComponent}
+      </div>
     </div>
   );
 };

src/pages/ContentScripts/index.ts

@@ -1,6 +1,7 @@
 import './index.scss';
 
 import './features/repo-activity-openrank-trends';
+import './features/repo-activity-openrank-trends/gitee-index.tsx';
 import './features/developer-activity-openrank-trends';
 import './features/repo-header-labels';
 import './features/repo-header-labels/gitee-index.tsx';