Developer v2

apps/web/src/modules/developer/DataView/Charts.tsx

@@ -0,0 +1,98 @@
+import React, { PropsWithChildren, useEffect } from 'react';
+import { useTranslation } from 'next-i18next';
+import ChartsDataProvider from '../context/ChartsDataProvider';
+import OverviewSummary from './OverviewSummary';
+import RepoDataView from './RepoDataView';
+import CommunityServiceSupport from './CommunityServiceSupport';
+import CommunityActivity from './CommunityActivity';
+import OrganizationsActivity from './OrganizationsActivity';
+import TopicTitle from '@modules/developer/components/TopicTitle';
+import { Topic } from '@modules/developer/components/SideBar/config';
+import { CiGrid41 } from 'react-icons/ci';
+import ProductivityIcon from '@modules/developer/components/SideBar/assets/Productivity.svg';
+import RobustnessIcon from '@modules/developer/components/SideBar/assets/Robustness.svg';
+import NicheCreationIcon from '@modules/developer/components/SideBar/assets/NicheCreation.svg';
+
+const Charts = () => {
+  const { t } = useTranslation();
+
+  return (
+    <ChartsDataProvider>
+      {/* <h1
+        className={
+          'group relative z-20 mb-8 flex text-3xl font-semibold md:px-4 md:text-3xl'
+        }
+      >
+        <CiGrid41 className="mt-2 mr-2 h-[21px] w-[21px] flex-shrink-0" />
+        {t('analyze:overview')}
+        <a href={`#${Topic.Overview}`}>
+          <span className="group-hover:text-primary invisible ml-2 cursor-pointer group-hover:visible">
+            #
+          </span>
+        </a>
+      </h1> */}
+      <ChartsDataView />
+    </ChartsDataProvider>
+  );
+};
+const ChartsDataView = () => {
+  const { t } = useTranslation();
+  return (
+    <>
+      {/* <TopicTitle
+        icon={<CiGrid41 className="mr-2 mt-10 h-[21px] w-[21px] flex-shrink-0" />}
+        id={Topic.Productivity}
+      >
+        {t('analyze:overview')}
+      </TopicTitle> */}
+      <h1
+        className={
+          'group relative z-20 mb-8 flex text-3xl font-semibold md:px-4 md:text-3xl'
+        }
+      >
+        <CiGrid41 className="mt-2 mr-2 h-[21px] w-[21px] flex-shrink-0" />
+        {t('analyze:overview')}
+        <a href={`#${Topic.Overview}`}>
+          <span className="group-hover:text-primary invisible ml-2 cursor-pointer group-hover:visible">
+            #
+          </span>
+        </a>
+      </h1>
+      <OverviewSummary />
+
+      <TopicTitle
+        icon={<ProductivityIcon className="mt-2 mr-2 h-[21px] w-[21px]" />}
+        id={Topic.Productivity}
+      >
+        仓库
+      </TopicTitle>
+      <RepoDataView />
+
+      <TopicTitle
+        icon={<RobustnessIcon className="mt-2 mr-2 h-[21px] w-[21px]" />}
+        id={Topic.Robustness}
+      >
+        协作
+      </TopicTitle>
+      <CommunityActivity />
+
+      <TopicTitle
+        icon={<NicheCreationIcon className="mt-2 mr-2 h-[21px] w-[21px]" />}
+        id={Topic.NicheCreation}
+      >
+        Code
+      </TopicTitle>
+      <OrganizationsActivity />
+
+      <TopicTitle
+        icon={<NicheCreationIcon className="mt-2 mr-2 h-[21px] w-[21px]" />}
+        id={Topic.NicheCreation}
+      >
+        Issues
+      </TopicTitle>
+      <CommunityServiceSupport />
+    </>
+  );
+};
+
+export default Charts;

apps/web/src/modules/developer/DataView/CommunityActivity/CodeReviewCount.tsx

