Skip to content

Commit 36dfb73

Browse files
authored
feat: add the areaChart (#713)
* chore: formate the response of the code change * chore: formate the response of the code frequency * feat: add the areaChart
1 parent 26d87b4 commit 36dfb73

File tree

5 files changed

+172
-11
lines changed

5 files changed

+172
-11
lines changed

assistant/src/RankChart/index.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -66,6 +66,10 @@ const RankChart: React.FC<BotFilterChartProps> = ({ data }) => {
6666
.data(filteredData)
6767
.encode('x', 'user')
6868
.encode('y', 'value')
69+
.axis({
70+
x: { title: false },
71+
y: { title: false },
72+
})
6973
.style({
7074
fill: 'l(136) 0:rgb(247, 124, 0) 1:rgb(255, 177, 98)',
7175
padding: 10,

assistant/src/TrendChart/index.md

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ npm install @petercatai/assistant
1212
```
1313

1414
## 使用示例
15+
### 折线图
1516

1617
```tsx
1718
import React from 'react';
@@ -55,4 +56,105 @@ export default () => {
5556
}
5657
```
5758

59+
### 面积图
60+
61+
62+
```tsx
63+
import React from 'react';
64+
import { TrendChart } from '@petercatai/assistant';
65+
66+
export default () => {
67+
const data ={
68+
"year": [
69+
{
70+
"type": "add",
71+
"date": "2024",
72+
"value": 181615
73+
},
74+
{
75+
"type": "remove",
76+
"date": "2024",
77+
"value": -238621
78+
}
79+
],
80+
"quarter": [
81+
{
82+
"type": "add",
83+
"date": "2024Q3",
84+
"value": 115521
85+
},
86+
{
87+
"type": "remove",
88+
"date": "2024Q3",
89+
"value": -96766
90+
},
91+
{
92+
"type": "add",
93+
"date": "2024Q4",
94+
"value": 66094
95+
},
96+
{
97+
"type": "remove",
98+
"date": "2024Q4",
99+
"value": -141855
100+
}
101+
],
102+
"month": [
103+
{
104+
"type": "add",
105+
"date": "2024-08",
106+
"value": 2
107+
},
108+
{
109+
"type": "remove",
110+
"date": "2024-08",
111+
"value": -2
112+
},
113+
{
114+
"type": "add",
115+
"date": "2024-09",
116+
"value": 115519
117+
},
118+
{
119+
"type": "remove",
120+
"date": "2024-09",
121+
"value": -96764
122+
},
123+
{
124+
"type": "add",
125+
"date": "2024-10",
126+
"value": 19246
127+
},
128+
{
129+
"type": "remove",
130+
"date": "2024-10",
131+
"value": -22630
132+
},
133+
{
134+
"type": "add",
135+
"date": "2024-11",
136+
"value": 20128
137+
},
138+
{
139+
"type": "remove",
140+
"date": "2024-11",
141+
"value": -14924
142+
},
143+
{
144+
"type": "add",
145+
"date": "2024-12",
146+
"value": 26720
147+
},
148+
{
149+
"type": "remove",
150+
"date": "2024-12",
151+
"value": -104301
152+
}
153+
]
154+
};
155+
156+
157+
return <TrendChart data={data} isArea={true} />;
158+
}
159+
```
58160

assistant/src/TrendChart/index.tsx

Lines changed: 47 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@ interface Data {
1717

1818
interface TrendChartProps {
1919
data: Data;
20+
isArea?: boolean;
2021
}
21-
const TrendChart: React.FC<TrendChartProps> = ({ data }) => {
22+
const TrendChart: React.FC<TrendChartProps> = ({ data, isArea = false }) => {
2223
const chartRef = useRef<HTMLDivElement | null>(null);
2324
const [timeDimension, setTimeDimension] = useState<
2425
'year' | 'quarter' | 'month'
@@ -42,9 +43,38 @@ const TrendChart: React.FC<TrendChartProps> = ({ data }) => {
4243
.encode('color', 'type')
4344
.scale('y', {
4445
nice: true,
46+
})
47+
.options({
48+
paddingRight: 20,
49+
})
50+
.axis({
51+
x: { title: false, labelAutoRotate: false },
52+
y: {
53+
title: false,
54+
labelFormatter: (d: number) =>
55+
d >= 1000 || d <= -1000 ? d / 1000 + 'k' : d,
56+
},
4557
});
46-
chart.line().encode('shape', 'smooth');
47-
chart.point().encode('shape', 'point').tooltip(false);
58+
59+
if (isArea) {
60+
chart
61+
.line()
62+
.encode('shape', 'smooth')
63+
.style('strokeWidth', 2)
64+
.tooltip(false);
65+
chart.area().encode('shape', 'smooth').style('fillOpacity', 0.3);
66+
chart.scale('color', {
67+
range: [
68+
'l(90) 0:#FECC6B 0.7:#FECC6B 1:#FECC6B4D',
69+
'l(270) 0:#EF4444 0.7:EF4444 1:#EF44444D',
70+
],
71+
});
72+
} else {
73+
chart.line().encode('shape', 'smooth');
74+
chart.scale('color', {
75+
range: ['#FECC6B', '#3B82F6', '#8B5CF6'],
76+
});
77+
}
4878

4979
chart.render();
5080
return chart;
@@ -53,7 +83,7 @@ const TrendChart: React.FC<TrendChartProps> = ({ data }) => {
5383
const createIntervalChart = (data: DataItem[]) => {
5484
if (!chartRef.current) return;
5585
const chart = new Chart({
56-
container: 'TrendCharContainer',
86+
container: chartRef.current,
5787
autoFit: true,
5888
});
5989

@@ -63,7 +93,19 @@ const TrendChart: React.FC<TrendChartProps> = ({ data }) => {
6393
.encode('x', 'date')
6494
.encode('y', 'value')
6595
.encode('color', 'type')
66-
.transform({ type: 'dodgeX' });
96+
.transform({ type: 'dodgeX' })
97+
.scale('color', {
98+
range: isArea
99+
? [
100+
'l(90) 0:#FECC6B 0.7:#FECC6B 1:#FECC6B4D',
101+
'l(270) 0:#EF4444 0.7:EF4444 1:#EF44444D',
102+
]
103+
: ['#FECC6B', '#3B82F6', '#8B5CF6'],
104+
})
105+
.axis({
106+
x: { title: false },
107+
y: { title: false },
108+
});
67109

68110
chart.render();
69111
return chart;

server/insight/router.py

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
from fastapi import APIRouter
33
from insight.service.activity import get_activity_data
44
from insight.service.issue import get_issue_data
5-
from insight.service.pr import get_code_changes, get_pr_data
5+
from insight.service.pr import get_code_frequency, get_pr_data
66

77

88
# ref: https://open-digger.cn/en/docs/user_docs/metrics/metrics_usage_guide
@@ -39,10 +39,10 @@ def get_pr_insight(repo_name: str):
3939
return json.dumps({"success": False, "message": str(e)})
4040

4141

42-
@router.get("/code_change")
43-
def get_code_change_insight(repo_name: str):
42+
@router.get("/code_frequency")
43+
def get_code_frequency_insight(repo_name: str):
4444
try:
45-
result = get_code_changes(repo_name)
45+
result = get_code_frequency(repo_name)
4646
return {
4747
"success": True,
4848
"data": result,

server/insight/service/pr.py

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,22 @@ def get_pr_data(repo_name):
1010
return get_data(repo_name, metrics_mapping)
1111

1212

13-
def get_code_changes(repo_name):
13+
def get_code_frequency(repo_name):
1414
metrics_mapping = {
1515
"code_change_lines_add": "add",
1616
"code_change_lines_remove": "remove",
1717
}
18-
return get_data(repo_name, metrics_mapping)
18+
data = get_data(repo_name, metrics_mapping)
19+
20+
def process_entries(entries):
21+
"""Convert 'remove' entries to negative values."""
22+
return [
23+
{**entry, "value": -entry["value"]} if entry["type"] == "remove" else entry
24+
for entry in entries
25+
]
26+
27+
for key in ["year", "quarter", "month"]:
28+
if key in data:
29+
data[key] = process_entries(data[key])
30+
31+
return data

0 commit comments

Comments
 (0)