feat: add chart tooltip (#801)

* style/improve-tooltip-chart * style:improve XAxis style * change back * style:further changes * fix:add judgment * fix:add judgment * style:improve XAxis style * feat:add tooltip to fork * feat:add tooltip to part of charts * feat: add chart info * feat:add tooltip to part of charts * feat: add tooltip * feat: add tooltip color * feat: change tooltip color --------- Co-authored-by: HallowMelon <[email protected]>
hypertrons · May 27, 2024 · a07fc4b · a07fc4b
1 parent 0902967
commit a07fc4b
Show file tree

Hide file tree

Showing 9 changed files with 237 additions and 24 deletions.
diff --git a/src/components/Bars.tsx b/src/components/Bars.tsx
@@ -38,7 +38,11 @@ const Bars = (props: BarsProps): JSX.Element => {
     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 divEL = useRef(null);
 
   const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;
@@ -60,7 +64,7 @@ const Bars = (props: BarsProps): JSX.Element => {
     xAxis: {
       type: 'time',
       // 30 * 3600 * 24 * 1000  milliseconds
-      minInterval: 2592000000,
+      minInterval: minInterval,
       splitLine: {
         show: false,
       },
@@ -162,6 +166,23 @@ 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);
+        });
+      }
       instance.setOption(option);
       if (onClick) {
         instance.on('click', (params) => {

diff --git a/src/locales/en/messages.json b/src/locales/en/messages.json
@@ -338,6 +338,31 @@
   "OSS_GPT_notAvailable": {
     "message": "OSS-GPT currently is **NOT AVAILABLE** for %v. If you want docs support for the repository, please check [this issue](https://github.com/hypertrons/hypertrons-crx/issues/609) and make a request there :)\n\nSee [all available docs](https://oss.x-lab.info/hypercrx/docsgpt_active_docs.json)\n\nThis chat widget can also be enabled/disabled in the extension options page whenever you want."
   },
+  "issue_icon": {
+    "message": "GitHub repository issue count over time. And you can zoom in/out on the axes using the mouse scroll wheel."
+  },
+  "pr_icon": {
+    "message": "GitHub repository pr count over time. And you can zoom in/out on the axes using the mouse scroll wheel."
+  },
+  "fork_icon": {
+    "message": "GitHub repository fork count over time. And you can zoom in/out on the axes using the mouse scroll wheel."
+  },
+  "star_icon": {
+    "message": "GitHub repository star count over time. And you can zoom in/out on the axes using the mouse scroll wheel."
+  },
+
+  "activity_icon": {
+    "message": "GitHub repository activity count over time. And you can zoom in/out on the axes using the mouse scroll wheel."
+  },
+  "openrank_icon": {
+    "message": "GitHub repository openrank count over time. And you can zoom in/out on the axes using the mouse scroll wheel."
+  },
+  "contributors_participants_icon": {
+    "message": "GitHub repository contributors and participants count over time. And you can zoom in/out on the axes using the mouse scroll wheel."
+  },
+  "merged_lines_icon": {
+    "message": "GitHub repository code lines change count over time. And you can zoom in/out on the axes using the mouse scroll wheel."
+  },
   "OSS_GPT_errorMessage": {
     "message": "Sorry, due to cost reasons, the OSS-GPT function is currently not available. Please follow [HyperCRX](https://github.com/hypertrons/hypertrons-crx) for the latest news."
   }

diff --git a/src/locales/zh_CN/messages.json b/src/locales/zh_CN/messages.json
@@ -338,6 +338,30 @@
   "OSS_GPT_notAvailable": {
     "message": "OSS-GPT 暂未支持 %v。如果您想使此仓库得到文档问答支持，请前往[该 issue](https://github.com/hypertrons/hypertrons-crx/issues/609) 提交需求 :)\n\n查看[所有已支持文档](https://oss.x-lab.info/hypercrx/docsgpt_active_docs.json)\n\n您也可以随时在扩展选项页面中启用/禁用此聊天小部件。"
   },
+  "issue_icon": {
+    "message": "GitHub仓库在当月的issue数"
+  },
+  "pr_icon": {
+    "message": "GitHub仓库在当月的pr数"
+  },
+  "fork_icon": {
+    "message": "GitHub仓库在当月的fork数"
+  },
+  "star_icon": {
+    "message": "GitHub仓库在当月的star数"
+  },
+  "activity_icon": {
+    "message": "GitHub仓库在当月的activity数"
+  },
+  "openrank_icon": {
+    "message": "GitHub仓库在当月的openrank值"
+  },
+  "contributors_participants_icon": {
+    "message": "GitHub仓库在当月的contributors和participants数"
+  },
+  "merged_lines_icon": {
+    "message": "GitHub仓库在当月的代码变化量"
+  },
   "OSS_GPT_errorMessage": {
     "message": "很抱歉，由于成本原因，目前 OSS-GPT 功能处于停用状态。请关注 [HyperCRX](https://github.com/hypertrons/hypertrons-crx) 获取最新消息。"
   }

diff --git a/src/pages/ContentScripts/features/repo-fork-tooltip/ForkChart.tsx b/src/pages/ContentScripts/features/repo-fork-tooltip/ForkChart.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useRef } from 'react';
 import * as echarts from 'echarts';
 
 import { formatNum, numberWithCommas } from '../../../../helpers/formatter';
+import { min } from 'lodash-es';
 
 const LIGHT_THEME = {
   FG_COLOR: '#24292F',
@@ -58,7 +59,6 @@ const ForkChart = (props: ForkChartProps): JSX.Element => {
       splitLine: {
         show: false,
       },
-
       minInterval: minInterval,
       axisLabel: {
         color: TH.FG_COLOR,

diff --git a/src/pages/ContentScripts/features/repo-fork-tooltip/view.tsx b/src/pages/ContentScripts/features/repo-fork-tooltip/view.tsx
@@ -9,7 +9,7 @@ import optionsStorage, {
 import generateDataByMonth from '../../../../helpers/generate-data-by-month';
 import ForkChart from './ForkChart';
 import { RepoMeta } from '../../../../api/common';
-
+import TooltipTrigger from '../../../../components/TooltipTrigger';
 const githubTheme = getGithubTheme();
 
 interface Props {
@@ -30,9 +30,25 @@ const View = ({ forks, meta }: Props): JSX.Element | null => {
 
   return (
     <>
-      <div className="chart-title">
-        {getMessageByLocale('fork_popup_title', options.locale)}
+      <div
+        className="chart-title"
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <div style={{ marginRight: '5px' }}>
+          {getMessageByLocale('fork_popup_title', options.locale)}
+        </div>
+
+        <TooltipTrigger
+          iconColor="grey"
+          size={13}
+          content={getMessageByLocale('fork_icon', options.locale)}
+        />
       </div>
+
       <ForkChart
         theme={githubTheme as 'light' | 'dark'}
         width={270}

diff --git a/src/pages/ContentScripts/features/repo-header-labels/view.tsx b/src/pages/ContentScripts/features/repo-header-labels/view.tsx
@@ -18,7 +18,7 @@ import { RepoMeta } from '../../../../api/common';
 import React, { useState, useEffect } from 'react';
 import { render } from 'react-dom';
 import $ from 'jquery';
-
+import TooltipTrigger from '../../../../components/TooltipTrigger';
 const githubTheme = getGithubTheme();
 
 interface Props {
@@ -55,8 +55,22 @@ const View = ({
           width={280}
           arrowPosition="top-middle"
         >
-          <div className="chart-title">
-            {getMessageByLocale('header_label_activity', options.locale)}
+          <div
+            className="chart-title"
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <div style={{ marginRight: '5px' }}>
+              {getMessageByLocale('header_label_activity', options.locale)}
+            </div>
+            <TooltipTrigger
+              iconColor="grey"
+              size={13}
+              content={getMessageByLocale('activity_icon', options.locale)}
+            />
           </div>
           <ActivityChart
             theme={githubTheme as 'light' | 'dark'}
@@ -70,8 +84,22 @@ const View = ({
           width={280}
           arrowPosition="top-middle"
         >
-          <div className="chart-title">
-            {getMessageByLocale('header_label_OpenRank', options.locale)}
+          <div
+            className="chart-title"
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <div style={{ marginRight: '5px' }}>
+              {getMessageByLocale('header_label_OpenRank', options.locale)}
+            </div>
+            <TooltipTrigger
+              iconColor="grey"
+              size={13}
+              content={getMessageByLocale('openrank_icon', options.locale)}
+            />
           </div>
           <OpenRankChart
             theme={githubTheme as 'light' | 'dark'}
@@ -85,17 +113,51 @@ const View = ({
           width={280}
           arrowPosition="top-middle"
         >
-          <div className="chart-title">
-            {getMessageByLocale('header_label_contributor', options.locale)}
+          <div
+            className="chart-title"
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <div style={{ marginRight: '5px' }}>
+              {getMessageByLocale('header_label_contributor', options.locale)}
+            </div>
+            <TooltipTrigger
+              iconColor="grey"
+              size={13}
+              content={getMessageByLocale(
+                'contributors_participants_icon',
+                options.locale
+              )}
+            />
           </div>
           <ContributorChart
             theme={githubTheme as 'light' | 'dark'}
             width={270}
             height={130}
             data={contributorData}
           />
-          <div className="chart-title">
-            {getMessageByLocale('header_label_participant', options.locale)}
+          <div
+            className="chart-title"
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <div style={{ marginRight: '5px' }}>
+              {getMessageByLocale('header_label_participant', options.locale)}
+            </div>
+            <TooltipTrigger
+              iconColor="grey"
+              size={13}
+              content={getMessageByLocale(
+                'contributors_participants_icon',
+                options.locale
+              )}
+            />
           </div>
           <ParticipantChart
             theme={githubTheme as 'light' | 'dark'}

diff --git a/src/pages/ContentScripts/features/repo-issue-tooltip/view.tsx b/src/pages/ContentScripts/features/repo-issue-tooltip/view.tsx
@@ -10,6 +10,7 @@ import optionsStorage, {
 import generateDataByMonth from '../../../../helpers/generate-data-by-month';
 import IssueChart from './IssueChart';
 import { RepoMeta } from '../../../../api/common';
+import TooltipTrigger from '../../../../components/TooltipTrigger';
 
 const githubTheme = getGithubTheme();
 
@@ -69,9 +70,25 @@ const View = ({
 
   return (
     <>
-      <div className="chart-title">
-        {getMessageByLocale('issue_popup_title', options.locale)}
+      <div
+        className="chart-title"
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <div style={{ marginRight: '5px' }}>
+          {getMessageByLocale('issue_popup_title', options.locale)}
+        </div>
+
+        <TooltipTrigger
+          iconColor="grey"
+          size={13}
+          content={getMessageByLocale('issue_icon', options.locale)}
+        />
       </div>
+
       <IssueChart
         theme={githubTheme as 'light' | 'dark'}
         width={300}

diff --git a/src/pages/ContentScripts/features/repo-pr-tooltip/view.tsx b/src/pages/ContentScripts/features/repo-pr-tooltip/view.tsx
@@ -11,7 +11,7 @@ import generateDataByMonth from '../../../../helpers/generate-data-by-month';
 import PRChart from './PRChart';
 import MergedLinesChart from './MergedLinesChart';
 import { RepoMeta } from '../../../../api/common';
-
+import TooltipTrigger from '../../../../components/TooltipTrigger';
 const githubTheme = getGithubTheme();
 
 export interface PRDetail {
@@ -88,19 +88,50 @@ const View = ({ currentRepo, PRDetail, meta }: Props): JSX.Element | null => {
 
   return (
     <>
-      <div className="chart-title">
-        {getMessageByLocale('pr_popup_title', options.locale)}
+      <div
+        className="chart-title"
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <div style={{ marginRight: '5px' }}>
+          {getMessageByLocale('pr_popup_title', options.locale)}
+        </div>
+        <TooltipTrigger
+          iconColor="grey"
+          size={13}
+          content={getMessageByLocale('pr_icon', options.locale)}
+        />
       </div>
+
       <PRChart
         theme={githubTheme as 'light' | 'dark'}
         width={330}
         height={200}
         data={generatePRChartData(PRDetail, meta.updatedAt)}
         onClick={onClick}
       />
-      <div className="chart-title">
-        {getMessageByLocale('merged_lines_popup_title', options.locale)}
+
+      <div
+        className="chart-title"
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <div style={{ marginRight: '5px' }}>
+          {getMessageByLocale('merged_lines_popup_title', options.locale)}
+        </div>
+        <TooltipTrigger
+          iconColor="grey"
+          size={13}
+          content={getMessageByLocale('merged_lines_icon', options.locale)}
+        />
       </div>
+
       <MergedLinesChart
         theme={githubTheme as 'light' | 'dark'}
         width={330}