@@ -0,0 +1,81 @@
+import React, { useMemo, useState } from 'react';
+import { Activity } from '@modules/developer/components/SideBar/config';
+import BaseCard from '@common/components/BaseCard';
+import ChartWithData from '@modules/developer/components/ChartWithData';
+import EChartX from '@common/components/EChartX';
+import { GenChartOptions, TransOpt } from '@modules/developer/type';
+import { useTranslation } from 'next-i18next';
+import useGetLineOption from '@modules/developer/hooks/useGetLineOption';
+
+import CardDropDownMenu from '@modules/developer/components/CardDropDownMenu';
+
+const CodeReviewCount = () => {
+  const { t } = useTranslation();
+  const tansOpts: TransOpt = {
+    legendName: t(
+      'metrics_models:community_activity.metrics.code_review_count'
+    ),
+    xKey: 'grimoireCreationDate',
+    yKey: 'metricActivity.codeReviewCount',
+    summaryKey: 'summaryActivity.codeReviewCount',
+  };
+  const {
+    showAvg,
+    setShowAvg,
+    showMedian,
+    setShowMedian,
+    getOptions,
+    yAxisScale,
+    setYAxisScale,
+  } = useGetLineOption();
+
+  return (
+    <BaseCard
+      title={t('metrics_models:community_activity.metrics.code_review_count')}
+      id={Activity.CodeReviewCount}
+      description={t(
+        'metrics_models:community_activity.metrics.code_review_count_desc'
+      )}
+      weight={t(
+        'metrics_models:community_activity.metrics.code_review_count_more.weight'
+      )}
+      threshold={t(
+        'metrics_models:community_activity.metrics.code_review_count_more.threshold'
+      )}
+      detail={t(
+        'metrics_models:community_activity.metrics.code_review_count_more.detail'
+      )}
+      docLink={'/docs/metrics-models/robustness/activity/#code-review-count'}
+      headRight={(ref, fullScreen, setFullScreen) => (
+        <CardDropDownMenu
+          cardRef={ref}
+          fullScreen={fullScreen}
+          onFullScreen={(b) => {
+            setFullScreen(b);
+          }}
+          showAvg={showAvg}
+          onAvgChange={(b) => setShowAvg(b)}
+          showMedian={showMedian}
+          onMedianChange={(b) => setShowMedian(b)}
+          yAxisScale={yAxisScale}
+          onYAxisScaleChange={(b) => setYAxisScale(b)}
+          yKey={tansOpts['yKey']}
+        />
+      )}
+    >
+      {(ref) => {
+        return (
+          <ChartWithData tansOpts={tansOpts} getOptions={getOptions}>
+            {({ loading, option }) => {
+              return (
+                <EChartX containerRef={ref} loading={loading} option={option} />
+              );
+            }}
+          </ChartWithData>
+        );
+      }}
+    </BaseCard>
+  );
+};
+
+export default CodeReviewCount;

apps/web/src/modules/developer/DataView/CommunityActivity/CommentFrequency.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Activity } from '@modules/developer/components/SideBar/config';
+import BaseCard from '@common/components/BaseCard';
+import ChartWithData from '@modules/developer/components/ChartWithData';
+import EChartX from '@common/components/EChartX';
+import { useTranslation } from 'next-i18next';
+import { GenChartOptions, TransOpt } from '@modules/developer/type';
+import useGetLineOption from '@modules/developer/hooks/useGetLineOption';
+
+import CardDropDownMenu from '@modules/developer/components/CardDropDownMenu';
+
+const CommentFrequency = () => {
+  const { t } = useTranslation();
+
+  const tansOpts: TransOpt = {
+    legendName: t(
+      'metrics_models:community_activity.metrics.comment_frequency'
+    ),
+    xKey: 'grimoireCreationDate',
+    yKey: 'metricActivity.commentFrequency',
+    summaryKey: 'summaryActivity.commentFrequency',
+  };
+  const {
+    showAvg,
+    setShowAvg,
+    showMedian,
+    setShowMedian,
+    getOptions,
+    yAxisScale,
+    setYAxisScale,
+  } = useGetLineOption();
+
+  return (
+    <BaseCard
+      title={'Issue评论数量'}
+      id={Activity.CommentFrequency}
+      description={t(
+        'metrics_models:community_activity.metrics.comment_frequency_desc'
+      )}
+      weight={t(
+        'metrics_models:community_activity.metrics.comment_frequency_more.weight'
+      )}
+      threshold={t(
+        'metrics_models:community_activity.metrics.comment_frequency_more.threshold'
+      )}
+      detail={t(
+        'metrics_models:community_activity.metrics.comment_frequency_more.detail'
+      )}
+      docLink={'/docs/metrics-models/robustness/activity/#comment-frequency'}
+      headRight={(ref, fullScreen, setFullScreen) => (
+        <CardDropDownMenu
+          cardRef={ref}
+          fullScreen={fullScreen}
+          onFullScreen={(b) => {
+            setFullScreen(b);
+          }}
+          showAvg={showAvg}
+          onAvgChange={(b) => setShowAvg(b)}
+          showMedian={showMedian}
+          onMedianChange={(b) => setShowMedian(b)}
+          yAxisScale={yAxisScale}
+          onYAxisScaleChange={(b) => setYAxisScale(b)}
+          yKey={tansOpts['yKey']}
+        />
+      )}
+    >
+      {(ref) => {
+        return (
+          <ChartWithData tansOpts={tansOpts} getOptions={getOptions}>
+            {({ loading, option }) => {
+              return (
+                <EChartX containerRef={ref} loading={loading} option={option} />
+              );
+            }}
+          </ChartWithData>
+        );
+      }}
+    </BaseCard>
+  );
+};
+
+export default CommentFrequency;

