From 2564e75ac800f0b0a64aabf156ac6432a5738f52 Mon Sep 17 00:00:00 2001 From: yingying Date: Thu, 23 Jan 2025 11:14:58 +0800 Subject: [PATCH 1/3] chore: formate the response of the code change --- server/insight/service/pr.py | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/server/insight/service/pr.py b/server/insight/service/pr.py index 7044965a..97ba3437 100644 --- a/server/insight/service/pr.py +++ b/server/insight/service/pr.py @@ -15,4 +15,17 @@ def get_code_changes(repo_name): "code_change_lines_add": "add", "code_change_lines_remove": "remove", } - return get_data(repo_name, metrics_mapping) + data = get_data(repo_name, metrics_mapping) + + def process_entries(entries): + """Convert 'remove' entries to negative values.""" + return [ + {**entry, "value": -entry["value"]} if entry["type"] == "remove" else entry + for entry in entries + ] + + for key in ["year", "quarter", "month"]: + if key in data: + data[key] = process_entries(data[key]) + + return data From 61268c04779f180a2d8a2fa2a1d844cdfa3dfdba Mon Sep 17 00:00:00 2001 From: yingying Date: Thu, 23 Jan 2025 11:17:22 +0800 Subject: [PATCH 2/3] chore: formate the response of the code frequency --- server/insight/router.py | 8 ++++---- server/insight/service/pr.py | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/server/insight/router.py b/server/insight/router.py index 3dd07a51..82f94b57 100644 --- a/server/insight/router.py +++ b/server/insight/router.py @@ -2,7 +2,7 @@ from fastapi import APIRouter from insight.service.activity import get_activity_data from insight.service.issue import get_issue_data -from insight.service.pr import get_code_changes, get_pr_data +from insight.service.pr import get_code_frequency, get_pr_data # ref: https://open-digger.cn/en/docs/user_docs/metrics/metrics_usage_guide @@ -39,10 +39,10 @@ def get_pr_insight(repo_name: str): return json.dumps({"success": False, "message": str(e)}) -@router.get("/code_change") -def get_code_change_insight(repo_name: str): +@router.get("/code_frequency") +def get_code_frequency_insight(repo_name: str): try: - result = get_code_changes(repo_name) + result = get_code_frequency(repo_name) return { "success": True, "data": result, diff --git a/server/insight/service/pr.py b/server/insight/service/pr.py index 97ba3437..6f065de8 100644 --- a/server/insight/service/pr.py +++ b/server/insight/service/pr.py @@ -10,7 +10,7 @@ def get_pr_data(repo_name): return get_data(repo_name, metrics_mapping) -def get_code_changes(repo_name): +def get_code_frequency(repo_name): metrics_mapping = { "code_change_lines_add": "add", "code_change_lines_remove": "remove", From 0d5b46eae223fcfdd7cb20c96c540cb7ac1c5918 Mon Sep 17 00:00:00 2001 From: yingying Date: Thu, 23 Jan 2025 15:36:50 +0800 Subject: [PATCH 3/3] feat: add the areaChart --- assistant/src/RankChart/index.tsx | 4 ++ assistant/src/TrendChart/index.md | 102 +++++++++++++++++++++++++++++ assistant/src/TrendChart/index.tsx | 52 +++++++++++++-- 3 files changed, 153 insertions(+), 5 deletions(-) diff --git a/assistant/src/RankChart/index.tsx b/assistant/src/RankChart/index.tsx index 8ee24612..a5f755c5 100644 --- a/assistant/src/RankChart/index.tsx +++ b/assistant/src/RankChart/index.tsx @@ -66,6 +66,10 @@ const RankChart: React.FC = ({ data }) => { .data(filteredData) .encode('x', 'user') .encode('y', 'value') + .axis({ + x: { title: false }, + y: { title: false }, + }) .style({ fill: 'l(136) 0:rgb(247, 124, 0) 1:rgb(255, 177, 98)', padding: 10, diff --git a/assistant/src/TrendChart/index.md b/assistant/src/TrendChart/index.md index fd1a7495..3b661987 100644 --- a/assistant/src/TrendChart/index.md +++ b/assistant/src/TrendChart/index.md @@ -12,6 +12,7 @@ npm install @petercatai/assistant ``` ## 使用示例 +### 折线图 ```tsx import React from 'react'; @@ -55,4 +56,105 @@ export default () => { } ``` +### 面积图 + + +```tsx +import React from 'react'; +import { TrendChart } from '@petercatai/assistant'; + +export default () => { + const data ={ + "year": [ + { + "type": "add", + "date": "2024", + "value": 181615 + }, + { + "type": "remove", + "date": "2024", + "value": -238621 + } + ], + "quarter": [ + { + "type": "add", + "date": "2024Q3", + "value": 115521 + }, + { + "type": "remove", + "date": "2024Q3", + "value": -96766 + }, + { + "type": "add", + "date": "2024Q4", + "value": 66094 + }, + { + "type": "remove", + "date": "2024Q4", + "value": -141855 + } + ], + "month": [ + { + "type": "add", + "date": "2024-08", + "value": 2 + }, + { + "type": "remove", + "date": "2024-08", + "value": -2 + }, + { + "type": "add", + "date": "2024-09", + "value": 115519 + }, + { + "type": "remove", + "date": "2024-09", + "value": -96764 + }, + { + "type": "add", + "date": "2024-10", + "value": 19246 + }, + { + "type": "remove", + "date": "2024-10", + "value": -22630 + }, + { + "type": "add", + "date": "2024-11", + "value": 20128 + }, + { + "type": "remove", + "date": "2024-11", + "value": -14924 + }, + { + "type": "add", + "date": "2024-12", + "value": 26720 + }, + { + "type": "remove", + "date": "2024-12", + "value": -104301 + } + ] + }; + + + return ; +} +``` diff --git a/assistant/src/TrendChart/index.tsx b/assistant/src/TrendChart/index.tsx index c2fcde70..3432e806 100644 --- a/assistant/src/TrendChart/index.tsx +++ b/assistant/src/TrendChart/index.tsx @@ -17,8 +17,9 @@ interface Data { interface TrendChartProps { data: Data; + isArea?: boolean; } -const TrendChart: React.FC = ({ data }) => { +const TrendChart: React.FC = ({ data, isArea = false }) => { const chartRef = useRef(null); const [timeDimension, setTimeDimension] = useState< 'year' | 'quarter' | 'month' @@ -42,9 +43,38 @@ const TrendChart: React.FC = ({ data }) => { .encode('color', 'type') .scale('y', { nice: true, + }) + .options({ + paddingRight: 20, + }) + .axis({ + x: { title: false, labelAutoRotate: false }, + y: { + title: false, + labelFormatter: (d: number) => + d >= 1000 || d <= -1000 ? d / 1000 + 'k' : d, + }, }); - chart.line().encode('shape', 'smooth'); - chart.point().encode('shape', 'point').tooltip(false); + + if (isArea) { + chart + .line() + .encode('shape', 'smooth') + .style('strokeWidth', 2) + .tooltip(false); + chart.area().encode('shape', 'smooth').style('fillOpacity', 0.3); + chart.scale('color', { + range: [ + 'l(90) 0:#FECC6B 0.7:#FECC6B 1:#FECC6B4D', + 'l(270) 0:#EF4444 0.7:EF4444 1:#EF44444D', + ], + }); + } else { + chart.line().encode('shape', 'smooth'); + chart.scale('color', { + range: ['#FECC6B', '#3B82F6', '#8B5CF6'], + }); + } chart.render(); return chart; @@ -53,7 +83,7 @@ const TrendChart: React.FC = ({ data }) => { const createIntervalChart = (data: DataItem[]) => { if (!chartRef.current) return; const chart = new Chart({ - container: 'TrendCharContainer', + container: chartRef.current, autoFit: true, }); @@ -63,7 +93,19 @@ const TrendChart: React.FC = ({ data }) => { .encode('x', 'date') .encode('y', 'value') .encode('color', 'type') - .transform({ type: 'dodgeX' }); + .transform({ type: 'dodgeX' }) + .scale('color', { + range: isArea + ? [ + 'l(90) 0:#FECC6B 0.7:#FECC6B 1:#FECC6B4D', + 'l(270) 0:#EF4444 0.7:EF4444 1:#EF44444D', + ] + : ['#FECC6B', '#3B82F6', '#8B5CF6'], + }) + .axis({ + x: { title: false }, + y: { title: false }, + }); chart.render(); return chart;