+ setTab(v as TabValue)}
+ />
+
+
+ setTab(v as TabValue)}
+ />
+
+
+ setTab(v as TabValue)}
+ />
+
+
+
+
+ );
+};
+
+export default withErrorBoundary(CommunitySupport, {
+ FallbackComponent: ErrorFallback,
+ onError(error, info) {
+ console.log(error, info);
+ // Do something with the error
+ // E.g. log to an error logging client here
+ },
+});
diff --git a/apps/web/src/modules/developer/DataView/OrganizationsActivity/CodeMergeRatio.tsx b/apps/web/src/modules/developer/DataView/OrganizationsActivity/CodeMergeRatio.tsx
new file mode 100644
index 000000000..921be8ef2
--- /dev/null
+++ b/apps/web/src/modules/developer/DataView/OrganizationsActivity/CodeMergeRatio.tsx
@@ -0,0 +1,143 @@
+import React, { useMemo, useState } from 'react';
+import { CollaborationDevelopment } from '@modules/developer/components/SideBar/config';
+import BaseCard from '@common/components/BaseCard';
+import { useTranslation } from 'next-i18next';
+import Tab from '@common/components/Tab';
+import EChartX from '@common/components/EChartX';
+import { TransOpt } from '@modules/developer/type';
+import CardDropDownMenu from '@modules/developer/components/CardDropDownMenu';
+import {
+ ChartDataProvider,
+ ChartOptionProvider,
+ useCardManual,
+ useOptionBuilderFns,
+ getRatioLineBuilder,
+ getCompareStyleBuilder,
+} from '@modules/developer/options';
+
+const CodeMergeRatio = () => {
+ const { t } = useTranslation();
+
+ const tabOptions = [
+ { label: '创建PR', value: '1' },
+ { label: '合并PR', value: '2' },
+ ];
+
+ const chartTabs = {
+ '1': {
+ legendName: t('analyze:code_merge_ratio'),
+ xKey: 'grimoireCreationDate',
+ yKey: 'metricCodequality.codeMergeRatio',
+ summaryKey: 'summaryCodequality.codeMergeRatio',
+ },
+ '2': {
+ legendName: t('analyze:total_pr'),
+ xKey: 'grimoireCreationDate',
+ yKey: 'metricCodequality.prCount',
+ summaryKey: 'summaryCodequality.prCount',
+ },
+ '3': {
+ legendName: t('analyze:code_merge'),
+ xKey: 'grimoireCreationDate',
+ yKey: 'metricCodequality.codeMergedCount',
+ summaryKey: 'summaryCodequality.codeMergedCount',
+ },
+ };
+
+ type TabValue = keyof typeof chartTabs;
+ const [tab, setTab] = useState
+ setTab(v as TabValue)}
+ />
+
+
+ setTab(v as TabValue)}
+ />
+
+
+
+
+ {/*
+
*/}
+
+ );
+};
+
+export default withErrorBoundary(OrganizationsActivity, {
+ FallbackComponent: ErrorFallback,
+ onError(error, info) {
+ console.log(error, info);
+ // Do something with the error
+ // E.g. log to an error logging client here
+ },
+});
diff --git a/apps/web/src/modules/developer/DataView/OverviewSummary/Calendar/CalendarChart.tsx b/apps/web/src/modules/developer/DataView/OverviewSummary/Calendar/CalendarChart.tsx
new file mode 100644
index 000000000..0532e5a1d
--- /dev/null
+++ b/apps/web/src/modules/developer/DataView/OverviewSummary/Calendar/CalendarChart.tsx
@@ -0,0 +1,189 @@
+import React, { useMemo, useState } from 'react';
+import { ChartSummaryProps, getLineOption, line } from '@common/options';
+import { useTranslation } from 'next-i18next';
+import BaseCard from '@common/components/BaseCard';
+import EChartX from '@common/components/EChartX';
+import useMetricQueryData from '@modules/developer/hooks/useMetricQueryData';
+import transHundredMarkSystem from '@common/transform/transHundredMarkSystem';
+import { transDataForOverview } from '@common/transform/transDataForOverview';
+import { Topic } from '@modules/developer/components/SideBar/config';
+import ScoreConversion from '@modules/developer/components/ScoreConversion';
+import CardDropDownMenu from '@modules/developer/components/CardDropDownMenu';
+import { chartUserSettingState } from '@modules/developer/store';
+import { useSnapshot } from 'valtio';
+import ImageFallback from '@common/components/ImageFallback';
+import { TransOpt } from '@modules/developer/type';
+import Tab from '@common/components/Tab';
+
+const CalendarChart: React.FC
+ setTab(v as TabValue)}
+ />
+
+
+
+
+ );
+ }
+
+ return null;
+};
+
+const OverviewSummary = () => {
+ const { items, loading } = useMetricQueryData();
+ if (loading) {
+ return
+
+
+
+);
+export default withErrorBoundary(OverviewSummary, {
+ FallbackComponent: ErrorFallback,
+ onError(error, info) {
+ console.log(error, info);
+ // Do something with the error
+ // E.g. log to an error logging client here
+ },
+});
diff --git a/apps/web/src/modules/developer/DataView/OverviewSummary/Cloud/CalendarChart.tsx b/apps/web/src/modules/developer/DataView/OverviewSummary/Cloud/CalendarChart.tsx
new file mode 100644
index 000000000..2cd918e46
--- /dev/null
+++ b/apps/web/src/modules/developer/DataView/OverviewSummary/Cloud/CalendarChart.tsx
@@ -0,0 +1,178 @@
+import React, { useMemo, useState } from 'react';
+import { ChartSummaryProps, getLineOption, line } from '@common/options';
+import { useTranslation } from 'next-i18next';
+import BaseCard from '@common/components/BaseCard';
+import EChartX from '@common/components/EChartX';
+import useMetricQueryData from '@modules/developer/hooks/useMetricQueryData';
+import transHundredMarkSystem from '@common/transform/transHundredMarkSystem';
+import { transDataForOverview } from '@common/transform/transDataForOverview';
+import { Topic } from '@modules/developer/components/SideBar/config';
+import ScoreConversion from '@modules/developer/components/ScoreConversion';
+import CardDropDownMenu from '@modules/developer/components/CardDropDownMenu';
+import { chartUserSettingState } from '@modules/developer/store';
+import { useSnapshot } from 'valtio';
+import ImageFallback from '@common/components/ImageFallback';
+import { TransOpt } from '@modules/developer/type';
+import Tab from '@common/components/Tab';
+
+const CalendarChart: React.FC
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return null;
+};
+
+const OverviewSummary = () => {
+ const { items, loading } = useMetricQueryData();
+ if (loading) {
+ return
+
+
+
+);
+export default withErrorBoundary(OverviewSummary, {
+ FallbackComponent: ErrorFallback,
+ onError(error, info) {
+ console.log(error, info);
+ // Do something with the error
+ // E.g. log to an error logging client here
+ },
+});
diff --git a/apps/web/src/modules/developer/DataView/OverviewSummary/DeveloperDashboard/index.tsx b/apps/web/src/modules/developer/DataView/OverviewSummary/DeveloperDashboard/index.tsx
new file mode 100644
index 000000000..1892c4c43
--- /dev/null
+++ b/apps/web/src/modules/developer/DataView/OverviewSummary/DeveloperDashboard/index.tsx
@@ -0,0 +1,164 @@
+import React from 'react';
+import { useTranslation } from 'next-i18next';
+import { IoPeopleCircle, IoPersonCircle } from 'react-icons/io5';
+import useCompareItems from '@modules/developer/hooks/useCompareItems';
+import useQueryDateRange from '@modules/developer/hooks/useQueryDateRange';
+import {
+ useMetricDashboardQuery,
+ ContributorDetailOverview,
+} from '@oss-compass/graphql';
+import client from '@common/gqlClient';
+import { SiGitee, SiGithub } from 'react-icons/si';
+import { useRouter } from 'next/router';
+import { BiChat, BiGitPullRequest, BiGitCommit } from 'react-icons/bi';
+import {
+ AiFillClockCircle,
+ AiOutlineIssuesClose,
+ AiOutlineArrowRight,
+} from 'react-icons/ai';
+import { GoIssueOpened, GoGitPullRequestClosed, GoRepo } from 'react-icons/go';
+import CardDropDownMenu from '@modules/developer/components/CardDropDownMenu';
+import BaseCard from '@common/components/BaseCard';
+import { Topic } from '@modules/developer/components/SideBar/config';
+import Pie from '@modules/oh/components/Pie';
+
+const DeveloperDashboard = () => {
+ const { compareItems } = useCompareItems();
+ const len = compareItems.length;
+ if (len > 1) {
+ return null;
+ }
+ return ;
+};
+
+const Main = () => {
+ const { t } = useTranslation();
+ const { compareItems } = useCompareItems();
+ const { timeStart, timeEnd } = useQueryDateRange();
+ const router = useRouter();
+ const slugs = router.query.slugs;
+ const { label, level } = compareItems[0];
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ //
+ //
+ // );
+};
+
+const MetricBoxContributors = () => {
+ return (
+
+
+ );
+};
+const Loading = () => (
+
+
+
+
+
+
+
+
+ Commits
+ {523}
+
+
+
+
+
+
+ PRs
+ {56}
+
+
+
+
+
+
+ Issues
+ {129}
+
+
+
+
+
+
+ Code Reviews
+ {71}
+
+
+
+
+
+
+ Contributed to
+ {236}
+
+
+
+
+);
+const getIcons = (type: string) => {
+ switch (type) {
+ case 'github':
+ return
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Languages;
diff --git a/apps/web/src/modules/developer/DataView/OverviewSummary/Languages/index.tsx b/apps/web/src/modules/developer/DataView/OverviewSummary/Languages/index.tsx
new file mode 100644
index 000000000..07c5bfa28
--- /dev/null
+++ b/apps/web/src/modules/developer/DataView/OverviewSummary/Languages/index.tsx
@@ -0,0 +1,98 @@
+import React from 'react';
+import { MetricQuery, SummaryQuery } from '@oss-compass/graphql';
+import useMetricQueryData from '@modules/developer/hooks/useMetricQueryData';
+import { withErrorBoundary } from 'react-error-boundary';
+import ErrorFallback from '@common/components/ErrorFallback';
+import { Level } from '@modules/developer/constant';
+import Languages from './Languages';
+import CardDropDownMenu from '@modules/developer/components/CardDropDownMenu';
+import BaseCard from '@common/components/BaseCard';
+
+const Overview: React.FC<{
+ data: DeepReadonly<
+ { label: string; level: Level; result: MetricQuery | undefined }[]
+ >;
+}> = ({ data }) => {
+ if (data.length == 1) {
+ return (
+
+ {languages.map((lang, index) => {
+ return (
+
+ );
+ })}
+
+
+ {languages.map((lang, index) => {
+ return (
+
+
+
+ {lang.name} {' ' + lang.percentage + '%'}
+
+ );
+ })}
+
+
+);
+export default withErrorBoundary(OverviewSummary, {
+ FallbackComponent: ErrorFallback,
+ onError(error, info) {
+ console.log(error, info);
+ // Do something with the error
+ // E.g. log to an error logging client here
+ },
+});
diff --git a/apps/web/src/modules/developer/DataView/OverviewSummary/LineChart.tsx b/apps/web/src/modules/developer/DataView/OverviewSummary/LineChart.tsx
new file mode 100644
index 000000000..49c652966
--- /dev/null
+++ b/apps/web/src/modules/developer/DataView/OverviewSummary/LineChart.tsx
@@ -0,0 +1,132 @@
+import React, { useMemo, useState } from 'react';
+import { ChartSummaryProps, getLineOption, line } from '@common/options';
+import { useTranslation } from 'next-i18next';
+import BaseCard from '@common/components/BaseCard';
+import EChartX from '@common/components/EChartX';
+import useMetricQueryData from '@modules/developer/hooks/useMetricQueryData';
+import transHundredMarkSystem from '@common/transform/transHundredMarkSystem';
+import { transDataForOverview } from '@common/transform/transDataForOverview';
+import { Topic } from '@modules/developer/components/SideBar/config';
+import ScoreConversion from '@modules/developer/components/ScoreConversion';
+import CardDropDownMenu from '@modules/developer/components/CardDropDownMenu';
+import { chartUserSettingState } from '@modules/developer/store';
+import { useSnapshot } from 'valtio';
+import ImageFallback from '@common/components/ImageFallback';
+
+const LineChart: React.FC
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return null;
+};
+
+const OverviewSummary = () => {
+ const { items, loading } = useMetricQueryData();
+ if (loading) {
+ return
+
+
+
+);
+export default withErrorBoundary(OverviewSummary, {
+ FallbackComponent: ErrorFallback,
+ onError(error, info) {
+ console.log(error, info);
+ // Do something with the error
+ // E.g. log to an error logging client here
+ },
+});
diff --git a/apps/web/src/modules/developer/DataView/OverviewSummary/TopRepo/CalendarChart.tsx b/apps/web/src/modules/developer/DataView/OverviewSummary/TopRepo/CalendarChart.tsx
new file mode 100644
index 000000000..4237cf500
--- /dev/null
+++ b/apps/web/src/modules/developer/DataView/OverviewSummary/TopRepo/CalendarChart.tsx
@@ -0,0 +1,173 @@
+import React, { useMemo, useState } from 'react';
+import { ChartSummaryProps, getLineOption, line } from '@common/options';
+import { useTranslation } from 'next-i18next';
+import BaseCard from '@common/components/BaseCard';
+import EChartX from '@common/components/EChartX';
+import useMetricQueryData from '@modules/developer/hooks/useMetricQueryData';
+import transHundredMarkSystem from '@common/transform/transHundredMarkSystem';
+import { transDataForOverview } from '@common/transform/transDataForOverview';
+import { Topic } from '@modules/developer/components/SideBar/config';
+import ScoreConversion from '@modules/developer/components/ScoreConversion';
+import CardDropDownMenu from '@modules/developer/components/CardDropDownMenu';
+import { chartUserSettingState } from '@modules/developer/store';
+import { useSnapshot } from 'valtio';
+import ImageFallback from '@common/components/ImageFallback';
+import { TransOpt } from '@modules/developer/type';
+import Pie from './Pie';
+
+const CalendarChart: React.FC
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ //
+
+
+ );
+ }
+
+ return null;
+};
+
+const OverviewSummary = () => {
+ const { items, loading } = useMetricQueryData();
+ if (loading) {
+ return
+
+
+
+);
+export default withErrorBoundary(OverviewSummary, {
+ FallbackComponent: ErrorFallback,
+ onError(error, info) {
+ console.log(error, info);
+ // Do something with the error
+ // E.g. log to an error logging client here
+ },
+});
diff --git a/apps/web/src/modules/developer/DataView/OverviewSummary/index.tsx b/apps/web/src/modules/developer/DataView/OverviewSummary/index.tsx
new file mode 100644
index 000000000..b06484c94
--- /dev/null
+++ b/apps/web/src/modules/developer/DataView/OverviewSummary/index.tsx
@@ -0,0 +1,94 @@
+import React from 'react';
+import { MetricQuery, SummaryQuery } from '@oss-compass/graphql';
+import useMetricQueryData from '@modules/developer/hooks/useMetricQueryData';
+import { withErrorBoundary } from 'react-error-boundary';
+import ErrorFallback from '@common/components/ErrorFallback';
+import { Level } from '@modules/developer/constant';
+import DeveloperDashboard from './DeveloperDashboard';
+import Calendar from './Calendar';
+import Languages from './Languages';
+import LineChart from './LineChart';
+import TopRepo from './TopRepo';
+import Radar from './Radar';
+import Cloud from './Cloud';
+
+import ConnectLineMini from '@modules/developer/components/ConnectLineMini';
+
+const Overview: React.FC<{
+ data: DeepReadonly<
+ { label: string; level: Level; result: MetricQuery | undefined }[]
+ >;
+}> = ({ data }) => {
+ if (data.length == 1) {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+
+ return null;
+};
+
+const OverviewSummary = () => {
+ const { items, loading } = useMetricQueryData();
+ if (loading) {
+ return
+
+
+
+ );
+};
+const Loading = () => (
+
+
+);
+export default withErrorBoundary(OverviewSummary, {
+ FallbackComponent: ErrorFallback,
+ onError(error, info) {
+ console.log(error, info);
+ // Do something with the error
+ // E.g. log to an error logging client here
+ },
+});
diff --git a/apps/web/src/modules/developer/DataView/RepoDataView/CodeMergeRatio.tsx b/apps/web/src/modules/developer/DataView/RepoDataView/CodeMergeRatio.tsx
new file mode 100644
index 000000000..ab894d85e
--- /dev/null
+++ b/apps/web/src/modules/developer/DataView/RepoDataView/CodeMergeRatio.tsx
@@ -0,0 +1,148 @@
+import React, { useMemo, useState } from 'react';
+import { CollaborationDevelopment } from '@modules/developer/components/SideBar/config';
+import BaseCard from '@common/components/BaseCard';
+import { useTranslation } from 'next-i18next';
+import Tab from '@common/components/Tab';
+import EChartX from '@common/components/EChartX';
+import { TransOpt } from '@modules/developer/type';
+import CardDropDownMenu from '@modules/developer/components/CardDropDownMenu';
+import {
+ ChartDataProvider,
+ ChartOptionProvider,
+ useCardManual,
+ useOptionBuilderFns,
+ getRatioLineBuilder,
+ getCompareStyleBuilder,
+} from '@modules/developer/options';
+
+const CodeMergeRatio = () => {
+ const { t } = useTranslation();
+
+ const tabOptions = [
+ { label: t('analyze:code_merge_ratio'), value: '1' },
+ { label: t('analyze:total_pr'), value: '2' },
+ { label: t('analyze:code_merge'), value: '3' },
+ ];
+
+ const chartTabs = {
+ '1': {
+ legendName: t('analyze:code_merge_ratio'),
+ xKey: 'grimoireCreationDate',
+ yKey: 'metricCodequality.codeMergeRatio',
+ summaryKey: 'summaryCodequality.codeMergeRatio',
+ },
+ '2': {
+ legendName: t('analyze:total_pr'),
+ xKey: 'grimoireCreationDate',
+ yKey: 'metricCodequality.prCount',
+ summaryKey: 'summaryCodequality.prCount',
+ },
+ '3': {
+ legendName: t('analyze:code_merge'),
+ xKey: 'grimoireCreationDate',
+ yKey: 'metricCodequality.codeMergedCount',
+ summaryKey: 'summaryCodequality.codeMergedCount',
+ },
+ };
+
+ type TabValue = keyof typeof chartTabs;
+ const [tab, setTab] = useState
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ setTab(v as TabValue)}
+ />
+
+
+ setTab(v as TabValue)}
+ />
+
+
+ setTab(v as TabValue)}
+ />
+
+
+
+
+
+ handleClick(e)}
+ >
+ {typeMap[type]}
+
+
+ {Object.keys(typeMap).map((item, i) => {
+ return (
+
+ {
+ onTypeChange(item);
+ setOpen(() => false);
+ }}
+ >
+
+ {typeMap[item]}
+
+
+ );
+ })}
+
+
+
+ );
+};
+
+const PRE_PAGE = 9;
+
+const CommunityRepos = () => {
+ const [page, setPage] = useState(1);
+ const { compareItems } = useCompareItems();
+ const { t } = useTranslation();
+ const [firstItem] = compareItems;
+ const [type, setType] = useState('all');
+
+ const { data, isLoading } = useCommunityReposQuery(
+ client,
+ {
+ label: firstItem?.label,
+ page: page,
+ per: PRE_PAGE,
+ type: type === 'all' ? '' : type,
+ },
+ { enabled: Boolean(firstItem?.label) }
+ );
+
+ const trends = data?.communityOverview?.trends || [];
+ const count = data?.communityOverview?.projectsCount || 0;
+ const totalPage = Math.ceil(count / PRE_PAGE);
+
+ return (
+ {name}
+ +{getFirstPathSegment(path)}
+
+ {type === 'governance' ? (
+
+
+ {t('analyze:repos_type:governance_repository')}
+
+ ) : (
+
+ {t('analyze:repos_type:software_artifact_repository')}
+
+ )}
+
+ (
+ {
+ setType(b);
+ setPage(1);
+ }}
+ />
+ )}
+ >
+
+
+ );
+};
+
+export default CommunityRepos;
diff --git a/apps/web/src/modules/developer/DataView/RepoDataView/ContributorCount.tsx b/apps/web/src/modules/developer/DataView/RepoDataView/ContributorCount.tsx
new file mode 100644
index 000000000..b40306793
--- /dev/null
+++ b/apps/web/src/modules/developer/DataView/RepoDataView/ContributorCount.tsx
@@ -0,0 +1,140 @@
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'next-i18next';
+import { CollaborationDevelopment } from '@modules/developer/components/SideBar/config';
+import BaseCard from '@common/components/BaseCard';
+import Tab from '@common/components/Tab';
+import EChartX from '@common/components/EChartX';
+import { ChartDataProvider } from '@modules/developer/options';
+import ChartOptionContainer from '@modules/developer/components/Container/ChartOptionContainer';
+import { TransOpt } from '@modules/developer/type';
+
+import useGetLineOption from '@modules/developer/hooks/useGetLineOption';
+import CardDropDownMenu from '@modules/developer/components/CardDropDownMenu';
+
+const ContributorCount = () => {
+ const { t } = useTranslation();
+ const [tab, setTab] = useState
+ {trends.map((repo) => {
+ return (
+
+ {totalPage > 1 && (
+
+ {
+ setPage(p);
+ }}
+ />
+
+ )}
+
+
+ {({ loading, result }) => {
+ return (
+
+ {({ option }) => {
+ return (
+
+ );
+ }}
+
+
+ );
+ }}
+
+ setTab(v as TabValue)}
+ />
+
+
+ setTab(v as TabValue)}
+ />
+
+
+ setTab(v as TabValue)}
+ />
+
+
+
+ {/*
+
+
*/}
+
+ );
+};
+
+export default withErrorBoundary(CollaborationDevelopmentIndexOverview, {
+ FallbackComponent: ErrorFallback,
+ onError(error, info) {
+ console.log(error, info);
+ // Do something with the error
+ // E.g. log to an error logging client here
+ },
+});
diff --git a/apps/web/src/modules/developer/DataView/Status/ErrorAnalysis.tsx b/apps/web/src/modules/developer/DataView/Status/ErrorAnalysis.tsx
new file mode 100644
index 000000000..f77f846df
--- /dev/null
+++ b/apps/web/src/modules/developer/DataView/Status/ErrorAnalysis.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useTranslation } from 'next-i18next';
+
+const ErrorAnalysis = () => {
+ const { t } = useTranslation();
+ return (
+
+
+ );
+};
+
+export default ErrorAnalysis;
diff --git a/apps/web/src/modules/developer/DataView/Status/LoadingAnalysis.tsx b/apps/web/src/modules/developer/DataView/Status/LoadingAnalysis.tsx
new file mode 100644
index 000000000..baebdcc10
--- /dev/null
+++ b/apps/web/src/modules/developer/DataView/Status/LoadingAnalysis.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+const LoadingAnalysis = () => (
+ + {t('common:error.invalid_url_query')} +
+ + + {t('analyze:explore_other_projects')} + +
+
+);
+
+export default LoadingAnalysis;
diff --git a/apps/web/src/modules/developer/DataView/Status/NotFoundAnalysis.tsx b/apps/web/src/modules/developer/DataView/Status/NotFoundAnalysis.tsx
new file mode 100644
index 000000000..78b76e7a1
--- /dev/null
+++ b/apps/web/src/modules/developer/DataView/Status/NotFoundAnalysis.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import Link from 'next/link';
+import { useTranslation } from 'next-i18next';
+
+const NotFoundAnalysis = () => {
+ const { t } = useTranslation();
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default NotFoundAnalysis;
diff --git a/apps/web/src/modules/developer/DataView/Status/UnderAnalysis.tsx b/apps/web/src/modules/developer/DataView/Status/UnderAnalysis.tsx
new file mode 100644
index 000000000..fab1076b9
--- /dev/null
+++ b/apps/web/src/modules/developer/DataView/Status/UnderAnalysis.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { useTranslation } from 'next-i18next';
+
+const UnderAnalysis = () => {
+ const { t } = useTranslation();
+ return (
+ + {t('common:error.url_404')} +
+ + + {t('analyze:explore_other_projects')} + +
+
+ );
+};
+
+export default UnderAnalysis;
diff --git a/apps/web/src/modules/developer/DataView/Status/index.tsx b/apps/web/src/modules/developer/DataView/Status/index.tsx
new file mode 100644
index 000000000..a7592bd73
--- /dev/null
+++ b/apps/web/src/modules/developer/DataView/Status/index.tsx
@@ -0,0 +1,4 @@
+export { default as ErrorAnalysis } from './ErrorAnalysis';
+export { default as LoadingAnalysis } from './LoadingAnalysis';
+export { default as NotFoundAnalysis } from './NotFoundAnalysis';
+export { default as UnderAnalysis } from './UnderAnalysis';
diff --git a/apps/web/src/modules/developer/DataView/index.tsx b/apps/web/src/modules/developer/DataView/index.tsx
new file mode 100644
index 000000000..ef71ff119
--- /dev/null
+++ b/apps/web/src/modules/developer/DataView/index.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { useStatusContext } from '@modules/developer/context';
+import { checkIsPending } from '@modules/developer/constant';
+import UnderAnalysis from './Status/UnderAnalysis';
+import NotFoundAnalysis from './Status/NotFoundAnalysis';
+import LoadingAnalysis from './Status/LoadingAnalysis';
+import Charts from './Charts';
+
+const DataView = () => {
+ const { notFound, isLoading, status } = useStatusContext();
+
+ if (isLoading) {
+ return
+
+ + {t('analyze:the_current_project_is_under_analysis_please_visit')} +
+ + {t('analyze:explore_other_projects')} + +
+
+ );
+};
+
+export default DataView;
diff --git a/apps/web/src/modules/developer/components/Badge.tsx b/apps/web/src/modules/developer/components/Badge.tsx
new file mode 100644
index 000000000..97239376a
--- /dev/null
+++ b/apps/web/src/modules/developer/components/Badge.tsx
@@ -0,0 +1,276 @@
+import React, { useState } from 'react';
+import cn from 'classnames';
+import { useRouter } from 'next/router';
+import { useCountDown } from 'ahooks';
+import { useTranslation } from 'next-i18next';
+import { GrClose } from 'react-icons/gr';
+import classnames from 'classnames';
+import Dialog from '@mui/material/Dialog';
+import { BiCopy } from 'react-icons/bi';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import { toast } from 'react-hot-toast';
+import { Transition } from '@common/components/Dialog';
+import Tooltip from '@common//components/Tooltip';
+import * as RadioGroup from '@radix-ui/react-radio-group';
+
+const queryMap = {
+ COLLAB_DEV_INDEX: 'collab_dev_index',
+ COMMUNITY: 'community',
+ ACTIVITY: 'activity',
+ ORGANIZATIONS_ACTIVITY: 'organizations_activity',
+};
+
+const anchorList = [
+ {
+ badgeUrlQuery: queryMap.COLLAB_DEV_INDEX,
+ anchor: 'collaboration_development_index',
+ },
+ {
+ badgeUrlQuery: queryMap.COMMUNITY,
+ anchor: 'community_service_support',
+ },
+ {
+ badgeUrlQuery: queryMap.ACTIVITY,
+ anchor: 'community_activity',
+ },
+ {
+ badgeUrlQuery: queryMap.ORGANIZATIONS_ACTIVITY,
+ anchor: 'organizations_activity',
+ },
+];
+
+const Badge = () => {
+ const { t } = useTranslation();
+ const router = useRouter();
+ const slug = router.query.slugs as string;
+ const badgeLinks = {
+ logo: `/badge/${slug}.svg`,
+ collab_dev_index: `/badge/${slug}.svg?metric=${queryMap.COLLAB_DEV_INDEX}`,
+ community: `/badge/${slug}.svg?metric=${queryMap.COMMUNITY}`,
+ activity: `/badge/${slug}.svg?metric=${queryMap.ACTIVITY}`,
+ organizations_activity: `/badge/${slug}.svg?metric=${queryMap.ORGANIZATIONS_ACTIVITY}`,
+ };
+
+ const [open, setOpen] = useState(false);
+
+ const [badgeSrc, setBadgeSrc] = useState(badgeLinks.logo);
+
+ return (
+ <>
+
+ {t('analyze:function_menu')}
+
+ {
+ setOpen(true);
+ }}
+ >
+ {t('analyze:badge.title')}
+
+
+
+
+ );
+};
+
+const BadgeItem = ({ activeSrc, src }: { activeSrc: string; src: string }) => {
+ const isChecked = activeSrc === src;
+ return (
+
+
+
+
+
+ );
+};
+
+const getMarkdownAnchorLink = (badgeSrc: string) => {
+ const url = window.origin + window.location.pathname;
+ const item = anchorList.find((i) => badgeSrc.endsWith(i.badgeUrlQuery));
+ if (!item) {
+ return url;
+ }
+ return `${url}#${item.anchor}`;
+};
+
+const TabPanel = ({ badgeSrc }: { badgeSrc: string }) => {
+ const { t } = useTranslation();
+ const [tab, setTab] = React.useState('Markdown');
+ const [targetDate, setTargetDate] = useState
+
+
+
+
+ );
+};
+
+export default Badge;
diff --git a/apps/web/src/modules/developer/components/CardDropDownMenu.tsx b/apps/web/src/modules/developer/components/CardDropDownMenu.tsx
new file mode 100644
index 000000000..cbb48d1b6
--- /dev/null
+++ b/apps/web/src/modules/developer/components/CardDropDownMenu.tsx
@@ -0,0 +1,206 @@
+import React, { RefObject } from 'react';
+import { useTranslation } from 'react-i18next';
+import { BsThreeDots } from 'react-icons/bs';
+import { AiOutlineLoading } from 'react-icons/ai';
+import Popper from '@mui/material/Popper';
+import { ClickAwayListener } from '@mui/base/ClickAwayListener';
+import Average from 'public/images/analyze/average.svg';
+import Median from 'public/images/analyze/median.svg';
+import YScale from 'public/images/analyze/y-scale.svg';
+import classnames from 'classnames';
+import { BiFullscreen, BiExitFullscreen } from 'react-icons/bi';
+import DownCardLoadImage from './DownCardLoadImage';
+import DownloadAndShare from './DownloadAndShare';
+import { subscribeKey } from 'valtio/utils';
+import { chartUserSettingState } from '@modules/developer/store';
+
+interface CardDropDownMenuProps {
+ downloadImageSize?: 'middle' | 'full';
+ cardRef: RefObject{source}
+ {
+ if (navigator.clipboard?.writeText) {
+ navigator.clipboard
+ .writeText(source)
+ .then((value) => {
+ setTargetDate(Date.now() + 800);
+ })
+ .catch((err) => {
+ toast.error('Failed！No copy permission');
+ });
+ } else {
+ toast.error('Failed！ Not Supported clipboard');
+ }
+ }}
+ >
+
+ {
+ onAvgChange?.(!showAvg);
+ }}
+ >
+
+ {
+ onMedianChange?.(!showMedian);
+ }}
+ >
+
+
+ ) : null;
+
+ const LineSetting = enableLineSettingSwitch ? (
+ {
+ onYAxisScaleChange?.(!yAxisScale);
+ }}
+ >
+
+ ) : null;
+
+ const FullScreen = (
+ {
+ props.onFullScreen(!props.fullScreen);
+ setOpen((previousOpen) => !previousOpen);
+ }}
+ >
+ {props.fullScreen ? (
+ <>
+
+ );
+
+ return (
+ <>
+
+
+
+
+ {/* {loadingDownLoadImg && (
+ {
+ setLoadingDownLoadImg(false);
+ }}
+ />
+ )} */}
+
+ handleClick(e)}
+ >
+
+
+ {ReferenceNode}
+ {LineSetting}
+
+
+
+ );
+ }
+
+ return (
+ <>
+ {typeof children === 'function'
+ ? children({ loading, isEmpty, option: echartsOpts })
+ : children}
+
+ {EmptyNode}
+
+ );
+};
+
+export default ChartWithData;
diff --git a/apps/web/src/modules/developer/components/CompareBar/AddInput.tsx b/apps/web/src/modules/developer/components/CompareBar/AddInput.tsx
new file mode 100644
index 000000000..0311babda
--- /dev/null
+++ b/apps/web/src/modules/developer/components/CompareBar/AddInput.tsx
@@ -0,0 +1,173 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'next-i18next';
+import { useRouter } from 'next/router';
+import SearchDropdown from './SearchDropdown';
+import { useThrottle } from 'ahooks';
+import { useClickAway } from 'react-use';
+import gsap from 'gsap';
+import { SearchQuery, useSearchQuery } from '@oss-compass/graphql';
+import client from '@common/gqlClient';
+import { AiOutlineLoading, AiOutlinePlus } from 'react-icons/ai';
+import { Level } from '@modules/developer/constant';
+import useCompareItems from '@modules/developer/hooks/useCompareItems';
+import { removeHttps } from '@common/utils';
+import { compareIdsAdd } from '@common/utils/links';
+import { getRouteAsPath } from '@common/utils/url';
+import qs from 'query-string';
+
+const checkLevel = (shortId: string) => {
+ if (shortId.startsWith('s')) {
+ return Level.REPO;
+ }
+ if (shortId.startsWith('c')) {
+ return Level.REPO;
+ }
+ return Level.REPO;
+};
+
+const AddInput = () => {
+ const { t } = useTranslation();
+ const search = window.location.search;
+ const ref = useRef+ {t('analyze:there_is_currently_no_data_in_the_chart')} +
+
+
+
+ );
+};
+
+export default AddInput;
diff --git a/apps/web/src/modules/developer/components/CompareBar/ColorSwitcher.tsx b/apps/web/src/modules/developer/components/CompareBar/ColorSwitcher.tsx
new file mode 100644
index 000000000..9f2ddc8d6
--- /dev/null
+++ b/apps/web/src/modules/developer/components/CompareBar/ColorSwitcher.tsx
@@ -0,0 +1,142 @@
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react';
+import {
+ ChartThemeState,
+ chartThemeState,
+ updateThemeColor,
+} from '@modules/developer/store';
+import { useClickAway, useHoverDirty, useLocalStorage } from 'react-use';
+import { CgColorPicker } from 'react-icons/cg';
+import { DefaultIndex, getPalette, colors } from '@common/options/color';
+import CPTooltip from '@common/components/Tooltip';
+import { getNameSpace } from '@common/utils';
+import { useSnapshot } from 'valtio';
+import Popper from '@mui/material/Popper';
+
+const getColor = (label: string, theme: DeepReadonly
+
+
+
+
+
+ {
+ setKeyword(v.target.value);
+ setConfirmItem(null);
+ }}
+ />
+
+
+ {!confirmItem && throttledKeyword && (
+
+
+ )}
+
+ {
+ setConfirmItem(item);
+ }}
+ />
+
+ {
+ const tl = gsap.timeline();
+ tl.to(q('#add-compare-btn'), { display: 'none', duration: 0 });
+ tl.to(ref.current, {
+ width: 450,
+ duration: 0.15,
+ });
+ tl.to(q('#search-input'), { display: 'flex', duration: 0 });
+ tl.to(q('#search-input'), { left: 0, duration: 0.15 });
+
+ tl.eventCallback('onComplete', () => {
+ inputRef.current?.focus();
+ });
+ }}
+ >
+
+ {t('analyze:compare')}
+
+
+
+ {/* {popoverVisible && (
+
+ );
+};
+
+export default ColorSwitcher;
diff --git a/apps/web/src/modules/developer/components/CompareBar/CompareItem.tsx b/apps/web/src/modules/developer/components/CompareBar/CompareItem.tsx
new file mode 100644
index 000000000..5cd5f86d8
--- /dev/null
+++ b/apps/web/src/modules/developer/components/CompareBar/CompareItem.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import { Level } from '@modules/developer/constant';
+import classnames from 'classnames';
+import { getLastPathSegment } from '@common/utils';
+import { compareIdsRemove } from '@common/utils/links';
+import { getRouteAsPath } from '@common/utils/url';
+import ColorSwitcher from '@modules/developer/components/CompareBar/ColorSwitcher';
+import useCompareItems from '@modules/developer/hooks/useCompareItems';
+import { useRouter } from 'next/router';
+import { AiOutlineClose } from 'react-icons/ai';
+import qs from 'query-string';
+
+type CompareItemProps = {
+ label: string;
+ name: string;
+ level: Level;
+ shortCode: string;
+};
+
+const CloseIcons: React.FC
+
+
+ {showPickGuideIcon && (
+
+ {
+ setAnchorEl(event.currentTarget);
+ setPopoverVisible(true);
+ }}
+ >
+
+
+
+
+ {showPickGuideIcon && (
+
+ {getNameSpace(label)}
+
+ )}
+
+ {colors.map((c, index) => (
+
+ {
+ updateThemeColor({ label, paletteIndex: index });
+ setPopoverVisible(false);
+ }}
+ >
+
+
+ ))}
+
+ {colors.map((c, index) => (
+
+ )} */}
+ {
+ updateThemeColor({ label, paletteIndex: index });
+ setPopoverVisible(false);
+ }}
+ >
+
+
+ ))}
+ {
+ const p = compareIdsRemove(compareSlugs, shortCode);
+ const searchResult = qs.parse(window.location.search) || {};
+ if (p.indexOf('..') > -1) {
+ await router.push(
+ getRouteAsPath(router.route, { slugs: p, ...searchResult })
+ );
+ return;
+ }
+ await router.push(
+ getRouteAsPath(router.route, { slugs: p, ...searchResult })
+ );
+ }}
+ >
+
+ );
+};
+
+const CompareItem: React.FC<{
+ item: CompareItemProps;
+ showCloseIcon: boolean;
+ showColorSwitch: boolean;
+ showGuideTips?: boolean;
+ className?: string;
+}> = (props) => {
+ const {
+ item,
+ showColorSwitch,
+ showCloseIcon,
+ className,
+ showGuideTips = false,
+ } = props;
+ return (
+
+ {showCloseIcon &&
+ );
+};
+
+export default CompareItem;
diff --git a/apps/web/src/modules/developer/components/CompareBar/SearchDropdown.tsx b/apps/web/src/modules/developer/components/CompareBar/SearchDropdown.tsx
new file mode 100644
index 000000000..c9301670b
--- /dev/null
+++ b/apps/web/src/modules/developer/components/CompareBar/SearchDropdown.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import classnames from 'classnames';
+import Empty from '@common/components/Empty';
+import useDropDown from '@common/hooks/useDropDown';
+import { SearchQuery } from '@oss-compass/graphql';
+import { removeHttps } from '@common/utils';
+import CollectionTag from '@common/components/CollectionTag';
+
+const DropDownList: React.FC<{
+ result: SearchQuery['fuzzySearch'];
+ onConfirm: (item: SearchQuery['fuzzySearch'][number]) => void;
+}> = ({ result, onConfirm }) => {
+ const { active } = useDropDown({
+ totalLength: result.length,
+ onPressEnter: () => {
+ const cp = result[active];
+ onConfirm(cp);
+ },
+ });
+
+ return (
+ <>
+ {result.map((item, index) => {
+ return (
+
+ {getLastPathSegment(item.label)}
+
+ {showColorSwitch && (
+ {
+ onConfirm(item);
+ }}
+ className="flex w-max"
+ >
+
+ {removeHttps(item.label!)}
+
+
+ );
+ })}
+
+ );
+};
+
+const SearchDropdown: React.FC<{
+ result: SearchQuery['fuzzySearch'];
+ onConfirm: (item: SearchQuery['fuzzySearch'][number]) => void;
+}> = ({ result, onConfirm }) => {
+ if (!result) return
+ {lab && (
+
+ );
+};
+
+export default withErrorBoundary(CompareBar, {
+ FallbackComponent: ErrorFallback,
+ onError(error, info) {
+ console.log(error, info);
+ // Do something with the error
+ // E.g. log to an error logging client here
+ },
+});
diff --git a/apps/web/src/modules/developer/components/ConnectLine.tsx b/apps/web/src/modules/developer/components/ConnectLine.tsx
new file mode 100644
index 000000000..835db619e
--- /dev/null
+++ b/apps/web/src/modules/developer/components/ConnectLine.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+const ConnectLine = () => {
+ return (
+
+ );
+};
+
+export default ConnectLine;
diff --git a/apps/web/src/modules/developer/components/ConnectLineMini.tsx b/apps/web/src/modules/developer/components/ConnectLineMini.tsx
new file mode 100644
index 000000000..b817549b3
--- /dev/null
+++ b/apps/web/src/modules/developer/components/ConnectLineMini.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+
+const ConnectLineMini = () => {
+ return (
+
+ Lab
+
+ )}
+
+
+
+ {compareItems.map((item, index) => {
+ return (
+ 1}
+ showColorSwitch={len > 1}
+ showGuideTips={index === 0 && breakpoint === 'lg'}
+ className={classnames({
+ 'rounded-tl-lg rounded-bl-lg !border-l-0': index === 0,
+ '!pt-6': lab,
+ // 'text-center': len == 1,
+ })}
+ />
+ );
+ })}
+
+
+
+
+ );
+};
+
+export default ConnectLineMini;
diff --git a/apps/web/src/modules/developer/components/Container/AnalyzeContainer.tsx b/apps/web/src/modules/developer/components/Container/AnalyzeContainer.tsx
new file mode 100644
index 000000000..831c7b0b6
--- /dev/null
+++ b/apps/web/src/modules/developer/components/Container/AnalyzeContainer.tsx
@@ -0,0 +1,21 @@
+import React, { PropsWithChildren, useEffect } from 'react';
+import useLabelStatus from '@modules/developer/hooks/useLabelStatus';
+import { StatusContextProvider } from '@modules/developer/context';
+import PageInfoInit from '@modules/developer/components/PageInfoInit';
+import NoSsr from '@common/components/NoSsr';
+
+const AnalyzeContainer: React.FC+ {title} + + + # + + +
+ { + onFullScreen(!fullScreen); + }} + > + {fullScreen ?{description}
+ + ); +}; + +export default DefaultCardHead; diff --git a/apps/web/src/modules/developer/components/DistributionMap/EChartGlOpt.ts b/apps/web/src/modules/developer/components/DistributionMap/EChartGlOpt.ts new file mode 100644 index 000000000..a05c1449c --- /dev/null +++ b/apps/web/src/modules/developer/components/DistributionMap/EChartGlOpt.ts @@ -0,0 +1,415 @@ +import React, { useMemo } from 'react'; +import { useTranslation } from 'next-i18next'; +import useQueryMetricType from '@modules/developer/hooks/useQueryMetricType'; +import { useMetricModelsOverviewQuery } from '@oss-compass/graphql'; +import client from '@common/gqlClient'; +import useLabelStatus from '@modules/developer/hooks/useLabelStatus'; +import { chartUserSettingState } from '@modules/developer/store'; +import { useSnapshot } from 'valtio'; +import { Level } from '@modules/developer/constant'; + +export const useEchartsGlOpts = () => { + const { t } = useTranslation(); + const topicType = useQueryMetricType(); + const isContributor = topicType === 'contributor'; + const { verifiedItems } = useLabelStatus(); + const { label, level } = verifiedItems[0]; + const snap = useSnapshot(chartUserSettingState); + const repoType = snap.repoType; + const { data, isLoading } = useMetricModelsOverviewQuery(client, { + label: label, + level: level, + repoType: level === Level.COMMUNITY ? repoType : null, + }); + const type = [ + t('analyze:collaboration'), + t('analyze:collaboration'), + t('analyze:collaboration'), + t('analyze:contributor'), + t('analyze:contributor'), + t('analyze:contributor'), + t('analyze:software'), + t('analyze:software'), + t('analyze:software'), + ]; + const contributorType = [ + t('analyze:contributor'), + t('analyze:contributor'), + t('analyze:contributor'), + t('analyze:collaboration'), + t('analyze:collaboration'), + t('analyze:collaboration'), + t('analyze:software'), + t('analyze:software'), + t('analyze:software'), + ]; + const dimension = [ + t('analyze:topic:productivity'), + t('analyze:topic:productivity'), + t('analyze:topic:productivity'), + t('analyze:topic:niche_creation'), + t('analyze:topic:niche_creation'), + t('analyze:topic:niche_creation'), + t('analyze:topic:robustness'), + t('analyze:topic:robustness'), + t('analyze:topic:robustness'), + ]; + const color = ['#93AAFC', '#87D8F8', '#B193FC']; + const disableColor = '#d4d4d4'; + const areaColor = [ + 'rgba(255,247,207,0.5)', + 'rgba(255,231,231,0.5)', + 'rgba(226,226,226,0.5)', + ]; + const contributorAreaColor = [ + 'rgba(255,231,231,0.5)', + 'rgba(255,247,207,0.5)', + 'rgba(226,226,226,0.5)', + ]; + const models = [ + { + name: t('analyze:all_model:collaboration_development_index'), + key: 'collab_dev_index', + value: [0, 1, 0], + itemStyle: { color: color[0] }, + disable: false, + scope: 'collaboration', + }, + { + name: t('analyze:all_model:community_service_and_support'), + key: 'community', + value: [2, 1, 0], + itemStyle: { color: color[0] }, + disable: false, + scope: 'collaboration', + }, + { + name: t('analyze:all_model:community_activity'), + key: 'activity', + value: [7, 1, 0], + itemStyle: { color: color[1] }, + disable: false, + scope: 'collaboration', + }, + { + name: t('analyze:all_model:organization_activity'), + key: 'organizations_activity', + value: [4, 1, 0], + itemStyle: { color: color[2] }, + disable: false, + scope: 'collaboration', + }, + { + name: t('analyze:all_model:contributors_domain_persona'), + key: 'domain_persona', + value: [0, 4, 0], + itemStyle: { color: color[0] }, + disable: false, + scope: 'contributor', + }, + { + name: t('analyze:all_model:contributors_role_persona'), + key: 'role_persona', + value: [1, 4, 0], + itemStyle: { color: color[0] }, + disable: false, + scope: 'contributor', + }, + { + name: t('analyze:all_model:contributors_milestone_persona'), + key: 'milestone_persona', + value: [2, 4, 0], + itemStyle: { color: color[0] }, + disable: false, + scope: 'contributor', + }, + { + name: t('analyze:all_model:contributor_route'), + key: 'contributor_route', + value: [4, 4, 30], + itemStyle: { color: color[1] }, + disable: true, + scope: 'contributor', + }, + { + name: t('analyze:all_model:contributor_reputation'), + key: 'contributor_reputation', + value: [6, 4, 30], + itemStyle: { color: color[2] }, + disable: true, + scope: 'contributor', + }, + { + name: t('analyze:all_model:user_reputation'), + key: 'user_reputation', + value: [8, 4, 40], + itemStyle: { color: color[2] }, + disable: true, + scope: 'contributor', + }, + { + name: t('analyze:all_model:software_quality'), + key: 'software_quality', + value: [0, 7, 50], + itemStyle: { color: color[0] }, + disable: true, + scope: 'software', + }, + { + name: t('analyze:all_model:software_usage_quality'), + key: 'software_usage_quality', + value: [1, 7, 40], + itemStyle: { color: color[0] }, + disable: true, + scope: 'software', + }, + { + name: t('analyze:all_model:document_quality'), + key: 'document_quality', + value: [2, 7, 60], + itemStyle: { color: color[0] }, + disable: true, + scope: 'software', + }, + { + name: t('analyze:all_model:northbound_adoption'), + key: 'northbound_adoption', + value: [3, 7, 30], + itemStyle: { color: color[1] }, + disable: true, + scope: 'software', + }, + { + name: t('analyze:all_model:south_fit'), + key: 'south_fit', + value: [5, 7, 30], + itemStyle: { color: color[1] }, + disable: true, + scope: 'software', + }, + { + name: t('analyze:all_model:security'), + key: 'security', + value: [6, 7, 60], + itemStyle: { color: color[2] }, + disable: true, + scope: 'software', + }, + { + name: t('analyze:all_model:compliance'), + key: 'compliance', + value: [8, 7, 40], + itemStyle: { color: color[2] }, + disable: true, + scope: 'software', + }, + ]; + const yAxis3D = isContributor ? contributorType : type; + const areaStyle = isContributor ? contributorAreaColor : areaColor; + const seriesData = models.map( + ({ key, value, itemStyle, scope, name, disable }) => { + if (isContributor) { + if (scope === 'collaboration') { + value = [value[0], value[1] + 3, value[2]]; + } else if (scope === 'contributor') { + value = [value[0], value[1] - 3, value[2]]; + } + } + const row = data?.metricModelsOverview.find((i) => i.ident === key); + if (row) { + value = [value[0], value[1], row.transformedScore]; + return { name, value, itemStyle }; + } else { + // value = [value[0], value[1], row.mainScore * 10]; + if (disable) { + itemStyle.color = disableColor; + return { name, value, itemStyle, disable: true }; + } + return { name, value, itemStyle, calc: true }; + } + } + ); + const echartsOpts = { + tooltip: { + textStyle: { + fontWeight: 'bolder', + }, + formatter: (params) => { + if (params.data.calc) { + return params.name + ': ' + t('analyze:statistics'); + } else if (params.data.disable) { + return params.name + ': ' + t('analyze:coming_soon'); + } else { + return params.name + ': ' + params.data.value[2]; + } + }, + }, + xAxis3D: { + name: ' ', + type: 'category', + data: dimension, + axisLine: { + lineStyle: { width: 1 }, + }, + axisLabel: { + interval: 2, + textStyle: { + fontSize: 10, + color: '#aaa', + }, + formatter: (index) => { + return ' ' + index; + }, + }, + splitLine: { + show: true, + interval: 2, + }, + axisTick: { + interval: 2, + length: 1, + }, + }, + zAxis3D: { + name: ' ', + type: 'value', + splitNumber: 4, + axisLine: { + lineStyle: { width: 0.1, opacity: 0.5 }, + }, + splitArea: { + show: true, + areaStyle: { + color: ['#ffffff', '#ffffff', '#ffffff'], + }, + }, + axisLabel: { + show: false, + }, + axisTick: { + show: false, + }, + }, + yAxis3D: { + name: ' ', + type: 'category', + data: yAxis3D, + axisLine: { + lineStyle: { width: 1 }, + }, + axisTick: { + interval: 2, + length: 1, + }, + splitArea: { + show: true, + areaStyle: { + color: areaStyle, + }, + }, + axisLabel: { + interval: 2, + textStyle: { + fontSize: 10, + color: '#aaa', + }, + }, + }, + series: [ + { + type: 'bar3D', + data: seriesData, + shading: 'realistic', + //金属质感，配合 ambientCubemap 使用 + // realisticMaterial: { + // roughness: 0.2, + // metalness: 1 + // }, + bevelSize: 0.1, + bevelSmoothness: 2, + barSize: 13, + label: { + show: false, + fontSize: 12, + fontWeight: 500, + borderWidth: 1, + color: '#333', + distance: -20, + // formatter: function (params) { + // var value = params.name; + // // 将超过指定字数的标签用 \n 换行 + // var maxLength = 2; // 指定字数 + // var rows = Math.ceil(value.length / maxLength); // 计算需要换几行 + // var result = '\n'; + // for (var i = 0; i < rows; i++) { + // var start = i * maxLength; + // var end = start + maxLength; + // result += value.substring(start, end) + '\n'; + // } + // return result; + // }, + }, + itemStyle: { + opacity: 0.95, + }, + //柱子高亮状态 + emphasis: { + label: { + show: false, + }, + itemStyle: { + color: '#FFB800', + opacity: 0.7, + }, + }, + }, + ], + grid3D: { + axisLine: { + interval: 1, + }, + //参考线 + axisPointer: { + //show: false, + lineStyle: { opacity: 0.2 }, + label: { show: false }, + }, + splitLine: { interval: 2 }, + //初始化摄像机视角 + viewControl: { + //透视与正交切换 perspective / orthographic + projection: 'perspective', + //自动旋转 + // autoRotate: true, + // autoRotateSpeed: 1, + //禁用缩放 + zoomSensitivity: 0, + rotateSensitivity: [2, 0], + distance: 290, + alpha: 20, + beta: 0, + }, + boxWidth: 200, + boxDepth: 150, + environment: 'none', + light: { + //主光源 + main: { + intensity: 0.8, + alpha: 50, + }, + //环境光源 + ambient: { + intensity: 0.5, + }, + // ambientCubemap: { + // texture: 'https://dl.polyhaven.org/file/ph-assets/HDRIs/hdr/1k/studio_small_08_1k.hdr', + // exposure: 0.6, + // diffuseIntensity: 0.5, + // specularIntensity: 1 + // } + }, + }, + }; + return { echartsOpts, isLoading }; +}; diff --git a/apps/web/src/modules/developer/components/DistributionMap/index.tsx b/apps/web/src/modules/developer/components/DistributionMap/index.tsx new file mode 100644 index 000000000..acca64bfb --- /dev/null +++ b/apps/web/src/modules/developer/components/DistributionMap/index.tsx @@ -0,0 +1,131 @@ +import React, { useMemo } from 'react'; +import BaseCard from '@common/components/BaseCard'; +import { useTranslation } from 'next-i18next'; +import classnames from 'classnames'; +import { BiFullscreen, BiExitFullscreen } from 'react-icons/bi'; +import type { EChartsOption } from 'echarts'; +import dynamic from 'next/dynamic'; +import Productivity from 'public/images/chart-legend/cube-1.svg'; +import Robustness from 'public/images/chart-legend/cube-2.svg'; +import NicheCreation from 'public/images/chart-legend/cube-3.svg'; +import { useEchartsGlOpts } from '@modules/developer/components/DistributionMap/EChartGlOpt'; +import Legend from '@common/components/EChartGl/Legend'; + +const EChartGl = dynamic(() => import('@common/components/EChartGl'), { + ssr: false, +}); +const DistributionMap = () => { + const { t } = useTranslation(); + const { echartsOpts, isLoading } = useEchartsGlOpts(); + return ( +
+
+ ) : (
+
+
+
+
+
+ )
+ }
+
+
+
+
+ );
+};
+const FullScreen = (props) => {
+ const { t } = useTranslation();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+ {t('analyze:collaboration')}
+
+
+
+ {t('analyze:contributor')}
+
+
+
+ {t('analyze:software')}
+
+ {
+ props.onFullScreen(!props.fullScreen);
+ }}
+ >
+ {props.fullScreen ? (
+ <>
+
+ );
+};
+export default DistributionMap;
diff --git a/apps/web/src/modules/developer/components/DownCardLoadImage.tsx b/apps/web/src/modules/developer/components/DownCardLoadImage.tsx
new file mode 100644
index 000000000..d7d357797
--- /dev/null
+++ b/apps/web/src/modules/developer/components/DownCardLoadImage.tsx
@@ -0,0 +1,287 @@
+import React, { RefObject, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'next-i18next';
+import classnames from 'classnames';
+import { Portal } from '@mui/base/Portal';
+import qrcode from 'qrcode';
+import { getProvider, sleep } from '@common/utils';
+import { Level } from '@modules/developer/constant';
+import useCompareItems from '@modules/developer/hooks/useCompareItems';
+import ProviderIcon from '@modules/developer/components/ProviderIcon';
+import CompassSquareLogo from '@public/images/logos/compass-square.svg';
+import html2canvas from 'html2canvas';
+import { saveAs } from 'file-saver';
+import { elementToSVG, inlineResources } from 'dom-to-svg';
+
+const genQrcode = (text: string): Promise
+
+ );
+ } else {
+ return (
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+ {dataURL && (
+
+
+ Powered by oss-compass.org
+
+ )}
+
+
+
+
+ );
+ }
+};
+
+export default DownLoadImage;
diff --git a/apps/web/src/modules/developer/components/DownloadAndShare.tsx b/apps/web/src/modules/developer/components/DownloadAndShare.tsx
new file mode 100644
index 000000000..1d4822941
--- /dev/null
+++ b/apps/web/src/modules/developer/components/DownloadAndShare.tsx
@@ -0,0 +1,327 @@
+import React, { useState, RefObject } from 'react';
+import cn from 'classnames';
+import { useRouter } from 'next/router';
+import { useCountDown } from 'ahooks';
+import { useTranslation } from 'next-i18next';
+import { PiShareFatLight } from 'react-icons/pi';
+import { GrClose } from 'react-icons/gr';
+import classnames from 'classnames';
+import Dialog from '@mui/material/Dialog';
+import { BiCopy } from 'react-icons/bi';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import { toast } from 'react-hot-toast';
+import { Transition } from '@common/components/Dialog';
+import Tooltip from '@common//components/Tooltip';
+import * as RadioGroup from '@radix-ui/react-radio-group';
+import DownCardLoadImage from './DownCardLoadImage';
+import { AiOutlineLoading } from 'react-icons/ai';
+import useCompareItems from '@modules/developer/hooks/useCompareItems';
+import useQueryDateRange from '@modules/developer/hooks/useQueryDateRange';
+import { rangeTags } from '../constant';
+import { format } from 'date-fns';
+import { toUnderline } from '@common/utils/format';
+
+const queryMap = {
+ metricCodequality: 'collab_dev_index',
+ metricCommunity: 'community',
+ metricActivity: 'activity',
+ metricGroupActivity: 'organizations_activity',
+};
+
+const useGetSvgUrl = (
+ slug: string,
+ id: string,
+ yAxisScale: boolean,
+ onePointSys: boolean,
+ yKey: string
+) => {
+ const { range, timeStart, timeEnd } = useQueryDateRange();
+ let url = `/chart/${slug}.svg`;
+ let metrc = '';
+ let field = '';
+ if (id === 'topic_overview') {
+ metrc = 'overview';
+ } else {
+ const [metrcKey, fieldKey] = yKey.split('.');
+ metrc = queryMap[metrcKey];
+ if (id.indexOf('overview') === -1) {
+ field = toUnderline(fieldKey);
+ }
+ }
+ metrc && (url += `?metric=${metrc}`);
+ field && (url += `&field=${field}`);
+ !onePointSys && (url += `&y_trans=1`);
+ !yAxisScale && (url += `&y_abs=1`);
+ if (
+ id === 'code_quality_is_maintained' ||
+ id === 'code_quality_loc_frequency'
+ ) {
+ url += `&chart=bar`;
+ }
+ if (rangeTags.includes(range)) {
+ url += `&range=${range}`;
+ } else {
+ const begin_date = format(timeStart!, 'yyyy-MM-dd');
+ const end_date = format(timeEnd!, 'yyyy-MM-dd');
+ url += `&begin_date=${begin_date}&end_date=${end_date}`;
+ }
+ return url;
+};
+const DownloadAndShare = (props: {
+ cardRef: RefObject
+ {compareItems.map(({ name, label, level }, index) => {
+ const host = getProvider(label);
+
+ let labelNode = (
+
+ {name}
+
+ );
+
+ if (level === Level.REPO) {
+ labelNode = (
+
+ {name}
+
+ );
+ }
+ return (
+
+
+
+ );
+ })}
+
+ {t('home:community')}
+
+ )}
+ {index < compareItems.length - 1 ? (
+ vs
+ ) : null}
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+
+
+
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+ 
+
+
+
+ + Powered by oss-compass.org +
++ Scan the QR code above to read full report +
+
+
+
+ {compareItems.map(({ name, label, level }, index) => {
+ const host = getProvider(label);
+
+ let labelNode = (
+
+ {name}
+
+ );
+
+ if (level === Level.REPO) {
+ labelNode = (
+
+ {name}
+
+ );
+ }
+ return (
+
+
+
+ );
+ })}
+
+
+ {t('home:community')}
+
+
+ )}
+ {index < compareItems.length - 1 ? (
+ vs
+ ) : null}
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+
+
+
+
+
+ {/* eslint-disable-next-line @next/next/no-img-element */}
+
+
+
+
+ + Powered by oss-compass.org +
++ Scan the QR code above to read full report +
+ {
+ setOpen(true);
+ }}
+ >
+
+
+
+
+ );
+};
+
+const TabPanel = ({ badgeSrc, id }: { badgeSrc: string; id: string }) => {
+ const { t } = useTranslation();
+ const [tab, setTab] = React.useState('Markdown');
+ const [targetDate, setTargetDate] = useState
+
+
+
+
+ );
+};
+export default DownloadAndShare;
diff --git a/apps/web/src/modules/developer/components/HeaderWithFitlerBar.tsx b/apps/web/src/modules/developer/components/HeaderWithFitlerBar.tsx
new file mode 100644
index 000000000..a4f77e1be
--- /dev/null
+++ b/apps/web/src/modules/developer/components/HeaderWithFitlerBar.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import Header from '@common/components/Header';
+import StickyNav from '@common/components/Header/StickyNav';
+import { SideBarMenu } from '@modules/developer/components/SideBar';
+import NavBar from '@modules/developer/components/NavBar';
+import TopicNavbar from '@modules/developer/components/TopicNavbar';
+
+const HeaderWithFilterBar = () => {
+ return (
+ {source}
+ {
+ if (navigator.clipboard?.writeText) {
+ navigator.clipboard
+ .writeText(source)
+ .then((value) => {
+ setTargetDate(Date.now() + 800);
+ })
+ .catch((err) => {
+ toast.error('Failed! No copy permission');
+ });
+ } else {
+ toast.error('Failed! Not Supported clipboard');
+ }
+ }}
+ >
+
+