apps/web/src/modules/developer/DataView/CommunityActivity/CommitFrequency.tsx

@@ -0,0 +1,79 @@
+import React, { useMemo, useState } from 'react';
+import { Activity } from '@modules/developer/components/SideBar/config';
+import BaseCard from '@common/components/BaseCard';
+import ChartWithData from '@modules/developer/components/ChartWithData';
+import EChartX from '@common/components/EChartX';
+import { useTranslation } from 'next-i18next';
+import { GenChartOptions, TransOpt } from '@modules/developer/type';
+import useGetLineOption from '@modules/developer/hooks/useGetLineOption';
+
+import CardDropDownMenu from '@modules/developer/components/CardDropDownMenu';
+
+const CommitFrequency = () => {
+  const { t } = useTranslation();
+  const tansOpts: TransOpt = {
+    legendName: t('metrics_models:community_activity.metrics.commit_frequency'),
+    xKey: 'grimoireCreationDate',
+    yKey: 'metricActivity.commitFrequency',
+    summaryKey: 'summaryActivity.commitFrequency',
+  };
+  const {
+    getOptions,
+    setShowMedian,
+    showMedian,
+    showAvg,
+    setShowAvg,
+    yAxisScale,
+    setYAxisScale,
+  } = useGetLineOption();
+
+  return (
+    <BaseCard
+      title={t('metrics_models:community_activity.metrics.commit_frequency')}
+      id={Activity.CommitFrequency}
+      description={t(
+        'metrics_models:community_activity.metrics.commit_frequency_desc'
+      )}
+      weight={t(
+        'metrics_models:community_activity.metrics.commit_frequency_more.weight'
+      )}
+      threshold={t(
+        'metrics_models:community_activity.metrics.commit_frequency_more.threshold'
+      )}
+      detail={t(
+        'metrics_models:community_activity.metrics.commit_frequency_more.detail'
+      )}
+      docLink={'/docs/metrics-models/robustness/activity/#commit-frequency'}
+      headRight={(ref, fullScreen, setFullScreen) => (
+        <CardDropDownMenu
+          cardRef={ref}
+          fullScreen={fullScreen}
+          onFullScreen={(b) => {
+            setFullScreen(b);
+          }}
+          showAvg={showAvg}
+          onAvgChange={(b) => setShowAvg(b)}
+          showMedian={showMedian}
+          onMedianChange={(b) => setShowMedian(b)}
+          yAxisScale={yAxisScale}
+          onYAxisScaleChange={(b) => setYAxisScale(b)}
+          yKey={tansOpts['yKey']}
+        />
+      )}
+    >
+      {(ref) => {
+        return (
+          <ChartWithData tansOpts={tansOpts} getOptions={getOptions}>
+            {({ loading, option }) => {
+              return (
+                <EChartX containerRef={ref} loading={loading} option={option} />
+              );
+            }}
+          </ChartWithData>
+        );
+      }}
+    </BaseCard>
+  );
+};
+
+export default CommitFrequency;