💄 fix: 优化没更新时数据的区域是空白的问题

arvinxx · Feb 13, 2021 · a07d5fd · a07d5fd
1 parent 8083cdf
commit a07d5fd
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 17 deletions.
diff --git a/src/contentScripts/activityMap/app/Heatmap/index.tsx b/src/contentScripts/activityMap/app/Heatmap/index.tsx
@@ -4,7 +4,7 @@ import type { HeatmapConfig } from '@ant-design/charts/es/heatmap/index';
 import type { G2HeatmapData } from '@/utils';
 import { useDarkTheme } from '@/hooks';
 
-const colorMap = ['#9be9a8', '#40c463', '#30a14e', '#216e39'];
+const colorMap = ['#eaecef', '#9be9a8', '#40c463', '#30a14e', '#216e39'];
 const colorMapDark = ['#161b22', '#003820', '#00602d', '#1d9d47', '#26d545'];
 
 interface HeatMapProps {
@@ -57,7 +57,7 @@ const DemoHeatmap: FC<HeatMapProps> = ({ data }) => {
  meta: {
  day: {
  type: 'cat',
- values: ['一', '二', '三', '四', '五', '六', '日'],
+ values: ['日', '一', '二', '三', '四', '五', '六'],
  },
  week: { type: 'cat' },
  commits: { sync: true, alias: '修改次数' },

diff --git a/src/utils/activityMap.ts b/src/utils/activityMap.ts
@@ -4,7 +4,7 @@ import dayjs from 'dayjs';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 import isSameOrAfter from 'dayjs/plugin/isSameOrAfter';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import { groupBy, orderBy } from 'lodash';
+import { groupBy, orderBy, unionBy } from 'lodash';
 
 dayjs.extend(weekOfYear);
 dayjs.extend(isSameOrAfter);
@@ -19,6 +19,7 @@ export interface ActivityDoc {
 
 export interface G2HeatmapData {
  date: string;
+ level: number;
  commits: number;
  month: number;
  day: number;
@@ -154,6 +155,30 @@ const calcDateDiff = (date: string, type: 'week' | 'month') => {
  return diff < 0 ? -diff : baseNumber - diff;
 };
 
+/**
+ * 获取一年的数据
+ */
+export const lastYearData = () => {
+ const startTime = dayjs();
+ const lastYear = startTime.subtract(1, 'year');
+ const data: G2HeatmapData[] = [];
+ const days = startTime.diff(lastYear, 'd');
+
+ for (let i = 0; i <= days; i += 1) {
+ const date = lastYear.add(i, 'd').format('YYYY-MM-DD');
+
+ data.push({
+ date,
+ commits: 0,
+ level: 0,
+ month: calcDateDiff(date, 'month'),
+ day: dayjs(date).day(),
+ week: calcDateDiff(date, 'week'),
+ });
+ }
+ return data;
+};
+
 /**
  * 将活跃数据转换为热力图数据
  * @param docs
@@ -183,10 +208,13 @@ export const mapToHeatData = (docs: ActivityDoc[]): G2HeatmapData[] => {
  };
  });
 
- data = orderBy(data, 'week').map((item, index) => ({
+ const base = lastYearData();
+
+ // 将数据合并
+ data = unionBy([...data, ...base], 'date');
+
+ return orderBy(data, 'week').map((item, index) => ({
  ...item,
  lastDay: index + 1 === data.length,
  }));
-
- return data;
 };
diff --git a/tests/utils/dataSource.test.ts b/tests/utils/dataSource.test.ts
@@ -6,6 +6,7 @@ import {
  fetchUser,
  getActivityData,
  mapToHeatData,
+ lastYearData,
 } from '@/utils';
 import { readJSONSync } from 'fs-extra';
 import { join } from 'path';
@@ -65,16 +66,11 @@ describe('数据转换', () => {
  join(__dirname, './testData.json'),
  );
 
- expect(mapToHeatData(testData)).toEqual([
- {
- commits: 4,
- date: '2021-02-04',
- day: 4,
- lastDay: true,
- level: 2,
- month: 12,
- week: 51,
- },
- ]);
+ expect(mapToHeatData(testData)).toHaveLength(367);
+ });
+
+ it('lastYearData', () => {
+ const data = lastYearData();
+ expect(data).toHaveLength(367);
  });
 });