feat: Design and implement several variable charts (#716)

* feat: Implement brief layouts and chart styles

* feat: Implemented BarChart、StackedBarChart, PieChart

* feat: Implemented BoxplotChart, SankeyChart

* feat: Implemented GridLayout, Simple Chart Display, Implemented 'Highlight Specific Charts by Clicking the Menu Bar'

* feat: Implemented NumericPanel and made adjustments to the BarChart,StackedBarChart and Boxplot

* feat: Removed the deprecated gridlayout file

* feat: Modify the 'get newest month' function

* feat: merge collection Modal

src/api/repo.ts

@@ -19,6 +19,7 @@ const metricNameMap = new Map([
   ['developer_network', 'developer_network'],
   ['repo_network', 'repo_network'],
   ['activity_details', 'activity_details'],
+  ['issue_response_time', 'issue_response_time'],
 ]);
 
 export const getActivity = async (repo: string) => {
@@ -88,3 +89,7 @@ export const getRepoNetwork = async (repo: string) => {
 export const getActivityDetails = async (repo: string) => {
   return getMetricByName(repo, metricNameMap, 'activity_details');
 };
+
+export const getIssueResponseTime = async (repo: string) => {
+  return getMetricByName(repo, metricNameMap, 'issue_response_time');
+};

src/helpers/get-newest-month.ts

@@ -0,0 +1,14 @@
+const getNewestMonth = () => {
+  const now = new Date();
+  if (now.getDate() === 1) {
+    // data for last month is not ready in the first day of the month (#595)
+    now.setDate(0); // a way to let month - 1
+  }
+  now.setDate(0); // see issue #632
+
+  return (
+    now.getFullYear() + '-' + (now.getMonth() + 1).toString().padStart(2, '0')
+  );
+};
+
+export default getNewestMonth;

src/pages/ContentScripts/features/repo-collection/CollectionContent/ChartCard.css

@@ -0,0 +1,6 @@
+/* ChartCard.css */
+
+.custom-card {
+  background-color: #fafafa;
+  /* 其他样式属性 */
+}

src/pages/ContentScripts/features/repo-collection/CollectionContent/ChartCard.tsx

@@ -0,0 +1,23 @@
+import React, { ReactNode } from 'react';
+import { Card } from 'antd';
+import './ChartCard.css'; // 导入自定义样式
+
+interface ChartCardProps {
+  title: ReactNode;
+  children: React.ReactNode;
+}
+
+function ChartCard({ title, children }: ChartCardProps) {
+  return (
+    <Card
+      className="custom-card"
+      title={title}
+      bordered={false}
+      bodyStyle={{ padding: 0 }}
+    >
+      {children}
+    </Card>
+  );
+}
+
+export default ChartCard;

src/pages/ContentScripts/features/repo-collection/CollectionContent/CollectionDashboard.tsx

@@ -0,0 +1,170 @@
+import LineChart from '../charts/LineChart';
+import BarChart from '../charts/BarChart';
+import SankeyChart from '../charts/SankeyChart';
+import PieChart from '../charts/PieChart';
+import StackedBarChart from '../charts/StackedBarChart';
+import CodeStackedBarChart from '../charts/CodeStackedBarChart';
+import BoxplotChart from '../charts/BoxplotChart';
+import ChartCard from './ChartCard';
+import NumericPanel from '../charts/NumericPanel';
+
+import React from 'react';
+import { Row, Col } from 'antd';
+
+interface CollectionDashboardProps {
+  repoNames: string[];
+  currentRepo?: string;
+}
+
+const CollectionDashboard: React.FC<CollectionDashboardProps> = ({
+  repoNames,
+  currentRepo,
+}) => {
+  return (
+    <div>
+      <Row gutter={[16, 16]}>
+        <Col span={8}>
+          <ChartCard title="Total Star Count">
+            <NumericPanel
+              repoNames={repoNames}
+              height={200}
+              theme={'light'}
+              currentRepo={currentRepo}
+            />
+          </ChartCard>
+        </Col>
+        <Col span={8}>
+          <ChartCard title="Paticipant Pie Chart">
+            <PieChart
+              repoNames={repoNames}
+              height={200}
+              theme={'light'}
+              currentRepo={currentRepo}
+            />
+          </ChartCard>
+        </Col>
+        <Col span={8}>
+          <ChartCard title="Issue Response Time Box Plot">
+            <BoxplotChart
+              repoNames={repoNames}
+              height={200}
+              theme={'light'}
+              // currentRepo={currentRepo}
+            />
+          </ChartCard>
+        </Col>
+      </Row>
+
+      <div style={{ margin: '16px 0' }}></div>
+
+      <Row gutter={[16, 16]}>
+        <Col span={16}>
+          <Row gutter={[16, 16]}>
+            <Col span={12}>
+              <ChartCard title="Star Count Over Time">
+                <LineChart
+                  repoNames={repoNames}
+                  height={200}
+                  theme={'light'}
+                  currentRepo={currentRepo}
+                />
+              </ChartCard>
+            </Col>
+            <Col span={12}>
+              <ChartCard title="Star Count Bar Chart">
+                <BarChart
+                  repoNames={repoNames}
+                  height={200}
+                  theme={'light'}
+                  currentRepo={currentRepo}
+                />
+              </ChartCard>
+            </Col>
+
+            <Col span={12}>
+              <ChartCard title="Star Count Over Time">
+                <StackedBarChart
+                  repoNames={repoNames}
+                  height={200}
+                  theme={'light'}
+                  currentRepo={currentRepo}
+                />
+              </ChartCard>
+            </Col>
+            <Col span={12}>
+              <ChartCard title="Star Count Over Time">
+                <LineChart
+                  repoNames={repoNames}
+                  height={200}
+                  theme={'light'}
+                  currentRepo={currentRepo}
+                />
+              </ChartCard>
+            </Col>
+
+            <Col span={24}>
+              <ChartCard title="Code Line Additions/Deletions Bar Chart">
+                <CodeStackedBarChart
+                  repoNames={repoNames}
+                  height={200}
+                  theme={'light'}
+                  // currentRepo={currentRepo}
+                />
+              </ChartCard>
+            </Col>
+          </Row>
+        </Col>
+        <Col span={8}>
+          <Row gutter={[16, 16]}>
+            <Col span={24}>
+              <ChartCard title="User Activity Sankey Chart">
+                <SankeyChart
+                  repoNames={repoNames}
+                  height={744}
+                  theme={'light'}
+                  currentRepo={currentRepo}
+                />
+              </ChartCard>
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+
+      <div style={{ margin: '16px 0' }}></div>
+      <Row gutter={[16, 16]}>
+        <Col span={8}>
+          <ChartCard title="Star Count Over Time">
+            <StackedBarChart
+              repoNames={repoNames}
+              height={200}
+              theme={'light'}
+              currentRepo={currentRepo}
+            />
+          </ChartCard>
+        </Col>
+        <Col span={8}>
+          <ChartCard title="Star Count Over Time">
+            <LineChart
+              repoNames={repoNames}
+              height={200}
+              theme={'light'}
+              currentRepo={currentRepo}
+            />
+          </ChartCard>
+        </Col>
+        <Col span={8}>
+          <ChartCard title="Star Count Bar Chart">
+            <BarChart
+              repoNames={repoNames}
+              height={200}
+              theme={'light'}
+              currentRepo={currentRepo}
+            />
+          </ChartCard>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default CollectionDashboard;