add colorful canlendar

src/components/Bars.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef } from 'react';
 import { formatNum } from '../helpers/formatter';
 import * as echarts from 'echarts';
-
+import { getInterval, judgeInterval } from '../helpers/judge-interval';
 const LIGHT_THEME = {
   FG_COLOR: '#24292f',
   BG_COLOR: '#ffffff',
@@ -28,10 +28,7 @@ interface BarsProps {
 
 const Bars = (props: BarsProps): JSX.Element => {
   const { theme, height, legend1, legend2, yName1, yName2, data1, data2, onClick } = props;
-  const startTime = Number(data1[0][0].split('-')[0]);
-  const endTime = Number(data1[data1.length - 1][0].split('-')[0]);
-  const timeLength = endTime - startTime;
-  const minInterval = timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
+  const { timeLength, minInterval } = getInterval(data1);
   const divEL = useRef(null);
 
   const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;
@@ -155,23 +152,7 @@ const Bars = (props: BarsProps): JSX.Element => {
     let chartDOM = divEL.current;
     const instance = echarts.getInstanceByDom(chartDOM as any);
     if (instance) {
-      if (timeLength > 2) {
-        instance.on('dataZoom', (params: any) => {
-          let option = instance.getOption() as {
-            xAxis: { minInterval?: any }[];
-          };
-          const startValue = params.batch[0].start;
-          const endValue = params.batch[0].end;
-          let minInterval: number;
-          if (startValue == 0 && endValue == 100) {
-            minInterval = 365 * 24 * 3600 * 1000;
-          } else {
-            minInterval = 30 * 24 * 3600 * 1000;
-          }
-          option.xAxis[0].minInterval = minInterval;
-          instance.setOption(option);
-        });
-      }
+      judgeInterval(instance, option, timeLength);
       instance.setOption(option);
       if (onClick) {
         instance.on('click', (params) => {

src/helpers/judge-interval.ts

@@ -0,0 +1,27 @@
+export function getInterval(data: any) {
+  const startTime = Number(data[0][0].split('-')[0]);
+  const endTime = Number(data[data.length - 1][0].split('-')[0]);
+  const timeLength = endTime - startTime;
+  const minInterval = timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
+  return { timeLength, minInterval };
+}
+
+export function judgeInterval(instance: any, option: any, timeLength: number) {
+  if (timeLength > 2) {
+    instance.on('dataZoom', (params: any) => {
+      let option = instance.getOption() as {
+        xAxis: { minInterval?: any }[];
+      };
+      const startValue = params.batch[0].start;
+      const endValue = params.batch[0].end;
+      let minInterval: number;
+      if (startValue == 0 && endValue == 100) {
+        minInterval = 365 * 24 * 3600 * 1000;
+      } else {
+        minInterval = 30 * 24 * 3600 * 1000;
+      }
+      option.xAxis[0].minInterval = minInterval;
+      instance.setOption(option);
+    });
+  }
+}

src/pages/ContentScripts/features/colorful-calendar/index.scss

@@ -0,0 +1,19 @@
+.ant-color-picker-trigger {
+  min-width: 10px !important;
+  padding: 0 !important;
+  margin-right: 4px;
+  border: none !important;
+}
+
+.ant-color-picker-color-block {
+  width: 10px !important;
+  min-width: 10px !important;
+  height: 10px !important;
+}
+
+.ant-color-picker-color-block-inner {
+  width: 10px !important;
+  min-width: 10px !important;
+  height: 10px !important;
+  border-radius: 3px !important;
+}

src/pages/ContentScripts/features/colorful-calendar/index.tsx

@@ -0,0 +1,97 @@
+import features from '../../../../feature-manager';
+import waitFor from '../../../../helpers/wait-for';
+
+import React from 'react';
+import { render } from 'react-dom';
+import { ColorPicker } from 'antd';
+import $ from 'jquery';
+import * as pageDetect from 'github-url-detection';
+
+import './index.scss'; // 需要引入自定义的样式来覆盖antd ColorPicker的默认样式，后面展开说明
+
+const featureId = features.getFeatureID(import.meta.url);
+
+// const CALENDAR_LEVEL_COLORS = [
+//   '#ebedf0',
+//   '#ffedf9',
+//   '#ffc3eb',
+//   '#ff3ebf',
+//   '#c70085',
+// ];
+//
+// const changeLevelColor = (level: number, color: string) => {
+//   const root = document.documentElement;
+//   if (level === 0) {
+//     root.style.setProperty(`--color-calendar-graph-day-bg`, color);
+//   } else {
+//     root.style.setProperty(`--color-calendar-graph-day-L${level}-bg`, color);
+//   }
+// };
+
+let colors = ['#ebedf0', '#ffedf9', '#ffc3eb', '#ff3ebf', '#c70085'];
+
+const changeLevelColor = async (level: number, color: string) => {
+  const root = document.documentElement;
+  if (level === 0) {
+    root.style.setProperty(`--color-calendar-graph-day-bg`, color);
+  } else {
+    root.style.setProperty(`--color-calendar-graph-day-L${level}-bg`, color);
+  }
+  // Save to storage
+  const newColors = [...colors];
+  newColors[level] = color;
+  await chrome.storage.local.set({
+    calendar_level_colors: newColors,
+  });
+};
+
+const replaceLegendToColorPicker = async (
+  level: number,
+  defaultColor: string
+) => {
+  const legendSelector = `#contribution-graph-legend-level-${level}`; // 选择器selector是用于定位DOM元素的字符串
+  await waitFor(() => $(legendSelector).length > 0); // init函数运行的时候，页面中某些元素不一定已经加载完毕，经过测试，日历图加载时机比较靠后，因此需要waitFor一下，不然后面的操作都是无用的
+  const $legend = $(legendSelector);
+  const container = $('<div></div>');
+  render(
+    <ColorPicker
+      defaultValue={defaultColor}
+      size="small"
+      onChange={(color, hex) => changeLevelColor(level, hex)}
+    />, // 选择新颜色后会调用changeLevelColor改变格子颜色
+    container[0]
+  ); // 将React组件渲染为真实的DOM元素
+  $legend.replaceWith(container); // 使用jQuery的replaceWith方法将图例格子替换为ColorPicker
+};
+
+// const init = async (): Promise<void> => {
+//   for (let i = 0; i < CALENDAR_LEVEL_COLORS.length; i++) {
+//     changeLevelColor(i, CALENDAR_LEVEL_COLORS[i]); // 初始化时就按照给定的颜色改变日历格子的颜色
+//     await replaceLegendToColorPicker(i, CALENDAR_LEVEL_COLORS[i]);
+//   }
+// };
+
+const init = async (): Promise<void> => {
+  // Load colors from storage
+  colors =
+    (await chrome.storage.local.get('calendar_level_colors'))[
+      // (await localStorage.get('calendar_level_colors'))[
+      'calendar_level_colors'
+    ] || colors;
+
+  for (let i = 0; i < colors.length; i++) {
+    changeLevelColor(i, colors[i]);
+    replaceLegendToColorPicker(i, colors[i]);
+  }
+};
+
+const restore = async () => {
+  console.log('restore colorful-calendar');
+};
+
+features.add(featureId, {
+  asLongAs: [pageDetect.isUserProfile],
+  awaitDomReady: false,
+  init,
+  restore,
+});

src/pages/ContentScripts/features/repo-fork-tooltip/ForkChart.tsx

@@ -3,7 +3,7 @@ import * as echarts from 'echarts';
 
 import { formatNum, numberWithCommas } from '../../../../helpers/formatter';
 import { min } from 'lodash-es';
-
+import { getInterval, judgeInterval } from '../../../../helpers/judge-interval';
 const LIGHT_THEME = {
   FG_COLOR: '#24292F',
   BG_COLOR: '#ffffff',
@@ -29,10 +29,7 @@ interface ForkChartProps {
 
 const ForkChart = (props: ForkChartProps): JSX.Element => {
   const { theme, width, height, data } = props;
-  const startTime = Number(data[0][0].split('-')[0]);
-  const endTime = Number(data[data.length - 1][0].split('-')[0]);
-  const timeLength = endTime - startTime;
-  const minInterval = timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
+  const { timeLength, minInterval } = getInterval(data);
   const divEL = useRef(null);
 
   const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;
@@ -140,23 +137,7 @@ const ForkChart = (props: ForkChartProps): JSX.Element => {
     let chartDOM = divEL.current;
     const instance = echarts.getInstanceByDom(chartDOM as any);
     if (instance) {
-      if (timeLength > 2) {
-        instance.on('dataZoom', (params: any) => {
-          let option = instance.getOption() as {
-            xAxis: { minInterval?: any }[];
-          };
-          const startValue = params.batch[0].start;
-          const endValue = params.batch[0].end;
-          let minInterval: number;
-          if (startValue == 0 && endValue == 100) {
-            minInterval = 365 * 24 * 3600 * 1000;
-          } else {
-            minInterval = 30 * 24 * 3600 * 1000;
-          }
-          option.xAxis[0].minInterval = minInterval;
-          instance.setOption(option);
-        });
-      }
+      judgeInterval(instance, option, timeLength);
       instance.setOption(option);
     }
   }, []);

src/pages/ContentScripts/features/repo-header-labels/ActivityChart.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import * as echarts from 'echarts';
 
 import { formatNum, numberWithCommas } from '../../../../helpers/formatter';
-
+import { getInterval, judgeInterval } from '../../../../helpers/judge-interval';
 const LIGHT_THEME = {
   FG_COLOR: '#24292F',
   BG_COLOR: '#ffffff',
@@ -28,10 +28,7 @@ interface ActivityChartProps {
 
 const ActivityChart = (props: ActivityChartProps): JSX.Element => {
   const { theme, width, height, data } = props;
-  const startTime = Number(data[0][0].split('-')[0]);
-  const endTime = Number(data[data.length - 1][0].split('-')[0]);
-  const timeLength = endTime - startTime;
-  const minInterval = timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
+  const { timeLength, minInterval } = getInterval(data);
   const divEL = useRef(null);
 
   const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;
@@ -139,23 +136,7 @@ const ActivityChart = (props: ActivityChartProps): JSX.Element => {
     let chartDOM = divEL.current;
     const instance = echarts.getInstanceByDom(chartDOM as any);
     if (instance) {
-      if (timeLength > 2) {
-        instance.on('dataZoom', (params: any) => {
-          let option = instance.getOption() as {
-            xAxis: { minInterval?: any }[];
-          };
-          const startValue = params.batch[0].start;
-          const endValue = params.batch[0].end;
-          let minInterval: number;
-          if (startValue == 0 && endValue == 100) {
-            minInterval = 365 * 24 * 3600 * 1000;
-          } else {
-            minInterval = 30 * 24 * 3600 * 1000;
-          }
-          option.xAxis[0].minInterval = minInterval;
-          instance.setOption(option);
-        });
-      }
+      judgeInterval(instance, option, timeLength);
       instance.setOption(option);
     }
   }, []);

src/pages/ContentScripts/features/repo-header-labels/ContributorChart.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import * as echarts from 'echarts';
 
 import { formatNum, numberWithCommas } from '../../../../helpers/formatter';
-
+import { getInterval, judgeInterval } from '../../../../helpers/judge-interval';
 const LIGHT_THEME = {
   FG_COLOR: '#24292F',
   BG_COLOR: '#ffffff',
@@ -28,10 +28,7 @@ interface ContributorChartProps {
 
 const ContributorChart = (props: ContributorChartProps): JSX.Element => {
   const { theme, width, height, data } = props;
-  const startTime = Number(data[0][0].split('-')[0]);
-  const endTime = Number(data[data.length - 1][0].split('-')[0]);
-  const timeLength = endTime - startTime;
-  const minInterval = timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
+  const { timeLength, minInterval } = getInterval(data);
   const divEL = useRef(null);
   const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;
 
@@ -138,23 +135,7 @@ const ContributorChart = (props: ContributorChartProps): JSX.Element => {
     let chartDOM = divEL.current;
     const instance = echarts.getInstanceByDom(chartDOM as any);
     if (instance) {
-      if (timeLength > 2) {
-        instance.on('dataZoom', (params: any) => {
-          let option = instance.getOption() as {
-            xAxis: { minInterval?: any }[];
-          };
-          const startValue = params.batch[0].start;
-          const endValue = params.batch[0].end;
-          let minInterval: number;
-          if (startValue == 0 && endValue == 100) {
-            minInterval = 365 * 24 * 3600 * 1000;
-          } else {
-            minInterval = 30 * 24 * 3600 * 1000;
-          }
-          option.xAxis[0].minInterval = minInterval;
-          instance.setOption(option);
-        });
-      }
+      judgeInterval(instance, option, timeLength);
       instance.setOption(option);
     }
   }, []);

src/pages/ContentScripts/features/repo-header-labels/OpenRankChart.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import * as echarts from 'echarts';
 
 import { formatNum, numberWithCommas } from '../../../../helpers/formatter';
-
+import { getInterval, judgeInterval } from '../../../../helpers/judge-interval';
 const LIGHT_THEME = {
   FG_COLOR: '#24292F',
   BG_COLOR: '#ffffff',
@@ -28,10 +28,7 @@ interface OpenRankChartProps {
 
 const OpenRankChart = (props: OpenRankChartProps): JSX.Element => {
   const { theme, width, height, data } = props;
-  const startTime = Number(data[0][0].split('-')[0]);
-  const endTime = Number(data[data.length - 1][0].split('-')[0]);
-  const timeLength = endTime - startTime;
-  const minInterval = timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
+  const { timeLength, minInterval } = getInterval(data);
   const divEL = useRef(null);
 
   const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;
@@ -139,23 +136,7 @@ const OpenRankChart = (props: OpenRankChartProps): JSX.Element => {
     let chartDOM = divEL.current;
     const instance = echarts.getInstanceByDom(chartDOM as any);
     if (instance) {
-      if (timeLength > 2) {
-        instance.on('dataZoom', (params: any) => {
-          let option = instance.getOption() as {
-            xAxis: { minInterval?: any }[];
-          };
-          const startValue = params.batch[0].start;
-          const endValue = params.batch[0].end;
-          let minInterval: number;
-          if (startValue == 0 && endValue == 100) {
-            minInterval = 365 * 24 * 3600 * 1000;
-          } else {
-            minInterval = 30 * 24 * 3600 * 1000;
-          }
-          option.xAxis[0].minInterval = minInterval;
-          instance.setOption(option);
-        });
-      }
+      judgeInterval(instance, option, timeLength);
       instance.setOption(option);
     }
   }, []);