feat: add line series

src/utils/data.ts

@@ -0,0 +1,32 @@
+export const generateDataByMonth = (originalData: any) => {
+  const objectData: any = {};
+  // format month string
+  Object.keys(originalData).forEach((key) => {
+    // e.g. 20204 -> 2020-4
+    const date = key.slice(0, 4) + '-' + key.slice(4);
+    objectData[date] = originalData[key];
+  });
+  // get the oldest month and the newest one
+  const orderedMonths = Object.keys(objectData).sort((a, b) => {
+    const dateA = new Date(a);
+    const dateB = new Date(b);
+    if (dateA < dateB) return -1;
+    else if (dateA > dateB) return 1;
+    else return 0;
+  });
+  const oldestMonth = orderedMonths[0];
+  const newestMonth = orderedMonths[orderedMonths.length - 1];
+  // insert no-event months (assigned to 0) and generate final data
+  const arrayData: [string, number][] = [];
+  const start = new Date(oldestMonth);
+  const end = new Date(newestMonth);
+  for (let i = start; i <= end; i.setMonth(i.getMonth() + 1)) {
+    const date = i.getFullYear() + '-' + (i.getMonth() + 1);
+    if (!objectData.hasOwnProperty(date)) {
+      arrayData.push([date, 0]);
+    } else {
+      arrayData.push([date, objectData[date]]);
+    }
+  }
+  return arrayData;
+};

src/views/RepoDetailForkView/ForkBars.tsx

@@ -82,9 +82,18 @@ const ForkBars: React.FC<ForkBarsProps> = (props) => {
           focus: 'series',
         },
         yAxisIndex: 0,
-        animationDelay: function (idx: any) {
-          return idx * 10;
+      },
+      {
+        type: 'line',
+        symbol: 'none',
+        lineStyle: {
+          color: COLORS.FG_COLOR,
+        },
+        data: data,
+        emphasis: {
+          focus: 'series',
         },
+        yAxisIndex: 0,
       },
     ],
     animationEasing: 'elasticOut',

src/views/RepoDetailForkView/RepoDetailForkView.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 
 import { getGithubTheme, getMessageByLocale } from '../../utils/utils';
 import Settings, { loadSettings } from '../../utils/settings';
+import { generateDataByMonth } from '../../utils/data';
 import { getRepoDetail } from '../../api/repo';
 import ReactTooltip from 'react-tooltip';
 import ForkBars from './ForkBars';
@@ -13,14 +14,7 @@ interface RepoDetailForkViewProps {
 }
 
 const generateForkBarsData = (fork: any) => {
-  const data: [string, number][] = [];
-  Object.keys(fork).forEach((value, index) => {
-    // format date string
-    // 20204 -> 2020-4
-    const date = value.slice(0, 4) + '-' + value.slice(4);
-    data.push([date, fork[value]]);
-  });
-  return data;
+  return generateDataByMonth(fork);
 };
 
 const RepoDetailForkView: React.FC<RepoDetailForkViewProps> = ({

src/views/RepoDetailStarView/RepoDetailStarView.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 
 import { getGithubTheme, getMessageByLocale } from '../../utils/utils';
 import Settings, { loadSettings } from '../../utils/settings';
+import { generateDataByMonth } from '../../utils/data';
 import { getRepoDetail } from '../../api/repo';
 import ReactTooltip from 'react-tooltip';
 import StarBars from '../RepoDetailStarView/StarBars';
@@ -13,14 +14,7 @@ interface RepoDetailStarViewProps {
 }
 
 const generateStarBarsData = (star: any) => {
-  const data: [string, number][] = [];
-  Object.keys(star).forEach((value, index) => {
-    // format date string
-    // 20204 -> 2020-4
-    const date = value.slice(0, 4) + '-' + value.slice(4);
-    data.push([date, star[value]]);
-  });
-  return data;
+  return generateDataByMonth(star);
 };
 
 const RepoDetailStarView: React.FC<RepoDetailStarViewProps> = ({

src/views/RepoDetailStarView/StarBars.tsx

@@ -82,9 +82,18 @@ const StarBars: React.FC<StarBarsProps> = (props) => {
           focus: 'series',
         },
         yAxisIndex: 0,
-        animationDelay: function (idx: any) {
-          return idx * 10;
+      },
+      {
+        type: 'line',
+        symbol: 'none',
+        lineStyle: {
+          color: COLORS.FG_COLOR,
+        },
+        data: data,
+        emphasis: {
+          focus: 'series',
         },
+        yAxisIndex: 0,
       },
     ],
     animationEasing: 'elasticOut',