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

Author: xingwanying

assistant/src/RankChart/index.tsx

@@ -66,6 +66,10 @@ const RankChart: React.FC<BotFilterChartProps> = ({ 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,

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 <TrendChart data={data} isArea={true} />;
+}
+```
 

assistant/src/TrendChart/index.tsx

@@ -17,8 +17,9 @@ interface Data {
 
 interface TrendChartProps {
   data: Data;
+  isArea?: boolean;
 }
-const TrendChart: React.FC<TrendChartProps> = ({ data }) => {
+const TrendChart: React.FC<TrendChartProps> = ({ data, isArea = false }) => {
   const chartRef = useRef<HTMLDivElement | null>(null);
   const [timeDimension, setTimeDimension] = useState<
     'year' | 'quarter' | 'month'
@@ -42,9 +43,38 @@ const TrendChart: React.FC<TrendChartProps> = ({ 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<TrendChartProps> = ({ 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<TrendChartProps> = ({ 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;

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,

server/insight/service/pr.py

@@ -10,9 +10,22 @@ 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",
     }
-    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