-
Notifications
You must be signed in to change notification settings - Fork 101
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
Showing
18 changed files
with
1,430 additions
and
204 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
This file was deleted.
Oops, something went wrong.
134 changes: 0 additions & 134 deletions
134
src/pages/ContentScripts/features/charts-design/view.tsx
This file was deleted.
Oops, something went wrong.
6 changes: 6 additions & 0 deletions
6
src/pages/ContentScripts/features/repo-collection/CollectionContent/ChartCard.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
/* ChartCard.css */ | ||
|
||
.custom-card { | ||
background-color: #fafafa; | ||
/* 其他样式属性 */ | ||
} |
23 changes: 23 additions & 0 deletions
23
src/pages/ContentScripts/features/repo-collection/CollectionContent/ChartCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
170 changes: 170 additions & 0 deletions
170
src/pages/ContentScripts/features/repo-collection/CollectionContent/CollectionDashboard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; |
Oops, something went wrong.