feat: Design and implement several variable charts

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,11 @@
+const getNewestMonth = () => {
+  const lastDataAvailableMonth = new Date();
+  lastDataAvailableMonth.setDate(0);
+  return (
+    lastDataAvailableMonth.getFullYear() +
+    '-' +
+    (lastDataAvailableMonth.getMonth() + 1).toString().padStart(2, '0')
+  );
+};
+
+export default getNewestMonth;

src/pages/ContentScripts/features/charts-design/ChartCard.css

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

src/pages/ContentScripts/features/charts-design/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/charts-design/CollectionDashboard.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { Row, Col } from 'antd';
+import LineChart from '../../../Options/variable-charts/LineChart';
+import BarChart from '../../../Options/variable-charts/BarChart';
+import SankeyChart from '../../../Options/variable-charts/SankeyChart';
+import PieChart from '../../../Options/variable-charts/PieChart';
+import StackedBarChart from '../../../Options/variable-charts/StackedBarChart';
+import BoxplotChart from '../../../Options/variable-charts/BoxplotChart';
+import ChartCard from './ChartCard';
+
+interface CollectionDashboardProps {
+  repoNames: string[];
+  currentRepo?: string;
+}
+
+const CollectionDashboard: React.FC<CollectionDashboardProps> = ({
+  repoNames,
+  currentRepo,
+}) => {
+  return (
+    <div>
+      <Row gutter={[16, 16]}>
+        <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 Pie Chart">
+            <PieChart
+              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 style={{ margin: '16px 0' }}></div>
+
+      <Row gutter={[16, 16]}>
+        <Col span={16}>
+          <Row gutter={[16, 16]}>
+            <Col span={24}>
+              <ChartCard title="Issue Response Time Box Plot">
+                <BoxplotChart
+                  repoNames={repoNames}
+                  height={200}
+                  theme={'light'}
+                  // currentRepo={currentRepo}
+                />
+              </ChartCard>
+            </Col>
+            {/*<Col span={12}>*/}
+
+            {/*</Col>*/}
+            <Col span={24}>
+              <ChartCard title="Code Line Additions/Deletions Bar Chart">
+                <StackedBarChart
+                  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={472}
+                  theme={'light'}
+                  currentRepo={currentRepo}
+                />
+              </ChartCard>
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+    </div>
+  );
+};
+
+export default CollectionDashboard;

src/pages/ContentScripts/features/charts-design/collectionContent.tsx

@@ -0,0 +1,59 @@
+// CollectionContent.tsx
+import React, { useState, useEffect } from 'react';
+import { Layout, Menu, theme } from 'antd';
+
+import CollectionDashboard from './CollectionDashboard';
+
+const { Content, Sider } = Layout;
+interface CollectionContent {
+  repoNames: string[];
+
+  currentRepo?: string;
+}
+
+const LIGHT_THEME = {
+  BG_COLOR: '#ffffff',
+};
+
+const CollectionContent: React.FC<CollectionContent> = ({
+  repoNames,
+  currentRepo,
+}) => {
+  const menuItems = repoNames.map((repo, index) => ({
+    key: index,
+    label: repo,
+  }));
+  const {
+    token: { colorBgContainer },
+  } = theme.useToken();
+
+  // 添加一个状态来跟踪选中的仓库名
+  const [selectedRepo, setSelectedRepo] = useState<string | undefined>(
+    undefined
+  );
+  useEffect(() => {
+    setSelectedRepo(currentRepo);
+  }, [currentRepo]);
+  const handleMenuClick = (key: string) => {
+    setSelectedRepo(key);
+  };
+
+  return (
+    <Layout style={{ padding: '24px 0', background: colorBgContainer }}>
+      <Sider style={{ background: colorBgContainer }} width={200}>
+        <Menu
+          mode="inline"
+          defaultSelectedKeys={currentRepo !== undefined ? [currentRepo] : []}
+          style={{ height: '100%' }}
+          items={menuItems}
+          onClick={({ key }) => handleMenuClick(key)} //点击切换选中的repo
+        />
+      </Sider>
+      <Content style={{ padding: '0 24px', minHeight: 280 }}>
+        <CollectionDashboard repoNames={repoNames} currentRepo={selectedRepo} />
+      </Content>
+    </Layout>
+  );
+};
+
+export default CollectionContent;

src/pages/ContentScripts/features/charts-design/view.tsx

@@ -5,8 +5,9 @@ import optionsStorage, {
   HypercrxOptions,
   defaults,
 } from '../../../../options-storage';
-import { Modal, Row, Col } from 'antd';
-import Bars from '../../../../components/Bars';
+import { Modal } from 'antd';
+
+import CollectionContent from './collectionContent';
 
 const githubTheme = getGithubTheme();
 
@@ -23,37 +24,13 @@ const DARK_THEME = {
 };
 
 interface Props {}
-const data1: any = [
-  ['2022-01', 5],
-  ['2022-02', 10],
-  ['2022-03', 15],
-  ['2022-05', 25],
-  ['2022-06', 30],
-  ['2022-08', 40],
-  ['2022-09', 45],
-];
-const data2: any = [
-  ['2022-01', 12],
-  ['2022-02', 18],
-  ['2022-03', 27],
-  ['2022-04', 8],
-  ['2022-05', 36],
-  ['2022-06', 42],
-  ['2022-07', 20],
-  ['2022-08', 50],
-  ['2022-09', 15],
-];
 
-const mockData = {
-  bar: {
-    legend1: 'legend1',
-    legend2: 'legend2',
-    yName1: 'yName1',
-    yName2: 'yName2',
-    data1: data1,
-    data2: data2,
-  },
-};
+const repoNames = [
+  'X-lab2017/open-digger',
+  'hypertrons/hypertrons-crx',
+  // 'X-lab2017/oss101',
+  // 'X-lab2017/open-research',
+];
 
 const View = ({}: Props): JSX.Element | null => {
   const [options, setOptions] = useState<HypercrxOptions>(defaults);
@@ -92,40 +69,9 @@ const View = ({}: Props): JSX.Element | null => {
         open={isModalOpen}
         onOk={handleOk}
         onCancel={handleOk}
-        width={1000}
+        width={1500}
       >
-        <Row>
-          <Col span={12}>
-            <h2 style={{ padding: 20 }}>Bar Chart Light Theme</h2>
-            <div style={{ background: LIGHT_THEME.BG_COLOR }}>
-              <Bars
-                theme={'light'}
-                height={350}
-                legend1={mockData.bar.legend1}
-                legend2={mockData.bar.legend2}
-                yName1={mockData.bar.yName1}
-                yName2={mockData.bar.yName2}
-                data1={mockData.bar.data1}
-                data2={mockData.bar.data2}
-              />
-            </div>
-          </Col>
-          <Col span={12}>
-            <h2 style={{ padding: 20 }}>Bar Chart Dark Theme</h2>
-            <div style={{ backgroundColor: DARK_THEME.BG_COLOR }}>
-              <Bars
-                theme={'dark'}
-                height={350}
-                legend1={mockData.bar.legend1}
-                legend2={mockData.bar.legend2}
-                yName1={mockData.bar.yName1}
-                yName2={mockData.bar.yName2}
-                data1={mockData.bar.data1}
-                data2={mockData.bar.data2}
-              />
-            </div>
-          </Col>
-        </Row>
+        <CollectionContent repoNames={repoNames} />
       </Modal>
     </div>
   );